2021-08-10 17:11:17 +02:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< 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 >
2022-01-03 22:37:21 +01:00
< script >
function feedback(){}
// 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()"]).
var h = document.getElementsByTagName('head')[0];
var l = document.createElement('script');
l.type = 'application/javascript';
l.src = 'iro.js';
l.addEventListener('load', (e) => {
// after iro is loaded initialize global variable
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) => {
// after rangetouch is loaded initialize global variable
ranges = RangeTouch.setup('input[type="range"]', {});
2022-01-23 11:43:39 +01:00
let stateCheck = setInterval(() => {
if (document.readyState === 'complete') {
clearInterval(stateCheck);
// document ready, start processing UI
onLoad();
}
}, 100);
2022-01-03 22:37:21 +01:00
});
setTimeout(function(){h.appendChild(l)},50);
});
setTimeout(function(){h.appendChild(l)},50);
< / script >
2021-08-10 17:11:17 +02:00
< link rel = "stylesheet" href = "simple.css" >
< / head >
2022-01-03 22:37:21 +01:00
< body >
2021-08-10 17:11:17 +02:00
< div id = "cv" class = "overlay" > Loading WLED UI...< / div >
< noscript > < div class = "overlay" style = "opacity:1;" > Sorry, WLED UI needs JavaScript!< / div > < / noscript >
< div id = "bg" > < / div >
< div class = "wrapper" id = "top" >
< div class = "tab top" >
< div class = "btnwrap" >
< button id = "buttonPower" onclick = "togglePower()" > < i class = "icons" >  < / i > < p class = "tab-label" > Power< / p > < / button >
< button id = "buttonI" onclick = "toggleInfo()" > < i class = "icons" >  < / i > < p class = "tab-label" > Info< / p > < / button >
< button id = "buttonNodes" onclick = "toggleNodes()" > < i class = "icons" >  < / i > < p class = "tab-label" > Nodes< / p > < / button > < / div >
< button onclick = "window.location.href='/settings';" > < i class = "icons" >  < / i > < p class = "tab-label" > Config< / p > < / button >
< button id = "buttonCP" onclick = "tglCP()" > < i class = "icons" >  < / i > < p class = "tab-label" > Expand< / p > < / button >
2022-01-06 22:21:38 +01:00
<!-- button id="buttonBri" onclick="tglBri()"><i class="icons"></i><p class="tab - label">Brightness</p></button -->
2021-08-10 17:11:17 +02:00
< / div >
< div id = "briwrap" >
2021-08-12 15:47:22 +02:00
< p class = "label hd" > Global brightness< / p >
2021-08-10 17:11:17 +02:00
< 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 >
< output class = "sliderbubble" > < / output >
< / div >
< / div >
< / div >
< / div >
< div class = "container" >
< div class = "tabcontent" >
2022-01-06 22:21:38 +01:00
< div id = "QuickLoad" class = "center" >
< p class = "label h" > Quick Load< / p >
< div id = "pql" > < / div >
2021-08-10 17:11:17 +02:00
< / div >
2022-01-06 22:21:38 +01:00
< div id = "QCS" class = "center" >
< p class = "label h" > Solid color< / p >
< div id = "qcs-w" class = "center" >
< 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 >
< 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 >
< / div >
2021-08-10 17:11:17 +02:00
< / div >
2022-01-06 22:21:38 +01:00
< div id = "picker" class = "center" > < / div >
< div id = "Colors" class = "center" >
2022-01-03 22:37:21 +01:00
< div id = "vwrap" >
2022-01-06 22:21:38 +01:00
<!-- p class="label h">Value</p -->
2021-10-16 15:13:30 +02:00
< div class = "sliderwrap il" >
2022-01-03 22:37:21 +01:00
< input id = "sliderV" class = "noslide" oninput = "fromV()" onchange = "setColor(0)" max = "100" min = "0" type = "range" value = "100" step = "any" / >
2021-10-16 15:13:30 +02:00
< div class = "sliderdisplay" > < / div >
2022-01-03 22:37:21 +01:00
< / div > < br >
< / div >
< div id = "kwrap" >
2022-01-06 22:21:38 +01:00
<!-- p class="label h">Temperature</p -->
2021-10-16 15:13:30 +02:00
< div class = "sliderwrap il" >
2022-01-03 22:37:21 +01:00
< input id = "sliderK" class = "noslide" oninput = "fromK()" onchange = "setColor(0)" max = "10091" min = "1900" type = "range" value = "6550" / >
2021-10-16 15:13:30 +02:00
< div class = "sliderdisplay" > < / div >
< / div >
2022-01-03 22:37:21 +01:00
< / div >
< div id = "rgbwrap" class = "center" >
2022-01-06 22:21:38 +01:00
< p class = "label h" > RGB channels< / p >
2022-01-03 22:37:21 +01:00
< div id = "rwrap" class = "il" >
< div class = "sliderwrap il" >
< input id = "sliderR" onchange = "fromRgb()" max = "255" min = "0" type = "range" value = "128" / >
< div class = "sliderdisplay" > < / div >
< / div >
< / div > < br >
< div id = "gwrap" class = "il" >
< div class = "sliderwrap il" >
< input id = "sliderG" onchange = "fromRgb()" max = "255" min = "0" type = "range" value = "128" / >
< div class = "sliderdisplay" > < / div >
< / div >
< / div > < br >
< div id = "bwrap" class = "il" >
< div class = "sliderwrap il" >
< input id = "sliderB" onchange = "fromRgb()" max = "255" min = "0" type = "range" value = "128" / >
< div class = "sliderdisplay" > < / div >
< / div >
< / div > < br >
< / div >
< div id = "wwrap" class = "center" >
2022-01-06 22:21:38 +01:00
< p class = "label h" > White channel< / p >
2021-10-16 15:13:30 +02:00
< div class = "sliderwrap il" >
2022-01-03 22:37:21 +01:00
< input id = "sliderW" 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 >
2022-01-03 22:37:21 +01:00
< div id = "wbal" >
2022-01-06 22:21:38 +01:00
< p class = "label h" > White balance< / p >
2022-01-03 22:37:21 +01:00
< div class = "sliderwrap il" >
< input id = "sliderA" onchange = "setBalance(this.value)" max = "255" min = "0" type = "range" value = "128" / >
< div class = "sliderdisplay" > < / div >
< / div >
2021-08-21 18:12:38 +02:00
< / div >
< / div >
2022-01-06 22:21:38 +01:00
< div id = "Slots" class = "center" >
< p class = "label h" > Color slots< / p >
< div id = "csl" class = "center" style = "display: none;" >
< button class = "xxs btn" onclick = "selectSlot(0);" > 1< / button >
< button class = "xxs btn" onclick = "selectSlot(1);" > 2< / button >
< button class = "xxs btn" onclick = "selectSlot(2);" > 3< / button >
< / div >
2021-08-10 17:11:17 +02:00
< / div >
2022-01-06 22:21:38 +01:00
< div id = "Segments" class = "center" >
< div id = "segcont" > < / div >
2021-08-10 17:11:17 +02:00
< / div >
2022-01-06 22:21:38 +01:00
< div id = "Presets" class = "center" >
2021-08-12 15:47:22 +02:00
< p class = "label h" > Presets< / p >
2021-08-10 17:11:17 +02:00
< div class = "fnd" >
< input type = "text" class = "fnd" placeholder = "Search" oninput = "search(this,'pcont')" onfocus = "search(this)" / >
2022-01-06 22:21:38 +01:00
< i class = "icons clear-icon" onclick = "clean(this);" >  < / i >
< i class = "icons search-icon" >  < / i >
2021-08-10 17:11:17 +02:00
< / div >
< div id = "pcont" class = "list" > < / div >
< / div >
< div id = "Effects" class = "center" >
2021-08-12 15:47:22 +02:00
< p class = "label h" > Effect< / p >
< div title = "Effect speed" >
2021-08-10 17:11:17 +02:00
< i class = "icons slider-icon" >  < / i >
< div class = "sliderwrap il" >
< input id = "sliderSpeed" onchange = "setSpeed()" oninput = "updateTrail(this)" max = "255" min = "0" type = "range" value = "128" / >
< div class = "sliderdisplay" > < / div >
< / div >
< output class = "sliderbubble" > < / output >
< / div >
2021-08-12 15:47:22 +02:00
< div title = "Effect intensity" >
2021-08-10 17:11:17 +02:00
< i class = "icons slider-icon" onclick = "tglLabels()" >  < / i >
< div class = "sliderwrap il" >
< input id = "sliderIntensity" onchange = "setIntensity()" oninput = "updateTrail(this)" max = "255" min = "0" type = "range" value = "128" / >
< div class = "sliderdisplay" > < / div >
< / div >
< output class = "sliderbubble" > < / output >
< / div >
< div style = "padding-bottom:20px;" >
< div onclick = "tglFxDropdown()" class = "c btn" id = "fxBtn" > < i class = "icons" >  < / i > Solid< / div >
< div onclick = "tglPalDropdown()" class = "c btn" id = "palBtn" > < i class = "icons" >  < / i > Default< / div >
< div id = "fxDropdown" class = "dd-content" >
< div class = "fnd" >
< input type = "text" class = "fnd" placeholder = "Search" oninput = "search(this,'fxlist')" onfocus = "search(this)" / >
2022-01-06 22:21:38 +01:00
< i class = "icons clear-icon" onclick = "clean(this);" >  < / i >
< i class = "icons search-icon" >  < / i >
2021-08-10 17:11:17 +02:00
< / div >
< div id = "fxlist" class = "list" >
2022-08-22 01:17:10 +02:00
< div class = "lstI" data-id = "0" onClick = "setEffect(0)" > < a href = "#0" onClick = "setEffect(0)" > Solid< / a > < / div >
2021-08-10 17:11:17 +02:00
< / div >
< / div >
< div id = "palDropdown" class = "dd-content" >
< div class = "fnd" >
< input type = "text" class = "fnd" placeholder = "Search" oninput = "search(this,'pallist')" onfocus = "search(this)" / >
2022-01-06 22:21:38 +01:00
< i class = "icons clear-icon" onclick = "clean(this);" >  < / i >
< i class = "icons search-icon" >  < / i >
2021-08-10 17:11:17 +02:00
< / div >
< div id = "pallist" class = "list" >
< div class = "lstI" data-id = "0" onClick = "setPalette(0)" > < a href = "#0" onClick = "setPalette(0)" > Default< / a > < div class = "lstIprev" > < / div > < / div >
< / div >
< / div >
< br >
< / div >
< / div >
< / div >
< / div >
< div id = "connind" > < / div >
< div id = "toast" > < / div >
< div id = "namelabel" onclick = "toggleNodes()" > < / div >
< div id = "info" class = "modal" >
< div id = "imgw" >
< img class = "wi" alt = "" src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAFCAYAAAC5Fuf5AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABbSURBVChTlY9bDoAwDMNW7n9nwCipytQN4Z8tbrTHmDmF4oPzyldwRqp1SSdnV/NuZuzqerAByxXznBw3igkeFEfXyUuhK/yFM0CxJfyqXZEOc6/Sr9/bf7uIC5Nwd7orMvAPAAAAAElFTkSuQmCC" / >
< / div > < br >
< div id = "kv" > Loading...< / div > < br >
2021-10-16 15:45:04 +02:00
< div >
2021-11-21 14:14:39 +01:00
< button class = "btn" onclick = "requestJson()" > Refresh< / button >
2021-10-16 15:45:04 +02:00
< button class = "btn" onclick = "toggleInfo()" > Close Info< / button >
< button class = "btn" onclick = "toggleNodes()" > Instance List< / button >
< button class = "btn" id = "resetbtn" onclick = "cnfReset()" > Reboot WLED< / button >
< / div >
< 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-08-10 17:11:17 +02:00
< / div >
< div id = "nodes" class = "modal" >
< div id = "ndlt" > WLED instances< / div >
< div id = "kn" > Loading...< / div > < br >
2021-10-16 15:45:04 +02:00
< div >
< button class = "btn" onclick = "loadNodes()" > Refresh< / button >
< button class = "btn" onclick = "toggleNodes()" > Close list< / button >
< / div >
2021-08-10 17:11:17 +02:00
< / div >
< i id = "roverstar" class = "icons huge" onclick = "setLor(0)" >  < / i > < br >
< script src = "simple.js" > < / script >
< / body >
< / html >
