diff --git a/src/meshwifi/meshhttp.cpp b/src/meshwifi/meshhttp.cpp index b8915df3..9106ab08 100644 --- a/src/meshwifi/meshhttp.cpp +++ b/src/meshwifi/meshhttp.cpp @@ -22,7 +22,7 @@ struct message_t { }; struct messages_t { - message_t history[maxMessages]; + message_t history[maxMessages]; }; messages_t messages_history; @@ -49,10 +49,12 @@ void initWebServer() webserver.on("/json/chat/send/channel", handleJSONChatHistory); webserver.on("/json/chat/send/user", handleJSONChatHistory); webserver.on("/json/chat/history/channel", handleJSONChatHistory); + webserver.on("/json/chat/history/dummy", handleJSONChatHistoryDummy); 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("/scripts/script.js", handleScriptsScriptJS); webserver.on("/", handleRoot); webserver.begin(); } @@ -139,128 +141,88 @@ void notifyWebUI() something = tempBuf; } -//---------------------------------------- +/* + To convert text to c strings: + https://tomeko.net/online_tools/cpp_text_escape.php?lang=en +*/ void handleRoot() { String out = ""; - out += " < !DOCTYPE html >\n" - "\n" - "\n" - " \n" - " Meshtastic - Chat\n" - " \n" - "\n" - "\n" - "\n" - "
\n" - "\t
\n" - "\t\t
Meshtastic - Chat
\n" - "\t
\n" - "\n" - "\t
\n" - "
\n" - "\t
\n" - "\t\t
Channels
\n" - "\t
\n" - "
    \n" - "
  • \n" - "
    HotChannel
    \n" - "
    \n" - "\t\t 28 messages\n" - "
    \n" - "
    • \n" - "\t\t
  • \n" - "
    AnotherChannel
    \n" - "
    \n" - "\t\t 12 messages\n" - "
    \n" - "
    • \n" - "\t\t
  • \n" - "
    Lost
    \n" - "
    \n" - "\t\t 6 messages\n" - "
    \n" - "
    • \n" - "
\n" - "
\n" - "
\n" - "
\n" - "
\n" - "\n" - "
Chat from: \n" - "\t\t HotChannel\n" - "\t\t
\n" - "\n" - "
\n" - " \n" - "
\n" - "
    \n" - "
  • \n" - "
    \n" - " 10:10 AM, Today    \n" - " Olia \n" - " \n" - "
    \n" - "
    \n" - " Hi Vincent, how are you? How is the project coming along?\n" - "
    \n" - "
    • \n" - " \n" - "
  • \n" - "
    \n" - " Vincent\n" - " 10:12 AM, Today\n" - "
    \n" - "
    \n" - " Are we meeting today? Project has been already finished and I have results to show you.\n" - "
    \n" - "
    • \n" - " \n" - "
  • \n" - "
    \n" - " 10:14 AM, Today    \n" - " Olia \n" - " \n" - "
    \n" - "
    \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" - "
    \n" - "
    • \n" - " \n" - "
  • \n" - "
    \n" - " Vincent\n" - " 10:20 AM, Today\n" - "
    \n" - "
    \n" - " Actually everything was fine. I'm very excited to show this to our team.\n" - "
    \n" - "
    • \n" - " \n" - " \n" - "
\n" - " \n" - "
\n" - " \n" - "
\n" - " \n" - " \n" - " \n" - " \n" - "\n" - "
\n" - " \n" - "
\n" - " \n" - "
\n" - "\n" - "\n" - "\n" - ""; + out += + "\n" + "\n" + "\n" + "\n" + "\n" + " \n" + " Meshtastic - Chat\n" + " \n" + "\n" + "\n" + "\n" + "

This area is under development. Please don't file bugs.

\n" + "\n" + "\n" + "\n" + "\n" + "\n" + "\n" + "\n" + "\n" + "\n" + "\n" + "
\n" + "\t
\n" + "\t\t
Meshtastic - Chat
\n" + "\t
\n" + "\n" + "\t
\n" + "
\n" + "\t
\n" + "\t\t
Users
\n" + "\t
\n" + "
    \n" + "
