Convert ESP8266 Sketch to ESP32 Sketch Assistance Request

Projects Programming
1

Hi All,

I have decided to upgrade my project from ESP8266 to an ESP32.
( Below is the board I've chosen to upgrade to not sure of the ESP32 model)

ESP32-Relay8ch

Can I please get assistance in converting my project sketch to be compatible and flashable to ESP32

/*
   L1  *  D1 -- GPIO5
   L2  *  D2 -- GPIO4
   L3  *  D3 -- GPI00
   L4  *  D5 -- GPI14
   L5  *  D6 -- GPI12
   Htr  *  D7 -- GPIO13
   Fan *  D8 -- GPIO15
   USING THESE PINS - D1, D2, D3, D5, D6, D7, D8 = IO5, IO4, IO0, IO14, IO12, IO13, IO15
   BUILTIN_LED used as WiFi Connection Status LED(BLUE)in GPIO02 which is D4
   UsablePins
   GPIO PINS {16,15,14,13,12,5,4,3,2,1,0} = DigitalPins {D0,D8,D5,D7,D6,D1,D2,Rx,D4,Tx,D3}
*/
#include "ESPAsyncWebServer.h"
#include <ESP8266WiFi.h>
#include <ESP8266mDNS.h>
#include <WiFiUdp.h>
#include <ArduinoOTA.h>
// Set to true to define Relay as Normally Open (NO)
#define RELAY_NO    false

// Set number of relays
#define NUM_RELAYS  7

// Assign each GPIO to a relay
int relayGPIOs[NUM_RELAYS] = {5, 4, 0, 14, 12, 13, 15};
// Relay IO Digital pin assignments = {D1,D2,D3,D5,D6,D7,D8}
int WiFiSTATE = 2;

const char* ssid = "NETGEAR80";
const char* password = "dailycoconut482";

const char* PARAM_INPUT_1 = "relay";
const char* PARAM_INPUT_2 = "state";

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

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<meta charset="utf-8">
<html lang="en">
<head>
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"">
<title>Van Control</title>
<link type=\"text/css\" rel=\"stylesheet\" id=\"dark-mode-custom-link\">
<link type=\"text/css\" rel=\"stylesheet\" id=\"dark-mode-general-link\">
<style lang=\"en\" type=\"text/css\" id=\"dark-mode-custom-style\"></style>
<style lang=\"en\" type=\"text/css\" id=\"dark-mode-native-style\"></style>
<style lang=\"en\" type=\"text/css\" id=\"dark-mode-native-sheet\"></style>
<style>
  html {justify-content: center;text-align: center;font-family: system-ui;display: inline-block;}
  label {cursor: default;}
  h2 {border-radius:0.2em;font-size: 5.0rem;color: white;display: block;text-transform: uppercase;font-family: roboto helvetica;margin-block-start: 0.83em;margin-block-end: 0.83em;margin-inline-start: 0px;margin-inline-end: 0px;font-weight: bolder;text-shadow: 1px 1px red;-webkit-text-emphasis-color: black;text-emphasis-color: black;outline-style: double;outline-color: navy;outline: solid; background-color:black;/*background-image: url(https://i.imgur.com/JJf8NzO.jpg); */ -webkit-backface-visibility: visible;backface-visibility: visible;background-position: left;}
  h4 {display: block;margin-block-start: 0.33em;margin-block-end: 0.33em;margin-inline-start: 0px;margin-inline-end: 29px;font-weight: lighter;}
  .toggleContainer {background-image: url(https://i.imgur.com/LF1XLU1.jpg);background-repeat: round;background-size:contain;margin-left: auto;margin-right: auto;margin-bottom: auto;background-position: bottom;margin-top: -5px;border: 7px solid #01026b;border-radius: 20px;max-width: auto;margin: auto;display: inline-table;max-inline-size: -webkit-fill-available;min-block-size: min-content;overscroll-behavior-block: auto;}
  .individualToggleBox {position: relative;text-align: center;display: inherit;table-layout: fixed;}
  p {font-size: 3.0rem;}
  body {margin: 0px auto;padding-bottom: 25px;background-image: url(https://i.imgur.com/0BFjs97.jpg);background-size: cover;color: white;margin-bottom: 166px;height: max-content;max-height: -webkit-fill-available;max-width: -moz-fit-content;max-width: fit-content;position: relative;inline-size: 90%;display: inherit;background-position-x: center;}
  .switch {position: relative;display: inline-block;width: 120px;height: 68px;}
  .switch input {display: none;}
  .slider {top: 0;left: 0;right: 0;bottom: 0;background-color: #000000;border-radius: 34px;position: absolute;border-bottom: outset;}
  .slider:before {position: absolute;content: "";height: 52px;width: 52px;left: 8px;bottom: 8px;background-color: #fff;-webkit-transition: .4s;transition: .4s;border-radius: 68px;}
  input[type="checkbox" i] {background-color: initial;cursor: default;webkit-appearance: auto;box-sizing: border-box;margin: 3px 3px 3px 4px;padding: initial;border: initial;}
  input:checked+.slider {background-color: indigo;}
  input:checked+.slider:before {-webkit-transform: translateX(52px);-ms-transform: translateX(52px);transform: translateX(52px);}
  .switch input{display: none;}
  input{writing-mode: horizontal-tb  !important;text-rendering: auto;color: white;letter-spacing: normal;word-spacing: normal;line-height: normal;text-transform: none;text-indent: 0px;text-shadow: none;display: inline-block;text-align: start;-webkit-appearance: auto;-webkit-rtl-ordering: logical;cursor: text;background-color: field;margin: 0em;padding: 1px 2px;border-width: 2px;border-style: inset;border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));border-image: initial; padding-left:8px;}
</style>
<body>
<script>
    function openInNewTab(url) {
      window.open(url, '_blank').focus();
    }
    function light(param1) {
      if(param1 == '0'){
        var a = document.querySelector("#togglesContainer > div:nth-child(1) > label > span");
        a.click();
        console.log("Light 1 Toggled!");
      }
      if(param1 == '1'){
        var b = document.querySelector("#togglesContainer > div:nth-child(2) > label > span");
        b.click()
        console.log("Light 2 Toggled!");
      }
      if(param1 == '2'){
       var c = document.querySelector("#togglesContainer > div:nth-child(3) > label > span");
       c.click();
       console.log("Light 3 Toggled!");
      }
      if(param1 == '3'){
        var d = document.querySelector("#togglesContainer > div:nth-child(4) > label > span");
        d.click();
        console.log("Light 4 Toggled!");       
      }
      if(param1 == '4'){
        var f = document.querySelector("#togglesContainer > div:nth-child(5) > label > span");
        f.click();
        console.log("Fan Toggled!");    
      }
      if(param1 == '5'){
        var g = document.querySelector("#togglesContainer > div:nth-child(6) > label > span");
        g.click();
        console.log("Light 5 Toggled!");
      }
      if(param1 == '6'){
        var g = document.querySelector("#togglesContainer > div:nth-child(7) > label > span");
        g.click();
        console.log("Heater Toggled!");
    }
    else{
        console.log("Error No Param Specified - Takes 1 Argument!");
    }
}</script>
  <h2>My Van</h2>
  <div id="togglesContainer" class="toggleContainer">
  %BUTTONPLACEHOLDER%
  </div>
<script>function toggleCheckbox(element) {
  var xhr = new XMLHttpRequest();
  if(element.checked){ xhr.open("GET", "/update?relay="+element.id+"&state=1", true); }
  else { xhr.open("GET", "/update?relay="+element.id+"&state=0", true); }
  xhr.send();
}</script>
</body>
</html>
)rawliteral";

// Replaces placeholder with button section in your web page
String processor(const String& var){
  //Serial.println(var);
  if(var == "BUTTONPLACEHOLDER"){
    String buttons ="";
    for(int i=1; i<=NUM_RELAYS; i++){
      String relayStateValue = relayState(i);
      buttons+= "<div class=\"individualToggleBox\"><h4 class=\"pins\">Light " + String(i) + "GPIO" + relayGPIOs[i-1] + "</h4><label class=\"switch\"><input type=\"checkbox\" onchange=\"toggleCheckbox(this)\" id=\"" + String(i) + "\" "+ relayStateValue +"><span class=\"slider\"></span></label></div>";
    }
    return buttons;
  }
  return String();
}

String relayState(int numRelay){
  if(RELAY_NO){
    if(digitalRead(relayGPIOs[numRelay-1])){
      return "";
    }
    else {
      return "checked";
    }
  }
  else {
    if(digitalRead(relayGPIOs[numRelay-1])){
      return "checked";
    }
    else {
      return "";
    }
  }
  return "";
}

void setup(){
  pinMode(WiFiSTATE, OUTPUT);
  digitalWrite(WiFiSTATE,HIGH);

  // Serial port for debugging purposes
  Serial.begin(115200);
  Serial.println("Booting");  
  // Set all relays to off when the program starts - if set to Normally Open (NO), the relay is off when you set the relay to HIGH
  for(int i=1; i<=NUM_RELAYS; i++){
    pinMode(relayGPIOs[i-1], OUTPUT);
    if(RELAY_NO){
      digitalWrite(relayGPIOs[i-1], HIGH);
    }
    else{
      digitalWrite(relayGPIOs[i-1], LOW);
    }
  }
  WiFi.mode(WIFI_STA);
  // Connect to Wi-Fi
  WiFi.begin(ssid, password);
    while (WiFi.status() != WL_CONNECTED) {
      digitalWrite(WiFiSTATE,HIGH);  
      delay(100);
      Serial.println("Connecting to WiFi..");
    }
    if(WiFi.status() == WL_CONNECTED){
        digitalWrite(WiFiSTATE, LOW);
    // Print ESP8266 Local IP Address
      Serial.println(WiFi.localIP());
    }
    
  // Route for root / web page
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/html", index_html, processor);
  });

  // Send a GET request to <ESP_IP>/update?relay=<inputMessage>&state=<inputMessage2>
  server.on("/update", HTTP_GET, [] (AsyncWebServerRequest *request) {
    String inputMessage;
    String inputParam;
    String inputMessage2;
    String inputParam2;
    // GET input1 value on <ESP_IP>/update?relay=<inputMessage>
    if (request->hasParam(PARAM_INPUT_1) & request->hasParam(PARAM_INPUT_2)) {
      inputMessage = request->getParam(PARAM_INPUT_1)->value();
      inputParam = PARAM_INPUT_1;
      inputMessage2 = request->getParam(PARAM_INPUT_2)->value();
      inputParam2 = PARAM_INPUT_2;
      if(RELAY_NO){
        Serial.print("NO ");
        digitalWrite(relayGPIOs[inputMessage.toInt()-1], !inputMessage2.toInt());
      }
      else{
        Serial.print("NC ");
        digitalWrite(relayGPIOs[inputMessage.toInt()-1], inputMessage2.toInt());
      }
    }
    else {
      inputMessage = "No message sent";
      inputParam = "none";
    }
    Serial.println(inputMessage + inputMessage2);
    request->send(200, "text/plain", "OK");
  });


  ArduinoOTA.onStart([]() {
    String type;
    if (ArduinoOTA.getCommand() == U_FLASH)
      type = "sketch";
    else // U_SPIFFS
      type = "filesystem";

    // NOTE: if updating SPIFFS this would be the place to unmount SPIFFS using SPIFFS.end()
    Serial.println("Start updating " + type);
  });
  ArduinoOTA.onEnd([]() {
    Serial.println("\nEnd");
  });
  ArduinoOTA.onProgress([](unsigned int progress, unsigned int total) {
    Serial.printf("Progress: %u%%\r", (progress / (total / 100)));
  });
  ArduinoOTA.onError([](ota_error_t error) {
    Serial.printf("Error[%u]: ", error);
    if (error == OTA_AUTH_ERROR) Serial.println("Auth Failed");
    else if (error == OTA_BEGIN_ERROR) Serial.println("Begin Failed");
    else if (error == OTA_CONNECT_ERROR) Serial.println("Connect Failed");
    else if (error == OTA_RECEIVE_ERROR) Serial.println("Receive Failed");
    else if (error == OTA_END_ERROR) Serial.println("End Failed");
  });
  ArduinoOTA.begin();
  Serial.println("Ready");
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());
  // Start server
  server.begin();
}
  
void loop() {
  ArduinoOTA.handle();
}

Thanks in advance I anxiously await reply and hope this question is in the right section . :nerd_face:

2

Welcome to the forum

Where are you stuck ?

3

If you replace

#include <ESP8266WiFi.h>
#include <ESP8266mDNS.h>

with

#include <WiFi.h>
#include <mDNS.h>

the sketch will compile but I cannot guarantee that it will still do what you want. You will need to adjust the pin numbers to suit your project

As a matter of interest, why did the sketch for the ESP8266 use the GPIO pin numbers and not the digital pin numbers ?

4

Tо Multi board

#if defined(ESP32)
#include <WiFi.h>
#include <mDNS.h>
#include <AsyncTCP.h>
#define R1  5
#define R2  4
#define R3  0
#define R4  14
#define R5  12
#define R6  13
#define R7  15

#elif defined(ESP8266)
#include <ESP8266WiFi.h>
#include <ESP8266mDNS.h>
#include <ESPAsyncTCP.h>
#define R1  5
#define R2  4
#define R3  0
#define R4  14
#define R5  12
#define R6  13
#define R7  15

#else
#error "Only ESP8266 or ESP32 board"
#endif

#include <ESPAsyncWebServer.h>
#include <WiFiUdp.h>
#include <ArduinoOTA.h>

// Set to true to define Relay as Normally Open (NO)
#define RELAY_NO    false

// Set number of relays
#define NUM_RELAYS  7

// Assign each GPIO to a relay
int relayGPIOs[NUM_RELAYS] = {R1, R2, R3, R4, R5, R6, R7};
// Relay IO Digital pin assignments = {D1,D2,D3,D5,D6,D7,D8}
5

@HaKDMoDz

as alternative you can try my generic webserver for this board:

https://werner.rothschopf.net/microcontroller/202208_esp32_relay_x8_en.htm

if you activate the configuration 75 it should immediately work

#define USE_BOARD 75;
6

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