topaLE
/
ahoy
mirror of https://github.com/lumapu/ahoy.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

improved UI (responsive)

pull/361/head^2
lumapu 3 years ago
parent
35abf5b7e7
commit
bafe47e424
12 changed files with 349 additions and 180 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      tools/esp8266/defines.h
  2. 14
      tools/esp8266/html/api.js
  3. 33
      tools/esp8266/html/index.html
  4. 24
      tools/esp8266/html/serial.html
  5. 22
      tools/esp8266/html/setup.html
  6. 129
      tools/esp8266/html/style.css
  7. 54
      tools/esp8266/html/system.html
  8. 23
      tools/esp8266/html/update.html
  9. 25
      tools/esp8266/html/visualization.html
  10. 24
      tools/esp8266/web.cpp
  11. 1
      tools/esp8266/web.h
  12. 6
      tools/esp8266/webApi.cpp

2
tools/esp8266/defines.h
View File

@ -13,7 +13,7 @@
//-------------------------------------
#define VERSION_MAJOR 0
#define VERSION_MINOR 5
#define VERSION_PATCH 24
#define VERSION_PATCH 25
//-------------------------------------

14
tools/esp8266/html/api.js
View File

@ -12,11 +12,21 @@ function parseMenu(obj) {
for(var i = 0; i < obj["name"].length; i ++) {
if(obj["name"][i] == "-")
e.appendChild(span("", ["seperator"]));
else
e.appendChild(link(obj["link"][i], obj["name"][i], obj["trgt"][i]));
else {
var l = link(obj["link"][i], obj["name"][i], obj["trgt"][i]);
if(obj["link"][i] == window.location.pathname)
l.classList.add("active");
e.appendChild(l);
}
}
}
function parseVersion(obj) {
document.getElementById("version").appendChild(
link("https://github.com/lumapu/ahoy/commits/" + obj["build"], "Git SHA: " + obj["build"] + " :: " + obj["version"], "_blank")
);
}
function toggle(id, hide) {
var elm = document.getElementById(id);
if(hide) {

33
tools/esp8266/html/index.html
View File

@ -8,7 +8,7 @@
</head>
<body>
<div class="topnav">
<a href="/" class="active">AhoyDTU</a>
<a href="/" class="title">AhoyDTU</a>
<a href="javascript:void(0);" class="icon" onclick="topnav()">
<span></span>
<span></span>
@ -16,7 +16,8 @@
</a>
<div id="topnav" class="hide"></div>
</div>
<div id="content" class="content">
<div id="wrapper">
<div id="content">
<script>
function promptFunction() {
var Text = prompt("This project was started from https://www.mikrocontroller.net/topic/525778 this discussion.\n\n" +
@ -54,15 +55,24 @@
<li>Test <a href="https://github.com/lumapu/ahoy/actions/workflows/compile_development.yml" target="_blank">development firmware</a></li>
<li>make a <a href="https://paypal.me/lupusch" target="_blank">donation</a></li>
</ul>
<p class="lic"><a href="https://creativecommons.org/licenses/by-nc-sa/3.0/de">Creative Commons - https://creativecommons.org/licenses/by-nc-sa/3.0/de/</a><br/>
Check the licenses which are published on <a href="https://github.com/lumapu/ahoy" target="_blank">https://github.com/lumapu/ahoy</a> as well<br/>
This project was started from <a href="https://www.mikrocontroller.net/topic/525778" target="_blank">this discussion. (Mikrocontroller.net)</a></p>
<p class="lic">
This project was started from <a href="https://www.mikrocontroller.net/topic/525778" target="_blank">this discussion. (Mikrocontroller.net)</a>
</p>
</div>
</div>
</div>
<div id="footer">
<p class="left">&copy 2022</p>
<p class="right" id="version"></p>
<div class="left">
AhoyDTU &copy 2022
<ul>
<li><a href="https://discord.gg/WzhxEY62mB" target="_blank">Discord</a></li>
<li><a href="https://github.com/lumapu/ahoy" target="_blank">Github</a></li>
</ul>
</div>
<div class="right">
<span id="version"></span><br/><br/>
<a href="https://creativecommons.org/licenses/by-nc-sa/3.0/de" target="_blank" >CC BY-NC-SA 3.0</a>
</div>
</div>
<script type="text/javascript">
var exeOnce = true;
@ -88,11 +98,8 @@
function parseSys(obj) {
// Disclaimer
//if(obj["disclaimer"] == false) sessionStorage.setItem("gDisclaimer", promptFunction());
if(true == exeOnce) {
document.getElementById("version").appendChild(
link("https://github.com/lumapu/ahoy/commits/" + obj["build"], "Git SHA: " + obj["build"] + " :: " + obj["version"], "_blank")
);
}
if(true == exeOnce)
parseVersion(obj);
document.getElementById("wifi_rssi").innerHTML = obj["wifi_rssi"];
var date = new Date(obj["ts_now"] * 1000);

24
tools/esp8266/html/serial.html
View File

@ -8,7 +8,7 @@
</head>
<body>
<div class="topnav">
<a href="/" class="active">AhoyDTU</a>
<a href="/" class="title">AhoyDTU</a>
<a href="javascript:void(0);" class="icon" onclick="topnav()">
<span></span>
<span></span>
@ -16,8 +16,8 @@
</a>
<div id="topnav" class="hide"></div>
</div>
<div id="content" class="content">
<h2>Serial Console</h2>
<div id="wrapper">
<div id="content">
<div class="serial">
<textarea id="serial" cols="80" rows="20" readonly></textarea><br/>
connected: <span class="dot" id="connected"></span>
@ -61,9 +61,19 @@
<p>Ctrl result: <span id="result">n/a</span></p>
</div>
</div>
</div>
<div id="footer">
<p class="left">&copy 2022</p>
<p class="right" id="version"></p>
<div class="left">
AhoyDTU &copy 2022
<ul>
<li><a href="https://discord.gg/WzhxEY62mB" target="_blank">Discord</a></li>
<li><a href="https://github.com/lumapu/ahoy" target="_blank">Github</a></li>
</ul>
</div>
<div class="right">
<span id="version"></span><br/><br/>
<a href="https://creativecommons.org/licenses/by-nc-sa/3.0/de" target="_blank" >CC BY-NC-SA 3.0</a>
</div>
</div>
<script type="text/javascript">
var mAutoScroll = true;
@ -82,9 +92,7 @@
+ ("0"+sec).substr(-2);
if(true == exeOnce) {
document.getElementById("version").appendChild(
link("https://github.com/lumapu/ahoy/commits/" + obj["build"], "Git SHA: " + obj["build"] + " :: " + obj["version"], "_blank")
);
parseVersion(obj);
window.setInterval("getAjax('/api/system', parseSys)", 10000);
exeOnce = false;
}

22
tools/esp8266/html/setup.html
View File

@ -19,7 +19,7 @@
</head>
<body onload="load()">
<div class="topnav">
<a href="/" class="active">AhoyDTU</a>
<a href="/" class="title">AhoyDTU</a>
<a href="javascript:void(0);" class="icon" onclick="topnav()">
<span></span>
<span></span>
@ -27,7 +27,7 @@
</a>
<div id="topnav" class="hide"></div>
</div>
<div id="setup" class="content">
<div id="wrapper">
<div id="content">
<a class="btn" href="/erase">ERASE SETTINGS (not WiFi)</a>
@ -149,9 +149,17 @@
</div>
</div>
<div id="footer">
<p class="left">&copy 2022</p>
<p class="right" id="version"></p>
<p class="right"><a href="/factory">Factory Reset</a></p>
<div class="left">
AhoyDTU &copy 2022
<ul>
<li><a href="https://discord.gg/WzhxEY62mB" target="_blank">Discord</a></li>
<li><a href="https://github.com/lumapu/ahoy" target="_blank">Github</a></li>
</ul>
</div>
<div class="right">
<span id="version"></span><br/><br/>
<a href="https://creativecommons.org/licenses/by-nc-sa/3.0/de" target="_blank" >CC BY-NC-SA 3.0</a>
</div>
</div>
<script type="text/javascript">
var highestId = 0;
@ -292,9 +300,7 @@
function parseSys(obj) {
for(var i of [["device", "device_name"], ["ssid", "ssid"]])
document.getElementsByName(i[0])[0].value = obj[i[1]];
document.getElementById("version").appendChild(
link("https://github.com/lumapu/ahoy/commits/" + obj["build"], "Git SHA: " + obj["build"] + " :: " + obj["version"], "_blank")
);
parseVersion(obj);
}
function parseIv(obj) {

129
tools/esp8266/html/style.css
View File

@ -2,6 +2,8 @@ html, body {
font-family: Arial;
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
}
h2 {
@ -37,11 +39,11 @@ h2 {
}
.topnav a:hover {
background-color: #006ec0;
background-color: #555 !important;
color: #000;
}
.active {
.title {
background-color: #006ec0;
color: #fff !important;
padding-left: 80px !important
@ -57,14 +59,98 @@ h2 {
border-radius: 2px;
}
.topnav .active {
background-color: #00afc1;
}
span.seperator {
width: 100%;
height: 1px;
margin: 10px 0px 10px;
background-color: #444;
background-color: #494949;
display: block;
}
#wrapper {
min-height: 100%;
}
#content {
padding: 50px 20px 120px 20px;
overflow: auto;
}
#footer {
height: 120px;
margin-top: -120px;
background-color: #555;
width: 100%;
font-size: 13px;
}
#footer .right {
color: #bbb;
margin: 23px 25px;
text-align: right;
}
#footer .left {
color: #bbb;
margin: 23px 0px 0px 25px;
}
#footer ul {
list-style-type: none;
margin: 20px auto;
padding: 0;
}
#footer ul li, #footer a {
color: #bbb;
margin-bottom: 10px;
padding-left: 5px;
font-size: 13px;
}
#footer a:hover {
color: #fff;
}
.hide {
display: none;
}
@media only screen and (min-width: 992px) {
.topnav {
width: 230px !important;
height: 100%;
}
.topnav a.icon {
display: none !important;
}
.topnav a {
padding: 14px 24px;
}
.topnav .title {
padding-left: 24px !important;
}
.topnav .hide {
display: block;
}
#content {
padding: 15px 15px 120px 250px;
}
#footer .left {
margin-left: 250px !important;
}
}
/** old CSS below **/
p {
@ -91,7 +177,6 @@ p.lic, p.lic a {
.s_content {
display: none;
overflow: hidden;
}
.s_collapsible {
@ -119,10 +204,6 @@ p.lic, p.lic a {
margin: 0 0 7px 12px;
}
.hide {
display: none;
}
a:link, a:visited {
text-decoration: none;
font-size: 13pt;
@ -136,34 +217,12 @@ a:hover, a:focus {
a.btn {
background-color: #006ec0;
color: #fff;
padding: 7px;
padding: 7px 15px 7px 15px;
display: inline-block;
margin-top: 30px;
}
#content {
padding: 60px 15px 60px 15px;
}
#footer {
position: fixed;
bottom: 0px;
height: 45px;
background-color: #006ec0;
width: 100%;
border-top: 5px solid #fff;
}
#footer p, #footer a {
color: #fff;
padding: 0 7px 0 7px;
font-size: 10pt !important;
}
div.content {
background-color: #fff;
padding-bottom: 65px;
overflow: auto;
a.btn:hover {
background-color: #555 !important;
}
input, select {
@ -214,6 +273,10 @@ label {
vertical-align: top;
}
pre {
white-space: pre-wrap;
}
fieldset {
margin-bottom: 15px;
}

54
tools/esp8266/html/system.html
View File

@ -0,0 +1,54 @@
<!doctype html>
<html>
<head>
<title>System</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="api.js"></script>
</head>
<body>
<div class="topnav">
<a href="/" class="title">AhoyDTU</a>
<a href="javascript:void(0);" class="icon" onclick="topnav()">
<span></span>
<span></span>
<span></span>
</a>
<div id="topnav" class="hide"></div>
</div>
<div id="wrapper">
<div id="content">
<a href="/factory" class="btn">Factory Reset</a><br/>
<br/>
<a href="/reboot" class="btn">Reboot</a>
</div>
</div>
<div id="footer">
<div class="left">
AhoyDTU &copy 2022
<ul>
<li><a href="https://discord.gg/WzhxEY62mB" target="_blank">Discord</a></li>
<li><a href="https://github.com/lumapu/ahoy" target="_blank">Github</a></li>
</ul>
</div>
<div class="right">
<span id="version"></span><br/><br/>
<a href="https://creativecommons.org/licenses/by-nc-sa/3.0/de" target="_blank" >CC BY-NC-SA 3.0</a>
</div>
</div>
<script type="text/javascript">
function parseSys(obj) {
parseVersion(obj);
}
function parse(obj) {
if(null != obj) {
parseMenu(obj["menu"]);
parseSys(obj["system"]);
}
}
getAjax("/api/index", parse);
</script>
</body>
</html>

23
tools/esp8266/html/update.html
View File

@ -8,7 +8,7 @@
</head>
<body>
<div class="topnav">
<a href="/" class="active">AhoyDTU</a>
<a href="/" class="title">AhoyDTU</a>
<a href="javascript:void(0);" class="icon" onclick="topnav()">
<span></span>
<span></span>
@ -16,7 +16,8 @@
</a>
<div id="topnav" class="hide"></div>
</div>
<div id="content" class="content">
<div id="wrapper">
<div id="content">
<div>
Make sure that you have noted all your settings before starting an update. New versions may have changed their memory layout which can break your existing settings.<br/>
<br/>
@ -27,15 +28,23 @@
<input type="file" name="update"><input type="submit" value="Update">
</form>
</div>
</div>
<div id="footer">
<p class="left">&copy 2022</p>
<p class="right" id="version"></p>
<div class="left">
AhoyDTU &copy 2022
<ul>
<li><a href="https://discord.gg/WzhxEY62mB" target="_blank">Discord</a></li>
<li><a href="https://github.com/lumapu/ahoy" target="_blank">Github</a></li>
</ul>
</div>
<div class="right">
<span id="version"></span><br/><br/>
<a href="https://creativecommons.org/licenses/by-nc-sa/3.0/de" target="_blank" >CC BY-NC-SA 3.0</a>
</div>
</div>
<script type="text/javascript">
function parseSys(obj) {
document.getElementById("version").appendChild(
link("https://github.com/lumapu/ahoy/commits/" + obj["build"], "Git SHA: " + obj["build"] + " :: " + obj["version"], "_blank")
);
parseVersion(obj);
}
function parse(obj) {

25
tools/esp8266/html/visualization.html
View File

@ -9,7 +9,7 @@
</head>
<body>
<div class="topnav">
<a href="/" class="active">AhoyDTU</a>
<a href="/" class="title">AhoyDTU</a>
<a href="javascript:void(0);" class="icon" onclick="topnav()">
<span></span>
<span></span>
@ -17,22 +17,31 @@
</a>
<div id="topnav" class="hide"></div>
</div>
<div id="content" class="content">
<div id="wrapper">
<div id="content">
<div id="live"></div>
<p>Every <span id="refresh"></span> seconds the values are updated</p>
</div>
</div>
<div id="footer">
<p class="left">&copy 2022</p>
<p class="right" id="version"></p>
<div class="left">
AhoyDTU &copy 2022
<ul>
<li><a href="https://discord.gg/WzhxEY62mB" target="_blank">Discord</a></li>
<li><a href="https://github.com/lumapu/ahoy" target="_blank">Github</a></li>
</ul>
</div>
<div class="right">
<span id="version"></span><br/><br/>
<a href="https://creativecommons.org/licenses/by-nc-sa/3.0/de" target="_blank" >CC BY-NC-SA 3.0</a>
</div>
</div>
<script type="text/javascript">
var exeOnce = true;
function parseSys(obj) {
if(true == exeOnce) {
document.getElementById("version").appendChild(
link("https://github.com/lumapu/ahoy/commits/" + obj["build"], "Git SHA: " + obj["build"] + " :: " + obj["version"], "_blank")
);}
if(true == exeOnce)
parseVersion(obj);
}
function parseIv(obj, root) {

24
tools/esp8266/web.cpp
View File

@ -18,6 +18,7 @@
#include "html/h/visualization_html.h"
#include "html/h/update_html.h"
#include "html/h/serial_html.h"
#include "html/h/system_html.h"
const char* const pinArgNames[] = {"pinCs", "pinCe", "pinIrq"};
@ -51,6 +52,7 @@ void web::setup(void) {
mWeb->on("/favicon.ico", HTTP_GET, std::bind(&web::onFavicon, this, std::placeholders::_1));
mWeb->onNotFound ( std::bind(&web::showNotFound, this, std::placeholders::_1));
mWeb->on("/reboot", HTTP_ANY, std::bind(&web::onReboot, this, std::placeholders::_1));
mWeb->on("/system", HTTP_ANY, std::bind(&web::onSystem, this, std::placeholders::_1));
mWeb->on("/erase", HTTP_ANY, std::bind(&web::showErase, this, std::placeholders::_1));
mWeb->on("/factory", HTTP_ANY, std::bind(&web::showFactoryRst, this, std::placeholders::_1));
@ -160,18 +162,18 @@ void web::showNotFound(AsyncWebServerRequest *request) {
//-----------------------------------------------------------------------------
void web::onReboot(AsyncWebServerRequest *request) {
String content = "";
int refresh = 120;
if(request->args() > 0) {
if(request->arg("reboot").toInt() == 1) {
refresh = 10;
content = F("reboot. Autoreload after 10 seconds");
mMain->mShouldReboot = true;
}
}
else
content = F("<a href=\"/reboot?reboot=1\" class=\"btn\">Reboot</a> <a href=\"/\" class=\"btn\">cancel</a>");
request->send(200, F("text/html"), F("<!doctype html><html><head><title>Reboot</title><link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\"/><meta http-equiv=\"refresh\" content=\"") + String(refresh) + F("; URL=/\"></head><body>") + content + F("</body></html>"));
request->send(200, F("text/html"), F("<!doctype html><html><head><title>Reboot</title><link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\"/><meta http-equiv=\"refresh\" content=\"10; URL=/\"></head><body>reboot. Autoreload after 10 seconds</body></html>"));
}
//-----------------------------------------------------------------------------
void web::onSystem(AsyncWebServerRequest *request) {
DPRINTLN(DBG_VERBOSE, F("onSystem"));
AsyncWebServerResponse *response = request->beginResponse_P(200, F("text/html"), system_html, system_html_len);
response->addHeader(F("Content-Encoding"), "gzip");
request->send(response);
}

1
tools/esp8266/web.h
View File

@ -54,6 +54,7 @@ class web {
private:
void onSerial(AsyncWebServerRequest *request);
void onSystem(AsyncWebServerRequest *request);
AsyncWebServer *mWeb;
AsyncEventSource *mEvts;

6
tools/esp8266/webApi.cpp
View File

@ -248,7 +248,7 @@ void webApi::getMenu(JsonObject obj) {
obj["link"][0] = "/live";
obj["name"][1] = "Serial Console";
obj["link"][1] = "/serial";
obj["name"][2] = "Setup";
obj["name"][2] = "Settings";
obj["link"][2] = "/setup";
obj["name"][3] = "-";
obj["name"][4] = "REST API";
@ -257,8 +257,8 @@ void webApi::getMenu(JsonObject obj) {
obj["name"][5] = "-";
obj["name"][6] = "Update";
obj["link"][6] = "/update";
obj["name"][7] = "Reboot";
obj["link"][7] = "/reboot";
obj["name"][7] = "System";
obj["link"][7] = "/system";
}

Write Preview
Loading…
Cancel
Save