The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> button color change
jerry52
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 28 2021, 06:35 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 28 2021, 07:19 PM
Post #3


.
********

Group: WDG Moderators
Posts: 9,630
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).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jerry52
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 30 2021, 03:57 AM
Post #5


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(jerry52 @ Jun 30 2021, 01:43 AM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 04:44 PM