WLED/wled00/data/index.htm

386 lines
18 KiB
HTML
Raw Normal View History

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>
<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(){}
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()"]).
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
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
ranges = RangeTouch.setup('input[type="range"]', {});
let stateCheck = setInterval(() => {
if (document.readyState === 'complete') {
clearInterval(stateCheck);
// document ready, start processing UI
onLoad();
}
}, 100);
});
2022-08-01 17:32:40 +02:00
setTimeout(()=>{h.appendChild(l)},100);
});
2022-08-01 17:32:40 +02:00
setTimeout(()=>{h.appendChild(l)},100);
</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>
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>
<div id="bg"></div>
2019-12-05 01:58:03 +01:00
<div class="wrapper" id="top">
<div class="tab top">
<div class="btnwrap">
<button id="buttonPower" onclick="togglePower()" class="tgl"><i class="icons">&#xe08f;</i><p class="tab-label">Power</p></button>
<button id="buttonNl" onclick="toggleNl()"><i class="icons">&#xe2a2;</i><p class="tab-label">Timer</p></button>
<button id="buttonSync" onclick="toggleSync()"><i class="icons">&#xe116;</i><p class="tab-label">Sync</p></button>
<button id="buttonSr" onclick="toggleLiveview()"><i class="icons">&#xe410;</i><p class="tab-label">Peek</p></button>
2021-03-28 17:15:26 +02:00
<button id="buttonI" onclick="toggleInfo()"><i class="icons">&#xe066;</i><p class="tab-label">Info</p></button>
<button id="buttonNodes" onclick="toggleNodes()"><i class="icons">&#xe22d;</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">&#xe0a2;</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">&#xe23d;</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()">&#xe2a6;</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>
</div>
</div>
<iframe id="liveview" src="about:blank"></iframe>
</div>
2019-12-05 01:58:03 +01:00
</div>
<div class ="container">
<div id="Colors" class="tabcontent">
<div id="picker" class="noslide"></div>
<div id="hwrap">
<!--p class="labels hd">Hue</p-->
<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>
</div><br>
</div>
<div id="swrap">
<!--p class="labels hd">Saturation</p-->
<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>
</div><br>
</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-->
<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">
2021-12-03 21:09:53 +01:00
<!--p class="labels hd">Temperature</p-->
<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>
<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">
<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>
</div>
2021-02-24 20:23:32 +01:00
<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" />
2021-02-24 20:23:32 +01:00
<div class="sliderdisplay"></div>
</div>
</div>
2021-02-24 20:23:32 +01:00
<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" />
2021-02-24 20:23:32 +01:00
<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>
2021-12-03 14:26:26 +01:00
<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>
2021-12-03 14:26:26 +01:00
</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>
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>
</div>
<div id="csl">
2022-03-12 21:25:39 +01:00
<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">
2022-04-12 16:08:17 +02:00
<i class="icons sel-icon" onclick="tglRgb()">&#xe22d;</i>
<input id="hexc" 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">&#xe390;</i></button>
</div>
<p class="labels" id="pall"><i class="icons sel-icon" onclick="tglHex()">&#xe2b3;</i> Color palette</p>
<div id="palw" class="il">
2021-02-24 20:23:32 +01:00
<div class="staytop fnd">
<input type="text" placeholder="Search" oninput="search(this,'pallist')" onfocus="search(this,'pallist')" />
<i class="icons clear-icon" onclick="clean(this)">&#xe38f;</i>
<i class="icons search-icon">&#xe0a1;</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>
</div>
</div>
<div id="Effects" class="tabcontent">
<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')"/>
<i class="icons clear-icon" onclick="clean(this);">&#xe38f;</i>
2022-07-27 00:11:24 +02:00
<i class="icons search-icon" onclick="gId('filters').classList.toggle('hide');" style="cursor:pointer;">&#xe0a1;</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 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">&#x1F3A8;
<input type="checkbox" data-flt="&#x1F3A8;" onchange="filterFx(this)">
2022-07-27 00:11:24 +02:00
<span class="checkmark"></span>
</label>
2022-08-01 17:32:40 +02:00
<label id="filter1D" class="check fchkl">&#8942;
<input type="checkbox" data-flt="&#8942;" onchange="filterFx(this)">
<span class="checkmark"></span>
</label>
2022-08-01 17:32:40 +02:00
<label id="filter2D" class="check fchkl">&#9638;
<input type="checkbox" data-flt="&#9638;" onchange="filterFx(this)">
2022-07-27 00:11:24 +02:00
<span class="checkmark"></span>
</label>
2022-07-27 21:12:27 +02:00
<label id="filterVol" class="check fchkl">&#9834;
<input type="checkbox" data-flt="&#9834;" onchange="filterFx(this)">
2022-07-27 00:11:24 +02:00
<span class="checkmark"></span>
</label>
2022-07-27 21:12:27 +02:00
<label id="filterFreq" class="check fchkl">&#9835;
<input type="checkbox" data-flt="&#9835;" onchange="filterFx(this)">
2022-07-27 00:11:24 +02:00
<span class="checkmark"></span>
</label>
</div>
2022-06-26 22:47:16 +02:00
<div id="slider0" class="slider">
<i class="icons slider-icon" style="cursor: pointer;" onclick="tglFreeze()">&#xe325;</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>
2022-06-26 22:47:16 +02:00
<span id="sliderLabel0" class="tooltiptext">Effect speed</span>
</div>
2022-06-26 22:47:16 +02:00
<div id="slider1" class="slider">
<i class="icons slider-icon" style="cursor: pointer;" onclick="tglLabels()">&#xe409;</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>
2022-06-26 22:47:16 +02:00
<span class="tooltiptext" id="sliderLabel1">Effect intensity</span>
</div>
2022-06-26 22:47:16 +02:00
<div id="slider2" class="slider hide">
<i class="icons slider-icon">&#xe410;</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" />
<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>
</div>
2022-06-26 22:47:16 +02:00
<div id="slider3" class="slider hide">
<i class="icons slider-icon">&#xe0a2;</i>
<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" />
<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>
</div>
2022-06-26 22:47:16 +02:00
<div id="slider4" class="slider hide">
<i class="icons slider-icon">&#xe0e8;</i>
<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" />
<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>
</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">&#xe2b3;</i><span class="tooltiptext" id="optLabel0">Check 1</span>
<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">&#xe34b;</i><span class="tooltiptext" id="optLabel1">Check 2</span>
<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">&#xe04c;</i><span class="tooltiptext" id="optLabel2">Check 3</span>
<input id="checkO3" type="checkbox" onchange="setOption(3, this.checked)">
2022-08-12 17:58:20 +02:00
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
2021-02-24 20:23:32 +01:00
<div id="Segments" class="tabcontent">
<div id="segcont">
Loading...
</div>
<div id="segutil" class="staybot">
</div>
<div id="segutil2">
2020-11-08 23:44:10 +01:00
<button class="btn btn-s" id="rsbtn" onclick="rSegs()">Reset segments</button>
</div>
2022-03-26 23:22:18 +01:00
<p>Transition: <input id="tt" class="noslide" type="number" min="0" max="65.5" step="0.1" value="0.7">&nbsp;s</p>
<p id="ledmap" class="hide"></p>
</div>
<div id="Presets" class="tabcontent">
2020-11-08 23:44:10 +01:00
<div id="pql">
</div>
<p class="labels hd">Presets</p>
<div class="staytop fnd" id="psFind">
<input type="text" placeholder="Search" oninput="search(this,'pcont')" onfocus="search(this,'pcont')" />
<i class="icons clear-icon" onclick="clean(this);">&#xe38f;</i>
<i class="icons search-icon">&#xe0a1;</i>
</div>
<div id="pcont" class="list">
2022-03-03 01:02:23 +01:00
<span onclick="loadPresets()">Loading...</span>
</div>
<div id="putil" class="staybot">
</div>
</div>
2019-12-05 01:58:03 +01:00
</div>
<div class="tab bot" id="bot">
<button class="tablinks" onclick="openTab(0)"><i class="icons">&#xe2b3;</i><p class="tab-label">Colors</p></button>
<button class="tablinks" onclick="openTab(1)"><i class="icons">&#xe23d;</i><p class="tab-label">Effects</p></button>
<button class="tablinks" onclick="openTab(2)"><i class="icons">&#xe34b;</i><p class="tab-label">Segments</p></button>
<button class="tablinks" onclick="openTab(3)"><i class="icons">&#xe04c;</i><p class="tab-label">Presets</p></button>
2019-12-05 01:58:03 +01:00
</div>
<div id="connind"></div>
<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">
<button class="btn btn-xs close" onclick="toggleInfo()"><i class="icons rot45">&#xe18a;</i></button>
<div id="imgw">
<img class="wi" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAFCAYAAAC5Fuf5AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABbSURBVChTlY9bDoAwDMNW7n9nwCipytQN4Z8tbrTHmDmF4oPzyldwRqp1SSdnV/NuZuzqerAByxXznBw3igkeFEfXyUuhK/yFM0CxJfyqXZEOc6/Sr9/bf7uIC5Nwd7orMvAPAAAAAElFTkSuQmCC" />
</div>
2021-02-28 18:16:24 +01:00
<div id="kv">Loading...</div><br>
<div>
<button class="btn infobtn" onclick="requestJson()">Refresh</button>
<button class="btn infobtn" onclick="toggleNodes()">Instance List</button>
<button class="btn infobtn" onclick="window.open('/update','_self');">Update WLED</button>
<button class="btn infobtn" id="resetbtn" onclick="cnfReset()">Reboot WLED</button>
</div>
<br>
<span class="h">Made with <span id="heart">&#10084;&#xFE0E;</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">
<button class="btn btn-xs close" onclick="toggleNodes()"><i class="icons rot45">&#xe18a;</i></button>
<div id="ndlt">WLED instances</div>
<div id="kn">Loading...</div>
<div style="position:sticky;bottom:0;">
<button class="btn infobtn" onclick="loadNodes()">Refresh</button>
</div>
2020-05-02 01:59:41 +02:00
</div>
2021-03-09 16:23:19 +01:00
<div id="mliveview2D" class="modal">
<div id="kliveview2D" style="width:100%; height:100%">Loading...</div><br>
</div>
2020-05-02 01:59:41 +02:00
<div id="rover" class="modal">
<i class="icons huge">&#xe410;</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)">&#xe410;</i><br>
2021-12-07 16:31:45 +01:00
<script src="index.js"></script>
</body>
2021-02-24 20:23:32 +01:00
</html>