mirror of
https://github.com/lumapu/ahoy.git
synced 2025-06-24 05:16:59 +02:00
* new structure
* slim definitions of fields and units * prepared multi inverter setup (not finished now)
This commit is contained in:
lumapu
parent
58d79beb8c
commit
d0731f7065
17 changed files with 813 additions and 672 deletions
|
|
@ -1 +1 @@
|
|||
String setup_html = "<!doctype html><html><head><title>Setup - {DEVICE}</title><link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\"/><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"></head><body><h1>Setup</h1><div id=\"setup\" class=\"content\"><div id=\"content\"><p> Enter the credentials to your prefered WiFi station. After rebooting the device tries to connect with this information. </p><form method=\"post\" action=\"/save\"><p class=\"des\">WiFi</p><div class=\"inputWrp\"><input type=\"text\" class=\"inputText\" name=\"ssid\" value=\"{SSID}\" required/><span class=\"floating_label\">SSID</span></div><div class=\"inputWrp\"><input type=\"password\" class=\"inputText\" name=\"pwd\" value=\"{PWD}\" required/><span class=\"floating_label\">PASSWORD</span></div><p class=\"des\">Device Host Name</p><div class=\"inputWrp\"><input type=\"text\" class=\"inputText\" name=\"device\" value=\"{DEVICE}\" required/><span class=\"floating_label\">DEVICE NAME</span></div><p class=\"des\">Inverter</p><div class=\"inputWrp\"><input type=\"text\" class=\"inputText\" name=\"inv0Addr\" value=\"{INV0_ADDR}\" required/><span class=\"floating_label\">INVERTER 0 ADDRESS (eg. 11:22:33:44:55:66)</span></div><div class=\"inputWrp\"><input type=\"text\" class=\"inputText\" name=\"invInterval\" value=\"{INV_INTERVAL}\" required/><span class=\"floating_label\">INTERVAL (ms)</span></div><p class=\"des\">MQTT</p><div class=\"inputWrp\"><input type=\"text\" class=\"inputText\" name=\"mqttAddr\" value=\"{MQTT_ADDR}\" required/><span class=\"floating_label\">BROKER (Server IP)</span></div><div class=\"inputWrp\"><input type=\"text\" class=\"inputText\" name=\"mqttUser\" value=\"{MQTT_USER}\"/><span class=\"floating_label\">USERNAME (optional)</span></div><div class=\"inputWrp\"><input type=\"text\" class=\"inputText\" name=\"mqttPwd\" value=\"{MQTT_PWD}\"/><span class=\"floating_label\">PASSWORD (optional)</span></div><div class=\"inputWrp\"><input type=\"text\" class=\"inputText\" name=\"mqttTopic\" value=\"{MQTT_TOPIC}\" required/><span class=\"floating_label\">TOPIC</span></div><div class=\"inputWrp\"><input type=\"text\" class=\"inputText\" name=\"mqttInterval\" value=\"{MQTT_INTERVAL}\" required/><span class=\"floating_label\">INTERVAL (ms)</span></div><input type=\"checkbox\" class=\"cb\" name=\"reboot\"/><label for=\"reboot\">Reboot device after successful save</label><input type=\"submit\" value=\"save\" class=\"button\" /></form></div></div><div id=\"footer\"><p class=\"left\"><a href=\"/\">Home</a></p><p class=\"left\"><a href=\"/update\">Update Firmware</a></p><p class=\"right\">AHOY - {VERSION}</p></div></body></html>";
|
||||
String setup_html = "<!doctype html><html><head><title>Setup - {DEVICE}</title><link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\"/><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"></head><body><h1>Setup</h1><div id=\"setup\" class=\"content\"><div id=\"content\"><p> Enter the credentials to your prefered WiFi station. After rebooting the device tries to connect with this information. </p><form method=\"post\" action=\"/save\"><p class=\"des\">WiFi</p><label for=\"ssid\">SSID</label><input type=\"text\" class=\"text\" name=\"ssid\" value=\"{SSID}\"/><label for=\"pwd\">Password</label><input type=\"password\" class=\"text\" name=\"pwd\" value=\"{PWD}\"/><p class=\"des\">Device Host Name</p><label for=\"device\">Device Name</label><input type=\"text\" class=\"text\" name=\"device\" value=\"{DEVICE}\"/><p class=\"des\">Inverter</p> {INVERTERS}<br/><label for=\"invInterval\">Interval (ms)</label><input type=\"text\" class=\"text\" name=\"invInterval\" value=\"{INV_INTERVAL}\"/><p class=\"des\">MQTT</p><label for=\"mqttAddr\">Broker / Server IP</label><input type=\"text\" class=\"text\" name=\"mqttAddr\" value=\"{MQTT_ADDR}\"/><label for=\"mqttUser\">Username (optional)</label><input type=\"text\" class=\"text\" name=\"mqttUser\" value=\"{MQTT_USER}\"/><label for=\"mqttPwd\">Password (optional)</label><input type=\"text\" class=\"text\" name=\"mqttPwd\" value=\"{MQTT_PWD}\"/><label for=\"mqttTopic\">Topic</label><input type=\"text\" class=\"text\" name=\"mqttTopic\" value=\"{MQTT_TOPIC}\"/><label for=\"mqttInterval\">Interval (seconds)</label><input type=\"text\" class=\"text\" name=\"mqttInterval\" value=\"{MQTT_INTERVAL}\"/><p class=\"des\"> </p><input type=\"checkbox\" class=\"cb\" name=\"reboot\"/><label for=\"reboot\">Reboot device after successful save</label><input type=\"submit\" value=\"save\" class=\"button\" /></form></div></div><div id=\"footer\"><p class=\"left\"><a href=\"/\">Home</a></p><p class=\"left\"><a href=\"/update\">Update Firmware</a></p><p class=\"right\">AHOY - {VERSION}</p></div></body></html>";
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
String style_css = "h1 { margin: 0; padding: 20pt; font-size: 22pt; color: #fff; background-color: #006ec0; display: block; text-transform: uppercase; } html, body { font-family: Arial; margin: 0; padding: 0; } p { text-align: justify; font-size: 13pt; } .des { font-size: 14pt; color: #006ec0; padding-bottom: 0px !important; } .fw { width: 60px; display: block; float: left; } .color { width: 50px; height: 50px; border: 1px solid #ccc; } .range { width: 300px; } a:link, a:visited { text-decoration: none; font-size: 13pt; color: #006ec0; } a:hover, a:focus { color: #f00; } #content { padding: 15px 15px 60px 15px; } #footer { position: fixed; bottom: 0px; height: 45px; background-color: #006ec0; width: 100%; } #footer p { color: #fff; padding-left: 20px; padding-right: 20px; font-size: 10pt !important; } #footer a { color: #fff; } #footer a:hover { color: #f00; } div.content { background-color: #fff; padding-bottom: 65px; overflow: hidden; } span.warn { display: inline-block; padding-left: 20px; color: #ff9900; font-style: italic; } input { padding: 10px; font-size: 13pt; } input.button { background-color: #006ec0; color: #fff; border: 0px; float: right; text-transform: uppercase; } input.cb { margin-bottom: 20px; } label { font-size: 14pt; } .left { float: left; } .right { float: right; } .inputWrp { position: relative; } .inputWrp .inputText { height: 35px; width: 90%; margin-bottom: 20px; border: 1px solid #ccc; border-top: none; border-right: none; } .inputWrp .floating_label { position: absolute; pointer-events: none; top: 20px; left: 10px; transition: 0.2s ease all; } .inputWrp input:focus ~ .floating_label, .inputWrp input:not(:focus):valid ~ .floating_label { top: 0px; left: 20px; font-size: 10px; color: blue; opacity: 1; } div.module { display: block; width: 250px; height: 410px; background-color: #006ec0; display: inline-block; position: relative; margin-right: 20px; margin-bottom: 20px; } div.module .value, div.module .info, div.module .header { color: #fff; display: block; width: 100%; text-align: center; } div.module .unit { font-size: 19px; margin-left: 10px; } div.module .value { margin-top: 20px; font-size: 30px; } div.module .info { margin-top: 3px; font-size: 10px; } div.module .header { background-color: #003c80; padding: 10px 0 10px 0; } ";
|
||||
String style_css = "h1 { margin: 0; padding: 20pt; font-size: 22pt; color: #fff; background-color: #006ec0; display: block; text-transform: uppercase; } html, body { font-family: Arial; margin: 0; padding: 0; } p { text-align: justify; font-size: 13pt; } .des { margin-top: 35px; font-size: 14pt; color: #006ec0; } .subdes { font-size: 13pt; color: #006ec0; margin-left: 7px; } .fw { width: 60px; display: block; float: left; } .color { width: 50px; height: 50px; border: 1px solid #ccc; } .range { width: 300px; } a:link, a:visited { text-decoration: none; font-size: 13pt; color: #006ec0; } a:hover, a:focus { color: #f00; } #content { padding: 15px 15px 60px 15px; } #footer { position: fixed; bottom: 0px; height: 45px; background-color: #006ec0; width: 100%; } #footer p { color: #fff; padding-left: 20px; padding-right: 20px; font-size: 10pt !important; } #footer a { color: #fff; } div.content { background-color: #fff; padding-bottom: 65px; overflow: hidden; } input { padding: 7px; font-size: 13pt; } input.text, input.password { width: 70%; box-sizing: border-box; margin-bottom: 10px; /*float: right;*/ border: 1px solid #ccc; } input.button { background-color: #006ec0; color: #fff; border: 0px; float: right; text-transform: uppercase; } input.cb { margin-bottom: 20px; } label { width: 20%; display: inline-block; font-size: 12pt; padding-right: 10px; margin-left: 10px; } .left { float: left; } .right { float: right; } div.module { display: block; width: 250px; height: 410px; background-color: #006ec0; display: inline-block; position: relative; margin-right: 20px; margin-bottom: 20px; } div.module .value, div.module .info, div.module .header { color: #fff; display: block; width: 100%; text-align: center; } div.module .unit { font-size: 19px; margin-left: 10px; } div.module .value { margin-top: 20px; font-size: 30px; } div.module .info { margin-top: 3px; font-size: 10px; } div.module .header { background-color: #003c80; padding: 10px 0 10px 0; } ";
|
||||
|
|
|
|||
|
|
@ -14,57 +14,32 @@
|
|||
</p>
|
||||
<form method="post" action="/save">
|
||||
<p class="des">WiFi</p>
|
||||
<div class="inputWrp">
|
||||
<input type="text" class="inputText" name="ssid" value="{SSID}" required/>
|
||||
<span class="floating_label">SSID</span>
|
||||
</div>
|
||||
<div class="inputWrp">
|
||||
<input type="password" class="inputText" name="pwd" value="{PWD}" required/>
|
||||
<span class="floating_label">PASSWORD</span>
|
||||
</div>
|
||||
|
||||
|
||||
<label for="ssid">SSID</label>
|
||||
<input type="text" class="text" name="ssid" value="{SSID}"/>
|
||||
<label for="pwd">Password</label>
|
||||
<input type="password" class="text" name="pwd" value="{PWD}"/>
|
||||
<p class="des">Device Host Name</p>
|
||||
<div class="inputWrp">
|
||||
<input type="text" class="inputText" name="device" value="{DEVICE}" required/>
|
||||
<span class="floating_label">DEVICE NAME</span>
|
||||
</div>
|
||||
|
||||
<label for="device">Device Name</label>
|
||||
<input type="text" class="text" name="device" value="{DEVICE}"/>
|
||||
|
||||
<p class="des">Inverter</p>
|
||||
<div class="inputWrp">
|
||||
<input type="text" class="inputText" name="inv0Addr" value="{INV0_ADDR}" required/>
|
||||
<span class="floating_label">INVERTER 0 ADDRESS (eg. 11:22:33:44:55:66)</span>
|
||||
</div>
|
||||
<div class="inputWrp">
|
||||
<input type="text" class="inputText" name="invInterval" value="{INV_INTERVAL}" required/>
|
||||
<span class="floating_label">INTERVAL (ms)</span>
|
||||
</div>
|
||||
|
||||
{INVERTERS}<br/>
|
||||
<label for="invInterval">Interval (ms)</label>
|
||||
<input type="text" class="text" name="invInterval" value="{INV_INTERVAL}"/>
|
||||
|
||||
<p class="des">MQTT</p>
|
||||
<div class="inputWrp">
|
||||
<input type="text" class="inputText" name="mqttAddr" value="{MQTT_ADDR}" required/>
|
||||
<span class="floating_label">BROKER (Server IP)</span>
|
||||
</div>
|
||||
<div class="inputWrp">
|
||||
<input type="text" class="inputText" name="mqttUser" value="{MQTT_USER}"/>
|
||||
<span class="floating_label">USERNAME (optional)</span>
|
||||
</div>
|
||||
<div class="inputWrp">
|
||||
<input type="text" class="inputText" name="mqttPwd" value="{MQTT_PWD}"/>
|
||||
<span class="floating_label">PASSWORD (optional)</span>
|
||||
</div>
|
||||
<div class="inputWrp">
|
||||
<input type="text" class="inputText" name="mqttTopic" value="{MQTT_TOPIC}" required/>
|
||||
<span class="floating_label">TOPIC</span>
|
||||
</div>
|
||||
<div class="inputWrp">
|
||||
<input type="text" class="inputText" name="mqttInterval" value="{MQTT_INTERVAL}" required/>
|
||||
<span class="floating_label">INTERVAL (ms)</span>
|
||||
</div>
|
||||
|
||||
<label for="mqttAddr">Broker / Server IP</label>
|
||||
<input type="text" class="text" name="mqttAddr" value="{MQTT_ADDR}"/>
|
||||
<label for="mqttUser">Username (optional)</label>
|
||||
<input type="text" class="text" name="mqttUser" value="{MQTT_USER}"/>
|
||||
<label for="mqttPwd">Password (optional)</label>
|
||||
<input type="text" class="text" name="mqttPwd" value="{MQTT_PWD}"/>
|
||||
<label for="mqttTopic">Topic</label>
|
||||
<input type="text" class="text" name="mqttTopic" value="{MQTT_TOPIC}"/>
|
||||
<label for="mqttInterval">Interval (seconds)</label>
|
||||
<input type="text" class="text" name="mqttInterval" value="{MQTT_INTERVAL}"/>
|
||||
|
||||
<p class="des"> </p>
|
||||
<input type="checkbox" class="cb" name="reboot"/>
|
||||
<label for="reboot">Reboot device after successful save</label>
|
||||
<input type="submit" value="save" class="button" />
|
||||
|
|
|
|||
|
|
@ -20,9 +20,15 @@ p {
|
|||
}
|
||||
|
||||
.des {
|
||||
margin-top: 35px;
|
||||
font-size: 14pt;
|
||||
color: #006ec0;
|
||||
padding-bottom: 0px !important;
|
||||
}
|
||||
|
||||
.subdes {
|
||||
font-size: 13pt;
|
||||
color: #006ec0;
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
.fw {
|
||||
|
|
@ -74,26 +80,23 @@ a:hover, a:focus {
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
#footer a:hover {
|
||||
color: #f00;
|
||||
}
|
||||
|
||||
div.content {
|
||||
background-color: #fff;
|
||||
padding-bottom: 65px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
span.warn {
|
||||
display: inline-block;
|
||||
padding-left: 20px;
|
||||
color: #ff9900;
|
||||
font-style: italic;
|
||||
input {
|
||||
padding: 7px;
|
||||
font-size: 13pt;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 10px;
|
||||
font-size: 13pt;
|
||||
input.text, input.password {
|
||||
width: 70%;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 10px;
|
||||
/*float: right;*/
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
input.button {
|
||||
|
|
@ -109,7 +112,11 @@ input.cb {
|
|||
}
|
||||
|
||||
label {
|
||||
font-size: 14pt;
|
||||
width: 20%;
|
||||
display: inline-block;
|
||||
font-size: 12pt;
|
||||
padding-right: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.left {
|
||||
|
|
@ -120,36 +127,6 @@ label {
|
|||
float: right;
|
||||
}
|
||||
|
||||
.inputWrp {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.inputWrp .inputText {
|
||||
height: 35px;
|
||||
width: 90%;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid #ccc;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.inputWrp .floating_label {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
top: 20px;
|
||||
left: 10px;
|
||||
transition: 0.2s ease all;
|
||||
}
|
||||
|
||||
.inputWrp input:focus ~ .floating_label,
|
||||
.inputWrp input:not(:focus):valid ~ .floating_label {
|
||||
top: 0px;
|
||||
left: 20px;
|
||||
font-size: 10px;
|
||||
color: blue;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
div.module {
|
||||
display: block;
|
||||
width: 250px;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue