Skip to content

Commit dcb7ebd

Browse files
bloftbloft
committed
Add config to web interface, plus minor improvements
1 parent 8803810 commit dcb7ebd

File tree

5 files changed

+96
-45
lines changed

5 files changed

+96
-45
lines changed

‎html/template.html‎

Lines changed: 30 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!-- split:header -->
1+
<!-- split:main1 -->
22
<!DOCTYPE html>
33
<html lang="en">
44
<head>
@@ -16,8 +16,16 @@
1616
url: input.dataset.url, method: "POST", data: $(input).closest("form").find("input").val()
1717
}).complete(function (data, textStatus, jqXHR) {
1818
alert(textStatus);
19-
})
19+
});
2020
}
21+
setInterval(function() {
22+
$("[data-ajaxurl]").each(function(index) {
23+
var ele = $(this);
24+
$.ajax(ele.data("ajaxurl")).complete(function (data, textStatus, jqXHR) {
25+
ele.html(data);
26+
});
27+
});
28+
}, 1000);
2129
</script>
2230
<div class="container">
2331
<h1>Device Info - {device_id}</h1>
@@ -40,16 +48,15 @@ <h1>Device Info - {device_id}</h1>
4048
<br />
4149
<div class="container-fluid">
4250
<div class="row">
43-
<!-- split:header -->
51+
<!-- split:main1 -->
4452

4553
<!-- split:sensor -->
4654
<div class="col-md-4">
4755
<div class="panel panel-info">
4856
<div class="panel-heading"><strong>{name}</strong></div>
49-
<div class="panel-body" style="font-size: 24px;">
57+
<div class="panel-body" data-ajaxurl="{name}" style="font-size: 24px;">
5058
{value}
5159
</div>
52-
<div class="panel-footer" style="padding: 5px 15px; font-size: 85%"><strong>Last updated:</strong> {last_updated}</div>
5360
</div>
5461
</div>
5562
<!-- split:sensor -->
@@ -67,6 +74,7 @@ <h1>Device Info - {device_id}</h1>
6774
<!-- split:value_off -->
6875
</div>
6976
<div class="panel-footer" style="padding: 5px 15px; font-size: 85%"><strong>Last updated:</strong> 2017-09-29 8:30:23</div>
77+
<div class="panel-footer" style="padding: 5px 15px; font-size: 85%"><strong>Last updated:</strong> {last_updated}</div>
7078
</div>
7179
</div>
7280

@@ -160,7 +168,7 @@ <h1>Device Info - {device_id}</h1>
160168
</div>
161169
</div>
162170

163-
<!-- split:input_panel -->
171+
<!-- split:main2 -->
164172
</div>
165173
</div>
166174
</div>
@@ -169,7 +177,7 @@ <h1>Device Info - {device_id}</h1>
169177
<br />
170178
<div class="container-fluid">
171179
<div class="row">
172-
<!-- split:input_panel -->
180+
<!-- split:main2 -->
173181

174182
<!-- Input data -->
175183
<!-- split:input -->
@@ -192,27 +200,29 @@ <h1>Device Info - {device_id}</h1>
192200
</div>
193201
<!-- split:input -->
194202

195-
<!-- split:footer1 -->
203+
<!-- split:main3 -->
196204
</div>
197205
</div>
198206
</div>
199207

