3.1.0.BETA1
Version Bump to 3.1.0.BETA1 bugfixes adressed issue: #39 uncooment //#define ENABLE_MQTT_INCLUDE_IP in defninitions.h
This commit is contained in:
bpohvoodoo
+284
-159
@@ -877,7 +877,7 @@ input[type=number], label{
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex xs12 sm7">
|
||||
<div class="flex xs12 sm8">
|
||||
<div class="sliders container">
|
||||
<div class="color-wrap" style="display:none">
|
||||
<div id="color-display"></div>
|
||||
@@ -912,6 +912,13 @@ input[type=number], label{
|
||||
<input type="number" id="speedNum">
|
||||
<input value="255" type="range" min="0" max="255" id="speed">
|
||||
</div>
|
||||
<div id="segments" class="container" style="text-align: left;">
|
||||
<div class="layout row wrap">
|
||||
<div class="flex xs12 sm2" id="selectSegLbl" style="text-align: left;"><p>selectSeg</p>
|
||||
<select id="selectseg" class="custom-select" style="border: 2px solid #aaaaaa; border-radius: 6px; width:90%; "></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="message" class="container hidden" style="text-align: left;">
|
||||
<div id="wsmessageLbl" style="text-align: left;"><p>wsMessage</p>
|
||||
<input type="text" id="wsmessage" style="border: 2px solid #aaaaaa; border-radius: 6px; width:100%;" />
|
||||
@@ -959,14 +966,25 @@ input[type=number], label{
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout row wrap">
|
||||
<div class="flex xs12 sm4"><p>selectCount</p>
|
||||
<input type="number" min="0" max="65535" id="selectcount" style="border: 2px solid #aaaaaa; border-radius: 6px; width:100%;" />
|
||||
<div class="flex xs12 sm3"><p>selectSegCnt</p>
|
||||
<input type="number" min="1" max="9" id="selectsegcnt" style="border: 2px solid #aaaaaa; border-radius: 6px; width:50%;" />
|
||||
</div>
|
||||
<div class="flex xs12 sm4"><p>selectRGBO</p>
|
||||
<div class="flex xs12 sm3"><p>selectCount</p>
|
||||
<input type="number" min="0" max="65535" id="selectcount" style="border: 2px solid #aaaaaa; border-radius: 6px; width:50%;" />
|
||||
</div>
|
||||
<div class="flex xs12 sm3"><p>selectRGBO</p>
|
||||
<select id="selectrgbo" class="custom-select"></select>
|
||||
</div>
|
||||
<div class="flex xs12 sm4"><p>selectPin</p>
|
||||
<input type="number" min="0" max="16" id="selectpin" style="border: 2px solid #aaaaaa; border-radius: 6px; width:100%;" />
|
||||
<div class="flex xs12 sm3"><p>selectPin</p>
|
||||
<input type="number" min="0" max="16" id="selectpin" style="border: 2px solid #aaaaaa; border-radius: 6px; width:50%;" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout row wrap">
|
||||
<div class="flex xs12 sm6"><p>segStart</p>
|
||||
<input type="number" min="0" max="*jsvariable" id="segstart" style="border: 2px solid #aaaaaa; border-radius: 6px; width:90%;" />
|
||||
</div>
|
||||
<div class="flex xs12 sm6"><p>segStop</p>
|
||||
<input type="number" min="0" max="*jsvariable" id="segstop" style="border: 2px solid #aaaaaa; border-radius: 6px; width:90%;" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout row wrap">
|
||||
@@ -1030,6 +1048,7 @@ var language = {
|
||||
connectError2: " times. Please use the RECONNECT button to try again.",
|
||||
loadModes: "Loading modes ...", // This language-string is not translated (settings not loaded yet)
|
||||
loadSettings: "Loading settings ...", // This language-string is not translated (settings not loaded yet)
|
||||
loadConfig: "Loading configuration ...",
|
||||
loadWebsock: "Connecting websockets ...",
|
||||
loadReady: "Ready ...",
|
||||
loadError: "Error loading animation modes, please try again...", // This language-string is not translated (settings not loaded yet)
|
||||
@@ -1043,6 +1062,9 @@ var language = {
|
||||
white: "White",
|
||||
not_greater: "cannot enter numbers greater than 255",
|
||||
not_less: "cannot enter numbers less than 0",
|
||||
selectSeg: "Select segment",
|
||||
segStart: "First LED of selected segment",
|
||||
segStop: "Last LED of selected segment",
|
||||
wsMessage: "Websocket Message:",
|
||||
selectLanguage: "Select Language:",
|
||||
selectHostname: "Hostname:",
|
||||
@@ -1050,6 +1072,7 @@ var language = {
|
||||
selectMQTTPort: "and Port:",
|
||||
selectMQTTUser: "MQTT Username:",
|
||||
selectMQTTPass: "MQTT Password:",
|
||||
selectSegCnt: "Number of Segments:",
|
||||
selectCount: "Strip LED Count:",
|
||||
selectRGBO: "RGB Order:",
|
||||
selectPin: "Strip GPIO Pin:",
|
||||
@@ -1086,6 +1109,7 @@ var language = {
|
||||
connectError2: " keer geprobeerd. Gebruik de Verbind opnieuw knop om opnieuw te proberen.",
|
||||
loadModes: "Modes laden...", // This language-string is not translated (settings not loaded yet)
|
||||
loadSettings: "Instellingen laden...", // This language-string is not translated (settings not loaded yet)
|
||||
loadConfig: "Configuratie laden ...",
|
||||
loadWebsock: "Websockets verbinden...",
|
||||
loadReady: "Klaar...",
|
||||
loadError: "Fout bij laden van animatie modes, probeer opnieuw...", // This language-string is not translated (settings not loaded yet)
|
||||
@@ -1099,6 +1123,9 @@ var language = {
|
||||
white: "Wit",
|
||||
not_greater: "Geen nummers hoger dan 255",
|
||||
not_less: "Geen nummers lager dan 0",
|
||||
selectSeg: "Selecteer segment",
|
||||
segStart: "Eerste LED van huidige segmenten",
|
||||
segStop: "Laatste LED van huidige segmenten",
|
||||
wsMessage: "Websocket message:",
|
||||
selectLanguage: "Selecteer Taal:",
|
||||
selectHostname: "Hostname:",
|
||||
@@ -1106,6 +1133,7 @@ var language = {
|
||||
selectMQTTPort: "en Port:",
|
||||
selectMQTTUser: "MQTT gebruikersnaam:",
|
||||
selectMQTTPass: "MQTT wachtwoord:",
|
||||
selectSegCnt: "Number of Segments:",
|
||||
selectCount: "LED nummer:",
|
||||
selectPin: "Strip GPIO Pin:",
|
||||
selectRGBO: "RGB Order:",
|
||||
@@ -1142,6 +1170,7 @@ var language = {
|
||||
connectError2: " mal versucht. Benutze WIEDER VERBINDEN, um es nochmal zu probieren.",
|
||||
loadModes: "Lade Modi ...", // This language-string is not translated (settings not loaded yet)
|
||||
loadSettings: "Lade Einstellungen ...", // This language-string is not translated (settings not loaded yet)
|
||||
loadConfig: "Lade Konfiguration ...",
|
||||
loadWebsock: "Verbinde Websockets ...",
|
||||
loadReady: "Fertig ...",
|
||||
loadError: "Fehler beim Laden der Animations-Modi, bitte nochmal versuchen...", // This language-string is not translated (settings not loaded yet)
|
||||
@@ -1155,6 +1184,9 @@ var language = {
|
||||
white: "Weiß",
|
||||
not_greater: "Akzeptiere keine Nummern größer 255",
|
||||
not_less: "Akzeptiere keine Nummern kleiner 0",
|
||||
selectSeg: "Segment wählen",
|
||||
segStart: "Erste LED des gewählten Segments",
|
||||
segStop: "Letzte LED des gewählten Segments",
|
||||
wsMessage: "Websocket Message:",
|
||||
selectLanguage: "Sprache auswählen:",
|
||||
selectHostname: "Hostname:",
|
||||
@@ -1162,6 +1194,7 @@ var language = {
|
||||
selectMQTTPort: "und Port:",
|
||||
selectMQTTUser: "MQTT Username:",
|
||||
selectMQTTPass: "MQTT Password:",
|
||||
selectSegCnt: "Anzahl Segmente:",
|
||||
selectCount: "Strip LED Anzahl:",
|
||||
selectRGBO: "RGB Reihenfolge:",
|
||||
selectPin: "Strip GPIO Pin:",
|
||||
@@ -1281,19 +1314,31 @@ var config = {
|
||||
mqtt_port: 0,
|
||||
mqtt_user: "",
|
||||
mqtt_pass: "",
|
||||
ws_seg: 1,
|
||||
ws_cnt: 0,
|
||||
ws_rgbo: "",
|
||||
ws_pin: 0,
|
||||
ws_fxopt: 0,
|
||||
enable_rgbw: false,
|
||||
transitionEffects: true
|
||||
ws_trans: false,
|
||||
enable_rgbw: false
|
||||
};
|
||||
var data = {
|
||||
var state = {
|
||||
mode: 0,
|
||||
segment: 0,
|
||||
brightness: 0
|
||||
}
|
||||
|
||||
var segstate = {
|
||||
start: 0,
|
||||
stop: 0,
|
||||
mode: null,
|
||||
speed: 0,
|
||||
color: {w:0, r:0, g:0, b:0, hex:"00000000", w2:0, r2:0, g2:0, b2:0, hex2:"00000000", w3:0, r3:0, g3:0, b3:0, hex3:"00000000"},
|
||||
brightness: 192,
|
||||
speed: 192,
|
||||
ws2812fx_mode: null,
|
||||
ws_fxopt: 0
|
||||
}
|
||||
|
||||
|
||||
var data = {
|
||||
init: true,
|
||||
color_num: 1,
|
||||
modes: [],
|
||||
connection: null,
|
||||
@@ -1301,7 +1346,6 @@ var data = {
|
||||
num_additional_connections: 0,
|
||||
is_connected: false,
|
||||
refresh_interval: 0,
|
||||
init: true,
|
||||
color_disabled: false
|
||||
};
|
||||
var sendIt; // Timer to prevent lots of sending
|
||||
@@ -1331,17 +1375,17 @@ function displayColors(all = false) {
|
||||
clearTimeout(sendIt);
|
||||
sendIt = setTimeout(function() { set_color(); }, 50);
|
||||
} else {
|
||||
document.getElementById("colorSel1").style.backgroundColor = `rgb(${data.color.r}, ${data.color.g}, ${data.color.b})`;
|
||||
document.getElementById("colorHex1").innerHTML = "#" + data.color.hex;
|
||||
document.getElementById("colorSel2").style.backgroundColor = `rgb(${data.color.r2}, ${data.color.g2}, ${data.color.b2})`;
|
||||
document.getElementById("colorHex2").innerHTML = "#" + data.color.hex2;
|
||||
document.getElementById("colorSel3").style.backgroundColor = `rgb(${data.color.r3}, ${data.color.g3}, ${data.color.b3})`;
|
||||
document.getElementById("colorHex3").innerHTML = "#" + data.color.hex3;
|
||||
document.getElementById("colorSel1").style.backgroundColor = `rgb(${segstate.color.r}, ${segstate.color.g}, ${segstate.color.b})`;
|
||||
document.getElementById("colorHex1").innerHTML = "#" + segstate.color.hex;
|
||||
document.getElementById("colorSel2").style.backgroundColor = `rgb(${segstate.color.r2}, ${segstate.color.g2}, ${segstate.color.b2})`;
|
||||
document.getElementById("colorHex2").innerHTML = "#" + segstate.color.hex2;
|
||||
document.getElementById("colorSel3").style.backgroundColor = `rgb(${segstate.color.r3}, ${segstate.color.g3}, ${segstate.color.b3})`;
|
||||
document.getElementById("colorHex3").innerHTML = "#" + segstate.color.hex3;
|
||||
}
|
||||
}
|
||||
|
||||
// initial color val numbers when DOM is loaded
|
||||
function colorNumrVals(){
|
||||
function colorNumVals(){
|
||||
redNumVal.value = red.value;
|
||||
greenNumVal.value = green.value;
|
||||
blueNumVal.value = blue.value;
|
||||
@@ -1377,44 +1421,44 @@ function initSliderColors(){
|
||||
function changeRangeNumVal(){
|
||||
redNumVal.addEventListener('change', ()=>{
|
||||
// make sure numbers are entered between 0 to 255
|
||||
red.value = checkNumVal(redNumVal, red.value);
|
||||
if (data.color_num === 1) data.color.r = red.value;
|
||||
if (data.color_num === 2) data.color.r2 = red.value;
|
||||
if (data.color_num === 3) data.color.r3 = red.value;
|
||||
red.value = checkNumVal8(redNumVal, red.value);
|
||||
if (data.color_num === 1) segstate.color.r = red.value;
|
||||
if (data.color_num === 2) segstate.color.r2 = red.value;
|
||||
if (data.color_num === 3) segstate.color.r3 = red.value;
|
||||
initSliderColors();
|
||||
displayColors();
|
||||
});
|
||||
greenNumVal.addEventListener('change', ()=>{
|
||||
// make sure numbers are entered between 0 to 255
|
||||
green.value = checkNumVal(greenNumVal, green.value);
|
||||
if (data.color_num === 1) data.color.g = green.value;
|
||||
if (data.color_num === 2) data.color.g2 = green.value;
|
||||
if (data.color_num === 3) data.color.g3 = green.value;
|
||||
green.value = checkNumVal8(greenNumVal, green.value);
|
||||
if (data.color_num === 1) segstate.color.g = green.value;
|
||||
if (data.color_num === 2) segstate.color.g2 = green.value;
|
||||
if (data.color_num === 3) segstate.color.g3 = green.value;
|
||||
initSliderColors();
|
||||
displayColors();
|
||||
});
|
||||
blueNumVal.addEventListener('change', ()=>{
|
||||
// make sure numbers are entered between 0 to 255
|
||||
blue.value = checkNumVal(blueNumVal, blue.value);
|
||||
if (data.color_num === 1) data.color.b = blue.value;
|
||||
if (data.color_num === 2) data.color.b2 = blue.value;
|
||||
if (data.color_num === 3) data.color.b3 = blue.value;
|
||||
blue.value = checkNumVal8(blueNumVal, blue.value);
|
||||
if (data.color_num === 1) segstate.color.b = blue.value;
|
||||
if (data.color_num === 2) segstate.color.b2 = blue.value;
|
||||
if (data.color_num === 3) segstate.color.b3 = blue.value;
|
||||
initSliderColors();
|
||||
displayColors();
|
||||
});
|
||||
whiteNumVal.addEventListener('change', ()=>{
|
||||
// make sure numbers are entered between 0 to 255
|
||||
white.value = checkNumVal(whiteNumVal, white.value);
|
||||
if (data.color_num === 1) data.color.w = white.value;
|
||||
if (data.color_num === 2) data.color.w2 = white.value;
|
||||
if (data.color_num === 3) data.color.w3 = white.value;
|
||||
white.value = checkNumVal8(whiteNumVal, white.value);
|
||||
if (data.color_num === 1) segstate.color.w = white.value;
|
||||
if (data.color_num === 2) segstate.color.w2 = white.value;
|
||||
if (data.color_num === 3) segstate.color.w3 = white.value;
|
||||
initSliderColors();
|
||||
displayColors();
|
||||
});
|
||||
brightNumVal.addEventListener('change', ()=>{
|
||||
// make sure numbers are entered between 0 to 255
|
||||
bright.value = checkNumVal(brightNumVal, bright.value);
|
||||
data.brightness = bright.value;
|
||||
bright.value = checkNumVal8(brightNumVal, bright.value);
|
||||
state.brightness = bright.value;
|
||||
initSliderColors();
|
||||
// Send Brightness
|
||||
clearTimeout(sendIt);
|
||||
@@ -1422,14 +1466,14 @@ function changeRangeNumVal(){
|
||||
});
|
||||
speedNumVal.addEventListener('change', ()=>{
|
||||
// make sure numbers are entered between 0 to 255
|
||||
speed.value = checkNumVal(speedNumVal, speed.value);
|
||||
data.speed = speed.value;
|
||||
speed.value = checkNumVal8(speedNumVal, speed.value);
|
||||
segstate.speed = speed.value;
|
||||
// Send Speed
|
||||
clearTimeout(sendIt);
|
||||
sendIt = setTimeout(function() { set_speed(); }, 50);
|
||||
});
|
||||
}
|
||||
function checkNumVal(numVal, curVal) {
|
||||
function checkNumVal8(numVal, curVal) {
|
||||
if(numVal.value > 255) {
|
||||
alert(language[settings.lang]["not_greater"]);
|
||||
numVal.value = curVal;
|
||||
@@ -1440,6 +1484,17 @@ function checkNumVal(numVal, curVal) {
|
||||
return numVal.value;
|
||||
}
|
||||
|
||||
function checkNumVal16(numVal, curVal) {
|
||||
if(numVal.value > 65535) {
|
||||
alert(language[settings.lang]["not_greater"]);
|
||||
numVal.value = curVal;
|
||||
} else if(numVal.value < 0) {
|
||||
alert(language[settings.lang]["not_less"]);
|
||||
numVal.value = curVal;
|
||||
}
|
||||
return numVal.value;
|
||||
}
|
||||
|
||||
// Color Sliders controls
|
||||
function initcolorSliders(){
|
||||
var event = new Event('change');
|
||||
@@ -1447,7 +1502,7 @@ function initcolorSliders(){
|
||||
displayColors();
|
||||
initSliderColors();
|
||||
changeRangeNumVal();
|
||||
colorNumrVals();
|
||||
colorNumVals();
|
||||
// Trigger onChange event to send value
|
||||
redNumVal.dispatchEvent(event);
|
||||
});
|
||||
@@ -1456,7 +1511,7 @@ function initcolorSliders(){
|
||||
displayColors();
|
||||
initSliderColors();
|
||||
changeRangeNumVal();
|
||||
colorNumrVals();
|
||||
colorNumVals();
|
||||
// Trigger onChange event to send value
|
||||
greenNumVal.dispatchEvent(event);
|
||||
});
|
||||
@@ -1465,7 +1520,7 @@ function initcolorSliders(){
|
||||
displayColors();
|
||||
initSliderColors();
|
||||
changeRangeNumVal();
|
||||
colorNumrVals();
|
||||
colorNumVals();
|
||||
// Trigger onChange event to send value
|
||||
blueNumVal.dispatchEvent(event);
|
||||
});
|
||||
@@ -1474,7 +1529,7 @@ function initcolorSliders(){
|
||||
displayColors();
|
||||
initSliderColors();
|
||||
changeRangeNumVal();
|
||||
colorNumrVals();
|
||||
colorNumVals();
|
||||
// Trigger onChange event to send value
|
||||
whiteNumVal.dispatchEvent(event);
|
||||
});
|
||||
@@ -1482,14 +1537,14 @@ function initcolorSliders(){
|
||||
bright.addEventListener('input', () => {
|
||||
initSliderColors();
|
||||
changeRangeNumVal();
|
||||
colorNumrVals();
|
||||
colorNumVals();
|
||||
// Trigger onChange event to send value
|
||||
brightNumVal.dispatchEvent(event);
|
||||
});
|
||||
|
||||
speed.addEventListener('input', () => {
|
||||
changeRangeNumVal();
|
||||
colorNumrVals();
|
||||
colorNumVals();
|
||||
// Trigger onChange event to send value
|
||||
speedNumVal.dispatchEvent(event);
|
||||
});
|
||||
@@ -1518,8 +1573,11 @@ function xhttp(url, post, callback) {
|
||||
xhr.send(post);
|
||||
}
|
||||
function getModes() {
|
||||
document.getElementById("percentage").innerHTML = "0%";
|
||||
document.getElementById("percentage-done").setAttribute("stroke-dasharray", "0,100");
|
||||
document.getElementById("modal-content").innerHTML = language.en.loadModes;
|
||||
xhttp("http://" + host + "/get_modes", false, function(e) {
|
||||
//console.log("Getting modes list via REST:", e);
|
||||
console.log("Getting modes list via REST:", e);
|
||||
if (e && e.substring(0,6) !== "ERROR!") {
|
||||
modes = JSON.parse(e);
|
||||
if (typeof modes[0] !== "undefined") {
|
||||
@@ -1538,6 +1596,9 @@ function getModes() {
|
||||
|
||||
}
|
||||
function getConfig() {
|
||||
document.getElementById("percentage").innerHTML = "75%";
|
||||
document.getElementById("percentage-done").setAttribute("stroke-dasharray", "75,100");
|
||||
document.getElementById("modal-content").innerHTML = language.en.loadConfig;
|
||||
xhttp("http://" + host + "/config", false, function(e) {
|
||||
console.log("Getting config via REST:", e);
|
||||
if (e && e.substring(0,6) !== "ERROR!") {
|
||||
@@ -1548,14 +1609,14 @@ function getConfig() {
|
||||
if (typeof res.mqtt_port !== "undefined") config.mqtt_port = res.mqtt_port;
|
||||
if (typeof res.mqtt_user !== "undefined") config.mqtt_user = res.mqtt_user;
|
||||
if (typeof res.mqtt_pass !== "undefined") config.mqtt_pass = res.mqtt_pass;
|
||||
if (typeof res.ws_seg !== "undefined") config.ws_seg = res.ws_seg;
|
||||
if (typeof res.ws_cnt !== "undefined") config.ws_cnt = res.ws_cnt;
|
||||
if (typeof res.ws_rgbo !== "undefined") {
|
||||
config.ws_rgbo = res.ws_rgbo;
|
||||
config.enable_rgbw = config.ws_rgbo.includes("W");
|
||||
}
|
||||
if (typeof res.ws_pin !== "undefined") config.ws_pin = res.ws_pin;
|
||||
if (typeof res.ws_fxopt !== "undefined") config.ws_fxopt = res.ws_fxopt;
|
||||
if (typeof res.transEffect !== "undefined") config.transitionEffects = res.transEffect;
|
||||
if (typeof res.ws_trans !== "undefined") config.ws_trans = res.ws_trans;
|
||||
}
|
||||
} else {
|
||||
console.error(e);
|
||||
@@ -1567,9 +1628,9 @@ function getConfig() {
|
||||
} else {
|
||||
document.getElementById("white").parentNode.className = "hidden";
|
||||
white.value = 0;
|
||||
data.color.w = 0;
|
||||
data.color.w2 = 0;
|
||||
data.color.w3 = 0;
|
||||
segstate.color.w = 0;
|
||||
segstate.color.w2 = 0;
|
||||
segstate.color.w3 = 0;
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -1600,11 +1661,11 @@ function showModes(mode, index) {
|
||||
document.getElementById("modes").appendChild(div);
|
||||
}
|
||||
function readSettings() {
|
||||
document.getElementById("percentage").innerHTML = "33%";
|
||||
document.getElementById("percentage-done").setAttribute("stroke-dasharray", "33,100");
|
||||
document.getElementById("percentage").innerHTML = "25%";
|
||||
document.getElementById("percentage-done").setAttribute("stroke-dasharray", "25,100");
|
||||
document.getElementById("modal-content").innerHTML = language.en.loadSettings;
|
||||
xhttp("http://" + host + "/uistate.json", false, function(e) {
|
||||
//console.log("readSettings()", e);
|
||||
console.log("Read Settings: ", e);
|
||||
tmpsettings = (e && e.substring(0,6) !== "ERROR!") ? JSON.parse(e) : {};
|
||||
// Replace default settings with saved ones
|
||||
for (var set in settings) {
|
||||
@@ -1612,8 +1673,12 @@ function readSettings() {
|
||||
if (typeof(tmpsettings[set]) !== "undefined") settings[set] = tmpsettings[set];
|
||||
}
|
||||
applySettings();
|
||||
if (e && e.substring(0,6) !== "ERROR!") connectAdditionalNodes();
|
||||
else console.warn("ERROR loading settings", e);
|
||||
if (e && e.substring(0,6) !== "ERROR!") {
|
||||
connectAdditionalNodes();
|
||||
} else {
|
||||
console.warn("ERROR loading settings", e);
|
||||
saveSettings();
|
||||
}
|
||||
});
|
||||
}
|
||||
function applySettings() {
|
||||
@@ -1678,13 +1743,13 @@ function onSelectColNum(colnum) {
|
||||
x = document.getElementById("colorSel" + colnum);
|
||||
x.className = x.className.replace(/\belevation-3\b/g, "elevation-9");
|
||||
// Set ColorPicker and Sliders to selected color
|
||||
red.value = data.color["r" + (colnum > 1 ? colnum : "")];
|
||||
green.value = data.color["g" + (colnum > 1 ? colnum : "")];
|
||||
blue.value = data.color["b" + (colnum > 1 ? colnum : "")];
|
||||
white.value = data.color["w" + (colnum > 1 ? colnum : "")];
|
||||
red.value = segstate.color["r" + (colnum > 1 ? colnum : "")];
|
||||
green.value = segstate.color["g" + (colnum > 1 ? colnum : "")];
|
||||
blue.value = segstate.color["b" + (colnum > 1 ? colnum : "")];
|
||||
white.value = segstate.color["w" + (colnum > 1 ? colnum : "")];
|
||||
initSliderColors();
|
||||
changeRangeNumVal();
|
||||
colorNumrVals();
|
||||
colorNumVals();
|
||||
}
|
||||
function initSettings() {
|
||||
// Add languages to language select
|
||||
@@ -1736,11 +1801,33 @@ function initSettings() {
|
||||
config.mqtt_pass = mqtt_pass.value;
|
||||
ws_send("Cmw" + config.mqtt_pass);
|
||||
});
|
||||
var count = document.getElementById("selectcount");
|
||||
count.value = config.ws_cnt;
|
||||
count.addEventListener('change', ()=>{
|
||||
config.ws_cnt = count.value;
|
||||
ws_send("Csc" + config.ws_cnt);
|
||||
var selsegment = document.getElementById("selectseg");
|
||||
for(var i = 0; i < config.ws_seg; i++) {
|
||||
var option = document.createElement("OPTION");
|
||||
option.setAttribute("value", i);
|
||||
option.innerHTML = i;
|
||||
selsegment.appendChild(option);
|
||||
}
|
||||
selsegment.value = state.segment;
|
||||
selsegment.addEventListener('change', ()=>{
|
||||
state.segment = selsegment.value;
|
||||
ws_send("Ss" + state.segment);
|
||||
});
|
||||
var num_segments = document.getElementById("selectsegcnt");
|
||||
num_segments.value = config.ws_seg;
|
||||
num_segments.addEventListener('change', ()=>{
|
||||
config.ws_seg = num_segments.value;
|
||||
ws_send("Css" + config.ws_seg);
|
||||
while (selsegment.firstChild) {
|
||||
selsegment.removeChild(selsegment.firstChild);
|
||||
}
|
||||
for(var i = 0; i < config.ws_seg; i++) {
|
||||
var option = document.createElement("OPTION");
|
||||
option.setAttribute("value", i);
|
||||
option.innerHTML = i;
|
||||
selsegment.appendChild(option);
|
||||
}
|
||||
selsegment.value = state.segment;
|
||||
});
|
||||
var pin = document.getElementById("selectpin");
|
||||
pin.value = config.ws_pin;
|
||||
@@ -1760,6 +1847,28 @@ function initSettings() {
|
||||
config.ws_rgbo = rgbo.value;
|
||||
ws_send("Csr" + config.ws_rgbo);
|
||||
});
|
||||
var start = document.getElementById("segstart");
|
||||
start.setAttribute("max",config.ws_cnt-1);
|
||||
start.value = segstate.start;
|
||||
start.addEventListener('change', ()=>{
|
||||
segstate.start = start.value;
|
||||
ws_send("S[" + segstate.start);
|
||||
});
|
||||
var stop = document.getElementById("segstop");
|
||||
stop.setAttribute("max",config.ws_cnt-1);
|
||||
stop.value = segstate.stop;
|
||||
stop.addEventListener('change', ()=>{
|
||||
segstate.stop = stop.value;
|
||||
ws_send("S]" + segstate.stop);
|
||||
});
|
||||
var count = document.getElementById("selectcount");
|
||||
count.value = config.ws_cnt;
|
||||
count.addEventListener('change', ()=>{
|
||||
config.ws_cnt = count.value;
|
||||
ws_send("Csc" + config.ws_cnt);
|
||||
start.setAttribute("max",config.ws_cnt-1);
|
||||
stop.setAttribute("max",config.ws_cnt-1);
|
||||
});
|
||||
var optrev = document.getElementById("selectoptrev");
|
||||
for (var code in selectoptrev) {
|
||||
var option = document.createElement("OPTION");
|
||||
@@ -1767,10 +1876,10 @@ function initSettings() {
|
||||
option.innerHTML = selectoptrev[code];
|
||||
optrev.appendChild(option);
|
||||
}
|
||||
optrev.value = (config.ws_fxopt & 128);
|
||||
optrev.value = (segstate.ws_fxopt & 128);
|
||||
optrev.addEventListener('change', ()=>{
|
||||
config.ws_fxopt = optrev.value | optfade.value | optgamma.value | optsize.value;
|
||||
ws_send("Cso" + config.ws_fxopt);
|
||||
segstate.ws_fxopt = optrev.value | optfade.value | optgamma.value | optsize.value;
|
||||
ws_send("So" + segstate.ws_fxopt);
|
||||
});
|
||||
var optfade = document.getElementById("selectoptfade");
|
||||
for (var code in selectoptfade) {
|
||||
@@ -1779,10 +1888,10 @@ function initSettings() {
|
||||
option.innerHTML = selectoptfade[code];
|
||||
optfade.appendChild(option);
|
||||
}
|
||||
optfade.value = (config.ws_fxopt & 112);
|
||||
optfade.value = (segstate.ws_fxopt & 112);
|
||||
optfade.addEventListener('change', ()=>{
|
||||
config.ws_fxopt = optrev.value | optfade.value | optgamma.value | optsize.value;
|
||||
ws_send("Cso" + config.ws_fxopt);
|
||||
segstate.ws_fxopt = optrev.value | optfade.value | optgamma.value | optsize.value;
|
||||
ws_send("So" + segstate.ws_fxopt);
|
||||
});
|
||||
var optgamma = document.getElementById("selectoptgamma");
|
||||
for (var code in selectoptgamma) {
|
||||
@@ -1791,10 +1900,10 @@ function initSettings() {
|
||||
option.innerHTML = selectoptgamma[code];
|
||||
optgamma.appendChild(option);
|
||||
}
|
||||
optgamma.value = (config.ws_fxopt & 8);
|
||||
optgamma.value = (segstate.ws_fxopt & 8);
|
||||
optgamma.addEventListener('change', ()=>{
|
||||
config.ws_fxopt = optrev.value | optfade.value | optgamma.value | optsize.value;
|
||||
ws_send("Cso" + config.ws_fxopt);
|
||||
segstate.ws_fxopt = optrev.value | optfade.value | optgamma.value | optsize.value;
|
||||
ws_send("So" + segstate.ws_fxopt);
|
||||
});
|
||||
var optsize = document.getElementById("selectoptsize");
|
||||
for (var code in selectoptsize) {
|
||||
@@ -1803,10 +1912,10 @@ function initSettings() {
|
||||
option.innerHTML = selectoptsize[code];
|
||||
optsize.appendChild(option);
|
||||
}
|
||||
optsize.value = (config.ws_fxopt & 6)
|
||||
optsize.value = (segstate.ws_fxopt & 6)
|
||||
optsize.addEventListener('change', ()=>{
|
||||
config.ws_fxopt = optrev.value | optfade.value | optgamma.value | optsize.value;
|
||||
ws_send("Cso" + config.ws_fxopt);
|
||||
segstate.ws_fxopt = optrev.value | optfade.value | optgamma.value | optsize.value;
|
||||
ws_send("So" + segstate.ws_fxopt);
|
||||
});
|
||||
slavenodes.value = settings.slave_nodes;
|
||||
lang.addEventListener('change', ()=>{
|
||||
@@ -1855,6 +1964,7 @@ function initSettings() {
|
||||
settings.theme_back = colback.value;
|
||||
document.getElementById("container").style.backgroundColor = settings.theme_back;
|
||||
document.getElementById("language").style.backgroundColor = settings.theme_back;
|
||||
document.getElementById("selectseg").style.backgroundColor = settings.theme_back;
|
||||
document.getElementById("selectrgbo").style.backgroundColor = settings.theme_back;
|
||||
document.getElementById("selectoptrev").style.backgroundColor = settings.theme_back;
|
||||
document.getElementById("selectoptfade").style.backgroundColor = settings.theme_back;
|
||||
@@ -1867,6 +1977,7 @@ function initSettings() {
|
||||
for (var i = 0; i < icons.length; i++) {
|
||||
icons[i].style.color = (yiq >= 125) ? '#222' : '#EEE';
|
||||
}
|
||||
document.getElementById("selectSegLbl").style.color = (yiq >= 125) ? '#111' : '#EEE';
|
||||
document.getElementById("wsmessageLbl").style.color = (yiq >= 125) ? '#111' : '#EEE';
|
||||
document.getElementById("redNum").style.color = (yiq >= 125) ? '#111' : '#EEE';
|
||||
document.getElementById("greenNum").style.color = (yiq >= 125) ? '#111' : '#EEE';
|
||||
@@ -2018,8 +2129,8 @@ function ws_reconnect() {
|
||||
|
||||
function ws_connect() {
|
||||
data.connection = new ReconnectingWebSocket(ws_url, "arduino", ws_options);
|
||||
document.getElementById("percentage").innerHTML = "67%";
|
||||
document.getElementById("percentage-done").setAttribute("stroke-dasharray", "67,100");
|
||||
document.getElementById("percentage").innerHTML = "75%";
|
||||
document.getElementById("percentage-done").setAttribute("stroke-dasharray", "75,100");
|
||||
document.getElementById("modal-content").innerHTML = language[settings.lang].loadWebsock;
|
||||
|
||||
// When the connection is open, send some data to the server
|
||||
@@ -2031,12 +2142,12 @@ function ws_connect() {
|
||||
con.className = "hidden";
|
||||
con = document.getElementById("connected");
|
||||
con.className = con.className = "";
|
||||
document.getElementById("percentage").innerHTML = "100%";
|
||||
document.getElementById("percentage-done").setAttribute("stroke-dasharray", "100,100");
|
||||
document.getElementById("modal-content").innerHTML = language[settings.lang].loadReady;
|
||||
//setTimeout(function() { ws_send("$"); }, 2000);
|
||||
//setTimeout(function() { ws_send("C"); }, 3000);
|
||||
//setTimeout(function() { ws_send("~"); }, 4000);
|
||||
document.getElementById("percentage").innerHTML = "100%";
|
||||
document.getElementById("percentage-done").setAttribute("stroke-dasharray", "100,100");
|
||||
document.getElementById("modal-content").innerHTML = language[settings.lang].loadReady;
|
||||
};
|
||||
|
||||
// When the connection is open, send some data to the server
|
||||
@@ -2069,53 +2180,56 @@ function ws_connect() {
|
||||
// document.getElementById('modal').style.display = "none";
|
||||
// console.log("res", res);
|
||||
if (res) {
|
||||
// Status starts here
|
||||
if (typeof res.mode !== "undefined") data.mode = res.mode;
|
||||
if (typeof res.ws2812fx_mode !== "undefined") data.ws2812fx_mode = res.ws2812fx_mode;
|
||||
if (typeof res.speed !== "undefined") {
|
||||
data.speed = res.speed;
|
||||
// init SliderVals
|
||||
speed.value = res.speed;
|
||||
}
|
||||
if (typeof res.segment !== "undefined") { state.segment= res.segment; document.getElementById("selectseg").value = state.segment; }
|
||||
if (typeof res.mode !== "undefined") { state.mode = res.mode; }
|
||||
if (typeof res.brightness !== "undefined") {
|
||||
data.brightness = res.brightness;
|
||||
state.brightness = res.brightness;
|
||||
// init ColorSliderVals
|
||||
bright.value = res.brightness;
|
||||
}
|
||||
// Segment Status starts here
|
||||
if (typeof res.start !== "undefined") { segstate.start= res.start; document.getElementById("segstart").value = segstate.start; }
|
||||
if (typeof res.stop !== "undefined") { segstate.stop = res.stop; document.getElementById("segstop").value = segstate.stop; }
|
||||
if (typeof res.fx_mode !== "undefined") { segstate.mode = res.fx_mode; }
|
||||
if (typeof res.speed !== "undefined") {
|
||||
segstate.speed = res.speed;
|
||||
// init SliderVals
|
||||
speed.value = res.speed;
|
||||
}
|
||||
if (typeof res.color !== "undefined") {
|
||||
data.color.w = res.color[0];
|
||||
data.color.r = res.color[1];
|
||||
data.color.g = res.color[2];
|
||||
data.color.b = res.color[3];
|
||||
data.color.hex = rgbToHex([res.color[0], res.color[1], res.color[2], res.color[3]]);
|
||||
data.color.w2 = res.color[4];
|
||||
data.color.r2 = res.color[5];
|
||||
data.color.g2 = res.color[6];
|
||||
data.color.b2 = res.color[7];
|
||||
data.color.hex2 = rgbToHex([res.color[4], res.color[5], res.color[6], res.color[7]]);
|
||||
data.color.w3 = res.color[8];
|
||||
data.color.r3 = res.color[9];
|
||||
data.color.g3 = res.color[10];
|
||||
data.color.b3 = res.color[11];
|
||||
data.color.hex3 = rgbToHex([res.color[8], res.color[9], res.color[10], res.color[11]]);
|
||||
segstate.color.w = res.color[0];
|
||||
segstate.color.r = res.color[1];
|
||||
segstate.color.g = res.color[2];
|
||||
segstate.color.b = res.color[3];
|
||||
segstate.color.hex = rgbToHex([res.color[0], res.color[1], res.color[2], res.color[3]]);
|
||||
segstate.color.w2 = res.color[4];
|
||||
segstate.color.r2 = res.color[5];
|
||||
segstate.color.g2 = res.color[6];
|
||||
segstate.color.b2 = res.color[7];
|
||||
segstate.color.hex2 = rgbToHex([res.color[4], res.color[5], res.color[6], res.color[7]]);
|
||||
segstate.color.w3 = res.color[8];
|
||||
segstate.color.r3 = res.color[9];
|
||||
segstate.color.g3 = res.color[10];
|
||||
segstate.color.b3 = res.color[11];
|
||||
segstate.color.hex3 = rgbToHex([res.color[8], res.color[9], res.color[10], res.color[11]]);
|
||||
// init ColorSliderVals
|
||||
if (data.color_num === 1) {
|
||||
red.value = data.color.r;
|
||||
green.value = data.color.g;
|
||||
blue.value = data.color.b;
|
||||
white.value = data.color.w;
|
||||
red.value = segstate.color.r;
|
||||
green.value = segstate.color.g;
|
||||
blue.value = segstate.color.b;
|
||||
white.value = segstate.color.w;
|
||||
}
|
||||
if (data.color_num === 2) {
|
||||
red.value = data.color.r2;
|
||||
green.value = data.color.g2;
|
||||
blue.value = data.color.b2;
|
||||
white.value = data.color.w2;
|
||||
red.value = segstate.color.r2;
|
||||
green.value = segstate.color.g2;
|
||||
blue.value = segstate.color.b2;
|
||||
white.value = segstate.color.w2;
|
||||
}
|
||||
if (data.color_num === 3) {
|
||||
red.value = data.color.r3;
|
||||
green.value = data.color.g3;
|
||||
blue.value = data.color.b3;
|
||||
white.value = data.color.w3;
|
||||
red.value = segstate.color.r3;
|
||||
green.value = segstate.color.g3;
|
||||
blue.value = segstate.color.b3;
|
||||
white.value = segstate.color.w3;
|
||||
}
|
||||
}
|
||||
// Config starts here
|
||||
@@ -2124,6 +2238,7 @@ function ws_connect() {
|
||||
if (typeof res.mqtt_port !== "undefined") { config.mqtt_port = res.mqtt_port; document.getElementById("mqtt_port").value = config.mqtt_port; }
|
||||
if (typeof res.mqtt_user !== "undefined") { config.mqtt_user = res.mqtt_user; document.getElementById("mqtt_user").value = config.mqtt_user; }
|
||||
if (typeof res.mqtt_pass !== "undefined") { config.mqtt_pass = res.mqtt_pass; document.getElementById("mqtt_pass").value = config.mqtt_pass; }
|
||||
if (typeof res.ws_seg !== "undefined") { config.ws_seg = res.ws_seg; document.getElementById("selectsegcnt").value = config.ws_seg; }
|
||||
if (typeof res.ws_cnt !== "undefined") { config.ws_cnt = res.ws_cnt; document.getElementById("selectcount").value = config.ws_cnt; }
|
||||
if (typeof res.ws_rgbo !== "undefined") {
|
||||
config.ws_rgbo = res.ws_rgbo;
|
||||
@@ -2134,19 +2249,20 @@ function ws_connect() {
|
||||
} else {
|
||||
document.getElementById("white").parentNode.className = "hidden";
|
||||
white.value = 0;
|
||||
data.color.w = 0;
|
||||
data.color.w2 = 0;
|
||||
data.color.w3 = 0;
|
||||
segstate.color.w = 0;
|
||||
segstate.color.w2 = 0;
|
||||
segstate.color.w3 = 0;
|
||||
}
|
||||
|
||||
}
|
||||
if (typeof res.ws_pin !== "undefined") { config.ws_pin = res.ws_pin; document.getElementById("selectpin").value = config.ws_pin; }
|
||||
if (typeof res.ws_trans !== "undefined") { config.ws_trans = res.ws_trans; document.getElementById("set-transitionEffects").value = config.ws_trans; }
|
||||
if (typeof res.ws_fxopt !== "undefined") {
|
||||
config.ws_fxopt = res.ws_fxopt;
|
||||
document.getElementById("selectoptrev").value = (config.ws_fxopt & 128);
|
||||
document.getElementById("selectoptfade").value = (config.ws_fxopt & 112);
|
||||
document.getElementById("selectoptgamma").value = (config.ws_fxopt & 8);
|
||||
document.getElementById("selectoptsize").value = (config.ws_fxopt & 6);
|
||||
segstate.ws_fxopt = res.ws_fxopt;
|
||||
document.getElementById("selectoptrev").value = (segstate.ws_fxopt & 128);
|
||||
document.getElementById("selectoptfade").value = (segstate.ws_fxopt & 112);
|
||||
document.getElementById("selectoptgamma").value = (segstate.ws_fxopt & 8);
|
||||
document.getElementById("selectoptsize").value = (segstate.ws_fxopt & 6);
|
||||
}
|
||||
// Modes starts here
|
||||
if (typeof res[0] !== "undefined") {
|
||||
@@ -2157,18 +2273,22 @@ function ws_connect() {
|
||||
});
|
||||
}
|
||||
// init Color Vals
|
||||
colorNumrVals();
|
||||
colorNumVals();
|
||||
initSliderColors();
|
||||
// init Change Range Val
|
||||
changeRangeNumVal();
|
||||
// init Colors controls
|
||||
// init display Colors
|
||||
displayColors(true);
|
||||
console.log("displayColors finished!");
|
||||
select_active_button();
|
||||
console.log("select_active_button finished!");
|
||||
}
|
||||
if (data.init === true) {
|
||||
console.log("data.init: ", data.init);
|
||||
if (data.init == true) {
|
||||
console.log("Initializing...");
|
||||
// Set selected mode button
|
||||
//document.getElementById(data.ws2812fx_mode).style.backgroundColor = settings.theme_btnsel;
|
||||
//document.getElementById(segstate.mode).style.backgroundColor = settings.theme_btnsel;
|
||||
// Close Loading Modal
|
||||
setTimeout(() => {
|
||||
document.getElementById('modal').style.display = "none";
|
||||
@@ -2212,38 +2332,45 @@ function select_active_button() {
|
||||
for (i = 0; i < btns.length; i++) {
|
||||
btns[i].style.backgroundColor = settings.theme_btn;
|
||||
}
|
||||
if (data.mode != 1 || (data.mode === 1 && data.ws2812fx_mode !== 57)) { // CUSTOM WS MODE
|
||||
if (state.mode != 1 || (state.mode == 1 && segstate.mode != 57)) { // CUSTOM WS MODE
|
||||
wsmess = document.getElementById("message");
|
||||
var arr = wsmess.className.split(" ");
|
||||
if (arr.indexOf("hidden") === -1) {
|
||||
wsmess.className += " hidden";
|
||||
}
|
||||
segments = document.getElementById("segments");
|
||||
segments.className = segments.className.replace(/\b hidden\b/g, "");
|
||||
}
|
||||
if (data.mode >= 1) {
|
||||
document.getElementById(data.ws2812fx_mode).style.backgroundColor = settings.theme_btnsel;
|
||||
if (data.ws2812fx_mode === 56) { // AUTOPLAY
|
||||
if (state.mode >= 1) {
|
||||
document.getElementById(segstate.mode).style.backgroundColor = settings.theme_btnsel;
|
||||
if (segstate.mode == 56) { // AUTOPLAY
|
||||
disable_modebuttons(false);
|
||||
disable_color_selection(true);
|
||||
disable_bright_selection(false);
|
||||
disable_speed_selection(true);
|
||||
} else if (data.ws2812fx_mode === 57) { //CUSTOM_WS
|
||||
} else if (segstate.mode == 57) { //CUSTOM_WS
|
||||
wsmess = document.getElementById("message");
|
||||
wsmess.className = wsmess.className.replace(/\b hidden\b/g, "");
|
||||
sements = document.getElementById("segments");
|
||||
var arr = segments.className.split(" ");
|
||||
if (arr.indexOf("hidden") === -1) {
|
||||
segments.className += " hidden";
|
||||
}
|
||||
disable_modebuttons(false);
|
||||
disable_color_selection(true);
|
||||
disable_bright_selection(false);
|
||||
disable_speed_selection(true);
|
||||
} else if (data.ws2812fx_mode === 58) { //TV
|
||||
} else if (segstate.mode == 58) { //TV
|
||||
disable_modebuttons(false);
|
||||
disable_color_selection(true);
|
||||
disable_bright_selection(false);
|
||||
disable_speed_selection(false);
|
||||
} else if (data.ws2812fx_mode === 59) { //E1.31
|
||||
} else if (segstate.mode == 59) { //E1.31
|
||||
disable_modebuttons(false);
|
||||
disable_color_selection(true);
|
||||
disable_bright_selection(false);
|
||||
disable_speed_selection(true);
|
||||
} else if (data.ws2812fx_mode === 60) { //Fire2012
|
||||
} else if (segstate.mode == 60) { //Fire2012
|
||||
disable_modebuttons(false);
|
||||
disable_color_selection(true);
|
||||
disable_bright_selection(false);
|
||||
@@ -2254,7 +2381,7 @@ function select_active_button() {
|
||||
disable_bright_selection(false);
|
||||
disable_speed_selection(false);
|
||||
}
|
||||
} else if (data.mode === 0) {
|
||||
} else if (state.mode == 0) {
|
||||
document.getElementById("off").style.backgroundColor = settings.theme_btnsel;
|
||||
disable_modebuttons(false);
|
||||
disable_color_selection(true);
|
||||
@@ -2282,32 +2409,32 @@ function disable_modebuttons(status) {
|
||||
|
||||
function set_mode(mode_id) {
|
||||
if (Number.isInteger(mode_id)) {
|
||||
data.mode = 1;
|
||||
data.ws2812fx_mode = mode_id;
|
||||
state.mode = 1;
|
||||
segstate.mode = mode_id;
|
||||
} else {
|
||||
// For named modes
|
||||
if (mode_id == "off") {
|
||||
data.mode = 0;
|
||||
state.mode = 0;
|
||||
}
|
||||
}
|
||||
select_active_button();
|
||||
ws_send("/" + mode_id);
|
||||
}
|
||||
function set_speed() {
|
||||
ws_send("?" + data.speed);
|
||||
ws_send("?" + segstate.speed);
|
||||
}
|
||||
function set_brightness() {
|
||||
ws_send("%" + data.brightness);
|
||||
ws_send("%" + state.brightness);
|
||||
}
|
||||
function set_color() {
|
||||
if (data.color_num === 1) {
|
||||
ws_send("#" + rgbToHex([data.color.w, data.color.r, data.color.g, data.color.b]));
|
||||
ws_send("#" + rgbToHex([segstate.color.w, segstate.color.r, segstate.color.g, segstate.color.b]));
|
||||
}
|
||||
if (data.color_num === 2) {
|
||||
ws_send("##" + rgbToHex([data.color.w2, data.color.r2, data.color.g2, data.color.b2]));
|
||||
ws_send("##" + rgbToHex([segstate.color.w2, segstate.color.r2, segstate.color.g2, segstate.color.b2]));
|
||||
}
|
||||
if (data.color_num === 3) {
|
||||
ws_send("###" + rgbToHex([data.color.w3, data.color.r3, data.color.g3, data.color.b3]));
|
||||
ws_send("###" + rgbToHex([segstate.color.w3, segstate.color.r3, segstate.color.g3, segstate.color.b3]));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2345,11 +2472,11 @@ function onSelectColor(event) {
|
||||
var color = context.getImageData(pos.x, pos.y, 1, 1).data;
|
||||
var hex_color = rgbToHex(color);
|
||||
var colnum = (data.color_num === 1) ? "" : data.color_num;
|
||||
data.color["hex" + colnum] = hex_color;
|
||||
data.color["r" + colnum] = color[0];
|
||||
data.color["g" + colnum] = color[1];
|
||||
data.color["b" + colnum] = color[2];
|
||||
data.color["w" + colnum] = 0;
|
||||
segstate.color["hex" + colnum] = hex_color;
|
||||
segstate.color["r" + colnum] = color[0];
|
||||
segstate.color["g" + colnum] = color[1];
|
||||
segstate.color["b" + colnum] = color[2];
|
||||
segstate.color["w" + colnum] = 0;
|
||||
red.value = color[0];
|
||||
green.value = color[1];
|
||||
blue.value = color[2];
|
||||
@@ -2357,7 +2484,7 @@ function onSelectColor(event) {
|
||||
displayColors();
|
||||
initSliderColors();
|
||||
changeRangeNumVal();
|
||||
colorNumrVals();
|
||||
colorNumVals();
|
||||
}
|
||||
}
|
||||
function redrawColorPicker() {
|
||||
@@ -2525,13 +2652,11 @@ document.addEventListener("DOMContentLoaded", function(event) {
|
||||
getModes();
|
||||
readSettings();
|
||||
ws_connect();
|
||||
ws_send("$")
|
||||
document.getElementById("modal-content").innerHTML = language.en.loadModes;
|
||||
ws_send("$");
|
||||
//ws_send("C");
|
||||
getConfig();
|
||||
canvas.width = 400;
|
||||
canvas.height = 400;
|
||||
|
||||
redrawColorPicker();
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user