Displaying Serial Monitor Data to Web Interface

Hi everyone! I am in desperate need for some assistance with an esp32 project I'm trying to do. This has two sensors, the MPU-6050 and the Impact Tilt sensor. I am able to get live data in the serial monitor, but not sure how to send it to a web interface. I'm able to successfully connect to a web server, as I get the ip address but I only have very basic html going, and want to be able to display exactly what I have in my serial monitor onto a web server. I'm also operating on AP station for my piece. I have attached the code and snippits of what I get back. Thank you so much for your help!! :slight_smile:

// Load Wi-Fi library
#include <Adafruit_Sensor.h>
#include <Wire.h>
#include <Arduino.h>
#include <Webserver.h>
#include <Wifi.h>
#include <Adafruit_BusIO_Register.h>
#include <Adafruit_I2CDevice.h>
#include <Adafruit_MPU6050.h>

// Replace with your network credentials
const char* ssid     = "ESP32_AP";
const char* password = "123456789";

// Set web server port number to 80
WiFiServer server(80);

// Variable to store the HTTP request
String header;

// Auxiliar variables to store the currsent output state
Adafruit_MPU6050 mpu; //device
int sensor_pin = 16;
int sensor_pin2 = 17;

void setup() {
  pinMode(sensor_pin, INPUT);
  Serial.begin(9600);
  // Connect to Wi-Fi network with SSID and password
  Serial.print("Setting AP (Access Point)…");
  // Remove the password parameter, if you want the AP (Access Point) to be open
  WiFi.softAP(ssid, password);

  IPAddress IP = WiFi.softAPIP();
  Serial.print("AP IP address: ");
  Serial.println(IP);
  
  server.begin();
      while (!Serial)
    delay(10); // will pause Zero, Leonardo, etc until serial console opens

  Serial.println("Adafruit MPU6050 test!");

  // Try to initialize!
  if (!mpu.begin()) {
    Serial.println("Failed to find MPU6050 chip");
    while (1) {
      delay(10);
    }
  }
  Serial.println("MPU6050 Found!");
  mpu.setAccelerometerRange(MPU6050_RANGE_8_G);
  Serial.print("Accelerometer range set to: ");
  switch (mpu.getAccelerometerRange()) {
  case MPU6050_RANGE_2_G:
    Serial.println("+-2G");
    break;
  case MPU6050_RANGE_4_G:
    Serial.println("+-4G");
    break;
  case MPU6050_RANGE_8_G:
    Serial.println("+-8G");
    break;
  case MPU6050_RANGE_16_G:
    Serial.println("+-16G");
    break;
  }
  mpu.setGyroRange(MPU6050_RANGE_500_DEG);
  Serial.print("Gyro range set to: ");
  switch (mpu.getGyroRange()) {
  case MPU6050_RANGE_250_DEG:
    Serial.println("+- 250 deg/s");
    break;
  case MPU6050_RANGE_500_DEG:
    Serial.println("+- 500 deg/s");
    break;
  case MPU6050_RANGE_1000_DEG:
    Serial.println("+- 1000 deg/s");
    break;
  case MPU6050_RANGE_2000_DEG:
    Serial.println("+- 2000 deg/s");
    break;
  }

  mpu.setFilterBandwidth(MPU6050_BAND_5_HZ);
  Serial.print("Filter bandwidth set to: ");
  switch (mpu.getFilterBandwidth()) {
  case MPU6050_BAND_260_HZ:
    Serial.println("260 Hz");
    break;
  case MPU6050_BAND_184_HZ:
    Serial.println("184 Hz");
    break;
  case MPU6050_BAND_94_HZ:
    Serial.println("94 Hz");
    break;
  case MPU6050_BAND_44_HZ:
    Serial.println("44 Hz");
    break;
  case MPU6050_BAND_21_HZ:
    Serial.println("21 Hz");
    break;
  case MPU6050_BAND_10_HZ:
    Serial.println("10 Hz");
    break;
  case MPU6050_BAND_5_HZ:
    Serial.println("5 Hz");
    break;
  }

  Serial.println("");
  delay(100);
}