200208
<div role="tabpanel" class="tab-pane" id="config">
201-
<br />
202209
<div class="container-fluid">
203210
<div class="row">
204211
<div class="col-md-12">
205-
<div class="alert alert-warning" role="alert">
206-
<strong>Warning!</strong> Not connected to WiFi
207-
</div>
208-
<form class="form-horizontal">
209-
<h3>WiFi</h3><hr/>
212+
<form class="form-horizontal" action="/save" method="POST">
213+
<!-- split:main3 -->
214+
<!-- split:config_header -->
215+
<br />
216+
<h3>{title}</h3><hr/>
217+
<!-- split:config_header -->
218+
<!-- split:config_entry -->
210219
<div class="form-group">
211-
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
220+
<label for="{key}" class="col-sm-2 control-label">{key}</label>
212221
<div class="col-sm-8">
213-
<input type="email" class="form-control" id="inputEmail3" placeholder="Rssd">
222+
<input type="{type}" class="form-control" id="{key}" placeholder="" value="{value}">
214223
</div>
215224
</div>
225+
<!-- split:config_entry -->
216226
<div class="form-group">
217227
<label for="inputEmail3" class="col-sm-2 control-label">Password</label>
218228
<div class="col-sm-8">
@@ -245,6 +255,7 @@ <h3>Other</h3><hr/>
245255
</div>
246256
</div>
247257
-->
258+
<!-- split:main4 -->
248259
<hr/>
249260
<div class="form-group">
250261
<div class="col-sm-offset-9 col-sm-2">
@@ -268,15 +279,15 @@ <h3>Other</h3><hr/>
268279
<hr />
269280
Rest API:<br />
270281
<ul>
271-
<!-- split:footer1 -->
282+
<!-- split:main4 -->
272283
<!-- split:rest_doc -->
273284
<li>{path}</li>
274285
<!-- split:rest_doc -->
275286
<li>http://192.168.1.72/audio/mute</li>
276287
<li>http://192.168.1.72/model</li>
277288
<li>http://192.168.1.72/source</li>
278289
<li>http://192.168.1.72/lamp/mode</li>
279-
<!-- split:footer2 -->
290+
<!-- split:main5 -->
280291
</ul>
281292
</div>
282293
</div>
@@ -290,4 +301,4 @@ <h3>Other</h3><hr/>
290301
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
291302
</body>
292303
</html>
293-
<!-- split:footer2 -->
304+
<!-- split:main5 -->

