Technically Distracted: May 2017

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

#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
}

Technically Distracted

Saturday, May 13, 2017

ADC IIR LPF SPI TFT LCD GUI - Part 2

Sketch