ESP32 Forum

Posted: **Thu Aug 01, 2024 10:30 pm**

I bought a waveshare ESP32S3 1.28 inch display dev board.

Messing around with it, and watching/following youtube videos, I was able to get a gauge that goes back and forth (non functional), this is using ccp images and bouncing the array from 1 to 61 to represent a moving needle. This worked perfect.

Then I started messing around with the Examples in the ESP32 Libraries. Pretty cool stuff so far. From Waveshares website, I found libraries for the display I have, which includes some of the core functions of the ESP32s3.

There is an example for a simple wifi server. This connects to a network and allows you to blink an LED on some versions of the ESP32 boards. Mine, however, does not have this LED. My thought around this was to combine the 2 examples together. (both ran perfect separate)

I took my tft.pushImage(0, 0, 240, 240, epd_bitmap_allArray[frame] from the first example (and yes brought all other supporting code over too) and put it in place of the code that turns the LED on and off. I added a 2nd image set with a different color, so I could see the color switch when I click the links on the webpage the wifi server created.

Long story short, The break within the client connection while loop is stopping my push image from updating the current array int. Is there a way around this?

Code: Select all

#include <TFT_eSPI.h>
#include <WiFi.h>
#include <boost_gauge_images.h>
#include <red_boost_gauge_images.h>

TFT_eSPI tft = TFT_eSPI();

const char *ssid = "NaaraCafeGuest";
const char *password = "naarasbest1";

NetworkServer server(80);

int frame = 0;
int frame_inc = 1;
int frame_red = 0;
int frame_red_inc = 1;

void setup() {
  Serial.begin(115200);
  pinMode(5, OUTPUT);  // set the LED pin mode

  delay(10);

  // We start by connecting to a WiFi network

  Serial.println();
  Serial.println();
  Serial.print("Connecting to ");
  Serial.println(ssid);

  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println("");
  Serial.println("WiFi connected.");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());

  server.begin();
  tft.begin();
  tft.setRotation(4);
  tft.fillScreen(TFT_BLACK);
  tft.setSwapBytes(true);
}

void loop(void) {
  NetworkClient client = server.accept();  // listen for incoming clients

  if (client) {                     // if you get a client,
    Serial.println("New Client.");  // print a message out the serial port
    String currentLine = "";        // make a String to hold incoming data from the client
    while (client.connected()) {    // loop while the client's connected
      if (client.available()) {     // if there's bytes to read from the client,
        char c = client.read();     // read a byte, then
        Serial.write(c);            // print it out the serial monitor
        if (c == '\n') {            // if the byte is a newline character

          // if the current line is blank, you got two newline characters in a row.
          // that's the end of the client HTTP request, so send a response:
          if (currentLine.length() == 0) {
            // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
            // and a content-type so the client knows what's coming, then a blank line:
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println();

            // the content of the HTTP response follows the header:
            client.print("Click <a href=\"/H\">here</a> to turn the LED on pin 5 on.<br>");
            client.print("Click <a href=\"/L\">here</a> to turn the LED on pin 5 off.<br>");

            // The HTTP response ends with another blank line:
            client.println();
            // break out of the while loop:
            break;
          } else {  // if you got a newline, then clear currentLine:
            currentLine = "";
          }
        } else if (c != '\r') {  // if you got anything else but a carriage return character,
          currentLine += c;      // add it to the end of the currentLine
        }

        // Check to see if the client request was "GET /H" or "GET /L":
        if (currentLine.endsWith("GET /H")) {
          tft.pushImage(0, 0, 240, 240, epd_bitmap_allArray[frame]);
        }
        if (currentLine.endsWith("GET /L")) {
          tft.pushImage(0, 0, 240, 240, epd_bitmap2_allArray[frame_red]);
        }
      }
    }
    // close the connection:
    client.stop();
    Serial.println("Client Disconnected.");
  }
      frame = frame + frame_inc;
  if ((frame > 60) && (frame_inc > 0)) {
    frame = 60;
    frame_inc = -1;
  } else if ((frame < 0) && (frame_inc < 0)) {
    frame = 0;
    frame_inc = 1;
  }
    frame_red = frame_red + frame_red_inc;
  if ((frame_red > 60) && (frame_red_inc > 0)) {
    frame_red = 60;
    frame_red_inc = -1;
  } else if ((frame_red < 0) && (frame_red_inc < 0)) {
    frame_red = 0;
    frame_red_inc = 1;
  }
}

