Subversion Repositories ESP8266_P1_Meter

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
2 raymond 1 
#pragma once
2 
#include <Arduino.h>
3 
 
4 
inline const char homepage[] PROGMEM = R"EOF(
5 
<!DOCTYPE html>
6 
<html>
7 
  <head>
8 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
9 
    <title>WebSocket test page</title>
10 
 
11 
    <style type="text/css" media="screen">
12 
      body {width: 70%; margin: auto; background-color: black; color: #55ff55; font-family: monospace; text-align: center; }
13 
      .box {border: 1px solid white; border-radius: 10px; padding: 5px; margin: 10px; }
14 
      .output {color: white; }
15 
      #log {text-align: left; margin: 20px; max-height: 500px; overflow: auto; }
16 
      #input_div, #input_el {line-height: 13px; color: #AAA;}
17 
      #input_el { width:97%; background-color: rgba(0,0,0,0); border: 0px;}
18 
      #input_el:focus {outline: none; }
19 
      #icon-setup{float: left;margin: 20px}
20 
    </style>
21 
 
22 
    <script type="text/javascript">
23 
      var ws = null;
24 
      function ge(s){ return document.getElementById(s);} // Shorthand for get element
25 
      function ce(s){ return document.createElement(s);}  // Shorthand for create element
26 
      function stb(){ window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight); } // Scroll to bottom
27 
 
28 
      // This function will add a message to the HTML element with id 'log'
29 
      function addMessage(m){
30 
        var msg = ce("div");
31 
        msg.innerText = m;
32 
        ge("log").appendChild(msg);
33 
        stb();
34 
      }
35 
 
36 
      // If msg is a obj data tyep, handle it (just timestamp in this example) otherwise add to log console
37 
      function parseMessage(msg) {
38 
        try {
39 
          const obj = JSON.parse(msg);
40 
          if (typeof obj === 'object' && obj !== null) {
41 
            if (obj.esptime !== null) {
42 
              var date = new Date(0); // The 0 sets the date to epoch
43 
              if( date.setUTCSeconds(obj.esptime))
44 
                document.getElementById("esp-time").innerHTML = date;
45 
            }
46 
          }
47 
        } catch {
48 
          addMessage(msg);
49 
        }
50 
      }
51 
 
52 
      // Configure and start WebSocket client
53 
      function startSocket(){
54 
        ws = new WebSocket('ws://'+document.location.host+'/ws',['arduino']);
55 
        ws.binaryType = "arraybuffer";
56 
        ws.onopen = function(e){
57 
          addMessage("WebSocket client connected to " + 'ws://'+document.location.host+'/ws');
58 
        };
59 
        ws.onclose = function(e){
60 
          addMessage("WebSocket client disconnected");
61 
        };
62 
        ws.onerror = function(e){
63 
          console.log("ws error", e);
64 
          addMessage("Error");
65 
        };
66 
        ws.onmessage = function(e){
67 
          parseMessage(e.data)
68 
        };
69 
        // Add event "keydown" listener to input box
70 
        ge("input_el").onkeydown = function(e){
71 
          stb();
72 
          if(e.keyCode == 13 && ge("input_el").value != ""){
73 
            ws.send(ge("input_el").value);
74 
            ge("input_el").value = "";
75 
          }
76 
        }
77 
      }
78 
 
79 
      // When page is fully loaded start connection
80 
      function onBodyLoad(){
81 
        startSocket();
82 
      }
83 
    </script>
84 
  </head>
85 
  <body id="body" onload="onBodyLoad()">
86 
 
87 
    <div class=icon>
88 
      <a id=icon-setup href=/setup>
89 
        <svg width="48" height="48" fill=#55ff55 viewBox="0 0 24 24">
90 
          <path d="M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z" />
91 
        </svg>
92 
      </a>
93 
    </div>
94 
 
95 
    <div class="box">
96 
      <p>ESP current time, sync with NTP server and sent to this client via <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/">WebSocket!</a></p>
97 
        <h4 id='esp-time'>Waiting websocket connection...</h4>
98 
    </div>
99 
 
100 
    <div class="box">
101 
      $<input type="text" value="" id="input_el">
102 
    </div>
103 
 
104 
    <div class=box>
105 
        <main id=log></main>
106 
    </div>
107 
  </body>
108 
</html>
109 
)EOF";