2016-09-11 23:07:18 +02:00
<!DOCTYPE html>
2020-12-21 19:48:21 +01:00
< html lang = "en" >
2019-12-05 01:58:03 +01:00
< head >
2020-06-22 12:30:31 +02:00
< meta name = "viewport" content = "width=device-width, initial-scale=1, minimum-scale=1" >
< meta charset = "utf-8" >
< meta name = "theme-color" content = "#222222" >
< meta content = "yes" name = "apple-mobile-web-app-capable" >
< link rel = "shortcut icon" href = "data:image/x-icon;base64,AAABAAEAEBAAAAEAGACGAAAAFgAAAIlQTkcNChoKAAAADUlIRFIAAAAQAAAAEAgGAAAAH/P/YQAAAE1JREFUOI1j/P//PwOxgNGeAUMxE9G6cQCKDWAhpADZ2f8PMjBS3QW08QK20KaZC2gfC9hCnqouoNgARgY7zMxAyNlUdQHlXiAlO2MDAD63EVqNHAe0AAAAAElFTkSuQmCC" / >
< title > WLED< / title >
2021-12-06 20:53:09 +01:00
< script >
function feedback(){}
2021-12-07 08:26:01 +01:00
// instead of including [script src="iro.js"][/script] and [script src="rangetouch.js"][/script]
// (which would be inlined by nodeJS inliner during minimization and compression) we need to load them dynamically
// the following is needed to load iro.js and rangetouch.js as consecutive requests to allow ESP8266
// to keep up with requests (if requests happent too fast some may not get processed)
// it will also call onLoad() after last is loaded (it was removed from [body onload="onLoad()"]).
2021-12-06 20:53:09 +01:00
var h = document.getElementsByTagName('head')[0];
var l = document.createElement('script');
l.type = 'application/javascript';
l.src = 'iro.js';
l.addEventListener('load', (e) => {
2021-12-07 08:26:01 +01:00
// after iro is loaded initialize global variable
2021-12-06 20:53:09 +01:00
cpick = new iro.ColorPicker("#picker", {
width: 260,
wheelLightness: false,
wheelAngle: 270,
wheelDirection: "clockwise",
layout: [{
component: iro.ui.Wheel,
options: {}
}]
});
cpick.on("input:end", () => {setColor(1);});
cpick.on("color:change", () => {updatePSliders()});
var l = document.createElement('script');
l.type = 'application/javascript';
l.src = 'rangetouch.js';
l.addEventListener('load', (e) => {
2021-12-07 08:26:01 +01:00
// after rangetouch is loaded initialize global variable
2021-12-06 20:53:09 +01:00
ranges = RangeTouch.setup('input[type="range"]', {});
2022-01-22 13:54:17 +01:00
let stateCheck = setInterval(() => {
if (document.readyState === 'complete') {
clearInterval(stateCheck);
// document ready, start processing UI
onLoad();
}
}, 100);
2021-12-06 20:53:09 +01:00
});
2022-08-01 17:32:40 +02:00
setTimeout(()=>{h.appendChild(l)},100);
2021-12-06 20:53:09 +01:00
});
2023-10-16 18:34:51 +02:00
setTimeout(()=>{h.appendChild(l)},200);
2021-12-06 20:53:09 +01:00
< / script >
2020-12-20 20:18:07 +01:00
< link rel = "stylesheet" href = "index.css" >
2019-12-05 01:58:03 +01:00
< / head >
2021-12-06 20:53:09 +01:00
< body >
2019-12-05 01:58:03 +01:00
< div id = "cv" class = "overlay" > Loading WLED UI...< / div >
< noscript > < div class = "overlay" style = "opacity:1;" > Sorry, WLED UI needs JavaScript!< / div > < / noscript >
2020-06-22 12:30:31 +02:00
< div id = "bg" > < / div >
2019-12-05 01:58:03 +01:00
< div class = "wrapper" id = "top" >
2020-06-22 12:30:31 +02:00
< div class = "tab top" >
< div class = "btnwrap" >
< button id = "buttonPower" onclick = "togglePower()" class = "tgl" > < i class = "icons" >  < / i > < p class = "tab-label" > Power< / p > < / button >
< button id = "buttonNl" onclick = "toggleNl()" > < i class = "icons" >  < / i > < p class = "tab-label" > Timer< / p > < / button >
< button id = "buttonSync" onclick = "toggleSync()" > < i class = "icons" >  < / i > < p class = "tab-label" > Sync< / p > < / button >
< button id = "buttonSr" onclick = "toggleLiveview()" > < i class = "icons" >  < / i > < p class = "tab-label" > Peek< / p > < / button >
2021-03-28 17:15:26 +02:00
< button id = "buttonI" onclick = "toggleInfo()" > < i class = "icons" >  < / i > < p class = "tab-label" > Info< / p > < / button >
2021-08-10 17:11:17 +02:00
< button id = "buttonNodes" onclick = "toggleNodes()" > < i class = "icons" >  < / i > < p class = "tab-label" > Nodes< / p > < / button >
2023-06-04 18:40:29 +02:00
< button onclick = "window.location.href=getURL('/settings');" > < i class = "icons" >  < / i > < p class = "tab-label" > Config< / p > < / button >
2021-02-28 18:16:24 +01:00
< button id = "buttonPcm" onclick = "togglePcMode(true)" > < i class = "icons" >  < / i > < p class = "tab-label" > PC Mode< / p > < / button >
2020-06-22 12:30:31 +02:00
< / div >
< div id = "briwrap" >
< p class = "hd" > Brightness< / p >
2023-05-28 22:50:19 +02:00
< div class = "slider" style = "padding-right:32px;" >
2023-03-30 21:35:23 +02:00
< i class = "icons slider-icon" onclick = "tglTheme()" style = "transform: translate(-32px,5px);" >  < / i >
2020-06-22 12:30:31 +02:00
< div class = "sliderwrap il" >
< input id = "sliderBri" onchange = "setBri()" oninput = "updateTrail(this)" max = "255" min = "1" type = "range" value = "128" / >
< div class = "sliderdisplay" > < / div >
< / div >
2021-02-24 20:23:32 +01:00
< output class = "sliderbubble" > < / output >
2020-06-22 12:30:31 +02:00
< / div >
< / div >
< iframe id = "liveview" src = "about:blank" > < / iframe >
< / div >
2019-12-05 01:58:03 +01:00
< / div >
< div class = "container" >
2020-06-22 12:30:31 +02:00
< div id = "Colors" class = "tabcontent" >
< div id = "picker" class = "noslide" > < / div >
2023-10-16 18:34:51 +02:00
< div id = "hwrap" class = "slider" >
2022-04-26 22:16:08 +02:00
< div class = "sliderwrap il" >
< input id = "sliderH" class = "noslide" oninput = "fromH()" onchange = "setColor(0)" max = "359" min = "0" type = "range" value = "0" step = "any" >
< div class = "sliderdisplay" style = "background: linear-gradient(90deg, #f00 2%, #ff0 19%, #0f0 35%, #0ff 52%, #00f 68%, #f0f 85%, #f00)" > < / div >
2023-02-25 09:41:15 +01:00
< / div >
< span class = "tooltiptext" > Hue< / span >
2022-04-26 22:16:08 +02:00
< / div >
2023-02-25 09:41:15 +01:00
< div id = "swrap" class = "slider" >
2022-04-26 22:16:08 +02:00
< div class = "sliderwrap il" >
< input id = "sliderS" class = "noslide" oninput = "fromS()" onchange = "setColor(0)" max = "100" min = "0" type = "range" value = "100" step = "any" >
< div class = "sliderdisplay" style = "background: linear-gradient(90deg, #aaa 0%, #f00)" > < / div >
2023-02-25 09:41:15 +01:00
< / div >
< span class = "tooltiptext" > Saturation< / span >
2022-04-26 22:16:08 +02:00
< / div >
2023-02-25 09:41:15 +01:00
< div id = "vwrap" class = "slider" >
2021-12-01 14:51:45 +01:00
< div class = "sliderwrap il" >
< input id = "sliderV" class = "noslide" oninput = "fromV()" onchange = "setColor(0)" max = "100" min = "0" type = "range" value = "100" step = "any" / >
2020-06-22 12:30:31 +02:00
< div class = "sliderdisplay" > < / div >
2023-02-25 09:41:15 +01:00
< / div >
< span class = "tooltiptext" > Value/Brightness< / span >
2021-12-01 14:51:45 +01:00
< / div >
2023-02-25 09:41:15 +01:00
< div id = "kwrap" class = "slider" >
2020-06-22 12:30:31 +02:00
< div class = "sliderwrap il" >
2023-03-02 18:21:55 +01:00
< input id = "sliderK" class = "noslide" oninput = "fromK()" onchange = "setColor(0)" max = "10091" min = "1900" type = "range" value = "6550" / >
2021-11-26 02:06:05 +01:00
< div class = "sliderdisplay" > < / div >
< / div >
2023-02-25 09:41:15 +01:00
< span class = "tooltiptext" > Kelvin/Temperature< / span >
2021-11-26 02:06:05 +01:00
< / div >
2020-06-22 12:30:31 +02:00
< div id = "rgbwrap" >
2023-02-28 23:04:12 +01:00
<!-- p class="labels hd">RGB color</p -->
< div id = "rwrap" class = "slider" >
2021-02-24 20:23:32 +01:00
< div class = "sliderwrap il" >
2021-12-01 14:51:45 +01:00
< input id = "sliderR" class = "noslide" oninput = "fromRgb()" onchange = "setColor(0)" max = "255" min = "0" type = "range" value = "128" / >
2021-02-24 20:23:32 +01:00
< div class = "sliderdisplay" > < / div >
< / div >
2023-02-28 23:04:12 +01:00
< span class = "tooltiptext" > Red channel< / span >
2022-03-14 20:22:20 +01:00
< / div >
2023-02-28 23:04:12 +01:00
< div id = "gwrap" class = "slider" >
2021-02-24 20:23:32 +01:00
< div class = "sliderwrap il" >
2021-12-01 14:51:45 +01:00
< input id = "sliderG" class = "noslide" oninput = "fromRgb()" onchange = "setColor(0)" max = "255" min = "0" type = "range" value = "128" / >
2021-02-24 20:23:32 +01:00
< div class = "sliderdisplay" > < / div >
< / div >
2023-02-28 23:04:12 +01:00
< span class = "tooltiptext" > Green channel< / span >
2022-03-14 20:22:20 +01:00
< / div >
2023-02-28 23:04:12 +01:00
< div id = "bwrap" class = "slider" >
2021-02-24 20:23:32 +01:00
< div class = "sliderwrap il" >
2021-12-01 14:51:45 +01:00
< input id = "sliderB" class = "noslide" oninput = "fromRgb()" onchange = "setColor(0)" max = "255" min = "0" type = "range" value = "128" / >
2021-02-24 20:23:32 +01:00
< div class = "sliderdisplay" > < / div >
< / div >
2023-02-28 23:04:12 +01:00
< span class = "tooltiptext" > Blue channel< / span >
2022-03-14 20:22:20 +01:00
< / div >
2020-06-22 12:30:31 +02:00
< / div >
2023-02-25 09:41:15 +01:00
< div id = "wwrap" class = "slider" >
<!-- p class="labels hd">White channel</p -->
2021-10-16 15:13:30 +02:00
< div id = "whibri" class = "sliderwrap il" >
2022-03-09 13:39:51 +01:00
< input id = "sliderW" class = "noslide" oninput = "fromW()" onchange = "setColor(0)" max = "255" min = "0" type = "range" value = "128" / >
2021-10-16 15:13:30 +02:00
< div class = "sliderdisplay" > < / div >
< / div >
2023-02-25 09:41:15 +01:00
< span class = "tooltiptext" > White channel< / span >
2021-10-16 15:13:30 +02:00
< / div >
2023-02-25 09:41:15 +01:00
< div id = "wbal" class = "slider" >
<!-- p class="labels hd">White balance</p -->
2020-06-22 12:30:31 +02:00
< div class = "sliderwrap il" >
2021-10-16 15:45:04 +02:00
< input id = "sliderA" class = "noslide" onchange = "setBalance(this.value)" max = "255" min = "0" type = "range" value = "128" / >
2020-06-22 12:30:31 +02:00
< div class = "sliderdisplay" > < / div >
< / div >
2023-02-25 09:41:15 +01:00
< span class = "tooltiptext" > White balance< / span >
2021-12-03 14:26:26 +01:00
< / div >
2020-06-22 12:30:31 +02:00
< div id = "qcs-w" >
2021-03-09 16:23:19 +01:00
< div class = "qcs" onclick = "pC('#ff0000');" title = "Red" style = "background-color:#ff0000;" > < / div >
< div class = "qcs" onclick = "pC('#ffa000');" title = "Orange" style = "background-color:#ffa000;" > < / div >
< div class = "qcs" onclick = "pC('#ffc800');" title = "Yellow" style = "background-color:#ffc800;" > < / div >
< div class = "qcs" onclick = "pC('#ffe0a0');" title = "Warm White" style = "background-color:#ffe0a0;" > < / div >
< div class = "qcs" onclick = "pC('#ffffff');" title = "White" style = "background-color:#ffffff;" > < / div >
< div class = "qcs qcsb" onclick = "pC('#000000');" title = "Black" style = "background-color:#000000;" > < / div > < br >
< div class = "qcs" onclick = "pC('#ff00ff');" title = "Pink" style = "background-color:#ff00ff;" > < / div >
< div class = "qcs" onclick = "pC('#0000ff');" title = "Blue" style = "background-color:#0000ff;" > < / div >
< div class = "qcs" onclick = "pC('#00ffc8');" title = "Cyan" style = "background-color:#00ffc8;" > < / div >
< div class = "qcs" onclick = "pC('#08ff00');" title = "Green" style = "background-color:#08ff00;" > < / div >
2021-08-12 15:47:22 +02:00
< div class = "qcs" onclick = "pC('rnd');" title = "Random" style = "background:linear-gradient(to right, red, orange, yellow, green, blue, purple);transform: translateY(-11px);" > R< / div >
2020-06-22 12:30:31 +02:00
< / div >
< div id = "csl" >
2023-10-16 18:34:51 +02:00
< button id = "csl0" title = "Select slot" class = "btn xxs cl" onclick = "selectSlot(0);" data-r = "0" data-g = "0" data-b = "0" data-w = "0" > 1< / button >
< button id = "csl1" title = "Select slot" class = "btn xxs cl" onclick = "selectSlot(1);" data-r = "0" data-g = "0" data-b = "0" data-w = "0" > 2< / button >
< button id = "csl2" title = "Select slot" class = "btn xxs cl" onclick = "selectSlot(2);" data-r = "0" data-g = "0" data-b = "0" data-w = "0" > 3< / button >
2020-06-22 12:30:31 +02:00
< / div >
2022-03-12 18:03:00 +01:00
< p class = "labels h" id = "cslLabel" > < / p >
2020-06-22 12:30:31 +02:00
< div id = "hexw" >
2022-04-12 16:08:17 +02:00
< i class = "icons sel-icon" onclick = "tglRgb()" >  < / i >
2023-10-16 18:34:51 +02:00
< input id = "hexc" title = "Hex RGB" type = "text" class = "noslide" onkeydown = "hexEnter()" autocomplete = "off" maxlength = "8" / >
2021-08-11 21:28:31 +02:00
< button id = "hexcnf" class = "btn btn-xs" onclick = "fromHex();" > < i class = "icons btn-icon" >  < / i > < / button >
2020-06-22 12:30:31 +02:00
< / div >
2023-10-16 18:34:51 +02:00
< div style = "padding: 8px 0;" >
2023-10-19 17:41:08 +02:00
< button class = "btn btn-xs" tooltip = "Pixel Magic Tool" type = "button" onclick = "window.location.href=getURL('/pxmagic.htm')" > < i class = "icons btn-icon" >  < / i > < / button >
< button class = "btn btn-xs" tooltip = "Add custom palette" type = "button" onclick = "window.location.href=getURL('/cpal.htm')" > < i class = "icons btn-icon" >  < / i > < / button >
< button class = "btn btn-xs" tooltip = "Remove custom palette" type = "button" id = "rmPal" onclick = "palettesData=null;localStorage.removeItem('wledPalx');requestJson({rmcpal:true});setTimeout(loadPalettes,250,loadPalettesData);" > < i class = "icons btn-icon" >  < / i > < / button >
2023-10-16 18:34:51 +02:00
< / div >
2022-03-12 18:03:00 +01:00
< p class = "labels" id = "pall" > < i class = "icons sel-icon" onclick = "tglHex()" >  < / i > Color palette< / p >
2021-10-29 23:55:42 +02:00
< div id = "palw" class = "il" >
2021-02-24 20:23:32 +01:00
< div class = "staytop fnd" >
2022-04-17 12:01:44 +02:00
< input type = "text" placeholder = "Search" oninput = "search(this,'pallist')" onfocus = "search(this,'pallist')" / >
2021-09-18 13:15:19 +02:00
< i class = "icons clear-icon" onclick = "clean(this)" >  < / i >
< i class = "icons search-icon" >  < / i >
2021-02-24 20:23:32 +01:00
< / div >
2021-07-02 01:46:42 +02:00
< div id = "pallist" class = "list" >
2021-02-24 20:23:32 +01:00
< div class = "lstI" >
2022-03-09 18:21:52 +01:00
< label class = "radio schkl" onclick = "loadPalettes()" >
< div class = "lstIcontent" >
< span class = "lstIname" >
Loading...
< / span >
< / div >
< / label >
2021-02-24 20:23:32 +01:00
< / div >
< / div >
2020-06-22 12:30:31 +02:00
< / div >
< / div >
< div id = "Effects" class = "tabcontent" >
2022-04-10 11:02:57 +02:00
< div id = "fx" >
< p class = "labels hd" id = "modeLabel" > Effect mode< / p >
< div class = "staytop fnd" id = "fxFind" >
2022-08-12 17:58:20 +02:00
< input type = "text" placeholder = "Search" oninput = "search(this,'fxlist')" onfocus = "search(this,'fxlist');gId('filters').classList.add('fade');" onblur = "gId('filters').classList.remove('fade')" / >
2022-04-10 11:02:57 +02:00
< i class = "icons clear-icon" onclick = "clean(this);" >  < / i >
2022-07-27 00:11:24 +02:00
< i class = "icons search-icon" onclick = "gId('filters').classList.toggle('hide');" style = "cursor:pointer;" >  < / i >
2022-04-10 11:02:57 +02:00
< / div >
< div id = "fxlist" class = "list" >
< div class = "lstI" >
< label class = "radio schkl" onclick = "loadFX()" >
< div class = "lstIcontent" >
< span class = "lstIname" >
Loading...
< / span >
< / div >
< / label >
< / div >
< / div >
< / div >
< div id = "sliders" >
2022-07-27 00:11:24 +02:00
< div id = "filters" class = "filter" >
2022-08-01 17:32:40 +02:00
< label id = "filterPal" class = "check fchkl" > 🎨
< input type = "checkbox" data-flt = "🎨" onchange = "filterFx(this)" >
2023-10-19 17:41:08 +02:00
< span class = "checkmark" tooltip = "Uses palette" > < / span >
< span class = "hide tooltiptext ttfirst" > Uses palette< / span >
2022-07-27 00:11:24 +02:00
< / label >
2023-04-01 11:02:49 +02:00
< label id = "filter0D" class = "check fchkl hide" > •
< input type = "checkbox" data-flt = "•" onchange = "filterFx(this)" >
2023-10-19 17:41:08 +02:00
< span class = "checkmark" tooltip = "Single pixel" > < / span >
< span class = "hide tooltiptext" > Single pixel< / span >
2023-04-01 11:02:49 +02:00
< / label >
2022-08-01 17:32:40 +02:00
< label id = "filter1D" class = "check fchkl" > ⋮
< input type = "checkbox" data-flt = "⋮" onchange = "filterFx(this)" >
2023-10-19 17:41:08 +02:00
< span class = "checkmark" tooltip = "1D" > < / span >
< span class = "hide tooltiptext" > 1D< / span >
2022-07-27 17:00:55 +02:00
< / label >
2022-08-01 17:32:40 +02:00
< label id = "filter2D" class = "check fchkl" > ▦
< input type = "checkbox" data-flt = "▦" onchange = "filterFx(this)" >
2023-10-19 17:41:08 +02:00
< span class = "checkmark" tooltip = "2D Matrix" > < / span >
< span class = "hide tooltiptext" > 2D< / span >
2022-07-27 00:11:24 +02:00
< / label >
2022-07-27 21:12:27 +02:00
< label id = "filterVol" class = "check fchkl" > ♪
< input type = "checkbox" data-flt = "♪" onchange = "filterFx(this)" >
2023-10-19 17:41:08 +02:00
< span class = "checkmark" tooltip = "Volume" > < / span >
< span class = "hide tooltiptext" > Volume< / span >
2022-07-27 00:11:24 +02:00
< / label >
2022-07-27 21:12:27 +02:00
< label id = "filterFreq" class = "check fchkl" > ♫
< input type = "checkbox" data-flt = "♫" onchange = "filterFx(this)" >
2023-10-19 17:41:08 +02:00
< span class = "checkmark" tooltip = "Frequency" > < / span >
< span class = "hide tooltiptext ttlast" > Frequency< / span >
2022-07-27 00:11:24 +02:00
< / label >
< / div >
2022-06-26 22:47:16 +02:00
< div id = "slider0" class = "slider" >
2023-03-30 21:35:23 +02:00
< i class = "icons slider-icon" onclick = "tglFreeze()" >  < / i >
2022-03-10 22:36:09 +01:00
< div class = "sliderwrap il" >
2023-10-19 17:41:08 +02:00
< input id = "sliderSpeed" tooltip = "Effect speed" class = "noslide" onchange = "setSpeed()" oninput = "updateTrail(this)" max = "255" min = "0" type = "range" value = "128" / >
2022-03-10 22:36:09 +01:00
< div class = "sliderdisplay" > < / div >
< / div >
< output class = "sliderbubble" > < / output >
2023-10-19 17:41:08 +02:00
< span id = "sliderLabel0" class = "hide tooltiptext" > Effect speed< / span >
2020-06-22 12:30:31 +02:00
< / div >
2022-06-26 22:47:16 +02:00
< div id = "slider1" class = "slider" >
2023-03-30 21:35:23 +02:00
< i class = "icons slider-icon" onclick = "tglLabels()" >  < / i >
2022-03-10 22:36:09 +01:00
< div class = "sliderwrap il" >
< input id = "sliderIntensity" class = "noslide" onchange = "setIntensity()" oninput = "updateTrail(this)" max = "255" min = "0" type = "range" value = "128" / >
< div class = "sliderdisplay" > < / div >
< / div >
< output class = "sliderbubble" > < / output >
2022-06-26 22:47:16 +02:00
< span class = "tooltiptext" id = "sliderLabel1" > Effect intensity< / span >
2020-06-22 12:30:31 +02:00
< / div >
2022-06-26 22:47:16 +02:00
< div id = "slider2" class = "slider hide" >
2022-03-10 22:36:09 +01:00
< i class = "icons slider-icon" >  < / i >
< div class = "sliderwrap il" >
2022-08-12 17:58:20 +02:00
< input id = "sliderC1" class = "noslide" onchange = "setCustom(1)" oninput = "updateTrail(this)" max = "255" min = "0" type = "range" value = "0" / >
2022-03-10 22:36:09 +01:00
< div class = "sliderdisplay" > < / div >
< / div >
< output class = "sliderbubble" > < / output >
2022-06-26 22:47:16 +02:00
< span class = "tooltiptext" id = "sliderLabel2" > Custom 1< / span >
2021-10-31 15:52:41 +01:00
< / div >
2022-06-26 22:47:16 +02:00
< div id = "slider3" class = "slider hide" >
2022-04-10 11:02:57 +02:00
< i class = "icons slider-icon" >  < / i >
2022-03-10 22:36:09 +01:00
< div class = "sliderwrap il" >
2022-08-12 17:58:20 +02:00
< input id = "sliderC2" class = "noslide" onchange = "setCustom(2)" oninput = "updateTrail(this)" max = "255" min = "0" type = "range" value = "0" / >
2022-03-10 22:36:09 +01:00
< div class = "sliderdisplay" > < / div >
< / div >
< output class = "sliderbubble" > < / output >
2022-06-26 22:47:16 +02:00
< span class = "tooltiptext" id = "sliderLabel3" > Custom 2< / span >
2021-10-31 15:52:41 +01:00
< / div >
2022-06-26 22:47:16 +02:00
< div id = "slider4" class = "slider hide" >
2022-04-10 11:02:57 +02:00
< i class = "icons slider-icon" >  < / i >
2022-03-10 22:36:09 +01:00
< div class = "sliderwrap il" >
2022-08-12 17:58:20 +02:00
< input id = "sliderC3" class = "noslide" onchange = "setCustom(3)" oninput = "updateTrail(this)" max = "31" min = "0" type = "range" value = "0" / >
2022-03-10 22:36:09 +01:00
< div class = "sliderdisplay" > < / div >
< / div >
< output class = "sliderbubble" > < / output >
2022-06-26 22:47:16 +02:00
< span class = "tooltiptext" id = "sliderLabel4" > Custom 3< / span >
2021-10-31 15:52:41 +01:00
< / div >
2022-08-12 17:58:20 +02:00
< div id = "fxopt" class = "option fade" >
< label id = "opt0" class = "check ochkl hide" > < i class = "icons" >  < / i > < span class = "tooltiptext" id = "optLabel0" > Check 1< / span >
2022-12-08 17:17:54 +01:00
< input id = "checkO1" type = "checkbox" onchange = "setOption(1, this.checked)" >
2022-08-12 17:58:20 +02:00
< span class = "checkmark" > < / span >
< / label >
< label id = "opt1" class = "check ochkl hide" > < i class = "icons" >  < / i > < span class = "tooltiptext" id = "optLabel1" > Check 2< / span >
2022-12-08 17:17:54 +01:00
< input id = "checkO2" type = "checkbox" onchange = "setOption(2, this.checked)" >
2022-08-12 17:58:20 +02:00
< span class = "checkmark" > < / span >
< / label >
< label id = "opt2" class = "check ochkl hide" > < i class = "icons" >  < / i > < span class = "tooltiptext" id = "optLabel2" > Check 3< / span >
2022-12-08 17:17:54 +01:00
< input id = "checkO3" type = "checkbox" onchange = "setOption(3, this.checked)" >
2022-08-12 17:58:20 +02:00
< span class = "checkmark" > < / span >
< / label >
< / div >
2020-06-22 12:30:31 +02:00
< / div >
< / div >
2021-02-24 20:23:32 +01:00
2020-06-22 12:30:31 +02:00
< div id = "Segments" class = "tabcontent" >
< div id = "segcont" >
Loading...
< / div >
2021-08-10 17:11:17 +02:00
< div id = "segutil" class = "staybot" >
< / div >
2020-06-22 12:30:31 +02:00
< div id = "segutil2" >
2020-11-08 23:44:10 +01:00
< button class = "btn btn-s" id = "rsbtn" onclick = "rSegs()" > Reset segments< / button >
2020-06-22 12:30:31 +02:00
< / div >
2023-02-25 09:41:15 +01:00
< p > Transition: < input id = "tt" type = "number" min = "0" max = "65.5" step = "0.1" value = "0.7" > s< / p >
2022-11-16 20:55:21 +01:00
< p id = "ledmap" class = "hide" > < / p >
2020-06-22 12:30:31 +02:00
< / div >
2021-08-10 17:11:17 +02:00
< div id = "Presets" class = "tabcontent" >
2020-11-08 23:44:10 +01:00
< div id = "pql" >
< / div >
2022-03-10 22:36:09 +01:00
< p class = "labels hd" > Presets< / p >
< div class = "staytop fnd" id = "psFind" >
2022-04-17 12:01:44 +02:00
< input type = "text" placeholder = "Search" oninput = "search(this,'pcont')" onfocus = "search(this,'pcont')" / >
2022-03-10 22:36:09 +01:00
< i class = "icons clear-icon" onclick = "clean(this);" >  < / i >
< i class = "icons search-icon" >  < / i >
< / div >
< div id = "pcont" class = "list" >
2022-03-03 01:02:23 +01:00
< span onclick = "loadPresets()" > Loading...< / span >
2021-07-10 16:14:17 +02:00
< / div >
2022-03-10 22:36:09 +01:00
< div id = "putil" class = "staybot" >
< / div >
2020-06-22 12:30:31 +02:00
< / div >
2019-12-05 01:58:03 +01:00
< / div >
2019-12-11 00:59:15 +01:00
< div class = "tab bot" id = "bot" >
2020-06-22 12:30:31 +02:00
< button class = "tablinks" onclick = "openTab(0)" > < i class = "icons" >  < / i > < p class = "tab-label" > Colors< / p > < / button >
< button class = "tablinks" onclick = "openTab(1)" > < i class = "icons" >  < / i > < p class = "tab-label" > Effects< / p > < / button >
< button class = "tablinks" onclick = "openTab(2)" > < i class = "icons" >  < / i > < p class = "tab-label" > Segments< / p > < / button >
2021-08-10 17:11:17 +02:00
< button class = "tablinks" onclick = "openTab(3)" > < i class = "icons" >  < / i > < p class = "tab-label" > Presets< / p > < / button >
2019-12-05 01:58:03 +01:00
< / div >
2020-06-22 12:30:31 +02:00
< div id = "connind" > < / div >
2022-03-10 22:36:09 +01:00
< div id = "toast" onclick = "clearErrorToast(100);" > < / div >
2021-03-09 16:23:19 +01:00
< div id = "namelabel" onclick = "toggleNodes()" > < / div >
2020-05-02 01:59:41 +02:00
< div id = "info" class = "modal" >
2022-04-06 05:45:39 +02:00
< button class = "btn btn-xs close" onclick = "toggleInfo()" > < i class = "icons rot45" >  < / i > < / button >
2020-06-22 12:30:31 +02:00
< div id = "imgw" >
2021-06-30 01:01:15 +02:00
< img class = "wi" alt = "" src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAFCAYAAAC5Fuf5AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABbSURBVChTlY9bDoAwDMNW7n9nwCipytQN4Z8tbrTHmDmF4oPzyldwRqp1SSdnV/NuZuzqerAByxXznBw3igkeFEfXyUuhK/yFM0CxJfyqXZEOc6/Sr9/bf7uIC5Nwd7orMvAPAAAAAElFTkSuQmCC" / >
2022-06-23 17:42:02 +02:00
< / div >
2021-02-28 18:16:24 +01:00
< div id = "kv" > Loading...< / div > < br >
2021-10-16 15:13:30 +02:00
< div >
2022-04-07 21:54:55 +02:00
< button class = "btn infobtn" onclick = "requestJson()" > Refresh< / button >
< button class = "btn infobtn" onclick = "toggleNodes()" > Instance List< / button >
2023-06-07 21:37:54 +02:00
< button class = "btn infobtn" onclick = "window.open(getURL('/update'),'_self');" > Update WLED< / button >
2022-04-07 21:54:55 +02:00
< button class = "btn infobtn" id = "resetbtn" onclick = "cnfReset()" > Reboot WLED< / button >
2022-03-11 23:38:50 +01:00
< / div >
< br >
2021-10-16 15:45:04 +02:00
< span class = "h" > Made with < span id = "heart" > ❤ ︎ < / span > by Aircoookie and the < a href = "https://wled.discourse.group/" target = "_blank" > WLED community< / a > < / span >
2021-02-28 18:16:24 +01:00
< / div >
2021-03-09 16:23:19 +01:00
2021-02-28 18:16:24 +01:00
< div id = "nodes" class = "modal" >
2022-04-06 05:45:39 +02:00
< button class = "btn btn-xs close" onclick = "toggleNodes()" > < i class = "icons rot45" >  < / i > < / button >
2021-03-10 13:23:03 +01:00
< div id = "ndlt" > WLED instances< / div >
2022-04-06 05:45:39 +02:00
< div id = "kn" > Loading...< / div >
< div style = "position:sticky;bottom:0;" >
2022-03-11 23:38:50 +01:00
< button class = "btn infobtn" onclick = "loadNodes()" > Refresh< / button >
2022-04-06 05:45:39 +02:00
< / div >
2020-05-02 01:59:41 +02:00
< / div >
2021-03-09 16:23:19 +01:00
2023-06-27 01:51:24 +02:00
< div id = "mlv2D" class = "modal" >
< div id = "klv2D" style = "width:100%; height:100%" > Loading...< / div >
2022-07-26 11:08:26 +02:00
< / div >
2020-05-02 01:59:41 +02:00
< div id = "rover" class = "modal" >
2020-06-22 12:30:31 +02:00
< i class = "icons huge" >  < / i > < br >
< div id = "lv" > ?< / div > < br > < br >
To use built-in effects, use an override button below.< br >
You can return to realtime mode by pressing the star in the top left corner.< br >
< button class = "btn" onclick = "setLor(1)" > Override once< / button >
< button class = "btn" onclick = "setLor(2)" > Override until reboot< / button > < br >
< span class = "h" > For best performance, it is recommended to turn off the streaming source when not in use.< / span >
2020-05-02 01:59:41 +02:00
< / div >
< i id = "roverstar" class = "icons huge" onclick = "setLor(0)" >  < / i > < br >
2021-12-07 16:31:45 +01:00
< script src = "index.js" > < / script >
2017-05-07 17:09:18 +02:00
< / body >
2021-02-24 20:23:32 +01:00
< / html >