\n" + "
\n" + "
\n" + "
\n" + "
\n" + "\n" + "
\n" + "\t\t All Users\n" + "\t\t
\n" + "\n" + "
\n" + " \n" + "
\n" + "
    \n" + "\t\t
\n" + " \n" + "
\n" + " \n" + "
\n" + " \n" + " \n" + " \n" + " \n" + "\n" + "
\n" + " \n" + "
\n" + " \n" + "
\n" + "\n" + "\n" + "\n" + "\n" + "\n" + ""; webserver.send(200, "text/html", out); return; } @@ -279,6 +241,7 @@ void handleStyleCSS() " 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" + "\n" "*, *:before, *:after {\n" " box-sizing: border-box;\n" "}\n" @@ -357,6 +320,23 @@ void handleStyleCSS() " color: #92959E;\n" "}\n" "\n" + ".icon {\n" + " display: inline-block;\n" + " width: 1em;\n" + " height: 1em;\n" + " stroke-width: 0;\n" + " stroke: currentColor;\n" + " fill: currentColor;\n" + "}\n" + "\n" + ".icon-map-marker {\n" + " width: 0.5714285714285714em;\n" + "}\n" + "\n" + ".icon-circle {\n" + " width: 0.8571428571428571em;\n" + "}\n" + "\n" ".content {\n" " display: flex;\n" " flex-direction: column;\n" @@ -381,7 +361,7 @@ void handleStyleCSS() " text-align: center;\n" " font-size: 16px;\n" "}\n" - ".content .content-header .content-from .selected-channel {\n" + ".content .content-header .content-from .content-from-highlight {\n" " font-weight: bold;\n" "}\n" ".content .content-header .content-num-messages {\n" @@ -466,6 +446,31 @@ void handleStyleCSS() ".content .content-message button:hover {\n" " color: #75b1e8;\n" "}\n" + "/* Tooltip container */\n" + ".tooltip {\n" + " color: #86BB71;\n" + " position: relative;\n" + " display: inline-block;\n" + " border-bottom: 1px dotted black; /* If you want dots under the hoverable text */\n" + "}\n" + "/* Tooltip text */\n" + ".tooltip .tooltiptext {\n" + " visibility: hidden;\n" + " width: 120px;\n" + " background-color: #444753;\n" + " color: #fff;\n" + " text-align: center;\n" + " padding: 5px 0;\n" + " border-radius: 6px;\n" + " /* Position the tooltip text - see examples below! */\n" + " position: absolute;\n" + " z-index: 1;\n" + "}\n" + "\n" + "/* Show the tooltip text when you mouse over the tooltip container */\n" + ".tooltip:hover .tooltiptext {\n" + " visibility: visible;\n" + "}\n" "\n" ".online, .offline, .me {\n" " margin-right: 3px;\n" @@ -505,6 +510,284 @@ void handleStyleCSS() " height: 0;\n" "}"; - webserver.send(200, "text/html", out); + webserver.send(200, "text/css", out); + return; +} + +void handleScriptsScriptJS() +{ + String out = ""; + out += "String.prototype.toHHMMSS = function () {\n" + " var sec_num = parseInt(this, 10); // don't forget the second param\n" + " var hours = Math.floor(sec_num / 3600);\n" + " var minutes = Math.floor((sec_num - (hours * 3600)) / 60);\n" + " var seconds = sec_num - (hours * 3600) - (minutes * 60);\n" + "\n" + " if (hours < 10) {hours = \"0\"+hours;}\n" + " if (minutes < 10) {minutes = \"0\"+minutes;}\n" + " if (seconds < 10) {seconds = \"0\"+seconds;}\n" + "// return hours+':'+minutes+':'+seconds;\n" + "\treturn hours+'h'+minutes+'m';\n" + "}\n" + "String.prototype.padLeft = function (length, character) { \n" + " return new Array(length - this.length + 1).join(character || ' ') + this; \n" + "};\n" + "\n" + "Date.prototype.toFormattedString = function () {\n" + " return [String(this.getFullYear()).substr(2, 2),\n" + "\t\t\tString(this.getMonth()+1).padLeft(2, '0'),\n" + " String(this.getDate()).padLeft(2, '0')].join(\"/\") + \" \" +\n" + " [String(this.getHours()).padLeft(2, '0'),\n" + " String(this.getMinutes()).padLeft(2, '0')].join(\":\");\n" + "};\n" + "\n" + "function getData(file) {\n" + "\tfetch(file)\n" + "\t.then(function (response) {\n" + "\t\treturn response.json();\n" + "\t})\n" + "\t.then(function (datafile) {\n" + "\t\tupdateData(datafile);\n" + "\t})\n" + "\t.catch(function (err) {\n" + "\t\tconsole.log('error: ' + err);\n" + "\t});\n" + "}\n" + "\t\n" + "function updateData(datafile) {\n" + "// Update System Details\n" + "\tupdateSystem(datafile);\n" + "//\tUpdate Userlist and message count\n" + "\tupdateUsers(datafile);\n" + "// Update Chat\n" + "\tupdateChat(datafile);\n" + "}\n" + "\n" + "function updateSystem(datafile) {\n" + "// Update System Info \n" + "\tvar sysContainer = document.getElementById(\"content-from-id\");\n" + "\tvar newHTML = datafile.data.system.channel;\n" + "\tvar myDate = new Date( datafile.data.system.timeGPS *1000);\n" + "\tnewHTML += ' @' + myDate.toFormattedString();\n" + "\tvar newSec = datafile.data.system.timeSinceStart;\n" + "\tvar strsecondUp = newSec.toString();\n" + "\tnewHTML += ' Up:' + strsecondUp.toHHMMSS();\n" + "\tsysContainer.innerHTML = newHTML;\n" + "}\n" + "\n" + "function updateUsers(datafile) {\n" + "\tvar mainContainer = document.getElementById(\"userlist-id\");\n" + "\tvar htmlUsers = '';\n" + "\tvar timeBase = datafile.data.system.timeSinceStart;\n" + "//\tvar lookup = {};\n" + " for (var i = 0; i < datafile.data.users.length; i++) {\n" + " htmlUsers += formatUsers(datafile.data.users[i],timeBase);\n" + "\t}\n" + "\tmainContainer.innerHTML = htmlUsers;\n" + "}\n" + "\n" + "function formatUsers(user,timeBase) {\n" + "\tnewHTML = '
  • ';\n" + " newHTML += '
    ' + user.NameLong + '(' + user.NameShort + ')
    ';\n" + " newHTML += '
    ';\n" + "\tvar secondsLS = timeBase - user.lastSeen;\n" + "\tvar strsecondsLS = secondsLS.toString();\n" + "\tnewHTML += 'Seen: '+strsecondsLS.toHHMMSS()+' ago ';\n" + "\tif (user.lat == 0 || user.lon == 0) {\n" + "\t\tnewHTML += '';\n" + "\t} else {\n" + "\t\tnewHTML += '
    lat:' + user.lat + ' lon:'+ user.lon+ " + "'';\n" + "\t}\n" + " newHTML += '
    ';\n" + " newHTML += '
    • ';\n" + "\treturn(newHTML);\n" + "}\n" + "\n" + "function onlineStatus(time) {\n" + "\tif (time < 3600) {\n" + "\t\treturn \"online\"\n" + "\t} else {\n" + "\t\treturn \"offline\"\n" + "\t}\n" + "}\n" + "\n" + "function updateChat(datafile) {\n" + "// Update Chat\n" + "\tvar chatContainer = document.getElementById(\"chat-history-id\");\n" + "\tvar htmlChat = '';\n" + "\tvar timeBase = datafile.data.system.timeSinceStart;\n" + "\tfor (var i = 0; i < datafile.data.chat.length; i++) {\n" + "\t\thtmlChat += formatChat(datafile.data.chat[i],timeBase);\n" + "\t}\n" + "\tchatContainer.innerHTML = htmlChat;\n" + "\tscrollHistory();\n" + "}\n" + "\n" + "function formatChat(data,timeBase) {\n" + "\tvar secondsTS = timeBase - data.timestamp;\n" + "\tvar strsecondsTS = secondsTS.toString();\n" + "\tnewHTML = '
  • ';\n" + "\tif (data.local == 1) {\n" + "\t\tnewHTML += '
    ';\n" + "\t\tnewHTML += '' + data.NameLong + '(' + data.NameShort + ')';\n" + "\t\tnewHTML += '' + strsecondsTS.toHHMMSS() + ' ago';\n" + "\t\tnewHTML += '
    ';\n" + "\t\tnewHTML += '
    ' + data.chatLine + '
    ';\n" + "\t} else {\n" + "\t\tnewHTML += '
    ';\n" + "\t\tnewHTML += '' + strsecondsTS.toHHMMSS() + ' ago    ';\n" + "\t\tnewHTML += '' + data.NameLong + '(' + data.NameShort + ')';\n" + "//\t\tnewHTML += '';\n" + "\t\tnewHTML += '
    ';\n" + "\t\tnewHTML += '
    ' + data.chatLine + '
    ';\n" + "\t}\n" + "\n" + " newHTML += '
    • ';\n" + "\treturn(newHTML);\t\n" + "}\n" + "\n" + "function scrollHistory() {\n" + "\tvar chatContainer = document.getElementById(\"chat-div-id\");\n" + "\tchatContainer.scrollTop = chatContainer.scrollHeight;\n" + "}\n" + "\n" + "\n" + "getData('/json/chat/history/dummy');\n" + "\n" + "\n" + "//window.onload=function(){\n" + "//\talert('onload');\n" + "// Async - Run scroll 0.5sec after onload event\n" + "//\tsetTimeout(scrollHistory(),500);\n" + "// }"; + + webserver.send(200, "text/javascript", out); + return; +} + +void handleJSONChatHistoryDummy() +{ + String out = ""; + out += "{\n" + "\t\"data\": {\n" + "\t\t\"system\": {\n" + "\t\t\t\"timeSinceStart\": 3213544,\n" + "\t\t\t\"timeGPS\": 1600830985,\n" + "\t\t\t\"channel\": \"ourSecretPlace\"\n" + "\t\t},\n" + "\t\t\"users\": [{\n" + "\t\t\t\t\"NameShort\": \"J\",\n" + "\t\t\t\t\"NameLong\": \"John\",\n" + "\t\t\t\t\"lastSeen\": 3207544,\n" + "\t\t\t\t\"lat\" : -2.882243,\n" + "\t\t\t\t\"lon\" : -111.038580\n" + "\t\t\t},\n" + "\t\t\t{\n" + "\t\t\t\t\"NameShort\": \"D\",\n" + "\t\t\t\t\"NameLong\": \"David\",\n" + "\t\t\t\t\"lastSeen\": 3212544,\n" + "\t\t\t\t\"lat\" : -12.24452,\n" + "\t\t\t\t\"lon\" : -61.87351\n" + "\t\t\t},\n" + "\t\t\t{\n" + "\t\t\t\t\"NameShort\": \"P\",\n" + "\t\t\t\t\"NameLong\": \"Peter\",\n" + "\t\t\t\t\"lastSeen\": 3213444,\n" + "\t\t\t\t\"lat\" : 0,\n" + "\t\t\t\t\"lon\" : 0\n" + "\t\t\t},\n" + "\t\t\t{\n" + "\t\t\t\t\"NameShort\": \"M\",\n" + "\t\t\t\t\"NameLong\": \"Mary\",\n" + "\t\t\t\t\"lastSeen\": 3211544,\n" + "\t\t\t\t\"lat\" : 16.45478,\n" + "\t\t\t\t\"lon\" : 11.40166\n" + "\t\t\t}\n" + "\t\t],\n" + "\t\t\"chat\": [{\n" + "\t\t\t\t\"local\": 0,\n" + "\t\t\t\t\"NameShort\": \"J\",\n" + "\t\t\t\t\"NameLong\": \"John\",\n" + "\t\t\t\t\"chatLine\": \"Hello\",\n" + "\t\t\t\t\"timestamp\" : 3203544\n" + "\t\t\t},\n" + "\t\t\t{\n" + "\t\t\t\t\"local\": 0,\n" + "\t\t\t\t\"NameShort\": \"D\",\n" + "\t\t\t\t\"NameLong\": \"David\",\n" + "\t\t\t\t\"chatLine\": \"Hello There\",\n" + "\t\t\t\t\"timestamp\" : 3204544\n" + "\t\t\t},\n" + "\t\t\t{\n" + "\t\t\t\t\"local\": 0,\n" + "\t\t\t\t\"NameShort\": \"J\",\n" + "\t\t\t\t\"NameLong\": \"John\",\n" + "\t\t\t\t\"chatLine\": \"Where you been?\",\n" + "\t\t\t\t\"timestamp\" : 3205544\n" + "\t\t\t},\n" + "\t\t\t{\n" + "\t\t\t\t\"local\": 0,\n" + "\t\t\t\t\"NameShort\": \"D\",\n" + "\t\t\t\t\"NameLong\": \"David\",\n" + "\t\t\t\t\"chatLine\": \"I was on Channel 2\",\n" + "\t\t\t\t\"timestamp\" : 3206544\n" + "\t\t\t},\n" + "\t\t\t{\n" + "\t\t\t\t\"local\": 0,\n" + "\t\t\t\t\"NameShort\": \"J\",\n" + "\t\t\t\t\"NameLong\": \"John\",\n" + "\t\t\t\t\"chatLine\": \"With Mary again?\",\n" + "\t\t\t\t\"timestamp\" : 3207544\n" + "\t\t\t},\n" + "\t\t\t{\n" + "\t\t\t\t\"local\": 0,\n" + "\t\t\t\t\"NameShort\": \"D\",\n" + "\t\t\t\t\"NameLong\": \"David\",\n" + "\t\t\t\t\"chatLine\": \"She's better looking than you\",\n" + "\t\t\t\t\"timestamp\" : 3208544\n" + "\t\t\t},\n" + "\t\t\t{\n" + "\t\t\t\t\"local\": 0,\n" + "\t\t\t\t\"NameShort\": \"M\",\n" + "\t\t\t\t\"NameLong\": \"Mary\",\n" + "\t\t\t\t\"chatLine\": \"Well, Hi\",\n" + "\t\t\t\t\"timestamp\" : 3209544\n" + "\t\t\t},\n" + "\t\t\t{\n" + "\t\t\t\t\"local\": 0,\n" + "\t\t\t\t\"NameShort\": \"D\",\n" + "\t\t\t\t\"NameLong\": \"David\",\n" + "\t\t\t\t\"chatLine\": \"You're Here\",\n" + "\t\t\t\t\"timestamp\" : 3210544\n" + "\t\t\t},\n" + "\t\t\t{\n" + "\t\t\t\t\"local\": 0,\n" + "\t\t\t\t\"NameShort\": \"M\",\n" + "\t\t\t\t\"NameLong\": \"Mary\",\n" + "\t\t\t\t\"chatLine\": \"Wanted to say Howdy.\",\n" + "\t\t\t\t\"timestamp\" : 3211544\n" + "\t\t\t},\n" + "\t\t\t{\n" + "\t\t\t\t\"local\": 0,\n" + "\t\t\t\t\"NameShort\": \"D\",\n" + "\t\t\t\t\"NameLong\": \"David\",\n" + "\t\t\t\t\"chatLine\": \"Better come down and visit sometime\",\n" + "\t\t\t\t\"timestamp\" : 3212544\n" + "\t\t\t},\n" + "\t\t\t{\n" + "\t\t\t\t\"local\": 1,\n" + "\t\t\t\t\"NameShort\": \"P\",\n" + "\t\t\t\t\"NameLong\": \"Peter\",\n" + "\t\t\t\t\"chatLine\": \"Where is everybody?\",\n" + "\t\t\t\t\"timestamp\" : 3213444\n" + "\t\t\t}\n" + "\t\t]\n" + "\t}\n" + "}"; + + webserver.send(200, "application/json", out); return; } \ No newline at end of file diff --git a/src/meshwifi/meshhttp.h b/src/meshwifi/meshhttp.h index d959fe11..42c6644b 100644 --- a/src/meshwifi/meshhttp.h +++ b/src/meshwifi/meshhttp.h @@ -15,7 +15,8 @@ void notifyWebUI(); void handleHotspot(); -// WebServer webserver(80); void handleStyleCSS(); -void handleRoot(); \ No newline at end of file +void handleRoot(); +void handleScriptsScriptJS(); +void handleJSONChatHistoryDummy(); \ No newline at end of file