WLED/wled00/data/index.htm

1799 lines
79 KiB
HTML
Raw Normal View History

2016-09-11 23:07:18 +02:00
<!DOCTYPE html>
<html>
2019-12-05 01:58:03 +01:00
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<meta charset="utf-8">
<meta name="theme-color" content="#222222">
<meta content="yes" name="apple-mobile-web-app-capable">
<link rel="shortcut icon" href="data:image/x-icon;base64,AAABAAEAEBAAAAEAGACGAAAAFgAAAIlQTkcNChoKAAAADUlIRFIAAAAQAAAAEAgGAAAAH/P/YQAAAE1JREFUOI1j/P//PwOxgNGeAUMxE9G6cQCKDWAhpADZ2f8PMjBS3QW08QK20KaZC2gfC9hCnqouoNgARgY7zMxAyNlUdQHlXiAlO2MDAD63EVqNHAe0AAAAAElFTkSuQmCC"/>
<title>WLED</title>
<script>function feedback(){}</script>
2019-12-05 01:58:03 +01:00
<style>
@font-face {
font-family: "WIcons";
src: url(data:application/x-font-woff;charset=utf-8;base64,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
2019-12-05 01:58:03 +01:00
}
2020-05-02 01:59:41 +02:00
:root {
--c-bg: #111;
--c-tx: #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-red:#831;
}
2019-12-05 01:58:03 +01:00
html {
touch-action: manipulation;
2019-12-05 01:58:03 +01:00
}
body {
margin: 0;
2020-05-02 01:59:41 +02:00
background-color: var(--c-bg);
font-family: Helvetica, Verdana, sans-serif;
font-size: 17px;
2020-05-02 01:59:41 +02:00
color: var(--c-tx);
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;
}
html,
body {
height: 100%;
width: 100%;
position: fixed;
overscroll-behavior: none;
2019-12-05 01:58:03 +01:00
}
p {
margin: 10px 0 2px 0;
2020-05-02 01:59:41 +02:00
color: var(--c-d);
2020-02-01 00:36:00 +01:00
}
2019-12-05 01:58:03 +01:00
button {
outline: none;
cursor: pointer;
2019-12-05 01:58:03 +01:00
}
.labels {
margin: 0;
padding: 8px 0 2px 0;
2019-12-05 01:58:03 +01:00
}
#namelabel {
position: fixed;
bottom: 72px;
right: 4px;
2020-05-02 01:59:41 +02:00
color: var(--c-6);
writing-mode: vertical-rl;
2019-12-05 01:58:03 +01:00
}
.bri {
padding: 4px;
2019-12-05 01:58:03 +01:00
}
.wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
2020-05-02 01:59:41 +02:00
background: var(--c-2);
z-index: 1;
2019-12-05 01:58:03 +01:00
}
.icons {
font-family: 'WIcons';
font-style: normal;
font-size: 24px;
line-height: 1;
display: inline-block;
margin: -2px 0 4px 0;
2019-12-05 01:58:03 +01:00
}
2020-05-02 01:59:41 +02:00
.huge {
font-size: 42px;
}
.infot {
table-layout: fixed;
width: 100%;
}
.segt {
table-layout: fixed;
width: 76%;
2020-02-01 00:36:00 +01:00
}
2020-05-02 01:59:41 +02:00
.segtd {
text-align: center;
2020-05-02 01:59:41 +02:00
text-transform: uppercase;
font-size: 14px;
}
.keytd {
text-align: left;
padding-bottom: 8px;
}
.valtd {
text-align: right;
padding-bottom: 8px;
2020-02-01 00:36:00 +01:00
}
2019-12-05 01:58:03 +01:00
.slider-icon
{
transform: translateY(3px);
2020-05-02 01:59:41 +02:00
color: var(--c-d);
2019-12-05 01:58:03 +01:00
}
.sel-icon {
margin: -1px 2px 5px 0;
vertical-align: middle;
2020-05-02 01:59:41 +02:00
color: var(--c-d);
2019-12-05 01:58:03 +01:00
}
.flr {
float: right;
cursor: pointer;
margin: 0;
2020-05-02 01:59:41 +02:00
color: var(--c-tx);
transform: rotate(0deg);
transition: transform 0.3s;
2019-12-05 01:58:03 +01:00
}
.exp {
transform: rotate(180deg);
2019-12-05 01:58:03 +01:00
}
.il {
display: inline-block;
vertical-align: middle;
2019-12-05 01:58:03 +01:00
}
#liveview {
height: 4px;
display: none;
width: 100%;
border: 0px;
2019-12-05 01:58:03 +01:00
}
.tab {
2020-05-02 01:59:41 +02:00
background-color: var(--c-2);
color: var(--c-d);
filter: drop-shadow(0px 0px 0px #111);
2019-12-05 01:58:03 +01:00
}
.bot {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
2019-12-05 01:58:03 +01:00
}
.tab button {
background-color: inherit;
float: left;
border: none;
transition: 0.3s;
font-size: 17px;
2020-05-02 01:59:41 +02:00
color: var(--c-c);
2019-12-05 01:58:03 +01:00
}
.top button {
padding: 14px 14px 10px 14px;
2019-12-05 01:58:03 +01:00
}
.bot button {
padding: 10px 0 8px 0;
width:25%;
2019-12-05 01:58:03 +01:00
}
.tab button:hover {
2020-05-02 01:59:41 +02:00
background-color: var(--c-3);
color: var(--c-e);
2019-12-05 01:58:03 +01:00
}
.tab button.active {
2020-05-02 01:59:41 +02:00
background-color: var(--c-6);
color: var(--c-tx);
2019-12-05 01:58:03 +01:00
}
.active {
2020-05-02 01:59:41 +02:00
background-color: var(--c-6) !important;
color: var(--c-tx);
2019-12-05 01:58:03 +01:00
}
.container {
--n: 1;
width: 100%;
width: calc(var(--n)*100%);
height: calc(100% - var(--tp, 60px) - var(--bt, 60px));
margin-top: var(--tp, 60px);
transform: translate(calc(var(--tx, 0px) + var(--i, 0)/var(--n)*-100%));
overscroll-behavior: none;
2019-12-05 01:58:03 +01:00
}
.tabcontent {
float: left;
position: relative;
width: 100%;
width: calc(100%/var(--n));
padding: 11px 0;
box-sizing: border-box;
border: 0px;
overflow: auto;
height: 100%;
overscroll-behavior: none;
2019-12-05 01:58:03 +01:00
}
#Effects {
padding-top: 0;
2020-05-02 01:59:41 +02:00
border-top: 11px solid var(--c-bg);
2019-12-05 01:58:03 +01:00
}
.smooth { transition: transform calc(var(--f, 1)*.5s) ease-out }
.tab-label {
margin: 0 0 -5px 0;
padding-bottom: 4px;
2019-12-05 01:58:03 +01:00
}
.overlay {
2020-05-02 01:59:41 +02:00
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;
2020-05-02 01:59:41 +02:00
z-index: 11;
opacity: 0.95;
transition: 0.7s;
pointer-events: none;
2019-12-05 01:58:03 +01:00
}
.staytop {
display: block;
position: -webkit-sticky;
position: sticky;
2020-05-02 01:59:41 +02:00
background: var(--c-bg);
top: 0px;
z-index: 1;
2020-05-02 01:59:41 +02:00
margin-top: 1px;
2019-12-05 01:58:03 +01:00
}
#staytop1 {
top: 29px;
2019-12-05 01:58:03 +01:00
}
#staytop2 {
top: 58px;
2019-12-05 01:58:03 +01:00
}
#toast {
opacity: 0;
2020-05-02 01:59:41 +02:00
background-color: var(--c-5);
max-width: 90%;
2020-05-02 01:59:41 +02:00
color: var(--c-tx);
text-align: center;
2020-05-02 01:59:41 +02:00
border-radius: 5px;
padding: 16px;
position: fixed;
2020-05-02 01:59:41 +02:00
z-index: 5;
left: 50%;
transform: translateX(-50%);
bottom: 100px;
font-size: 17px;
pointer-events: none;
2019-12-05 01:58:03 +01:00
}
#toast.show {
opacity: 1;
animation: fadein 0.5s, fadein 0.5s 2.5s reverse;
2019-12-05 01:58:03 +01:00
}
#toast.error {
opacity: 1;
background-color: #b21;
animation: fadein 0.5s;
2019-12-05 01:58:03 +01:00
}
2020-05-02 01:59:41 +02:00
.modal {
position:fixed;
left: 0px;
bottom: 0px;
right: 0px;
background-color: #222e;
transform: translateY(100%);
transition: transform 0.4s;
padding: 8px;
font-size: 20px;
overflow: auto;
}
#info {
z-index: 3;
}
#rover {
z-index: 2;
}
#roverstar {
position: fixed;
top: 75px;
left: 1px;
display: none;
cursor: pointer;
}
#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 0.9s;
font-size: 16px;
color: #f00;
}
img {
max-width: 100%;
max-height: 100%;
}
2019-12-05 01:58:03 +01:00
@keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 100px; opacity: 1;}
2019-12-05 01:58:03 +01:00
}
.sliderdisplay {
content:'';
position: absolute;
top: 13px; bottom: 13px;
left: 10px; right: 10px;
2020-05-02 01:59:41 +02:00
background: var(--c-4);
border-radius: 17px;
pointer-events: none;
z-index: -1;
2019-12-05 01:58:03 +01:00
}
input[type=range] {
-webkit-appearance: none;
width: 220px;
padding: 0px;
margin: 0px 10px 0px 10px;
background-color: transparent;
cursor: pointer;
2019-12-05 01:58:03 +01:00
}
input[type=range]:focus {
outline: none;
2019-12-05 01:58:03 +01:00
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 30px;
cursor: pointer;
background: rgba(0, 0, 0, 0);
2019-12-05 01:58:03 +01:00
}
input[type=range]::-webkit-slider-thumb {
height: 16px;
width: 16px;
border-radius: 17px;
2020-05-02 01:59:41 +02:00
background: var(--c-tx);
cursor: pointer;
-webkit-appearance: none;
margin-top: 7px;
2019-12-05 01:58:03 +01:00
}
input[type=range]::-moz-range-track {
width: 100%;
height: 30px;
background-color: rgba(0, 0, 0, 0);
2019-12-05 01:58:03 +01:00
}
input[type=range]::-moz-range-thumb {
border: 0px solid rgba(0, 0, 0, 0);
height: 16px;
width: 16px;
border-radius: 17px;
2020-05-02 01:59:41 +02:00
background: var(--c-tx);
transform: translateY(7px);
2019-12-05 01:58:03 +01:00
}
input[type=range]::-ms-track {
width: 100%;
height: 30px;
background: transparent;
border-color: transparent;
color: transparent;
2019-12-05 01:58:03 +01:00
}
input[type=range]::-ms-fill-lower {
background: transparent;
2019-12-05 01:58:03 +01:00
}
input[type=range]::-ms-fill-upper {
background: transparent;
2019-12-05 01:58:03 +01:00
}
input[type=range]::-ms-thumb {
height: 16px;
width: 16px;
border-radius: 16px;
2020-05-02 01:59:41 +02:00
background: var(--c-tx);
margin-top: -12px;
2019-12-05 01:58:03 +01:00
}
#wwrap {
display: none;
2019-12-05 01:58:03 +01:00
}
.sliderwrap {
height: 30px;
width: 240px;
position: relative;
2019-12-05 01:58:03 +01:00
}
2020-05-02 01:59:41 +02:00
.sws {
width: 212px;
}
.sis {
width: 192px !important;
}
2019-12-05 01:58:03 +01:00
#briwrap {
float: right;
2019-12-05 01:58:03 +01:00
}
#picker {
margin: 10px auto;
width: 260px;
2020-05-02 01:59:41 +02:00
filter: drop-shadow(0px 0px 1px #000);
2019-12-05 01:58:03 +01:00
}
.btn {
padding: 8px;
margin: 10px;
width: 230px;
font-size: 19px;
2020-05-02 01:59:41 +02:00
background-color: var(--c-3);
color: var(--c-tx);
border: 0px solid white;
border-radius: 25px;
2020-05-02 01:59:41 +02:00
filter: drop-shadow(0px 0px 1px #000);
transition-duration: 0.5s;
-webkit-backface-visibility: hidden;
-webkit-transform:translate3d(0,0,0);
2019-12-05 01:58:03 +01:00
}
.btn-i {
padding-bottom: 4px;
width: 276px;
2020-05-02 01:59:41 +02:00
background-color: var(--c-2);
2019-12-05 01:58:03 +01:00
}
.btn-icon {
2020-05-02 01:59:41 +02:00
margin: 0px 8px 4px 0;
vertical-align: middle;
2019-12-05 01:58:03 +01:00
}
2020-02-04 17:43:46 +01:00
.qcs-w {
margin-top: 10px;
2020-02-04 17:43:46 +01:00
}
.qcs {
padding: 14px;
margin: 2px;
border-radius: 14px;
display: inline-block;
2020-02-04 17:43:46 +01:00
}
.qcsb {
padding: 13px;
2020-05-02 01:59:41 +02:00
border: 1px solid var(--c-tx);
2020-02-04 17:43:46 +01:00
}
.cl {
width: 42px;
2020-02-04 17:43:46 +01:00
}
2019-12-05 01:58:03 +01:00
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: none;
2019-12-05 01:58:03 +01:00
}
select:-moz-focusring {
transition-duration: 0s;
color: transparent;
text-shadow: 0 0 0 #fff;
2019-12-05 01:58:03 +01:00
}
option {
2020-05-02 01:59:41 +02:00
background-color: var(--c-3);
color: var(--c-tx);
2019-12-05 01:58:03 +01:00
}
input[type=number] {
2020-05-02 01:59:41 +02:00
background: var(--c-3);
color: var(--c-tx);
border: 0px solid white;
border-radius: 5px;
padding: 8px;
margin: 6px 6px 6px 0;
font-size: 19px;
transition: background 0.2s;
outline: none;
width: 50px;
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
2019-12-05 01:58:03 +01:00
}
input[type=number]:focus {
2020-05-02 01:59:41 +02:00
background: var(--c-6);
2019-12-05 01:58:03 +01:00
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
2019-12-05 01:58:03 +01:00
}
2020-02-01 00:36:00 +01:00
.segn {
margin: 3px 0 6px 0 !important;
2019-12-05 01:58:03 +01:00
}
2020-05-02 01:59:41 +02:00
.segname {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
cursor: pointer;
}
.newseg {
cursor: default;
}
2019-12-05 01:58:03 +01:00
.ic {
padding: 6px 0 0 0;
2019-12-05 01:58:03 +01:00
}
2020-02-04 17:43:46 +01:00
.xxs {
width: 40px;
margin: 6px;
2019-12-05 01:58:03 +01:00
}
2020-02-04 17:43:46 +01:00
.rect {
border-radius: 5px;
2019-12-05 01:58:03 +01:00
}
.psts {
2020-05-02 01:59:41 +02:00
background-color: var(--c-2);
color: var(--c-8);
cursor: default;
2019-12-05 01:58:03 +01:00
}
.stored {
2020-05-02 01:59:41 +02:00
background-color: var(--c-3);
color: var(--c-tx);
cursor: pointer;
2019-12-05 01:58:03 +01:00
}
.saving {
2020-05-02 01:59:41 +02:00
background-color: var(--c-3);
color: var(--c-tx);
cursor: pointer;
2019-12-05 01:58:03 +01:00
}
.stored.saving {
2020-05-02 01:59:41 +02:00
background-color: var(--c-red);
color: var(--c-tx);
2019-12-05 01:58:03 +01:00
}
.cnf {
2020-05-02 01:59:41 +02:00
position: absolute;
top: 66px;
right: 28px;
color: var(--c-tx);
cursor: pointer;
background: var(--c-3);
padding: 43px 6px;
border-radius: 5px;
}
.pwr {
color: var(--c-6);
transform: translate(2px, 3px);
cursor: pointer;
}
.act {
color: var(--c-tx);
2020-02-01 00:36:00 +01:00
}
.half {
padding: 6px 6px;
top: 64px;
2019-12-05 01:58:03 +01:00
}
.del {
position: absolute;
bottom: 8px;
right: 8px;
2020-05-02 01:59:41 +02:00
color: var(--c-tx);
cursor: pointer;
2019-12-05 01:58:03 +01:00
}
.check {
display: inline-block;
position: relative;
padding-bottom: 32px;
margin-bottom: 14px;
cursor: pointer;
text-align: center;
2019-12-05 01:58:03 +01:00
}
.schkl {
2020-05-02 01:59:41 +02:00
padding: 2px 22px 0px 35px;
margin-bottom: 0px;
2019-12-05 01:58:03 +01:00
}
.revchkl {
padding: 2px 0px 0px 35px;
margin-bottom: 0px;
2020-05-02 01:59:41 +02:00
margin-top: 8px;
2019-12-05 01:58:03 +01:00
}
.check input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
2019-12-05 01:58:03 +01:00
}
.checkmark {
position: absolute;
bottom: 0;
left: 0;
height: 25px;
width: 25px;
2020-05-02 01:59:41 +02:00
background-color: var(--c-3);
border-radius: 5px;
2019-12-05 01:58:03 +01:00
}
.schk {
top: 0;
2019-12-05 01:58:03 +01:00
}
.psv {
left: initial;
bottom: initial;
top: 0;
right: 0;
2019-12-05 01:58:03 +01:00
}
.psvl {
padding: 2px 35px 10px 0px;
margin-top: 10px;
margin-bottom: 0px;
2019-12-05 01:58:03 +01:00
}
.check:hover input ~ .checkmark {
2020-05-02 01:59:41 +02:00
background-color: var(--c-4);
2019-12-05 01:58:03 +01:00
}
.check input:checked ~ .checkmark {
2020-05-02 01:59:41 +02:00
background-color: var(--c-6);
2019-12-05 01:58:03 +01:00
}
.checkmark:after {
content: "";
position: absolute;
display: none;
2019-12-05 01:58:03 +01:00
}
.check input:checked ~ .checkmark:after {
display: block;
2019-12-05 01:58:03 +01:00
}
.check .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
2020-05-02 01:59:41 +02:00
border: solid var(--c-tx);
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
2019-12-05 01:58:03 +01:00
}
.h {
font-size: 13px;
text-align: center;
2020-05-02 01:59:41 +02:00
color: var(--c-b);
2020-02-01 00:36:00 +01:00
}
.bp {
margin-bottom: 5px;
2019-12-05 01:58:03 +01:00
}
.seg {
position: relative;
display: inline-block;
padding: 8px;
margin: 10px;
width: 260px;
font-size: 19px;
2020-05-02 01:59:41 +02:00
background-color: var(--c-2);
color: var(--c-tx);
border: 0px solid white;
border-radius: 5px;
2020-05-02 01:59:41 +02:00
filter: drop-shadow(0px 0px 1px #000);
text-align: left;
2019-12-05 01:58:03 +01:00
}
.segin {
padding: 8px 8px 4px 8px;
display: none;
2019-12-05 01:58:03 +01:00
}
.expanded {
display: block;
2019-12-05 01:58:03 +01:00
}
2020-05-02 01:59:41 +02:00
@media all and (max-width: 550px) and (min-width: 374px) {
.infobtn {
width: 155px;
}
}
@media all and (max-width: 685px) {
.top button {
2020-05-02 01:59:41 +02:00
width: 16.6%;
padding: 8px 0 4px 0;
}
.hd {
display: none;
}
#briwrap {
float: none;
}
2019-12-05 01:58:03 +01:00
}
2020-02-18 14:22:20 +01:00
2020-05-02 01:59:41 +02:00
@media all and (max-width: 1249px) {
#buttonPcm {
display: none;
}
2020-02-18 14:22:20 +01:00
}
2019-12-05 01:58:03 +01:00
</style>
</head>
<body onload="onLoad()">
<div id="cv" class="overlay">Loading WLED UI...</div>
<noscript><div class="overlay" style="opacity:1;">Sorry, WLED UI needs JavaScript!</div></noscript>
<div class="wrapper" id="top">
<div class="tab top">
<div class="btnwrap">
<button id="buttonPower" onclick="togglePower()" class="tgl"><i class="icons">&#xe08f;</i><p class="tab-label">Power</p></button>
<button id="buttonNl" onclick="toggleNl()"><i class="icons">&#xe2a2;</i><p class="tab-label">Timer</p></button>
<button id="buttonSync" onclick="toggleSync()"><i class="icons">&#xe116;</i><p class="tab-label">Sync</p></button>
2020-05-02 01:59:41 +02:00
<button id="buttonSr" onclick="toggleLiveview()"><i class="icons">&#xe410;</i><p class="tab-label">Peek</p></button>
<button id="buttonI" onclick="toggleInfo()"><i class="icons">&#xe34b;</i><p class="tab-label">Info</p></button>
<button onclick="window.location.href = '/settings';"><i class="icons">&#xe0a2;</i><p class="tab-label">Config</p></button>
2020-05-02 01:59:41 +02:00
<button id="buttonPcm" onclick="togglePcMode(true)"><i class="icons">&#xe23d;</i><p class="tab-label">PC Mode</p></button>
</div>
<div id="briwrap">
<p class="hd">Brightness</p>
<div class="il">
<i class="icons slider-icon">&#xe2a6;</i>
<div class="sliderwrap il">
<input id="sliderBri" onchange="setBri()" oninput="updateTrail(this)" max="255" min="1" type="range" value="128" />
<div class="sliderdisplay"></div>
</div>
</div>
</div>
<iframe id="liveview" src="about:blank"></iframe>
</div>
2019-12-05 01:58:03 +01:00
</div>
<div class ="container">
<div id="Colors" class="tabcontent">
<div id="picker" class="noslide"></div>
<div id="wwrap">
<p class="labels">White channel</p>
<div class="sliderwrap il">
<input id="sliderW" class="noslide" onchange="setColor(false)" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div>
</div>
</div>
<div class="qcs-w">
<div class="qcs" onclick="pC('#ff0000');" style="background-color:#ff0000;"></div>
<div class="qcs" onclick="pC('#ffa000');" style="background-color:#ffa000;"></div>
<div class="qcs" onclick="pC('#ffc800');" style="background-color:#ffc800;"></div>
<div class="qcs" onclick="pC('#ffe0a0');" style="background-color:#ffe0a0;"></div>
<div class="qcs" onclick="pC('#ffffff');" style="background-color:#ffffff;"></div>
<div class="qcs qcsb" onclick="pC('#000000');" style="background-color:#000000;"></div><br>
<div class="qcs" onclick="pC('#ff00ff');" style="background-color:#ff00ff;"></div>
<div class="qcs" onclick="pC('#0000ff');" style="background-color:#0000ff;"></div>
<div class="qcs" onclick="pC('#00ffc8');" style="background-color:#00ffc8;"></div>
<div class="qcs" onclick="pC('#08ff00');" style="background-color:#08ff00;"></div>
<div class="qcs" onclick="pC('rnd');" style="background-color:#333; padding: 4px 8px; transform: translateY(-10px);">R</div>
</div>
<div id="csl">
<button class="xxs cl btn" onclick="selectSlot(0);">1</button>
<button class="xxs cl btn" onclick="selectSlot(1);">2</button>
<button class="xxs cl btn" onclick="selectSlot(2);">3</button>
</div>
<p class="labels">Color palette</p>
<div class="il">
<i class="icons sel-icon">&#xe2b3;</i>
<select class="btn sel" id="selectPalette" onchange="setPalette()">
<option>Default</option>
<option>Error!</option>
</select>
</div>
</div>
<div id="Effects" class="tabcontent">
<p class="labels">Effect speed</p>
<div class="staytop">
<i class="icons slider-icon">&#xe325;</i>
<div class="sliderwrap il">
<input id="sliderSpeed" class="noslide" onchange="setSpeed()" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div>
</div>
</div>
<p class="labels">Effect intensity</p>
<div class="staytop" id="staytop1">
<i class="icons slider-icon">&#xe409;</i>
<div class="sliderwrap il">
<input id="sliderIntensity" class="noslide" onchange="setIntensity()" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div>
</div>
</div>
<p class="labels">Effect mode</p>
<div class="staytop" id="staytop2">
<button class="btn" id="fxb0" onclick="setX(0);">Solid</button>
</div>
<div id="fxlist">
Loading...
</div>
<br>
</div>
<div id="Segments" class="tabcontent">
<div id="segcont">
Loading...
</div>
<div id="segutil">
</div>
</div>
<div id="Favorites" class="tabcontent">
<p id="psLabel" class="labels">Load from slot</p>
<button class="xxs btn psts" onclick="setPreset(1);">1</button>
<button class="xxs btn psts" onclick="setPreset(2);">2</button>
<button class="xxs btn psts" onclick="setPreset(3);">3</button>
<button class="xxs btn psts" onclick="setPreset(4);">4</button><br>
<button class="xxs btn psts" onclick="setPreset(5);">5</button>
<button class="xxs btn psts" onclick="setPreset(6);">6</button>
<button class="xxs btn psts" onclick="setPreset(7);">7</button>
<button class="xxs btn psts" onclick="setPreset(8);">8</button><br>
<button class="xxs btn psts" onclick="setPreset(9);">9</button>
<button class="xxs btn psts" onclick="setPreset(10);">10</button>
<button class="xxs btn psts" onclick="setPreset(11);">11</button>
<button class="xxs btn psts" onclick="setPreset(12);">12</button><br>
<button class="xxs btn psts" onclick="setPreset(13);">13</button>
<button class="xxs btn psts" onclick="setPreset(14);">14</button>
<button class="xxs btn psts" onclick="setPreset(15);">15</button>
<button class="xxs btn psts" onclick="setPreset(16);">16</button><br>
<label class="check psvl">
Saving mode
<input type="checkbox" id="psToggle" onchange="togglePS()">
<span class="checkmark psv"></span>
</label><br>
<span class="h">Slot 16 can save all segments.</span><br><br>
<label class="check psvl">
Preset cycle
<input type="checkbox" id="cyToggle" onchange="toggleCY()">
<span class="checkmark psv"></span>
</label><br>
First preset: <input id="cycs" class="noslide" type="number" min="1" max="14" value="1"><br>
Last preset: <input id="cyce" class="noslide" type="number" min="2" max="15" value="3"><br>
Time per preset: <input id="cyct" class="noslide" type="number" min="0.2" max="65.5" step="0.1" value="1.2">s<br>
Transition: <input id="cyctt" class="noslide" type="number" min="0" max="65.5" step="0.1" value="0.7">s
</div>
2019-12-05 01:58:03 +01:00
</div>
<div class="tab bot" id="bot">
<button class="tablinks" onclick="openTab(0)"><i class="icons">&#xe2b3;</i><p class="tab-label">Colors</p></button>
<button class="tablinks" onclick="openTab(1)"><i class="icons">&#xe23d;</i><p class="tab-label">Effects</p></button>
<button class="tablinks" onclick="openTab(2)"><i class="icons">&#xe34b;</i><p class="tab-label">Segments</p></button>
<button class="tablinks" onclick="openTab(3)"><i class="icons">&#xe04c;</i><p class="tab-label">Favorites</p></button>
2019-12-05 01:58:03 +01:00
</div>
<div id="toast"></div>
<div id="namelabel"></div>
2020-05-02 01:59:41 +02:00
<div id="info" class="modal">
<div id="imgw">
<img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAggAAACMCAYAAAAZQlGEAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAKLSURBVHhe7dgxjtwwEADBpf//5zUDwklnpzFAnKoSTigNFTT0AQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGDcOieX+G5nvNLaznil6f1Nv+/tz3c7+3tmen/Tpu/jbe877c85AQD+EQgAQAgEACAEAgAQAgEACIEAAIRAAABCIAAAIRAAgBAIAEAIBAAgBAIAEAIBAAiBAACEQAAAQiAAACEQAIAQCABACAQAINY5+aHvdsYRazvjK9jfM7fvz/0+Y3+/2+336w8CABACAQAIgQAAhEAAAEIgAAAhEACAEAgAQAgEACAEAgAQAgEACIEAAIRAAABCIAAAIRAAgBAIAEAIBAAgBAIAEAIBAAiBAADEOudrfLczXmltZ3yF6fuwv2em9+d+n5ne3zT3cZfp+/AHAQAIgQAAhEAAAEIgAAAhEACAEAgAQAgEACAEAgAQAgEACIEAAIRAAABCIAAAIRAAgBAIAEAIBAAgBAIAEAIBAAiBAACEQAAAYp3zNb7bGUes7Yz8wO334fmeuf35bmd/z9y+v9ufzx8EACAEAgAQAgEACIEAAIRAAABCIAAAIRAAgBAIAEAIBAAgBAIAEAIBAAiBAACEQAAAQiAAACEQAIAQCABACAQAIAQCABACAQCIdc4x3+2MV1rbGfmFpr+/6e/l9ue73fT+pt1+H2/bn+/lGX8QAIAQCABACAQAIAQCABACAQAIgQAAhEAAAEIgAAAhEACAEAgAQAgEACAEAgAQAgEACIEAAIRAAABCIAAAIRAAgBAIAEAIBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgP/u8/kLYCqAxINTyZkAAAAASUVORK5CYII=">
</div><br>
<div id="kv">Loading...</div><br>
<button class="btn infobtn" onclick="requestJson(null)">Refresh</button>
<button class="btn infobtn" onclick="toggleInfo()">Close Info</button><br>
<button class="btn infobtn" onclick="openGH()">WLED Wiki</button>
<button class="btn infobtn" id="resetbtn" onclick="cnfReset()">Reboot WLED</button><br>
<span class="h">Made with <span id="heart">&#10084;</span> by Aircoookie and the WLED community</span>
2020-05-02 01:59:41 +02:00
</div>
2019-12-05 01:58:03 +01:00
2020-05-02 01:59:41 +02:00
<div id="rover" class="modal">
<i class="icons huge">&#xe410;</i><br>
<div id="lv">?</div><br><br>
To use built-in effects, use an override button below.<br>
You can return to realtime mode by pressing the star in the top left corner.<br>
<button class="btn" onclick="setLor(1)">Override once</button>
<button class="btn" onclick="setLor(2)">Override until reboot</button><br>
<span class="h">For best performance, it is recommended to turn off the streaming source when not in use.</span>
</div>
<i id="roverstar" class="icons huge" onclick="setLor(0)">&#xe410;</i><br>
2019-12-05 01:58:03 +01:00
<script>
/*!
* iro.js v4.4.0
* 2016-2019 James Daniel
* Licensed under MPL 2.0
* github.com/jaames/iro.js
*/
2019-12-05 01:58:03 +01:00
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.iro=e()}(this,function(){"use strict";var c=function(){},i={},h=[],u=[];function p(t,e){var o,n,r,i,s=arguments,a=u;for(i=arguments.length;2<i--;)h.push(s[i]);for(e&&null!=e.children&&(h.length||h.push(e.children),delete e.children);h.length;)if((n=h.pop())&&void 0!==n.pop)for(i=n.length;i--;)h.push(n[i]);else"boolean"==typeof n&&(n=null),(r="function"!=typeof t)&&(null==n?n="":"number"==typeof n?n=String(n):"string"!=typeof n&&(r=!1)),r&&o?a[a.length-1]+=n:a===u?a=[n]:a.push(n),o=r;var l=new c;return l.nodeName=t,l.children=a,l.attributes=null==e?void 0:e,l.key=null==e?void 0:e.key,l}function M(t,e){for(var o in e)t[o]=e[o];return t}function l(t,e){null!=t&&("function"==typeof t?t(e):t.current=e)}var e="function"==typeof Promise?Promise.resolve().then.bind(Promise.resolve()):setTimeout,f=/acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i,o=[];function s(t){!t._dirty&&(t._dirty=!0)&&1==o.push(t)&&e(n)}function n(){for(var t;t=o.pop();)t._dirty&&I(t)}function S(t,e){return t.normalizedNodeName===e||t.nodeName.toLowerCase()===e.toLowerCase()}function E(t){var e=M({},t.attributes);e.children=t.children;var o=t.nodeName.defaultProps;if(void 0!==o)for(var n in o)void 0===e[n]&&(e[n]=o[n]);return e}function N(t){var e=t.parentNode;e&&e.removeChild(t)}function v(t,e,o,n,r){if("className"===e&&(e="class"),"key"===e);else if("ref"===e)l(o,null),l(n,t);else if("class"!==e||r)if("style"===e){if(n&&"string"!=typeof n&&"string"!=typeof o||(t.style.cssText=n||""),n&&"object"==typeof n){if("string"!=typeof o)for(var i in o)i in n||(t.style[i]="");for(var i in n)t.style[i]="number"==typeof n[i]&&!1===f.test(i)?n[i]+"px":n[i]}}else if("dangerouslySetInnerHTML"===e)n&&(t.innerHTML=n.__html||"");else if("o"==e[0]&&"n"==e[1]){var s=e!==(e=e.replace(/Capture$/,""));e=e.toLowerCase().substring(2),n?o||t.addEventListener(e,d,s):t.removeEventListener(e,d,s),(t._listeners||(t._listeners={}))[e]=n}else if("list"!==e&&"type"!==e&&!r&&e in t){try{t[e]=null==n?"":n}catch(t){}null!=n&&!1!==n||"spellcheck"==e||t.removeAttribute(e)}else{var a=r&&e!==(e=e.replace(/^xlink:?/,""));null==n||!1===n?a?t.removeAttributeNS("http://www.w3.org/1999/xlink",e.toLowerCase()):t.removeAttribute(e):"function"!=typeof n&&(a?t.setAttributeNS("http://www.w3.org/1999/xlink",e.toLowerCase(),n):t.setAttribute(e,n))}else t.className=n||""}function d(t){return this._listeners[t.type](t)}var H=[],T=0,g=!1,_=!1;function P(){for(var t;t=H.shift();)t.componentDidMount&&t.componentDidMount()}function A(t,e,o,n,r,i){T++||(g=null!=r&&void 0!==r.ownerSVGElement,_=null!=t&&!("__preactattr_"in t));var s=U(t,e,o,n,i);return r&&s.parentNode!==r&&r.appendChild(s),--T||(_=!1,i||P()),s}function U(t,e,o,n,r){var i=t,s=g;if(null!=e&&"boolean"!=typeof e||(e=""),"string"==typeof e||"number"==typeof e)return t&&void 0!==t.splitText&&t.parentNode&&(!t._component||r)?t.nodeValue!=e&&(t.nodeValue=e):(i=document.createTextNode(e),t&&(t.parentNode&&t.parentNode.replaceChild(i,t),O(t,!0))),i.__preactattr_=!0,i;var a,l,c=e.nodeName;if("function"==typeof c)return function(t,e,o,n){var r=t&&t._component,i=r,s=t,a=r&&t._componentConstructor===e.nodeName,l=a,c=E(e);for(;r&&!l&&(r=r._parentComponent);)l=r.constructor===e.nodeName;r&&l&&(!n||r._component)?(j(r,c,3,o,n),t=r.base):(i&&!a&&(L(i),t=s=null),r=R(e.nodeName,c,o),t&&!r.nextBase&&(r.nextBase=t,s=null),j(r,c,1,o,n),t=r.base,s&&t!==s&&(s._component=null,O(s,!1)));return t}(t,e,o,n);if(g="svg"===c||"foreignObject"!==c&&g,c=String(c),(!t||!S(t,c))&&(a=c,(l=g?document.createElementNS("http://www.w3.org/2000/svg",a):document.createElement(a)).normalizedNodeName=a,i=l,t)){for(;t.firstChild;)i.appendChild(t.firstChild);t.parentNode&&t.parentNode.replaceChild(i,t),O(t,!0)}var h=i.firstChild,u=i.__preactattr_,p=e.children;if(null==u){u=i.__preactattr_={};for(var f=i.attributes,d=f.length;d--;)u[f[d].name]=f[d].value}return!_&&p&&1===p.length&&"string"==typeof p[0]&&null!=h&&void 0!==h.splitText&&null==h.nextSibling?h.n
/*!
* RangeTouch v2.0
* https://github.com/sampotts/rangetouch
*/
2019-12-05 01:58:03 +01:00
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define("RangeTouch",t):e.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)}}var t={addCSS:!0,thumbWidth:15,watch:!0};var n=function(e){return null!=e?e.constructor:null},r=function(e,t){return!!(e&&t&&e instanceof t)},u=function(e){return null==e},i=function(e){return n(e)===Object},o=function(e){return n(e)===String},a=function(e){return Array.isArray(e)},c=function(e){return r(e,NodeList)},l={nullOrUndefined:u,object:i,number:function(e){return n(e)===Number&&!Number.isNaN(e)},string:o,boolean:function(e){return n(e)===Boolean},function:function(e){return n(e)===Function},array:a,nodeList:c,element:function(e){return r(e,Element)},event:function(e){return r(e,Event)},empty:function(e){return u(e)||(o(e)||a(e)||c(e))&&!e.length||i(e)&&!Object.keys(e).length}};function s(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 n(e,r){(function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")})(this,n),l.element(e)?this.element=e:l.string(e)&&(this.element=document.querySelector(e)),l.element(this.element)&&l.empty(this.element.rangeTouch)&&(this.config=Object.assign({},t,r),this.init())}return r=n,i=[{key:"setup",value:function(e){var r=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{},u=null;if(l.empty(e)||l.string(e)?u=Array.from(document.querySelectorAll(l.string(e)?e:'input[type="range"]')):l.element(e)?u=[e]:l.nodeList(e)?u=Array.from(e):l.array(e)&&(u=e.filter(l.element)),l.empty(u))return null;var i=Object.assign({},t,r);l.string(e)&&i.watch&&new MutationObserver(function(t){Array.from(t).forEach(function(t){Array.from(t.addedNodes).forEach(function(t){l.element(t)&&function(e,t){return function(){return Array.from(document.querySelectorAll(t)).includes(this)}.call(e,t)}(t,e)&&new n(t,i)})})}).observe(document.body,{childList:!0,subtree:!0});return u.map(function(e){return new n(e,r)})}},{key:"enabled",get:function(){return"ontouchstart"in document.documentElement}}],(u=[{key:"init",value:function(){n.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(){n.enabled&&(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(!n.enabled||!l.event(e))return null;var t,r=e.target,u=e.changedTouches[0],i=parseFloat(r.getAttribute("min"))||0,o=parseFloat(r.getAttribute("max"))||100,a=parseFloat(r.getAttribute("step"))||1,c=r.getBoundingClientRect(),f=100/c.width*(this.config.thumbWidth/2)/100;return 0>(t=100/c.width*(u.clientX-c.left))?t=0:100<t&&(t=100),50>t?t-=(100-2*t)*f:50<t&&(t+=2*(t-50)*f),i+s(t/100*(o-i),a)}},{key:"set",value:function(e){n.enabled&&l.event(e)&&!e.target.disabled&&(e.preventDefault(),e.target.value=this.get(e),function(e,t){if(e&&t){var n=new Event(t);e.dispatchEvent(n)}}(e.target,"touchend"===e.type?"change":"input"))}}])&&e(r.prototype,u),i&&e(r,i),n;var r,u,i}()});
//page js
2020-05-02 01:59:41 +02:00
var loc = false, locip;
2019-12-05 01:58:03 +01:00
var ps = false, noNewSegs = false;
2020-05-02 01:59:41 +02:00
var isOn = false, nlA = false, isLv = false, isInfo = false, syncSend = false, syncTglRecv = true, isRgbw = false;
2019-12-05 01:58:03 +01:00
var whites = [0,0,0];
var expanded = [false];
2020-05-02 01:59:41 +02:00
var powered = [true];
2019-12-05 01:58:03 +01:00
var nlDur = 60;
var selectedFx = 0;
var csel = 0;
var savedPresets = 0;
var currentPreset = -1;
var lastUpdate = 0;
2020-05-02 01:59:41 +02:00
var segCount = 0, ledCount = 0, lowestUnused = 0, maxSeg = 0, lSeg = 0;
var pcMode = false, pcModeA = false, lastw = 0;
2019-12-05 01:58:03 +01:00
var d = document;
const ranges = RangeTouch.setup('input[type="range"]', {});
2020-05-02 01:59:41 +02:00
var lastinfo = {};
2019-12-05 01:58:03 +01:00
var cpick = new iro.ColorPicker("#picker", {
width: 260,
wheelLightness: false
2019-12-05 01:58:03 +01:00
});
function handleVisibilityChange() {
if (!document.hidden && new Date () - lastUpdate > 3000) {
2020-05-02 01:59:41 +02:00
requestJson(null);
}
2019-12-05 01:58:03 +01:00
}
function onLoad() {
size();
2020-05-02 01:59:41 +02:00
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 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(true);
});
2020-05-02 01:59:41 +02:00
setTimeout(function(){requestJson(null, false)}, 25);
d.addEventListener("visibilitychange", handleVisibilityChange, false);
d.getElementById("cv").style.opacity=0;
2020-05-02 01:59:41 +02:00
if (localStorage.getItem('pcm') == "true") togglePcMode(true);
2019-12-05 01:58:03 +01:00
}
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";
2019-12-05 01:58:03 +01:00
}
2020-05-02 01:59:41 +02:00
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);
2019-12-05 01:58:03 +01:00
}
var timeout;
function showToast(text, error = false) {
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);
2019-12-05 01:58:03 +01:00
}
function showErrorToast() {
showToast('Connection to light failed. Please refresh the page. If the issue persists, reboot your ESP.', true);
2019-12-05 01:58:03 +01:00
}
function clearErrorToast() {
d.getElementById("toast").className = d.getElementById("toast").className.replace("error", "");
2019-12-05 01:58:03 +01:00
}
2020-05-02 01:59:41 +02:00
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 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.10.")) vcn = "Namigai";
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("Environment",i.arch + " " + i.core + " (" + i.lwip + ")")}
</table>`;
d.getElementById('kv').innerHTML = cn;
}
2019-12-05 01:58:03 +01:00
function populateSegments(s)
{
var cn = "";
2020-05-02 01:59:41 +02:00
segCount = 0, lowestUnused = 0; lSeg = 0;
for (y in s.seg)
{
segCount++;
var inst=s.seg[y];
var i = parseInt(inst.id);
2020-05-02 01:59:41 +02:00
powered[i] = inst.on;
if (i == lowestUnused) lowestUnused = i+1;
2020-05-02 01:59:41 +02:00
if (i > lSeg) lSeg = i;
cn += `<div class="seg">
<label class="check schkl">
2020-05-02 01:59:41 +02:00
&nbsp;
<input type="checkbox" id="seg${i}sel" onchange="selSeg(${i})" ${inst.sel ? "checked":""}>
<span class="checkmark schk"></span>
</label>
2020-05-02 01:59:41 +02:00
<div class="segname" onclick="selSegEx(${i})">
Segment ${i}
</div>
<i class="icons slider-icon flr ${expanded[i] ? "exp":""}" id="sege${i}" onclick="expand(${i})">&#xe395;</i>
<div class="segin ${expanded[i] ? "expanded":""}" id="seg${i}">
2020-05-02 01:59:41 +02:00
<table class="segt">
<tr>
2020-05-02 01:59:41 +02:00
<td class="segtd">Start LED</td>
<td class="segtd">Stop LED</td>
</tr>
<tr>
2020-05-02 01:59:41 +02:00
<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>
2020-05-02 01:59:41 +02:00
<table class="segt">
<tr>
2020-05-02 01:59:41 +02:00
<td class="segtd">Grouping</td>
<td class="segtd">Spacing</td>
</tr>
<tr>
2020-05-02 01:59:41 +02:00
<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>
2020-05-02 01:59:41 +02:00
<div class="h bp" id="seg${i}len"></div>
<i class="icons slider-icon pwr ${powered[i] ? "act":""}" id="seg${i}pwr" onclick="setSegPwr(${i})">&#xe08f;</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 slider-icon cnf" id="segc${i}" onclick="setSeg(${i})">&#xe390;</i>
<i class="icons slider-icon del" id="segd${i}" onclick="delSeg(${i})">&#xe037;</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>
</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;
}
2020-05-02 01:59:41 +02:00
for (i = 0; i < segCount; i++) {
updateLen(i);
updateTrail(d.getElementById(`seg${i}bri`));
}
2019-12-05 01:58:03 +01:00
}
function updateTrail(e)
{
2020-05-02 01:59:41 +02:00
if (e==null) return;
var progress = e.value *100 /255;
progress = parseInt(progress);
var val = `linear-gradient(90deg, white ${progress}%, #444 ${progress}%)`;
e.parentNode.getElementsByClassName('sliderdisplay')[0].style.background = val;
2019-12-05 01:58:03 +01:00
}
2020-02-01 00:36:00 +01:00
function updateLen(s)
2019-12-05 01:58:03 +01:00
{
2020-05-02 01:59:41 +02:00
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;
2019-12-05 01:58:03 +01:00
}
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 = "#666";
updateTrail(d.getElementById('sliderBri'));
updateTrail(d.getElementById('sliderSpeed'));
updateTrail(d.getElementById('sliderIntensity'));
updateTrail(d.getElementById('sliderW'));
if (isRgbw) d.getElementById('wwrap').style.display = "block";
var btns = document.getElementsByClassName("psts");
for (i = 0; i < btns.length; i++) {
btns[i].className = btns[i].className.replace(" active", "");
if ((savedPresets >> i) & 0x01) btns[i].className += " stored";
}
if (currentPreset > 0 && currentPreset <= btns.length) btns[currentPreset -1].className += " active";
spal = d.getElementById("selectPalette");
2020-05-02 01:59:41 +02:00
spal.style.backgroundColor = (spal.selectedIndex > 0) ? "var(--c-6)":"var(--c-3)";
}
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";
2019-12-05 01:58:03 +01:00
}
function compare(a, b) {
if (a.name < b.name){
return -1;
}
return 1;
2019-12-05 01:58:03 +01:00
}
var jsonTimeout;
2020-05-02 01:59:41 +02:00
function requestJson(command, rinfo = true, verbose = true) {
lastUpdate = new Date();
if (!jsonTimeout) jsonTimeout = setTimeout(showErrorToast, 3000);
var req = null;
e1 = d.getElementById('fxlist');
e2 = d.getElementById('selectPalette');
2020-05-02 01:59:41 +02:00
url = rinfo ? '/json/si': (command ? '/json/state':'/json');
if (loc) {
url = `http://${locip}${url}`;
}
type = command ? 'post':'get';
if (command)
{
command.v = verbose;
req = JSON.stringify(command);
}
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();
if (!json) showToast('Empty response', true);
if (json.success) return;
var s = json;
2020-05-02 01:59:41 +02:00
if (!command || rinfo) {
if (!rinfo) {
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" 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)";
2020-05-02 01:59:41 +02:00
if (info.live) {
name = "(Live) " + name;
}
d.title = name;
isRgbw = info.leds.wv;
ledCount = info.leds.count;
syncTglRecv = info.str;
maxSeg = info.leds.maxseg;
2020-05-02 01:59:41 +02:00
lastinfo = info;
if (isInfo) populateInfo(info);
s = json.state;
2020-05-02 01:59:41 +02:00
displayRover(info, s);
}
isOn = s.on;
d.getElementById('sliderBri').value= s.bri;
nlA = s.nl.on;
nlDur = s.nl.dur;
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] = 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 = "#333";
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) showToast('WLED error ' + s.error, true);
updateUI();
})
.catch(function (error) {
showToast(error, true);
2020-05-02 01:59:41 +02:00
console.log(error);
})
2019-12-05 01:58:03 +01:00
}
function togglePower() {
isOn = !isOn;
var obj = {"on": isOn};
obj.transition = parseInt(d.getElementById('cyctt').value*10);
requestJson(obj);
2019-12-05 01:58:03 +01:00
}
function toggleNl() {
nlA = !nlA;
if (nlA)
{
showToast('Nightlight active. Your light will turn off after ' + nlDur + ' minutes.');
} else {
showToast('Nightlight deactivated.');
}
var obj = {"nl": {"on": nlA}};
requestJson(obj);
2019-12-05 01:58:03 +01:00
}
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);
2019-12-05 01:58:03 +01:00
}
function toggleLiveview() {
isLv = !isLv;
d.getElementById('liveview').style.display = (isLv) ? "block":"none";
2020-05-02 01:59:41 +02:00
var url = loc ? `http://${locip}/liveview`:"/liveview";
d.getElementById('liveview').src = (isLv) ? url:"about:blank";
d.getElementById('buttonSr').className = (isLv) ? "active":"";
2020-05-02 01:59:41 +02:00
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":"";
2019-12-05 01:58:03 +01:00
}
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">
2020-05-02 01:59:41 +02:00
<div class="segname newseg">
New segment ${lowestUnused}
</div>
<br>
<div class="segin expanded">
2020-05-02 01:59:41 +02:00
<table class="segt">
<tr>
2020-05-02 01:59:41 +02:00
<td class="segtd">Start LED</td>
<td class="segtd">Stop LED</td>
</tr>
<tr>
2020-05-02 01:59:41 +02:00
<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 slider-icon cnf half" id="segc${lowestUnused}" onclick="setSeg(${lowestUnused}); resetUtil();">&#xe390;</i>
</div>
</div>`;
d.getElementById('segutil').innerHTML = cn;
2019-12-05 01:58:03 +01:00
}
function resetUtil() {
var cn = `<button class="btn btn-i rect" onclick="makeSeg()"><i class="icons btn-icon">&#xe18a;</i>Add segment</button><br>`;
d.getElementById('segutil').innerHTML = cn;
2019-12-05 01:58:03 +01:00
}
2020-05-02 01:59:41 +02:00
function selSegEx(s)
{
var obj = {"seg":[]};
for(i=0; i<=lSeg; i++){
obj.seg.push({"sel":(i==s)?true:false});
}
requestJson(obj);
}
2019-12-05 01:58:03 +01:00
function selSeg(s){
var sel = d.getElementById(`seg${s}sel`).checked;
var obj = {"seg": {"id": s, "sel": sel}};
2020-05-02 01:59:41 +02:00
requestJson(obj, false);
2019-12-05 01:58:03 +01:00
}
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);
2019-12-05 01:58:03 +01:00
}
function delSeg(s){
if (segCount < 2) {
2020-05-02 01:59:41 +02:00
showToast("You need to have multiple segments to delete one!");
return;
}
expanded[s] = false;
segCount--;
var obj = {"seg": {"id": s, "stop": 0}};
2020-05-02 01:59:41 +02:00
requestJson(obj, false);
2019-12-05 01:58:03 +01:00
}
function setRev(s){
var rev = d.getElementById(`seg${s}rev`).checked;
var obj = {"seg": {"id": s, "rev": rev}};
2020-05-02 01:59:41 +02:00
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);
2019-12-05 01:58:03 +01:00
}
function setX(ind) {
var obj = {"seg": {"fx": parseInt(ind)}};
requestJson(obj);
2019-12-05 01:58:03 +01:00
}
function setPalette()
{
var obj = {"seg": {"pal": parseInt(d.getElementById('selectPalette').value)}};
requestJson(obj);
2019-12-05 01:58:03 +01:00
}
function setBri() {
var obj = {"bri": parseInt(d.getElementById('sliderBri').value)};
obj.transition = parseInt(d.getElementById('cyctt').value*10);
requestJson(obj);
2019-12-05 01:58:03 +01:00
}
function setSpeed() {
var obj = {"seg": {"sx": parseInt(d.getElementById('sliderSpeed').value)}};
2020-05-02 01:59:41 +02:00
requestJson(obj, false);
2019-12-05 01:58:03 +01:00
}
function setIntensity() {
var obj = {"seg": {"ix": parseInt(d.getElementById('sliderIntensity').value)}};
2020-05-02 01:59:41 +02:00
requestJson(obj, false);
}
function setLor(i) {
var obj = {"lor": i};
requestJson(obj);
2019-12-05 01:58:03 +01:00
}
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);
2019-12-05 01:58:03 +01:00
}
function togglePS() {
ps = !ps;
var btns = document.getElementsByClassName("psts");
for (i = 0; i < btns.length; i++) {
if (ps) {
btns[i].className += " saving";
} else {
btns[i].className = btns[i].className.replace(" saving", "");
}
}
d.getElementById("psLabel").innerHTML = (ps) ? "Save to slot":"Load from slot";
2019-12-05 01:58:03 +01:00
}
function setPreset(i) {
var obj = {"ps": i}
if ((savedPresets >> (i-1)) & 0x01) {
showToast("Loading config from slot " + i +".");
} else {
showToast("Slot " + i +" is empty! Use saving mode to save the current config to it.");
}
if (ps) {
obj = {"psave": i};
showToast("Saving config to slot " + i +".");
}
requestJson(obj);
2019-12-05 01:58:03 +01:00
}
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";
if (cpick.color.rgbString !== cd[csel].style.backgroundColor) {
cpick.color.set(cd[csel].style.backgroundColor);
}
d.getElementById('sliderW').value = whites[csel];
updateTrail(d.getElementById('sliderW'));
2019-12-05 01:58:03 +01:00
}
2020-02-15 16:18:06 +01:00
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(false);
2020-02-15 16:18:06 +01:00
}
2019-12-05 01:58:03 +01:00
function setColor(fromPicker) {
var cd = d.getElementById('csl').children;
if (fromPicker && cd[csel].style.backgroundColor == 'rgb(0, 0, 0)') cpick.color.setChannel('hsv', 'v', 100);
cd[csel].style.backgroundColor = cpick.color.rgbString;
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]]]}};
}
obj.transition = parseInt(d.getElementById('cyctt').value*10);
requestJson(obj);
2019-12-05 01:58:03 +01:00
}
2020-05-02 01:59:41 +02:00
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";
}
2019-12-05 01:58:03 +01:00
function expand(i)
{
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)"
2019-12-05 01:58:03 +01:00
}
function unfocusSliders() {
d.getElementById("sliderBri").blur();
d.getElementById("sliderSpeed").blur();
d.getElementById("sliderIntensity").blur();
2019-12-05 01:58:03 +01:00
}
//sliding UI
const _C = document.querySelector('.container'), N = 4;
let iSlide = 0, x0 = null, y0 = null, scrollS = 0, locked = false, w;
function unify(e) { return e.changedTouches ? e.changedTouches[0] : e }
function lock(e) {
if (pcMode) return;
var l = e.target.classList;
if (l.contains('noslide') || l.contains('iro__wheel__saturation') || l.contains('iro__slider__value') || l.contains('iro__slider')) return;
x0 = unify(e).clientX;
y0 = unify(e).clientY;
scrollS = d.getElementsByClassName("tabcontent")[iSlide].scrollTop;
2019-12-05 01:58:03 +01:00
_C.classList.toggle('smooth', !(locked = true))
2019-12-05 01:58:03 +01:00
}
function drag(e) {
if (!locked || pcMode) return;
if (d.getElementsByClassName("tabcontent")[iSlide].scrollTop != scrollS) {
move(e); return;
}
_C.style.setProperty('--tx', `${Math.round(unify(e).clientX - x0)}px`)
2019-12-05 01:58:03 +01:00
}
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) {
_C.style.setProperty('--i', iSlide -= s);
f = 1 - f;
updateTablinks(iSlide);
}
_C.style.setProperty('--tx', '0px');
_C.style.setProperty('--f', f);
_C.classList.toggle('smooth', !(locked = false));
x0 = null
2019-12-05 01:58:03 +01:00
}
function size() {
2020-05-02 01:59:41 +02:00
w = window.innerWidth;
var h = d.getElementById('top').clientHeight;
d.getElementById('info').style.top = h + "px";
d.getElementById('rover').style.top = h + "px";
d.getElementById('roverstar').style.top = (h+5) + "px";
if (isLv) h -= 4;
_C.style.setProperty('--tp', h + "px");
_C.style.setProperty('--bt', d.getElementById('bot').clientHeight + "px");
2020-05-02 01:59:41 +02:00
togglePcMode();
2020-02-18 14:22:20 +01:00
}
2020-05-02 01:59:41 +02:00
function togglePcMode(fromB = false)
2020-02-18 14:22:20 +01:00
{
2020-05-02 01:59:41 +02:00
if (fromB) {
pcModeA = !pcModeA;
localStorage.setItem('pcm', pcModeA);
pcMode = pcModeA;
}
if (w < 1250 && !pcMode) return;
2020-05-02 01:59:41 +02:00
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":"";
if (pcMode)
{
_C.style.width = '100%';
} else {
_C.style.width = '400%';
}
2020-05-02 01:59:41 +02:00
lastw = w;
2019-12-05 01:58:03 +01:00
}
size();
_C.style.setProperty('--n', N);
window.addEventListener('resize', size, false);
2019-12-05 01:58:03 +01:00
_C.addEventListener('mousedown', lock, false);
_C.addEventListener('touchstart', lock, false);
_C.addEventListener('mousemove', drag, false);
_C.addEventListener('touchmove', drag, false);
_C.addEventListener('mouseout', move, false);
_C.addEventListener('mouseup', move, false);
_C.addEventListener('touchend', move, false);
</script>
</body>
</html>