Posted: **Fri Aug 02, 2024 5:55 am**

I was able to fix it by replacing the code inside the while loop with an int. dependent on the value of the int, I was able to place code in the void loop within an if else statement, allowing for it to work correctly!

Code: Select all

#include <TFT_eSPI.h>
#include <WiFi.h>
#include <boost_gauge_images.h>
#include <red_boost_gauge_images.h>

TFT_eSPI tft = TFT_eSPI();

const char *ssid = "NaaraCafeGuest";
const char *password = "naarasbest1";

NetworkServer server(80);

int frame = 0;
int frame_inc = 1;
int frame_red = 0;
int frame_red_inc = 1;
int gauge_color = 0;

void setup() {
  Serial.begin(115200);
  pinMode(5, OUTPUT);  // set the LED pin mode

  delay(10);

  // We start by connecting to a WiFi network

  Serial.println();
  Serial.println();
  Serial.print("Connecting to ");
  Serial.println(ssid);

  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println("");
  Serial.println("WiFi connected.");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());

  server.begin();
  tft.begin();
  tft.setRotation(4);
  tft.fillScreen(TFT_BLACK);
  tft.setSwapBytes(true);
}

void loop(void) {
  NetworkClient client = server.accept();  // listen for incoming clients

  if (client) {                     // if you get a client,
    Serial.println("New Client.");  // print a message out the serial port
    String currentLine = "";        // make a String to hold incoming data from the client
    while (client.connected()) {    // loop while the client's connected
      if (client.available()) {     // if there's bytes to read from the client,
        char c = client.read();     // read a byte, then
        Serial.write(c);            // print it out the serial monitor
        if (c == '\n') {            // if the byte is a newline character

          // if the current line is blank, you got two newline characters in a row.
          // that's the end of the client HTTP request, so send a response:
          if (currentLine.length() == 0) {
            // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
            // and a content-type so the client knows what's coming, then a blank line:
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println();

            // the content of the HTTP response follows the header:
            client.print("Click <a href=\"/H\">here</a> to turn the LED on pin 5 on.<br>");
            client.print("Click <a href=\"/L\">here</a> to turn the LED on pin 5 off.<br>");

            // The HTTP response ends with another blank line:
            client.println();
            // break out of the while loop:
            break;
          } else {  // if you got a newline, then clear currentLine:
            currentLine = "";
          }
        } else if (c != '\r') {  // if you got anything else but a carriage return character,
          currentLine += c;      // add it to the end of the currentLine
        }

        // Check to see if the client request was "GET /H" or "GET /L":
        if (currentLine.endsWith("GET /H")) {
          gauge_color = 0;
        }
        if (currentLine.endsWith("GET /L")) {
          gauge_color = 1;
        }
      }
    }
    // close the connection:
    client.stop();
    Serial.println("Client Disconnected.");
  }

  if (gauge_color == 0){
    tft.pushImage(0, 0, 240, 240, epd_bitmap_allArray[frame]);
  } else if (gauge_color == 1){
    tft.pushImage(0, 0, 240, 240, epd_bitmap2_allArray[frame_red]);
  } else if ((gauge_color < 0) && (gauge_color > 1)){
    gauge_color = 0;
  }
      frame = frame + frame_inc;
  if ((frame > 60) && (frame_inc > 0)) {
    frame = 60;
    frame_inc = -1;
  } else if ((frame < 0) && (frame_inc < 0)) {
    frame = 0;
    frame_inc = 1;
  }
    frame_red = frame_red + frame_red_inc;
  if ((frame_red > 60) && (frame_red_inc > 0)) {
    frame_red = 60;
    frame_red_inc = -1;
  } else if ((frame_red < 0) && (frame_red_inc < 0)) {
    frame_red = 0;
    frame_red_inc = 1;
  }
}

Posted: **Fri Aug 02, 2024 9:28 am**

Writing to epaper is a slow, blocking process. You should decouple it from the direct action on the webserver. Have the webpage change a counter, and then use a Ticker every 10 seconds or so to push the current gauge reading to the screen.

ESP32 Forum

ESP32-S3 Dev - Simplewifiserver help

ESP32-S3 Dev - Simplewifiserver help

Re: ESP32-S3 Dev - Simplewifiserver help

Re: ESP32-S3 Dev - Simplewifiserver help