1821 lines
124 KiB
C++
1821 lines
124 KiB
C++
/*
|
|
* More web UI HTML source arrays.
|
|
* This file is auto generated, please don't make any changes manually.
|
|
* Instead, see https://github.com/Aircoookie/WLED/wiki/Add-own-functionality#web-ui
|
|
* to find out how to easily modify the web UI source!
|
|
*/
|
|
|
|
// Autogenerated from wled00/data/index.css, do not edit!!
|
|
const char PAGE_indexCss[] PROGMEM = R"=====(<style>@font-face{font-family:WIcons;src:url(data:application/x-font-woff;charset=utf-8;base64,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) format('woff')}:root{--c-1:#111;--c-f:#fff;--c-2:#222;--c-3:#333;--c-4:#444;--c-5:#555;--c-6:#666;--c-8:#888;--c-b:#bbb;--c-c:#ccc;--c-e:#eee;--c-d:#ddd;--c-r:#831;--t-b:0.5;--c-o:rgba(34, 34, 34, 0.9);--c-tb:rgba(34, 34, 34, var(--t-b));--c-tba:rgba(102, 102, 102, var(--t-b));--c-tbh:rgba(51, 51, 51, var(--t-b));--th:70px;--tp:70px;--bh:63px;--tbp:14px 14px 10px 14px;--bbp:9px 0 7px 0;--bhd:none;--bmt:0px}html{touch-action:manipulation}body{margin:0;background-color:var(--c-1);font-family:Helvetica,Verdana,sans-serif;font-size:17px;color:var(--c-f);text-align:center;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;scrollbar-width:6px;scrollbar-color:var(--c-sb) transparent}body,html{height:100%;width:100%;position:fixed;overscroll-behavior:none}#bg{height:100vh;width:100vw;position:fixed;z-index:-10;background-position:center;background-repeat:no-repeat;background-size:cover;opacity:0;transition:opacity 2s}p{margin:10px 0 2px 0;color:var(--c-d)}button{outline:0;cursor:pointer}.labels{margin:0;padding:8px 0 2px 0}#namelabel{position:fixed;bottom:calc(var(--bh) + 5px);right:4px;color:var(--c-6);writing-mode:vertical-rl}.bri{padding:4px}.wrapper{position:fixed;top:0;left:0;right:0;background:var(--c-tb);z-index:1}.icons{font-family:WIcons;font-style:normal;font-size:24px;line-height:1;display:inline-block;margin:-2px 0 4px 0}.huge{font-size:42px}.infot{table-layout:fixed;width:100%}.segt{table-layout:fixed;width:76%}.segtd{text-align:center;text-transform:uppercase;font-size:14px}.keytd{text-align:left;padding-bottom:8px}.valtd{text-align:right;padding-bottom:8px}.slider-icon{transform:translate(6px,3px);color:var(--c-d)}.e-icon{transform:translateY(3px);color:var(--c-d)}.sel-icon{transform:translateX(3px);color:var(--c-d)}.flr{float:right;cursor:pointer;margin:0;color:var(--c-f);transform:rotate(0);transition:transform .3s}.exp{transform:rotate(180deg)}.il{display:inline-block;vertical-align:middle}#liveview{height:4px;display:none;width:100%;border:0}.tab{background-color:transparent;color:var(--c-d)}.bot{position:fixed;bottom:0;left:0;width:100%;background-color:var(--c-tb)}.tab button{background-color:transparent;float:left;border:none;transition:color .3s,background-color .3s;font-size:17px;color:var(--c-c)}.top button{padding:var(--tbp)}.bot button{padding:var(--bbp);width:25%}.tab button:hover{background-color:var(--c-tbh);color:var(--c-e)}.tab button.active{background-color:var(--c-tba)!important;color:var(--c-f)}.active{background-color:var(--c-6)!important;color:var(--c-f)}.container{--n:1;width:100%;width:calc(var(--n)*100%);height:calc(100% - var(--tp) - var(--bh));margin-top:var(--tp);transform:translate(calc(var(--i,0)/ var(--n)*-100%));overscroll-behavior:none}.tabcontent{float:left;position:relative;width:100%;width:calc(100%/var(--n));padding:11px 0;box-sizing:border-box;border:0;overflow:auto;height:100%;overscroll-behavior:none}#Effects{padding-top:0;margin-top:11px;height:calc(100% - 11px);-webkit-overflow-scrolling:touch}.smooth{transition:transform calc(var(--f,1)*.5s) ease-out}.tab-label{margin:0 0 -5px 0;padding-bottom:4px}.overlay{position:fixed;height:100%;width:100%;top:0;left:0;background-color:var(--c-3);font-size:24px;display:flex;align-items:center;justify-content:center;z-index:11;opacity:.95;transition:.7s;pointer-events:none}.staytop{display:block;position:-webkit-sticky;position:sticky;background:var(--c-1);top:-1px;z-index:1;margin-top:1px;width:274px;margin:auto;border-radius:25px}#staytop1{top:28px}#staytop2{top:56px}#fxb0{margin-bottom:2px;filter:drop-shadow(0 0 1px #000)}.first{margin-top:18px!important}#toast{opacity:0;background-color:var(--c-5);max-width:90%;color:var(--c-f);text-align:center;border-radius:5px;padding:16px;position:fixed;z-index:5;left:50%;transform:translateX(-50%);bottom:calc(var(--bh) + 22px);font-size:17px;pointer-events:none}#toast.show{opacity:1;animation:fadein .5s,fadein .5s 2.5s reverse}#toast.error{opacity:1;background-color:#b21;animation:fadein .5s}.modal{position:fixed;left:0;bottom:0;right:0;top:calc(var(--th) - 1px);background-color:var(--c-o);transform:translateY(100%);transition:transform .4s;padding:8px;font-size:20px;overflow:auto}#info{z-index:3}#rover{z-index:2}#roverstar{position:fixed;top:calc(var(--th) + 5px);left:1px;display:none;cursor:pointer}#connind{position:fixed;bottom:calc(var(--bh) + 5px);left:4px;padding:5px;border-radius:5px;background-color:#a90;z-index:-2}#imgw{width:200px;height:55px;display:inline-block}#kv{max-width:490px;display:inline-block}#lv{max-width:600px;display:inline-block}#heart{transition:color .9s;font-size:16px;color:red}img{max-width:100%;max-height:100%}@keyframes fadein{from{bottom:0;opacity:0}to{bottom:calc(var(--bh) + 22px);opacity:1}}.sliderdisplay{content:'';position:absolute;top:13px;bottom:13px;left:10px;right:10px;background:var(--c-4);border-radius:17px;pointer-events:none;z-index:-1}.sliderbubble{width:36px;line-height:24px;background:var(--c-3);position:absolute;transform:translateX(-50%);border-radius:12px;margin-left:12px;margin-top:3px;padding:0;display:inline}.hidden{display:none}input[type=range]{-webkit-appearance:none;width:220px;padding:0;margin:0 10px 0 10px;background-color:transparent;cursor:pointer}input[type=range]:focus{outline:0}input[type=range]::-webkit-slider-runnable-track{width:100%;height:30px;cursor:pointer;background:0 0}input[type=range]::-webkit-slider-thumb{height:16px;width:16px;border-radius:17px;background:var(--c-f);cursor:pointer;-webkit-appearance:none;margin-top:7px}input[type=range]::-moz-range-track{width:100%;height:30px;background-color:rgba(0,0,0,0)}input[type=range]::-moz-range-thumb{border:0 solid transparent;height:16px;width:16px;border-radius:17px;background:var(--c-f);transform:translateY(7px)}input[type=range]:active+.sliderbubble{display:inline;transform:translateX(-50%)}#wwrap{display:none}.sliderwrap{height:30px;width:240px;position:relative}.sws{width:212px}.sis{width:192px!important}.hd{display:var(--bhd)}#briwrap{float:right;margin-top:var(--bmt)}#picker{margin:10px auto;width:260px}#rgbwrap{display:none}.btn{padding:8px;margin:10px;width:230px;font-size:19px;background-color:var(--c-3);color:var(--c-f);border:0 solid #fff;border-radius:25px;transition-duration:.5s;-webkit-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0)}.btn-s{padding:9px;width:276px;background-color:var(--c-2)}.btn-i{padding-bottom:3px}.btn-icon{margin:0 8px 4px 0;vertical-align:middle}.btna-icon{margin:0}.btn-p{width:216px}#qcs-w{margin-top:10px}.qcs{padding:14px;margin:2px;border-radius:14px;display:inline-block}.qcsb{padding:13px;border:1px solid var(--c-f)}#hexw{margin-top:5px;display:none}.cl{width:42px}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='white'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;background-size:12px;background-position:206px 16px;padding-left:12px!important;background-repeat:no-repeat;outline:0}select:-moz-focusring{transition-duration:0s;color:transparent;text-shadow:0 0 0 #fff}option{background-color:var(--c-3);color:var(--c-f)}input[type=number],input[type=text]{background:var(--c-3);color:var(--c-f);border:0 solid #fff;border-radius:5px;padding:8px;margin:6px 6px 6px 0;font-size:19px;transition:background-color .2s;outline:0;width:50px;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}textarea{background:var(--c-2);color:var(--c-f);width:236px;height:90px;border-radius:5px;border:2px solid #555;outline:0;resize:none;font-size:19px}::selection{background:var(--c-b)}input[type=text]{width:100px;border-radius:25px;text-align:center}.ptxt{width:200px!important;margin:26px 0 6px 12px!important}.stxt{width:50px!important}input[type=number]:focus,input[type=text]:focus{background:var(--c-6)}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.segn{margin:3px 0 6px 0!important}.segname{position:absolute;top:0;left:50%;padding:9px 0;transform:translateX(-50%);white-space:nowrap;cursor:pointer}.pname{width:208px;padding:8px 0;text-align:center;overflow:hidden;text-overflow:clip}.pid{position:absolute;top:0;left:0;padding:11px 0 0 11px;font-size:16px;width:20px;text-align:center;color:var(--c-b)}.newseg{cursor:default}.ic{padding:6px 0 0 0}.xxs{width:40px;margin:6px}.psts{background-color:var(--c-3);color:var(--c-f);cursor:pointer;padding:2px 0 0 0;height:40px}.cnf{color:var(--c-f);cursor:pointer;background:var(--c-3);border-radius:5px}.cnf-s{position:absolute;top:66px;right:28px;padding:43px 6px}.pwr{color:var(--c-6);transform:translate(2px,3px);cursor:pointer}.act{color:var(--c-f)}.half{padding:7.5px;top:64px}.del{position:absolute;bottom:8px;right:8px;color:var(--c-f);cursor:pointer}.check{display:inline-block;position:relative;padding-bottom:32px;margin-bottom:14px;cursor:pointer;text-align:center}.schkl{padding:2px 22px 0 35px;margin:0 0 0 2px}.revchkl{padding:2px 0 0 35px;margin-bottom:0;margin-top:8px}.check input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.checkmark{position:absolute;bottom:0;left:0;height:25px;width:25px;background-color:var(--c-3);border-radius:10px}.schk{top:0}.psv{left:initial;bottom:initial;top:0;right:0}.psvl{padding:2px 35px 10px 0;margin-top:10px;margin-bottom:0}.check:hover input~.checkmark{background-color:var(--c-4)}.check input:checked~.checkmark{background-color:var(--c-6)}.checkmark:after{content:"";position:absolute;display:none}.check input:checked~.checkmark:after{display:block}.check .checkmark:after{left:9px;top:5px;width:5px;height:10px;border:solid var(--c-f);border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.h{font-size:13px;text-align:center;color:var(--c-b)}.bp{margin-bottom:5px}.seg{position:relative;display:inline-block;padding:8px;margin:10px;width:260px;font-size:19px;background-color:var(--c-2);color:var(--c-f);border:0 solid #fff;border-radius:20px;text-align:left;transition:background-color .5s;filter:brightness(1)}.pres{margin-bottom:6px}.segin{padding:8px 8px 4px 8px;display:none}.expanded{display:block}.c{text-align:center}.po2{display:none;margin-top:8px}.pwarn{color:red}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--c-sb);opacity:.2;border-radius:5px}::-webkit-scrollbar-thumb:hover{background:var(--c-sbh)}@media all and (max-width:335px){.sliderbubble{display:none}}@media all and (max-width:550px) and (min-width:374px){.infobtn{width:155px}}@media all and (max-width:685px){.top button{width:16.6%;padding:8px 0 4px 0}.hd{display:none!important}#briwrap{margin-top:0!important;float:none}}@media all and (max-width:1249px){#buttonPcm{display:none}}</style>)=====";
|
|
|
|
|
|
// Autogenerated from wled00/data/index.js, do not edit!!
|
|
const char PAGE_indexJs[] PROGMEM = R"=====(<script>//page js
|
|
var loc = false, locip;
|
|
var ps = false, noNewSegs = false;
|
|
var isOn = false, nlA = false, isLv = false, isInfo = false, syncSend = false, syncTglRecv = true, isRgbw = false;
|
|
var whites = [0,0,0];
|
|
var expanded = [false];
|
|
var powered = [true];
|
|
var nlDur = 60, nlTar = 0;
|
|
var nlFade = false;
|
|
var selectedFx = 0;
|
|
var csel = 0;
|
|
var currentPreset = -1;
|
|
var lastUpdate = 0;
|
|
var segCount = 0, ledCount = 0, lowestUnused = 0, maxSeg = 0, lSeg = 0;
|
|
var pcMode = false, pcModeA = false, lastw = 0;
|
|
var d = document;
|
|
const ranges = RangeTouch.setup('input[type="range"]', {});
|
|
var pJson = {};
|
|
var pO = null, pN = "", pI = 0;
|
|
var pmt = 1, pmtLS = 0, pmtLast = 0;
|
|
var lastinfo = {};
|
|
var cfg = {
|
|
theme:{base:"dark", bg:{url:""}, alpha:{bg:0.6,tab:0.8}, color:{bg:""}},
|
|
comp :{colors:{picker: true, rgb: false, quick: true, hex: false}, labels:true, pcmbot:false, pid:true}
|
|
};
|
|
|
|
var cpick = new iro.ColorPicker("#picker", {
|
|
width: 260,
|
|
wheelLightness: false,
|
|
wheelAngle: 90,
|
|
layout: [
|
|
{
|
|
component: iro.ui.Wheel,
|
|
options: {}
|
|
},
|
|
{
|
|
component: iro.ui.Slider,
|
|
options: {
|
|
sliderType: 'value'
|
|
}
|
|
},
|
|
{
|
|
component: iro.ui.Slider,
|
|
options: {
|
|
sliderType: 'kelvin',
|
|
minTemperature: 2100,
|
|
maxTemperature: 10000
|
|
}
|
|
}
|
|
]
|
|
});
|
|
|
|
function handleVisibilityChange() {
|
|
if (!document.hidden && new Date () - lastUpdate > 3000) {
|
|
requestJson(null);
|
|
}
|
|
}
|
|
|
|
function sCol(na, col) {
|
|
d.documentElement.style.setProperty(na, col);
|
|
}
|
|
|
|
function applyCfg()
|
|
{
|
|
cTheme(cfg.theme.base === "light");
|
|
var bg = cfg.theme.color.bg;
|
|
if (bg) sCol('--c-1', bg);
|
|
var ccfg = cfg.comp.colors;
|
|
d.getElementById('hexw').style.display = ccfg.hex ? "block":"none";
|
|
d.getElementById('picker').style.display = ccfg.picker ? "block":"none";
|
|
d.getElementById('rgbwrap').style.display = ccfg.rgb ? "block":"none";
|
|
d.getElementById('qcs-w').style.display = ccfg.quick ? "block":"none";
|
|
var l = cfg.comp.labels;
|
|
var e = d.querySelectorAll('.tab-label');
|
|
for(var i=0; i<e.length; i++)
|
|
e[i].style.display = l ? "block":"none";
|
|
e = d.querySelector('.hd');
|
|
e.style.display = l ? "block":"none";
|
|
sCol('--tbp',l ? "14px 14px 10px 14px":"10px 22px 4px 22px");
|
|
sCol('--bbp',l ? "9px 0 7px 0":"10px 0 4px 0");
|
|
sCol('--bhd',l ? "block":"none");
|
|
sCol('--bmt',l ? "0px":"5px");
|
|
sCol('--t-b', cfg.theme.alpha.tab);
|
|
size();
|
|
localStorage.setItem('wledUiCfg', JSON.stringify(cfg));
|
|
}
|
|
|
|
function tglHex()
|
|
{
|
|
cfg.comp.colors.hex = !cfg.comp.colors.hex;
|
|
applyCfg();
|
|
}
|
|
|
|
function tglTheme()
|
|
{
|
|
cfg.theme.base = (cfg.theme.base === "light") ? "dark":"light";
|
|
applyCfg();
|
|
}
|
|
|
|
function tglLabels()
|
|
{
|
|
cfg.comp.labels = !cfg.comp.labels;
|
|
applyCfg();
|
|
}
|
|
|
|
function cTheme(light) {
|
|
if (light) {
|
|
sCol('--c-1','#eee');
|
|
sCol('--c-f','#000');
|
|
sCol('--c-2','#ddd');
|
|
sCol('--c-3','#bbb');
|
|
sCol('--c-4','#aaa');
|
|
sCol('--c-5','#999');
|
|
sCol('--c-6','#999');
|
|
sCol('--c-8','#888');
|
|
sCol('--c-b','#444');
|
|
sCol('--c-c','#333');
|
|
sCol('--c-e','#111');
|
|
sCol('--c-d','#222');
|
|
sCol('--c-r','#c42');
|
|
sCol('--c-o','rgba(204, 204, 204, 0.9)');
|
|
sCol('--c-sb','#0003'); sCol('--c-sbh','#0006');
|
|
sCol('--c-tb','rgba(204, 204, 204, var(--t-b))');
|
|
sCol('--c-tba','rgba(170, 170, 170, var(--t-b))');
|
|
sCol('--c-tbh','rgba(204, 204, 204, var(--t-b))');
|
|
d.getElementById('imgw').style.filter = "invert(0.8)";
|
|
} else {
|
|
sCol('--c-1','#111');
|
|
sCol('--c-f','#fff');
|
|
sCol('--c-2','#222');
|
|
sCol('--c-3','#333');
|
|
sCol('--c-4','#444');
|
|
sCol('--c-5','#555');
|
|
sCol('--c-6','#666');
|
|
sCol('--c-8','#888');
|
|
sCol('--c-b','#bbb');
|
|
sCol('--c-c','#ccc');
|
|
sCol('--c-e','#eee');
|
|
sCol('--c-d','#ddd');
|
|
sCol('--c-r','#831');
|
|
sCol('--c-o','rgba(34, 34, 34, 0.9)');
|
|
sCol('--c-sb','#fff3'); sCol('--c-sbh','#fff5');
|
|
sCol('--c-tb','rgba(34, 34, 34, var(--t-b))');
|
|
sCol('--c-tba','rgba(102, 102, 102, var(--t-b))');
|
|
sCol('--c-tbh','rgba(51, 51, 51, var(--t-b))');
|
|
d.getElementById('imgw').style.filter = "unset";
|
|
}
|
|
}
|
|
|
|
function loadBg(iUrl) {
|
|
let bg = document.getElementById('bg');
|
|
let img = document.createElement("img");
|
|
img.src = iUrl;
|
|
if (iUrl == "") {
|
|
var today = new Date();
|
|
if (today.getMonth() == 11 && (today.getDate() > 23 && today.getDate() < 28)) img.src = "https://aircoookie.github.io/xmas.png";
|
|
}
|
|
img.addEventListener('load', (event) => {
|
|
var a = parseFloat(cfg.theme.alpha.bg);
|
|
d.getElementById('staytop2').style.background = "transparent";
|
|
if (isNaN(a)) a = 0.6;
|
|
bg.style.opacity = a;
|
|
bg.style.backgroundImage = `url(${img.src})`;
|
|
img = null;
|
|
});
|
|
}
|
|
|
|
function onLoad() {
|
|
if (window.location.protocol == "file:") {
|
|
loc = true;
|
|
locip = localStorage.getItem('locIp');
|
|
if (!locip)
|
|
{
|
|
locip = prompt("File Mode. Please enter WLED IP!");
|
|
localStorage.setItem('locIp', locip);
|
|
}
|
|
}
|
|
var sett = localStorage.getItem('wledUiCfg');
|
|
if (sett) cfg = mergeDeep(cfg, JSON.parse(sett));
|
|
|
|
resetPUtil();
|
|
|
|
applyCfg();
|
|
loadBg(cfg.theme.bg.url);
|
|
|
|
var cd = d.getElementById('csl').children;
|
|
for (i = 0; i < cd.length; i++) {
|
|
cd[i].style.backgroundColor = "rgb(0, 0, 0)";
|
|
}
|
|
selectSlot(0);
|
|
updateTablinks(0);
|
|
resetUtil();
|
|
cpick.on("input:end", function() {
|
|
setColor(1);
|
|
});
|
|
pmtLS = localStorage.getItem('wledPmt');
|
|
setTimeout(function(){requestJson(null, false)}, 25);
|
|
d.addEventListener("visibilitychange", handleVisibilityChange, false);
|
|
size();
|
|
d.getElementById("cv").style.opacity=0;
|
|
if (localStorage.getItem('pcm') == "true") togglePcMode(true);
|
|
var sls = d.querySelectorAll('input[type="range"]');
|
|
for (var sl of sls) {
|
|
sl.addEventListener('input', updateBubble, true);
|
|
sl.addEventListener('touchstart', toggleBubble);
|
|
sl.addEventListener('touchend', toggleBubble);
|
|
}
|
|
|
|
}
|
|
|
|
function updateTablinks(tabI)
|
|
{
|
|
tablinks = d.getElementsByClassName("tablinks");
|
|
for (i = 0; i < tablinks.length; i++) {
|
|
tablinks[i].className = tablinks[i].className.replace(" active", "");
|
|
}
|
|
if (pcMode) return;
|
|
tablinks[tabI].className += " active";
|
|
}
|
|
|
|
function openTab(tabI, force = false) {
|
|
if (pcMode && !force) return;
|
|
var i, tabcontent, tablinks;
|
|
iSlide = tabI;
|
|
_C.classList.toggle('smooth', false);
|
|
_C.style.setProperty('--i', iSlide);
|
|
updateTablinks(tabI);
|
|
}
|
|
|
|
var timeout;
|
|
function showToast(text, error = false) {
|
|
if (error) d.getElementById('connind').style.backgroundColor = "#831";
|
|
var x = d.getElementById("toast");
|
|
x.innerHTML = text;
|
|
x.className = error ? "error":"show";
|
|
clearTimeout(timeout);
|
|
x.style.animation = 'none';
|
|
x.offsetHeight;
|
|
x.style.animation = null;
|
|
timeout = setTimeout(function(){ x.className = x.className.replace("show", ""); }, 2900);
|
|
}
|
|
|
|
function showErrorToast() {
|
|
showToast('Connection to light failed!', true);
|
|
}
|
|
function clearErrorToast() {
|
|
d.getElementById("toast").className = d.getElementById("toast").className.replace("error", "");
|
|
}
|
|
|
|
function getRuntimeStr(rt)
|
|
{
|
|
var t = parseInt(rt);
|
|
var days = Math.floor(t/86400);
|
|
var hrs = Math.floor((t - days*86400)/3600);
|
|
var mins = Math.floor((t - days*86400 - hrs*3600)/60);
|
|
var str = days ? (days + " " + (days == 1 ? "day" : "days") + ", ") : "";
|
|
str += (hrs || days) ? (hrs + " " + (hrs == 1 ? "hour" : "hours")) : "";
|
|
if (!days && hrs) str += ", ";
|
|
if (t > 59 && !days) str += mins + " min";
|
|
if (t < 3600 && t > 59) str += ", ";
|
|
if (t < 3600) str += (t - mins*60) + " sec";
|
|
return str;
|
|
}
|
|
|
|
function inforow(key, val, unit = "")
|
|
{
|
|
return `<tr><td class="keytd">${key}</td><td class="valtd">${val}${unit}</td></tr>`;
|
|
}
|
|
|
|
function getLowestUnusedP()
|
|
{
|
|
var l = 1;
|
|
for (var key in pJson)
|
|
{
|
|
if (key == l) l++;
|
|
}
|
|
if (l > 250) l = 250;
|
|
return l;
|
|
}
|
|
|
|
function checkUsed(i) {
|
|
var id = d.getElementById(`p${i}id`).value;
|
|
if (pJson[id] && (i == 0 || id != i)) {
|
|
d.getElementById(`p${i}warn`).innerHTML = `⚠ Overwriting ${pName(id)}!`
|
|
} else {
|
|
d.getElementById(`p${i}warn`).innerHTML = "";
|
|
}
|
|
}
|
|
|
|
function pName(i) {
|
|
var n = "Preset " + i;
|
|
if (pJson[i].n) n = pJson[i].n;
|
|
return n;
|
|
}
|
|
|
|
function papiVal(i) {
|
|
if (!pJson[i]) return "";
|
|
var o = Object.assign({},pJson[i]);
|
|
if (o.win) return o.win;
|
|
delete o.n; delete o.p; delete o.ql;
|
|
return JSON.stringify(o);
|
|
}
|
|
|
|
function qlName(i) {
|
|
if (!pJson[i]) return "";
|
|
if (!pJson[i].ql) return "";
|
|
return pJson[i].ql;
|
|
}
|
|
|
|
function cpBck() {
|
|
var copyText = document.getElementById("bck");
|
|
|
|
copyText.select();
|
|
copyText.setSelectionRange(0, 999999);
|
|
|
|
document.execCommand("copy");
|
|
|
|
showToast("Copied to clipboard!")
|
|
}
|
|
|
|
function presetError(empty)
|
|
{
|
|
var hasBackup = false; var bckstr = "";
|
|
try {
|
|
bckstr = localStorage.getItem("wledP");
|
|
if (bckstr.length > 10) hasBackup = true;
|
|
} catch (e) {
|
|
|
|
}
|
|
var cn = `<div class="seg c">`;
|
|
if (empty)
|
|
cn += `You have no presets yet!`;
|
|
else
|
|
cn += `Sorry, there was an issue loading your presets!`;
|
|
|
|
if (hasBackup) {
|
|
cn += `<br><br>`;
|
|
if (empty)
|
|
cn += `However, there is backup preset data of a previous installation available.<br>
|
|
(Saving a preset will hide this and overwrite the backup)`;
|
|
else
|
|
cn += `Here is a backup of the last known good state:`;
|
|
cn += `<textarea id="bck"></textarea><br>
|
|
<button class="btn btn-p" onclick="cpBck()">Copy to clipboard</button>`
|
|
}
|
|
cn += `</div>`;
|
|
d.getElementById('pcont').innerHTML = cn;
|
|
if (hasBackup) d.getElementById('bck').value = bckstr;
|
|
}
|
|
|
|
function loadPresets()
|
|
{
|
|
var url = '/presets.json';
|
|
if (loc) {
|
|
url = `http://${locip}/presets.json`;
|
|
}
|
|
|
|
fetch
|
|
(url, {
|
|
method: 'get'
|
|
})
|
|
.then(res => {
|
|
if (!res.ok) {
|
|
showErrorToast();
|
|
}
|
|
return res.json();
|
|
})
|
|
.then(json => {
|
|
pJson = json;
|
|
populatePresets();
|
|
})
|
|
.catch(function (error) {
|
|
showToast(error, true);
|
|
console.log(error);
|
|
presetError(false);
|
|
})
|
|
}
|
|
|
|
var pQL = [];
|
|
|
|
function populateQL()
|
|
{
|
|
var cn = "";
|
|
if (pQL.length > 0) {
|
|
cn += `<p class="labels">Quick load</p>`;
|
|
|
|
var it = 0;
|
|
for (var key in pQL)
|
|
{
|
|
cn += `<button class="xxs btn psts" id="p${pQL[key][0]}qlb" onclick="setPreset(${pQL[key][0]});">${pQL[key][1]}</button>`;
|
|
it++;
|
|
if (it > 4) {
|
|
it = 0;
|
|
cn += '<br>';
|
|
}
|
|
}
|
|
if (it != 0) cn+= '<br>';
|
|
|
|
cn += `<p class="labels">All presets</p>`;
|
|
}
|
|
d.getElementById('pql').innerHTML = cn;
|
|
}
|
|
|
|
function populatePresets(fromls)
|
|
{
|
|
if (fromls) pJson = JSON.parse(localStorage.getItem("wledP"));
|
|
delete pJson["0"];
|
|
var cn = "";
|
|
var arr = Object.entries(pJson);
|
|
arr.sort(cmpP);
|
|
var added = false;
|
|
pQL = [];
|
|
var is = [];
|
|
|
|
for (var key in arr)
|
|
{
|
|
if (!isObject(arr[key][1])) continue;
|
|
var i = parseInt(arr[key][0]);
|
|
var qll = arr[key][1]["ql"];
|
|
if (qll) pQL.push([i, qll]);
|
|
is.push(i);
|
|
|
|
cn += `<div class="seg pres" id="p${i}o">`;
|
|
if (cfg.comp.pid) cn += `<div class="pid">${i}</div>`;
|
|
cn += `<div class="segname pname" onclick="setPreset(${i})">${pName(i)}</div>
|
|
<i class="icons e-icon flr ${expanded[i+100] ? "exp":""}" id="sege${i+100}" onclick="expand(${i+100})"></i>
|
|
<div class="segin" id="seg${i+100}"></div>
|
|
</div><br>`;
|
|
added = true;
|
|
}
|
|
|
|
d.getElementById('pcont').innerHTML = cn;
|
|
if (added) {
|
|
if (pmtLS != pmt && pmt != 0) {
|
|
localStorage.setItem("wledPmt", pmt);
|
|
pJson["0"] = {};
|
|
localStorage.setItem("wledP", JSON.stringify(pJson));
|
|
}
|
|
pmtLS = pmt;
|
|
for (var a in is) {
|
|
var i = is[a];
|
|
if (expanded[i+100]) expand(i+100, true);
|
|
}
|
|
} else { presetError(true); }
|
|
updatePA();
|
|
populateQL();
|
|
}
|
|
|
|
function populateInfo(i)
|
|
{
|
|
var cn="";
|
|
var heap = i.freeheap/1000;
|
|
heap = heap.toFixed(1);
|
|
var pwr = i.leds.pwr;
|
|
var pwru = "Not calculated";
|
|
if (pwr > 1000) {pwr /= 1000; pwr = pwr.toFixed((pwr > 10) ? 0 : 1); pwru = pwr + " A";}
|
|
else if (pwr > 0) {pwr = 50 * Math.round(pwr/50); pwru = pwr + " mA";}
|
|
var urows="";
|
|
for (var k in i.u)
|
|
{
|
|
var val = i.u[k];
|
|
if (val[1]) {
|
|
urows += inforow(k,val[0],val[1]);
|
|
} else {
|
|
urows += inforow(k,val);
|
|
}
|
|
}
|
|
var vcn = "Kuuhaku";
|
|
if (i.ver.startsWith("0.11.")) vcn = "Mirai";
|
|
if (i.cn) vcn = i.cn;
|
|
|
|
cn += `v${i.ver} "${vcn}"<br><br><table class="infot">
|
|
${urows}
|
|
${inforow("Build",i.vid)}
|
|
${inforow("Signal strength",i.wifi.signal +"% ("+ i.wifi.rssi, " dBm)")}
|
|
${inforow("Uptime",getRuntimeStr(i.uptime))}
|
|
${inforow("Free heap",heap," kB")}
|
|
${inforow("Estimated current",pwru)}
|
|
${inforow("MAC address",i.mac)}
|
|
${inforow("Filesystem",i.fs.u + "/" + i.fs.t + " kB (" +Math.round(i.fs.u*100/i.fs.t) + "%)")}
|
|
${inforow("Environment",i.arch + " " + i.core + " (" + i.lwip + ")")}
|
|
</table>`;
|
|
d.getElementById('kv').innerHTML = cn;
|
|
}
|
|
|
|
function populateSegments(s)
|
|
{
|
|
var cn = "";
|
|
segCount = 0, lowestUnused = 0; lSeg = 0;
|
|
|
|
for (y in s.seg)
|
|
{
|
|
segCount++;
|
|
|
|
var inst=s.seg[y];
|
|
var i = parseInt(inst.id);
|
|
powered[i] = inst.on;
|
|
if (i == lowestUnused) lowestUnused = i+1;
|
|
if (i > lSeg) lSeg = i;
|
|
|
|
cn += `<div class="seg">
|
|
<label class="check schkl">
|
|
|
|
<input type="checkbox" id="seg${i}sel" onchange="selSeg(${i})" ${inst.sel ? "checked":""}>
|
|
<span class="checkmark schk"></span>
|
|
</label>
|
|
<div class="segname" onclick="selSegEx(${i})">
|
|
Segment ${i}
|
|
</div>
|
|
<i class="icons e-icon flr ${expanded[i] ? "exp":""}" id="sege${i}" onclick="expand(${i})"></i>
|
|
<div class="segin ${expanded[i] ? "expanded":""}" id="seg${i}">
|
|
<table class="segt">
|
|
<tr>
|
|
<td class="segtd">Start LED</td>
|
|
<td class="segtd">Stop LED</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="segtd"><input class="noslide segn" id="seg${i}s" type="number" min="0" max="${ledCount-1}" value="${inst.start}" oninput="updateLen(${i})"></td>
|
|
<td class="segtd"><input class="noslide segn" id="seg${i}e" type="number" min="0" max="${ledCount}" value="${inst.stop}" oninput="updateLen(${i})"></td>
|
|
</tr>
|
|
</table>
|
|
<table class="segt">
|
|
<tr>
|
|
<td class="segtd">Grouping</td>
|
|
<td class="segtd">Spacing</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="segtd"><input class="noslide segn" id="seg${i}grp" type="number" min="1" max="255" value="${inst.grp}" oninput="updateLen(${i})"></td>
|
|
<td class="segtd"><input class="noslide segn" id="seg${i}spc" type="number" min="0" max="255" value="${inst.spc}" oninput="updateLen(${i})"></td>
|
|
</tr>
|
|
</table>
|
|
<div class="h bp" id="seg${i}len"></div>
|
|
<i class="icons e-icon pwr ${powered[i] ? "act":""}" id="seg${i}pwr" onclick="setSegPwr(${i})"></i>
|
|
<div class="sliderwrap il sws">
|
|
<input id="seg${i}bri" class="noslide sis" onchange="setSegBri(${i})" oninput="updateTrail(this)" max="255" min="1" type="range" value="${inst.bri}" />
|
|
<div class="sliderdisplay"></div>
|
|
</div>
|
|
<i class="icons e-icon cnf cnf-s" id="segc${i}" onclick="setSeg(${i})"></i>
|
|
<i class="icons e-icon del" id="segd${i}" onclick="delSeg(${i})"></i>
|
|
<label class="check revchkl">
|
|
Reverse direction
|
|
<input type="checkbox" id="seg${i}rev" onchange="setRev(${i})" ${inst.rev ? "checked":""}>
|
|
<span class="checkmark schk"></span>
|
|
</label>
|
|
<label class="check revchkl">
|
|
Mirror effect
|
|
<input type="checkbox" id="seg${i}mi" onchange="setMi(${i})" ${inst.mi ? "checked":""}>
|
|
<span class="checkmark schk"></span>
|
|
</label>
|
|
</div>
|
|
</div><br>`;
|
|
}
|
|
|
|
d.getElementById('segcont').innerHTML = cn;
|
|
if (lowestUnused >= maxSeg) {
|
|
d.getElementById('segutil').innerHTML = '<span class="h">Maximum number of segments reached.</span>';
|
|
noNewSegs = true;
|
|
} else if (noNewSegs) {
|
|
resetUtil();
|
|
noNewSegs = false;
|
|
}
|
|
for (i = 0; i <= lSeg; i++) {
|
|
updateLen(i);
|
|
updateTrail(d.getElementById(`seg${i}bri`));
|
|
if (segCount < 2) d.getElementById(`segd${lSeg}`).style.display = "none";
|
|
}
|
|
d.getElementById('rsbtn').style.display = (segCount > 1) ? "inline":"none";
|
|
}
|
|
|
|
function updateTrail(e, slidercol)
|
|
{
|
|
if (e==null) return;
|
|
var max = e.hasAttribute('max') ? e.attributes['max'].value : 255;
|
|
var progress = e.value * 100 / max;
|
|
progress = parseInt(progress);
|
|
var scol;
|
|
switch (slidercol) {
|
|
case 1: scol = "#f00"; break;
|
|
case 2: scol = "#0f0"; break;
|
|
case 3: scol = "#00f"; break;
|
|
default: scol = "var(--c-f)";
|
|
}
|
|
var val = `linear-gradient(90deg, ${scol} ${progress}%, var(--c-4) ${progress}%)`;
|
|
e.parentNode.getElementsByClassName('sliderdisplay')[0].style.background = val;
|
|
}
|
|
|
|
function updateBubble(e)
|
|
{
|
|
var bubble = e.target.parentNode.getElementsByTagName('output')[0]
|
|
var max = e.target.hasAttribute('max') ? e.target.attributes.max.value : 255;
|
|
|
|
if (bubble) {
|
|
bubble.innerHTML = e.target.value
|
|
}
|
|
}
|
|
|
|
function toggleBubble(e)
|
|
{
|
|
e.target.parentNode.querySelector('output').classList.toggle('hidden');
|
|
}
|
|
|
|
function updateLen(s)
|
|
{
|
|
if (!d.getElementById(`seg${s}s`)) return;
|
|
var start = parseInt(d.getElementById(`seg${s}s`).value);
|
|
var stop = parseInt(d.getElementById(`seg${s}e`).value);
|
|
var len = stop - start;
|
|
var out = "(delete)"
|
|
if (len > 1) {
|
|
out = `${len} LEDs`;
|
|
} else if (len == 1) {
|
|
out = "1 LED"
|
|
}
|
|
|
|
if (d.getElementById(`seg${s}grp`) != null)
|
|
{
|
|
var grp = parseInt(d.getElementById(`seg${s}grp`).value);
|
|
var spc = parseInt(d.getElementById(`seg${s}spc`).value);
|
|
if (grp == 0) grp = 1;
|
|
var virt = Math.ceil(len/(grp + spc));
|
|
if (!isNaN(virt) && (grp > 1 || spc > 0)) out += ` (${virt} virtual)`;
|
|
}
|
|
|
|
d.getElementById(`seg${s}len`).innerHTML = out;
|
|
}
|
|
|
|
function updatePA()
|
|
{
|
|
var ps = d.getElementsByClassName("seg");
|
|
for (i = 0; i < ps.length; i++) {
|
|
ps[i].style.backgroundColor = "var(--c-2)";
|
|
}
|
|
ps = d.getElementsByClassName("psts");
|
|
for (i = 0; i < ps.length; i++) {
|
|
ps[i].style.backgroundColor = "var(--c-2)";
|
|
}
|
|
if (currentPreset > 0) {
|
|
var acv = d.getElementById(`p${currentPreset}o`);
|
|
if (acv && !expanded[currentPreset+100])
|
|
acv.style.background = "var(--c-6)";
|
|
acv = d.getElementById(`p${currentPreset}qlb`);
|
|
if (acv) acv.style.background = "var(--c-6)";
|
|
}
|
|
}
|
|
|
|
function updateUI()
|
|
{
|
|
d.getElementById('buttonPower').className = (isOn) ? "active":"";
|
|
d.getElementById('buttonNl').className = (nlA) ? "active":"";
|
|
d.getElementById('buttonSync').className = (syncSend) ? "active":"";
|
|
|
|
d.getElementById('fxb' + selectedFx).style.backgroundColor = "var(--c-6)";
|
|
updateTrail(d.getElementById('sliderBri'));
|
|
updateTrail(d.getElementById('sliderSpeed'));
|
|
updateTrail(d.getElementById('sliderIntensity'));
|
|
updateTrail(d.getElementById('sliderW'));
|
|
if (isRgbw) d.getElementById('wwrap').style.display = "block";
|
|
|
|
spal = d.getElementById("selectPalette");
|
|
spal.style.backgroundColor = (spal.selectedIndex > 0) ? "var(--c-6)":"var(--c-3)";
|
|
updatePA();
|
|
updateHex();
|
|
updateRgb();
|
|
}
|
|
|
|
function displayRover(i,s)
|
|
{
|
|
d.getElementById('rover').style.transform = (i.live && s.lor == 0) ? "translateY(0px)":"translateY(100%)";
|
|
var sour = i.lip ? i.lip:""; if (sour.length > 2) sour = " from " + sour;
|
|
d.getElementById('lv').innerHTML = `WLED is receiving live ${i.lm} data${sour}`;
|
|
d.getElementById('roverstar').style.display = (i.live && s.lor) ? "block":"none";
|
|
}
|
|
|
|
function compare(a, b) {
|
|
if (a.name < b.name) return -1;
|
|
return 1;
|
|
}
|
|
function cmpP(a, b) {
|
|
if (!a[1].n) return (a[0] > b[0]);
|
|
return a[1].n.localeCompare(b[1].n,undefined, {numeric: true});
|
|
}
|
|
|
|
var jsonTimeout;
|
|
var reqC = 0;
|
|
function requestJson(command, rinfo = true, verbose = true) {
|
|
d.getElementById('connind').style.backgroundColor = "#a90";
|
|
lastUpdate = new Date();
|
|
if (!jsonTimeout) jsonTimeout = setTimeout(showErrorToast, 3000);
|
|
var req = null;
|
|
e1 = d.getElementById('fxlist');
|
|
e2 = d.getElementById('selectPalette');
|
|
|
|
url = rinfo ? '/json/si': (command ? '/json/state':'/json');
|
|
if (loc) {
|
|
url = `http://${locip}${url}`;
|
|
}
|
|
|
|
type = command ? 'post':'get';
|
|
if (command)
|
|
{
|
|
command.v = verbose;
|
|
command.time = Math.floor(Date.now() / 1000);
|
|
req = JSON.stringify(command);
|
|
//console.log(req);
|
|
}
|
|
fetch
|
|
(url, {
|
|
method: type,
|
|
headers: {
|
|
"Content-type": "application/json; charset=UTF-8"
|
|
},
|
|
body: req
|
|
})
|
|
.then(res => {
|
|
if (!res.ok) {
|
|
showErrorToast();
|
|
}
|
|
return res.json();
|
|
})
|
|
.then(json => {
|
|
clearTimeout(jsonTimeout);
|
|
jsonTimeout = null;
|
|
clearErrorToast();
|
|
d.getElementById('connind').style.backgroundColor = "#070";
|
|
if (!json) showToast('Empty response', true);
|
|
if (json.success) return;
|
|
var s = json;
|
|
if (!command || rinfo) {
|
|
if (!rinfo) {
|
|
pmt = json.info.fs.pmt;
|
|
if (pmt != pmtLS || pmt == 0) {
|
|
setTimeout(loadPresets,99);
|
|
}
|
|
else populatePresets(true);
|
|
pmtLast = pmt;
|
|
var x='',y='<option value="0">Default</option>';
|
|
json.effects.shift(); //remove solid
|
|
for (i in json.effects) json.effects[i] = {id: parseInt(i)+1, name:json.effects[i]};
|
|
json.effects.sort(compare);
|
|
for (i in json.effects) {
|
|
x += `<button class="btn${(i==0)?" first":""}" id="fxb${json.effects[i].id}" onclick="setX(${json.effects[i].id});">${json.effects[i].name}</button><br>`;
|
|
}
|
|
|
|
json.palettes.shift(); //remove default
|
|
for (i in json.palettes) json.palettes[i] = {"id": parseInt(i)+1, "name":json.palettes[i]};
|
|
json.palettes.sort(compare);
|
|
for (i in json.palettes) {
|
|
y += `<option value="${json.palettes[i].id}">${json.palettes[i].name}</option>`;
|
|
}
|
|
e1.innerHTML=x; e2.innerHTML=y;
|
|
}
|
|
|
|
var info = json.info;
|
|
var name = info.name;
|
|
d.getElementById('namelabel').innerHTML = name;
|
|
if (name === "Dinnerbone") d.documentElement.style.transform = "rotate(180deg)";
|
|
if (info.live) name = "(Live) " + name;
|
|
if (loc) name = "(L) " + name;
|
|
d.title = name;
|
|
isRgbw = info.leds.wv;
|
|
ledCount = info.leds.count;
|
|
syncTglRecv = info.str;
|
|
maxSeg = info.leds.maxseg;
|
|
pmt = info.fs.pmt;
|
|
if (!command && pmt != pmtLast) setTimeout(loadPresets,99);
|
|
pmtLast = pmt;
|
|
lastinfo = info;
|
|
if (isInfo) populateInfo(info);
|
|
s = json.state;
|
|
displayRover(info, s);
|
|
}
|
|
isOn = s.on;
|
|
d.getElementById('sliderBri').value= s.bri;
|
|
nlA = s.nl.on;
|
|
nlDur = s.nl.dur;
|
|
nlTar = s.nl.tbri;
|
|
nlFade = s.nl.fade;
|
|
syncSend = s.udpn.send;
|
|
savedPresets = s.pss;
|
|
currentPreset = s.ps;
|
|
d.getElementById('cyToggle').checked = (s.pl < 0) ? false : true;
|
|
d.getElementById('cycs').value = s.ccnf.min;
|
|
d.getElementById('cyce').value = s.ccnf.max;
|
|
d.getElementById('cyct').value = s.ccnf.time /10;
|
|
d.getElementById('cyctt').value = s.transition /10;
|
|
|
|
var selc=0; var ind=0;
|
|
populateSegments(s);
|
|
for (i in s.seg)
|
|
{
|
|
if(s.seg[i].sel) {selc = ind; break;} ind++;
|
|
}
|
|
var i=s.seg[selc];
|
|
if (!i) {
|
|
showToast('No Segments!', true);
|
|
updateUI();
|
|
return;
|
|
}
|
|
var cd = d.getElementById('csl').children;
|
|
for (e = 2; e >= 0; e--)
|
|
{
|
|
cd[e].style.backgroundColor = "rgb(" + i.col[e][0] + "," + i.col[e][1] + "," + i.col[e][2] + ")";
|
|
if (isRgbw) whites[e] = parseInt(i.col[e][3]);
|
|
selectSlot(csel);
|
|
}
|
|
d.getElementById('sliderSpeed').value = whites[csel];
|
|
|
|
d.getElementById('sliderSpeed').value = i.sx;
|
|
d.getElementById('sliderIntensity').value = i.ix;
|
|
|
|
d.getElementById('fxb' + selectedFx).style.backgroundColor = "var(--c-3)";
|
|
selectedFx = i.fx;
|
|
e2.value = i.pal;
|
|
if (!command) d.getElementById('Effects').scrollTop = d.getElementById('fxb' + selectedFx).offsetTop - d.getElementById('Effects').clientHeight/1.8;
|
|
|
|
if (s.error && s.error != 0) {
|
|
var errstr = "";
|
|
switch (s.error) {
|
|
case 10: errstr = "Could not mount filesystem!"; break;
|
|
case 11: errstr = "Not enough space to save preset!"; break;
|
|
case 12: errstr = "The requested preset does not exist."; break;
|
|
case 19: errstr = "A filesystem error has occured."; break;
|
|
}
|
|
showToast('Error ' + s.error + ": " + errstr, true);
|
|
}
|
|
updateUI();
|
|
})
|
|
.catch(function (error) {
|
|
showToast(error, true);
|
|
console.log(error);
|
|
})
|
|
}
|
|
|
|
function togglePower() {
|
|
isOn = !isOn;
|
|
var obj = {"on": isOn};
|
|
obj.transition = parseInt(d.getElementById('cyctt').value*10);
|
|
requestJson(obj);
|
|
}
|
|
|
|
function toggleNl() {
|
|
nlA = !nlA;
|
|
if (nlA)
|
|
{
|
|
showToast(`Timer active. Your light will turn ${nlTar > 0 ? "on":"off"} ${nlFade ? "over":"after"} ${nlDur} minutes.`);
|
|
} else {
|
|
showToast('Timer deactivated.');
|
|
}
|
|
var obj = {"nl": {"on": nlA}};
|
|
requestJson(obj);
|
|
}
|
|
|
|
function toggleSync() {
|
|
syncSend = !syncSend;
|
|
if (syncSend)
|
|
{
|
|
showToast('Other lights in the network will now sync to this one.');
|
|
} else {
|
|
showToast('This light and other lights in the network will no longer sync.');
|
|
}
|
|
var obj = {"udpn": {"send": syncSend}};
|
|
if (syncTglRecv) obj.udpn.recv = syncSend;
|
|
requestJson(obj);
|
|
}
|
|
|
|
function toggleLiveview() {
|
|
isLv = !isLv;
|
|
d.getElementById('liveview').style.display = (isLv) ? "block":"none";
|
|
var url = loc ? `http://${locip}/liveview`:"/liveview";
|
|
d.getElementById('liveview').src = (isLv) ? url:"about:blank";
|
|
d.getElementById('buttonSr').className = (isLv) ? "active":"";
|
|
size();
|
|
}
|
|
|
|
function toggleInfo() {
|
|
isInfo = !isInfo;
|
|
if (isInfo) populateInfo(lastinfo);
|
|
d.getElementById('info').style.transform = (isInfo) ? "translateY(0px)":"translateY(100%)";
|
|
d.getElementById('buttonI').className = (isInfo) ? "active":"";
|
|
}
|
|
|
|
function makeSeg() {
|
|
var ns = 0;
|
|
if (lowestUnused > 0) {
|
|
var pend = d.getElementById(`seg${lowestUnused -1}e`).value;
|
|
if (pend < ledCount) ns = pend;
|
|
}
|
|
var cn = `<div class="seg">
|
|
<div class="segname newseg">
|
|
New segment ${lowestUnused}
|
|
</div>
|
|
<br>
|
|
<div class="segin expanded">
|
|
<table class="segt">
|
|
<tr>
|
|
<td class="segtd">Start LED</td>
|
|
<td class="segtd">Stop LED</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="segtd"><input class="noslide segn" id="seg${lowestUnused}s" type="number" min="0" max="${ledCount-1}" value="${ns}" oninput="updateLen(${lowestUnused})"></td>
|
|
<td class="segtd"><input class="noslide segn" id="seg${lowestUnused}e" type="number" min="0" max="${ledCount}" value="${ledCount}" oninput="updateLen(${lowestUnused})"></td>
|
|
</tr>
|
|
</table>
|
|
<div class="h" id="seg${lowestUnused}len">${ledCount - ns} LEDs</div>
|
|
<i class="icons e-icon cnf cnf-s half" id="segc${lowestUnused}" onclick="setSeg(${lowestUnused}); resetUtil();"></i>
|
|
</div>
|
|
</div>`;
|
|
d.getElementById('segutil').innerHTML = cn;
|
|
}
|
|
|
|
function resetUtil() {
|
|
var cn = `<button class="btn btn-s btn-i" onclick="makeSeg()"><i class="icons btn-icon"></i>Add segment</button><br>`;
|
|
d.getElementById('segutil').innerHTML = cn;
|
|
}
|
|
|
|
function makeP(i) {
|
|
return `
|
|
<input type="text" class="ptxt noslide" id="p${i}txt" autocomplete="off" maxlength=32 value="${(i>0)?pName(i):""}" placeholder="Enter name..."/><br>
|
|
<div class="c">Quick load label: <input type="text" class="stxt noslide" maxlength=2 value="${qlName(i)}" id="p${i}ql" autocomplete="off"/></div>
|
|
<div class="h">(leave empty for no Quick load button)</div>
|
|
<label class="check revchkl">
|
|
${(i>0)?"Overwrite with state":"Use current state"}
|
|
<input type="checkbox" id="p${i}cstgl" onchange="tglCs(${i})" ${(i>0)?"":"checked"}>
|
|
<span class="checkmark schk"></span>
|
|
</label><br>
|
|
<div class="po2" id="p${i}o2">
|
|
API command<br>
|
|
<textarea class="noslide" id="p${i}api"></textarea>
|
|
</div>
|
|
<div class="po1" id="p${i}o1">
|
|
<label class="check revchkl">
|
|
Include brightness
|
|
<input type="checkbox" id="p${i}ibtgl" checked>
|
|
<span class="checkmark schk"></span>
|
|
</label>
|
|
<label class="check revchkl">
|
|
Save segment bounds
|
|
<input type="checkbox" id="p${i}sbtgl" checked>
|
|
<span class="checkmark schk"></span>
|
|
</label>
|
|
</div>
|
|
<div class="c">Save to ID <input class="noslide" id="p${i}id" type="number" oninput="checkUsed(${i})" max=250 min=1 value=${(i>0)?i:getLowestUnusedP()}></div>
|
|
<div class="c">
|
|
<button class="btn btn-i btn-p" onclick="saveP(${i})"><i class="icons btn-icon"></i>${(i>0)?"Save changes":"Save preset"}</button>
|
|
${(i>0)?'<button class="btn btn-i btn-p" onclick="delP('+i+')"><i class="icons btn-icon"></i>Delete preset</button>':
|
|
'<button class="btn btn-p" onclick="resetPUtil()">Cancel</button>'}
|
|
</div>
|
|
<div class="pwarn ${(i>0)?"bp":""} c" id="p${i}warn">
|
|
|
|
</div>
|
|
${(i>0)? ('<div class="h">ID ' +i+ '</div>'):""}`;
|
|
}
|
|
|
|
function makePUtil() {
|
|
d.getElementById('putil').innerHTML = `<div class="seg pres">
|
|
<div class="segname newseg">
|
|
New preset</div>
|
|
<div class="segin expanded">
|
|
${makeP(0)}</div></div>`;
|
|
updateTrail(d.getElementById('p0p'));
|
|
}
|
|
|
|
function resetPUtil() {
|
|
var cn = `<button class="btn btn-s btn-i" onclick="makePUtil()"><i class="icons btn-icon"></i>Create preset</button><br>`;
|
|
d.getElementById('putil').innerHTML = cn;
|
|
}
|
|
|
|
function tglCs(i){
|
|
var pss = d.getElementById(`p${i}cstgl`).checked;
|
|
d.getElementById(`p${i}o1`).style.display = pss? "block" : "none";
|
|
d.getElementById(`p${i}o2`).style.display = !pss? "block" : "none";
|
|
}
|
|
|
|
function selSegEx(s)
|
|
{
|
|
var obj = {"seg":[]};
|
|
for(i=0; i<=lSeg; i++){
|
|
obj.seg.push({"sel":(i==s)?true:false});
|
|
}
|
|
requestJson(obj);
|
|
}
|
|
|
|
function selSeg(s){
|
|
var sel = d.getElementById(`seg${s}sel`).checked;
|
|
var obj = {"seg": {"id": s, "sel": sel}};
|
|
requestJson(obj, false);
|
|
}
|
|
|
|
function setSeg(s){
|
|
var start = parseInt(d.getElementById(`seg${s}s`).value);
|
|
var stop = parseInt(d.getElementById(`seg${s}e`).value);
|
|
if (stop <= start) {delSeg(s); return;};
|
|
var obj = {"seg": {"id": s, "start": start, "stop": stop}};
|
|
if (d.getElementById(`seg${s}grp`))
|
|
{
|
|
var grp = parseInt(d.getElementById(`seg${s}grp`).value);
|
|
var spc = parseInt(d.getElementById(`seg${s}spc`).value);
|
|
obj.seg.grp = grp;
|
|
obj.seg.spc = spc;
|
|
}
|
|
requestJson(obj);
|
|
}
|
|
|
|
function delSeg(s){
|
|
if (segCount < 2) {
|
|
showToast("You need to have multiple segments to delete one!");
|
|
return;
|
|
}
|
|
expanded[s] = false;
|
|
segCount--;
|
|
var obj = {"seg": {"id": s, "stop": 0}};
|
|
requestJson(obj, false);
|
|
}
|
|
|
|
function setRev(s){
|
|
var rev = d.getElementById(`seg${s}rev`).checked;
|
|
var obj = {"seg": {"id": s, "rev": rev}};
|
|
requestJson(obj, false);
|
|
}
|
|
|
|
function setMi(s){
|
|
var mi = d.getElementById(`seg${s}mi`).checked;
|
|
var obj = {"seg": {"id": s, "mi": mi}};
|
|
requestJson(obj, false);
|
|
}
|
|
|
|
function setSegPwr(s){
|
|
var obj = {"seg": {"id": s, "on": !powered[s]}};
|
|
requestJson(obj);
|
|
}
|
|
|
|
function setSegBri(s){
|
|
var obj = {"seg": {"id": s, "bri": parseInt(d.getElementById(`seg${s}bri`).value)}};
|
|
requestJson(obj);
|
|
}
|
|
|
|
function setX(ind) {
|
|
var obj = {"seg": {"fx": parseInt(ind)}};
|
|
requestJson(obj);
|
|
}
|
|
|
|
function setPalette()
|
|
{
|
|
var obj = {"seg": {"pal": parseInt(d.getElementById('selectPalette').value)}};
|
|
requestJson(obj);
|
|
}
|
|
|
|
function setBri() {
|
|
var obj = {"bri": parseInt(d.getElementById('sliderBri').value)};
|
|
obj.transition = parseInt(d.getElementById('cyctt').value*10);
|
|
requestJson(obj);
|
|
}
|
|
|
|
function setSpeed() {
|
|
var obj = {"seg": {"sx": parseInt(d.getElementById('sliderSpeed').value)}};
|
|
requestJson(obj, false);
|
|
}
|
|
|
|
function setIntensity() {
|
|
var obj = {"seg": {"ix": parseInt(d.getElementById('sliderIntensity').value)}};
|
|
requestJson(obj, false);
|
|
}
|
|
|
|
function setLor(i) {
|
|
var obj = {"lor": i};
|
|
requestJson(obj);
|
|
}
|
|
|
|
function toggleCY() {
|
|
var obj = {"pl" : -1};
|
|
if (d.getElementById('cyToggle').checked)
|
|
{
|
|
obj = {"pl": 0, "ccnf": {"min": parseInt(d.getElementById('cycs').value), "max": parseInt(d.getElementById('cyce').value), "time": parseInt(d.getElementById('cyct').value*10)}};
|
|
obj.transition = parseInt(d.getElementById('cyctt').value*10);
|
|
}
|
|
|
|
requestJson(obj);
|
|
}
|
|
|
|
function setPreset(i) {
|
|
var obj = {"ps": i}
|
|
|
|
showToast("Loading preset " + pName(i) +" (" + i + ")");
|
|
|
|
requestJson(obj);
|
|
}
|
|
|
|
function saveP(i) {
|
|
pI = parseInt(d.getElementById(`p${i}id`).value);
|
|
if (!pI || pI < 1) pI = (i>0) ? i : getLowestUnusedP();
|
|
pN = d.getElementById(`p${i}txt`).value;
|
|
if (pN == "") pN = "Preset " + pI;
|
|
var obj = {};
|
|
if (!d.getElementById(`p${i}cstgl`).checked) {
|
|
var raw = d.getElementById(`p${i}api`).value;
|
|
try {
|
|
obj = JSON.parse(raw);
|
|
} catch (e) {
|
|
obj["win"] = raw;
|
|
if (raw.length < 2) {
|
|
d.getElementById(`p${i}warn`).innerHTML = "⚠ Please enter your API command first";
|
|
return;
|
|
} else if (raw.indexOf('{') > -1) {
|
|
d.getElementById(`p${i}warn`).innerHTML = "⚠ Syntax error in custom JSON API command";
|
|
return;
|
|
} else if (raw.indexOf("Please") == 0) {
|
|
d.getElementById(`p${i}warn`).innerHTML = "⚠ Please refresh the page before modifying this preset";
|
|
return;
|
|
}
|
|
}
|
|
obj["o"] = true;
|
|
} else {
|
|
obj["ib"] = d.getElementById(`p${i}ibtgl`).checked;
|
|
obj["sb"] = d.getElementById(`p${i}sbtgl`).checked;
|
|
}
|
|
obj["psave"] = pI; obj["n"] = pN;
|
|
var pQN = d.getElementById(`p${i}ql`).value;
|
|
if (pQN.length > 0) obj["ql"] = pQN;
|
|
|
|
showToast("Saving " + pN +" (" + pI + ")");
|
|
requestJson(obj);
|
|
if (obj["o"]) {
|
|
pJson[pI] = obj;
|
|
delete pJson[pI]["psave"];
|
|
delete pJson[pI]["o"];
|
|
delete pJson[pI]["v"];
|
|
delete pJson[pI]["time"];
|
|
} else {
|
|
pJson[pI] = {"n":pN, "win":"Please refresh the page to see this newly saved command."};
|
|
if (obj["win"]) pJson[pI]["win"] = obj["win"];
|
|
if (obj["ql"]) pJson[pI]["ql"] = obj["ql"];
|
|
}
|
|
populatePresets();
|
|
resetPUtil();
|
|
}
|
|
|
|
function delP(i) {
|
|
var obj = {"pdel": i};
|
|
requestJson(obj);
|
|
delete pJson[i];
|
|
populatePresets();
|
|
}
|
|
|
|
function selectSlot(b) {
|
|
csel = b;
|
|
var cd = d.getElementById('csl').children;
|
|
for (i = 0; i < cd.length; i++) {
|
|
cd[i].style.border="2px solid white";
|
|
cd[i].style.margin="5px";
|
|
cd[i].style.width="42px";
|
|
}
|
|
cd[csel].style.border="5px solid white";
|
|
cd[csel].style.margin="2px";
|
|
cd[csel].style.width="50px";
|
|
cpick.color.set(cd[csel].style.backgroundColor);
|
|
d.getElementById('sliderW').value = whites[csel];
|
|
updateTrail(d.getElementById('sliderW'));
|
|
updateHex();
|
|
updateRgb();
|
|
}
|
|
|
|
var lasth = 0;
|
|
function pC(col)
|
|
{
|
|
if (col == "rnd")
|
|
{
|
|
col = {h: 0, s: 0, v: 100};
|
|
col.s = Math.floor((Math.random() * 50) + 50);
|
|
do {
|
|
col.h = Math.floor(Math.random() * 360);
|
|
} while (Math.abs(col.h - lasth) < 50);
|
|
lasth = col.h;
|
|
}
|
|
cpick.color.set(col);
|
|
setColor(0);
|
|
}
|
|
|
|
function updateRgb()
|
|
{
|
|
var col = cpick.color.rgb;
|
|
var s = d.getElementById('sliderR');
|
|
s.value = col.r; updateTrail(s,1);
|
|
s = d.getElementById('sliderG');
|
|
s.value = col.g; updateTrail(s,2);
|
|
s = d.getElementById('sliderB');
|
|
s.value = col.b; updateTrail(s,3);
|
|
}
|
|
|
|
function updateHex()
|
|
{
|
|
var str = cpick.color.hexString;
|
|
str = str.substring(1);
|
|
var w = whites[csel];
|
|
if (w > 0) str += w.toString(16);
|
|
d.getElementById('hexc').value = str;
|
|
d.getElementById('hexcnf').style.backgroundColor = "var(--c-3)";
|
|
}
|
|
|
|
function hexEnter() {
|
|
d.getElementById('hexcnf').style.backgroundColor = "var(--c-6)";
|
|
if(event.keyCode == 13) fromHex();
|
|
}
|
|
|
|
function fromHex()
|
|
{
|
|
var str = d.getElementById('hexc').value;
|
|
whites[csel] = parseInt(str.substring(6), 16);
|
|
try {
|
|
cpick.color.set("#" + str.substring(0,6));
|
|
} catch (e) {
|
|
cpick.color.set("#ffaa00");
|
|
}
|
|
if (isNaN(whites[csel])) whites[csel] = 0;
|
|
setColor(2);
|
|
}
|
|
|
|
function fromRgb()
|
|
{
|
|
var r = d.getElementById('sliderR').value;
|
|
var g = d.getElementById('sliderG').value;
|
|
var b = d.getElementById('sliderB').value;
|
|
cpick.color.set(`rgb(${r},${g},${b})`);
|
|
setColor(0);
|
|
}
|
|
|
|
function setColor(sr) {
|
|
var cd = d.getElementById('csl').children;
|
|
if (sr == 1 && cd[csel].style.backgroundColor == 'rgb(0, 0, 0)') cpick.color.setChannel('hsv', 'v', 100);
|
|
cd[csel].style.backgroundColor = cpick.color.rgbString;
|
|
if (sr != 2) whites[csel] = d.getElementById('sliderW').value;
|
|
var col = cpick.color.rgb;
|
|
var obj = {"seg": {"col": [[col.r, col.g, col.b, whites[csel]],[],[]]}};
|
|
if (csel == 1) {
|
|
obj = {"seg": {"col": [[],[col.r, col.g, col.b, whites[csel]],[]]}};
|
|
} else if (csel == 2) {
|
|
obj = {"seg": {"col": [[],[],[col.r, col.g, col.b, whites[csel]]]}};
|
|
}
|
|
updateHex();
|
|
updateRgb();
|
|
obj.transition = parseInt(d.getElementById('cyctt').value*10);
|
|
requestJson(obj);
|
|
}
|
|
|
|
var hc = 0;
|
|
setInterval(function(){if (!isInfo) return; hc+=18; if (hc>300) hc=0; if (hc>200)hc=306; if (hc==144) hc+=36; if (hc==108) hc+=18;
|
|
d.getElementById('heart').style.color = `hsl(${hc}, 100%, 50%)`}, 910);
|
|
|
|
function openGH()
|
|
{
|
|
window.open("https://github.com/Aircoookie/WLED/wiki");
|
|
}
|
|
|
|
var cnfr = false;
|
|
function cnfReset()
|
|
{
|
|
if (!cnfr)
|
|
{
|
|
var bt = d.getElementById('resetbtn');
|
|
bt.style.color = "#f00";
|
|
bt.innerHTML = "Confirm Reboot";
|
|
cnfr = true; return;
|
|
}
|
|
window.location.href = "/reset";
|
|
}
|
|
|
|
var cnfrS = false;
|
|
function rSegs()
|
|
{
|
|
var bt = d.getElementById('rsbtn');
|
|
if (!cnfrS)
|
|
{
|
|
bt.style.color = "#f00";
|
|
bt.innerHTML = "Confirm reset";
|
|
cnfrS = true; return;
|
|
}
|
|
cnfrS = false;
|
|
bt.style.color = "#fff";
|
|
bt.innerHTML = "Reset segments";
|
|
var obj = {"seg":[{"start":0,"stop":ledCount,"sel":true}]};
|
|
for(i=1; i<=lSeg; i++){
|
|
obj.seg.push({"stop":0});
|
|
}
|
|
requestJson(obj);
|
|
}
|
|
|
|
function expand(i,a)
|
|
{
|
|
if (!a) expanded[i] = !expanded[i];
|
|
d.getElementById('seg' +i).style.display = (expanded[i]) ? "block":"none";
|
|
d.getElementById('sege' +i).style.transform = (expanded[i]) ? "rotate(180deg)":"rotate(0deg)"
|
|
if (i > 100) { //presets
|
|
var p = i-100;
|
|
d.getElementById(`p${p}o`).style.background = (expanded[i] || p != currentPreset)?"var(--c-2)":"var(--c-6)";
|
|
if (d.getElementById('seg' +i).innerHTML == "") {
|
|
d.getElementById('seg' +i).innerHTML = makeP(p);
|
|
var papi = papiVal(p);
|
|
d.getElementById(`p${p}api`).value = papi;
|
|
if (papi.indexOf("Please") == 0) d.getElementById(`p${p}cstgl`).checked = true;
|
|
tglCs(p);
|
|
}
|
|
}
|
|
}
|
|
|
|
function unfocusSliders() {
|
|
d.getElementById("sliderBri").blur();
|
|
d.getElementById("sliderSpeed").blur();
|
|
d.getElementById("sliderIntensity").blur();
|
|
}
|
|
|
|
//sliding UI
|
|
const _C = document.querySelector('.container'), N = 4;
|
|
|
|
let iSlide = 0, x0 = null, scrollS = 0, locked = false, w;
|
|
|
|
function unify(e) { return e.changedTouches ? e.changedTouches[0] : e }
|
|
|
|
function hasIroClass(classList) {
|
|
for (var i = 0; i < classList.length; i++) {
|
|
var element = classList[i];
|
|
if (element.startsWith('Iro')) return true;
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
|
|
function lock(e) {
|
|
if (pcMode) return;
|
|
var l = e.target.classList;
|
|
var pl = e.target.parentElement.classList;
|
|
|
|
if (l.contains('noslide') || hasIroClass(l) || hasIroClass(pl)) return;
|
|
|
|
x0 = unify(e).clientX;
|
|
scrollS = d.getElementsByClassName("tabcontent")[iSlide].scrollTop;
|
|
|
|
_C.classList.toggle('smooth', !(locked = true))
|
|
}
|
|
|
|
function move(e) {
|
|
if(!locked || pcMode) return;
|
|
var dx = unify(e).clientX - x0, s = Math.sign(dx),
|
|
f = +(s*dx/w).toFixed(2);
|
|
|
|
if((iSlide > 0 || s < 0) && (iSlide < N - 1 || s > 0)
|
|
&& f > .12
|
|
&& d.getElementsByClassName("tabcontent")[iSlide].scrollTop == scrollS) {
|
|
_C.style.setProperty('--i', iSlide -= s);
|
|
f = 1 - f;
|
|
updateTablinks(iSlide);
|
|
}
|
|
_C.style.setProperty('--f', f);
|
|
_C.classList.toggle('smooth', !(locked = false));
|
|
x0 = null
|
|
}
|
|
|
|
function size() {
|
|
w = window.innerWidth;
|
|
var h = d.getElementById('top').clientHeight;
|
|
sCol('--th', h + "px");
|
|
sCol('--bh', d.getElementById('bot').clientHeight + "px");
|
|
if (isLv) h -= 4;
|
|
sCol('--tp', h + "px");
|
|
togglePcMode();
|
|
}
|
|
|
|
function togglePcMode(fromB = false)
|
|
{
|
|
if (fromB) {
|
|
pcModeA = !pcModeA;
|
|
localStorage.setItem('pcm', pcModeA);
|
|
pcMode = pcModeA;
|
|
}
|
|
if (w < 1250 && !pcMode) return;
|
|
if (!fromB && ((w < 1250 && lastw < 1250) || (w >= 1250 && lastw >= 1250))) return;
|
|
openTab(0, true);
|
|
if (w < 1250) {pcMode = false;}
|
|
else if (pcModeA && !fromB) pcMode = pcModeA;
|
|
updateTablinks(0);
|
|
d.getElementById('buttonPcm').className = (pcMode) ? "active":"";
|
|
d.getElementById('bot').style.height = (pcMode && !cfg.comp.pcmbot) ? "0":"auto";
|
|
sCol('--bh', d.getElementById('bot').clientHeight + "px");
|
|
_C.style.width = (pcMode)?'100%':'400%';
|
|
lastw = w;
|
|
}
|
|
|
|
function isObject(item) {
|
|
return (item && typeof item === 'object' && !Array.isArray(item));
|
|
}
|
|
|
|
function mergeDeep(target, ...sources) {
|
|
if (!sources.length) return target;
|
|
const source = sources.shift();
|
|
|
|
if (isObject(target) && isObject(source)) {
|
|
for (const key in source) {
|
|
if (isObject(source[key])) {
|
|
if (!target[key]) Object.assign(target, { [key]: {} });
|
|
mergeDeep(target[key], source[key]);
|
|
} else {
|
|
Object.assign(target, { [key]: source[key] });
|
|
}
|
|
}
|
|
}
|
|
return mergeDeep(target, ...sources);
|
|
}
|
|
|
|
size();
|
|
_C.style.setProperty('--n', N);
|
|
|
|
window.addEventListener('resize', size, false);
|
|
|
|
_C.addEventListener('mousedown', lock, false);
|
|
_C.addEventListener('touchstart', lock, false);
|
|
|
|
_C.addEventListener('mouseout', move, false);
|
|
_C.addEventListener('mouseup', move, false);
|
|
_C.addEventListener('touchend', move, false);</script>)=====";
|
|
|
|
|
|
// Autogenerated from wled00/data/iro.js, do not edit!!
|
|
const char PAGE_iroJs[] PROGMEM = R"=====(<script>/*!
|
|
* iro.js v5.3.1
|
|
* 2016-2020 James Daniel
|
|
* Licensed under MPL 2.0
|
|
* github.com/jaames/iro.js
|
|
*/
|
|
!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(t=t||self).iro=n()}(this,function(){"use strict";var k,s,n,i,o,m={},M=[],r=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|^--/i;function j(t,n){for(var i in n)t[i]=n[i];return t}function b(t){var n=t.parentNode;n&&n.removeChild(t)}function d(t,n,i){var r,e,u,o,l=arguments;if(n=j({},n),3<arguments.length)for(i=[i],r=3;r<arguments.length;r++)i.push(l[r]);if(null!=i&&(n.children=i),null!=t&&null!=t.defaultProps)for(e in t.defaultProps)void 0===n[e]&&(n[e]=t.defaultProps[e]);return o=n.key,null!=(u=n.ref)&&delete n.ref,null!=o&&delete n.key,c(t,n,o,u)}function c(t,n,i,r){var e={type:t,props:n,key:i,ref:r,n:null,i:null,e:0,o:null,l:null,c:null,constructor:void 0};return k.vnode&&k.vnode(e),e}function I(t){return t.children}function O(t,n){this.props=t,this.context=n}function w(t,n){if(null==n)return t.i?w(t.i,t.i.n.indexOf(t)+1):null;for(var i;n<t.n.length;n++)if(null!=(i=t.n[n])&&null!=i.o)return i.o;return"function"==typeof t.type?w(t):null}function f(t){var n,i;if(null!=(t=t.i)&&null!=t.c){for(t.o=t.c.base=null,n=0;n<t.n.length;n++)if(null!=(i=t.n[n])&&null!=i.o){t.o=t.c.base=i.o;break}return f(t)}}function e(t){(!t.f&&(t.f=!0)&&1===s.push(t)||i!==k.debounceRendering)&&(i=k.debounceRendering,(k.debounceRendering||n)(u))}function u(){var t,n,i,r,e,u,o,l;for(s.sort(function(t,n){return n.p.e-t.p.e});t=s.pop();)t.f&&(r=i=void 0,u=(e=(n=t).p).o,o=n.w,l=n.u,n.u=!1,o&&(i=[],r=x(o,e,j({},e),n.k,void 0!==o.ownerSVGElement,null,i,l,null==u?w(e):u),v(i,e),r!=u&&f(e)))}function A(n,i,t,r,e,u,o,l,s){var c,f,h,a,v,d,g,p=t&&t.n||M,y=p.length;if(l==m&&(l=null!=u?u[0]:y?w(t,0):null),c=0,i.n=S(i.n,function(t){if(null!=t){if(t.i=i,t.e=i.e+1,null===(h=p[c])||h&&t.key==h.key&&t.type===h.type)p[c]=void 0;else for(f=0;f<y;f++){if((h=p[f])&&t.key==h.key&&t.type===h.type){p[f]=void 0;break}h=null}if(a=x(n,t,h=h||m,r,e,u,o,null,l,s),(f=t.ref)&&h.ref!=f&&(g=g||[]).push(f,t.c||a,t),null!=a){if(null==d&&(d=a),null!=t.l)a=t.l,t.l=null;else if(u==h||a!=l||null==a.parentNode){t:if(null==l||l.parentNode!==n)n.appendChild(a);else{for(v=l,f=0;(v=v.nextSibling)&&f<y;f+=2)if(v==a)break t;n.insertBefore(a,l)}"option"==i.type&&(n.value="")}l=a.nextSibling,"function"==typeof i.type&&(i.l=a)}}return c++,t}),i.o=d,null!=u&&"function"!=typeof i.type)for(c=u.length;c--;)null!=u[c]&&b(u[c]);for(c=y;c--;)null!=p[c]&&R(p[c],p[c]);if(g)for(c=0;c<g.length;c++)N(g[c],g[++c],g[++c])}function S(t,n,i){if(null==i&&(i=[]),null==t||"boolean"==typeof t)n&&i.push(n(null));else if(Array.isArray(t))for(var r=0;r<t.length;r++)S(t[r],n,i);else i.push(n?n(function(t){if(null==t||"boolean"==typeof t)return null;if("string"==typeof t||"number"==typeof t)return c(null,t,null,null);if(null==t.o&&null==t.c)return t;var n=c(t.type,t.props,t.key,null);return n.o=t.o,n}(t)):t);return i}function h(t,n,i){"-"===n[0]?t.setProperty(n,i):t[n]="number"==typeof i&&!1===r.test(n)?i+"px":null==i?"":i}function E(t,n,i,r,e){var u,o,l,s,c;if("key"===(n=e?"className"===n?"class":n:"class"===n?"className":n)||"children"===n);else if("style"===n)if(u=t.style,"string"==typeof i)u.cssText=i;else{if("string"==typeof r&&(u.cssText="",r=null),r)for(o in r)i&&o in i||h(u,o,"");if(i)for(l in i)r&&i[l]===r[l]||h(u,l,i[l])}else"o"===n[0]&&"n"===n[1]?(s=n!==(n=n.replace(/Capture$/,"")),n=((c=n.toLowerCase())in t?c:n).slice(2),i?(r||t.addEventListener(n,a,s),(t.t||(t.t={}))[n]=i):t.removeEventListener(n,a,s)):"list"!==n&&"tagName"!==n&&"form"!==n&&!e&&n in t?t[n]=null==i?"":i:"function"!=typeof i&&"dangerouslySetInnerHTML"!==n&&(n!==(n=n.replace(/^xlink:?/,""))?null==i||!1===i?t.removeAttributeNS("http://www.w3.org/1999/xlink",n.toLowerCase()):t.setAttributeNS("http://www.w3.org/1999/xlink",n.toLowerCase(),i):null==i||!1===i?t.removeAttribute(n):t.setAttribute(n,i))}function a(t){return this.t[t.type](k.event?k.event(t):t)}function x(t,n,i,r,e,u,o,l,s,c){var f,h,a,v,d,g,p,y,b,w,x=n.type;if(void 0!==n.constructor)return null;(f=k.e)&&f(n);try{t:if("function"==typeof x){if(y=n.props,b=(f=x.contextType)&&r[f.c],w=f?b?b.props.value:f.i:r,i.c?p=(h=n.c=i.c).i=h.m:("prototype"in x&&x.prototype.render?n.c=h=new x(y,w):(n.c=h=new O(y,w),h.constructor=x,h.render=_),b&&b.sub(h),h.props=y,h.state||(h.state={}),h.context=w,h.k=r,a=h.f=!0,h.M=[]),null==h.j&&(h.j=h.state),null!=x.getDerivedStateFromProps&&j(h.j==h.state?h.j=j({},h.j):h.j,x.getDerivedStateFromProps(y,h.j)),a)null==x.getDerivedStateFromProps&&null!=h.componentWillMount&&h.componentWillMount(),null!=h.componentDidMount&&o.push(h);else{if(null==x.getDerivedStateFromProps&&null==l&&null!=h.componentWillReceiveProps&&h.componentWillReceiveProps(y,w),!l&&null!=h.shouldComponentUpdate&&!1===h.shouldComponentUpdate(y,h.j,w)){for(h.props=y,h.state=h.j,h.f=!1,(h.p=n).o=null!=s?s!==i.o?s:i.o:null,n.n=i.n,f=0;f<n.n.length;f++)n.n[f]&&(n.n[f].i=n);break t}null!=h.componentWillUpdate&&h.componentWillUpdate(y,h.j,w)}for(v=h.props,d=h.state,h.context=w,h.props=y,h.state=h.j,(f=k.I)&&f(n),h.f=!1,h.p=n,h.w=t,f=h.render(h.props,h.state,h.context),n.n=S(null!=f&&f.type==I&&null==f.key?f.props.children:f),null!=h.getChildContext&&(r=j(j({},r),h.getChildContext())),a||null==h.getSnapshotBeforeUpdate||(g=h.getSnapshotBeforeUpdate(v,d)),A(t,n,i,r,e,u,o,s,c),h.base=n.o;f=h.M.pop();)h.j&&(h.state=h.j),f.call(h);a||null==v||null==h.componentDidUpdate||h.componentDidUpdate(v,d,g),p&&(h.m=h.i=null)}else n.o=function(t,n,i,r,e,u,o,l){var s,c,f,h,a=i.props,v=n.props;if(e="svg"===n.type||e,null==t&&null!=u)for(s=0;s<u.length;s++)if(null!=(c=u[s])&&(null===n.type?3===c.nodeType:c.localName===n.type)){t=c,u[s]=null;break}if(null==t){if(null===n.type)return document.createTextNode(v);t=e?document.createElementNS("http://www.w3.org/2000/svg",n.type):document.createElement(n.type),u=null}return null===n.type?a!==v&&(null!=u&&(u[u.indexOf(t)]=null),t.data=v):n!==i&&(null!=u&&(u=M.slice.call(t.childNodes)),f=(a=i.props||m).dangerouslySetInnerHTML,h=v.dangerouslySetInnerHTML,l||(h||f)&&(h&&f&&h.O==f.O||(t.innerHTML=h&&h.O||"")),function(t,n,i,r,e){var u;for(u in i)u in n||E(t,u,null,i[u],r);for(u in n)e&&"function"!=typeof n[u]||"value"===u||"checked"===u||i[u]===n[u]||E(t,u,n[u],i[u],r)}(t,v,a,e,l),n.n=n.props.children,h||A(t,n,i,r,"foreignObject"!==n.type&&e,u,o,m,l),l||("value"in v&&void 0!==v.value&&v.value!==t.value&&(t.value=null==v.value?"":v.value),"checked"in v&&void 0!==v.checked&&v.checked!==t.checked&&(t.checked=v.checked))),t}(i.o,n,i,r,e,u,o,c);(f=k.diffed)&&f(n)}catch(t){k.o(t,n,i)}return n.o}function v(t,n){for(var i;i=t.pop();)try{i.componentDidMount()}catch(t){k.o(t,i.p)}k.c&&k.c(n)}function N(t,n,i){try{"function"==typeof t?t(n):t.current=n}catch(t){k.o(t,i)}}function R(t,n,i){var r,e,u;if(k.unmount&&k.unmount(t),(r=t.ref)&&N(r,null,n),i||"function"==typeof t.type||(i=null!=(e=t.o)),t.o=t.l=null,null!=(r=t.c)){if(r.componentWillUnmount)try{r.componentWillUnmount()}catch(t){k.o(t,n)}r.base=r.w=null}if(r=t.n)for(u=0;u<r.length;u++)r[u]&&R(r[u],n,i);null!=e&&b(e)}function _(t,n,i){return this.constructor(t,i)}function g(t,n){for(var i=0;i<n.length;i++){var r=n[i];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function p(){return(p=Object.assign||function(t){for(var n=arguments,i=1;i<arguments.length;i++){var r=n[i];for(var e in r)Object.prototype.hasOwnProperty.call(r,e)&&(t[e]=r[e])}return t}).apply(this,arguments)}k={},O.prototype.setState=function(t,n){var i=this.j!==this.state&&this.j||(this.j=j({},this.state));"function"==typeof t&&!(t=t(i,this.props))||j(i,t),null!=t&&this.p&&(this.u=!1,n&&this.M.push(n),e(this))},O.prototype.forceUpdate=function(t){this.p&&(t&&this.M.push(t),this.u=!0,e(this))},O.prototype.render=I,s=[],n="function"==typeof Promise?Promise.prototype.then.bind(Promise.resolve()):setTimeout,i=k.debounceRendering,k.o=function(t,n,i){for(var r;n=n.i;)if((r=n.c)&&!r.i)try{if(r.constructor&&null!=r.constructor.getDerivedStateFromError)r.setState(r.constructor.getDerivedStateFromError(t));else{if(null==r.componentDidCatch)continue;r.componentDidCatch(t)}return e(r.m=r)}catch(n){t=n}throw t},o=m;var t="(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)",l="[\\s|\\(]+("+t+")[,|\\s]+("+t+")[,|\\s]+("+t+")\\s*\\)?",y="[\\s|\\(]+("+t+")[,|\\s]+("+t+")[,|\\s]+("+t+")[,|\\s]+("+t+")\\s*\\)?",P=new RegExp("rgb"+l),z=new RegExp("rgba"+y),H=new RegExp("hsl"+l),$=new RegExp("hsla"+y),T="^(?:#?|0x?)",W="([0-9a-fA-F]{1})",B="([0-9a-fA-F]{2})",C=new RegExp(T+W+W+W+"$"),D=new RegExp(T+W+W+W+W+"$"),F=new RegExp(T+B+B+B+"$"),G=new RegExp(T+B+B+B+B+"$"),L=Math.log,U=Math.round,q=Math.floor;function J(t,n,i){return Math.min(Math.max(t,n),i)}function K(t,n){var i=-1<t.indexOf("%"),r=parseFloat(t);return i?n/100*r:r}function Q(t){return parseInt(t,16)}function V(t){return t.toString(16).padStart(2,"0")}var X,Y=function(){function l(t,n){this.$={h:0,s:0,v:0,a:1},t&&this.set(t),this.onChange=n,this.initialValue=p({},this.$)}var t=l.prototype;return t.set=function(t){if("string"==typeof t)/^(?:#?|0x?)[0-9a-fA-F]{3,8}$/.test(t)?this.hexString=t:/^rgba?/.test(t)?this.rgbString=t:/^hsla?/.test(t)&&(this.hslString=t);else{if("object"!=typeof t)throw new Error("Invalid color value");t instanceof l?this.hsv=t.hsv:"object"==typeof t&&"r"in t&&"g"in t&&"b"in t?this.rgb=t:"object"==typeof t&&"h"in t&&"s"in t&&"v"in t?this.hsv=t:"object"==typeof t&&"h"in t&&"s"in t&&"l"in t&&(this.hsl=t)}},t.setChannel=function(t,n,i){var r;this[t]=p({},this[t],((r={})[n]=i,r))},t.reset=function(){this.hsva=this.initialValue},t.clone=function(){return new l(this)},t.unbind=function(){this.onChange=void 0},l.hsvToRgb=function(t){var n=t.h/60,i=t.s/100,r=t.v/100,e=q(n),u=n-e,o=r*(1-i),l=r*(1-u*i),s=r*(1-(1-u)*i),c=e%6,f=[s,r,r,l,o,o][c],h=[o,o,s,r,r,l][c];return{r:J(255*[r,l,o,o,s,r][c],0,255),g:J(255*f,0,255),b:J(255*h,0,255)}},l.rgbToHsv=function(t){var n=t.r/255,i=t.g/255,r=t.b/255,e=Math.max(n,i,r),u=Math.min(n,i,r),o=e-u,l=0,s=e,c=0===e?0:o/e;switch(e){case u:l=0;break;case n:l=(i-r)/o+(i<r?6:0);break;case i:l=(r-n)/o+2;break;case r:l=(n-i)/o+4}return{h:60*l%360,s:J(100*c,0,100),v:J(100*s,0,100)}},l.hsvToHsl=function(t){var n=t.s/100,i=t.v/100,r=(2-n)*i,e=r<=1?r:2-r,u=e<1e-9?0:n*i/e;return{h:t.h,s:J(100*u,0,100),l:J(50*r,0,100)}},l.hslToHsv=function(t){var n=2*t.l,i=t.s*(n<=100?n:200-n)/100,r=n+i<1e-9?0:2*i/(n+i);return{h:t.h,s:J(100*r,0,100),v:J((n+i)/2,0,100)}},l.kelvinToRgb=function(t){var n,i,r,e=t/100;return r=e<66?(n=255,i=-155.25485562709179-.44596950469579133*(i=e-2)+104.49216199393888*L(i),e<20?0:.8274096064007395*(r=e-10)-254.76935184120902+115.67994401066147*L(r)):(n=351.97690566805693+.114206453784165*(n=e-55)-40.25366309332127*L(n),i=325.4494125711974+.07943456536662342*(i=e-50)-28.0852963507957*L(i),255),{r:J(q(n),0,255),g:J(q(i),0,255),b:J(q(r),0,255)}},l.rgbToKelvin=function(t){for(var n,i=t.r,r=t.b,e=2e3,u=4e4;.4<u-e;){var o=l.kelvinToRgb(n=.5*(u+e));o.b/o.r>=r/i?u=n:e=n}return n},function(t,n,i){n&&g(t.prototype,n),i&&g(t,i)}(l,[{key:"hsv",get:function(){var t=this.$;return{h:t.h,s:t.s,v:t.v}},set:function(t){var n=this.$;if(t=p({},n,t),this.onChange){var i={h:!1,v:!1,s:!1,a:!1};for(var r in n)i[r]=t[r]!=n[r];this.$=t,(i.h||i.s||i.v||i.a)&&this.onChange(this,i)}else this.$=t}},{key:"hsva",get:function(){return p({},this.$)},set:function(t){this.hsv=t}},{key:"hue",get:function(){return this.$.h},set:function(t){this.hsv={h:t}}},{key:"saturation",get:function(){return this.$.s},set:function(t){this.hsv={s:t}}},{key:"value",get:function(){return this.$.v},set:function(t){this.hsv={v:t}}},{key:"alpha",get:function(){return this.$.a},set:function(t){this.hsv=p({},this.hsv,{a:t})}},{key:"kelvin",get:function(){return l.rgbToKelvin(this.rgb)},set:function(t){this.rgb=l.kelvinToRgb(t)}},{key:"red",get:function(){return this.rgb.r},set:function(t){this.rgb=p({},this.rgb,{r:t})}},{key:"green",get:function(){return this.rgb.g},set:function(t){this.rgb=p({},this.rgb,{g:t})}},{key:"blue",get:function(){return this.rgb.b},set:function(t){this.rgb=p({},this.rgb,{b:t})}},{key:"rgb",get:function(){var t=l.hsvToRgb(this.$),n=t.r,i=t.g,r=t.b;return{r:U(n),g:U(i),b:U(r)}},set:function(t){this.hsv=p({},l.rgbToHsv(t),{a:void 0===t.a?1:t.a})}},{key:"rgba",get:function(){return p({},this.rgb,{a:this.alpha})},set:function(t){this.rgb=t}},{key:"hsl",get:function(){var t=l.hsvToHsl(this.$),n=t.h,i=t.s,r=t.l;return{h:U(n),s:U(i),l:U(r)}},set:function(t){this.hsv=p({},l.hslToHsv(t),{a:void 0===t.a?1:t.a})}},{key:"hsla",get:function(){return p({},this.hsl,{a:this.alpha})},set:function(t){this.hsl=t}},{key:"rgbString",get:function(){var t=this.rgb;return"rgb("+t.r+", "+t.g+", "+t.b+")"},set:function(t){var n,i,r,e,u=1;if((n=P.exec(t))?(i=K(n[1],255),r=K(n[2],255),e=K(n[3],255)):(n=z.exec(t))&&(i=K(n[1],255),r=K(n[2],255),e=K(n[3],255),u=K(n[4],1)),!n)throw new Error("Invalid rgb string");this.rgb={r:i,g:r,b:e,a:u}}},{key:"rgbaString",get:function(){var t=this.rgba;return"rgba("+t.r+", "+t.g+", "+t.b+", "+t.a+")"},set:function(t){this.rgbString=t}},{key:"hexString",get:function(){var t=this.rgb;return"#"+V(t.r)+V(t.g)+V(t.b)},set:function(t){var n,i,r,e,u=255;if((n=C.exec(t))?(i=17*Q(n[1]),r=17*Q(n[2]),e=17*Q(n[3])):(n=D.exec(t))?(i=17*Q(n[1]),r=17*Q(n[2]),e=17*Q(n[3]),u=17*Q(n[4])):(n=F.exec(t))?(i=Q(n[1]),r=Q(n[2]),e=Q(n[3])):(n=G.exec(t))&&(i=Q(n[1]),r=Q(n[2]),e=Q(n[3]),u=Q(n[4])),!n)throw new Error("Invalid hex string");this.rgb={r:i,g:r,b:e,a:u/255}}},{key:"hex8String",get:function(){var t=this.rgba;return"#"+V(t.r)+V(t.g)+V(t.b)+V(q(255*t.a))},set:function(t){this.hexString=t}},{key:"hslString",get:function(){var t=this.hsl;return"hsl("+t.h+", "+t.s+"%, "+t.l+"%)"},set:function(t){var n,i,r,e,u=1;if((n=H.exec(t))?(i=K(n[1],360),r=K(n[2],100),e=K(n[3],100)):(n=$.exec(t))&&(i=K(n[1],360),r=K(n[2],100),e=K(n[3],100),u=K(n[4],1)),!n)throw new Error("Invalid hsl string");this.hsl={h:i,s:r,l:e,a:u}}},{key:"hslaString",get:function(){var t=this.hsla;return"hsl("+t.h+", "+t.s+"%, "+t.l+"%, "+t.a+")"},set:function(t){this.hslString=t}}]),l}();function Z(t){var n,i=t.width,r=t.sliderSize,e=t.borderWidth,u=t.handleRadius,o=t.padding,l=t.sliderShape,s="horizontal"===t.layoutDirection;return r=null!=(n=r)?n:2*o+2*u+2*e,"circle"===l?{handleStart:t.padding+t.handleRadius,handleRange:i-2*o-2*u-2*e,width:i,height:i,cx:i/2,cy:i/2,radius:i/2-e/2}:{handleStart:r/2,handleRange:i-r,radius:r/2,x:0,y:0,width:s?r:i,height:s?i:r}}function tt(t,n){var i=Z(t),r=i.width,e=i.height,u=i.handleRange,o=i.handleStart,l="horizontal"===t.layoutDirection,s=l?r/2:e/2,c=o+function(t,n){var i=n.hsva,r=n.rgb;switch(t.sliderType){case"red":return r.r/2.55;case"green":return r.g/2.55;case"blue":return r.b/2.55;case"alpha":return 100*i.a;case"kelvin":var e=t.minTemperature,u=t.maxTemperature-e,o=(n.kelvin-e)/u*100;return Math.max(0,Math.min(o,100));case"hue":return i.h/=3.6;case"saturation":return i.s;case"value":default:return i.v}}(t,n)/100*u;return l&&(c=-1*c+u+2*o),{x:l?s:c,y:l?c:s}}function nt(t){var n=t.width/2;return{width:t.width,radius:n-t.borderWidth,cx:n,cy:n}}function it(t,n,i){var r=t.wheelAngle,e=t.wheelDirection;return((n=!i&&"clockwise"===e||i&&"anticlockwise"===e?(i?180:360)-(r-n):r+n)%360+360)%360}function rt(t,n,i){var r=nt(t),e=r.cx,u=r.cy,o=t.width/2-t.padding-t.handleRadius-t.borderWidth;n=e-n,i=u-i;var l=it(t,Math.atan2(-i,-n)*(180/Math.PI)),s=Math.min(Math.sqrt(n*n+i*i),o);return{h:Math.round(l),s:Math.round(100/o*s)}}function et(t){var n=t.width,i=t.boxHeight;return{width:n,height:null!=i?i:n,radius:t.padding+t.handleRadius}}function ut(t,n,i){var r=et(t),e=r.width,u=r.height,o=r.radius,l=(n-o)/(e-2*o)*100,s=(i-o)/(u-2*o)*100;return{s:Math.max(0,Math.min(l,100)),v:Math.max(0,Math.min(100-s,100))}}function ot(t){X=X||document.getElementsByTagName("base");var n=window.navigator.userAgent,i=/^((?!chrome|android).)*safari/i.test(n),r=/iPhone|iPod|iPad/i.test(n),e=window.location;return(i||r)&&0<X.length?e.protocol+"//"+e.host+e.pathname+e.search+t:t}function lt(t,n,i,r){for(var e=0;e<r.length;e++){var u=r[e].x-n,o=r[e].y-i;if(Math.sqrt(u*u+o*o)<t.handleRadius)return e}return null}var st=["mousemove","touchmove","mouseup","touchend"],ct=function(n){function t(t){n.call(this,t),this.uid=(Math.random()+1).toString(36).substring(5)}return n&&(t.__proto__=n),((t.prototype=Object.create(n&&n.prototype)).constructor=t).prototype.render=function(t){var n=this.handleEvent.bind(this),i={onMouseDown:n,ontouchstart:n},r="horizontal"===t.layoutDirection,e=null===t.margin?t.sliderMargin:t.margin,u={overflow:"visible",display:r?"inline-block":"block"};return 0<t.index&&(u[r?"marginLeft":"marginTop"]=e),d(I,null,t.children(this.uid,i,u))},t.prototype.handleEvent=function(t){var n=this,i=this.props.onInput,r=this.base.getBoundingClientRect();t.preventDefault();var e=t.touches?t.changedTouches[0]:t,u=e.clientX-r.left,o=e.clientY-r.top;switch(t.type){case"mousedown":case"touchstart":st.forEach(function(t){document.addEventListener(t,n,{passive:!1})}),i(u,o,0);break;case"mousemove":case"touchmove":i(u,o,1);break;case"mouseup":case"touchend":i(u,o,2),st.forEach(function(t){document.removeEventListener(t,n)})}},t}(O);function ft(t){var n=t.r,i=t.url;return d("svg",{className:"IroHandle IroHandle--"+t.index+" "+(t.isActive?"IroHandle--isActive":""),x:t.x,y:t.y,style:{overflow:"visible"}},i&&d("use",Object.assign({xlinkHref:ot(i)},t.props)),!i&&d("circle",{r:n,fill:"none","stroke-width":2,stroke:"#000"}),!i&&d("circle",{r:n-2,fill:t.fill,"stroke-width":2,stroke:"#fff"}))}function ht(e){var t=e.activeIndex,u=void 0!==t&&t<e.colors.length?e.colors[t]:e.color,n=Z(e),r=n.width,o=n.height,l=n.radius,s=tt(e,u),c=function(t,n){var i=n.hsv,r=n.rgb;switch(t.sliderType){case"red":return[[0,"rgb(0,"+r.g+","+r.b+")"],[100,"rgb(255,"+r.g+","+r.b+")"]];case"green":return[[0,"rgb("+r.r+",0,"+r.b+")"],[100,"rgb("+r.r+",255,"+r.b+")"]];case"blue":return[[0,"rgb("+r.r+","+r.g+",0)"],[100,"rgb("+r.r+","+r.g+",255)"]];case"alpha":return[[0,"rgba("+r.r+","+r.g+","+r.b+",0)"],[100,"rgb("+r.r+","+r.g+","+r.b+")"]];case"kelvin":for(var e=[],u=t.minTemperature,o=t.maxTemperature,l=o-u,s=u,c=0;s<o;s+=l/8,c+=1){var f=Y.kelvinToRgb(s),h=f.r,a=f.g,v=f.b;e.push([12.5*c,"rgb("+h+","+a+","+v+")"])}return e;case"hue":return[[0,"#f00"],[16.666,"#ff0"],[33.333,"#0f0"],[50,"#0ff"],[66.666,"#00f"],[83.333,"#f0f"],[100,"#f00"]];case"saturation":var d=Y.hsvToHsl({h:i.h,s:0,v:i.v}),g=Y.hsvToHsl({h:i.h,s:100,v:i.v});return[[0,"hsl("+d.h+","+d.s+"%,"+d.l+"%)"],[100,"hsl("+g.h+","+g.s+"%,"+g.l+"%)"]];case"value":default:var p=Y.hsvToHsl({h:i.h,s:i.s,v:100});return[[0,"#000"],[100,"hsl("+p.h+","+p.s+"%,"+p.l+"%)"]]}}(e,u),f="alpha"===e.sliderType;return d(ct,Object.assign({},e,{onInput:function(t,n,i){var r=function(t,n,i){var r,e=Z(t),u=e.handleRange,o=e.handleStart;r="horizontal"===t.layoutDirection?-1*i+u+o:n-o,r=Math.max(Math.min(r,u),0);var l=Math.round(100/u*r);switch(t.sliderType){case"kelvin":var s=t.minTemperature;return s+l/100*(t.maxTemperature-s);case"alpha":return l/100;case"hue":return 3.6*l;case"red":case"blue":case"green":return 2.55*l;default:return l}}(e,t,n);e.parent.inputActive=!0,u[e.sliderType]=r,e.onInput(i,e.id)}}),function(t,n,i){return d("svg",Object.assign({},n,{className:"IroSlider",width:r,height:o,style:i}),d("defs",null,d("linearGradient",Object.assign({id:"g"+t},function(t){var n="horizontal"===t.layoutDirection;return{x1:"0%",y1:n?"100%":"0%",x2:n?"0%":"100%",y2:"0%"}}(e)),c.map(function(t){return d("stop",{offset:t[0]+"%","stop-color":t[1]})})),f&&d("pattern",{id:"b"+t,width:"8",height:"8",patternUnits:"userSpaceOnUse"},d("rect",{x:"0",y:"0",width:"8",height:"8",fill:"#fff"}),d("rect",{x:"0",y:"0",width:"4",height:"4",fill:"#ccc"}),d("rect",{x:"4",y:"4",width:"4",height:"4",fill:"#ccc"})),f&&d("pattern",{id:"f"+t,width:"100%",height:"100%"},d("rect",{x:"0",y:"0",width:"100%",height:"100%",fill:"url("+ot("#b"+t)+")"}),d("rect",{x:"0",y:"0",width:"100%",height:"100%",fill:"url("+ot("#g"+t)+")"}))),d("rect",{className:"IroSliderBg",rx:l,ry:l,x:e.borderWidth/2,y:e.borderWidth/2,width:r-e.borderWidth,height:o-e.borderWidth,"stroke-width":e.borderWidth,stroke:e.borderColor,fill:"url("+ot((f?"#f":"#g")+t)+")"}),d(ft,{isActive:!0,index:u.index,r:e.handleRadius,url:e.handleSvg,props:e.handleProps,x:s.x,y:s.y}))})}function at(e){var t=et(e),r=t.width,u=t.height,o=t.radius,l=e.colors,s=e.parent,n=e.activeIndex,c=void 0!==n&&n<e.colors.length?e.colors[n]:e.color,f=function(t,n){return[[[0,"#fff"],[100,"hsl("+n.hue+",100%,50%)"]],[[0,"rgba(0,0,0,0)"],[100,"#000"]]]}(0,c),h=l.map(function(t){return function(t,n){var i=et(t),r=i.width,e=i.height,u=i.radius,o=n.hsv,l=u,s=r-2*u,c=e-2*u;return{x:l+o.s/100*s,y:l+(c-o.v/100*c)}}(e,t)});return d(ct,Object.assign({},e,{onInput:function(t,n,i){if(0===i){var r=lt(e,t,n,h);null!==r?s.setActiveColor(r):(s.inputActive=!0,c.hsv=ut(e,t,n),e.onInput(i,e.id))}else 1===i&&(s.inputActive=!0,c.hsv=ut(e,t,n));e.onInput(i,e.id)}}),function(t,n,i){return d("svg",Object.assign({},n,{className:"IroBox",width:r,height:u,style:i}),d("defs",null,d("linearGradient",{id:"s"+t,x1:"0%",y1:"0%",x2:"100%",y2:"0%"},f[0].map(function(t){return d("stop",{offset:t[0]+"%","stop-color":t[1]})})),d("linearGradient",{id:"l"+t,x1:"0%",y1:"0%",x2:"0%",y2:"100%"},f[1].map(function(t){return d("stop",{offset:t[0]+"%","stop-color":t[1]})})),d("pattern",{id:"f"+t,width:"100%",height:"100%"},d("rect",{x:"0",y:"0",width:"100%",height:"100%",fill:"url("+ot("#s"+t)+")"}),d("rect",{x:"0",y:"0",width:"100%",height:"100%",fill:"url("+ot("#l"+t)+")"}))),d("rect",{className:"IroBoxBg",rx:o,ry:o,x:e.borderWidth/2,y:e.borderWidth/2,width:r-e.borderWidth,height:u-e.borderWidth,"stroke-width":e.borderWidth,stroke:e.borderColor,fill:"url("+ot("#f"+t)+")"}),l.filter(function(t){return t!==c}).map(function(t){return d(ft,{isActive:!1,index:t.index,fill:t.hslString,r:e.handleRadius,url:e.handleSvg,props:e.handleProps,x:h[t.index].x,y:h[t.index].y})}),d(ft,{isActive:!0,index:c.index,fill:c.hslString,r:e.handleRadius,url:e.handleSvg,props:e.handleProps,x:h[c.index].x,y:h[c.index].y}))})}ft.defaultProps={fill:"none",x:0,y:0,r:8,url:null,props:{x:0,y:0}},ht.defaultProps=Object.assign({},{sliderShape:"bar",sliderType:"value",minTemperature:2200,maxTemperature:11e3});var vt=Array.apply(null,{length:360}).map(function(t,n){return n});function dt(e){var t=nt(e),r=t.width,u=t.radius,o=t.cx,l=t.cy,s=e.colors,c=e.borderWidth,f=e.parent,h=e.color,a=h.hsv,v=s.map(function(t){return function(t,n){var i=n.hsv,r=nt(t),e=r.cx,u=r.cy,o=t.width/2-t.padding-t.handleRadius-t.borderWidth,l=(180+it(t,i.h,!0))*(Math.PI/180),s=i.s/100*o,c="clockwise"===t.wheelDirection?-1:1;return{x:e+s*Math.cos(l)*c,y:u+s*Math.sin(l)*c}}(e,t)});return d(ct,Object.assign({},e,{onInput:function(t,n,i){if(0===i){var r=lt(e,t,n,v);null!==r?f.setActiveColor(r):(f.inputActive=!0,h.hsv=rt(e,t,n),e.onInput(i,e.id))}else 1===i&&(f.inputActive=!0,h.hsv=rt(e,t,n));e.onInput(i,e.id)}}),function(t,n,i){return d("svg",Object.assign({},n,{className:"IroWheel",width:r,height:r,style:i}),d("defs",null,d("radialGradient",{id:t},d("stop",{offset:"0%","stop-color":"#fff"}),d("stop",{offset:"100%","stop-color":"#fff","stop-opacity":"0"}))),d("g",{className:"IroWheelHue","stroke-width":u,fill:"none"},vt.map(function(t){return d("path",{key:t,d:function(t,n,i,r,e){var u=e-r<=180?0:1;return r*=Math.PI/180,e*=Math.PI/180,"M "+(t+i*Math.cos(e))+" "+(n+i*Math.sin(e))+" A "+i+" "+i+" 0 "+u+" 0 "+(t+i*Math.cos(r))+" "+(n+i*Math.sin(r))}(o,l,u/2,t,t+1.5),stroke:"hsl("+it(e,t)+", 100%, 50%)"})})),d("circle",{className:"IroWheelSaturation",cx:o,cy:l,r:u,fill:"url("+ot("#"+t)+")"}),e.wheelLightness&&d("circle",{className:"IroWheelLightness",cx:o,cy:l,r:u,fill:"#000",opacity:1-a.v/100}),d("circle",{className:"IroWheelBorder",cx:o,cy:l,r:u,fill:"none",stroke:e.borderColor,"stroke-width":c}),s.filter(function(t){return t!==h}).map(function(t){return d(ft,{isActive:!1,index:t.index,fill:t.hslString,r:e.handleRadius,url:e.handleSvg,props:e.handleProps,x:v[t.index].x,y:v[t.index].y})}),d(ft,{isActive:!0,index:h.index,fill:h.hslString,r:e.handleRadius,url:e.handleSvg,props:e.handleProps,x:v[h.index].x,y:v[h.index].y}))})}var gt=function(i){function t(t){var n=this;i.call(this,t),this.colors=[],this.inputActive=!1,this.events={},this.activeEvents={},this.deferredEvents={},this.id=t.id,(0<t.colors.length?t.colors:[t.color]).forEach(function(t){return n.addColor(t)}),this.setActiveColor(0),this.state=Object.assign({},t,{color:this.color,colors:this.colors,layout:t.layout})}return i&&(t.__proto__=i),((t.prototype=Object.create(i&&i.prototype)).constructor=t).prototype.addColor=function(t,n){void 0===n&&(n=this.colors.length);var i=new Y(t,this.onColorChange.bind(this));this.colors.splice(n,0,i),this.colors.forEach(function(t,n){return t.index=n}),this.state&&this.setState({colors:this.colors}),this.deferredEmit("color:init",i)},t.prototype.removeColor=function(t){var n=this.colors.splice(t,1)[0];n.unbind(),this.colors.forEach(function(t,n){return t.index=n}),this.state&&this.setState({colors:this.colors}),n.index===this.color.index&&this.setActiveColor(0),this.emit("color:remove",n)},t.prototype.setActiveColor=function(t){this.color=this.colors[t],this.state&&this.setState({color:this.color}),this.emit("color:setActive",this.color)},t.prototype.setColors=function(t){var n=this;this.colors.forEach(function(t){return t.unbind()}),this.colors=[],t.forEach(function(t){return n.addColor(t)}),this.setActiveColor(0),this.emit("color:setAll",this.colors)},t.prototype.on=function(t,n){var i=this,r=this.events;(Array.isArray(t)?t:[t]).forEach(function(t){(r[t]||(r[t]=[])).push(n),i.deferredEvents[t]&&(i.deferredEvents[t].forEach(function(t){n.apply(null,t)}),i.deferredEvents[t]=[])})},t.prototype.off=function(t,i){var r=this;(Array.isArray(t)?t:[t]).forEach(function(t){var n=r.events[t];n&&n.splice(n.indexOf(i),1)})},t.prototype.emit=function(t){for(var n=this,i=[],r=arguments.length-1;0<r--;)i[r]=arguments[r+1];var e=this.activeEvents;!!e.hasOwnProperty(t)&&e[t]||(e[t]=!0,(this.events[t]||[]).forEach(function(t){return t.apply(n,i)}),e[t]=!1)},t.prototype.deferredEmit=function(t){for(var n,i=[],r=arguments.length-1;0<r--;)i[r]=arguments[r+1];var e=this.deferredEvents;(n=this).emit.apply(n,[t].concat(i)),(e[t]||(e[t]=[])).push(i)},t.prototype.setOptions=function(t){this.setState(Object.assign({},this.state,t))},t.prototype.resize=function(t){this.setOptions({width:t})},t.prototype.reset=function(){this.colors.forEach(function(t){return t.reset()}),this.setState({colors:this.colors})},t.prototype.onMount=function(t){this.el=t,this.deferredEmit("mount",this)},t.prototype.onColorChange=function(t,n){this.setState({color:this.color}),this.inputActive&&(this.inputActive=!1,this.emit("input:change",t,n)),this.emit("color:change",t,n)},t.prototype.emitInputEvent=function(t,n){0===t?this.emit("input:start",this.color,n):1===t?this.emit("input:move",this.color,n):2===t&&this.emit("input:end",this.color,n)},t.prototype.render=function(t,e){var u=this,n=e.layout;return Array.isArray(n)||(n=[{component:dt},{component:ht}],e.transparency&&n.push({component:ht,options:{sliderType:"alpha"}})),d("div",{class:"IroColorPicker",id:e.id,style:{display:e.display}},n.map(function(t,n){var i=t.component,r=t.options;return d(i,Object.assign({},e,r,{ref:void 0,onInput:u.emitInputEvent.bind(u),parent:u,index:n}))}))},t}(O);gt.defaultProps=Object.assign({},{width:300,height:300,color:"#fff",colors:[],padding:6,layoutDirection:"vertical",borderColor:"#fff",borderWidth:0,handleRadius:8,handleSvg:null,handleProps:{x:0,y:0},wheelLightness:!0,wheelAngle:0,wheelDirection:"anticlockwise",sliderSize:null,sliderMargin:12,boxHeight:null},{colors:[],display:"block",id:null,layout:"default",margin:null});var pt,yt,bt,wt,xt=(kt.prototype=(pt=gt).prototype,Object.assign(kt,pt),kt.A=pt,kt);function kt(n,t){var i,r=document.createElement("div");function e(){var t=n instanceof Element?n:document.querySelector(n);t.appendChild(i.base),i.onMount(t)}return function(t,n,i){var r,e,u;k.i&&k.i(t,n),e=(r=i===o)?null:i&&i.n||n.n,t=d(I,null,[t]),u=[],x(n,r?n.n=t:(i||n).n=t,e||m,m,void 0!==n.ownerSVGElement,i&&!r?[i]:e?null:M.slice.call(n.childNodes),u,!1,i||m,r),v(u,t)}(d(pt,Object.assign({},{ref:function(t){return i=t}},t)),r),"loading"!==document.readyState?e():document.addEventListener("DOMContentLoaded",e),i}return(bt=yt=yt||{}).version="5.3.1",bt.Color=Y,bt.ColorPicker=xt,(wt=bt.ui||(bt.ui={})).h=d,wt.ComponentBase=ct,wt.Handle=ft,wt.Slider=ht,wt.Wheel=dt,wt.Box=at,yt});
|
|
</script>)=====";
|
|
|
|
|
|
// Autogenerated from wled00/data/rangetouch.js, do not edit!!
|
|
const char PAGE_rangetouchJs[] PROGMEM = R"=====(<script>// ==========================================================================
|
|
// rangetouch.js v2.0.1
|
|
// Making <input type="range"> work on touch devices
|
|
// https://github.com/sampotts/rangetouch
|
|
// License: The MIT License (MIT)
|
|
// ==========================================================================
|
|
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define("RangeTouch",t):(e=e||self).RangeTouch=t()}(this,(function(){"use strict";function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function t(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function n(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function r(e){for(var r=1;r<arguments.length;r++){var i=null!=arguments[r]?arguments[r]:{};r%2?n(Object(i),!0).forEach((function(n){t(e,n,i[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):n(Object(i)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(i,t))}))}return e}var i={addCSS:!0,thumbWidth:15,watch:!0};function u(e,t){return function(){return Array.from(document.querySelectorAll(t)).includes(this)}.call(e,t)}var o=function(e){return null!=e?e.constructor:null},c=function(e,t){return!!(e&&t&&e instanceof t)},l=function(e){return null==e},a=function(e){return o(e)===Object},s=function(e){return o(e)===String},f=function(e){return Array.isArray(e)},h=function(e){return c(e,NodeList)},d=s,y=f,b=h,m=function(e){return c(e,Element)},g=function(e){return c(e,Event)},p=function(e){return l(e)||(s(e)||f(e)||h(e))&&!e.length||a(e)&&!Object.keys(e).length};function v(e,t){if(1>t){var n=function(e){var t="".concat(e).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);return t?Math.max(0,(t[1]?t[1].length:0)-(t[2]?+t[2]:0)):0}(t);return parseFloat(e.toFixed(n))}return Math.round(e/t)*t}return function(){function t(e,n){(function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")})(this,t),m(e)?this.element=e:d(e)&&(this.element=document.querySelector(e)),m(this.element)&&p(this.element.rangeTouch)&&(this.config=r({},i,{},n),this.init())}return n=t,c=[{key:"setup",value:function(e){var n=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{},o=null;if(p(e)||d(e)?o=Array.from(document.querySelectorAll(d(e)?e:'input[type="range"]')):m(e)?o=[e]:b(e)?o=Array.from(e):y(e)&&(o=e.filter(m)),p(o))return null;var c=r({},i,{},n);if(d(e)&&c.watch){var l=new MutationObserver((function(n){Array.from(n).forEach((function(n){Array.from(n.addedNodes).forEach((function(n){m(n)&&u(n,e)&&new t(n,c)}))}))}));l.observe(document.body,{childList:!0,subtree:!0})}return o.map((function(e){return new t(e,n)}))}},{key:"enabled",get:function(){return"ontouchstart"in document.documentElement}}],(o=[{key:"init",value:function(){t.enabled&&(this.config.addCSS&&(this.element.style.userSelect="none",this.element.style.webKitUserSelect="none",this.element.style.touchAction="manipulation"),this.listeners(!0),this.element.rangeTouch=this)}},{key:"destroy",value:function(){t.enabled&&(this.config.addCSS&&(this.element.style.userSelect="",this.element.style.webKitUserSelect="",this.element.style.touchAction=""),this.listeners(!1),this.element.rangeTouch=null)}},{key:"listeners",value:function(e){var t=this,n=e?"addEventListener":"removeEventListener";["touchstart","touchmove","touchend"].forEach((function(e){t.element[n](e,(function(e){return t.set(e)}),!1)}))}},{key:"get",value:function(e){if(!t.enabled||!g(e))return null;var n,r=e.target,i=e.changedTouches[0],u=parseFloat(r.getAttribute("min"))||0,o=parseFloat(r.getAttribute("max"))||100,c=parseFloat(r.getAttribute("step"))||1,l=r.getBoundingClientRect(),a=100/l.width*(this.config.thumbWidth/2)/100;return 0>(n=100/l.width*(i.clientX-l.left))?n=0:100<n&&(n=100),50>n?n-=(100-2*n)*a:50<n&&(n+=2*(n-50)*a),u+v(n/100*(o-u),c)}},{key:"set",value:function(e){t.enabled&&g(e)&&!e.target.disabled&&(e.preventDefault(),e.target.value=this.get(e),function(e,t){if(e&&t){var n=new Event(t,{bubbles:!0});e.dispatchEvent(n)}}(e.target,"touchend"===e.type?"change":"input"))}}])&&e(n.prototype,o),c&&e(n,c),t;var n,o,c}()}));
|
|
//# sourceMappingURL=rangetouch.js.map
|
|
</script>)=====";
|
|
|
|
|
|
// Autogenerated from wled00/data/style.css, do not edit!!
|
|
const char PAGE_settingsCss[] PROGMEM = R"=====(<style>body{font-family:Verdana,sans-serif;text-align:center;background:#222;color:#fff;line-height:200%;margin:0}hr{border-color:#666}button{background:#333;color:#fff;font-family:Verdana,sans-serif;border:.3ch solid #333;display:inline-block;font-size:20px;margin:8px;margin-top:12px}.helpB{text-align:left;position:absolute;width:60px}input{background:#333;color:#fff;font-family:Verdana,sans-serif;border:.5ch solid #333}input[type=number]{width:4em}select{background:#333;color:#fff;font-family:Verdana,sans-serif;border:.5ch solid #333}td{padding:2px}.d5{width:4.5em!important}</style>)=====";
|
|
|
|
|
|
// Autogenerated from wled00/data/settings.htm, do not edit!!
|
|
const char PAGE_settings[] PROGMEM = R"=====(<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>WLED Settings
|
|
</title><style>
|
|
body{text-align:center;background:#222;height:100px;margin:0}html{--h:11.55vh}button{background:#333;color:#fff;font-family:Verdana,Helvetica,sans-serif;border:.3ch solid #333;display:inline-block;font-size:8vmin;height:var(--h);width:95%%;margin-top:2.4vh}
|
|
</style><script>
|
|
function BB(){window.frameElement&&(document.getElementById("b").style.display="none",document.documentElement.style.setProperty("--h","13.86vh"))}
|
|
</script></head><body onload="BB()"><form action="/"><button type="submit"
|
|
id="b">Back</button></form><form action="/settings/wifi"><button type="submit">
|
|
WiFi Setup</button></form><form action="/settings/leds"><button type="submit">
|
|
LED Preferences</button></form><form action="/settings/ui"><button
|
|
type="submit">User Interface</button></form>%DMXMENU%<form action="/settings/sync">
|
|
<button type="submit">Sync Interfaces</button></form><form
|
|
action="/settings/time"><button type="submit">Time & Macros</button></form><form
|
|
action="/settings/sec"><button type="submit">Security & Updates</button></form>
|
|
</body></html>)=====";
|
|
|
|
|
|
// Autogenerated from wled00/data/settings_wifi.htm, do not edit!!
|
|
const char PAGE_settings_wifi[] PROGMEM = R"=====(<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport"
|
|
content="width=500"><title>WiFi Settings</title><script>
|
|
function H(){window.open("https://github.com/Aircoookie/WLED/wiki/Settings#wifi-settings")}function B(){window.open("/settings","_self")}function GetV() {var d=document;
|
|
%CSS%%SCSS%</head><body onload="GetV()">
|
|
<form id="form_s" name="Sf" method="post"><div class="helpB"><button
|
|
type="button" onclick="H()">?</button></div><button type="button" onclick="B()">
|
|
Back</button><button type="submit">Save & Connect</button><hr><h2>WiFi setup
|
|
</h2><h3>Connect to existing network</h3>
|
|
Network name (SSID, empty to not connect):<br><input name="CS" maxlength="32">
|
|
<br>Network password:<br><input type="password" name="CP" maxlength="63"><br>
|
|
Static IP (leave at 0.0.0.0 for DHCP):<br><input name="I0" type="number"
|
|
min="0" max="255" required> . <input name="I1" type="number" min="0" max="255"
|
|
required> . <input name="I2" type="number" min="0" max="255" required> . <input
|
|
name="I3" type="number" min="0" max="255" required><br>Static gateway:<br><input
|
|
name="G0" type="number" min="0" max="255" required> . <input name="G1"
|
|
type="number" min="0" max="255" required> . <input name="G2" type="number"
|
|
min="0" max="255" required> . <input name="G3" type="number" min="0" max="255"
|
|
required><br>Static subnet mask:<br><input name="S0" type="number" min="0"
|
|
max="255" required> . <input name="S1" type="number" min="0" max="255" required>
|
|
. <input name="S2" type="number" min="0" max="255" required> . <input
|
|
name="S3" type="number" min="0" max="255" required><br>
|
|
mDNS address (leave empty for no mDNS):<br>http:// <input name="CM"
|
|
maxlength="32"> .local<br>Client IP: <span class="sip">Not connected</span><br>
|
|
<h3>Configure Access Point</h3>AP SSID (leave empty for no AP):<br><input
|
|
name="AS" maxlength="32"><br>Hide AP name: <input type="checkbox" name="AH"><br>
|
|
AP password (leave empty for open):<br><input type="password" name="AP"
|
|
maxlength="63" pattern="(.{8,63})|()" title="Empty or min. 8 characters"><br>
|
|
Access Point WiFi channel: <input name="AC" type="number" min="1" max="13"
|
|
required><br>AP opens: <select name="AB"><option value="0">
|
|
No connection after boot</option><option value="1">Disconnected</option><option
|
|
value="2">Always</option><option value="3">Never (not recommended)</option>
|
|
</select><br>AP IP: <span class="sip">Not active</span><br><h3>Experimental</h3>
|
|
Disable WiFi sleep: <input type="checkbox" name="WS"><br><i>
|
|
Can help with connectivity issues.<br>
|
|
Do not enable if WiFi is working correctly, increases power consumption.</i><hr>
|
|
<button type="button" onclick="B()">Back</button><button type="submit">
|
|
Save & Connect</button></form></body></html>)=====";
|
|
|
|
|
|
// Autogenerated from wled00/data/settings_leds.htm, do not edit!!
|
|
const char PAGE_settings_leds[] PROGMEM = R"=====(<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport"
|
|
content="width=500"><title>LED Settings</title><script>
|
|
var d=document,laprev=55;function H(){window.open("https://github.com/Aircoookie/WLED/wiki/Settings#led-settings")}function B(){window.open("/settings","_self")}function S(){GetV(),setABL()}function enABL(){var e=d.getElementById("able").checked;d.Sf.LA.value=e?laprev:0,d.getElementById("abl").style.display=e?"inline":"none",d.getElementById("psu2").style.display=e?"inline":"none",d.Sf.LA.value>0&&setABL()}function enLA(){var e=d.Sf.LAsel.value;d.Sf.LA.value=e,d.getElementById("LAdis").style.display=50==e?"inline":"none",UI()}function setABL(){switch(d.getElementById("able").checked=!0,d.Sf.LAsel.value=50,parseInt(d.Sf.LA.value)){case 0:d.getElementById("able").checked=!1,enABL();break;case 30:d.Sf.LAsel.value=30;break;case 35:d.Sf.LAsel.value=35;break;case 55:d.Sf.LAsel.value=55;break;case 255:d.Sf.LAsel.value=255;break;default:d.getElementById("LAdis").style.display="inline"}UI()}function UI(){var e=d.querySelectorAll(".wc"),l=e.length;for(i=0;i<l;i++)e[i].style.display=d.getElementById("rgbw").checked?"inline":"none";d.getElementById("ledwarning").style.display=d.Sf.LC.value>1e3?"inline":"none",d.getElementById("ampwarning").style.display=d.Sf.MA.value>7200?"inline":"none",255==d.Sf.LA.value?laprev=12:d.Sf.LA.value>0&&(laprev=d.Sf.LA.value);var n=Math.ceil((100+d.Sf.LC.value*laprev)/500)/2;n=n>5?Math.ceil(n):n;var t="",a=30==d.Sf.LAsel.value,s=255==d.Sf.LAsel.value;n<1.02&&!a&&!s?t="ESP 5V pin with 1A USB supply":(t+=a?"12V ":s?"WS2815 12V ":"5V ",t+=n,t+="A supply connected to LEDs");var u=Math.ceil((100+d.Sf.LC.value*laprev)/1500)/2,c="(for most effects, ~";c+=u=u>5?Math.ceil(u):u,c+="A is enough)<br>",d.getElementById("psu").innerHTML=t,d.getElementById("psu2").innerHTML=s?"":c}function GetV() {var d=document;
|
|
%CSS%%SCSS%</head><body onload="S()"><form
|
|
id="form_s" name="Sf" method="post"><div class="helpB"><button type="button"
|
|
onclick="H()">?</button></div><button type="button" onclick="B()">Back</button>
|
|
<button type="submit">Save</button><hr><h2>LED setup</h2>LED count: <input
|
|
name="LC" type="number" min="1" max="1500" oninput="UI()" required><br><div
|
|
id="ledwarning" style="color:orange;display:none">
|
|
⚠ You might run into stability or lag issues.<br>
|
|
Use less than 1000 LEDs per ESP for the best experience!<br></div><i>
|
|
Recommended power supply for brightest white:</i><br><b><span id="psu">?</span>
|
|
</b><br><span id="psu2"><br></span><br>Enable automatic brightness limiter:
|
|
<input type="checkbox" name="ABen" onchange="enABL()" id="able"><br><div
|
|
id="abl">Maximum Current: <input name="MA" type="number" min="250" max="65000"
|
|
oninput="UI()" required> mA<br><div id="ampwarning"
|
|
style="color:orange;display:none">
|
|
⚠ Your power supply provides high current.<br>
|
|
To improve the safety of your setup,<br>please use thick cables,<br>
|
|
multiple power injection points and a fuse!<br></div><i>
|
|
Automatically limits brightness to stay close to the limit.<br>
|
|
Keep at <1A if powering LEDs directly from the ESP 5V pin!<br>
|
|
If you are using an external power supply, enter its rating.<br>
|
|
(Current estimated usage: <span class="pow">unknown</span>)</i><br><br>
|
|
LED voltage (Max. current for a single LED):<br><select name="LAsel"
|
|
onchange="enLA()"><option value="55" selected="selected">5V default (55mA)
|
|
</option><option value="35">5V efficient (35mA)</option><option value="30">
|
|
12V (30mA)</option><option value="255">WS2815 (12mA)</option><option value="50">
|
|
Custom</option></select><br><span id="LAdis" style="display:none">
|
|
Custom max. current per LED: <input name="LA" type="number" min="0" max="255"
|
|
id="la" oninput="UI()" required> mA<br></span><i>
|
|
Keep at default if you are unsure about your type of LEDs.</i><br></div><br>
|
|
LEDs are 4-channel type (RGBW): <input type="checkbox" name="EW"
|
|
onchange="UI()" id="rgbw"><br><span class="wc">
|
|
Auto-calculate white channel from RGB:<br><select name="AW"><option value="0">
|
|
None</option><option value="1">Brighter</option><option value="2">Accurate
|
|
</option><option value="3">Dual</option><option value="4">Legacy</option>
|
|
</select><br></span>Color order: <select name="CO"><option value="0">GRB
|
|
</option><option value="1">RGB</option><option value="2">BRG</option><option
|
|
value="3">RBG</option><option value="4">BGR</option><option value="5">GBR
|
|
</option></select><h3>Defaults</h3>Turn LEDs on after power up/reset: <input
|
|
type="checkbox" name="BO"><br>Default brightness: <input name="CA"
|
|
type="number" min="0" max="255" required> (0-255)<br><br>Apply preset <input
|
|
name="BP" type="number" min="0" max="250" required> at boot (0 uses defaults)
|
|
<br>- <i>or</i> -<br>Set current preset cycle setting as boot default: <input
|
|
type="checkbox" name="PC"><br><br>Use Gamma correction for color: <input
|
|
type="checkbox" name="GC"> (strongly recommended)<br>
|
|
Use Gamma correction for brightness: <input type="checkbox" name="GB">
|
|
(not recommended)<br><br>Brightness factor: <input name="BF" type="number"
|
|
min="1" max="255" required> %<h3>Transitions</h3>Crossfade: <input
|
|
type="checkbox" name="TF"><br>Transition Time: <input name="TD" maxlength="5"
|
|
size="2"> ms<br>Enable Palette transitions: <input type="checkbox" name="PF">
|
|
<h3>Timed light</h3>Default Duration: <input name="TL" type="number" min="1"
|
|
max="255" required> min<br>Default Target brightness: <input name="TB"
|
|
type="number" min="0" max="255" required><br>Mode: <select name="TW"><option
|
|
value="0">Wait and set</option><option value="1">Fade</option><option value="2">
|
|
Fade Color</option><option value="3">Sunrise</option></select><h3>Advanced</h3>
|
|
Palette blending: <select name="PB"><option value="0">Linear (wrap if moving)
|
|
</option><option value="1">Linear (always wrap)</option><option value="2">
|
|
Linear (never wrap)</option><option value="3">None (not recommended)</option>
|
|
</select><br>Reverse LED order (rotate 180): <input type="checkbox" name="RV">
|
|
<br>Skip first LED: <input type="checkbox" name="SL"><hr><button type="button"
|
|
onclick="B()">Back</button><button type="submit">Save</button></form></body>
|
|
</html>)=====";
|
|
|
|
|
|
#ifdef WLED_ENABLE_DMX
|
|
|
|
// Autogenerated from wled00/data/settings_dmx.htm, do not edit!!
|
|
const char PAGE_settings_dmx[] PROGMEM = R"=====(<!DOCTYPE html><html><head><meta name="viewport" content="width=500"><meta
|
|
charset="utf-8"><title>DMX Settings</title><script>
|
|
function GCH(n){for(d=document,d.getElementById("dmxchannels").innerHTML+="",i=0;i<n;i++)d.getElementById("dmxchannels").innerHTML+="<span id=CH"+(i+1)+"s >Channel "+(i+1)+": <select name=CH"+(i+1)+' id="CH'+(i+1)+'"><option value=0>Set to 0</option><option value=1>Red</option><option value=2>Green</option><option value=3>Blue</option><option value=4>White</option><option value=5>Shutter (Brightness)</option><option value=6>Set to 255</option></select></span><br />\n'}function mMap(){for(d=document,numCh=document.Sf.CN.value,numGap=document.Sf.CG.value,parseInt(numCh)>parseInt(numGap)?d.getElementById("gapwarning").style.display="block":d.getElementById("gapwarning").style.display="none",i=0;i<15;i++)i>=numCh?(d.getElementById("CH"+(i+1)+"s").style.opacity="0.5",d.getElementById("CH"+(i+1)).disabled=!0):(d.getElementById("CH"+(i+1)+"s").style.opacity="1",d.getElementById("CH"+(i+1)).disabled=!1)}function S(){GCH(15),GetV(),mMap()}function H(){window.open("https://github.com/Aircoookie/WLED/wiki/DMX")}function B(){window.history.back()}function GetV() {var d=document;
|
|
%CSS%%SCSS%</head><body onload="S()"><form
|
|
id="form_s" name="Sf" method="post"><div class="helpB"><button type="button"
|
|
onclick="H()">?</button></div><button type="button" onclick="B()">Back</button>
|
|
<button type="submit">Save</button><hr><h2>
|
|
Imma firin ma lazer (if it has DMX support)</h2>Proxy Universe <input name="PU"
|
|
type="number" min="0" max="63999" required> from E1.31 to DMX (0=disabled)<br>
|
|
<i>This will disable the LED data output to DMX configurable below</i><br><br>
|
|
<i>Number of fixtures is taken from LED config page</i><br>
|
|
Channels per fixture (15 max): <input type="number" min="1" max="15" name="CN"
|
|
maxlength="2" onchange="mMap()"><br>Start channel: <input type="number" min="1"
|
|
max="512" name="CS" maxlength="2"><br>Spacing between start channels: <input
|
|
type="number" min="1" max="512" name="CG" maxlength="2" onchange="mMap()"> [ <a
|
|
href="javascript:alert('if set to 10, first fixture will start at 10,\nsecond will start at 20 etc.\nRegardless of the channel count.\nMakes memorizing channel numbers easier.');">
|
|
info</a> ]<br><div id="gapwarning" style="color:orange;display:none">
|
|
WARNING: Channel gap is lower than channels per fixture.<br>
|
|
This will cause overlap.</div><button type="button"
|
|
onclick='location.href="/dmxmap"'>DMX Map</button><br>DMX fixtures start LED:
|
|
<input type="number" min="0" max="1500" name="SL"><h3>Channel functions</h3><div
|
|
id="dmxchannels"></div><hr><button type="button" onclick="B()">Back</button>
|
|
<button type="submit">Save</button></form></body></html>)=====";
|
|
|
|
|
|
#else
|
|
const char PAGE_settings_dmx[] PROGMEM = R"=====()=====";
|
|
#endif
|
|
|
|
// Autogenerated from wled00/data/settings_ui.htm, do not edit!!
|
|
const char PAGE_settings_ui[] PROGMEM = R"=====(<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport"
|
|
content="width=500"><title>UI Settings</title><script>
|
|
var initial_ds,initial_st,d=document,sett=null,l={comp:{labels:"Show button labels",colors:{LABEL:"Color selection methods",picker:"Color Wheel",rgb:"RGB sliders",quick:"Quick color selectors",hex:"HEX color input"},pcmbot:"Show bottom tab bar in PC mode",pid:"Show preset IDs"},theme:{alpha:{bg:"Background opacity",tab:"Button opacity"},bg:{url:"BG image URL"},color:{bg:"BG HEX color"}}};function gId(e){return d.getElementById(e)}function isObject(e){return e&&"object"==typeof e&&!Array.isArray(e)}function set(e,i,t){for(var n=i,l=e.split("_"),s=l.length,o=0;o<s-1;o++){var r=l[o];n[r]||(n[r]={}),n=n[r]}n[l[s-1]]=t}function addRec(e,t="",n=null){var l="";for(i in e){var s=t+(t?"_":"")+i;if(isObject(e[i]))n&&n[i]&&n[i].LABEL&&(l+=`<h3>${n[i].LABEL}</h3>`),l+=addRec(e[i],s,n?n[i]:null);else{var o=s;if(n&&n[i]?o=n[i]:e[i+"LABEL"]&&(o=e[i+"LABEL"]),i.indexOf("LABEL")>0)continue;var r=typeof e[i];gId(s)?("boolean"===r?gId(s).checked=e[i]:gId(s).value=e[i],gId(s).previousElementSibling.matches(".l")&&(gId(s).previousElementSibling.innerHTML=o)):"boolean"===r?l+=`${o}: <input class="agi cb" type="checkbox" id=${s} ${e[i]?"checked":""}><br>`:"number"===r?l+=`${o}: <input class="agi" type="number" id=${s} value=${e[i]}><br>`:"string"===r&&(l+=`${o}:<br><input class="agi" id=${s} value=${e[i]}><br>`)}}return l}function genForm(e){var i;i=addRec(e,"",l),gId("gen").innerHTML=i}function GetLS(){(sett=localStorage.getItem("wledUiCfg"))||(gId("lserr").style.display="inline");try{sett=JSON.parse(sett)}catch(e){sett={},gId("lserr").style.display="inline",gId("lserr").innerHTML="⚠ Settings JSON parsing failed. ("+e+")"}genForm(sett),gId("dm").checked="light"===gId("theme_base").value}function SetLS(){for(var e=d.querySelectorAll(".agi"),i=0;i<e.length;i++){var t=e[i],n=t.classList.contains("cb")?t.checked:t.value;set(t.id,sett,n),console.log(`${t.id} set to ${n}`)}try{localStorage.setItem("wledUiCfg",JSON.stringify(sett)),gId("lssuc").style.display="inline"}catch(t){gId("lssuc").style.display="none",gId("lserr").style.display="inline",gId("lserr").innerHTML="⚠ Settings JSON saving failed. ("+t+")"}}function Save(){SetLS(),d.Sf.DS.value==initial_ds&&d.Sf.ST.checked==initial_st||d.Sf.submit()}function S(){GetV(),initial_ds=d.Sf.DS.value,initial_st=d.Sf.ST.checked,GetLS()}function H(){window.open("https://github.com/Aircoookie/WLED/wiki/Settings#user-interface-settings")}function B(){window.open("/settings","_self")}function UI(){gId("idonthateyou").style.display=gId("dm").checked?"inline":"none";var e=gId("theme_base");e&&(e.value=gId("dm").checked?"light":"dark")}function GetV() {var d=document;
|
|
%CSS%%SCSS%</head><body onload="S()"><form
|
|
id="form_s" name="Sf" method="post"><div
|
|
style="position:sticky;top:0;background-color:#222"><div class="helpB"><button
|
|
type="button" onclick="H()">?</button></div><button type="button" onclick="B()">
|
|
Back</button><button type="button" onclick="Save()">Save</button><br><span
|
|
id="lssuc" style="color:green;display:none">✔ Local UI settings saved!
|
|
</span> <span id="lserr" style="color:red;display:none">
|
|
⚠ Could not access local storage. Make sure it is enabled in your browser.
|
|
</span><hr></div><h2>Web Setup</h2>Server description: <input name="DS"
|
|
maxlength="32"><br>Sync button toggles both send and receive: <input
|
|
type="checkbox" name="ST"><br><i>
|
|
The following UI customization settings are unique both to the WLED device and this browser.
|
|
<br>
|
|
You will need to set them again if using a different browser, device or WLED IP address.
|
|
<br>Refresh the main UI to apply changes.</i><br><div id="gen">
|
|
Loading settings...</div><h3>UI Appearance</h3><span class="l"></span>: <input
|
|
type="checkbox" id="comp_labels" class="agi cb"><br><span class="l"></span>:
|
|
<input type="checkbox" id="comp_pcmbot" class="agi cb"><br><span class="l">
|
|
</span>: <input type="checkbox" id="comp_pid" class="agi cb"><br>
|
|
I hate dark mode: <input type="checkbox" id="dm" onchange="UI()"><br><span
|
|
id="idonthateyou" style="display:none"><i>Why would you? </i>🥺<br>
|
|
</span><span class="l"></span>: <input type="number" min="0.0" max="1.0"
|
|
step="0.01" id="theme_alpha_tab" class="agi"><br><span class="l"></span>: <input
|
|
type="number" min="0.0" max="1.0" step="0.01" id="theme_alpha_bg" class="agi">
|
|
<br><span class="l"></span>: <input id="theme_color_bg" maxlength="9"
|
|
class="agi"><br><span class="l">BG image URL</span>: <input id="theme_bg_url"
|
|
class="agi"> <input id="theme_base" class="agi" style="display:none"><hr><button
|
|
type="button" onclick="B()">Back</button><button type="button"
|
|
onclick="Save()">Save</button></form></body></html>)=====";
|
|
|
|
|
|
// Autogenerated from wled00/data/settings_sync.htm, do not edit!!
|
|
const char PAGE_settings_sync[] PROGMEM = R"=====(<!DOCTYPE html><html><head><meta name="viewport" content="width=500"><meta
|
|
charset="utf-8"><title>Sync Settings</title><script>
|
|
var d=document;function H(){window.open("https://github.com/Aircoookie/WLED/wiki/Settings#sync-settings")}function B(){window.open("/settings","_self")}function adj(){6454==d.Sf.DI.value?(1==d.Sf.DA.value&&(d.Sf.DA.value=0),1==d.Sf.EU.value&&(d.Sf.EU.value=0)):5568==d.Sf.DI.value&&(0==d.Sf.DA.value&&(d.Sf.DA.value=1),0==d.Sf.EU.value&&(d.Sf.EU.value=1))}function SP(){var e=d.Sf.DI.value;d.getElementById("xp").style.display=e>0?"none":"block",e>0&&(d.Sf.EP.value=e)}function SetVal(){switch(parseInt(d.Sf.EP.value)){case 5568:d.Sf.DI.value=5568;break;case 6454:d.Sf.DI.value=6454;break;case 4048:d.Sf.DI.value=4048}SP()}function S(){GetV(),SetVal()}function GetV() {
|
|
%CSS%%SCSS%</head><body onload="S()"><form
|
|
id="form_s" name="Sf" method="post"><div class="helpB"><button type="button"
|
|
onclick="H()">?</button></div><button type="button" onclick="B()">Back</button>
|
|
<button type="submit">Save</button><hr><h2>Sync setup</h2><h3>Button setup</h3>
|
|
On/Off button enabled: <input type="checkbox" name="BT"><br>Infrared remote:
|
|
<select name="IR"><option value="0">Disabled</option><option value="1">
|
|
24-key RGB</option><option value="2">24-key with CT</option><option value="3">
|
|
40-key blue</option><option value="4">44-key RGB</option><option value="5">
|
|
21-key RGB</option><option value="6">6-key black</option><option value="7">
|
|
9-key red</option></select><br><a
|
|
href="https://github.com/Aircoookie/WLED/wiki/Infrared-Control" target="_blank">
|
|
IR info</a><h3>WLED Broadcast</h3>UDP Port: <input name="UP" type="number"
|
|
min="1" max="65535" class="d5" required><br>2nd Port: <input name="U2"
|
|
type="number" min="1" max="65535" class="d5" required><br>Receive <input
|
|
type="checkbox" name="RB">Brightness, <input type="checkbox" name="RC">
|
|
Color, and <input type="checkbox" name="RX">Effects<br>
|
|
Send notifications on direct change: <input type="checkbox" name="SD"><br>
|
|
Send notifications on button press or IR: <input type="checkbox" name="SB"><br>
|
|
Send Alexa notifications: <input type="checkbox" name="SA"><br>
|
|
Send Philips Hue change notifications: <input type="checkbox" name="SH"><br>
|
|
Send Macro notifications: <input type="checkbox" name="SM"><br>
|
|
Send notifications twice: <input type="checkbox" name="S2"><br><i>
|
|
Reboot required to apply changes.</i><h3>Realtime</h3>Receive UDP realtime:
|
|
<input type="checkbox" name="RD"><br><br><i>Network DMX input</i><br>Type:
|
|
<select name="DI" onchange="SP(),adj()"><option value="5568">E1.31 (sACN)
|
|
</option><option value="6454">Art-Net</option><option value="4048">DDP</option>
|
|
<option value="0" selected="selected">Custom port</option></select><br><div
|
|
id="xp">Port: <input name="EP" type="number" min="1" max="65535" value="5568"
|
|
class="d5" required><br></div>Multicast: <input type="checkbox" name="EM"><br>
|
|
Start universe: <input name="EU" type="number" min="0" max="63999" required><br>
|
|
<i>Reboot required.</i> Check out <a href="https://github.com/ahodges9/LedFx"
|
|
target="_blank">LedFx</a>!<br>Skip out-of-sequence packets: <input
|
|
type="checkbox" name="ES"><br>DMX start address: <input name="DA" type="number"
|
|
min="0" max="510" required><br>DMX mode: <select name="DM"><option value="0">
|
|
Disabled</option><option value="1">Single RGB</option><option value="2">
|
|
Single DRGB</option><option value="3">Effect</option><option value="4">Multi RGB
|
|
</option><option value="5">Dimmer + Multi RGB</option><option value="6">
|
|
Multi RGBW</option></select><br><a
|
|
href="https://github.com/Aircoookie/WLED/wiki/E1.31-DMX" target="_blank">
|
|
E1.31 info</a><br>Timeout: <input name="ET" type="number" min="1" max="65000"
|
|
required> ms<br>Force max brightness: <input type="checkbox" name="FB"><br>
|
|
Disable realtime gamma correction: <input type="checkbox" name="RG"><br>
|
|
Realtime LED offset: <input name="WO" type="number" min="-255" max="255"
|
|
required><h3>Alexa Voice Assistant</h3>Emulate Alexa device: <input
|
|
type="checkbox" name="AL"><br>Alexa invocation name: <input name="AI"
|
|
maxlength="32"><h3>Blynk</h3><b>
|
|
Blynk, MQTT and Hue sync all connect to external hosts!<br>
|
|
This may impact the responsiveness of the ESP8266.</b><br>
|
|
For best results, only use one of these services at a time.<br>
|
|
(alternatively, connect a second ESP to them and use the UDP sync)<br><br>
|
|
Device Auth token: <input name="BK" maxlength="33"><br><i>
|
|
Clear the token field to disable. </i><a
|
|
href="https://github.com/Aircoookie/WLED/wiki/Blynk" target="_blank">Setup info
|
|
</a><h3>MQTT</h3>Enable MQTT: <input type="checkbox" name="MQ"><br>Broker:
|
|
<input name="MS" maxlength="32"> Port: <input name="MQPORT" type="number"
|
|
min="1" max="65535" class="d5"><br><b>
|
|
The MQTT credentials are sent over an unsecured connection.<br>
|
|
Never use the MQTT password for another service!</b><br>Username: <input
|
|
name="MQUSER" maxlength="40"><br>Password: <input type="password" input
|
|
name="MQPASS" maxlength="40"><br>Client ID: <input name="MQCID" maxlength="40">
|
|
<br>Device Topic: <input name="MD" maxlength="32"><br>Group Topic: <input
|
|
name="MG" maxlength="32"><br><i>Reboot required to apply changes. </i><a
|
|
href="https://github.com/Aircoookie/WLED/wiki/MQTT" target="_blank">MQTT info
|
|
</a><h3>Philips Hue</h3><i>
|
|
You can find the bridge IP and the light number in the 'About' section of the hue app.
|
|
</i><br>Poll Hue light <input name="HL" type="number" min="1" max="99"> every
|
|
<input name="HI" type="number" min="100" max="65000"> ms: <input
|
|
type="checkbox" name="HP"><br>Then, receive <input type="checkbox" name="HO">
|
|
On/Off, <input type="checkbox" name="HB"> Brightness, and <input
|
|
type="checkbox" name="HC"> Color<br>Hue Bridge IP:<br><input name="H0"
|
|
type="number" min="0" max="255"> . <input name="H1" type="number" min="0"
|
|
max="255"> . <input name="H2" type="number" min="0" max="255"> . <input
|
|
name="H3" type="number" min="0" max="255"><br><b>
|
|
Press the pushlink button on the bridge, after that save this page!</b><br>
|
|
(when first connecting)<br>Hue status: <span class="sip">Disabled in this build
|
|
</span><hr><button type="button" onclick="B()">Back</button><button
|
|
type="submit">Save</button></form></body></html>)=====";
|
|
|
|
|
|
// Autogenerated from wled00/data/settings_time.htm, do not edit!!
|
|
const char PAGE_settings_time[] PROGMEM = R"=====(<!DOCTYPE html><html><head><meta name="viewport" content="width=500"><meta
|
|
charset="utf-8"><title>Time Settings</title><script>
|
|
var d=document;function H(){window.open("https://github.com/Aircoookie/WLED/wiki/Settings#time-settings")}function B(){window.open("/settings","_self")}function S(){BTa(),GetV(),Cs(),FC()}function gId(t){return d.getElementById(t)}function Cs(){gId("cac").style.display="none",gId("coc").style.display="block",gId("ccc").style.display="none",gId("ca").selected&&(gId("cac").style.display="block"),gId("cc").selected&&(gId("coc").style.display="none",gId("ccc").style.display="block"),gId("cn").selected&&(gId("coc").style.display="none")}function BTa(){var t="<tr><th>Active</th><th>Hour</th><th>Minute</th><th>Preset</th><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th><th>S</th></tr>";for(i=0;i<8;i++)for(t+='<tr><td><input name="W'+i+'" id="W'+i+'" type="number" style="display:none"><input id="W'+i+'0" type="checkbox"></td><td><input name="H'+i+'" type="number" min="0" max="24"></td><td><input name="N'+i+'" type="number" min="0" max="59"></td><td><input name="T'+i+'" type="number" min="0" max="250"></td>',j=1;j<8;j++)t+='<td><input id="W'+i+j+'" type="checkbox"></td>';gId("TMT").innerHTML=t}function FC(){for(j=0;j<8;j++)for(i=0;i<8;i++)gId("W"+i+j).checked=gId("W"+i).value>>j&1}function Wd(){for(a=[0,0,0,0,0,0,0,0],i=0;i<8;i++){for(m=1,j=0;j<8;j++)a[i]+=gId("W"+i+j).checked*m,m*=2;gId("W"+i).value=a[i]}}function GetV() {
|
|
%CSS%%SCSS%</head><body onload="S()"><form
|
|
id="form_s" name="Sf" method="post" onsubmit="Wd()"><div class="helpB"><button
|
|
type="button" onclick="H()">?</button></div><button type="button" onclick="B()">
|
|
Back</button><button type="submit">Save</button><hr><h2>Time setup</h2>
|
|
Get time from NTP server: <input type="checkbox" name="NT"><br><input name="NS"
|
|
maxlength="32"><br>Use 24h format: <input type="checkbox" name="CF"><br>
|
|
Time zone: <select name="TZ"><option value="0" selected="selected">GMT(UTC)
|
|
</option><option value="1">GMT/BST</option><option value="2">CET/CEST</option>
|
|
<option value="3">EET/EEST</option><option value="4">US-EST/EDT</option><option
|
|
value="5">US-CST/CDT</option><option value="6">US-MST/MDT</option><option
|
|
value="7">US-AZ</option><option value="8">US-PST/PDT</option><option value="9">
|
|
CST(AWST)</option><option value="10">JST(KST)</option><option value="11">
|
|
AEST/AEDT</option><option value="12">NZST/NZDT</option><option value="13">
|
|
North Korea</option><option value="14">IST (India)</option><option value="15">
|
|
CA-Saskatchewan</option><option value="16">ACST</option><option value="17">
|
|
ACST/ACDT</option><option value="18">HST (Hawaii)</option></select><br>
|
|
UTC offset: <input name="UO" type="number" min="-65500" max="65500" required>
|
|
seconds (max. 18 hours)<br>Current local time is <span class="times">unknown
|
|
</span>.<h3>Clock</h3>Clock Overlay: <select name="OL" onchange="Cs()"><option
|
|
value="0" id="cn" selected="selected">None</option><option value="1" id="ca">
|
|
Analog Clock</option><option value="2">Single Digit Clock</option><option
|
|
value="3" id="cc">Cronixie Clock</option></select><br><div id="coc">First LED:
|
|
<input name="O1" type="number" min="0" max="255" required> Last LED: <input
|
|
name="O2" type="number" min="0" max="255" required><br><div id="cac">12h LED:
|
|
<input name="OM" type="number" min="0" max="255" required><br>Show 5min marks:
|
|
<input type="checkbox" name="O5"><br></div>Seconds (as trail): <input
|
|
type="checkbox" name="OS"><br></div><div id="ccc">Cronixie Display: <input
|
|
name="CX" maxlength="6"><br>Cronixie Backlight: <input type="checkbox"
|
|
name="CB"><br></div>Countdown Mode: <input type="checkbox" name="CE"><br>
|
|
Countdown Goal:<br>Year: 20 <input name="CY" type="number" min="0" max="99"
|
|
required> Month: <input name="CI" type="number" min="1" max="12" required> Day:
|
|
<input name="CD" type="number" min="1" max="31" required><br>Hour: <input
|
|
name="CH" type="number" min="0" max="23" required> Minute: <input name="CM"
|
|
type="number" min="0" max="59" required> Second: <input name="CS" type="number"
|
|
min="0" max="59" required><br><h3>Macro presets</h3><b>Macros have moved!</b>
|
|
<br><i>
|
|
Presets now also can be used as macros to save both JSON and HTTP API commands.
|
|
<br>Just enter the preset id below!</i> <i>
|
|
Use 0 for the default action instead of a preset</i><br>Alexa On/Off Preset:
|
|
<input name="A0" type="number" min="0" max="250" required> <input name="A1"
|
|
type="number" min="0" max="250" required><br>Button short press Preset: <input
|
|
name="MP" type="number" min="0" max="250" required><br>Long Press: <input
|
|
name="ML" type="number" min="0" max="250" required> Double press: <input
|
|
name="MD" type="number" min="0" max="250" required><br>Countdown-Over Preset:
|
|
<input name="MC" type="number" min="0" max="250" required><br>
|
|
Timed-Light-Over Presets: <input name="MN" type="number" min="0" max="250"
|
|
required><br><h3>Time-controlled presets</h3><div style="display:inline-block">
|
|
<table id="TMT"></table></div><hr><button type="button" onclick="B()">Back
|
|
</button><button type="submit">Save</button></form></body></html>)=====";
|
|
|
|
|
|
// Autogenerated from wled00/data/settings_sec.htm, do not edit!!
|
|
const char PAGE_settings_sec[] PROGMEM = R"=====(<!DOCTYPE html><html><head><meta name="viewport" content="width=500"><meta
|
|
charset="utf-8"><title>Misc Settings</title><script>
|
|
function H(){window.open("https://github.com/Aircoookie/WLED/wiki/Settings#security-settings")}function B(){window.open("/settings","_self")}function U(){window.open("/update","_self")}function GetV() {var d=document;
|
|
%CSS%%SCSS%</head><body onload="GetV()">
|
|
<form id="form_s" name="Sf" method="post"><div class="helpB"><button
|
|
type="button" onclick="H()">?</button></div><button type="button" onclick="B()">
|
|
Back</button><button type="submit">Save & Reboot</button><hr><h2>
|
|
Security & Update setup</h2>Lock wireless (OTA) software update: <input
|
|
type="checkbox" name="NO"><br>Passphrase: <input type="password" name="OP"
|
|
maxlength="32"><br>
|
|
To enable OTA, for security reasons you need to also enter the correct password!
|
|
<br>The password should be changed when OTA is enabled.<br><b>
|
|
Disable OTA when not in use, otherwise an attacker can reflash device software!
|
|
</b><br><i>Settings on this page are only changable if OTA lock is disabled!</i>
|
|
<br>Deny access to WiFi settings if locked: <input type="checkbox" name="OW">
|
|
<br><br>Factory reset: <input type="checkbox" name="RS"><br>
|
|
All EEPROM content (settings) will be erased.<br><br>
|
|
HTTP traffic is unencrypted. An attacker in the same network can intercept form data!
|
|
<h3>Software Update</h3><button type="button" onclick="U()">Manual OTA Update
|
|
</button><br>Enable ArduinoOTA: <input type="checkbox" name="AO"><br><h3>About
|
|
</h3><a href="https://github.com/Aircoookie/WLED/" target="_blank">WLED</a>
|
|
version 0.11.1<br><br><a
|
|
href="https://github.com/Aircoookie/WLED/wiki/Contributors-&-About"
|
|
target="_blank">Contributors, dependencies and special thanks</a><br>
|
|
A huge thank you to everyone who helped me create WLED!<br><br>
|
|
(c) 2016-2020 Christian Schwinne<br><i>Licensed under the <a
|
|
href="https://github.com/Aircoookie/WLED/blob/master/LICENSE" target="_blank">
|
|
MIT license</a></i><br><br>Server message: <span class="sip">Response error!
|
|
</span><hr><button type="button" onclick="B()">Back</button><button
|
|
type="submit">Save & Reboot</button></form></body></html>)=====";
|
|
|