naoto.hieda/dmx-flok
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add Color Picker

Browse source
This commit is contained in:
Patrick Boyd 2018-07-01 21:28:12 -05:00
parent 5b28517c71
commit 09e85667dc
1 changed files with 71 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
index.html
View file

@ -56,6 +56,30 @@
return 'channel_' + universe + '_' + channel; return 'channel_' + universe + '_' + channel;
} }
function rgb_to_array(str) {
m = str.match(/^#([0-9a-f]{6})$/i)[1];
if(m) {
return [
parseInt(m.substr(0,2),16),
parseInt(m.substr(2,2),16),
parseInt(m.substr(4,2),16)
];
}
}
function decimalToHex(d, padding) {
var hex = Number(d).toString(16);
padding = typeof (padding) === "undefined" || padding === null ? padding = 2 : padding;
while (hex.length < padding) {
hex = "0" + hex;
}
return hex;
}
function array_to_rgb(arr) {
return '#'+decimalToHex(arr[0])+decimalToHex(arr[1])+decimalToHex(arr[2]);
}
var socket = io(); var socket = io();
socket.on('init', function (msg) { socket.on('init', function (msg) {
$('#presets').empty(); $('#presets').empty();
@ -104,6 +128,11 @@
html += '<input id="' + html_id + '" type="range" min="0" value="0" max="255" orient="vertical">' html += '<input id="' + html_id + '" type="range" min="0" value="0" max="255" orient="vertical">'
html += '</div>' html += '</div>'
} }
if(devices[dev.type].channels.includes('red') && devices[dev.type].channels.includes('blue') && devices[dev.type].channels.includes('green')) {
var html_id = get_html_id(universe, dev.address);
html += '<input id="picker_'+html_id+'" type="color" data-red="'+devices[dev.type].channels.indexOf('red');
html += '" data-green="'+devices[dev.type].channels.indexOf('green')+'" data-blue="'+devices[dev.type].channels.indexOf('blue')+'"/>';
}
html += '</div>' html += '</div>'
} }
html += "</div>"; html += "</div>";
@ -111,9 +140,20 @@
} }
$("input").live("change", function(e) { $("input").live("change", function(e) {
var i = e.target.id.split('_'); var i = e.target.id.split('_');
var u = {}; if(i[0] === 'picker') {
u[i[2]] = e.target.value; var u = {};
socket.emit('update', i[1], u); var tar = $(e.target);
var value = rgb_to_array(tar.val());
u[Number(i[3])+Number(tar.data('red'))] = value[0];
u[Number(i[3])+Number(tar.data('green'))] = value[1];
u[Number(i[3])+Number(tar.data('blue'))] = value[2];
socket.emit('update', i[2], u);
}
else {
var u = {};
u[i[2]] = e.target.value;
socket.emit('update', i[1], u);
}
}); });
socket.emit('request_refresh'); socket.emit('request_refresh');
}); });
@ -121,6 +161,33 @@
for(var k in update) { for(var k in update) {
$('#' + get_html_id(universe, k)).attr('value', update[k]); $('#' + get_html_id(universe, k)).attr('value', update[k]);
} }
$("[id^=picker_channel_"+universe+"]").each(function(index, value){
var self = $(this);
var id = self.attr('id').split('_');
var obj = self.data();
var arr = Object.keys(obj).map(function(key){return obj[key];});
var _id = Number(id[3]);
var min = _id;
var max = min;
min += Math.min.apply( null, arr );
max += Math.max.apply( null, arr );
for(var k in update) {
if(k >= min && k <= max) {
var values = rgb_to_array(self.val());
var address = k - _id;
if(address === Number(self.data('red'))) {
values[0] = update[k];
}
else if(address === Number(self.data('green'))) {
values[1] = update[k];
}
else if(address === Number(self.data('blue'))) {
values[2] = update[k];
}
self.val(array_to_rgb(values));
}
}
});
}); });
</script> </script>
@ -151,4 +218,4 @@
</div> </div>
</div> </div>
</body> </body>
</html> </html>