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"]', {});
2021-12-07 08:26:01 +01:00
onLoad(); // start processing UI
2021-12-06 20:53:09 +01:00
});
2021-12-08 10:09:45 +01:00
//h.appendChild(l); // if this fires too quickly for ESP8266 use next line
setTimeout(function(){h.appendChild(l)},50);
2021-12-06 20:53:09 +01:00
});
h.appendChild(l);
< / 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 >
2021-03-17 17:11:05 +01:00
< button onclick = "window.location.href='/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 >
< div class = "il" >
< i class = "icons slider-icon" onclick = "tglTheme()" >  < / i >
< 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 >
2021-12-02 22:57:32 +01:00
< div id = "vwrap" >
2021-12-03 21:09:53 +01:00
<!-- p class="labels hd">Value</p -->
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 >
< / div > < br >
2021-12-01 14:51:45 +01:00
< / div >
< div id = "kwrap" >
2021-12-03 21:09:53 +01:00
<!-- p class="labels hd">Temperature</p -->
2020-06-22 12:30:31 +02:00
< div class = "sliderwrap il" >
2021-11-26 20:18:38 +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 >
< / div >
2020-06-22 12:30:31 +02:00
< div id = "rgbwrap" >
2021-12-03 21:09:53 +01:00
< p class = "labels hd" > RGB color< / p >
2021-02-24 20:23:32 +01:00
< div id = "rwrap" class = "il" >
< 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 >
2020-06-22 12:30:31 +02:00
< / div > < br >
2021-02-24 20:23:32 +01:00
< div id = "gwrap" class = "il" >
< 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 >
2020-06-22 12:30:31 +02:00
< / div > < br >
2021-02-24 20:23:32 +01:00
< div id = "bwrap" class = "il" >
< 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 >
2020-06-22 12:30:31 +02:00
< / div > < br >
< / div >
< div id = "wwrap" >
2021-10-16 15:13:30 +02:00
< p class = "labels hd" > White channel< / p >
< div id = "whibri" class = "sliderwrap il" >
2021-10-16 15:45:04 +02:00
< input id = "sliderW" class = "noslide" onchange = "setColor(0)" max = "255" min = "0" type = "range" value = "128" / >
2021-10-16 15:13:30 +02:00
< div class = "sliderdisplay" > < / div >
< / div >
< / div >
2021-12-03 14:26:26 +01:00
< div id = "wbal" >
2021-10-16 15:13:30 +02:00
< 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 >
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" >
2021-10-31 15:52:41 +01:00
< button id = "csl0" class = "btn xxs" onclick = "selectSlot(0);" > 1< / button >
< button id = "csl1" class = "btn xxs" onclick = "selectSlot(1);" > 2< / button >
< button id = "csl2" class = "btn xxs" onclick = "selectSlot(2);" > 3< / button >
2020-06-22 12:30:31 +02:00
< / div >
2021-10-31 15:52:41 +01:00
< p class = "labels h" id = "cslLabel" > < / p >
2020-06-22 12:30:31 +02:00
< div id = "hexw" >
< input id = "hexc" type = "text" class = "noslide" onkeydown = "hexEnter(this)" 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 >
2021-10-29 23:55:42 +02:00
< div id = "palw" class = "il" >
2021-10-31 15:52:41 +01:00
< p class = "labels" id = "pall" > < i class = "icons sel-icon" onclick = "tglHex()" >  < / i > Color palette< / p >
2021-02-24 20:23:32 +01:00
< div class = "staytop fnd" >
2021-09-18 13:15:19 +02:00
< input type = "text" class = "fnd" placeholder = "Search" oninput = "search(this,'pallist')" onfocus = "search(this,'pallist')" / >
< 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" data-id = "0" >
2021-03-20 14:48:49 +01:00
< label class = "radio schkl" >
2021-02-24 20:23:32 +01:00
< input type = "radio" value = "${palettes[i].id}" name = "palette" onChange = "setPalette()" >
2021-03-20 14:48:49 +01:00
< span class = "radiomark schk" > < / span >
2021-02-24 20:23:32 +01:00
< / label >
< div class = "lstIcontent" >
< span class = "lstIname" >
Default
< / span >
< / div >
< / div >
< div class = "lstI" >
< div class = "lstIcontent" >
< span class = "lstIname" >
2021-03-18 23:59:56 +01:00
Loading...
2021-02-24 20:23:32 +01:00
< / span >
< / div >
< / div >
< / div >
2020-06-22 12:30:31 +02:00
< / div >
< / div >
< div id = "Effects" class = "tabcontent" >
2021-10-31 15:52:41 +01:00
< p class = "labels" id = "sliderLabel0" > Effect speed< / p >
< div class = "staytop" id = "slider0" >
< i class = "icons slider-icon" onclick = "tglFreeze()" >  < / i >
2020-06-22 12:30:31 +02:00
< div class = "sliderwrap il" >
< input id = "sliderSpeed" class = "noslide" onchange = "setSpeed()" oninput = "updateTrail(this)" max = "255" min = "0" 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 >
2021-10-31 15:52:41 +01:00
< p class = "labels" id = "sliderLabel1" > Effect intensity< / p >
< div class = "staytop" id = "slider1" >
2020-06-22 12:30:31 +02:00
< i class = "icons slider-icon" onclick = "tglLabels()" >  < / i >
< 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 >
2021-02-24 20:23:32 +01:00
< output class = "sliderbubble" > < / output >
2020-06-22 12:30:31 +02:00
< / div >
2021-10-31 15:52:41 +01:00
< p class = "labels" id = "sliderLabel2" > Custom 1< / p >
< div class = "staytop" id = "slider2" >
< i class = "icons slider-icon" >  < / i >
< div class = "sliderwrap il" >
< input id = "sliderC1" class = "noslide" onchange = "setFFT1()" oninput = "updateTrail(this)" max = "255" min = "0" type = "range" value = "6" / >
< div class = "sliderdisplay" > < / div >
< / div >
< output class = "sliderbubble" > < / output >
< / div >
< p class = "labels" id = "sliderLabel3" > Custom 2< / p >
< div class = "staytop" id = "slider3" >
< i class = "icons slider-icon" >  < / i >
< div class = "sliderwrap il" >
< input id = "sliderC2" class = "noslide" onchange = "setFFT2()" oninput = "updateTrail(this)" max = "255" min = "0" type = "range" value = "6" / >
< div class = "sliderdisplay" > < / div >
< / div >
< output class = "sliderbubble" > < / output >
< / div >
< p class = "labels" id = "sliderLabel4" > Custom 3< / p >
< div class = "staytop" id = "slider4" >
< i class = "icons slider-icon" >  < / i >
< div class = "sliderwrap il" >
< input id = "sliderC3" class = "noslide" onchange = "setFFT3()" oninput = "updateTrail(this)" max = "255" min = "0" type = "range" value = "6" / >
< div class = "sliderdisplay" > < / div >
< / div >
< output class = "sliderbubble" > < / output >
< / div >
2021-02-24 20:23:32 +01:00
< div class = "il" >
2021-10-31 15:52:41 +01:00
< p class = "labels" id = "modeLabel" > Effect mode< / p >
< div class = "staytop fnd" id = "fxFind" >
2021-09-18 13:15:19 +02:00
< input type = "text" class = "fnd" placeholder = "Search" oninput = "search(this,'fxlist')" onfocus = "search(this,'fxlist')" / >
< i class = "icons clear-icon" onclick = "clean(this);" >  < / i >
< i class = "icons search-icon" >  < / i >
2021-02-24 20:23:32 +01:00
< / div >
< div id = "fxlist" class = "list" >
Loading...
< / 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 >
2021-10-29 23:55:42 +02:00
< p > Transition: < input id = "tt" class = "noslide" type = "number" min = "0" max = "65.5" step = "0.1" value = "0.7" > s< / p >
2020-06-22 12:30:31 +02:00
< / div >
2021-08-10 17:11:17 +02:00
< div id = "Presets" class = "tabcontent" >
2021-02-24 20:23:32 +01:00
< div id = "putil" class = "staytop" >
2020-11-08 23:44:10 +01:00
< / div >
< div id = "pql" >
< / div >
< div id = "pcont" >
Loading...
2021-07-10 16:14:17 +02:00
< / 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 >
2019-12-05 01:58:03 +01:00
< div id = "toast" > < / 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" >
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" / >
2020-06-22 12:30:31 +02:00
< / div > < br >
2021-02-28 18:16:24 +01:00
< div id = "kv" > Loading...< / div > < br >
2021-10-16 15:13:30 +02:00
< div >
<!-- table>
2021-09-28 23:27:40 +02:00
< tr >
2021-11-21 14:14:39 +01:00
< td class = "keytd" -- > < button class = "btn" onclick = "requestJson()" > Refresh< / button > <!-- /td>
2021-10-16 15:13:30 +02:00
< td class = "valtd" -- > < button class = "btn" onclick = "toggleInfo()" > Close Info< / button > <!-- /td>
2021-09-28 23:27:40 +02:00
< / tr >
< tr >
2021-10-16 15:13:30 +02:00
< td class = "keytd" -- > < button class = "btn" onclick = "toggleNodes()" > Instance List< / button > <!-- /td>
< td class = "valtd" -- > < button class = "btn" id = "resetbtn" onclick = "cnfReset()" > Reboot WLED< / button > <!-- /td>
2021-09-28 23:27:40 +02:00
< / tr >
2021-10-16 15:13:30 +02:00
< / table-- >
< / 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" >
2021-03-10 13:23:03 +01:00
< div id = "ndlt" > WLED instances< / div >
2021-02-28 18:16:24 +01:00
< div id = "kn" > Loading...< / div > < br >
2021-10-16 15:13:30 +02:00
< div >
<!-- table>
2021-09-28 23:27:40 +02:00
< tr >
2021-10-16 15:13:30 +02:00
< td class = "keytd" -- > < button class = "btn infobtn" onclick = "loadNodes()" > Refresh< / button > <!-- /td>
< td class = "valtd" -- > < button class = "btn infobtn" onclick = "toggleNodes()" > Close list< / button > <!-- /td>
2021-09-28 23:27:40 +02:00
< / tr >
2021-10-16 15:13:30 +02:00
< / table-- >
< / div > < br >
2020-05-02 01:59:41 +02:00
< / div >
2021-03-09 16:23:19 +01:00
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 >
2021-03-09 16:23:19 +01:00
2020-05-02 01:59:41 +02:00
< 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 >
