958cd35e21
Make override work in mainseg mode Move unfreeze on turn on from UI to JSON parser Fix mainseg not unfreezing on timeout
331 lines
14 KiB
HTML
331 lines
14 KiB
HTML
<!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>
|
|
<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"]', {});
|
|
let stateCheck = setInterval(() => {
|
|
if (document.readyState === 'complete') {
|
|
clearInterval(stateCheck);
|
|
// document ready, start processing UI
|
|
onLoad();
|
|
}
|
|
}, 100);
|
|
});
|
|
setTimeout(()=>{h.appendChild(l)},50);
|
|
});
|
|
setTimeout(()=>{h.appendChild(l)},50);
|
|
</script>
|
|
<link rel="stylesheet" href="index.css">
|
|
</head>
|
|
<body>
|
|
|
|
<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()" 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>
|
|
<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>
|
|
<button onclick="window.location.href='/settings';"><i class="icons"></i><p class="tab-label">Config</p></button>
|
|
<button id="buttonPcm" onclick="togglePcMode(true)"><i class="icons"></i><p class="tab-label">PC Mode</p></button>
|
|
</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>
|
|
<output class="sliderbubble"></output>
|
|
</div>
|
|
</div>
|
|
<iframe id="liveview" src="about:blank"></iframe>
|
|
</div>
|
|
</div>
|
|
|
|
<div class ="container">
|
|
<div id="Colors" class="tabcontent">
|
|
<div id="picker" class="noslide"></div>
|
|
<div id="vwrap">
|
|
<!--p class="labels hd">Value</p-->
|
|
<div class="sliderwrap il">
|
|
<input id="sliderV" class="noslide" oninput="fromV()" onchange="setColor(0)" max="100" min="0" type="range" value="100" step="any" />
|
|
<div class="sliderdisplay"></div>
|
|
</div><br>
|
|
</div>
|
|
<div id="kwrap">
|
|
<!--p class="labels hd">Temperature</p-->
|
|
<div class="sliderwrap il">
|
|
<input id="sliderK" class="noslide" oninput="fromK()" onchange="setColor(0)" max="10091" min="1900" type="range" value="6550" />
|
|
<div class="sliderdisplay"></div>
|
|
</div>
|
|
</div>
|
|
<div id="rgbwrap">
|
|
<p class="labels hd">RGB color</p>
|
|
<div id="rwrap" class="il">
|
|
<div class="sliderwrap il">
|
|
<input id="sliderR" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
|
|
<div class="sliderdisplay"></div>
|
|
</div>
|
|
</div>
|
|
<div id="gwrap" class="il">
|
|
<div class="sliderwrap il">
|
|
<input id="sliderG" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
|
|
<div class="sliderdisplay"></div>
|
|
</div>
|
|
</div>
|
|
<div id="bwrap" class="il">
|
|
<div class="sliderwrap il">
|
|
<input id="sliderB" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
|
|
<div class="sliderdisplay"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="wwrap">
|
|
<p class="labels hd">White channel</p>
|
|
<div id="whibri" class="sliderwrap il">
|
|
<input id="sliderW" class="noslide" oninput="fromW()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
|
|
<div class="sliderdisplay"></div>
|
|
</div>
|
|
</div>
|
|
<div id="wbal">
|
|
<p class="labels hd">White balance</p>
|
|
<div class="sliderwrap il">
|
|
<input id="sliderA" class="noslide" onchange="setBalance(this.value)" max="255" min="0" type="range" value="128" />
|
|
<div class="sliderdisplay"></div>
|
|
</div>
|
|
</div>
|
|
<div id="qcs-w">
|
|
<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>
|
|
<div id="csl">
|
|
<button id="csl0" class="btn xxs cl" onclick="selectSlot(0);" data-r="0" data-g="0" data-b="0" data-w="0">1</button>
|
|
<button id="csl1" class="btn xxs cl" onclick="selectSlot(1);" data-r="0" data-g="0" data-b="0" data-w="0">2</button>
|
|
<button id="csl2" class="btn xxs cl" onclick="selectSlot(2);" data-r="0" data-g="0" data-b="0" data-w="0">3</button>
|
|
</div>
|
|
<p class="labels h" id="cslLabel"></p>
|
|
<div id="hexw">
|
|
<i class="icons sel-icon" onclick="tglRgb()"><!----></i>
|
|
<input id="hexc" type="text" class="noslide" onkeydown="hexEnter()" autocomplete="off" maxlength="8" />
|
|
<button id="hexcnf" class="btn btn-xs" onclick="fromHex();"><i class="icons btn-icon"></i></button>
|
|
</div>
|
|
<p class="labels" id="pall"><i class="icons sel-icon" onclick="tglHex()"></i> Color palette</p>
|
|
<div id="palw" class="il">
|
|
<div class="staytop fnd">
|
|
<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>
|
|
</div>
|
|
<div id="pallist" class="list">
|
|
<div class="lstI">
|
|
<label class="radio schkl" onclick="loadPalettes()">
|
|
<div class="lstIcontent">
|
|
<span class="lstIname">
|
|
Loading...
|
|
</span>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="Effects" class="tabcontent">
|
|
<span id="sliders">
|
|
<p class="labels hd" id="sliderLabel0">Effect speed</p>
|
|
<div class="staytop" id="slider0">
|
|
<i class="icons slider-icon" style="cursor: pointer;" onclick="tglFreeze()"></i>
|
|
<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>
|
|
<output class="sliderbubble"></output>
|
|
</div>
|
|
<p class="labels hd" id="sliderLabel1">Effect intensity</p>
|
|
<div class="staytop" id="slider1">
|
|
<i class="icons slider-icon" style="cursor: pointer;" 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>
|
|
<output class="sliderbubble"></output>
|
|
</div>
|
|
<p class="labels hd" 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 hd" 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 hd" 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>
|
|
</span>
|
|
<div>
|
|
<p class="labels hd" id="modeLabel">Effect mode</p>
|
|
<div class="staytop fnd" id="fxFind">
|
|
<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>
|
|
</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>
|
|
|
|
<div id="Segments" class="tabcontent">
|
|
<div id="segcont">
|
|
Loading...
|
|
</div>
|
|
<div id="segutil" class="staybot">
|
|
</div>
|
|
<div id="segutil2">
|
|
<button class="btn btn-s" id="rsbtn" onclick="rSegs()">Reset segments</button>
|
|
</div>
|
|
<p>Transition: <input id="tt" class="noslide" type="number" min="0" max="65.5" step="0.1" value="0.7"> s</p>
|
|
</div>
|
|
|
|
<div id="Presets" class="tabcontent">
|
|
<div id="pql">
|
|
</div>
|
|
<p class="labels hd">Presets</p>
|
|
<div class="staytop fnd" id="psFind">
|
|
<input type="text" class="fnd" placeholder="Search" oninput="search(this,'pcont')" onfocus="search(this,'pcont')" />
|
|
<i class="icons clear-icon" onclick="clean(this);"></i>
|
|
<i class="icons search-icon"></i>
|
|
</div>
|
|
<div id="pcont" class="list">
|
|
<span onclick="loadPresets()">Loading...</span>
|
|
</div>
|
|
<div id="putil" class="staybot">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab bot" id="bot">
|
|
<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>
|
|
<button class="tablinks" onclick="openTab(3)"><i class="icons"></i><p class="tab-label">Presets</p></button>
|
|
</div>
|
|
|
|
<div id="connind"></div>
|
|
<div id="toast" onclick="clearErrorToast(100);"></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>
|
|
<div>
|
|
<button class="btn" onclick="requestJson()">Refresh</button>
|
|
<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>
|
|
<br>
|
|
<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>
|
|
</div>
|
|
|
|
<div id="nodes" class="modal">
|
|
<div id="ndlt">WLED instances</div>
|
|
<div id="kn">Loading...</div><br>
|
|
<div>
|
|
<button class="btn infobtn" onclick="loadNodes()">Refresh</button>
|
|
<button class="btn infobtn" onclick="toggleNodes()">Close list</button>
|
|
</div>
|
|
<br>
|
|
</div>
|
|
|
|
<div id="rover" class="modal">
|
|
<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>
|
|
</div>
|
|
<i id="roverstar" class="icons huge" onclick="setLor(0)"></i><br>
|
|
<script src="index.js"></script>
|
|
</body>
|
|
</html>
|