Initial commit
This commit is contained in:
702
res/webserver/index.html
Normal file
702
res/webserver/index.html
Normal file
@@ -0,0 +1,702 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user