Skip to content

Commit 7aa46d3

Browse files
committed
Add led button, add github link
1 parent d22d647 commit 7aa46d3

File tree

3 files changed

+31
-18
lines changed

3 files changed

+31
-18
lines changed

web.png

33.1 KB
Loading

web/src/index.htm

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,53 +9,59 @@
99
<body>
1010
<div class="heading">STORINATOR</div>
1111

12+
<button
13+
id="powerLed"
14+
type="button"
15+
class="button"
16+
disabled>
17+
POWER LED
18+
</button>
1219
<button
1320
id="powerBtn"
1421
type="button"
1522
class="activeButton"
16-
onclick="sendCommand(CMD_POWER_ON)"
17-
>
23+
onclick="sendCommand(CMD_POWER_ON)">
1824
POWER ON
1925
</button>
2026
<button
2127
id="standByBtn"
2228
type="button"
2329
class="activeButton"
24-
onclick="sendCommand(CMD_STAND_BY)"
25-
>
30+
onclick="sendCommand(CMD_STAND_BY)">
2631
STANDBY
2732
</button>
2833
<button
2934
id="resetBtn"
3035
type="button"
3136
class="activeButton"
32-
onclick="sendCommand(CMD_RESET)"
33-
>
37+
onclick="sendCommand(CMD_RESET)">
3438
RESET
3539
</button>
3640
<button
3741
id="killBtn"
3842
type="button"
3943
class="activeButton"
40-
onclick="sendCommand(CMD_KILL)"
41-
>
44+
onclick="sendCommand(CMD_KILL)">
4245
KILL
4346
</button>
4447

48+
<a href="https://github.com/MatiasG19/arduino-remote-switch">Arduino Remote Switch on GitHub</a>
49+
4550
<script>
4651
const CMD_POWER_ON = "powerOn", CMD_STAND_BY = "standBy", CMD_RESET = "reset", CMD_KILL = "kill"
4752
const REQ_POWER_STATUS = "powerStatus"
4853

4954
setInterval(() => {
55+
togglePowerLedColor(true)
5056
requestStatus(REQ_POWER_STATUS)
5157
}, 3000)
5258

53-
function togglePowerButtonColor(state) {
54-
const powerBtn = document.getElementById('powerBtn')
59+
function togglePowerLedColor(state) {
60+
const powerLed = document.getElementById('powerLed')
5561
if (state) {
56-
powerBtn.style.color = "#27e670"
62+
powerLed.style.color = "#27e670"
5763
} else {
58-
powerBtn.style.color = "#cfcfcf"
64+
powerLed.style.color = "#eb1e8f"
5965
}
6066
}
6167

@@ -80,9 +86,9 @@
8086
console.debug(`requestStatus:${request}:${this.responseText}`)
8187
if(request == REQ_POWER_STATUS && typeof this.response === "string") {
8288
if(this.response.toString().includes(REQ_POWER_STATUS+":on"))
83-
togglePowerButtonColor(true)
89+
togglePowerLedColor(true)
8490
else
85-
togglePowerButtonColor(false)
91+
togglePowerLedColor(false)
8692
}
8793
}
8894
}

web/src/style.css

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ html {
66
body {
77
background-color: #1f1e29;
88
color: #cfcfcf;
9-
height: 95%;
9+
height: 100%;
1010
}
1111

1212
.heading {
@@ -20,13 +20,12 @@ button {
2020
width: calc(100% - 2vw);
2121
min-width: 50px;
2222
max-width: 200vh;
23-
height: 20%;
23+
height: 15%;
2424
min-height: 50px;
2525
border: none;
2626
border-radius: 1vw;
2727
margin: 1vh 1vw 1vh 1vw;
28-
font-size: 10vh;
29-
28+
font-size: 5vh;
3029
color: #cfcfcf;
3130
background-color: #313131;
3231
}
@@ -43,4 +42,12 @@ button {
4342
.activeButton:active {
4443
background-color: #494949;
4544
color: #cfcfcf;
45+
}
46+
47+
a {
48+
color: #cfcfcf;
49+
display: flex;
50+
align-items: center;
51+
justify-content: center;
52+
padding: 5%;
4653
}

0 commit comments

Comments
 (0)