Using fauxmoESP with an existing web server app

[spmckeon1]

Hello. I am attempting to Integrate Alexa voice control into an existing web page that controls 2 shade motors. I would like to be able to say "turn on night shade up" and have Alexa send a msg to my page telling it to turn on the night shade motor in the direction needed to put the shade up. The web page is already doing this by a user clicking on a button in it. The ESP32 is also monitoring physical switches that accomplish the same thing as the web switches.

My problem is that when I attempt to integrate the fauxmo code into the app Alexa does not find any of the defined devices.

I have successfully compiled and tested the test apps in the fauxmoESP package and Alexa finds the devices and successfully controls them.

When I take this code and insert it into my app however, Alexa looses the ability to find the devices.

I have tried paring it down to a very simple app with a web switch in it and the same thing happens.

Can anyone Give me any hints or directions on how to do this integration? I find hundreds of Arduino scripts that show you how to do Alexa control of a device but none I can find also have a web page with a switch on it to control the device.

Thanks is advance for your help...

This is a sample of the simplified script I am trying to get working...In this code I can get Alexa to find the devices and operate them if I change the web server port to 81 but this makes it very clumsy for my users to remember how to get to the web page. I am very new at all this so maybe this is just the way it is. Again, Thanks...

/*********
Rui Santos
Complete project details at https://RandomNerdTutorials.com/esp32-async-web-server-espasyncwebserver-library/
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
*********/

// Import required libraries
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include "fauxmoESP.h"

#define LED 2

// Replace with your network credentials
const char* ssid = "15AB45LP";
const char* password = "2ifbysea1ifbyland3ifbyair";

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

// Create AsyncWebServer object on port 80
fauxmoESP fauxmo;
AsyncWebServer server(81);

const char index_html[] PROGMEM = R"rawliteral(

<title>ESP Web Server</title> <style> html {font-family: Arial; display: inline-block; text-align: center;} h2 {font-size: 3.0rem;} p {font-size: 3.0rem;} body {max-width: 600px; margin:0px auto; padding-bottom: 25px;} .switch {position: relative; display: inline-block; width: 120px; height: 68px} .switch input {display: none} .slider {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 6px} .slider:before {position: absolute; content: ""; height: 52px; width: 52px; left: 8px; bottom: 8px; background-color: #fff; -webkit-transition: .4s; transition: .4s; border-radius: 3px} input:checked+.slider {background-color: #b30000} input:checked+.slider:before {-webkit-transform: translateX(52px); -ms-transform: translateX(52px); transform: translateX(52px)} </style>

ESP Web Server

%BUTTONPLACEHOLDER% <script>function toggleCheckbox(element) { var xhr = new XMLHttpRequest(); if(element.checked){ xhr.open("GET", "/update?output="+element.id+"&state=1", true); } else { xhr.open("GET", "/update?output="+element.id+"&state=0", true); } xhr.send(); } </script> )rawliteral";

// Replaces placeholder with button section in your web page
String processor(const String& var){
//Serial.println(var);
if(var == "BUTTONPLACEHOLDER"){
String buttons = "";
buttons += "

Output - GPIO 2

<label class="switch"><input type="checkbox" onchange="toggleCheckbox(this)" id="2" " + outputState(2) + "><span class="slider">";
buttons += "

Output - GPIO 4

<label class="switch"><input type="checkbox" onchange="toggleCheckbox(this)" id="4" " + outputState(4) + "><span class="slider">";
buttons += "

Output - GPIO 33

<label class="switch"><input type="checkbox" onchange="toggleCheckbox(this)" id="33" " + outputState(33) + "><span class="slider">";
return buttons;
}
return String();
}

String outputState(int output){
if(digitalRead(output)){
return "checked";
}
else {
return "";
}
}

void setup(){
// Serial port for debugging purposes
Serial.begin(115200);

pinMode(2, OUTPUT);
digitalWrite(2, LOW);
pinMode(4, OUTPUT);
digitalWrite(4, LOW);
pinMode(33, OUTPUT);
digitalWrite(33, LOW);

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

// Print ESP 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?output=&state=
server.on("/update", HTTP_GET, [] (AsyncWebServerRequest *request) {
String inputMessage1;
String inputMessage2;
// GET input1 value on <ESP_IP>/update?output=&state=
if (request->hasParam(PARAM_INPUT_1) && request->hasParam(PARAM_INPUT_2)) {
inputMessage1 = request->getParam(PARAM_INPUT_1)->value();
inputMessage2 = request->getParam(PARAM_INPUT_2)->value();
digitalWrite(inputMessage1.toInt(), inputMessage2.toInt());
}
else {
inputMessage1 = "No message sent";
inputMessage2 = "No message sent";
}
Serial.print("GPIO: ");
Serial.print(inputMessage1);
Serial.print(" - Set to: ");
Serial.println(inputMessage2);
request->send(200, "text/plain", "OK");
});

// Start server
server.begin();

  // Set fauxmoESP to not create an internal TCP server and redirect requests to the server on the defined port
// The TCP port must be 80 for gen3 devices (default is 1901)
// This has to be done before the call to enable()
fauxmo.createServer(true);
fauxmo.setPort(80); // This is required for gen3 devices

// You have to call enable(true) once you have a WiFi connection
// You can enable or disable the library at any moment
// Disabling it will prevent the devices from being discovered and switched
fauxmo.enable(true);

// You can use different ways to invoke alexa to modify the devices state:
// "Alexa, turn kitchen on" ("kitchen" is the name of the first device below)
// "Alexa, turn on kitchen"
// "Alexa, set kitchen to fifty" (50 means 50% of brightness)

// Add virtual devices
fauxmo.addDevice("lamp 1");

fauxmo.addDevice("lamp 2");

// You can add more devices

//fauxmo.addDevice("light 3");
//fauxmo.addDevice("light 4");
//fauxmo.addDevice("light 5");
//fauxmo.addDevice("light 6");
//fauxmo.addDevice("light 7");
//fauxmo.addDevice("light 8");

fauxmo.onSetState([](unsigned char device_id, const char * device_name, bool state, unsigned char value) {
    
    // Callback when a command from Alexa is received. 
    // You can use device_id or device_name to choose the element to perform an action onto (relay, LED,...)
    // State is a boolean (ON/OFF) and value a number from 0 to 255 (if you say "set kitchen light to 50%" you will receive a 128 here).
    // Just remember not to delay too much here, this is a callback, exit as soon as possible.
    // If you have to do something more involved here set a flag and process it in your main loop.
    
    // if (0 == device_id) digitalWrite(RELAY1_PIN, state);
    // if (1 == device_id) digitalWrite(RELAY2_PIN, state);
    // if (2 == device_id) analogWrite(LED1_PIN, value);
    
    Serial.printf("[MAIN] Device #%d (%s) state: %s value: %d\n", device_id, device_name, state ? "ON" : "OFF", value);

    // For the example we are turning the same LED on and off regardless fo the device triggered or the value
    digitalWrite(LED, !state); // we are nor-ing the state because our LED has inverse logic.

});

}

void loop() {
fauxmo.handle();

}

[HarrisonMylesG]

Have you looked at the FauxmoESP_External_Server example sketch? It shows disabling fauxmo server and routing through existing custom one.

[mjtrini]

I too have tried the external server example but it simply does not work properly. The external web server works but alexa cannot discover new devices. Also previously discovered devices are labeled as unresponsive by alexa.