2016-09-11 23:07:18 +02:00
|
|
|
<!DOCTYPE html>
|
2017-05-08 20:20:48 +02:00
|
|
|
<html>
|
|
|
|
|
<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
|
2016-09-20 22:21:44 +02:00
|
|
|
<title>WLED 0.3pd</title>
|
2016-09-11 23:07:18 +02:00
|
|
|
<script>
|
|
|
|
|
strA = "";
|
|
|
|
|
strR = "";
|
|
|
|
|
strG = "";
|
|
|
|
|
strB = "";
|
2017-05-07 17:09:18 +02:00
|
|
|
strNL = "";
|
2017-05-07 23:51:42 +02:00
|
|
|
strNR = "";
|
|
|
|
|
strNS = "";
|
2017-05-08 20:20:48 +02:00
|
|
|
strMD = "";
|
|
|
|
|
strFX = "";
|
|
|
|
|
strSX = "";
|
2017-05-07 17:09:18 +02:00
|
|
|
var nla = false;
|
2017-05-07 23:51:42 +02:00
|
|
|
var nra = false;
|
|
|
|
|
var nsa = false;
|
|
|
|
|
var sto = false;
|
|
|
|
|
var hsb = false;
|
2017-05-08 20:20:48 +02:00
|
|
|
var fxa = false;
|
|
|
|
|
var lastsx = 0;
|
2016-09-11 23:07:18 +02:00
|
|
|
|
|
|
|
|
function Startup()
|
|
|
|
|
{
|
2017-05-08 20:20:48 +02:00
|
|
|
document.getElementById("fxI").addEventListener("keypress", function(event) {
|
|
|
|
|
if (event.keyCode == 13) {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
GetFX();
|
|
|
|
|
}
|
|
|
|
|
});
|
2016-10-20 22:03:56 +02:00
|
|
|
setInterval('GetArduinoIO()', 5000);
|
|
|
|
|
GetArduinoIO();
|
2016-09-11 23:07:18 +02:00
|
|
|
}
|
2016-10-20 22:03:56 +02:00
|
|
|
function GetArduinoIO()
|
2016-09-11 23:07:18 +02:00
|
|
|
{
|
2016-10-20 22:03:56 +02:00
|
|
|
nocache = "&nocache=" + Math.random() * 1000000;
|
2016-09-11 23:07:18 +02:00
|
|
|
var request = new XMLHttpRequest();
|
|
|
|
|
request.onreadystatechange = function()
|
|
|
|
|
{
|
|
|
|
|
if (this.readyState == 4) {
|
|
|
|
|
if (this.status == 200) {
|
|
|
|
|
if (this.responseXML != null) {
|
|
|
|
|
document.Ctrl_form.SA.value = this.responseXML.getElementsByTagName('act')[0].childNodes[0].nodeValue;
|
|
|
|
|
document.Ctrl_form.SR.value = this.responseXML.getElementsByTagName('cl')[0].childNodes[0].nodeValue;
|
|
|
|
|
document.Ctrl_form.SG.value = this.responseXML.getElementsByTagName('cl')[1].childNodes[0].nodeValue;
|
|
|
|
|
document.Ctrl_form.SB.value = this.responseXML.getElementsByTagName('cl')[2].childNodes[0].nodeValue;
|
2017-05-08 20:20:48 +02:00
|
|
|
if (document.activeElement != document.getElementById("fxI")) document.Ctrl_form.TF.value = this.responseXML.getElementsByTagName('fx')[0].childNodes[0].nodeValue;
|
|
|
|
|
document.Ctrl_form.SX.value = this.responseXML.getElementsByTagName('sx')[0].childNodes[0].nodeValue;
|
2017-05-07 17:09:18 +02:00
|
|
|
nla = (this.responseXML.getElementsByTagName('nl')[0].innerHTML)!=0?true:false;
|
2017-05-07 23:51:42 +02:00
|
|
|
nra = (this.responseXML.getElementsByTagName('nr')[0].innerHTML)!=0?true:false;
|
|
|
|
|
nsa = (this.responseXML.getElementsByTagName('ns')[0].innerHTML)!=0?true:false;
|
2017-05-08 20:20:48 +02:00
|
|
|
hsb = (this.responseXML.getElementsByTagName('md')[0].innerHTML)!=0?true:false;
|
2017-05-07 17:09:18 +02:00
|
|
|
document.getElementsByClassName("desc")[0].innerHTML = this.responseXML.getElementsByTagName('desc')[0].innerHTML;
|
2016-09-11 23:07:18 +02:00
|
|
|
UpdateVals();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// send HTTP request
|
2017-05-08 20:20:48 +02:00
|
|
|
request.open("GET", "win/" + strA + strR + strG + strB + strNL + strNR + strNS + strMD + strFX + strSX +nocache, true);
|
2016-09-11 23:07:18 +02:00
|
|
|
request.send(null);
|
2016-10-20 22:03:56 +02:00
|
|
|
strA = "";
|
|
|
|
|
strR = "";
|
|
|
|
|
strG = "";
|
|
|
|
|
strB = "";
|
2017-05-07 17:09:18 +02:00
|
|
|
strNL = "";
|
2017-05-07 23:51:42 +02:00
|
|
|
strNR = "";
|
|
|
|
|
strNS = "";
|
2017-05-08 20:20:48 +02:00
|
|
|
strMD = "";
|
|
|
|
|
strFX = "";
|
|
|
|
|
strSX = "";
|
2016-09-11 23:07:18 +02:00
|
|
|
}
|
|
|
|
|
function GetCheck()
|
2016-10-20 22:03:56 +02:00
|
|
|
{
|
|
|
|
|
strA = "&A=" + Ctrl_form.SA.value;
|
|
|
|
|
strR = "&R=" + Ctrl_form.SR.value;
|
|
|
|
|
strG = "&G=" + Ctrl_form.SG.value;
|
|
|
|
|
strB = "&B=" + Ctrl_form.SB.value;
|
2017-05-08 20:20:48 +02:00
|
|
|
UpdateVals();
|
|
|
|
|
GetArduinoIO();
|
|
|
|
|
}
|
|
|
|
|
function GetFX()
|
|
|
|
|
{
|
|
|
|
|
strFX = "&FX=" + Ctrl_form.TF.value;
|
|
|
|
|
strSX = "&SX=" + Ctrl_form.SX.value;
|
2016-09-11 23:07:18 +02:00
|
|
|
UpdateVals();
|
2016-10-20 22:03:56 +02:00
|
|
|
GetArduinoIO();
|
2016-09-11 23:07:18 +02:00
|
|
|
}
|
|
|
|
|
function rgb2hex(red, green, blue) {
|
|
|
|
|
var rgb = blue | (green << 8) | (red << 16);
|
|
|
|
|
return '#' + (0x1000000 + rgb).toString(16).slice(1)
|
|
|
|
|
}
|
|
|
|
|
function lingrad(red, green, blue) {
|
|
|
|
|
return "linear-gradient(white, " + rgb2hex(red, green, blue) + ")";
|
|
|
|
|
}
|
|
|
|
|
function UpdateVals()
|
|
|
|
|
{
|
|
|
|
|
document.body.style.background = lingrad(Ctrl_form.SR.value, Ctrl_form.SG.value, Ctrl_form.SB.value);
|
2017-05-07 23:51:42 +02:00
|
|
|
setHS(Ctrl_form.SR.value, Ctrl_form.SG.value, Ctrl_form.SB.value);
|
2017-05-08 20:20:48 +02:00
|
|
|
SetHSB();
|
2017-05-07 17:09:18 +02:00
|
|
|
if (nla) {
|
2017-05-07 23:51:42 +02:00
|
|
|
nlb.style.fill="green";
|
2017-05-07 17:09:18 +02:00
|
|
|
} else {
|
|
|
|
|
nlb.style.fill="black";
|
|
|
|
|
}
|
2017-05-07 23:51:42 +02:00
|
|
|
if (nra) {
|
|
|
|
|
nrb.style.fill="green";
|
|
|
|
|
} else {
|
|
|
|
|
nrb.style.fill="black";
|
|
|
|
|
}
|
|
|
|
|
if (nsa) {
|
|
|
|
|
nsb.style.fill="green";
|
|
|
|
|
} else {
|
|
|
|
|
nsb.style.fill="black";
|
|
|
|
|
}
|
|
|
|
|
}
|
2017-05-08 20:20:48 +02:00
|
|
|
function ToggleFX()
|
2017-05-07 23:51:42 +02:00
|
|
|
{
|
2017-05-08 20:20:48 +02:00
|
|
|
fxa = !fxa;
|
|
|
|
|
if (sto) CloseSettings();
|
|
|
|
|
SetFX();
|
|
|
|
|
}
|
|
|
|
|
function SwitchFX(s)
|
|
|
|
|
{
|
|
|
|
|
document.Ctrl_form.TF.value = parseInt(document.Ctrl_form.TF.value) +s;
|
|
|
|
|
if (document.Ctrl_form.TF.value < 0) document.Ctrl_form.TF.value = 0;
|
|
|
|
|
if (document.Ctrl_form.TF.value > 47) document.Ctrl_form.TF.value = 47;
|
|
|
|
|
GetFX();
|
|
|
|
|
}
|
|
|
|
|
function SetFX()
|
|
|
|
|
{
|
|
|
|
|
if (fxa) {
|
|
|
|
|
fxb.style.fill="green";
|
|
|
|
|
document.getElementById("slA").style.display="none";
|
|
|
|
|
document.getElementById("slR").style.display="none";
|
|
|
|
|
document.getElementById("slG").style.display="none";
|
|
|
|
|
document.getElementById("slB").style.display="none";
|
|
|
|
|
document.getElementById("slH").style.display="none";
|
|
|
|
|
document.getElementById("slS").style.display="none";
|
|
|
|
|
document.getElementById("slX").style.display="block";
|
|
|
|
|
document.getElementById("tlX").style.display="block";
|
|
|
|
|
} else {
|
|
|
|
|
fxb.style.fill="black";
|
|
|
|
|
document.getElementById("slA").style.display="block";
|
|
|
|
|
document.getElementById("slX").style.display="none";
|
|
|
|
|
document.getElementById("tlX").style.display="none";
|
|
|
|
|
SetHSB();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
function SetHSB()
|
|
|
|
|
{
|
|
|
|
|
if (fxa) return;
|
2017-05-07 23:51:42 +02:00
|
|
|
if (hsb)
|
|
|
|
|
{
|
|
|
|
|
document.getElementById("slR").style.display="none";
|
|
|
|
|
document.getElementById("slG").style.display="none";
|
|
|
|
|
document.getElementById("slB").style.display="none";
|
|
|
|
|
document.getElementById("slH").style.display="block";
|
|
|
|
|
document.getElementById("slS").style.display="block";
|
|
|
|
|
mdb.style.fill="green";
|
|
|
|
|
} else {
|
|
|
|
|
document.getElementById("slR").style.display="block";
|
|
|
|
|
document.getElementById("slG").style.display="block";
|
|
|
|
|
document.getElementById("slB").style.display="block";
|
|
|
|
|
document.getElementById("slH").style.display="none";
|
|
|
|
|
document.getElementById("slS").style.display="none";
|
|
|
|
|
mdb.style.fill="black";
|
|
|
|
|
}
|
2017-05-08 20:20:48 +02:00
|
|
|
}
|
|
|
|
|
function ToggleHSB()
|
|
|
|
|
{
|
|
|
|
|
if (fxa)
|
|
|
|
|
{
|
|
|
|
|
fxa = false;
|
|
|
|
|
SetFX();
|
|
|
|
|
}
|
|
|
|
|
if (sto) CloseSettings();
|
|
|
|
|
hsb = !hsb;
|
|
|
|
|
if (hsb)
|
|
|
|
|
{
|
|
|
|
|
strMD="&MD=1";
|
|
|
|
|
} else {
|
|
|
|
|
strMD="&MD=0";
|
|
|
|
|
}
|
|
|
|
|
SetHSB();
|
2016-09-11 23:07:18 +02:00
|
|
|
}
|
|
|
|
|
function OpenSettings()
|
|
|
|
|
{
|
2017-05-07 23:51:42 +02:00
|
|
|
sto = true;
|
|
|
|
|
stb.style.fill="green";
|
|
|
|
|
cdB.style.display="none";
|
|
|
|
|
stf.style.display="inline";
|
|
|
|
|
stf.src="/settings";
|
|
|
|
|
}
|
|
|
|
|
function CloseSettings()
|
|
|
|
|
{
|
|
|
|
|
sto = false;
|
|
|
|
|
stb.style.fill="black";
|
|
|
|
|
cdB.style.display="inline";
|
|
|
|
|
stf.style.display="none";
|
|
|
|
|
}
|
|
|
|
|
function ToggleSettings()
|
|
|
|
|
{
|
|
|
|
|
if (sto)
|
|
|
|
|
{
|
|
|
|
|
CloseSettings();
|
|
|
|
|
} else {
|
|
|
|
|
OpenSettings();
|
|
|
|
|
}
|
2016-09-11 23:07:18 +02:00
|
|
|
}
|
2017-05-07 17:09:18 +02:00
|
|
|
function ToggleNl()
|
2016-10-30 20:04:39 +01:00
|
|
|
{
|
2017-05-07 17:09:18 +02:00
|
|
|
nla = !nla;
|
|
|
|
|
if (nla) {
|
|
|
|
|
strNL="&NL=1";
|
|
|
|
|
} else {
|
|
|
|
|
strNL="&NL=0";
|
|
|
|
|
}
|
|
|
|
|
UpdateVals();
|
|
|
|
|
GetArduinoIO();
|
2016-10-30 20:04:39 +01:00
|
|
|
}
|
2017-05-07 23:51:42 +02:00
|
|
|
function ToggleNr()
|
|
|
|
|
{
|
|
|
|
|
nra = !nra;
|
|
|
|
|
if (nra) {
|
|
|
|
|
strNR="&RN=1";
|
|
|
|
|
} else {
|
|
|
|
|
strNR="&RN=0";
|
|
|
|
|
}
|
|
|
|
|
UpdateVals();
|
|
|
|
|
GetArduinoIO();
|
|
|
|
|
}
|
|
|
|
|
function ToggleNs()
|
|
|
|
|
{
|
|
|
|
|
nsa = !nsa;
|
|
|
|
|
if (nsa) {
|
|
|
|
|
strNS="&SN=1";
|
|
|
|
|
} else {
|
|
|
|
|
strNS="&SN=0";
|
|
|
|
|
}
|
|
|
|
|
UpdateVals();
|
|
|
|
|
GetArduinoIO();
|
|
|
|
|
}
|
|
|
|
|
function setHS() {
|
|
|
|
|
var rr, gg, bb,
|
|
|
|
|
r = arguments[0] / 255,
|
|
|
|
|
g = arguments[1] / 255,
|
|
|
|
|
b = arguments[2] / 255,
|
|
|
|
|
h, s,
|
|
|
|
|
v = Math.max(r, g, b),
|
|
|
|
|
diff = v - Math.min(r, g, b),
|
|
|
|
|
diffc = function(c){
|
|
|
|
|
return (v - c) / 6 / diff + 1 / 2;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
if (diff == 0) {
|
|
|
|
|
h = s = 0;
|
|
|
|
|
} else {
|
|
|
|
|
s = diff / v;
|
|
|
|
|
rr = diffc(r);
|
|
|
|
|
gg = diffc(g);
|
|
|
|
|
bb = diffc(b);
|
|
|
|
|
|
|
|
|
|
if (r === v) {
|
|
|
|
|
h = bb - gg;
|
|
|
|
|
}else if (g === v) {
|
|
|
|
|
h = (1 / 3) + rr - bb;
|
|
|
|
|
}else if (b === v) {
|
|
|
|
|
h = (2 / 3) + gg - rr;
|
|
|
|
|
}
|
|
|
|
|
if (h < 0) {
|
|
|
|
|
h += 1;
|
|
|
|
|
}else if (h > 1) {
|
|
|
|
|
h -= 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
document.Ctrl_form.SH.value = h;
|
|
|
|
|
document.Ctrl_form.SS.value = s;
|
|
|
|
|
}
|
|
|
|
|
function GetRGB()
|
|
|
|
|
{
|
|
|
|
|
var r, g, b, i, f, p, q, t;
|
|
|
|
|
var h = document.Ctrl_form.SH.value, s = document.Ctrl_form.SS.value, v = 255;
|
|
|
|
|
i = Math.floor(h * 6);
|
|
|
|
|
f = h * 6 - i;
|
|
|
|
|
p = v * (1 - s);
|
|
|
|
|
q = v * (1 - f * s);
|
|
|
|
|
t = v * (1 - (1 - f) * s);
|
|
|
|
|
switch (i % 6) {
|
|
|
|
|
case 0: r = v, g = t, b = p; break;
|
|
|
|
|
case 1: r = q, g = v, b = p; break;
|
|
|
|
|
case 2: r = p, g = v, b = t; break;
|
|
|
|
|
case 3: r = p, g = q, b = v; break;
|
|
|
|
|
case 4: r = t, g = p, b = v; break;
|
|
|
|
|
case 5: r = v, g = p, b = q; break;
|
|
|
|
|
}
|
|
|
|
|
document.Ctrl_form.SR.value = r;
|
|
|
|
|
document.Ctrl_form.SG.value = g;
|
|
|
|
|
document.Ctrl_form.SB.value = b;
|
|
|
|
|
GetCheck();
|
|
|
|
|
}
|
2016-09-11 23:07:18 +02:00
|
|
|
</script>
|
|
|
|
|
<style>
|
|
|
|
|
.ctrl_box {
|
|
|
|
|
border: 0.3ch solid grey;
|
|
|
|
|
margin: auto;
|
|
|
|
|
width: 80vw;
|
|
|
|
|
background-color: #B9B9B9;
|
|
|
|
|
position: absolute;
|
2017-05-07 17:09:18 +02:00
|
|
|
top: 60%;
|
2016-09-11 23:07:18 +02:00
|
|
|
left: 50%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
}
|
|
|
|
|
.sliders {
|
|
|
|
|
width: 100%;
|
2016-10-20 22:03:56 +02:00
|
|
|
height: 12vh;
|
2017-05-07 23:51:42 +02:00
|
|
|
margin-top: 2vh;
|
2016-09-11 23:07:18 +02:00
|
|
|
}
|
|
|
|
|
.sliderA {
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
margin-right: auto;
|
|
|
|
|
width: 77vw;
|
|
|
|
|
background: linear-gradient(to right, black, yellow);
|
|
|
|
|
}
|
|
|
|
|
.sliderR {
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
margin-right: auto;
|
2017-05-07 23:51:42 +02:00
|
|
|
margin-top: 2vh;
|
2016-09-11 23:07:18 +02:00
|
|
|
width: 77vw;
|
|
|
|
|
background: linear-gradient(to right, black, red);
|
|
|
|
|
}
|
|
|
|
|
.sliderG {
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
margin-right: auto;
|
2017-05-07 23:51:42 +02:00
|
|
|
margin-top: 2vh;
|
2016-09-11 23:07:18 +02:00
|
|
|
width: 77vw;
|
|
|
|
|
background: linear-gradient(to right, black, green);
|
|
|
|
|
}
|
|
|
|
|
.sliderB {
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
margin-right: auto;
|
2017-05-07 23:51:42 +02:00
|
|
|
margin-top: 2vh;
|
2016-09-11 23:07:18 +02:00
|
|
|
width: 77vw;
|
|
|
|
|
background: linear-gradient(to right, black, blue);
|
|
|
|
|
}
|
2017-05-07 23:51:42 +02:00
|
|
|
.sliderH {
|
|
|
|
|
display:none;
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
margin-right: auto;
|
|
|
|
|
margin-top: 2vh;
|
|
|
|
|
width: 77vw;
|
|
|
|
|
background: linear-gradient(to right, red, orange , yellow, green, cyan, blue, violet, red);
|
|
|
|
|
}
|
|
|
|
|
.sliderS {
|
|
|
|
|
display:none;
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
margin-right: auto;
|
|
|
|
|
margin-top: 2vh;
|
|
|
|
|
width: 77vw;
|
|
|
|
|
background: linear-gradient(to right, grey, green);
|
|
|
|
|
}
|
2017-05-08 20:20:48 +02:00
|
|
|
.toolsFX {
|
|
|
|
|
display:none;
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
margin-right: auto;
|
|
|
|
|
margin-top: 2vh;
|
|
|
|
|
width: 77vw;
|
|
|
|
|
}
|
|
|
|
|
.sliderX {
|
|
|
|
|
display:none;
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
margin-right: auto;
|
|
|
|
|
margin-top: 2vh;
|
|
|
|
|
width: 77vw;
|
|
|
|
|
background: linear-gradient(to right, black, white);
|
|
|
|
|
}
|
2016-09-11 23:07:18 +02:00
|
|
|
body {
|
2017-05-07 17:09:18 +02:00
|
|
|
text-align: center;
|
2016-09-11 23:07:18 +02:00
|
|
|
background: linear-gradient(white, black);
|
|
|
|
|
height: 100%;
|
|
|
|
|
margin: 0;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-attachment: fixed;
|
|
|
|
|
}
|
|
|
|
|
html {
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
2017-05-07 23:51:42 +02:00
|
|
|
iframe {
|
|
|
|
|
display:none;
|
|
|
|
|
margin: auto;
|
|
|
|
|
width: 80vw;
|
|
|
|
|
height: 50vh;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 60%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
}
|
2017-05-07 17:09:18 +02:00
|
|
|
svg {
|
2017-05-07 23:51:42 +02:00
|
|
|
width: 15vw;
|
2016-10-30 20:04:39 +01:00
|
|
|
height: 10vmin;
|
2016-09-11 23:07:18 +02:00
|
|
|
}
|
|
|
|
|
input[type=range] {
|
|
|
|
|
-webkit-appearance: none;
|
|
|
|
|
margin: -4px 0;
|
|
|
|
|
}
|
|
|
|
|
input[type=range]:focus {
|
|
|
|
|
outline: none;
|
|
|
|
|
}
|
|
|
|
|
input[type=range]::-webkit-slider-runnable-track {
|
|
|
|
|
width: 100%;
|
2016-10-20 22:03:56 +02:00
|
|
|
height: 12vh;
|
2016-09-11 23:07:18 +02:00
|
|
|
cursor: pointer;
|
|
|
|
|
background: #DDDDDD;
|
|
|
|
|
}
|
|
|
|
|
input[type=range]::-webkit-slider-thumb {
|
2016-10-20 22:03:56 +02:00
|
|
|
height: 10vh;
|
|
|
|
|
width: 10vh;
|
2016-09-11 23:07:18 +02:00
|
|
|
background: #ffffff;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
-webkit-appearance: none;
|
2016-10-20 22:03:56 +02:00
|
|
|
margin-top: 1vh;
|
2016-09-11 23:07:18 +02:00
|
|
|
}
|
|
|
|
|
input[type=range]::-moz-range-track {
|
|
|
|
|
width: 100%;
|
2016-10-20 22:03:56 +02:00
|
|
|
height: 12vh;
|
2016-09-11 23:07:18 +02:00
|
|
|
cursor: pointer;
|
|
|
|
|
background: #DDDDDD;
|
|
|
|
|
}
|
|
|
|
|
input[type=range]::-moz-range-thumb {
|
2016-10-20 22:03:56 +02:00
|
|
|
height: 10vh;
|
|
|
|
|
width: 10vh;
|
2016-09-11 23:07:18 +02:00
|
|
|
background: #ffffff;
|
|
|
|
|
cursor: pointer;
|
2016-10-20 22:03:56 +02:00
|
|
|
margin-top: 1vh;
|
2016-09-11 23:07:18 +02:00
|
|
|
}
|
|
|
|
|
input[type=range]::-ms-track {
|
|
|
|
|
width: 100%;
|
2016-10-20 22:03:56 +02:00
|
|
|
height: 12vh;
|
2016-09-11 23:07:18 +02:00
|
|
|
cursor: pointer;
|
|
|
|
|
background: transparent;
|
|
|
|
|
border-color: transparent;
|
|
|
|
|
color: transparent;
|
|
|
|
|
}
|
|
|
|
|
input[type=range]::-ms-fill-lower {
|
|
|
|
|
background: #DDDDDD;
|
|
|
|
|
}
|
|
|
|
|
input[type=range]::-ms-fill-upper {
|
|
|
|
|
background: #DDDDDD;
|
|
|
|
|
}
|
|
|
|
|
input[type=range]::-ms-thumb {
|
2016-10-20 22:03:56 +02:00
|
|
|
width: 10vh;
|
2016-09-11 23:07:18 +02:00
|
|
|
background: #ffffff;
|
|
|
|
|
cursor: pointer;
|
2016-10-20 22:03:56 +02:00
|
|
|
height: 10vh;
|
2016-09-11 23:07:18 +02:00
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<style id="holderjs-style" type="text/css"></style></head>
|
|
|
|
|
<body onload="Startup()" class=" __plain_text_READY__">
|
2017-05-07 17:09:18 +02:00
|
|
|
<span class="desc"> Loading... </span>
|
2017-05-08 20:20:48 +02:00
|
|
|
<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
|
|
|
|
<defs>
|
|
|
|
|
<symbol id="icon-backward2" viewBox="0 0 32 32">
|
|
|
|
|
<path d="M18 5v10l10-10v22l-10-10v10l-11-11z"></path>
|
|
|
|
|
</symbol>
|
|
|
|
|
<symbol id="icon-forward3" viewBox="0 0 32 32">
|
|
|
|
|
<path d="M16 27v-10l-10 10v-22l10 10v-10l11 11z"></path>
|
|
|
|
|
</symbol>
|
|
|
|
|
<symbol id="icon-circle-right" viewBox="0 0 32 32">
|
|
|
|
|
<path d="M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM16 29c-7.18 0-13-5.82-13-13s5.82-13 13-13 13 5.82 13 13-5.82 13-13 13z"></path>
|
|
|
|
|
<path d="M11.086 22.086l2.829 2.829 8.914-8.914-8.914-8.914-2.828 2.828 6.086 6.086z"></path>
|
|
|
|
|
</symbol>
|
|
|
|
|
<symbol id="icon-circle-left" viewBox="0 0 32 32">
|
|
|
|
|
<path d="M16 32c8.837 0 16-7.163 16-16s-7.163-16-16-16-16 7.163-16 16 7.163 16 16 16zM16 3c7.18 0 13 5.82 13 13s-5.82 13-13 13-13-5.82-13-13 5.82-13 13-13z"></path>
|
|
|
|
|
<path d="M20.914 9.914l-2.829-2.829-8.914 8.914 8.914 8.914 2.828-2.828-6.086-6.086z"></path>
|
|
|
|
|
</symbol>
|
|
|
|
|
<symbol id="icon-equalizer" viewBox="0 0 32 32">
|
|
|
|
|
<path d="M14 4v-0.5c0-0.825-0.675-1.5-1.5-1.5h-5c-0.825 0-1.5 0.675-1.5 1.5v0.5h-6v4h6v0.5c0 0.825 0.675 1.5 1.5 1.5h5c0.825 0 1.5-0.675 1.5-1.5v-0.5h18v-4h-18zM8 8v-4h4v4h-4zM26 13.5c0-0.825-0.675-1.5-1.5-1.5h-5c-0.825 0-1.5 0.675-1.5 1.5v0.5h-18v4h18v0.5c0 0.825 0.675 1.5 1.5 1.5h5c0.825 0 1.5-0.675 1.5-1.5v-0.5h6v-4h-6v-0.5zM20 18v-4h4v4h-4zM14 23.5c0-0.825-0.675-1.5-1.5-1.5h-5c-0.825 0-1.5 0.675-1.5 1.5v0.5h-6v4h6v0.5c0 0.825 0.675 1.5 1.5 1.5h5c0.825 0 1.5-0.675 1.5-1.5v-0.5h18v-4h-18v-0.5zM8 28v-4h4v4h-4z"></path>
|
|
|
|
|
</symbol>
|
|
|
|
|
<symbol id="icon-clock" viewBox="0 0 32 32">
|
|
|
|
|
<path d="M20.586 23.414l-6.586-6.586v-8.828h4v7.172l5.414 5.414zM16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM16 28c-6.627 0-12-5.373-12-12s5.373-12 12-12c6.627 0 12 5.373 12 12s-5.373 12-12 12z"></path>
|
|
|
|
|
</symbol>
|
|
|
|
|
<symbol id="icon-download" viewBox="0 0 32 32">
|
|
|
|
|
<path d="M16 18l8-8h-6v-8h-4v8h-6zM23.273 14.727l-2.242 2.242 8.128 3.031-13.158 4.907-13.158-4.907 8.127-3.031-2.242-2.242-8.727 3.273v8l16 6 16-6v-8z"></path>
|
|
|
|
|
</symbol>
|
|
|
|
|
<symbol id="icon-upload" viewBox="0 0 32 32">
|
|
|
|
|
<path d="M14 18h4v-8h6l-8-8-8 8h6zM20 13.5v3.085l9.158 3.415-13.158 4.907-13.158-4.907 9.158-3.415v-3.085l-12 4.5v8l16 6 16-6v-8z"></path>
|
|
|
|
|
</symbol>
|
|
|
|
|
<symbol id="icon-cog" viewBox="0 0 32 32">
|
|
|
|
|
<path d="M29.181 19.070c-1.679-2.908-0.669-6.634 2.255-8.328l-3.145-5.447c-0.898 0.527-1.943 0.829-3.058 0.829-3.361 0-6.085-2.742-6.085-6.125h-6.289c0.008 1.044-0.252 2.103-0.811 3.070-1.679 2.908-5.411 3.897-8.339 2.211l-3.144 5.447c0.905 0.515 1.689 1.268 2.246 2.234 1.676 2.903 0.672 6.623-2.241 8.319l3.145 5.447c0.895-0.522 1.935-0.82 3.044-0.82 3.35 0 6.067 2.725 6.084 6.092h6.289c-0.003-1.034 0.259-2.080 0.811-3.038 1.676-2.903 5.399-3.894 8.325-2.219l3.145-5.447c-0.899-0.515-1.678-1.266-2.232-2.226zM16 22.479c-3.578 0-6.479-2.901-6.479-6.479s2.901-6.479 6.479-6.479c3.578 0 6.479 2.901 6.479 6.479s-2.901 6.479-6.479 6.479z"></path>
|
|
|
|
|
</symbol>
|
|
|
|
|
<symbol id="icon-star-full" viewBox="0 0 32 32">
|
|
|
|
|
<path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
|
|
|
|
|
</symbol>
|
|
|
|
|
</defs>
|
|
|
|
|
</svg>
|
2016-09-11 23:07:18 +02:00
|
|
|
<div id="tbB" class="tool_box">
|
2017-05-07 23:51:42 +02:00
|
|
|
<svg id="mdb" onclick="ToggleHSB()"><use xlink:href="#icon-equalizer"></use></svg>
|
2017-05-08 20:20:48 +02:00
|
|
|
<svg id="fxb" onclick="ToggleFX()"><use xlink:href="#icon-star-full"></use></svg>
|
2017-05-07 17:09:18 +02:00
|
|
|
<svg id="nlb" onclick="ToggleNl()"><use xlink:href="#icon-clock"></use></svg>
|
2017-05-07 23:51:42 +02:00
|
|
|
<svg id="nrb" onclick="ToggleNr()"><use xlink:href="#icon-download"></use></svg>
|
|
|
|
|
<svg id="nsb" onclick="ToggleNs()"><use xlink:href="#icon-upload"></use></svg>
|
|
|
|
|
<svg id="stb" onclick="ToggleSettings()"><use xlink:href="#icon-cog"></use></svg>
|
2016-09-11 23:07:18 +02:00
|
|
|
</div>
|
|
|
|
|
<div id="cdB" class="ctrl_box">
|
|
|
|
|
<form id="form_c" name="Ctrl_form">
|
|
|
|
|
<br>
|
|
|
|
|
<div id="slA" class="sliderA">
|
2017-05-07 23:51:42 +02:00
|
|
|
<input type="range" title="Brightness" class="sliders" name="SA" value="0" min="0" max="255" step="1" onchange="GetCheck()"> </div>
|
2016-09-11 23:07:18 +02:00
|
|
|
<div id="slR" class="sliderR">
|
2017-05-07 23:51:42 +02:00
|
|
|
<input type="range" title="Red Value" class="sliders" name="SR" value="0" min="0" max="255" step="1" onchange="GetCheck()"> </div>
|
|
|
|
|
<div id="slG" class="sliderG">
|
|
|
|
|
<input type="range" title="Green Value" class="sliders" name="SG" value="0" min="0" max="255" step="1" onchange="GetCheck()"> </div>
|
|
|
|
|
<div id="slB" class="sliderB">
|
|
|
|
|
<input type="range" title="Blue Value" class="sliders" name="SB" value="0" min="0" max="255" step="1" onchange="GetCheck()"> </div>
|
|
|
|
|
<div id="slH" class="sliderH">
|
|
|
|
|
<input type="range" title="Hue" class="sliders" name="SH" value="0" min="0" max="1" step="0.025" onchange="GetRGB()"> </div>
|
|
|
|
|
<div id="slS" class="sliderS">
|
2017-05-08 20:20:48 +02:00
|
|
|
<input type="range" title="Saturation" class="sliders" name="SS" value="0" min="0" max="1" step="0.025" onchange="GetRGB()"> </div>
|
|
|
|
|
<div id="tlX" class = "toolsFX">
|
|
|
|
|
<svg id="fmr" onclick="SwitchFX(-10)"><use xlink:href="#icon-backward2"></use></svg>
|
|
|
|
|
<svg id="for" onclick="SwitchFX(-1)"><use xlink:href="#icon-circle-left"></use></svg>
|
|
|
|
|
<svg id="fmf" onclick="SwitchFX(1)"><use xlink:href="#icon-circle-right"></use></svg>
|
|
|
|
|
<svg id="fof" onclick="SwitchFX(10)"><use xlink:href="#icon-forward3"></use></svg>
|
|
|
|
|
<br><input id="fxI" name = "TF" type="number" value="0" min="0" max="47" step="1" onchange="GetFX()">
|
|
|
|
|
</div>
|
|
|
|
|
<div id="slX" class="sliderX">
|
|
|
|
|
<input type="range" title="Effect Speed" class="sliders" name="SX" value="0" min="0" max="255" step="1" onchange="GetFX()"> </div> <br>
|
2016-10-20 22:03:56 +02:00
|
|
|
</form>
|
2016-09-11 23:07:18 +02:00
|
|
|
</div>
|
2017-05-07 23:51:42 +02:00
|
|
|
<iframe id="stf" src="about:blank"></iframe>
|
2017-05-07 17:09:18 +02:00
|
|
|
</body>
|
|
|
|
|
</html>
|
