Help with esp code

Projects General Guidance
1

Hi ive been stuck on this for two days, its a small web server that drives a motor when I press a physical or web button. im stuck with getting my html button to do anything. when I press it it turns gray and that's it. I thought it should call handleSpray_button() but ive put a serial print in but nothing shows? any help would be appreciated.

thanks

#include <ESP8266WiFi.h>
#include <WiFiManager.h>
#include <ESP8266WebServer.h>
#include "LittleFS.h"
#include <LOLIN_I2C_MOTOR.h>

//webserver
ESP8266WebServer server(80);


// Pins
const int Manuak_PB_Pin = 14;     // the number of the pushbutton pin
bool web_buttonPressed = false;
bool man_buttonState = false;

// Define variables for motor control
int FWD = 350; // time to run motor forward
int PAUSE = 500; // time to pause after motor runs forward
int BCK = 200; // time to run motor backward

// Motor
LOLIN_I2C_MOTOR motor;//(0x30);

void FireSpray() {
//  myservo.write(posStart);  // make sure at starting position
    Serial.println("MOTOR_SEQUENCE_START");
    Serial.println("FWD: = " + String(FWD));
    Serial.println("PAUSE: = " + String(PAUSE));
    Serial.println("BCK: = " + String(BCK));
    pinMode(LED_BUILTIN, HIGH);  // just for LED output
    motor.changeDuty(MOTOR_CH_BOTH, 300);
    motor.changeStatus(MOTOR_CH_A, MOTOR_STATUS_STOP);
    delay(1000);
    //Serial.println("MOTOR_STATUS_CW");
    motor.changeStatus(MOTOR_CH_A, MOTOR_STATUS_CCW);
    delay(350);
    //Serial.println("MOTOR_STATUS_STANDBY");
    motor.changeStatus(MOTOR_CH_A, MOTOR_STATUS_STOP);
    delay(500);
    //Serial.println("MOTOR_STATUS_CCW");
    motor.changeStatus(MOTOR_CH_A, MOTOR_STATUS_CW);
    delay(200);
    //Serial.println("MOTOR_STATUS_STANDBY");
    motor.changeStatus(MOTOR_CH_A, MOTOR_STATUS_STOP);
    //delay(500);
    pinMode(LED_BUILTIN, LOW);  // just for LED output
    Serial.println("MOTOR_SEQUENCE_STOP");
}

// Functions

void handleRoot() {
  String html = "<html><head><meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0'></head><body style='text-align:center;'>";
  html += "<div style='margin: auto;'>";
  html += "<h1 style='font-size: 300%;'>ESP8266 Glade Web Server</h1>";
  html += "<form method=\"POST\" action=\"/spray_button\">";
  html += "<button type=\"submit\" id=\"spray-button\" style='background-color:blue;color:white;padding:32px;border:none;border-radius:5px; font-size: 300%;'>Spray</button>";
  html += "</form>";
  html += "<form method=\"POST\" action=\"/wifisettings\">";
  html += "<button type=\"submit\" style='background-color:gray;color:white;padding:16px;border:none;border-radius:5px; font-size: 150%;'>WiFi Settings</button>";
  html += "</form>";
  html += "<br><br><div style='text-align:left;display:inline-block;width:33%;'>";
  html += "<label for='downtime'>Down Time:</label><br>";
  html += "<input type='text' id='downtime' name='downtime' maxlength='5' value='" + String(FWD) + "'><br><br>";
  html += "<label for='pausetime'>Pause Time:</label><br>";
  html += "<input type='text' id='pausetime' name='pausetime' maxlength='5' value='" + String(PAUSE) + "'><br><br>";
  html += "<label for='uptime'>Up Time:</label><br>";
  html += "<input type='text' id='uptime' name='uptime' maxlength='5' value='" + String(BCK) + "'><br><br>";
  html += "</div></div>";
  html += "<script>";
  html += "document.getElementById('spray-button').addEventListener('click', function() {";
  html += "this.style.backgroundColor = 'gray';";
  html += "this.disabled = true;";
  html += "document.getElementById('wifi-settings-button').disabled = true;";
  html += "document.getElementById('downtime').disabled = true;";
  html += "document.getElementById('pausetime').disabled = true;";
  html += "document.getElementById('uptime').disabled = true;";
  html += "setTimeout(function() {";
  html += "document.getElementById('spray-button').style.backgroundColor = 'blue';";
  html += "document.getElementById('spray-button').disabled = false;";
  html += "document.getElementById('wifi-settings-button').disabled = false;";
  html += "document.getElementById('downtime').disabled = false;";
  html += "document.getElementById('pausetime').disabled = false;";
  html += "document.getElementById('uptime').disabled = false;";
  html += "}, 5000);";
  html += "});";
  html += "</script>";
  html += "</body></html>";
  server.send(200, "text/html", html);
}
//void handleSpray_button() {
//  if (!web_buttonPressed) {
//    web_buttonPressed = true;
//    Serial.println("Web Button pressed!");
//    // Do something when button is pressed
//    FireSpray(); 
//    server.send(200, "text/plain", "Button Pressed");
//  }
//}

