ESP8266 Web Server using SPIFFS, trying to change example to dropdown menu

Using Arduino Programming Questions
1

Original, see processor function:

/*
  Rui Santos
  Complete project details at https://RandomNerdTutorials.com
  
  Permission is hereby granted, free of charge, to any person obtaining a copy
  of this software and associated documentation files.
  
  The above copyright notice and this permission notice shall be included in all
  copies or substantial portions of the Software.
*/

// Import required libraries
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <FS.h>
#include <Wire.h>
#include <Adafruit_Sensor.h>
#include <Adafruit_BME280.h>

Adafruit_BME280 bme; // I2C
//Adafruit_BME280 bme(BME_CS); // hardware SPI
//Adafruit_BME280 bme(BME_CS, BME_MOSI, BME_MISO, BME_SCK); // software SPI

// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

// Set LED GPIO
const int ledPin = 2;
// Stores LED state
String ledState;

// Create AsyncWebServer object on port 80
AsyncWebServer server(80);

String getTemperature() {
  float temperature = bme.readTemperature();
  // Read temperature as Fahrenheit (isFahrenheit = true)
  //float temperature = 1.8 * bme.readTemperature() + 32;
  Serial.println(temperature);
  return String(temperature);
}
  
String getHumidity() {
  float humidity = bme.readHumidity();
  Serial.println(humidity);
  return String(humidity);
}

String getPressure() {
  float pressure = bme.readPressure()/ 100.0F;
  Serial.println(pressure);
  return String(pressure);
}

// Replaces placeholder with LED state value
String processor(const String& var){
  Serial.println(var);
  if(var == "STATE"){
    if(digitalRead(ledPin)){
      ledState = "ON";
    }
    else{
      ledState = "OFF";
    }
    Serial.print(ledState);
    return ledState;
  }
  else if (var == "TEMPERATURE"){
    return getTemperature();
  }
  else if (var == "HUMIDITY"){
    return getHumidity();
  }
  else if (var == "PRESSURE"){
    return getPressure();
  }
  return String();
}
 
void setup(){
  // Serial port for debugging purposes
  Serial.begin(115200);
  pinMode(ledPin, OUTPUT);

  // Initialize the sensor
  if (!bme.begin(0x76)) {
    Serial.println("Could not find a valid BME280 sensor, check wiring!");
    while (1);
  }

  // Initialize SPIFFS
  if(!SPIFFS.begin()){
    Serial.println("An Error has occurred while mounting SPIFFS");
    return;
  }

  // Connect to Wi-Fi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi..");
  }

  // Print ESP32 Local IP Address
  Serial.println(WiFi.localIP());

  // Route for root / web page
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/index.html", String(), false, processor);
  });
  
  // Route to load style.css file
  server.on("/style.css", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/style.css", "text/css");
  });

  // Route to set GPIO to HIGH
  server.on("/on", HTTP_GET, [](AsyncWebServerRequest *request){
    digitalWrite(ledPin, HIGH);    
    request->send(SPIFFS, "/index.html", String(), false, processor);
  });
  
  // Route to set GPIO to LOW
  server.on("/off", HTTP_GET, [](AsyncWebServerRequest *request){
    digitalWrite(ledPin, LOW);    
    request->send(SPIFFS, "/index.html", String(), false, processor);
  });

  server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/plain", getTemperature().c_str());
  });
  
  server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/plain", getHumidity().c_str());
  });
  
  server.on("/pressure", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/plain", getPressure().c_str());
  });

  // Start server
  server.begin();
}
 
void loop(){
  
}

My changes, mainly focused on trying to get the processor function to work.

/*
    GUI with SMS carrier dropdown

  https://randomnerdtutorials.com/esp8266-web-server-spiffs-nodemcu

  Press the ESP8266 on-board RST button, and it should print the ESP8266 IP address.

*/

#include <Arduino.h>
#if defined(ESP32)
#include <WiFi.h>
#elif defined(ESP8266)
#include <ESP8266WiFi.h>
#endif
#include <ESP_Mail_Client.h>

#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <FS.h>
#include <Wire.h>

#define WIFI_SSID "YOURSSID"
#define WIFI_PASSWORD "YOURPASSWORD"

/** The smtp host name e.g. smtp.gmail.com for GMail or smtp.office365.com for Outlook or smtp.mail.yahoo.com */
#define SMTP_HOST "smtp.gmail.com"
#define SMTP_PORT 465

/* The sign in credentials */
#define AUTHOR_EMAIL "yourmail@gmail.com"
#define AUTHOR_PASSWORD "pass"

/* Recipient's email*/
#define RECIPIENT_EMAIL "8003334444@vtext.com"

/*
  AT&T: number@txt.att.net
  Verizon: number@vtext.com
  Sprint/Tracfone: number@messaging.sprintpcs.com
  T-Mobile: number@tmomail.net
  U.S. Cellular: number@email.uscc.net
*/


#define sensorPin A0



SMTPSession smtp;
SMTP_Message message;

Session_Config config;


AsyncWebServer server(80);



