-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathlsd01.html
114 lines (100 loc) · 4.14 KB
/
lsd01.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
110
111
112
113
114
<meta charset="utf-8">
<style>
* { background: black; color: white; font-family: sans-serif; }
body { width: 100%; height: 100%; }
#strip { position: relative; width: 70%; height: .9em; margin-left: 3em; background: white; }
.slider {
position: absolute; cursor: default;
width: .9em; height: .9em; line-height: .9em; border-radius: 50%;
background: black;
}
</style>
<script src="lib/iro.min.js"></script>
<h1>LED Strip Designer</h1>
<div id="strip">
<div class="slider" style="left: 0%; color: #ff0000" onmousedown="startDrag(event)">◉</div>
<div class="slider" style="left: 0%; color: #ff0000" onmousedown="startDrag(event)">◉</div>
<div class="slider" style="left: 0%; color: #ff0000" onmousedown="startDrag(event)">◉</div>
<div class="slider" style="left: 0%; color: #ff0000" onmousedown="startDrag(event)">◉</div>
<div class="slider" style="left: 0%; color: #ff0000" onmousedown="startDrag(event)">◉</div>
<div class="slider" style="left: 0%; color: #ff0000" onmousedown="startDrag(event)">◉</div>
<div class="slider" style="left: 25%; color: #ffff00" onmousedown="startDrag(event)">◉</div>
<div class="slider" style="left: 50%; color: #00ff00" onmousedown="startDrag(event)">◉</div>
<div class="slider" style="left: 75%; color: #0000ff" onmousedown="startDrag(event)">◉</div>
<div class="slider" style="left:100%; color: #ff0000" onmousedown="startDrag(event)">◉</div>
<div class="slider" style="left:100%; color: #ff0000" onmousedown="startDrag(event)">◉</div>
<div class="slider" style="left:100%; color: #ff0000" onmousedown="startDrag(event)">◉</div>
<div class="slider" style="left:100%; color: #ff0000" onmousedown="startDrag(event)">◉</div>
<div class="slider" style="left:100%; color: #ff0000" onmousedown="startDrag(event)">◉</div>
<div class="slider" style="left:100%; color: #ff0000" onmousedown="startDrag(event)">◉</div>
</div>
<script>
onload = ()=> {
for(var i of document.querySelectorAll('.slider'))
if(i.offsetLeft+i.offsetWidth >= i.parentElement.offsetWidth)
i.style.left = (i.parentElement.offsetWidth - i.offsetWidth)+'px';
for(var i of document.querySelectorAll('.slider')){
var p = document.createElement('div');
p.style.display = 'none';
i.appendChild(p);
var w = 200;
p.style.marginLeft = (p.parentElement.offsetWidth-w)/2 +'px';
p.style.marginTop = '10px';
new iro.ColorPicker(p,{ width: w, color: p.parentElement.style.color, handleRadius: 5 })
.on(['color:init', 'color:change'], function(color){
if(this.el){
this.el.parentElement.style.color = color.hexString;
if(color.hsl.l > 40)
this.el.parentElement.style.background = 'black';
else
this.el.parentElement.style.background = 'white';
}
draw();
});
}
draw();
}
var drag;
startDrag = (event)=>{
event.preventDefault();
if(event.target.classList.contains('slider')){
drag = event.target;
drag.dx = event.clientX - drag.offsetLeft;
// Show this picker only
for(i of document.querySelectorAll('.slider'))
if(i!=drag)
i.firstElementChild.style.display = 'none';
else
drag.firstElementChild.style.display = 'block';
}
}
window.addEventListener('mouseup', (event)=>{
drag = null;
})
document.body.addEventListener('mousemove', (event)=>{
if(drag){
strip = drag.parentElement;
var x = event.clientX - drag.dx;
if(x<0)
x = 0;
if(x>strip.offsetWidth-drag.offsetWidth)
x = strip.offsetWidth-drag.offsetWidth;
drag.style.left = x+'px';
var x = event.clientX - drag.dx + drag.offsetWidth/2 - drag.firstElementChild.offsetWidth/2;
drag.firstElementChild.style.left = x+'px';
drag.firstElementChild.style.marginTop = '10px';
}
console.log()
draw();
})
draw = ()=>{
var s = 'linear-gradient(to right, ';
for(var i of [].slice.call(document.querySelectorAll('.slider')).sort((i,j)=>i.offsetLeft-j.offsetLeft)){
var m = Number(getComputedStyle(i).marginLeft.replace('px', ''));
var x = (i.offsetLeft+i.offsetWidth/2) /i.parentElement.offsetWidth *100;
s += i.style.color+' '+x+'%, ';
}
s = s.substring(0,s.length-2)+')';
document.querySelector('#strip').style.background = s;
}
</script>