Saturday, May 13, 2017

ADC IIR LPF SPI TFT LCD GUI - Part 2

Since I posted ADC IIR LPF SPI TFT LCD GUI - Part 1, I thought I should finally post a Part 2. In the meantime, I found the NodeMCU wifi microcontrollers and have been learning to use those with the esp8266 Arduino framework. I built a simple demo that uses websockets to print the ADC value in the browser. I think this is a great way to put an interactive display in a project. So, I've decided not to spend energy on programming a TFT LCD GUI that doesn't really have an outlet beyond the project. Instead I can spend the time learning just enough HTML5, CSS and JavaScript to be dangerous.

This experience has taught me never again to put "Part 1" in a title.


Sketch


  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
#include <Arduino.h>
#include <Hash.h>

#include <WebSocketsServer.h>
#include <ESP8266WiFi.h>
#include <WiFiUdp.h>
#include <ESP8266mDNS.h>

// declarations
WiFiServer server(80);
WebSocketsServer webSocket = WebSocketsServer(81);
uint16_t adcreading = 0;

void setup()
{
  Serial.begin(115200);
  Serial.println();
  connect();
  server.begin();
  if(MDNS.begin("adc")) {
        Serial.println("MDNS responder started");
    }
  webSocket.begin();
  webSocket.onEvent(webSocketEvent);
  Serial.printf("Web server started, open %s in a web browser\n", WiFi.localIP().toString().c_str());
}

//connect to wifi network
void connect() {
  Serial.printf("Connecting ");
  WiFi.begin("yourssid", "password");
  while (WiFi.status() != WL_CONNECTED)
  {
    delay(500);
    Serial.print(".");
  }
  Serial.println(" connected");
}

// server side
void webSocketEvent(uint8_t num, WStype_t type, uint8_t * payload, size_t lenght) {
    switch(type) {
        case WStype_DISCONNECTED:
            break;
        case WStype_CONNECTED:
            webSocket.sendTXT(num, "connected");
            delay(500);
            break;
        case WStype_TEXT:
            String temp=String(adcreading);
            webSocket.sendTXT(num, temp);
            delay(10);
            break;
     }
}

// client side
// prepare a web page to be send to a client (web browser)
String htmlHeader()
{
  String htmlPage =
     String("HTTP/1.1 200 OK\r\n") +
            "Content-Type: text/html\r\n" +
            "Connection: close\r\n" +  // the connection will be closed after completion of the response
            "\r\n" +
            "<!DOCTYPE HTML>\r\n";
     return htmlPage;
}

String styleSheet()
{
  String stylePage =
    String("<head>\r\n") +
    "<script>\r\n" +
    "var connection = new WebSocket('ws://adc.local:81');\r\n"+
    "connection.onmessage = function (e) {\r\n" +
    "document.getElementById('adcval').innerHTML = e.data;\r\n" +
    "connection.send('anything');\r\n" +
    "}\r\n" +
    "</script>\r\n" +
    "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n" +
    "<style>\r\n" +
    "h1 { \r\n" +
        "font-family: verdana;\r\n" +
        "text-align: center;\r\n" +
        "font-size: 30px;\r\n" +
    "}\r\n" +
    "</style>\r\n" +
    "</head>\r\n";
  return stylePage;
}

// main loop
void loop()
{

  WiFiClient client = server.available();
  // wait for a client (web browser) to connect
  if (client)
  {
    Serial.println("\n[Client connected]");
    while (client.connected())
    {
      // read line by line what the client (web browser) is requesting
      if (client.available())
      {
        String line = client.readStringUntil('\r');
        Serial.println(line);
        // wait for end of client's request, that is marked with an empty line
        if (line.length() == 1 && line[0] == '\n')
        {
          client.println(htmlHeader());
          client.println("<html>");
          client.println(styleSheet());
          client.println("<h1 id='adcval'>");
          client.println("waiting ...");
          client.println("</h1>");
          client.println("</html>");
          break;
        }
      }
    }
    delay(100); // give the web browser time to receive the data
    // and wait a little to close the connection:
    client.stop();
    Serial.println("[Client disonnected]");
  }
  webSocket.loop();
  adcreading = analogRead(A0); delay(10); // need delay to stop analogRead from blocking the web server
}
Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)