-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
99 lines (94 loc) · 3.7 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name=viewport content="width=device-width initial-scale=1">
<title>Gradient tester</title>
<script src="./av.color.js"></script>
<style id="layerCSS">
.grad {
width: 400px;
height: 20px;
margin: 25px;
border: solid 1px black;
}
html,
body {
font-family: 'Arial';
}
</style>
</head>
<body>
<label>Paste your (linear) color ramp as JavaScript array </label>
<input type='text' id='ramp' style='width:50em' value="['#ffffcc','#a1dab4','#41b6c4','#2c7fb8','#253494']">
<br>
<label>Number of output steps </label>
<input type='number' step=1 id='steps' style='width:3em' value="5">
<br>
<br>
<hr> y = x
<div class='grad' id='linear'></div>
<input type='text' id='linearramp' style='width:50em'>
<br>
<br>
<hr> y = log(x)
<div class='grad' id='log'></div>
<input type='text' id='logramp' style='width:50em'>
<script>
var ramp2grad = function (ramptext, isLog) {
var ramp = ramptext.replace('[','').replace(']','').replace(/\"/g,'').replace(/\'/g,'').replace(/\s+/g, '').split(','),
lineargrad = new Color.Gradient(ramp.map(function (a, b) {
var step = b * 100 / (ramp.length - 1);
return {
color: a,
stop: step
}
})),
loggrad = new Color.Gradient(ramp.map(function (a, b) {
var step = b * 100 / (ramp.length - 1);
step = (step == 0) ? 0 : Math.log(step) * 100 / Math.log(100);
return {
color: a,
stop: step
}
}));
return (isLog) ? loggrad : lineargrad;
},
grad2ramp = function (gradient, steps) {
var ramp = [];
for (var i = 0; i < steps; i++) {
ramp.push(gradient.get(i * 100 / (steps - 1)).hex)
}
return "['" +ramp.join("','")+"']";
},
gradient2css = function (g) {
var css = '';
for (var i = 0; i < g.options.length; i++) {
css += (css.length > 0) ? ',' : '';
css += g.options[i].color + ' ' + g.options[i].stop.toFixed(0) + '%';
}
return css;
},
inputramp = document.querySelector('#ramp'),
inpusteps = document.querySelector('#steps'),
go = function () {
try {
var lineargrad = ramp2grad(inputramp.value, false),
loggrad = ramp2grad(inputramp.value, true),
steps = document.querySelector('#steps').value*1,
css1 = "linear-gradient(to right," + gradient2css(lineargrad) + ")",
css2 = "linear-gradient(to right," + gradient2css(loggrad) + ")";
document.querySelector('#linear').style.background = css1;
document.querySelector('#log').style.background = css2;
document.querySelector('#linearramp').value = grad2ramp(lineargrad,steps);
document.querySelector('#logramp').value = grad2ramp(loggrad,steps);
} catch (error) {
debugger;
}
};
inputramp.onkeyup = go;
inpusteps.onkeyup = go;
inpusteps.onchange = go;
go();
</script>
</body>