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>
|
|
|
|
|
<script>function feedback(){}</script>
|
2020-12-20 20:18:07 +01:00
|
|
|
<link rel="stylesheet" href="index.css">
|
2019-12-05 01:58:03 +01:00
|
|
|
</head>
|
|
|
|
|
<body onload="onLoad()">
|
|
|
|
|
|
|
|
|
|
<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-03-10 13:23:03 +01:00
|
|
|
<button id="buttonNodes" onclick="toggleNodes()"><i class="icons"></i><p class="tab-label">Nodes</p></button></div>
|
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>
|
|
|
|
|
<div id="rgbwrap">
|
2021-02-24 20:23:32 +01:00
|
|
|
<div id="rwrap" class="il">
|
|
|
|
|
<div class="sliderwrap il">
|
|
|
|
|
<input id="sliderR" class="noslide" onchange="fromRgb()" oninput="updateTrail(this,1)" max="255" min="0" type="range" value="128" />
|
|
|
|
|
<div class="sliderdisplay"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<output class="sliderbubble"></output>
|
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">
|
|
|
|
|
<input id="sliderG" class="noslide" onchange="fromRgb()" oninput="updateTrail(this,2)" max="255" min="0" type="range" value="128" />
|
|
|
|
|
<div class="sliderdisplay"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<output class="sliderbubble"></output>
|
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">
|
|
|
|
|
<input id="sliderB" class="noslide" onchange="fromRgb()" oninput="updateTrail(this,3)" max="255" min="0" type="range" value="128" />
|
|
|
|
|
<div class="sliderdisplay"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<output class="sliderbubble"></output>
|
2020-06-22 12:30:31 +02:00
|
|
|
</div><br>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="wwrap">
|
|
|
|
|
<p class="labels">White channel</p>
|
|
|
|
|
<div class="sliderwrap il">
|
|
|
|
|
<input id="sliderW" class="noslide" onchange="setColor(0)" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
|
|
|
|
|
<div class="sliderdisplay"></div>
|
2021-02-24 20:23:32 +01:00
|
|
|
<output class="sliderbubble"></output>
|
2020-06-22 12:30:31 +02:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<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>
|
|
|
|
|
<div class="qcs" onclick="pC('rnd');" title="Random" style="background-color:var(--c-3); padding: 4px 8px; transform: translateY(-10px);">R</div>
|
2020-06-22 12:30:31 +02:00
|
|
|
</div>
|
|
|
|
|
<div id="csl">
|
2021-03-21 22:33:04 +01:00
|
|
|
<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>
|
2020-06-22 12:30:31 +02:00
|
|
|
</div>
|
|
|
|
|
<div id="hexw">
|
|
|
|
|
<input id="hexc" type="text" class="noslide" onkeydown="hexEnter(this)" autocomplete="off" maxlength="8" />
|
|
|
|
|
<button id="hexcnf" class="xxs btn" onclick="fromHex();"><i class="icons btna-icon"></i></button>
|
|
|
|
|
</div>
|
2021-03-20 14:48:49 +01:00
|
|
|
<p class="labels"><i class="icons sel-icon" onclick="tglHex()"></i> Color palette</p>
|
2020-06-22 12:30:31 +02:00
|
|
|
<div class="il">
|
2021-02-24 20:23:32 +01:00
|
|
|
<div class="staytop fnd">
|
2021-07-03 21:27:06 +02:00
|
|
|
<input type="text" class="fnd" placeholder="Search" oninput="search(this,'pallist')" onfocus="search(this)" />
|
2021-02-24 20:23:32 +01:00
|
|
|
<span onclick="clean(this)" class="icons"></span>
|
|
|
|
|
<div class="icons"><svg xmlns='http://www.w3.org/2000/svg' class='fndIcn'><circle cx='8' cy='8' r='6' /><line x1='12' y1='12' x2='24' y2='12' transform='rotate(45,12,12)' /></svg></div>
|
|
|
|
|
</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">
|
|
|
|
|
<p class="labels">Effect speed</p>
|
2021-02-24 20:23:32 +01:00
|
|
|
<div class="staytop" id="staytop">
|
2020-06-22 12:30:31 +02:00
|
|
|
<i class="icons slider-icon"></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>
|
2021-02-24 20:23:32 +01:00
|
|
|
<output class="sliderbubble"></output>
|
2020-06-22 12:30:31 +02:00
|
|
|
</div>
|
|
|
|
|
<p class="labels">Effect intensity</p>
|
|
|
|
|
<div class="staytop" id="staytop1">
|
|
|
|
|
<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-02-24 20:23:32 +01:00
|
|
|
<div class="il">
|
2021-03-09 14:01:18 +01:00
|
|
|
<p class="labels">Effect mode</p>
|
2021-02-24 20:23:32 +01:00
|
|
|
<div class="staytop fnd" id="staytop2">
|
|
|
|
|
<input type="text" class="fnd" placeholder="Search" oninput="search(this,'fxlist')" onfocus="search(this)" />
|
|
|
|
|
<span onclick="clean(this);" class="icons"></span>
|
|
|
|
|
<div class="icons"><svg xmlns='http://www.w3.org/2000/svg' class='fndIcn'><circle cx='8' cy='8' r='6' /><line x1='12' y1='12' x2='24' y2='12' transform='rotate(45,12,12)' /></svg></div>
|
|
|
|
|
</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">
|
2021-02-24 20:23:32 +01:00
|
|
|
<div id="segutil" class="staytop">
|
|
|
|
|
</div>
|
2020-06-22 12:30:31 +02:00
|
|
|
<div id="segcont">
|
|
|
|
|
Loading...
|
|
|
|
|
</div>
|
|
|
|
|
<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-07-14 13:43: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>
|
|
|
|
|
|
|
|
|
|
<div id="Favorites" 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>
|
|
|
|
|
<button class="tablinks" onclick="openTab(3)"><i class="icons"></i><p class="tab-label">Favorites</p></button>
|
2021-03-20 16:03:59 +01:00
|
|
|
<!--button class="tablinks" onclick="toggleNodes()"><i class="icons"></i><p class="tab-label">Nodes</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-03-24 23:55:39 +01:00
|
|
|
<button class="btn infobtn" onclick="loadInfo()">Refresh</button>
|
2021-02-28 18:16:24 +01:00
|
|
|
<button class="btn infobtn" onclick="toggleInfo()">Close Info</button><br>
|
2021-03-10 13:23:03 +01:00
|
|
|
<button class="btn infobtn" onclick="toggleNodes()">Instance List</button>
|
2021-02-28 18:16:24 +01:00
|
|
|
<button class="btn infobtn" id="resetbtn" onclick="cnfReset()">Reboot WLED</button><br>
|
|
|
|
|
<span class="h">Made with <span id="heart">❤︎</span> by Aircoookie and the WLED community</span>
|
|
|
|
|
</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-03-10 13:23:03 +01:00
|
|
|
<button class="btn infobtn" onclick="loadNodes()">Refresh</button>
|
|
|
|
|
<button class="btn infobtn" onclick="toggleNodes()">Close list</button><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>
|
2020-12-20 20:18:07 +01:00
|
|
|
<script src="iro.js"></script>
|
|
|
|
|
<script src="rangetouch.js"></script>
|
|
|
|
|
<script src="index.js"></script>
|
2017-05-07 17:09:18 +02:00
|
|
|
</body>
|
2021-02-24 20:23:32 +01:00
|
|
|
</html>
|
