77 lines
2.1 KiB
JavaScript
77 lines
2.1 KiB
JavaScript
|
var socket;
|
||
|
var timer;
|
||
|
var timeout;
|
||
|
var modal = new bootstrap.Modal(document.getElementById("reconnectBackdrop"));
|
||
|
var slectedChannel = 8;
|
||
|
|
||
|
function addLabelAndListener(name, callback) {
|
||
|
let rootElement = document.getElementById(name + "-input")
|
||
|
rootElement.addEventListener('click', callback);
|
||
|
|
||
|
let inputArray = rootElement.elements[name + "-selection"];
|
||
|
for (let inputIndex = 0; inputIndex < inputArray.length; inputIndex++) {
|
||
|
let element = inputArray[inputIndex]
|
||
|
let label = document.createElement("label");
|
||
|
label.classList.add("btn");
|
||
|
label.classList.add("btn-outline-primary");
|
||
|
label.classList.add("text-capitalize");
|
||
|
label.setAttribute("for", element.id);
|
||
|
labelText = element.id.split('-')[0];
|
||
|
label.innerHTML = labelText;
|
||
|
element.insertAdjacentElement("afterend", label);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
addLabelAndListener("mode", modeSelectCallback);
|
||
|
addLabelAndListener("pattern", patternSelectCallback);
|
||
|
addLabelAndListener("channel", channelSelectCallback);
|
||
|
// addLabelAndListener("channelGlobal", channelSelectCallback);
|
||
|
|
||
|
var colorPicker = new iro.ColorPicker('#mainPicker', {
|
||
|
colors: [
|
||
|
'hsl(0, 100, 50)', // pure red
|
||
|
'hsl(180, 50, 100)' // pure green
|
||
|
],
|
||
|
layout: [{
|
||
|
component: iro.ui.Wheel,
|
||
|
options: {
|
||
|
wheelLightness: false
|
||
|
}
|
||
|
}, {
|
||
|
component: iro.ui.Slider,
|
||
|
options: {
|
||
|
sliderType: 'value'
|
||
|
}
|
||
|
}],
|
||
|
layoutDirection: 'horizontal',
|
||
|
// display: "flex",
|
||
|
width: 250,
|
||
|
margin: 0,
|
||
|
handleRadius: 14
|
||
|
});
|
||
|
|
||
|
var modulationPicker = new iro.ColorPicker('#modulationPicker', {
|
||
|
colors: [
|
||
|
'hsl(0, 100, 50)', // pure red
|
||
|
],
|
||
|
layout: [{
|
||
|
component: iro.ui.Wheel,
|
||
|
options: {
|
||
|
wheelLightness: false
|
||
|
}
|
||
|
}, {
|
||
|
component: iro.ui.Slider,
|
||
|
options: {
|
||
|
sliderType: 'value'
|
||
|
}
|
||
|
}],
|
||
|
layoutDirection: 'horizontal',
|
||
|
// display: "flex",
|
||
|
width: 250,
|
||
|
margin: 0,
|
||
|
handleRadius: 14
|
||
|
});
|
||
|
|
||
|
reconnect();
|
||
|
colorPicker.on("color:change", colorChangeCallback);
|
||
|
modulationPicker.on("color:change", colorChangeCallback);
|