702 lines
27 KiB
HTML
702 lines
27 KiB
HTML
<!DOCTYPE HTML>
|
|
<html lang="de">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<style>
|
|
body {
|
|
background-color: #222222;
|
|
font-family: -apple-system,
|
|
BlinkMacSystemFont,
|
|
"Segoe UI",
|
|
Roboto,
|
|
Oxygen-Sans,
|
|
Ubuntu,
|
|
Cantarell,
|
|
"Helvetica Neue",
|
|
sans-serif;
|
|
color: white;
|
|
background: linear-gradient(90deg, #ffa9a9, #64a1e0, #ffa9a9, #64a1e0);
|
|
background-size: 400% 400%;
|
|
-webkit-animation: gradientBG 360s ease infinite forwards;
|
|
animation: gradientBG 360s ease infinite forwards;
|
|
font-weight: lighter;
|
|
}
|
|
|
|
/** Animated background: Code By Webdevtrick ( https://webdevtrick.com ) **/
|
|
@-webkit-keyframes gradientBG {
|
|
0% {
|
|
background-position: 0% 50%;
|
|
}
|
|
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
}
|
|
|
|
@keyframes gradientBG {
|
|
0% {
|
|
background-position: 0% 50%;
|
|
}
|
|
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
font-weight: lighter;
|
|
letter-spacing: .125rem;
|
|
text-transform: uppercase;
|
|
color: white;
|
|
text-align: center;
|
|
font-size: x-large;
|
|
}
|
|
|
|
.buttonClass {
|
|
font-size: 15px;
|
|
font-family: Arial;
|
|
width: 70px;
|
|
height: 70px;
|
|
color: #fff;
|
|
font-weight: 200;
|
|
border-top-left-radius: 14px;
|
|
border-top-right-radius: 14px;
|
|
border-bottom-left-radius: 14px;
|
|
border-bottom-right-radius: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
-moz-user-select: none;
|
|
-webkit-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
-o-user-select: none;
|
|
}
|
|
|
|
.buttonClass:hover {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.grid-container {
|
|
font-size: 15px;
|
|
font-family: Arial;
|
|
display: grid;
|
|
grid-column-gap: 5px;
|
|
grid-row-gap: 5px;
|
|
grid-template-columns: auto auto auto;
|
|
padding: 10px;
|
|
}
|
|
|
|
.grid-item {
|
|
text-align: center;
|
|
display: inline-block;
|
|
text-align: center;
|
|
}
|
|
|
|
.dot {
|
|
border-radius: 20%;
|
|
display: flex;
|
|
justify-content: center;
|
|
/* align horizontal */
|
|
align-items: center;
|
|
/* align vertical */
|
|
}
|
|
|
|
.dot-mode {
|
|
display: flex;
|
|
justify-content: center;
|
|
/* align horizontal */
|
|
align-items: center;
|
|
/* align vertical */
|
|
}
|
|
|
|
.active {
|
|
border: 2px solid lightgray;
|
|
}
|
|
|
|
.mode-item {
|
|
background: rgba(59, 57, 57, 0.308);
|
|
}
|
|
|
|
.mode-item:hover {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.verticalline {
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.356);
|
|
text-align: center;
|
|
color: white;
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
-webkit-tap-highlight-color: transparent;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.toggle {
|
|
height: 32px;
|
|
width: 52px;
|
|
border-radius: 16px;
|
|
display: inline-block;
|
|
position: relative;
|
|
margin: 0;
|
|
border: 2px solid #474755ab;
|
|
background: linear-gradient(180deg, #2d2f39ab 0%, #1f2027ab 100%);
|
|
transition: all .2s ease;
|
|
}
|
|
|
|
.toggle:after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 2px;
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
background: white;
|
|
box-shadow: 0 1px 2px rgba(44, 44, 44, .2);
|
|
transition: all .2s cubic-bezier(.5, .1, .75, 1.35);
|
|
}
|
|
|
|
.toggle:checked {
|
|
border-color: lightgray;
|
|
}
|
|
|
|
.toggle:checked::after {
|
|
transform: translatex(20px);
|
|
}
|
|
|
|
label {
|
|
text-align: right;
|
|
clear: both;
|
|
float: left;
|
|
margin-right: 15px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.checkbox-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin: 10px;
|
|
}
|
|
|
|
.headline {
|
|
text-align: center;
|
|
font-weight: 200;
|
|
font-size: larger;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.control-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
}
|
|
|
|
.wide-button-bottom {
|
|
width: 80%;
|
|
height: 40px;
|
|
margin: 10px;
|
|
padding: 5px;
|
|
background-color: rgba(147, 147, 158, 0.4);
|
|
}
|
|
|
|
.arrow-button {
|
|
width: 70px;
|
|
height: 70px;
|
|
background-color: rgba(147, 147, 158, 0.4);
|
|
}
|
|
|
|
.tetris-button-bottom {
|
|
width: 105px;
|
|
height: 40px;
|
|
margin: 5px;
|
|
background-color: rgba(147, 147, 158, 0.4);
|
|
}
|
|
|
|
img {
|
|
-moz-user-select: none;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.setting-button {
|
|
position: absolute;
|
|
padding: 10px;
|
|
}
|
|
|
|
.settings-container {
|
|
height: 0px;
|
|
transition: height 1s;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.show {
|
|
height: 250px;
|
|
transition: height 1s;
|
|
}
|
|
|
|
.show-container {
|
|
display: inline
|
|
}
|
|
|
|
.hide-container {
|
|
display: none
|
|
}
|
|
|
|
.number-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: left;
|
|
/* align-items: center; */
|
|
margin: 10px;
|
|
}
|
|
|
|
.save-button {
|
|
height: 30px;
|
|
margin: 5px;
|
|
background-color: rgba(147, 147, 158, 0.4);
|
|
}
|
|
</style>
|
|
<title>WORDCLOCK 2.0</title>
|
|
<link rel="icon" type="image/svg" href="./icons/clock.svg">
|
|
</head>
|
|
|
|
<body oncontextmenu="return false"> <!-- prevent opening of contextmenu -->
|
|
<div class="setting-button" onclick="toggleSettings()"><img src="./icons/settings.svg" style="height:20px" /></div>
|
|
|
|
<h1 id="headline">WORDCLOCK 2.0</h1>
|
|
|
|
<div id="settings-container" class="settings-container">
|
|
<div class="visible-brightness-container" id="static_brightness_container">
|
|
<div class="number-container">
|
|
<label for="static_brightness">Static brightness:</label>
|
|
<input type="range" id="static_brightness" name="static_brightness" min="10" max="255">
|
|
</div>
|
|
</div>
|
|
<div class="hidden-brightness-container" id="dyn_brightness_container">
|
|
<div class="number-container">
|
|
<label for="min_brightness">Min. brightness:</label>
|
|
<input type="range" id="min_brightness" name="min_brightness" min="10" max="255">
|
|
</div>
|
|
<div class="number-container">
|
|
<label for="max_brightness">Max. brightness:</label>
|
|
<input type="range" id="max_brightness" name="max_brightness" min="10" max="255">
|
|
</div>
|
|
</div>
|
|
<div class="number-container">
|
|
<label for="nm_start" style="align-self: flex-start">Nightmode Start Time: </label>
|
|
<input type="time" id="nm_start" name="nm_start" min="00:00" max="23:59">
|
|
</div>
|
|
<div class="number-container">
|
|
<label for="nm_end" style="align-self: flex-start">Nightmode End Time: </label>
|
|
<input type="time" id="nm_end" name="nm_end" min="00:00" max="23:59">
|
|
</div>
|
|
<div class="checkbox-container">
|
|
<label for="reset_wifi" style="align-self: flex-start">Reset Wifi Credentials</label>
|
|
<input name="reset_wifi" id="reset_wifi" type="checkbox" class="toggle">
|
|
</div>
|
|
<div class="buttonClass save-button" onclick="saveSettings()">SAVE</div>
|
|
</div>
|
|
|
|
<div class="verticalline">
|
|
</div>
|
|
<div class="headline">
|
|
MODE
|
|
</div>
|
|
<div class="grid-container">
|
|
<div class="grid-item mode-item"><span class="dot-mode" onclick="modechange(this, 0)"><a
|
|
onclick="sendCommand('./cmd?mode=clock')" class="buttonClass" style="width: 100%;"><img
|
|
src="./icons/clock.svg" style="height:50px" /></a></span></div>
|
|
<div class="grid-item mode-item"><span class="dot-mode" onclick="modechange(this, 1)"><a
|
|
onclick="sendCommand('./cmd?mode=diclock')" class="buttonClass" style="width: 100%;"><img
|
|
src="./icons/diclock.svg" style="height:50px" /></a></span></div>
|
|
<div class="grid-item mode-item"><span class="dot-mode" onclick="modechange(this, 2)"><a
|
|
onclick="sendCommand('./cmd?mode=spiral')" class="buttonClass" style="width: 100%;"><img
|
|
src="./icons/spiral.svg" style="height:50px" /></a></span></div>
|
|
<div class="grid-item mode-item"><span class="dot-mode" onclick="modechange(this, 3)"><a
|
|
onclick="sendCommand('./cmd?mode=tetris')" class="buttonClass" style="width: 100%;"><img
|
|
src="./icons/tetris.svg" style="height:50px" /></a></span></div>
|
|
<div class="grid-item mode-item"><span class="dot-mode" onclick="modechange(this, 4)"><a
|
|
onclick="sendCommand('./cmd?mode=snake')" class="buttonClass" style="width: 100%;"><img
|
|
src="./icons/snake.svg" style="height:50px" /></a></span></div>
|
|
<div class="grid-item mode-item"><span class="dot-mode" onclick="modechange(this, 5)"><a
|
|
onclick="sendCommand('./cmd?mode=pingpong')" class="buttonClass" style="width: 100%;"><img
|
|
src="./icons/pingpong.svg" style="height:50px" /></a></span></div>
|
|
<div class="grid-item mode-item"><span class="dot-mode" onclick="modechange(this, 6)"><a
|
|
onclick="sendCommand('./cmd?mode=hearts')" class="buttonClass" style="width: 100%;"><img
|
|
src="./icons/hearts.svg" style="height:50px" /></a></span></div>
|
|
</div>
|
|
<div class="checkbox-container">
|
|
<label for="Nightmode" style="align-self: flex-start">Nightmode</label>
|
|
<div>
|
|
<input name="Nightmode" id="Nightmode" type="checkbox" class="toggle">
|
|
</div>
|
|
</div>
|
|
<div class="checkbox-container" onclick="toggleBrightnessOptions()">
|
|
<label for="DynBrightness" style="align-self: flex-start">Dynamic brightness</label>
|
|
<div>
|
|
<input name="DynBrightness" id="DynBrightness" type="checkbox" class="toggle">
|
|
</div>
|
|
</div>
|
|
<div class="main-container hidden" id="colorcontainer">
|
|
<div class="verticalline">
|
|
</div>
|
|
<div class="headline">
|
|
COLOR
|
|
</div>
|
|
<div class="control-container">
|
|
<div class="grid-container">
|
|
<div class="grid-item"><span class="dot"><a onclick="sendCommand('./cmd?led=255-0-0')"
|
|
class="buttonClass" style="background:rgb(255,0,0);"></a></span></div>
|
|
<div class="grid-item"><span class="dot"><a onclick="sendCommand('./cmd?led=255-0-128')"
|
|
class="buttonClass" style="background:rgb(255,0,128);"></a></span></div>
|
|
<div class="grid-item"><span class="dot"><a onclick="sendCommand('./cmd?led=255-0-255')"
|
|
class="buttonClass" style="background:rgb(255,0,255);"></a></span></div>
|
|
<div class="grid-item"><span class="dot"><a onclick="sendCommand('./cmd?led=128-0-255')"
|
|
class="buttonClass" style="background:rgb(128,0,255);"></a></span></div>
|
|
<div class="grid-item"><span class="dot"><a onclick="sendCommand('./cmd?led=0-0-255')"
|
|
class="buttonClass" style="background:rgb(0,0,255);"></a></span></div>
|
|
<div class="grid-item"><span class="dot"><a onclick="sendCommand('./cmd?led=0-128-255')"
|
|
class="buttonClass" style="background:rgb(0,128,255);"></a></span></div>
|
|
<div class="grid-item"><span class="dot"><a onclick="sendCommand('./cmd?led=255-255-255')"
|
|
class="buttonClass" style="background:rgb(255,255,255);"></a></span></div>
|
|
<div class="grid-item"><span class="dot"><a onclick="sendCommand('./cmd?led=0-255-128')"
|
|
class="buttonClass" style="background:rgb(0,255,128);"></a></span></div>
|
|
<div class="grid-item"><span class="dot"><a onclick="sendCommand('./cmd?led=0-255-0')"
|
|
class="buttonClass" style="background:rgb(0,255,0);"></a></span></div>
|
|
<div class="grid-item"><span class="dot"><a onclick="sendCommand('./cmd?led=128-255-0')"
|
|
class="buttonClass" style="background:rgb(128,255,0);"></a></span></div>
|
|
<div class="grid-item"><span class="dot"><a onclick="sendCommand('./cmd?led=200-200-0')"
|
|
class="buttonClass" style="background:rgb(200,200,0);"></a></span></div>
|
|
<div class="grid-item"><span class="dot"><a onclick="sendCommand('./cmd?led=255-128-0')"
|
|
class="buttonClass" style="background:rgb(255,128,0);"></a></span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="main-container hidden" id="snakecontainer">
|
|
<div class="verticalline">
|
|
</div>
|
|
<div class="headline">
|
|
SNAKE
|
|
</div>
|
|
<div class="control-container">
|
|
<div class="grid-container">
|
|
<div class="grid-item" style="grid-column: 2; grid-row: 1;">
|
|
<div class="buttonClass arrow-button" onclick="sendCommand('./cmd?snake=up')" unselectable="on"><img
|
|
src="./icons/arrow_left.svg" style="height:30px; transform:rotate(90deg);" /></div>
|
|
</div>
|
|
|
|
<div class="grid-item" style="grid-column: 1; grid-row: 2;">
|
|
<div class="buttonClass arrow-button" onclick="sendCommand('./cmd?snake=left')" unselectable="on">
|
|
<img src="./icons/arrow_left.svg" style="height:30px;" />
|
|
</div>
|
|
</div>
|
|
<div class="grid-item" style="grid-column: 2; grid-row: 2;">
|
|
<div class="buttonClass arrow-button" onclick="sendCommand('./cmd?snake=down')" unselectable="on">
|
|
<img src="./icons/arrow_left.svg" style="height:30px; transform:rotate(-90deg);" />
|
|
</div>
|
|
</div>
|
|
<div class="grid-item" style="grid-column: 3; grid-row: 2;">
|
|
<div class="buttonClass arrow-button" onclick="sendCommand('./cmd?snake=right')" unselectable="on">
|
|
<img src="./icons/arrow_right.svg" style="height:30px;" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="control-container">
|
|
<div class="buttonClass wide-button-bottom" onclick="sendCommand('./cmd?snake=new')" unselectable="on"><img
|
|
src="./icons/refresh.svg" style="height:30px" /></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="main-container hidden" id="tetriscontainer">
|
|
<div class="verticalline">
|
|
</div>
|
|
<div class="headline">
|
|
TETRIS
|
|
</div>
|
|
<div class="control-container">
|
|
<div class="grid-container">
|
|
<div class="grid-item" style="grid-column: 2; grid-row: 1;">
|
|
<div class="buttonClass arrow-button" onclick="sendCommand('./cmd?tetris=up')" unselectable="on">
|
|
<img src="./icons/arrow_left.svg" style="height:30px; transform:rotate(90deg);" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-item" style="grid-column: 1; grid-row: 2;">
|
|
<div class="buttonClass arrow-button" onclick="sendCommand('./cmd?tetris=left')" unselectable="on">
|
|
<img src="./icons/arrow_left.svg" style="height:30px;" />
|
|
</div>
|
|
</div>
|
|
<div class="grid-item" style="grid-column: 2; grid-row: 2;">
|
|
<div class="buttonClass arrow-button" onclick="sendCommand('./cmd?tetris=down')" unselectable="on">
|
|
<img src="./icons/arrow_left.svg" style="height:30px; transform:rotate(-90deg);" />
|
|
</div>
|
|
</div>
|
|
<div class="grid-item" style="grid-column: 3; grid-row: 2;">
|
|
<div class="buttonClass arrow-button" onclick="sendCommand('./cmd?tetris=right')" unselectable="on">
|
|
<img src="./icons/arrow_right.svg" style="height:30px;" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="control-container">
|
|
<div class="buttonClass tetris-button-bottom" onclick="sendCommand('./cmd?tetris=play')" unselectable="on">
|
|
<img src="./icons/refresh.svg" style="height:20px" />
|
|
</div>
|
|
<div class="buttonClass tetris-button-bottom" onclick="sendCommand('./cmd?tetris=pause')" unselectable="on">
|
|
<img src="./icons/playpause.svg" style="height:20px" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main-container hidden" id="pongcontainer">
|
|
<div class="verticalline">
|
|
</div>
|
|
<div class="headline">
|
|
PONG
|
|
</div>
|
|
<div class="control-container">
|
|
<div class="grid-container">
|
|
|
|
<div class="grid-item" style="grid-column: 1; grid-row: 1;">
|
|
<div class="buttonClass arrow-button" style="width: 140px" onclick="sendCommand('./cmd?pong=up')"
|
|
unselectable="on"><img src="./icons/arrow_left.svg"
|
|
style="height:30px; transform:rotate(90deg);" /></div>
|
|
</div>
|
|
|
|
<div class="grid-item" style="grid-column: 1; grid-row: 2;">
|
|
<div class="buttonClass arrow-button" style="width: 140px" onclick="sendCommand('./cmd?pong=down')"
|
|
unselectable="on"><img src="./icons/arrow_left.svg"
|
|
style="height:30px; transform:rotate(-90deg);" /></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="control-container">
|
|
<div class="buttonClass wide-button-bottom" onclick="sendCommand('./cmd?pong=new')" unselectable="on"><img
|
|
src="./icons/refresh.svg" style="height:30px" /></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
|
var xmlhttp = new XMLHttpRequest();
|
|
var url = "./data?key=mode";
|
|
var myVar = null;
|
|
|
|
xmlhttp.onreadystatechange = function () {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
console.log(this.responseText);
|
|
myVar = JSON.parse(this.responseText);
|
|
// set mode button state
|
|
var state = myVar.modeid;
|
|
var modebuttons = document.getElementsByClassName("dot-mode");
|
|
for (const element of modebuttons) {
|
|
element.classList.remove("active");
|
|
}
|
|
modebuttons[state].classList.add("active");
|
|
|
|
// set Nightmode checkbox states
|
|
var ckb_nightmode = document.querySelector('input[id="Nightmode"]');
|
|
if (myVar.night_mode == "1") {
|
|
console.log("night_mode == 1");
|
|
ckb_nightmode.checked = true;
|
|
}
|
|
else {
|
|
console.log("night_mode == 0");
|
|
ckb_nightmode.checked = false;
|
|
}
|
|
ckb_nightmode.addEventListener('change', () => {
|
|
if (ckb_nightmode.checked) {
|
|
sendCommand("./cmd?night_mode=1");
|
|
} else {
|
|
sendCommand("./cmd?night_mode=0");
|
|
}
|
|
});
|
|
|
|
// set DynBrightness checkbox states
|
|
var ckb_dynbrightness = document.querySelector('input[id="DynBrightness"]');
|
|
if (myVar.dyn_brightness == "1") {
|
|
console.log("dyn_brightness == 1");
|
|
ckb_dynbrightness.checked = true;
|
|
}
|
|
else {
|
|
console.log("dyn_brightness == 0");
|
|
ckb_dynbrightness.checked = false;
|
|
}
|
|
ckb_dynbrightness.addEventListener('change', () => {
|
|
if (ckb_dynbrightness.checked) {
|
|
sendCommand("./cmd?dyn_brightness=1");
|
|
} else {
|
|
sendCommand("./cmd?dyn_brightness=0");
|
|
}
|
|
});
|
|
|
|
document.getElementById("nm_start").value = myVar.nightModeStart.replace("-", ":");
|
|
document.getElementById("nm_end").value = myVar.nightModeEnd.replace("-", ":");
|
|
document.getElementById("static_brightness").value = parseInt(myVar.static_brightness);
|
|
document.getElementById("min_brightness").value = parseInt(myVar.min_brightness);
|
|
document.getElementById("max_brightness").value = parseInt(myVar.max_brightness);
|
|
|
|
updateDisplay(parseInt(myVar.modeid));
|
|
console.log(myVar);
|
|
}
|
|
};
|
|
xmlhttp.open("GET", url, true);
|
|
xmlhttp.send();
|
|
|
|
function modechange(element, value) {
|
|
console.log(element);
|
|
var modebuttons = document.getElementsByClassName("dot-mode");
|
|
for (const element of modebuttons) {
|
|
element.classList.remove("active");
|
|
}
|
|
element.classList.add("active");
|
|
|
|
updateDisplay(value);
|
|
}
|
|
|
|
function updateDisplay(modeid) {
|
|
|
|
var maincontainer = document.getElementsByClassName("main-container");
|
|
for (const element of maincontainer) {
|
|
element.classList.add("hidden");
|
|
}
|
|
if (myVar != null) {
|
|
switch (modeid) {
|
|
case 0: // clock
|
|
document.getElementById("colorcontainer").classList.remove("hidden");
|
|
break;
|
|
case 1: // diclock
|
|
document.getElementById("colorcontainer").classList.remove("hidden");
|
|
break;
|
|
case 2: // spiral
|
|
break;
|
|
case 3: // tetris
|
|
document.getElementById("tetriscontainer").classList.remove("hidden");
|
|
break;
|
|
case 4: // snake
|
|
document.getElementById("snakecontainer").classList.remove("hidden");
|
|
break;
|
|
case 5: // pingpong
|
|
document.getElementById("pongcontainer").classList.remove("hidden");
|
|
break;
|
|
case 6: // hearts
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
function sendCommand(command) {
|
|
var xmlhttp = new XMLHttpRequest();
|
|
xmlhttp.open("GET", command, true);
|
|
xmlhttp.send();
|
|
}
|
|
|
|
function saveSettings() {
|
|
var nmStart = document.getElementById("nm_start");
|
|
var nmEnd = document.getElementById("nm_end");
|
|
var staticBrightnessElmt = document.getElementById("static_brightness");
|
|
var minBrightnessElmt = document.getElementById("min_brightness");
|
|
var maxBrightnessElmt = document.getElementById("max_brightness");
|
|
var resetWifi = document.getElementById("reset_wifi");
|
|
|
|
var cmdstr = "./cmd?setting=";
|
|
cmdstr += nmStart.value.replace(":", "-");
|
|
cmdstr += "-";
|
|
cmdstr += nmEnd.value.replace(":", "-");
|
|
cmdstr += "-";
|
|
cmdstr += staticBrightnessElmt.value;
|
|
cmdstr += "-";
|
|
cmdstr += Number(resetWifi.checked);
|
|
cmdstr += "-";
|
|
cmdstr += minBrightnessElmt.value;
|
|
cmdstr += "-";
|
|
cmdstr += maxBrightnessElmt.value;
|
|
|
|
console.log(cmdstr);
|
|
sendCommand(cmdstr);
|
|
toggleSettings();
|
|
}
|
|
|
|
function toggleBrightnessOptions() {
|
|
var static_b = document.getElementById("static_brightness_container");
|
|
var dyn_b = document.getElementById("dyn_brightness_container");
|
|
|
|
var ckb_dynbrightness = document.querySelector('input[id="DynBrightness"]');
|
|
|
|
if (ckb_dynbrightness.checked == true) {
|
|
static_b.classList.remove("show-container");
|
|
static_b.classList.add("hide-container")
|
|
dyn_b.classList.remove("hide-container");
|
|
dyn_b.classList.add("show-container")
|
|
}
|
|
else {
|
|
dyn_b.classList.remove("show-container");
|
|
dyn_b.classList.add("hide-container");
|
|
static_b.classList.remove("hide-container");
|
|
static_b.classList.add("show-container");
|
|
}
|
|
}
|
|
|
|
function toggleSettings() {
|
|
var container = document.getElementById("settings-container");
|
|
if (container.classList.contains("show")) {
|
|
container.classList.remove("show");
|
|
}
|
|
else {
|
|
toggleBrightnessOptions();
|
|
container.classList.add("show");
|
|
}
|
|
}
|
|
|
|
function SetMax() {
|
|
var slider = document.getElementById("mySlider");
|
|
|
|
if ("max" in slider) { // Google Chrome, Safari from version 5 and Opera
|
|
slider.min = 500;
|
|
} else {
|
|
// Safari before version 5
|
|
slider.setAttribute("max", 500);
|
|
}
|
|
|
|
OnSliderChanged(slider);
|
|
}
|
|
|
|
function OnSliderChanged(slider) {
|
|
var sliderValue = document.getElementById("sliderValue");
|
|
sliderValue.innerHTML = slider.value;
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html> |