button color change |
button color change |
jerry52 |
Jun 28 2021, 06:04 PM
Post
#1
|
Group: Members Posts: 2 Joined: 27-June 21 Member No.: 27,999 |
Greetings, brand new to HTML coding. I am trying to write code for client and server system that would be used to control our external window shades. I have a ESP-32S Development Board with wi-fi for the server and would use a cell phone, tablet or laptop as the client. I have written code to put up a table of buttons for the 4 windows on the client. The table has 4 windows with UP STOP Down selections. I have tested that code on a web page by reading the file in a web browser . When a button is selected it is to send back which button was selected. When window3 DOWN is selected the data sent back would be file:///"win3dn/" as an example. Then on the server side the motor that controls the shade on window 3 is turned on to rotate so the shade is unwound. What I want is to change the color of the button that was selected. When the shade has reached the desired position, change the color back. I have sensors on the shades for fully closed and fully open. I really don't want to send the whole table to the client with the changed button color. Is there anyway to address a particular button in the table? Here is a sample of the table code that is displayed at the client
<table> <!-- </table> id="tblMain" style="width:400px;border:1px solid black;background:yellow;"> --> <tr> <tr> </tr> <th>WIN1</th> <th>WIN2</th> <th>WIN3</th> <th>WIN4</th> </tr> <tr> <td> <a href=\"win1up\"><button class=\"button1\">UP</button></a></td> <td> <a href=\"win2up\"><button class=\"button2\">UP</button></a></td> <td> <a href=\"win3up\"><button class=\"button3\">UP</button></a></td> <td> <a href=\"win4up\"><button class=\"button4\">UP</button></a></td> </tr> <tr> <td> <a href=\"win1stop\"><button class=\"button4\">STOP</button></a></td> <td> <a href=\"win2stop\"><button class=\"button5\">STOP</button></a></td> <td> <a href=\"win3stop\"><button class=\"button6\">STOP</button></a></td> <td> <a href=\"win4stop\"><button class=\"button7\">STOP</button></a></td> </tr> <tr> <td> <a href=\"win1dn\"><button class=\"button8\">DOWN</button></a></td> <td> <a href=\"win2dn\"><button class=\"button9\">DOWN</button></a></td> <td> <a href=\"win3dn\"><button class=\"button10\">DOWN</button></a></td> <td> <a href=\"win4dn\"><button class=\"button11\">DOWN</button></a></td> </table> I use client.println(" <td> <a href=\"win1dn\"><button class=\"button8\">DOWN</button></a></td> "); at the server to send each line to the client. Since there could be several shades moving. Thanks in advance. |
Christian J |
Jun 28 2021, 06:35 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,665 Joined: 10-August 06 Member No.: 7 |
QUOTE What I want is to change the color of the button that was selected. When the shade has reached the desired position, change the color back. I have sensors on the shades for fully closed and fully open. That sounds like server-sent events, but I have no personal experience. https://developer.mozilla.org/en-US/docs/We...ver-sent_events QUOTE I really don't want to send the whole table to the client with the changed button color. That could be avoided with Ajax scripting. |
Christian J |
Jun 28 2021, 07:19 PM
Post
#3
|
. Group: WDG Moderators Posts: 9,665 Joined: 10-August 06 Member No.: 7 |
Or maybe simpler, let each button press submit a form (by targetting a page in an iframe, so that the whole page doesn't need to reload). Then let the server-side script defer returning the new framed page until the sensor reports the shader has stopped. Once the framed page is returned to the client, it updates the button color though javascript.
Can't say if/how the server-side script would handle a button press that overrides a previous one though (such as pressing the Stop button while the shader is still moving). |
jerry52 |
Jun 29 2021, 06:43 PM
Post
#4
|
Group: Members Posts: 2 Joined: 27-June 21 Member No.: 27,999 |
I think I'm going to just make it work then concentrate on making it pretty. I thought there might be a way to write the HTML so the buttons are in an array then the server could address the array to change the button color. Maybe the question is can the buttons be in an array?
|
Christian J |
Jun 30 2021, 03:57 AM
Post
#5
|
. Group: WDG Moderators Posts: 9,665 Joined: 10-August 06 Member No.: 7 |
I thought there might be a way to write the HTML so the buttons are in an array then the server could address the array to change the button color. Maybe the question is can the buttons be in an array? A server-side script can only create a web page's HTML before the web page is sent to the client (browser). For the server-side script to change the HTML after that, the server-side script needs to control (client-side) javascript on the web page through Ajax. But even then, the javascript/Ajax is normally called by events in the client (except with those server-sent events). For example, the user may click a button on the web page, which causes an Ajax request to be sent to the server-side script, which does something on the server (like moving a shader) and then returns information about the shader progress to the web page through Ajax. |
Lo-Fi Version | Time is now: 13th May 2024 - 02:00 AM |