1046 lines
76 KiB
HTML
1046 lines
76 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta content='text/html; charset=utf-8' http-equiv='Content-Type'>
|
||
|
|
<meta content='width=device-width' name='viewport'>
|
||
|
|
<link href="images/safari-pinned-tab.svg" rel="mask-icon">
|
||
|
|
<meta content="#ffffff" name="theme-color">
|
||
|
|
<meta content="yes" name="apple-mobile-web-app-capable">
|
||
|
|
<link href='/favicon.ico' rel='shortcut icon' type='image/x-icon'>
|
||
|
|
<title>WLED</title>
|
||
|
|
<style>
|
||
|
|
*{transition-duration: 0.5s;}
|
||
|
|
body {
|
||
|
|
margin-bottom: 60px;
|
||
|
|
/* Margin bottom by footer height */
|
||
|
|
background-color: #333;
|
||
|
|
font-family: Helvetica, Verdana, sans-serif;
|
||
|
|
color: white;
|
||
|
|
background: linear-gradient(0deg, #7e8a96, #333);
|
||
|
|
background-size: 400% 400%;
|
||
|
|
|
||
|
|
}
|
||
|
|
.feedbackanim{
|
||
|
|
animation: feedback 0.3s ease;
|
||
|
|
animation-iteration-count: 1;
|
||
|
|
}
|
||
|
|
@-webkit-keyframes feedback {
|
||
|
|
0%{background-position:49% 0%}
|
||
|
|
50%{background-position:52% 100%}
|
||
|
|
100%{background-position:49% 0%}
|
||
|
|
}
|
||
|
|
@-moz-keyframes feedback {
|
||
|
|
0%{background-position:49% 0%}
|
||
|
|
50%{background-position:52% 100%}
|
||
|
|
100%{background-position:49% 0%}
|
||
|
|
}
|
||
|
|
@keyframes feedback {
|
||
|
|
0%{background-position:49% 0%}
|
||
|
|
50%{background-position:52% 100%}
|
||
|
|
100%{background-position:49% 0%}
|
||
|
|
}
|
||
|
|
|
||
|
|
.segment{
|
||
|
|
width:100%;
|
||
|
|
height:145px;
|
||
|
|
max-width:260px;
|
||
|
|
margin-left:auto;
|
||
|
|
margin-right:auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.colourCol {
|
||
|
|
width: 27px;
|
||
|
|
height: 27px;
|
||
|
|
float: left;
|
||
|
|
border: solid;
|
||
|
|
border-radius: 30px;
|
||
|
|
padding: 10px;
|
||
|
|
margin: 5px;
|
||
|
|
font-size: 23px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#mode li {
|
||
|
|
padding: 15px;
|
||
|
|
background-color: rgba(255, 255, 255, 0);
|
||
|
|
margin: 10px;
|
||
|
|
border-color: white;
|
||
|
|
color: white;
|
||
|
|
border: solid;
|
||
|
|
text-transform: uppercase;
|
||
|
|
list-style: none;
|
||
|
|
margin-left: -37px;
|
||
|
|
border-radius: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#mode li a {
|
||
|
|
color: white;
|
||
|
|
text-decoration: none;
|
||
|
|
font-family: helvetica;
|
||
|
|
font-size: 19px;
|
||
|
|
display:block;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type=range] {
|
||
|
|
-webkit-appearance: none;
|
||
|
|
width: 228px;
|
||
|
|
margin-top: 10px;
|
||
|
|
background-color: rgba(0, 0, 0, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type=range]:focus {
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type=range]::-webkit-slider-runnable-track {
|
||
|
|
width: 100%;
|
||
|
|
height: 32px;
|
||
|
|
cursor: pointer;
|
||
|
|
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||
|
|
background: #66d1ff;
|
||
|
|
/* Old browsers */
|
||
|
|
background: -moz-linear-gradient(45deg, #66d1ff 0%, #ff6a00 100%);
|
||
|
|
/* FF3.6-15 */
|
||
|
|
background: -webkit-linear-gradient(45deg, #66d1ff 0%, #ff6a00 100%);
|
||
|
|
/* Chrome10-25,Safari5.1-6 */
|
||
|
|
background: linear-gradient(45deg, #66d1ff 0%, #ff6a00 100%);
|
||
|
|
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||
|
|
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#66d1ff', endColorstr='#ff6a00', GradientType=1);
|
||
|
|
/* IE6-9 fallback on horizontal gradient */
|
||
|
|
border-radius: 25px;
|
||
|
|
border: 0px solid #010101;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type=range]::-webkit-slider-thumb {
|
||
|
|
box-shadow: 0.4px 0.4px 0.4px #000031, 0px 0px 0.4px #00004b;
|
||
|
|
border: 2.6px solid #ffffff;
|
||
|
|
height: 26px;
|
||
|
|
width: 26px;
|
||
|
|
border-radius: 26px;
|
||
|
|
background: rgba(255, 255, 255, 0);
|
||
|
|
cursor: pointer;
|
||
|
|
-webkit-appearance: none;
|
||
|
|
margin-top: 3.3px;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type=range]:focus::-webkit-slider-runnable-track {
|
||
|
|
background: #66d1ff;
|
||
|
|
/* Old browsers */
|
||
|
|
background: -moz-linear-gradient(45deg, #66d1ff 0%, #ff6a00 100%);
|
||
|
|
/* FF3.6-15 */
|
||
|
|
background: -webkit-linear-gradient(45deg, #66d1ff 0%, #ff6a00 100%);
|
||
|
|
/* Chrome10-25,Safari5.1-6 */
|
||
|
|
background: linear-gradient(45deg, #66d1ff 0%, #ff6a00 100%);
|
||
|
|
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||
|
|
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#66d1ff', endColorstr='#ff6a00', GradientType=1);
|
||
|
|
/* IE6-9 fallback on horizontal gradient */
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type=range]::-moz-range-track {
|
||
|
|
width: 100%;
|
||
|
|
height: 32px;
|
||
|
|
cursor: pointer;
|
||
|
|
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||
|
|
background: #66d1ff;
|
||
|
|
/* Old browsers */
|
||
|
|
background: -moz-linear-gradient(45deg, #66d1ff 0%, #ff6a00 100%);
|
||
|
|
/* FF3.6-15 */
|
||
|
|
background: -webkit-linear-gradient(45deg, #66d1ff 0%, #ff6a00 100%);
|
||
|
|
/* Chrome10-25,Safari5.1-6 */
|
||
|
|
background: linear-gradient(45deg, #66d1ff 0%, #ff6a00 100%);
|
||
|
|
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||
|
|
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#66d1ff', endColorstr='#ff6a00', GradientType=1);
|
||
|
|
/* IE6-9 fallback on horizontal gradient */
|
||
|
|
border-radius: 25px;
|
||
|
|
border: 0px solid #010101;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type=range]::-moz-range-thumb {
|
||
|
|
box-shadow: 0.4px 0.4px 0.4px #000031, 0px 0px 0.4px #00004b;
|
||
|
|
border: 2.6px solid #ffffff;
|
||
|
|
height: 26px;
|
||
|
|
width: 26px;
|
||
|
|
border-radius: 26px;
|
||
|
|
background: rgba(255, 255, 255, 0);
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type=range]::-ms-track {
|
||
|
|
width: 100%;
|
||
|
|
height: 32px;
|
||
|
|
cursor: pointer;
|
||
|
|
background: transparent;
|
||
|
|
border-color: transparent;
|
||
|
|
color: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type=range]::-ms-fill-lower {
|
||
|
|
background: rgba(242, 242, 242, 0.65);
|
||
|
|
border: 0px solid #010101;
|
||
|
|
border-radius: 50px;
|
||
|
|
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type=range]::-ms-fill-upper {
|
||
|
|
background: rgba(255, 255, 255, 0.65);
|
||
|
|
border: 0px solid #010101;
|
||
|
|
border-radius: 50px;
|
||
|
|
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type=range]::-ms-thumb {
|
||
|
|
box-shadow: 0.4px 0.4px 0.4px #000031, 0px 0px 0.4px #00004b;
|
||
|
|
border: 2.6px solid #ffffff;
|
||
|
|
width: 26px;
|
||
|
|
border-radius: 26px;
|
||
|
|
background: rgba(255, 255, 255, 0);
|
||
|
|
cursor: pointer;
|
||
|
|
height: 26px;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type=range]:focus::-ms-fill-lower {
|
||
|
|
background: rgba(255, 255, 255, 0.65);
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type=range]:focus::-ms-fill-upper {
|
||
|
|
background: rgba(255, 255, 255, 0.65);
|
||
|
|
}
|
||
|
|
input[type=range] #speedslider {
|
||
|
|
-webkit-appearance: none;
|
||
|
|
width: 228px;
|
||
|
|
margin-top: 10px;
|
||
|
|
background-color: rgba(0, 0, 0, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type=range]:focus #speedslider {
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type=range]::-webkit-slider-runnable-track #speedslider {
|
||
|
|
width: 100%;
|
||
|
|
height: 32px;
|
||
|
|
cursor: pointer;
|
||
|
|
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||
|
|
background: #66d1ff;
|
||
|
|
/* Old browsers */
|
||
|
|
background: -moz-linear-gradient(45deg, #66d1ff 0%, #ff6a00 100%);
|
||
|
|
/* FF3.6-15 */
|
||
|
|
background: -webkit-linear-gradient(45deg, #66d1ff 0%, #ff6a00 100%);
|
||
|
|
/* Chrome10-25,Safari5.1-6 */
|
||
|
|
background: linear-gradient(45deg, #66d1ff 0%, #ff6a00 100%);
|
||
|
|
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||
|
|
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#66d1ff', endColorstr='#ff6a00', GradientType=1);
|
||
|
|
/* IE6-9 fallback on horizontal gradient */
|
||
|
|
border-radius: 25px;
|
||
|
|
border: 0px solid #010101;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type=range]::-webkit-slider-thumb #speedslider {
|
||
|
|
box-shadow: 0.4px 0.4px 0.4px #000031, 0px 0px 0.4px #00004b;
|
||
|
|
border: 2.6px solid #ffffff;
|
||
|
|
height: 26px;
|
||
|
|
width: 26px;
|
||
|
|
border-radius: 26px;
|
||
|
|
background: rgba(255, 255, 255, 0);
|
||
|
|
cursor: pointer;
|
||
|
|
-webkit-appearance: none;
|
||
|
|
margin-top: 3.3px;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type=range]:focus::-webkit-slider-runnable-track #speedslider {
|
||
|
|
background: #66d1ff;
|
||
|
|
/* Old browsers */
|
||
|
|
background: -moz-linear-gradient(45deg, #66d1ff 0%, #ff6a00 100%);
|
||
|
|
/* FF3.6-15 */
|
||
|
|
background: -webkit-linear-gradient(45deg, #66d1ff 0%, #ff6a00 100%);
|
||
|
|
/* Chrome10-25,Safari5.1-6 */
|
||
|
|
background: linear-gradient(45deg, #66d1ff 0%, #ff6a00 100%);
|
||
|
|
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||
|
|
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#66d1ff', endColorstr='#ff6a00', GradientType=1);
|
||
|
|
/* IE6-9 fallback on horizontal gradient */
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type=range]::-moz-range-track #speedslider {
|
||
|
|
width: 100%;
|
||
|
|
height: 32px;
|
||
|
|
cursor: pointer;
|
||
|
|
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||
|
|
background: #66d1ff;
|
||
|
|
/* Old browsers */
|
||
|
|
background: -moz-linear-gradient(45deg, #66d1ff 0%, #ff6a00 100%);
|
||
|
|
/* FF3.6-15 */
|
||
|
|
background: -webkit-linear-gradient(45deg, #66d1ff 0%, #ff6a00 100%);
|
||
|
|
/* Chrome10-25,Safari5.1-6 */
|
||
|
|
background: linear-gradient(45deg, #66d1ff 0%, #ff6a00 100%);
|
||
|
|
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||
|
|
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#66d1ff', endColorstr='#ff6a00', GradientType=1);
|
||
|
|
/* IE6-9 fallback on horizontal gradient */
|
||
|
|
border-radius: 25px;
|
||
|
|
border: 0px solid #010101;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type=range]::-moz-range-thumb #speedslider {
|
||
|
|
box-shadow: 0.4px 0.4px 0.4px #000031, 0px 0px 0.4px #00004b;
|
||
|
|
border: 2.6px solid #ffffff;
|
||
|
|
height: 26px;
|
||
|
|
width: 26px;
|
||
|
|
border-radius: 26px;
|
||
|
|
background: rgba(255, 255, 255, 0);
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type=range]::-ms-track #speedslider {
|
||
|
|
width: 100%;
|
||
|
|
height: 32px;
|
||
|
|
cursor: pointer;
|
||
|
|
background: transparent;
|
||
|
|
border-color: transparent;
|
||
|
|
color: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type=range]::-ms-fill-lower #speedslider {
|
||
|
|
background: rgba(242, 242, 242, 0.65);
|
||
|
|
border: 0px solid #010101;
|
||
|
|
border-radius: 50px;
|
||
|
|
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type=range]::-ms-fill-upper #speedslider {
|
||
|
|
background: rgba(255, 255, 255, 0.65);
|
||
|
|
border: 0px solid #010101;
|
||
|
|
border-radius: 50px;
|
||
|
|
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type=range]::-ms-thumb #speedslider {
|
||
|
|
box-shadow: 0.4px 0.4px 0.4px #000031, 0px 0px 0.4px #00004b;
|
||
|
|
border: 2.6px solid #ffffff;
|
||
|
|
width: 26px;
|
||
|
|
border-radius: 26px;
|
||
|
|
background: rgba(255, 255, 255, 0);
|
||
|
|
cursor: pointer;
|
||
|
|
height: 26px;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type=range]:focus::-ms-fill-lower #speedslider {
|
||
|
|
background: rgba(255, 255, 255, 0.65);
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type=range]:focus::-ms-fill-upper #speedslider {
|
||
|
|
background: rgba(255, 255, 255, 0.65);
|
||
|
|
}
|
||
|
|
input[type=range] #brightslider {
|
||
|
|
-webkit-appearance: none;
|
||
|
|
width: 228px;
|
||
|
|
margin-top: 10px;
|
||
|
|
background-color: rgba(0, 0, 0, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type=range]:focus #brightslider {
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type=range]::-webkit-slider-runnable-track #brightslider {
|
||
|
|
width: 100%;
|
||
|
|
height: 32px;
|
||
|
|
cursor: pointer;
|
||
|
|
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||
|
|
background: #111111;
|
||
|
|
/* Old browsers */
|
||
|
|
background: -moz-linear-gradient(45deg, #111111 0%, #ff6a00 100%);
|
||
|
|
/* FF3.6-15 */
|
||
|
|
background: -webkit-linear-gradient(45deg, #111111 0%, #ff6a00 100%);
|
||
|
|
/* Chrome10-25,Safari5.1-6 */
|
||
|
|
background: linear-gradient(45deg, #111111 0%, #ff6a00 100%);
|
||
|
|
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||
|
|
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#111111', endColorstr='#ff6a00', GradientType=1);
|
||
|
|
/* IE6-9 fallback on horizontal gradient */
|
||
|
|
border-radius: 25px;
|
||
|
|
border: 0px solid #010101;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type=range]::-webkit-slider-thumb #brightslider {
|
||
|
|
box-shadow: 0.4px 0.4px 0.4px #000031, 0px 0px 0.4px #00004b;
|
||
|
|
border: 2.6px solid #ffffff;
|
||
|
|
height: 26px;
|
||
|
|
width: 26px;
|
||
|
|
border-radius: 26px;
|
||
|
|
background: rgba(255, 255, 255, 0);
|
||
|
|
cursor: pointer;
|
||
|
|
-webkit-appearance: none;
|
||
|
|
margin-top: 3.3px;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type=range]:focus::-webkit-slider-runnable-track #brightslider {
|
||
|
|
background: #111111;
|
||
|
|
/* Old browsers */
|
||
|
|
background: -moz-linear-gradient(45deg, #111111 0%, #ff6a00 100%);
|
||
|
|
/* FF3.6-15 */
|
||
|
|
background: -webkit-linear-gradient(45deg, #111111 0%, #ff6a00 100%);
|
||
|
|
/* Chrome10-25,Safari5.1-6 */
|
||
|
|
background: linear-gradient(45deg, #111111 0%, #ff6a00 100%);
|
||
|
|
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||
|
|
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#111111', endColorstr='#ff6a00', GradientType=1);
|
||
|
|
/* IE6-9 fallback on horizontal gradient */
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type=range]::-moz-range-track #brightslider {
|
||
|
|
width: 100%;
|
||
|
|
height: 32px;
|
||
|
|
cursor: pointer;
|
||
|
|
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||
|
|
background: #111111;
|
||
|
|
/* Old browsers */
|
||
|
|
background: -moz-linear-gradient(45deg, #111111 0%, #ff6a00 100%);
|
||
|
|
/* FF3.6-15 */
|
||
|
|
background: -webkit-linear-gradient(45deg, #111111 0%, #ff6a00 100%);
|
||
|
|
/* Chrome10-25,Safari5.1-6 */
|
||
|
|
background: linear-gradient(45deg, #111111 0%, #ff6a00 100%);
|
||
|
|
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||
|
|
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#111111', endColorstr='#ff6a00', GradientType=1);
|
||
|
|
/* IE6-9 fallback on horizontal gradient */
|
||
|
|
border-radius: 25px;
|
||
|
|
border: 0px solid #010101;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type=range]::-moz-range-thumb #brightslider {
|
||
|
|
box-shadow: 0.4px 0.4px 0.4px #000031, 0px 0px 0.4px #00004b;
|
||
|
|
border: 2.6px solid #ffffff;
|
||
|
|
height: 26px;
|
||
|
|
width: 26px;
|
||
|
|
border-radius: 26px;
|
||
|
|
background: rgba(255, 255, 255, 0);
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type=range]::-ms-track #brightslider {
|
||
|
|
width: 100%;
|
||
|
|
height: 32px;
|
||
|
|
cursor: pointer;
|
||
|
|
background: transparent;
|
||
|
|
border-color: transparent;
|
||
|
|
color: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type=range]::-ms-fill-lower #brightslider {
|
||
|
|
background: rgba(242, 242, 242, 0.65);
|
||
|
|
border: 0px solid #010101;
|
||
|
|
border-radius: 50px;
|
||
|
|
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type=range]::-ms-fill-upper #brightslider {
|
||
|
|
background: rgba(255, 255, 255, 0.65);
|
||
|
|
border: 0px solid #010101;
|
||
|
|
border-radius: 50px;
|
||
|
|
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type=range]::-ms-thumb #brightslider {
|
||
|
|
box-shadow: 0.4px 0.4px 0.4px #000031, 0px 0px 0.4px #00004b;
|
||
|
|
border: 2.6px solid #ffffff;
|
||
|
|
width: 26px;
|
||
|
|
border-radius: 26px;
|
||
|
|
background: rgba(255, 255, 255, 0);
|
||
|
|
cursor: pointer;
|
||
|
|
height: 26px;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type=range]:focus::-ms-fill-lower #brightslider {
|
||
|
|
background: rgba(255, 255, 255, 0.65);
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type=range]:focus::-ms-fill-upper #brightslider {
|
||
|
|
background: rgba(255, 255, 255, 0.65);
|
||
|
|
}
|
||
|
|
|
||
|
|
.onoffswitch {
|
||
|
|
position: relative;
|
||
|
|
width: 58px;
|
||
|
|
-webkit-user-select: none;
|
||
|
|
-moz-user-select: none;
|
||
|
|
-ms-user-select: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.onoffswitch-checkbox {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.onoffswitch-label {
|
||
|
|
display: block;
|
||
|
|
overflow: hidden;
|
||
|
|
cursor: pointer;
|
||
|
|
height: 24px;
|
||
|
|
padding: 0;
|
||
|
|
line-height: 24px;
|
||
|
|
border: 2px solid #999999;
|
||
|
|
border-radius: 24px;
|
||
|
|
background-color: #EEEEEE;
|
||
|
|
transition: background-color 0.3s ease-in;
|
||
|
|
}
|
||
|
|
|
||
|
|
.onoffswitch-label:before {
|
||
|
|
content: "";
|
||
|
|
display: block;
|
||
|
|
width: 24px;
|
||
|
|
margin: 0px;
|
||
|
|
background: #FFFFFF;
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
bottom: 0;
|
||
|
|
right: 32px;
|
||
|
|
border: 2px solid #999999;
|
||
|
|
border-radius: 24px;
|
||
|
|
transition: all 0.3s ease-in 0s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.onoffswitch-checkbox:checked + .onoffswitch-label {
|
||
|
|
background-color: #34A7C1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.onoffswitch-checkbox:checked + .onoffswitch-label,
|
||
|
|
.onoffswitch-checkbox:checked + .onoffswitch-label:before {
|
||
|
|
border-color: #34A7C1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.onoffswitch-checkbox:checked + .onoffswitch-label:before {
|
||
|
|
right: 0px;
|
||
|
|
}
|
||
|
|
section.range-slider {
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
height: 50px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
section.range-slider input {
|
||
|
|
pointer-events: none;
|
||
|
|
position: absolute;
|
||
|
|
overflow: hidden;
|
||
|
|
left: 0;
|
||
|
|
top: 30px;
|
||
|
|
width: 100%;
|
||
|
|
outline: none;
|
||
|
|
height: 32px;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
section.range-slider input::-webkit-slider-thumb {
|
||
|
|
pointer-events: all;
|
||
|
|
position: relative;
|
||
|
|
z-index: 1;
|
||
|
|
outline: 0;
|
||
|
|
}
|
||
|
|
section.range-slider input::-moz-range-thumb {
|
||
|
|
pointer-events: all;
|
||
|
|
position: relative;
|
||
|
|
z-index: 10;
|
||
|
|
-moz-appearance: none;
|
||
|
|
width: 9px;
|
||
|
|
}
|
||
|
|
section.range-slider input::-moz-range-track {
|
||
|
|
position: relative;
|
||
|
|
z-index: -1;
|
||
|
|
background-color: rgba(0, 0, 0, 1);
|
||
|
|
border: 0;
|
||
|
|
}
|
||
|
|
section.range-slider input:last-of-type::-moz-range-track {
|
||
|
|
-moz-appearance: none;
|
||
|
|
background: none transparent;
|
||
|
|
border: 0;
|
||
|
|
}
|
||
|
|
section.range-slider input[type=range]::-moz-focus-outer {
|
||
|
|
border: 0;
|
||
|
|
}
|
||
|
|
.cyclebtns li{
|
||
|
|
width:30%;
|
||
|
|
float:left;
|
||
|
|
text-align:center;
|
||
|
|
border:solid;
|
||
|
|
border-color:white;
|
||
|
|
margin: 1px;
|
||
|
|
padding-top: 10px;
|
||
|
|
padding-bottom: 10px;
|
||
|
|
border-radius: 29px;
|
||
|
|
list-style:none;
|
||
|
|
border-radius:30px;
|
||
|
|
}
|
||
|
|
li {
|
||
|
|
box-shadow: rgba(255,255,255,0) 0 0 0px;
|
||
|
|
}
|
||
|
|
.flash{
|
||
|
|
box-shadow: rgba(255,255,255,1) 0 0 80px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body style="padding:30px;">
|
||
|
|
<!-- Begin page content -->
|
||
|
|
<main class="container" role="main" style="max-width:280px; margin-left:auto; margin-right:auto; text-align:center;">
|
||
|
|
<div style="width:100%; max-width:260px; margin-left:auto; margin-right:auto; font-size:12px; margin-bottom:20px;">
|
||
|
|
<div style="width:50%; float:left; text-align:left;">
|
||
|
|
<p>WLED</p><a href="#" onclick="togglePower();"><img src="data:image/png;base64,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
|
||
|
|
</div>
|
||
|
|
<div style="width:50%; float:left; text-align:right;">
|
||
|
|
<p style="text-align: right; margin-bottom: 5px;">FX 2nd Color</p>
|
||
|
|
<div class="onoffswitch" style="float:right;">
|
||
|
|
<input class="onoffswitch-checkbox" id="myonoffswitch" name="onoffswitch" type="checkbox"> <label class="onoffswitch-label" for="myonoffswitch"></label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="color-picker-container" style="margin-left: auto; margin-right: auto; width:280px;"></div>
|
||
|
|
<div>
|
||
|
|
<p style="margin-bottom: -4px;">Brightness</p><input id="brightslider" max="255" min="0" type="range" value="222">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p style="margin-bottom: -4px;">Speed</p><input id="speedslider" max="255" min="50" type="range" value="222">
|
||
|
|
</div>
|
||
|
|
<div class="row segment" style="">
|
||
|
|
<div class="colourCol" onclick="presetColour('#ff0000');" style="background-color:#ff0000;">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="colourCol" onclick="presetColour('#ff4d00');" style="background-color:#ff4d00;">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="colourCol" onclick="presetColour('#ffc800');" style="background-color:#ffc800;">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="colourCol" onclick="presetColour('#08ff00');" style="background-color:#08ff00;">
|
||
|
|
|
||
|
|
</div><br>
|
||
|
|
<div class="colourCol" onclick="presetColour('#0000ff');" style="background-color:#0000ff;">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="colourCol" onclick="presetColour('#b700ff');" style="background-color:#b700ff;">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="colourCol" onclick="presetColour('#ff00ee');" style="background-color:#ff00ee;">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="colourCol" onclick="presetColour('#ffffff');" style="background-color:#ffffff;">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row segment" style="height:250px;">
|
||
|
|
<div style="height: 51px;">
|
||
|
|
<p style="text-align: right; margin-bottom: 5px;">Edit Presets</p>
|
||
|
|
<div class="onoffswitch" style="float:right;">
|
||
|
|
<input class="onoffswitch-checkbox onoffswitch-checkbox-ps" id="myonoffswitch-ps" name="onoffswitch-ps" type="checkbox"> <label class="onoffswitch-label" for="myonoffswitch-ps"></label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<p style="text-align:center;">Presets</p>
|
||
|
|
<div class="colourCol" onclick="preset(1);">
|
||
|
|
1
|
||
|
|
</div>
|
||
|
|
<div class="colourCol" onclick="preset(2);">
|
||
|
|
2
|
||
|
|
</div>
|
||
|
|
<div class="colourCol" onclick="preset(3);">
|
||
|
|
3
|
||
|
|
</div>
|
||
|
|
<div class="colourCol" onclick="preset(4);">
|
||
|
|
4
|
||
|
|
</div><br>
|
||
|
|
<div class="colourCol" onclick="preset(5);">
|
||
|
|
5
|
||
|
|
</div>
|
||
|
|
<div class="colourCol" onclick="preset(6);">
|
||
|
|
6
|
||
|
|
</div>
|
||
|
|
<div class="colourCol" onclick="preset(7);">
|
||
|
|
7
|
||
|
|
</div>
|
||
|
|
<div class="colourCol" onclick="preset(8);">
|
||
|
|
8
|
||
|
|
</div><br>
|
||
|
|
<div class="colourCol" onclick="preset(9);">
|
||
|
|
9
|
||
|
|
</div>
|
||
|
|
<div class="colourCol" onclick="preset(10);">
|
||
|
|
10
|
||
|
|
</div>
|
||
|
|
<div class="colourCol" onclick="preset(11);">
|
||
|
|
11
|
||
|
|
</div>
|
||
|
|
<div class="colourCol" onclick="preset(12);">
|
||
|
|
12
|
||
|
|
</div><br>
|
||
|
|
<div class="colourCol" onclick="preset(13);">
|
||
|
|
13
|
||
|
|
</div>
|
||
|
|
<div class="colourCol" onclick="preset(14);">
|
||
|
|
14
|
||
|
|
</div>
|
||
|
|
<div class="colourCol" onclick="preset(15);">
|
||
|
|
15
|
||
|
|
</div>
|
||
|
|
<div class="colourCol" onclick="preset(16);">
|
||
|
|
16
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row segment" style="height:50px; padding-top:100px;">
|
||
|
|
<p style="text-align: right; margin-bottom: 5px; padding:10px; padding-bottom:0px;">Cycle Mode</p>
|
||
|
|
<div class="onoffswitch" style="float:right;">
|
||
|
|
<input class="onoffswitch-checkbox onoffswitch-checkbox-cy" id="myonoffswitch-cy" name="onoffswitch-cy" onclick="toggleCycle();" type="checkbox"> <label class="onoffswitch-label" for="myonoffswitch-cy"></label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<p style="padding:15px; padding-bottom:0px;">Cycle Range</p>
|
||
|
|
<section class="range-slider">
|
||
|
|
<span class="rangeValues" style="font-size:20px;"></span> <input max="16" min="1" step="1" type="range" value="1"> <input max="16" min="1" step="1" type="range" value="2">
|
||
|
|
</section>
|
||
|
|
<div class="row segment cyclebtns" style="height:240px; padding-top:10px;">
|
||
|
|
<ul style="padding:0px;">
|
||
|
|
<li onclick="LEDCommand('/win&PC=1&PX=0');">Color</li>
|
||
|
|
<li onclick="LEDCommand('/win&PX=1&PC=0');">Effects</li>
|
||
|
|
<li onclick="LEDCommand('/win&PX=1&PC=1');">Both</li>
|
||
|
|
</ul>
|
||
|
|
<div style="padding-top:50px;">
|
||
|
|
<p id="PSDurationLabel" style="margin-bottom: -4px;">Preset Duration</p><input id="cyclespeedslider" max="65000" min="50" type="range" step="50" value="5000">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p id="CDurationLabel" style="margin-bottom: -4px;">Color Transition</p><input id="cycletransitionslider" max="65000" min="0" step="50" type="range" value="500">
|
||
|
|
</div>
|
||
|
|
</div><!--<div class="row" id="gradients" style="margin-top:10px; width:100%; height:145px; max-width:260px; margin-left:auto; margin-right:auto; font-size:24px;">
|
||
|
|
</div>-->
|
||
|
|
<ul id='mode' style="margin-top:20px;">
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=0" target="controlframe">Solid</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=1" target="controlframe">Blink</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=2" target="controlframe">Breathe</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=3" target="controlframe">Wipe</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=4" target="controlframe">Wipe Random</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=5" target="controlframe">Random Full Colours</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=6" target="controlframe">Random Single Colours</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=7" target="controlframe">Random Multi Colours</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=8" target="controlframe">Rainbow Full</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=9" target="controlframe">Rainbow Cycle</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=10" target="controlframe">Scan</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=11" target="controlframe">Double Scan</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=12" target="controlframe">Fade Out</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=13" target="controlframe">Chase</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=14" target="controlframe">Chase Rainbow</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=15" target="controlframe">Running</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=16" target="controlframe">Twinkle</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=17" target="controlframe">Twinkle Random</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=18" target="controlframe">Twinkle Fade</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=19" target="controlframe">Twinkle Random Fade</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=20" target="controlframe">Sparkle</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=21" target="controlframe">Dark Sparkle</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=22" target="controlframe">Dark Sparkle+</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=23" target="controlframe">Strobe</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=24" target="controlframe">Strobe Rainbow</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=25" target="controlframe">Double Strobe</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=26" target="controlframe">Blink Rainbow</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=27" target="controlframe">Chase+</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=28" target="controlframe">Dark Chase</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=29" target="controlframe">Dark Chase Random</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=30" target="controlframe">Dark Chase Rainbow</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=31" target="controlframe">Chase Flash</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=32" target="controlframe">Dark Chase Random</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=33" target="controlframe">Rainbow Runner</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=34" target="controlframe">Colourful</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=35" target="controlframe">Traffic Light</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=36" target="controlframe">Sweep Random</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=37" target="controlframe">Running 2</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=38" target="controlframe">Red & Blue</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=39" target="controlframe">Running 2 Random</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=40" target="controlframe">Scanner</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=41" target="controlframe">Lighthouse</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=42" target="controlframe">Fireworks</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=43" target="controlframe">Fireworks Random</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=44" target="controlframe">Merry Christmas</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=45" target="controlframe">Fire Flicker</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=46" target="controlframe">Gradient</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=47" target="controlframe">Gradient Loading</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=48" target="controlframe">In Out</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=49" target="controlframe">In In</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=50" target="controlframe">Out Out</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=51" target="controlframe">Out In</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=52" target="controlframe">Circus</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=53" target="controlframe">New Chase</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=54" target="controlframe">New Chase Rainbow Loop</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=55" target="controlframe">New Chase Rainbow</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=56" target="controlframe">New Chase Blink</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/win&FX=57" target="controlframe">Random Chaos</a>
|
||
|
|
</li>
|
||
|
|
</ul><iframe id="stf" name="controlframe" onload="feedback();" style="display:none;"></iframe>
|
||
|
|
</main>
|
||
|
|
<script>
|
||
|
|
/*!
|
||
|
|
* iro.js v3.3.0
|
||
|
|
* 2016-2018 James Daniel
|
||
|
|
* Released under the MIT license
|
||
|
|
* github.com/jaames/iro.js
|
||
|
|
*/
|
||
|
|
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.iro=e():t.iro=e()}(this,function(){return function(t){function e(s){if(r[s])return r[s].exports;var n=r[s]={i:s,l:!1,exports:{}};return t[s].call(n.exports,n,n.exports,e),n.l=!0,n.exports}var r={};return e.m=t,e.c=r,e.i=function(t){return t},e.d=function(t,r,s){e.o(t,r)||Object.defineProperty(t,r,{configurable:!1,enumerable:!0,get:s})},e.n=function(t){var r=t&&t.t?function(){return t.default}:function(){return t};return e.d(r,"a",r),r},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=4)}([function(t,e,r){"use strict";function s(t){var e,r,s,n,i,o,a,h,c=t.h/360,u=t.s/100,l=t.v/100;switch(n=k(6*c),i=6*c-n,o=l*(1-u),a=l*(1-i*u),h=l*(1-(1-i)*u),n%6){case 0:e=l,r=h,s=o;break;case 1:e=a,r=l,s=o;break;case 2:e=o,r=l,s=h;break;case 3:e=o,r=a,s=l;break;case 4:e=h,r=o,s=l;break;case 5:e=l,r=o,s=a}return{r:w(255*e),g:w(255*r),b:w(255*s)}}function n(t){var e,r=t.r/255,s=t.g/255,n=t.b/255,i=Math.max(r,s,n),o=Math.min(r,s,n),a=i-o;switch(i){case o:e=0;break;case r:e=(s-n)/a+(s<n?6:0);break;case s:e=(n-r)/a+2;break;case n:e=(r-s)/a+4}return e/=6,{h:w(360*e),s:w(0==i?0:a/i*100),v:w(100*i)}}function i(t){var e=t.s/100,r=t.v/100,s=.5*r*(2-e);return e=r*e/(1-Math.abs(2*s-1)),{h:t.h,s:w(100*e)||0,l:w(100*s)}}function o(t){var e=t.s/100,r=t.l/100;return r*=2,e*=r<=1?r:2-r,{h:t.h,s:w(2*e/(r+e)*100),v:w((r+e)/2*100)}}function a(t){return"rgb"+(t.a?"a":"")+"("+t.r+", "+t.g+", "+t.b+(t.a?", "+t.a:"")+")"}function h(t){return"hsl"+(t.a?"a":"")+"("+t.h+", "+t.s+"%, "+t.l+"%"+(t.a?", "+t.a:"")+")"}function c(t){var e=t.r,r=t.g,s=t.b,n=e%17==0&&r%17==0&&s%17==0,i=n?17:1,o=n?4:8,a=n?4:7,h=e/i<<2*o|r/i<<o|s/i,c=h.toString(16);return"#"+new Array(a-c.length).join("0")+c}function u(t,e){var r=t.match(/(\S+)\((\d+)(%?)(?:\D+?)(\d+)(%?)(?:\D+?)(\d+)(%?)(?:\D+?)?([0-9\.]+?)?\)/i),s=parseInt(r[2]),n=parseInt(r[4]),i=parseInt(r[6]);return[r[1],"%"==r[3]?s/100*e[0]:s,"%"==r[5]?n/100*e[1]:n,"%"==r[7]?i/100*e[2]:i,parseFloat(r[8])||void 0]}function l(t){var e=u(t,[255,255,255]);return{r:e[1],g:e[2],b:e[3]}}function f(t){var e=u(t,[360,100,100]);return{h:e[2],s:e[3],l:e[4]}}function v(t){t=t.replace("#","");var e=parseInt("0x"+t),r=3==t.length,s=r?15:255,n=r?4:8,i=r?17:1;return{r:(e>>2*n&s)*i,g:(e>>n&s)*i,b:(e&s)*i}}function p(t){return t instanceof x?t:new x(t)}function d(t,e,r){return t<=e?e:t>=r?r:t}function g(t,e){var r={};for(var s in t)r[s]=e[s]!=t[s];return r}function _(t,e,r){var s=p(t).rgb,n=p(e).rgb;return r=d(r/100||.5,0,1),new x({r:k(s.r+(n.r-s.r)*r),g:k(s.g+(n.g-s.g)*r),b:k(s.b+(n.b-s.b)*r)})}function m(t,e){var r=p(t),s=r.hsv;return s.v=d(s.v+e,0,100),r.hsv=s,r}function y(t,e){var r=p(t),s=r.hsv;return s.v=d(s.v-e,0,100),r.hsv=s,r}var b="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},w=Math.round,k=Math.floor,x=function(t){this.e=!1,this.u={h:void 0,s:void 0,v:void 0},t&&this.set(t)};x.mix=_,x.lighten=m,x.darken=y,x.hsv2Rgb=s,x.rgb2Hsv=n,x.hsv2Hsl=i,x.hsl2Hsv=o,x.hsl2Str=h,x.rgb2Str=a,x.rgb2Hex=c,x.parseHexStr=v,x.parseHslStr=f,x.parseRgbStr=l,x.prototype={constructor:x,set:function(t){"object"==(void 0===t?"undefined":b(t))?t instanceof x?this.hsv=x.hsv:"r"in t?this.rgb=t:"v"in t?this.hsv=t:"l"in t&&(this.hsl=t):"string"==typeof t&&(/^rgb/.test(t)?this.rgbString=t:/^hsl/.test(t)?this.hslString=t:/^#[0-9A-Fa-f]/.test(t)&&(this.hexString=t))},setChannel:function(t,e,r){var s=this[t];s[e]=r,this[t]=s},clone:function(){return new x(this)},compare:function(t,e){return e=e||"hsv",g(this[e],p(t)[e])},mix:function(t,e){this.hsv=_(this,t,e).hsv},lighten:function(t){m(this,t)},darken:function(t){y(this,t)}},Object.defineProperties(x.prototype,{hsv:{get:function(){var t=this.u;return{h:t.h,s:t.s,v:t.v}},set:function(t){if(this.e){var e=this.u;for(var r in e)t.hasOwnProperty(r)||(t[r]=e[r]);var s=g(e,t);this.
|
||
|
|
</script>
|
||
|
|
<script>
|
||
|
|
//Feedback
|
||
|
|
function feedback(){
|
||
|
|
var e = document.body;
|
||
|
|
|
||
|
|
e.classList.remove("feedbackanim");
|
||
|
|
void e.offsetWidth;
|
||
|
|
e.classList.add("feedbackanim");
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
//Speed slider
|
||
|
|
document.getElementById('speedslider').onchange = function() {
|
||
|
|
var speedurl = '/win&SX=' + this.value;
|
||
|
|
LEDCommand(speedurl);
|
||
|
|
}
|
||
|
|
//Brightness slider
|
||
|
|
document.getElementById('brightslider').onchange = function() {
|
||
|
|
var brighturl = '/win&A=' + this.value;
|
||
|
|
LEDCommand(brighturl);
|
||
|
|
}
|
||
|
|
//Preset speed slider
|
||
|
|
document.getElementById('cyclespeedslider').onchange = function() {
|
||
|
|
var val = this.value;
|
||
|
|
var url = '/win&PT=' + val;
|
||
|
|
var seconds = millisToMinutesAndSeconds(val);
|
||
|
|
LEDCommand(url);
|
||
|
|
document.getElementById('PSDurationLabel').innerHTML = 'Preset Duration (' + seconds + ')';
|
||
|
|
}
|
||
|
|
//Cycle Transition slider
|
||
|
|
document.getElementById('cycletransitionslider').onchange = function() {
|
||
|
|
var val = this.value;
|
||
|
|
var seconds = millisToMinutesAndSeconds(val);
|
||
|
|
var url = '/win&TT=' + this.value;
|
||
|
|
document.getElementById('CDurationLabel').innerHTML = 'Color Transition (' + seconds + ')';
|
||
|
|
LEDCommand(url);
|
||
|
|
}
|
||
|
|
var demoColorPicker = new iro.ColorPicker("#color-picker-container", {
|
||
|
|
// Set the size of the color picker UI
|
||
|
|
width: 280,
|
||
|
|
height: 280,
|
||
|
|
// Set the initial color to red
|
||
|
|
color: "#FFF"
|
||
|
|
});
|
||
|
|
function toggleCycle(){
|
||
|
|
if (document.getElementById('myonoffswitch-cy').checked)
|
||
|
|
{
|
||
|
|
LEDCommand('win&CY=1');
|
||
|
|
} else {
|
||
|
|
LEDCommand('win&CY=0');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function millisToMinutesAndSeconds(millis) {
|
||
|
|
var minutes = Math.floor(millis / 60000);
|
||
|
|
var seconds = ((millis % 60000) / 1000).toFixed(0);
|
||
|
|
return minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
|
||
|
|
}
|
||
|
|
window.onload = function () {
|
||
|
|
demoColorPicker.on("color:change", function(color, changes) {
|
||
|
|
// Log the color's hex RGB value to the dev console
|
||
|
|
console.log(color.rgb);
|
||
|
|
//console.log("r = " + color.rgb.r);
|
||
|
|
var cr = color.rgb.r;
|
||
|
|
var cg = color.rgb.g;
|
||
|
|
var cb = color.rgb.b;
|
||
|
|
//Secondary color
|
||
|
|
if (document.querySelector('.onoffswitch-checkbox').checked == true) {
|
||
|
|
var rgburl = "/win&R2=" + cr + "&G2=" + cg + "&B2=" + cb;
|
||
|
|
LEDCommand(rgburl);
|
||
|
|
}
|
||
|
|
//Primary color
|
||
|
|
if (document.querySelector('.onoffswitch-checkbox').checked == false) {
|
||
|
|
var rgburl = "/win&R=" + cr + "&G=" + cg + "&B=" + cb;
|
||
|
|
LEDCommand(rgburl);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
// Initialize Sliders
|
||
|
|
var sliderSections = document.getElementsByClassName("range-slider");
|
||
|
|
for( var x = 0; x < sliderSections.length; x++ ){
|
||
|
|
var sliders = sliderSections[x].getElementsByTagName("input");
|
||
|
|
for( var y = 0; y < sliders.length; y++ ){
|
||
|
|
if( sliders[y].type ==="range" ){
|
||
|
|
sliders[y].oninput = getVals;
|
||
|
|
// Manually trigger event first time to display values
|
||
|
|
sliders[y].oninput();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function LEDCommand(rgburl){
|
||
|
|
document.getElementById('stf').src = rgburl;
|
||
|
|
console.log(rgburl);
|
||
|
|
}
|
||
|
|
function presetColour(colour) {
|
||
|
|
var pc = iro.Color.parseHexStr(colour);
|
||
|
|
console.log(pc);
|
||
|
|
var cr = pc.r;
|
||
|
|
var cg = pc.g;
|
||
|
|
var cb = pc.b;
|
||
|
|
if (document.querySelector('.onoffswitch-checkbox').checked == true) {
|
||
|
|
var rgburl = "/win&R2=" + cr + "&G2=" + cg + "&B2=" + cb;
|
||
|
|
}
|
||
|
|
if (document.querySelector('.onoffswitch-checkbox').checked == false) {
|
||
|
|
var rgburl = "/win&R=" + cr + "&G=" + cg + "&B=" + cb;
|
||
|
|
}
|
||
|
|
LEDCommand(rgburl);
|
||
|
|
}
|
||
|
|
function togglePower(){
|
||
|
|
var s = document.getElementById("brightslider");
|
||
|
|
if (s.value > 20){
|
||
|
|
s.value = 0;
|
||
|
|
LEDCommand('/win&A=' + s.value);
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
s.value = 250;
|
||
|
|
LEDCommand('/win&A=' + s.value);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function toggleNight(){
|
||
|
|
LEDCommand('/win&ND');
|
||
|
|
alert("Night Light Activated. Check settings for details.");
|
||
|
|
}
|
||
|
|
function preset(presetNum){
|
||
|
|
if (document.querySelector('.onoffswitch-checkbox-ps').checked == false) {
|
||
|
|
var url = "/win&PL=" + presetNum;
|
||
|
|
}
|
||
|
|
if (document.querySelector('.onoffswitch-checkbox-ps').checked == true) {
|
||
|
|
var url = "/win&PS=" + presetNum;
|
||
|
|
}
|
||
|
|
LEDCommand(url);
|
||
|
|
}
|
||
|
|
function getVals(){
|
||
|
|
// Get slider values
|
||
|
|
var parent = this.parentNode;
|
||
|
|
var slides = parent.getElementsByTagName("input");
|
||
|
|
var slide1 = parseFloat( slides[0].value );
|
||
|
|
var slide2 = parseFloat( slides[1].value );
|
||
|
|
// Neither slider will clip the other, so make sure we determine which is larger
|
||
|
|
if( slide1 > slide2 ){ var tmp = slide2; slide2 = slide1; slide1 = tmp; }
|
||
|
|
|
||
|
|
var displayElement = parent.getElementsByClassName("rangeValues")[0];
|
||
|
|
displayElement.innerHTML = slide1 + " - " + slide2;
|
||
|
|
LEDCommand('/win&P1=' + slide1 + '&P2=' + slide2);
|
||
|
|
}
|
||
|
|
//Preset Gradients
|
||
|
|
function presetGradient(color1, color2){
|
||
|
|
|
||
|
|
}
|
||
|
|
//Hopefully Gradient Colors soon...
|
||
|
|
function gradientBtns(color1, color2, color3, color4, color5) {
|
||
|
|
document.getElementById("gradients").innerHTML = document.getElementById("gradients").innerHTML +
|
||
|
|
'<div onclick="presetGradient("' + color1 + ', ' + color2 + '");" class="colourCol" style="background: -moz-linear-gradient(left, ' + color1 + ' 0%, ' + color2 + ' 100%); background: -webkit-linear-gradient(left, ' + color1 + ' 0%,' + color2 + ' 100%); background: linear-gradient(to right, ' + color1 + ' 0%,' + color2 + '100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="' + color1 + '", endColorstr="' + color2 + '",GradientType=1 );> <\/div>';
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|