How to Control an LED from an Arduino Web Page Button and an External Push Button

The article on how to control an LED with both a button on a web page from an Arduino web server and a physical hardware button includes the circuit diagram, HTML and JavaScript code and the Arduino code.

I wrote the article after being asked a question on how to control an LED from an HTML button on an Arduino hosted web page and a physical button connected to an Arduino pin.

The image below shows the final project.

Arduino LED Control from Web Page and Push Button Switch

Arduino LED Control from Web Page and Push Button Switch

An Arduino and Ethernet shield is used with a web page hosted on the micro SD card inserted into the Ethernet shield.

When the checkbox or button on the web page is clicked, the corresponding LED will switch on or off. When a push button is pressed, the corresponding LED will switch on or off and the state of the LED will be updated on the web page. Ajax is used to update the LED states on the web page so that there is no page refresh flicker.

Pressing the left push button causes the left LED to switch on and the checkbox on the page to get a check mark. Pushing the left push button again switches the LED off and the check is removed from the checkbox on the web page.

The button on the web page will initially display the text OFF as part of the button text. When the right push button is pressed, the LED will switch on and the HTML button text will be updated to display ON. Pressing the right push button again will switch the LED off and update the button text on the web page to display OFF again.

Go to the project article with video, circuit diagram and HTML, JavaScript and Arduino Code →