‎src/ConfigEntry.h‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,22 @@ class ConfigEntry : public MqttEntry {
1616

1717
String getString(String key, String defaultValue) {
1818
key.replace(".", "/");
19-
return get(key).getValue();
19+
String value = get(key).getValue();
20+
if(value == "") {
21+
return defaultValue;
22+
} else {
23+
return value;
24+
}
2025
}
2126

22-
const char* getCString(String key, String defaultValue) {
23-
return getString(key, defaultValue).c_str();
27+
char* getCString(String key, String defaultValue) {
28+
String value = getString(key, defaultValue);
29+
char cValue[value.length() + 1];
30+
memset(cValue, 0, value.length() + 1);
31+
for(int i=0; i < value.length(); i++) {
32+
cValue[i] = value.charAt(i);
33+
}
34+
return cValue;
2435
}
2536

2637
int getInt(String key, int defaultValue) {

‎src/EasyMqtt.h‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,9 @@ class EasyMqtt : public MqttEntry {
2323
*/
2424
void connect() {
2525
if(WiFi.status() != WL_CONNECTED) {
26-
String ssid = config().getString("wifi.ssid", "");
27-
String password = config().getString("wifi.password", "");
28-
debug("Connecting to wifi: " + ssid);
26+
debug("Connecting to wifi: " + config().getString("wifi.ssid", ""));
2927
WiFi.mode(WIFI_STA);
30-
WiFi.begin(ssid.c_str(), password.c_str());
28+
WiFi.begin(config().getCString("wifi.ssid", ""), config().getCString("wifi.password", ""));
3129

3230
int timer = 0;
3331
while ((WiFi.status() != WL_CONNECTED) && timer < 10) {
@@ -38,15 +36,15 @@ class EasyMqtt : public MqttEntry {
3836
if(timer < 10) {
3937
debug("WiFi connected");
4038
} else {
41-
debug("WiFi connection timeout");
39+
debug("WiFi connection timeout - Setup AP");
4240
// ToDo: create AP
41+
WiFi.mode(WIFI_AP);
42+
WiFi.softAP(config().getCString("wifi.ap", "EasyMqtt"), "123456");
4343
}
4444
debug("IP address", WiFi.localIP().toString());
4545
debug("devideId", deviceId);
4646
webPortal.setup(*this);
4747
}
48-
String host = config().getString("mqtt.host", "");
49-
int port = config().getInt("mqtt.port", 1883);
5048
if(mqttClient.state() == MQTT_DISCONNECTED) {
5149
// Setup MQTT
5250
mqttClient.setClient(wifiClient);
@@ -55,13 +53,11 @@ class EasyMqtt : public MqttEntry {
5553
entry->callback(topic, payload, length);
5654
});
5755
});
58-
mqttClient.setServer(host.c_str(), port);
56+
mqttClient.setServer(config().getCString("mqtt.host", ""), config().getInt("mqtt.port", 1883));
5957
}
6058
if (!mqttClient.connected()) {
61-
String username = config().getString("mqtt.username", "");
62-
String password = config().getString("mqtt.password", "");
63-
debug("Connecting to MQTT: " + host + " on port " + String(port));
64-
if (mqttClient.connect(deviceId.c_str(), username.c_str(), password.c_str())) {
59+
debug("Connecting to MQTT");
60+
if (mqttClient.connect(deviceId.c_str(), config().getCString("mqtt.username", ""), config().getCString("mqtt.password", ""))) {
6561
debug("Connected to MQTT");
6662

6763
setPublishFunction([&](MqttEntry* entry, String message){

‎src/WebPortal.h‎

Lines changed: 36 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ class WebPortal {
2828
#endif
2929
webServer.reset(new ESP8266WebServer(80));
3030
webServer->on("/", std::bind(&WebPortal::handleRoot, this));
31+
webServer->on("/save", std::bind(&WebPortal::handleSaveConfig, this));
3132
mqtt->each([&](MqttEntry* entry) {
3233
if(entry->isIn() || entry->isOut()) {
3334
webServer->on(getName(entry).c_str(), std::bind(&WebPortal::handleRest, this));
@@ -39,8 +40,7 @@ class WebPortal {
3940

4041
void handleRoot() {
4142
String page = "";
42-
page += FPSTR(HTML_HEADER);
43-
43+
page += FPSTR(HTML_MAIN1);
4444
// Sensors
4545
mqtt->each([&](MqttEntry* entry) {
4646
if(entry->isIn()) {
@@ -63,8 +63,7 @@ class WebPortal {
6363
}
6464
});
6565

66-
page += FPSTR(HTML_INPUT_PANEL);
67-
66+
page += FPSTR(HTML_MAIN2);
6867
// Inputs
6968
mqtt->each([&](MqttEntry* entry) {
7069
if(entry->isOut()) {
@@ -73,19 +72,50 @@ class WebPortal {
7372
}
7473
});
7574

76-
page += FPSTR(HTML_FOOTER1);
75+
page += FPSTR(HTML_MAIN3);
76+
// Config
77+
mqtt->get("config").each([&](MqttEntry* entry) {
78+
page += FPSTR(HTML_CONFIG_ENTRY);
79+
String name = getName(entry);
80+
name = name.substring(7);
81+
name.replace("/", ".");
82+
if(name.endsWith("password")) {
83+
page.replace("{type}", "password");
84+
} else {
85+
page.replace("{type}", "text");
86+
}
87+
page.replace("{name}", name);
88+
page.replace("{value}", entry->getValue());
89+
});
90+
91+
92+
page += FPSTR(HTML_MAIN4);
7793
mqtt->each([&](MqttEntry* entry) {
7894
if(entry->isOut() || entry->isIn()) {
7995
page += FPSTR(HTML_REST_DOC);
8096
page.replace("{path}", getName(entry));
8197
}
8298
});
83-
page += FPSTR(HTML_FOOTER2);
99+
page += FPSTR(HTML_MAIN5);
100+
// About
84101
page.replace("{device_id}", mqtt->get("system/deviceId").getValue());
85102
page.replace("{topic}", mqtt->getTopic());
86103
webServer->send(200, "text/html", page);
87104
}
88105

106+
void handleSaveConfig() {
107+
mqtt->get("config").each([&](MqttEntry* entry) {
108+
String name = getName(entry);
109+
name = name.substring(7);
110+
name.replace("/", ".");
111+
// webServer->hasArg(name.c_str());
112+
entry->setValue(webServer->arg(name.c_str()));
113+
});
114+
webServer->sendHeader("Location", String("/"), true);
115+
webServer->send(302, "text/plain", "");
116+
ESP.restart();
117+
}
118+
89119
void handleRest() {
90120
MqttEntry* entry = &mqtt->get(webServer->uri().substring(1));
91121
if(webServer->method() == HTTP_GET && entry->isIn()) {

0 commit comments

Comments
 (0)