-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathhowitworks.html
109 lines (99 loc) · 4.23 KB
/
howitworks.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Yarn Palette</title>
<meta name="description" content="Get the dominant colour or colour palette from an image, and find the closest matching yarns">
<meta name="author" content="Tom Fay">
<!-- Mobile Specific Metas –––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/skeleton.2.0.4.min.css">
<link rel="stylesheet" href="css/custom.css">
<style>
.swatch {
width: 10rem;
height: 10rem;
}
</style>
</head>
<body>
<div class="section">
<div class="container">
<h1 class="logo">How it works</h1>
<p>
The dominant colours are extracted from the image using <a href="http://lokeshdhakar.com/projects/color-thief/">colof-thief</a>. These colours are then
compared against pre-calculated (also using color-thief) colours for each of the shades of yarns in the selected range, using the
<a href="https://en.wikipedia.org/wiki/Color_difference#CIEDE2000">CIELAB delta E 2000</a> colour difference algorithm.
</p>
<p>
To see the pre-calculated colour choices, select a yarn range and click the button.
</p>
<form autocomplete="off" onsubmit="return false">
<label for="yarnType">Yarn</label>
<div class="row">
<div class="six columns">
<select id="yarnType" class="u-full-width">
<option value="" disabled hidden selected>Please choose...</option>
<option value="SPINDRIFT">Jamieson's of Shetland Spindrift and Double Knitting</option>
<option value="JANDS">Jamieson and Smith 2ply Jumper Weight</option>
<option value="LETTLOPI">Ístex Léttlopi</option>
<option value="KLINTA">Klinta Wolle Nate</option>
<option value="FINULLGARN">Rauma Finullgarn</option>
<option value="KPPALETTE">Knit Picks Palette</option>
<option value="SCSPECIALDK">Stylecraft Special DK</option>
<option value="SCSPECIALARAN">Stylecraft Special Aran</option>
</select>
</div>
<div class="six columns">
<button id="show-colours-button" class="button-primary hidden">Show colours!</button>
</div>
</div>
</form>
<div id="colour-display"></div>
</div>
</div>
<div class="section">
<div class="container">
<h2>Source code</h2>
<p>The source code for Yarn Palette is available on <a href="https://github.com/tofay/yarn-palette">github</a>.</p>
</div>
</div>
<script id='colour-template' type='text/x-mustache'>
{{#yarns}}
<div class="row">
<div class="six columns">
<figure style="display: inline-block">
<img src="{{src}}" alt="{{alt}}">
<figcaption>{{alt}}</figcaption>
</figure>
</div>
<div class="six columns">
<div class="swatch" style="background-color: rgb({{col_r}}, {{col_g}}, {{col_b}})"></div>
</div>
</div>
{{/yarns}}
</script>
<script src="js/color-thief.2.0.1.min.js"></script>
<script src="js/jquery.3.2.1.min.js"></script>
<script src="js/mustache.2.3.0.min.js"></script>
<script src="js/yarns.js"></script>
<script src="js/yarn-palette.js"></script>
<script>
// When a yarn type is selected show the hidden elements.
$('#yarnType').change(function () {
if ($(this).val() != '') {
$('.hidden').show()
}
});
$('#show-colours-button').unbind().click(function (event) {
var yarns = window[$('#yarnType').val()];
var context = {yarns: yarns.map(function(x) {
return {'alt': x[0], 'src': x[1], 'col_r': x[2][0], 'col_g': x[2][1], 'col_b': x[2][2]}
})
};
var colourHTML = Mustache.to_html($('#colour-template').html(), context);
$('#colour-display').empty().prepend(colourHTML);
});
</script>
</body>
</html>