ESP8266 Webserver Guidance

Projects Programming
1

Good Evening,

I'm using this code for a project and it's working well. GitHub - bbx10/SFX-web-trigger: Sound Effects Web Trigger

I would like to try and modify the webpage buttons / HTML code so I can trigger sound effects with my home automation setup.

I believe the current webpage buttons are using Java script and don't have dedicated URLs I can use with home-assistant.

I would hope to be able to trigger the sound fx files by using something like http://192.168.1.75/T01 (For track one on the SD card) http://192.168.1.75/T02 (For track two on the SD card) and so on.

I don't need to maintain the now playing functionality if it adds complexity.

Any assistance would be greatly appreciated.

webpage source code.txt (4.75 KB)

Web trigger sketch.txt (13.2 KB)

Current Buttons.PNG
Current Buttons.PNG287×515 17.9 KB

2

In your sketch, the home page you see when accessing the ESP8266 server is based on the rawliteral HTML defined at the beginning of the sketch. When a browser asks for the home page or “/” root of the site, the ESP8266 server sends back this big long INDEX_HTML formatted string here…

 // handle "/"
  server.on("/", []() {
      server.send_P(200, "text/html", INDEX_HTML);
  });
  server.begin();

This is so you can see and press the pretty buttons in the browser and send the right track number back to the sketch which actually hosts the home page and receives the text from the javascript and then plays the selected track.

You could easily just host any number of additional pages beyond just the home page like this…

server.on("/", []() { server.send_P(200, "text/html", INDEX_HTML); });  // Handle Home page
    server.on("/T00", playTrack(“T0.mp3”));  // Handle  /T00 page
    server.on("/T01", playTrack(“T1.mp3”));  // Handle /T01 page
    server.on("/T02", playTrack(“T2.mp3”));  // Handle /T02 page
    server.on("/T03", playTrack(“T3.mp3”)); // Handle /T03 page
    server.on("/T04", playTrack(“T4.mp3”)); // Handle /T04 page
    …… etc….   
    server.begin();

So now basically going to //192.168.1.75/T01 from a browser will cause the sketch to call the playTrack function with the String parameter "T1.mp3". Then you could use the new playTrack function to do the work of playing tracks. You could add other page names and function calls to adjust volume, turn on/off lights, or doing anything else you want to program the sketch to do when you go to that page from a browser and the server.on call redirects it to the specified function call.

void playTrack(String trackName) {

// Send the browser a plain text confirmation page that says "Track Tx.mp3 Selected"

server.send_P(200, "text/plain", "Track " + trackName + “ Selected”);

// Play the track

startPlaying(trackName);

}

Excuse any typos, but I hope this helps with the concept of how the server is working and how to add sketch function to web page calls ...

3

wzaggle,

Thanks for the quick response and detailed information.

I’ll give this a try tonight.

4

wzaggle,

I added the code and compiled. This is the error I received.

doorSFX2:394: error: 'playTrack' was not declared in this scope

     server.on("/T00", playTrack("T0.mp3")); // Handle /T00 page

                                         ^

I tried to switch playTrack to startPlaying without any luck. (I'm just guessing as I don't have any experience with Java or HTML)

Any ideas?

Thanks

DoorSFX_v2.txt (13.6 KB)

5

Try something like this. BTW, Arduino code is C++, not Java.

  // handle request like http://<IP server IP>/T01
  server.on("/T01", []() {
      startPlaying("T1.mp3");
      server.send(200, "text/plain", "playing T1.mp3");
  });
6

gdsports,

Thanks for the information. I added the following to the existing sketch.

// handle "/"
  server.on("/T00", []() {
      startPlaying("T0.mp3");
      server.send(200, "text/plain", "playing T0.mp3");
  server.on("/T01", []() {
      startPlaying("T1.mp3");
      server.send(200, "text/plain", "playing T1.mp3");  
  server.on("/T02", []() {
      startPlaying("T2.mp3");
      server.send(200, "text/plain", "playing T2.mp3");
  server.on("/T03", []() {
      startPlaying("T3.mp3");
      server.send(200, "text/plain", "playing T3.mp3");          
  server.on("/T02", []() {
      startPlaying("T4.mp3");
      server.send(200, "text/plain", "playing T4.mp3");
  server.on("/T02", []() {
      startPlaying("T5.mp3");
      server.send(200, "text/plain", "playing T5.mp3");
  server.on("/T02", []() {
      startPlaying("T6.mp3");
      server.send(200, "text/plain", "playing T6.mp3");
  server.on("/T02", []() {
      startPlaying("T7.mp3");
      server.send(200, "text/plain", "playing T7.mp3");
  server.on("/T02", []() {
      startPlaying("T8.mp3");
      server.send(200, "text/plain", "playing T8.mp3");    
  server.on("/T02", []() {
      startPlaying("T9.mp3");
      server.send(200, "text/plain", "playing T9.mp3");

When I compile I receive this error:

doorSFX2_v2:427: error: expected ')' before 'inline'

 inline void webserver_loop(void) {

 ^

I added ")" before "inline" and then received this error:

doorSFX2_v2:427: error: expected ';' before 'inline'

 )inline void webserver_loop(void) {

  ^

Any ideas? Thank you.

DoorSFX_v3.txt (14.3 KB)

7

Compare the recommendation by gdsports to what you have... Each server.on line needs to be complete. The error messages are confusing if you don't know C programming constructs that well.

server.on("/T01", []() { <-- Start of server.on statement

Lines of inline code that you want, in your case startPlaying and server.send

  }); <---- rest of server.on. I think you are leaving this line out each time

  server.on("/T01", []() {
      startPlaying("T1.mp3");
      server.send(200, "text/plain", "playing T1.mp3");
  });

// handle "/"
  server.on("/T00", []() {
      startPlaying("T0.mp3");
      server.send(200, "text/plain", "playing T0.mp3");
  });
  server.on("/T01", []() {
      startPlaying("T1.mp3");
      server.send(200, "text/plain", "playing T1.mp3"); 
  }); 
  server.on("/T02", []() {
      startPlaying("T2.mp3");
      server.send(200, "text/plain", "playing T2.mp3");
  });
  server.on("/T03", []() {
      startPlaying("T3.mp3");
      server.send(200, "text/plain", "playing T3.mp3");
  });          
  server.on("/T02", []() {
      startPlaying("T4.mp3");
      server.send(200, "text/plain", "playing T4.mp3");
  });
  server.on("/T02", []() {
      startPlaying("T5.mp3");
      server.send(200, "text/plain", "playing T5.mp3");
  });
  server.on("/T02", []() {
      startPlaying("T6.mp3");
      server.send(200, "text/plain", "playing T6.mp3");
  });
  server.on("/T02", []() {
      startPlaying("T7.mp3");
      server.send(200, "text/plain", "playing T7.mp3");
  });
  server.on("/T02", []() {
      startPlaying("T8.mp3");
      server.send(200, "text/plain", "playing T8.mp3");
  });    
  server.on("/T02", []() {
      startPlaying("T9.mp3");
      server.send(200, "text/plain", "playing T9.mp3");
  });
8

wzaggle thanks for the great advice! It's working with individual URLs.

Is it still possible to have the original webpage with all 9 tracks / buttons functional?

When I navigate to the ESP8266 IP Address I see a page like this

Not found: /

Thanks

DoorSFX_v3.txt (14.4 KB)

9

Sure... Put this line back in for handling the home page...

 server.on("/", []() { server.send_P(200, "text/html", INDEX_HTML); });