Skip to content

Commit

Permalink
show build time on website, show snackbar only on errors
Browse files Browse the repository at this point in the history
  • Loading branch information
@ModischFabrications
ModischFabrications committed Oct 21, 2023
1 parent debeb35 commit ac32e45
Show file tree
Hide file tree
Showing 3 changed files with 403 additions and 398 deletions.
4 changes: 2 additions & 2 deletions src/inputs/website.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,8 +188,8 @@ void setup() {
server.serveStatic("/favicon.ico", LittleFS, "/favicon.png").setCacheControl("max-age=600");
server.onNotFound(RedirectUnknown);

server.on("/health", HTTP_ANY, GetHealth);
server.on("/build_time", HTTP_ANY, GetBuildTime);
server.on("/health", HTTP_GET, GetHealth);
server.on("/build_time", HTTP_GET, GetBuildTime);
server.on("/brightness", HTTP_POST, PostBrightness);
server.on("/timeout", HTTP_POST, PostTimeout);
server.on("/mode", HTTP_GET, GetMode);
Expand Down
330 changes: 165 additions & 165 deletions website/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,166 +1,166 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta http-equiv="Content-type" content="text/html" ; charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0, shrink-to-fit=no" />
<meta name="author" content="Modisch Fabrications">
<meta name="description" content="Remote control page for ModischMatrix">
<meta name="theme-color" content="#858585" />
<title>ModischMatrix</title>
<link rel="stylesheet" href="style.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.png">
<script src="script.js"></script>
</head>

<body onload="init()">
<div id="page-container">

<h1 class="title">
ModischMatrix
</h1>

<noscript>
No JavaScript, no function. Sorry buddy!
</noscript>

<section>
<!-- Tab links -->
<div class="tab">
<button class="tablinks" id="mode_0" onclick="openTab(this)">Off</button>
<button class="tablinks" id="mode_1" onclick="openTab(this)">Static</button>
<button class="tablinks" id="mode_2" onclick="openTab(this)">Login</button>
<button class="tablinks" id="mode_3" onclick="openTab(this)">Clock</button>
<button class="tablinks" id="mode_4" onclick="openTab(this)">Dashboard</button>
<button class="tablinks" id="mode_5" onclick="openTab(this)">Colorwave</button>
<button class="tablinks" id="mode_6" onclick="openTab(this)">Fire</button>
<button class="tablinks" id="mode_7" onclick="openTab(this)">Sprinkles</button>
<button class="tablinks" id="mode_8" onclick="openTab(this)">Game of Life</button>
<button class="tablinks" id="mode_9" onclick="openTab(this)">Snake</button>
<button class="tablinks" id="mode_10" onclick="openTab(this)">Freedraw</button>
</div>

<!-- Tab content -->
<div>
<div id="mode_0_tab" class="tabcontent"></div>

<div id="mode_1_tab" class="tabcontent">
<p>Print text:</p>
<!-- wrap="hard" doesn't always add \n, but it's not that important; &#10; is newline -->
<textarea id="printInput" class="matrixText" cols="10" rows="4" maxlength="40"
placeholder="Row1&#10;Row2&#10;..." wrap="hard"
onkeydown="checkEnter(event, sendText)">Hello&#10;World!</textarea>
<input id="printSubmit" type="submit" onclick="sendText()">
<p>Some symbols are supported, try <code>-></code> or <code>♥</code>. </p>
</div>

<div id="mode_2_tab" class="tabcontent">
<p> <input id="URL_FIELD" class="formText" type="text" readonly>
<button onclick="copyToClipboard(URL_FIELD.value)">Copy</button>
</p>

<p> <input id="MDNS_FIELD" class="formText" type="text" readonly>
<button onclick="copyToClipboard(MDNS_FIELD.value)">Copy</button>
</p>
</div>

<div id="mode_3_tab" class="tabcontent"></div>
<div id="mode_4_tab" class="tabcontent"></div>
<div id="mode_5_tab" class="tabcontent"></div>
<div id="mode_6_tab" class="tabcontent"></div>
<div id="mode_7_tab" class="tabcontent"></div>

<div id="mode_8_tab" class="tabcontent">
<p>Use custom ruleset:</p>
<textarea id="golRuleInput" class="golRulesText" cols="20" rows="1" maxlength="20"
placeholder="B3/S23" wrap="hard" onkeydown="checkEnter(event, sendGOLRules)">B36/S23</textarea>
<input type="submit" onclick="sendGOLRules()">
<p>Each Cell is: (B)orn from exactly {} neighbors, (S)urviving with exactly {} neighbors, dying
otherwise.
</p>
<p>HighLife: B36/S23</p>
<p>Seeds: B2/S</p>
</div>

<div id="mode_9_tab" class="tabcontent">
<div class="radio">
<p>Choose your Snake: </p>
<input type="radio" id="playerSlotRadio1" name="playerIndex" value="0" checked>
<input type="radio" id="playerSlotRadio2" name="playerIndex" value="1">
<input type="radio" id="playerSlotRadio3" name="playerIndex" value="2">
<input type="radio" id="playerSlotRadio4" name="playerIndex" value="3">
</div>

<div class="keys">
<div class="up arr" onpointerdown="arrowPressed(1)">↑</div>
<br />
<div class="left arr" onpointerdown="arrowPressed(3)">←</div>
<div class="down arr" onpointerdown="arrowPressed(2)">↓</div>
<div class="right arr" onpointerdown="arrowPressed(4)">→</div>
</div>
</div>

<div id="mode_10_tab" class="tabcontent">
<div id="freeDrawSettings">
<div class="colorSelection">
<input type="radio" id="drawColorRadio1" class="autoload" name="drawColorRadio" value="1"
onclick="c.setColor(drawColor1.value)" checked>
<input id="drawColor1" type="color" value="#ffffff">
</div>
<div class="colorSelection">
<input type="radio" id="drawColorRadio2" name="drawColorRadio" value="2"
onclick="c.setColor(drawColor2.value)">
<input id="drawColor2" type="color" value="#999999">
</div>
<div class="colorSelection">
<input type="radio" id="drawColorRadio3" name="drawColorRadio" value="3"
onclick="c.setColor(drawColor3.value)">
<input id="drawColor3" type="color" value="#aa2222">
</div>
<div class="colorSelection">
<input type="radio" id="drawColorRadio4" name="drawColorRadio" value="4"
onclick="c.setColor(drawColor4.value)">
<input id="drawColor4" type="color" value="#11cc22">
</div>
<div class="colorSelection">
<input type="radio" id="drawColorRadio5" name="drawColorRadio" value="5"
onclick="c.setColor(drawColor5.value)">
<input id="drawColor5" type="color" value="#1111cc">
</div>
<button onclick="c.fill()">Fill</button>
<button onclick="c.clear()">Clear</button>
</div>
<canvas id="freeDrawCanvas" width="64" height="32"></canvas>

</div>
</div>
</section>

<section>
<div class="rangeInput">
<p>Back to OFF after:</p>
<input id="timeoutSlider" class="slider autoload" type="range" min="10" max="3600" value="60"
oninput='onTimeoutChanged(this)' />
<p><output id="timeoutOutput"></output></p>
<input type="submit" onclick="postValue('/timeout', timeoutSlider.value)">
</div>

<div class="rangeInput">
<p>Set brightness to:</p>
<input id="brightnessSlider" class="slider autoload" type="range" min="1" max="100" value="50"
oninput='brightnessOutput.value = value + "%"' />
<p><output id="brightnessOutput"></output></p>
<input type="submit" onclick="postValue('/brightness', Math.round(brightnessSlider.value*2.55))">
</div>
</section>
</div>

<div class="footer">
<p>© Modisch Fabrications</p>
</div>

<div id="snackbar"></div>

</body>

<!DOCTYPE html>
<html lang="en">

<head>
<meta http-equiv="Content-type" content="text/html" ; charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0, shrink-to-fit=no" />
<meta name="author" content="Modisch Fabrications">
<meta name="description" content="Remote control page for ModischMatrix">
<meta name="theme-color" content="#858585" />
<title>ModischMatrix</title>
<link rel="stylesheet" href="style.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.png">
<script src="script.js"></script>
</head>

<body onload="init()">
<div id="page-container">

<h1 class="title">
ModischMatrix
</h1>

<noscript>
No JavaScript, no function. Sorry buddy!
</noscript>

<section>
<!-- Tab links -->
<div class="tab">
<button class="tablinks" id="mode_0" onclick="openTab(this)">Off</button>
<button class="tablinks" id="mode_1" onclick="openTab(this)">Static</button>
<button class="tablinks" id="mode_2" onclick="openTab(this)">Login</button>
<button class="tablinks" id="mode_3" onclick="openTab(this)">Clock</button>
<button class="tablinks" id="mode_4" onclick="openTab(this)">Dashboard</button>
<button class="tablinks" id="mode_5" onclick="openTab(this)">Colorwave</button>
<button class="tablinks" id="mode_6" onclick="openTab(this)">Fire</button>
<button class="tablinks" id="mode_7" onclick="openTab(this)">Sprinkles</button>
<button class="tablinks" id="mode_8" onclick="openTab(this)">Game of Life</button>
<button class="tablinks" id="mode_9" onclick="openTab(this)">Snake</button>
<button class="tablinks" id="mode_10" onclick="openTab(this)">Freedraw</button>
</div>

<!-- Tab content -->
<div>
<div id="mode_0_tab" class="tabcontent"></div>

<div id="mode_1_tab" class="tabcontent">
<p>Print text:</p>
<!-- wrap="hard" doesn't always add \n, but it's not that important; &#10; is newline -->
<textarea id="printInput" class="matrixText" cols="10" rows="4" maxlength="40"
placeholder="Row1&#10;Row2&#10;..." wrap="hard"
onkeydown="checkEnter(event, sendText)">Hello&#10;World!</textarea>
<input id="printSubmit" type="submit" onclick="sendText()">
<p>Some symbols are supported, try <code>-></code> or <code>♥</code>. </p>
</div>

<div id="mode_2_tab" class="tabcontent">
<p> <input id="URL_FIELD" class="formText" type="text" readonly>
<button onclick="copyToClipboard(URL_FIELD.value)">Copy</button>
</p>

<p> <input id="MDNS_FIELD" class="formText" type="text" readonly>
<button onclick="copyToClipboard(MDNS_FIELD.value)">Copy</button>
</p>
</div>

<div id="mode_3_tab" class="tabcontent"></div>
<div id="mode_4_tab" class="tabcontent"></div>
<div id="mode_5_tab" class="tabcontent"></div>
<div id="mode_6_tab" class="tabcontent"></div>
<div id="mode_7_tab" class="tabcontent"></div>

<div id="mode_8_tab" class="tabcontent">
<p>Use custom ruleset:</p>
<textarea id="golRuleInput" class="golRulesText" cols="20" rows="1" maxlength="20"
placeholder="B3/S23" wrap="hard" onkeydown="checkEnter(event, sendGOLRules)">B36/S23</textarea>
<input type="submit" onclick="sendGOLRules()">
<p>Each Cell is: (B)orn from exactly {} neighbors, (S)urviving with exactly {} neighbors, dying
otherwise.
</p>
<p>HighLife: B36/S23</p>
<p>Seeds: B2/S</p>
</div>

<div id="mode_9_tab" class="tabcontent">
<div class="radio">
<p>Choose your Snake: </p>
<input type="radio" id="playerSlotRadio1" name="playerIndex" value="0" checked>
<input type="radio" id="playerSlotRadio2" name="playerIndex" value="1">
<input type="radio" id="playerSlotRadio3" name="playerIndex" value="2">
<input type="radio" id="playerSlotRadio4" name="playerIndex" value="3">
</div>

<div class="keys">
<div class="up arr" onpointerdown="arrowPressed(1)">↑</div>
<br />
<div class="left arr" onpointerdown="arrowPressed(3)">←</div>
<div class="down arr" onpointerdown="arrowPressed(2)">↓</div>
<div class="right arr" onpointerdown="arrowPressed(4)">→</div>
</div>
</div>

<div id="mode_10_tab" class="tabcontent">
<div id="freeDrawSettings">
<div class="colorSelection">
<input type="radio" id="drawColorRadio1" class="autoload" name="drawColorRadio" value="1"
onclick="c.setColor(drawColor1.value)" checked>
<input id="drawColor1" type="color" value="#ffffff">
</div>
<div class="colorSelection">
<input type="radio" id="drawColorRadio2" name="drawColorRadio" value="2"
onclick="c.setColor(drawColor2.value)">
<input id="drawColor2" type="color" value="#999999">
</div>
<div class="colorSelection">
<input type="radio" id="drawColorRadio3" name="drawColorRadio" value="3"
onclick="c.setColor(drawColor3.value)">
<input id="drawColor3" type="color" value="#aa2222">
</div>
<div class="colorSelection">
<input type="radio" id="drawColorRadio4" name="drawColorRadio" value="4"
onclick="c.setColor(drawColor4.value)">
<input id="drawColor4" type="color" value="#11cc22">
</div>
<div class="colorSelection">
<input type="radio" id="drawColorRadio5" name="drawColorRadio" value="5"
onclick="c.setColor(drawColor5.value)">
<input id="drawColor5" type="color" value="#1111cc">
</div>
<button onclick="c.fill()">Fill</button>
<button onclick="c.clear()">Clear</button>
</div>
<canvas id="freeDrawCanvas" width="64" height="32"></canvas>

</div>
</div>
</section>

<section>
<div class="rangeInput">
<p>Back to OFF after:</p>
<input id="timeoutSlider" class="slider autoload" type="range" min="10" max="3600" value="60"
oninput='onTimeoutChanged(this)' />
<p><output id="timeoutOutput"></output></p>
<input type="submit" onclick="postValue('/timeout', timeoutSlider.value)">
</div>

<div class="rangeInput">
<p>Set brightness to:</p>
<input id="brightnessSlider" class="slider autoload" type="range" min="1" max="100" value="50"
oninput='brightnessOutput.value = value + "%"' />
<p><output id="brightnessOutput"></output></p>
<input type="submit" onclick="postValue('/brightness', Math.round(brightnessSlider.value*2.55))">
</div>
</section>
</div>

<div class="footer">
<p id="BUILD_FIELD">© Modisch Fabrications - Build </p>
</div>

<div id="snackbar"></div>

</body>

</html>
Loading

0 comments on commit ac32e45

Please sign in to comment.