const int tolerance = 20;     // change this, adjust to sensitivity
int sensorValue = 0;
String deviceLocation = "Bathroom Sink";


String processor(const String& var) {
  Serial.println(var);

  if (var == "RECIPIENT_EMAIL") 
  {
    // Read the phone number and carrier from the HTTP request parameters
    String phoneNumber = request->arg("phone");
    String selectedCarrier = request->arg("carrier");
    String recipientEmail = "";

    // Generate the recipient email based on the carrier selection
    if (selectedCarrier == "att")
      recipientEmail = phoneNumber + "@txt.att.net";
    else if (selectedCarrier == "verizon")
      recipientEmail = phoneNumber + "@vtext.com";
    else if (selectedCarrier == "sprint")
      recipientEmail = phoneNumber + "@messaging.sprintpcs.com";
    else if (selectedCarrier == "tmobile")
      recipientEmail = phoneNumber + "@tmomail.net";
    else if (selectedCarrier == "uscellular")
      recipientEmail = phoneNumber + "@email.uscc.net";

    return recipientEmail;
  }

  return String(); // Return an empty string for unknown variables
}






void setup() {

  Serial.begin(115200);

  // Establish WiFi connection
  connectToWifi();

  // Enable network reconnection for the mail client
  MailClient.networkReconnect(true);

  // Configure email settings
  setupEmailConfig();



  // Initialize SPIFFS
  if (!SPIFFS.begin()) {
    Serial.println("An Error has occurred while mounting SPIFFS");
    return;
  }

  // Print ESP32 Local IP Address
  Serial.println(WiFi.localIP());

  // Route for root / web page
  server.on("/", HTTP_GET, [](AsyncWebServerRequest * request) {
    request->send(SPIFFS, "/index.html", String(), false, processor);
  });

  // Route to load style.css file
  server.on("/style.css", HTTP_GET, [](AsyncWebServerRequest * request) {
    request->send(SPIFFS, "/style.css", "text/css");
  });


  server.begin();

  pinMode(sensorPin, INPUT);  //_PULLUP
  pinMode(LED_BUILTIN, OUTPUT);

}

void loop()
{

  sensorValue = analogRead(sensorPin);  // Read the analog value from sensor

  if ( tolerance < sensorValue )
  {
    digitalWrite(LED_BUILTIN, LOW);

    // Set message details
    message.sender.name = F("ESP");
    message.sender.email = AUTHOR_EMAIL;
    message.subject = F("");

    // Create email body content
    String textMsg = "Leak: " + deviceLocation;
    message.text.content = textMsg.c_str();
    message.text.charSet = "us-ascii";
    message.text.transfer_encoding = Content_Transfer_Encoding::enc_7bit;
    message.priority = esp_mail_smtp_priority::esp_mail_smtp_priority_low;
    message.response.notify = esp_mail_smtp_notify_success | esp_mail_smtp_notify_failure | esp_mail_smtp_notify_delay;

    // Connect to the SMTP server
    if (!smtp.connect(&config))
      return;
    // Send the email using the mail client
    if (!MailClient.sendMail(&smtp, &message))
      return;

    delay(500);
  }

}


void connectToWifi() {
  // Configure WiFi settings
  WiFi.persistent(false);
  WiFi.mode(WIFI_STA);
  WiFi.begin(WIFI_SSID, WIFI_PASSWORD);

  // Wait until WiFi is connected
  while (WiFi.status() != WL_CONNECTED) {
    delay(333);
  }
}

void setupEmailConfig() {
  // Disable debug output for the SMTP session
  smtp.debug(0);

  // Configure SMTP and email settings
  config.server.host_name = SMTP_HOST;
  config.server.port = SMTP_PORT;
  config.login.email = AUTHOR_EMAIL;
  config.login.password = AUTHOR_PASSWORD;
  config.login.user_domain = "";

  // Add recipient's information to the email message
  message.addRecipient(F("me"), RECIPIENT_EMAIL);
}

I keep going in circles on how to have a drop-down menu replace the temp, humidity and pressure from the original. All I want to do is create a way for a user to input their phone number and carrier. Then the program converts the number into a string and attaches the correct SMS carrier suffix to the end.

The SMS part of the program works. The original web server works. I'm mainly having trouble changing the processor function.

2

Found this tutorial: Input Data on HTML Form ESP32/ESP8266 Web Server Arduino IDE | Random Nerd Tutorials

This should help with the phone number (first part). Maybe it's best to take the processor function out all together...

const char* PARAM_INPUT_1 = "input1";

void setup() {

  // Send web page with input fields to client
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/html", index_html);
  });

  // Send a GET request to <ESP_IP>/get?input1=<inputMessage>
  server.on("/get", HTTP_GET, [] (AsyncWebServerRequest *request) {
    String inputMessage;
    String inputParam;
    // GET input1 value on <ESP_IP>/get?input1=<inputMessage>
    if (request->hasParam(PARAM_INPUT_1)) {
      inputMessage = request->getParam(PARAM_INPUT_1)->value();
      inputParam = PARAM_INPUT_1;
    }
}

However, I still want to use SPIFFS.

3

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