void loop(){
  WiFiClient client = server.available();   // Listen for incoming clients

  if (client) {                             // If a new client connects,
    Serial.println("New Client.");          // print a message out in 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
        header += c;
        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("Connection: close");
            client.println();
            
            // Display the HTML web page
            client.println("<!DOCTYPE html><html>");
            client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
            client.println("<link rel=\"icon\" href=\"data:,\">");
            // CSS to style the on/off buttons 
            // Feel free to change the background-color and font-size attributes to fit your preferences
            client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
            client.println(".button { background-color: #4CAF50; border: none; color: white; padding: 16px 40px;");
            client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
            client.println(".button2 {background-color: #555555;}</style></head>");
            
            // Web Page Heading
            client.println("<body><h1>Lets putt. </h1>");
            client.println("<h2>Here are your statistics. Let's help improve your putt! </h2>");
            client.println("<h3>Acceleration:</h3>");
            client.println("<h4>Impact 1:</h6>");
            client.println("<h5>Impact 2:</h7>");
            
            
            // Display current state, and ON/OFF buttons for GPIO 26  
            // 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
        }
      }
    }
    // Clear the header variable
    header = "";
    // Close the connection
    client.stop();
    Serial.println("Client disconnected.");
    Serial.println("");
  }

  
  //Accelerometer
  /* Get new sensor events with the readings */
  sensors_event_t a, g, temp;
  mpu.getEvent(&a, &g, &temp);

  /* Print out the values */
  Serial.print("Acceleration X: ");
  Serial.print(a.acceleration.x);
  Serial.print(", Y: ");
  Serial.print(a.acceleration.y);
  Serial.print(", Z: ");
  Serial.print(a.acceleration.z);
  Serial.println(" m/s^2");

  Serial.print("Rotation X: ");
  Serial.print(g.gyro.x);
  Serial.print(", Y: ");
  Serial.print(g.gyro.y);
  Serial.print(", Z: ");
  Serial.print(g.gyro.z);
  Serial.println(" rad/s");

  Serial.print("Temperature: ");
  Serial.print(temp.temperature);
  Serial.println(" degC");

  Serial.println("");
  delay(500);

//Tilt Sensor
  int sensorValue = digitalRead(sensor_pin);
    if(sensorValue==LOW){ 
        Serial.println("Sensor_pin is facing up");
        delay(1000);
        while(sensorValue==HIGH){}
   }
    else{
        Serial.println("Sensor_pin is facing down");
        delay(1000);
    }
    
//Tilt Sensor 2
  int sensorValue2 = digitalRead(sensor_pin2);
    if(sensorValue2==LOW){ 
        Serial.println("Sensor_pin is facing up");
        delay(1000);
        while(sensorValue2==HIGH){}
   }
    else{
        Serial.println("Sensor_pin is facing down");
        delay(1000);
     }
}

Snippets are never good enough. What made that be produced? There's nothing involving web trouble. It looks all good.

Sending data to the web has been done millions of times and there are lots of projects like that to find by the forum search "Search Forum" up to the right in this window. Google is another option.

What is the uncertainty?

Well, I was just kindly hoping to get an answer for my specific problem and code. instead of being pointed elsewhere. I'm on the beginner side of things, and this was a mix of code I found online.

1 Like

Helpers wish is to give answers. Sadly many first posters need help to make the question understandable, precise enough, to give precise answers and not tons of wild guesses drowning You.
Your post needs to contain more/better information. Helpers are not mind readers, just the opposite, complete newbies to Your project. Know that.
Being a beginner it's easy to come flying in at a too high level, forgetting the need for basics for us.

My apologies as I don't understand where the disconnect is. I provide my code, what I get in my serial monitor, and I was wondering how to transmit what I receive in the serial monitor to a web server. I'm not too sure how else to put it, sorry.

Just to clarify what you are trying to do...

Is the ESP32 the webserver? ... and you want to display your MPU-6050 data on a web page that the ESP32 presents so that it can be view via a web browser?

Hi, I apologize if I am using the wrong terminology. Yes when I run the code, it gives me back an IP address so I want to view this data I see on the serial monitor, also on a web browser

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.