void handleSpray_button() {
  Serial.println("Spray button clicked!");
  server.send(200, "text/plain", "Button Pressed");
}

void setup() {
  Serial.begin(115200);
  pinMode(Manuak_PB_Pin, INPUT_PULLUP);
  while (motor.PRODUCT_ID != PRODUCT_ID_I2C_MOTOR) //wait motor shield ready.
  {
    motor.getInfo();
  }
  // Connect to WiFi or start AP mode
  Serial.println("Starting Wifimanager");
  WiFiManager wifiManager;
  wifiManager.autoConnect("WiFi Settings");
  
  // If connected to WiFi, start the server
  if (WiFi.status() == WL_CONNECTED) {
    server.on("/", handleRoot);
    server.on("spray_button",HTTP_POST, handleSpray_button);
    server.begin();
    
    Serial.println("Connected to WiFi");
    Serial.print("IP address: ");
    Serial.println(WiFi.localIP());
  }
  // If not connected to WiFi, redirect to WiFi settings page
  else {
    server.on("/", HTTP_GET, [](){
      server.sendHeader("Location", "/wifi");
      server.send(302, "text/plain", "");
    });

server.on("/wifi", [&](){
  if(server.method() == HTTP_POST){
    String ssid = server.arg("ssid");
    String password = server.arg("password");
    if(ssid != "" && password != ""){
      wifiManager.setConfigPortalTimeout(10);
      wifiManager.autoConnect("WiFi Settings");
      LittleFS.begin();
      File configFile = LittleFS.open("/config.json", "w");
      if(!configFile){
        Serial.println("Failed to open config file for writing");
      }
      else {
        configFile.println("{\"ssid\":\"" + ssid + "\",\"password\":\"" + password + "\"}");
        configFile.close();
        server.send(200, "text/html", "<html><body><p>WiFi credentials saved.</p><p>You can now close this page and reboot the device.</p></body></html>");
        return;
      }
    }
  }
  String html = "<html><body style='text-align:center'>";
  html += "<h1>WiFi Settings</h1>";
  html += "<form method=\"POST\">";
  html += "<label>SSID:</label><br>";
  html += "<input type=\"text\" name=\"ssid\"><br>";
  html += "<label>Password:</label><br>";
  html += "<input type=\"password\" name=\"password\"><br>";
  html += "<input type=\"submit\" value=\"Connect\">";
  html += "</form>";
  html += "</body></html>";
  server.send(200, "text/html", html);
});

    
    server.begin();
    Serial.println("Started access point");
    Serial.print("IP address: ");
    Serial.println(WiFi.softAPIP());
  }
}

void loop() {
  server.handleClient();
  // read the state of the pushbutton value:
  man_buttonState = digitalRead(Manuak_PB_Pin); 
    // check if the pushbutton is pressed. If it is, the buttonState is HIGH:
  if (man_buttonState == LOW) {
    Serial.println("Manual Button Pressed" + man_buttonState);
    Serial.print("Man button state: ");
    Serial.println(web_buttonPressed);
    delay(50);
    //snprintf(msg, 75, "Manual Button Pressed");
    //Serial.print("Publish message: ");
    //Serial.println(msg);
    //client.publish(outTopic, msg);
    FireSpray();
    }
  }
2

HTML is not my strong point, but in

        server.on("spray_button", HTTP_POST, handleSpray_button);

should there be a / before spray_button ?

3

Im not sure, I feel like ive bitten more than I can chew with this. Ive added that and it dint work.

But I have just tried to set up the second button and yes it needs the "/"before and my issue is the button turning grey it seems. got some where to start looking in to now.

4 
 html += "document.getElementById('spray-button').addEventListener('click', function() {";
  html += "this.style.backgroundColor = 'gray';";
  html += "this.disabled = true;";

I had to set this disabled = false and the button works now.

5

Look up "Arduino C++ raw string literal" for examples of how you can use "super quotes" to avoid preparing and concatenating each line, and messing about with escape characters, as you have been doing. It is much cleaner.

6

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