sforkowany z mirror/meshtastic-firmware
Initial check-in of David's UI
Jm Casler
rodzic
d890068acb
commit
10b24c0269
|
|
@ -8,6 +8,8 @@
|
|||
|
||||
WebServer webserver(80);
|
||||
|
||||
// Maximum number of messages for chat history. Don't make this too big -- it'll use a
|
||||
// lot of memory!
|
||||
const uint16_t maxMessages = 50;
|
||||
|
||||
struct message_t {
|
||||
|
|
@ -19,9 +21,8 @@ struct message_t {
|
|||
bool fromMe;
|
||||
};
|
||||
|
||||
struct messages_t
|
||||
{
|
||||
message_t history[maxMessages]; // 900 positions to save up to 1200 seconds (15 minutes). uInt for each temerature sensor, Input and Setpoint.
|
||||
struct messages_t {
|
||||
message_t history[maxMessages];
|
||||
};
|
||||
|
||||
messages_t messages_history;
|
||||
|
|
@ -51,6 +52,7 @@ void initWebServer()
|
|||
webserver.on("/json/chat/history/user", handleJSONChatHistory);
|
||||
webserver.on("/json/stats", handleJSONChatHistory);
|
||||
webserver.on("/hotspot-detect.html", handleHotspot);
|
||||
webserver.on("/css/style.css", handleStyleCSS);
|
||||
webserver.on("/", handleRoot);
|
||||
webserver.begin();
|
||||
}
|
||||
|
|
@ -123,61 +125,6 @@ void handleHotspot()
|
|||
return;
|
||||
}
|
||||
|
||||
void handleRoot()
|
||||
{
|
||||
DEBUG_MSG("Hotspot Request\n");
|
||||
|
||||
/*
|
||||
If we don't do a redirect, be sure to return a "Success" message
|
||||
otherwise iOS will have trouble detecting that the connection to the SoftAP worked.
|
||||
*/
|
||||
|
||||
String out = "";
|
||||
// out += "Success\n";
|
||||
out += "<!doctype html>\n"
|
||||
"<html>\n"
|
||||
"<head>\n"
|
||||
"<meta charset=\"utf-8\">\n"
|
||||
"<title>Meshtastic - WebUI</title>\n"
|
||||
"</head>\n"
|
||||
"\n"
|
||||
"<body>\n"
|
||||
"<center>\n"
|
||||
" <form>\n"
|
||||
" <table width=\"900\" height=\"100%\" border=\"0\">\n"
|
||||
" <tbody>\n"
|
||||
" <tr>\n"
|
||||
" <td align=\"center\">Meshtastic - WebUI (Pre-Alpha)</td>\n"
|
||||
" </tr>\n"
|
||||
" <tr>\n"
|
||||
" <td><table width=\"100%\" height=\"100%\" border=\"1\">\n"
|
||||
" <tbody>\n"
|
||||
" <tr>\n"
|
||||
" <td width=\"50\" height=\"100%\">Channels:<br>\n"
|
||||
" <br>\n"
|
||||
" #general<br>\n"
|
||||
" #stuff<br>\n"
|
||||
" #things<br>\n"
|
||||
" <br></td>\n"
|
||||
" <td height=\"100%\" valign=\"top\"><div>Everything is awesome!</div></td>\n"
|
||||
" </tr>\n"
|
||||
" </tbody>\n"
|
||||
" </table></td>\n"
|
||||
" </tr>\n"
|
||||
" <tr>\n"
|
||||
" <td align=\"center\"><input type=\"text\" size=\"50\">\n"
|
||||
" <input type=\"submit\"></td>\n"
|
||||
" </tr>\n"
|
||||
" </tbody>\n"
|
||||
" </table>\n"
|
||||
" </form>\n"
|
||||
"</center>\n"
|
||||
"</body>\n"
|
||||
"</html>\n";
|
||||
webserver.send(200, "text/html", out);
|
||||
return;
|
||||
}
|
||||
|
||||
void notifyWebUI()
|
||||
{
|
||||
DEBUG_MSG("************ Got a message! ************\n");
|
||||
|
|
@ -191,3 +138,373 @@ void notifyWebUI()
|
|||
|
||||
something = tempBuf;
|
||||
}
|
||||
|
||||
//----------------------------------------
|
||||
|
||||
void handleRoot()
|
||||
{
|
||||
|
||||
String out = "";
|
||||
out += " < !DOCTYPE html >\n"
|
||||
"<html lang=\"en\" >\n"
|
||||
"<head>\n"
|
||||
" <meta charset=\"UTF-8\">\n"
|
||||
" <title>Meshtastic - Chat</title>\n"
|
||||
" <link rel=\"stylesheet\" href=\"css/style.css\">\n"
|
||||
"\n"
|
||||
"</head>\n"
|
||||
"<body>\n"
|
||||
"<div class=\"grid\">\n"
|
||||
"\t<div class=\"top\">\n"
|
||||
"\t\t<div class=\"top-text\">Meshtastic - Chat</div>\n"
|
||||
"\t</div>\n"
|
||||
"\n"
|
||||
"\t<div class=\"side clearfix\">\n"
|
||||
" <div class=\"channel-list\" id=\"channel-list\">\n"
|
||||
"\t <div class=\"side-header\">\n"
|
||||
"\t\t<div class=\"side-text\">Channels</div>\n"
|
||||
"\t </div>\n"
|
||||
" <ul class=\"list\">\n"
|
||||
" <li class=\"clearfix\">\n"
|
||||
" <div class=\"channel-name clearfix\">HotChannel</div>\n"
|
||||
" <div class=\"message-count clearfix\">\n"
|
||||
"\t\t <i class=\"fa fa-circle online\"></i> 28 messages\n"
|
||||
" </div>\n"
|
||||
" </li>\n"
|
||||
"\t\t<li class=\"clearfix\">\n"
|
||||
" <div class=\"channel-name clearfix\">AnotherChannel</div>\n"
|
||||
" <div class=\"message-count clearfix\">\n"
|
||||
"\t\t <i class=\"fa fa-circle online\"></i> 12 messages\n"
|
||||
" </div>\n"
|
||||
" </li>\n"
|
||||
"\t\t<li class=\"clearfix\">\n"
|
||||
" <div class=\"channel-name clearfix\">Lost</div>\n"
|
||||
" <div class=\"message-count clearfix\">\n"
|
||||
"\t\t <i class=\"fa fa-circle online\"></i> 6 messages\n"
|
||||
" </div>\n"
|
||||
" </li>\n"
|
||||
" </ul>\n"
|
||||
" </div>\n"
|
||||
" </div>\n"
|
||||
" <div class=\"content\">\n"
|
||||
" <div class=\"content-header clearfix\">\n"
|
||||
"<!-- <div class=\"content-about\"> -->\n"
|
||||
" <div class=\"content-from\">Chat from: \n"
|
||||
"\t\t <span class=\"selected-channel\">HotChannel</span>\n"
|
||||
"\t\t </div>\n"
|
||||
"<!-- </div> -->\n"
|
||||
" </div> <!-- end content-header -->\n"
|
||||
" \n"
|
||||
" <div class=\"content-history\">\n"
|
||||
" <ul>\n"
|
||||
" <li class=\"clearfix\">\n"
|
||||
" <div class=\"message-data align-right\">\n"
|
||||
" <span class=\"message-data-time\" >10:10 AM, Today</span> \n"
|
||||
" <span class=\"message-data-name\" >Olia</span> <i class=\"fa fa-circle me\"></i>\n"
|
||||
" \n"
|
||||
" </div>\n"
|
||||
" <div class=\"message other-message float-right\">\n"
|
||||
" Hi Vincent, how are you? How is the project coming along?\n"
|
||||
" </div>\n"
|
||||
" </li>\n"
|
||||
" \n"
|
||||
" <li>\n"
|
||||
" <div class=\"message-data\">\n"
|
||||
" <span class=\"message-data-name\"><i class=\"fa fa-circle online\"></i> Vincent</span>\n"
|
||||
" <span class=\"message-data-time\">10:12 AM, Today</span>\n"
|
||||
" </div>\n"
|
||||
" <div class=\"message my-message\">\n"
|
||||
" Are we meeting today? Project has been already finished and I have results to show you.\n"
|
||||
" </div>\n"
|
||||
" </li>\n"
|
||||
" \n"
|
||||
" <li class=\"clearfix\">\n"
|
||||
" <div class=\"message-data align-right\">\n"
|
||||
" <span class=\"message-data-time\" >10:14 AM, Today</span> \n"
|
||||
" <span class=\"message-data-name\" >Olia</span> <i class=\"fa fa-circle me\"></i>\n"
|
||||
" \n"
|
||||
" </div>\n"
|
||||
" <div class=\"message other-message float-right\">\n"
|
||||
" Well I am not sure. The rest of the team is not here yet. Maybe in an hour or so? Have you faced any "
|
||||
"problems at the last phase of the project?\n"
|
||||
" </div>\n"
|
||||
" </li>\n"
|
||||
" \n"
|
||||
" <li>\n"
|
||||
" <div class=\"message-data\">\n"
|
||||
" <span class=\"message-data-name\"><i class=\"fa fa-circle online\"></i> Vincent</span>\n"
|
||||
" <span class=\"message-data-time\">10:20 AM, Today</span>\n"
|
||||
" </div>\n"
|
||||
" <div class=\"message my-message\">\n"
|
||||
" Actually everything was fine. I'm very excited to show this to our team.\n"
|
||||
" </div>\n"
|
||||
" </li>\n"
|
||||
" \n"
|
||||
" \n"
|
||||
" </ul>\n"
|
||||
" \n"
|
||||
" </div> <!-- end content-history -->\n"
|
||||
" \n"
|
||||
" <div class=\"content-message clearfix\">\n"
|
||||
" <textarea name=\"message-to-send\" id=\"message-to-send\" placeholder =\"Type your message\" "
|
||||
"rows=\"3\"></textarea>\n"
|
||||
" \n"
|
||||
" \n"
|
||||
" <button>Send</button>\n"
|
||||
"\n"
|
||||
" </div> <!-- end content-message -->\n"
|
||||
" \n"
|
||||
" </div> <!-- end content -->\n"
|
||||
" \n"
|
||||
" </div> <!-- end container -->\n"
|
||||
"\n"
|
||||
"\n"
|
||||
"</body>\n"
|
||||
"</html>";
|
||||
webserver.send(200, "text/html", out);
|
||||
return;
|
||||
}
|
||||
|
||||
void handleStyleCSS()
|
||||
{
|
||||
|
||||
String out = "";
|
||||
out +=
|
||||
"/* latin-ext */\n"
|
||||
"@font-face {\n"
|
||||
" font-family: 'Lato';\n"
|
||||
" font-style: normal;\n"
|
||||
" font-weight: 400;\n"
|
||||
" src: local('Lato Regular'), local('Lato-Regular'), url(./Google.woff2) format('woff2');\n"
|
||||
" unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;\n"
|
||||
"}\n"
|
||||
"\n"
|
||||
"*, *:before, *:after {\n"
|
||||
" box-sizing: border-box;\n"
|
||||
"}\n"
|
||||
"\n"
|
||||
"body {\n"
|
||||
" background: #C5DDEB;\n"
|
||||
" font: 14px/20px \"Lato\", Arial, sans-serif;\n"
|
||||
" padding: 40px 0;\n"
|
||||
" color: white;\n"
|
||||
"}\n"
|
||||
"\n"
|
||||
"\n"
|
||||
" \n"
|
||||
".grid {\n"
|
||||
" display: grid;\n"
|
||||
" grid-template-columns:\n"
|
||||
"\t1fr 4fr;\n"
|
||||
" grid-template-areas:\n"
|
||||
"\t\"header header\"\n"
|
||||
"\t\"sidebar content\";\n"
|
||||
" margin: 0 auto;\n"
|
||||
" width: 750px;\n"
|
||||
" background: #444753;\n"
|
||||
" border-radius: 5px;\n"
|
||||
"}\n"
|
||||
"\n"
|
||||
".top {grid-area: header;}\n"
|
||||
".side {grid-area: sidebar;}\n"
|
||||
".main {grid-area: content;}\n"
|
||||
"\n"
|
||||
".top {\n"
|
||||
" border-bottom: 2px solid white;\n"
|
||||
"}\n"
|
||||
".top-text {\n"
|
||||
" font-weight: bold;\n"
|
||||
" font-size: 24px;\n"
|
||||
" text-align: center;\n"
|
||||
" padding: 20px;\n"
|
||||
"}\n"
|
||||
"\n"
|
||||
".side {\n"
|
||||
" width: 260px;\n"
|
||||
" float: left;\n"
|
||||
"}\n"
|
||||
".side .side-header {\n"
|
||||
" padding: 20px;\n"
|
||||
" border-bottom: 2px solid white;\n"
|
||||
"}\n"
|
||||
"\n"
|
||||
".side .side-header .side-text {\n"
|
||||
" padding-left: 10px;\n"
|
||||
" margin-top: 6px;\n"
|
||||
" font-size: 16px;\n"
|
||||
" text-align: left;\n"
|
||||
" font-weight: bold;\n"
|
||||
" \n"
|
||||
"}\n"
|
||||
"\n"
|
||||
".channel-list ul {\n"
|
||||
" padding: 20px;\n"
|
||||
" height: 570px;\n"
|
||||
" list-style-type: none;\n"
|
||||
"}\n"
|
||||
".channel-list ul li {\n"
|
||||
" padding-bottom: 20px;\n"
|
||||
"}\n"
|
||||
"\n"
|
||||
".channel-list .channel-name {\n"
|
||||
" font-size: 20px;\n"
|
||||
" margin-top: 8px;\n"
|
||||
" padding-left: 8px;\n"
|
||||
"}\n"
|
||||
"\n"
|
||||
".channel-list .message-count {\n"
|
||||
" padding-left: 16px;\n"
|
||||
" color: #92959E;\n"
|
||||
"}\n"
|
||||
"\n"
|
||||
".content {\n"
|
||||
" display: flex;\n"
|
||||
" flex-direction: column;\n"
|
||||
" flex-wrap: nowrap;\n"
|
||||
"/* width: 490px; */\n"
|
||||
" float: left;\n"
|
||||
" background: #F2F5F8;\n"
|
||||
"/* border-top-right-radius: 5px;\n"
|
||||
" border-bottom-right-radius: 5px; */\n"
|
||||
" color: #434651;\n"
|
||||
"}\n"
|
||||
".content .content-header {\n"
|
||||
" flex-grow: 0;\n"
|
||||
" padding: 20px;\n"
|
||||
" border-bottom: 2px solid white;\n"
|
||||
"}\n"
|
||||
"\n"
|
||||
".content .content-header .content-from {\n"
|
||||
" padding-left: 10px;\n"
|
||||
" margin-top: 6px;\n"
|
||||
" font-size: 20px;\n"
|
||||
" text-align: center;\n"
|
||||
" font-size: 16px;\n"
|
||||
"}\n"
|
||||
".content .content-header .content-from .selected-channel {\n"
|
||||
" font-weight: bold;\n"
|
||||
"}\n"
|
||||
".content .content-header .content-num-messages {\n"
|
||||
" color: #92959E;\n"
|
||||
"}\n"
|
||||
"\n"
|
||||
".content .content-history {\n"
|
||||
" flex-grow: 1;\n"
|
||||
" padding: 20px 20px 20px;\n"
|
||||
" border-bottom: 2px solid white;\n"
|
||||
" overflow-y: scroll;\n"
|
||||
" height: 375px;\n"
|
||||
"}\n"
|
||||
".content .content-history ul {\n"
|
||||
" list-style-type: none;\n"
|
||||
" padding-inline-start: 10px;\n"
|
||||
"}\n"
|
||||
".content .content-history .message-data {\n"
|
||||
" margin-bottom: 10px;\n"
|
||||
"}\n"
|
||||
".content .content-history .message-data-time {\n"
|
||||
" color: #a8aab1;\n"
|
||||
" padding-left: 6px;\n"
|
||||
"}\n"
|
||||
".content .content-history .message {\n"
|
||||
" color: white;\n"
|
||||
" padding: 8px 10px;\n"
|
||||
" line-height: 20px;\n"
|
||||
" font-size: 14px;\n"
|
||||
" border-radius: 7px;\n"
|
||||
" margin-bottom: 30px;\n"
|
||||
" width: 90%;\n"
|
||||
" position: relative;\n"
|
||||
"}\n"
|
||||
".content .content-history .message:after {\n"
|
||||
" bottom: 100%;\n"
|
||||
" left: 7%;\n"
|
||||
" border: solid transparent;\n"
|
||||
" content: \" \";\n"
|
||||
" height: 0;\n"
|
||||
" width: 0;\n"
|
||||
" position: absolute;\n"
|
||||
" pointer-events: none;\n"
|
||||
" border-bottom-color: #86BB71;\n"
|
||||
" border-width: 10px;\n"
|
||||
" margin-left: -10px;\n"
|
||||
"}\n"
|
||||
".content .content-history .my-message {\n"
|
||||
" background: #86BB71;\n"
|
||||
"}\n"
|
||||
".content .content-history .other-message {\n"
|
||||
" background: #94C2ED;\n"
|
||||
"}\n"
|
||||
".content .content-history .other-message:after {\n"
|
||||
" border-bottom-color: #94C2ED;\n"
|
||||
" left: 93%;\n"
|
||||
"}\n"
|
||||
".content .content-message {\n"
|
||||
" flex-grow: 0;\n"
|
||||
" padding: 10px;\n"
|
||||
"}\n"
|
||||
".content .content-message textarea {\n"
|
||||
" width: 100%;\n"
|
||||
" border: none;\n"
|
||||
" padding: 10px 10px;\n"
|
||||
" font: 14px/22px \"Lato\", Arial, sans-serif;\n"
|
||||
" margin-bottom: 10px;\n"
|
||||
" border-radius: 5px;\n"
|
||||
" resize: none;\n"
|
||||
"}\n"
|
||||
"\n"
|
||||
".content .content-message button {\n"
|
||||
" float: right;\n"
|
||||
" color: #94C2ED;\n"
|
||||
" font-size: 16px;\n"
|
||||
" text-transform: uppercase;\n"
|
||||
" border: none;\n"
|
||||
" cursor: pointer;\n"
|
||||
" font-weight: bold;\n"
|
||||
" background: #F2F5F8;\n"
|
||||
"}\n"
|
||||
".content .content-message button:hover {\n"
|
||||
" color: #75b1e8;\n"
|
||||
"}\n"
|
||||
"\n"
|
||||
".online, .offline, .me {\n"
|
||||
" margin-right: 3px;\n"
|
||||
" font-size: 10px;\n"
|
||||
"}\n"
|
||||
"\n"
|
||||
".online {\n"
|
||||
" color: #86BB71;\n"
|
||||
"}\n"
|
||||
"\n"
|
||||
".offline {\n"
|
||||
" color: #E38968;\n"
|
||||
"}\n"
|
||||
"\n"
|
||||
".me {\n"
|
||||
" color: #94C2ED;\n"
|
||||
"}\n"
|
||||
"\n"
|
||||
".align-left {\n"
|
||||
" text-align: left;\n"
|
||||
"}\n"
|
||||
"\n"
|
||||
".align-right {\n"
|
||||
" text-align: right;\n"
|
||||
"}\n"
|
||||
"\n"
|
||||
".float-right {\n"
|
||||
" float: right;\n"
|
||||
"}\n"
|
||||
"\n"
|
||||
".clearfix:after {\n"
|
||||
" visibility: hidden;\n"
|
||||
" display: block;\n"
|
||||
" font-size: 0;\n"
|
||||
" content: \" \";\n"
|
||||
" clear: both;\n"
|
||||
" height: 0;\n"
|
||||
"}";
|
||||
|
||||
webserver.send(200, "text/html", out);
|
||||
return;
|
||||
}
|
||||
|
|
@ -15,4 +15,7 @@ void notifyWebUI();
|
|||
|
||||
void handleHotspot();
|
||||
|
||||
// WebServer webserver(80);
|
||||
|
||||
void handleStyleCSS();
|
||||
void handleRoot();
|
||||
|
|
@ -91,7 +91,7 @@ void initWifi()
|
|||
|
||||
WiFiEventId_t eventID = WiFi.onEvent(
|
||||
[](WiFiEvent_t event, WiFiEventInfo_t info) {
|
||||
Serial.print("\n-------------- WiFi lost connection. Reason: ");
|
||||
Serial.print("\nWiFi lost connection. Reason: ");
|
||||
Serial.println(info.disconnected.reason);
|
||||
// wifiDisconnectReason = info.disconnected.reason;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -526,6 +526,14 @@ void setBluetoothEnable(bool on)
|
|||
initWifi();
|
||||
}
|
||||
} else {
|
||||
|
||||
/*
|
||||
// If WiFi is in use, disable shutting down the radio.
|
||||
if (isWifiAvailable()) {
|
||||
return;
|
||||
}
|
||||
*/
|
||||
|
||||
// shutdown wifi
|
||||
deinitWifi();
|
||||
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue