Help with coding a button

Using Arduino Programming Questions
#1

The following project is for a nightlight for my grandaughter. There are two buttons; one switches the the LED ring on or off and the other cycles through the FastDemo lighting sequences.

The circuit works (problems with it were discussed on another thread). I took the base code from an Random Nerds Tutorial.

Schematic.png
Schematic.png763×526 27.1 KB

The challenge that I now have is correctly coding the %BUTTONPLACEHOLDER%.

I am not sure how to change the HTML so that the "Pattern" button

  • Displays as a button
  • The button has a label equal to the pattern sequence number i.e. gCurrentPatternNumber
  • If the pattern HTML button is clicked on then the info is fed back to the controller as if the physical cycle button has been pressed.

BrowserScreen.png

The main part of this code is here but I am guessing that I will also need to change the CSS.

if(var == "BUTTONPLACEHOLDER"){
    String buttons ="";
    String outputStateValue = outputState();
    buttons+= "<h4>Patten <span id=\"outputState\"><span></h4><label class=\"button\"><input type=\"button\"  id=\"output\" " + outputStateValue + "><span class=\"button\"></span></label>"; //Need to display gCurrentPatternNumber somehow

Schematic.png
Schematic.png763×526 27.1 KB

BrowserScreen.png

RainbowLights.ino (9.3 KB)

#2

why don't you use the hardware switches in your schematic instead of the web page?

#3

I am but it is also web controlled.

#4

do you need a submit button to invoke some action (returning a response)

i've know of 2 ways to return response: one is to request a specific page (e.g. GET /page1) which you recognize and take some specific action on before resending the updated page (e.g. with light indicated on). The other is with form data that sends a response ("?label=value) which may requires multiple actions and updating the page.

presumably you also need a WiFiClient to determine when a request is received (available()) as well a read the request (read())

#5

Hi thanks for the comments. The code works without a submit button i.e. the on/off switch works perfectly. I Just need to create a copy (which I have done) and modify it so that it is a button and not a toggle switch... this is the part that I am battling with.

#6