Skip to content

Commit a369709

Browse files
ToMe25ToMe25
committed
Change MAC address and target IP input to a dropdown with an "other" opt
which reveals a text input to put a custom address in
1 parent f1585ac commit a369709

File tree

6 files changed

+86
-24
lines changed

6 files changed

+86
-24
lines changed

‎images/web-interface.png

8.98 KB
Loading

‎platformio.ini

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ board_build.embed_txtfiles =
2222
otapass.txt
2323
devices.txt
2424
src/html/index.html
25+
src/html/index.js
2526
src/html/main.css
2627
src/html/not_found.html
2728

‎src/NetworkHandler.cpp

Lines changed: 36 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,10 @@ void NetworkHandler::setupWebServer() {
9595
webServer.on("/index.html", HTTP_GET, onIndexGet);
9696
webServer.on("/index.html", HTTP_POST, onIndexPost);
9797

98+
webServer.on("/index.js", HTTP_GET, [](AsyncWebServerRequest *request) {
99+
request->send(200, "text/javascript", INDEX_JS);
100+
});
101+
98102
webServer.on("/main.css", HTTP_GET, [](AsyncWebServerRequest *request) {
99103
request->send(200, "text/css", MAIN_CSS);
100104
});
@@ -152,6 +156,22 @@ void NetworkHandler::onIndexPost(AsyncWebServerRequest *request) {
152156
String device = request->getParam("device", true)->value();
153157
String target = request->getParam("target", true)->value();
154158

159+
if (device == "Other") {
160+
if (request->hasParam("custom_device", true)) {
161+
device = request->getParam("custom_device", true)->value();
162+
} else {
163+
device = "";
164+
}
165+
}
166+
167+
if (target == "Other") {
168+
if (request->hasParam("custom_target", true)) {
169+
target = request->getParam("custom_target", true)->value();
170+
} else {
171+
target = "";
172+
}
173+
}
174+
155175
IPAddress originalBroadcastTarget = targetBroadcast;
156176

157177
if (!WakeOnLanGenerator::isValidMac(device.c_str())) {
@@ -199,24 +219,23 @@ void NetworkHandler::onIndexPost(AsyncWebServerRequest *request) {
199219
std::string NetworkHandler::prepareIndexResponse(const String device, const String target) {
200220
std::string response = indexHtml;
201221

202-
std::string devices;
222+
std::string devices = "\n";
203223
for (std::string device : deviceMacs) {
204224
devices += "<option value=\"";
205225
devices += device;
206-
devices += "\">\n";
226+
devices += "\">";
227+
devices += device;
228+
devices += "</option>\n";
207229
}
208230
response = std::regex_replace(response, std::regex("\\$devices"),
209231
devices.c_str());
210232

211233
std::vector<std::string> targetIPs;
212234
targetIPs.reserve(4);
213-
targetIPs.push_back(std::string(target.c_str()));
214-
std::string ip(targetBroadcast.toString().c_str());
215-
if (std::count(targetIPs.begin(), targetIPs.end(), ip) == 0) {
216-
targetIPs.push_back(ip);
235+
if (target.length() > 6) {
236+
targetIPs.push_back(std::string(target.c_str()));
217237
}
218-
IPAddress globalBroadcast(255, 255, 255, 255);
219-
ip = std::string(globalBroadcast.toString().c_str());
238+
std::string ip(targetBroadcast.toString().c_str());
220239
if (std::count(targetIPs.begin(), targetIPs.end(), ip) == 0) {
221240
targetIPs.push_back(ip);
222241
}
@@ -232,12 +251,19 @@ std::string NetworkHandler::prepareIndexResponse(const String device, const Stri
232251
targetIPs.push_back(ip);
233252
}
234253
}
254+
IPAddress globalBroadcast(255, 255, 255, 255);
255+
ip = std::string(globalBroadcast.toString().c_str());
256+
if (std::count(targetIPs.begin(), targetIPs.end(), ip) == 0) {
257+
targetIPs.push_back(ip);
258+
}
235259

236-
std::string targets;
260+
std::string targets = "\n";
237261
for (std::string target : targetIPs) {
238262
targets += "<option value=\"";
239263
targets += target;
240-
targets += "\">\n";
264+
targets += "\">";
265+
targets += target;
266+
targets += "</option>\n";
241267
}
242268
response = std::regex_replace(response, std::regex("\\$targets"),
243269
targets.c_str());

‎src/NetworkHandler.h

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ extern const char OTA_PASS[] asm("_binary_otapass_txt_start");
3030
extern const char DEVICE_MACS[] asm("_binary_devices_txt_start");
3131

3232
extern const char INDEX_HTML[] asm("_binary_src_html_index_html_start");
33+
extern const char INDEX_JS[] asm("_binary_src_html_index_js_start");
3334
extern const char MAIN_CSS[] asm("_binary_src_html_main_css_start");
3435
extern const char NOT_FOUND_HTML[] asm("_binary_src_html_not_found_html_start");
3536

‎src/html/index.html

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,33 +5,36 @@
55
<meta name="author" content="ToMe25">
66
<title>ESP Wake on Lan Server</title>
77
<link rel="stylesheet" type="text/css" href="main.css">
8+
<script type="text/javascript" src="index.js"></script>
89
</head>
910
<body>
1011
<form class="main" method="post">
1112
<div class="message $message_type" hidden>$message</div>
1213
<br />
1314
<h1>ESP Wake on Lan Server</h1>
1415
<h1>Wake up settings:</h1>
15-
<label for="device">Device: </label> <input class="input" type="text"
16+
<label for="device">Device: </label> <select class="input"
1617
name="device" id="device"
18+
title="The MAC address of the device to wake up." required>$devices
19+
<option value="Other">Other</option>
20+
</select><br /> <input class="input" type="text" name="custom_device"
21+
id="custom_device"
1722
pattern="[a-fA-F0-9]{2}:[a-fA-F0-9]{2}:[a-fA-F0-9]{2}:[a-fA-F0-9]{2}:[a-fA-F0-9]{2}:[a-fA-F0-9]{2}"
1823
title="The MAC address of the device to wake up."
1924
alt="The MAC address of the device to wake up."
20-
placeholder="Device MAC Address"
21-
list="devices" value="$device" minlength="17" maxlength="17"
22-
size="11" required />
23-
<datalist id="devices">$devices
24-
</datalist>
25-
<br /> <label for="target">Target: </label> <input class="input"
26-
type="text" pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}"
27-
name="target" id="target"
25+
placeholder="Device MAC Address" minlength="17" maxlength="17"
26+
size="12" hidden="true" /> <br /> <label for="target">Target:
27+
</label> <select class="input" name="target" id="target"
28+
title="The broadcast IP address to send the wake on lan packet to."
29+
required>$targets
30+
<option value="Other">Other</option>
31+
</select><br /> <input class="input" type="text"
32+
pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}" name="custom_target"
33+
id="custom_target"
2834
title="The broadcast IP address to send the wake on lan packet to."
2935
alt="The broadcast IP address to send the wake on lan packet to."
30-
placeholder="Target Broadcast IP"
31-
list="targets" value="$target" size="11" maxlength="15" required />
32-
<datalist id="targets">$targets
33-
</datalist>
34-
<br />
36+
placeholder="Target Broadcast IP" size="12" maxlength="15"
37+
hidden="true" /> <br />
3538
<button class="wakeup" type="submit">Wake Up</button>
3639
</form>
3740
</body>

‎src/html/index.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
var device_select
2+
var device_input
3+
var target_select
4+
var target_input
5+
6+
function init() {
7+
device_select = document.getElementById("device")
8+
device_select.onchange = onchange
9+
device_input = document.getElementById("custom_device")
10+
target_select = document.getElementById("target")
11+
target_select.onchange = onchange
12+
target_input = document.getElementById("custom_target")
13+
14+
onchange()
15+
}
16+
17+
function onchange() {
18+
if (device_select.selectedOptions[0].value == "Other") {
19+
device_input.hidden = false
20+
} else {
21+
device_input.hidden = true
22+
}
23+
24+
if (target_select.selectedOptions[0].value == "Other") {
25+
target_input.hidden = false
26+
} else {
27+
target_input.hidden = true
28+
}
29+
}
30+
31+
window.onload = init

0 commit comments

Comments
 (0)