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 →

Tiny USB LED Torch Beginner’s Electronic Project

This USB LED torch is an easy project for beginners in electronics and requires some soldering. The torch can be used as a conventional torch or an emergency light during mains power failure.

It can be powered from any USB  host port. The image below shows a USB power pack that is sold as a solution for charging USB devices on the go. If you already have a USB power pack, the USB torch can be built for very little cost and carried with you wherever you take your power pack.

USB Battery Power Pack and LED Torch

USB Battery Power Pack and LED Torch

The torch is shown below powered on.

USB LED Torch Powered by USB Battery Pack / Charger

USB LED Torch Powered by USB Battery Pack / Charger

The article on how to build the torch includes a circuit diagram and parts list.

Arduino MEGA Ethernet Web Server for Controlling 24 Outputs

In this tutorial, an Arduino MEGA 2560 and Ethernet shield are used to make a web server that hosts a web page that allows 24 outputs to be controlled using checkboxes. The tutorial on the Arduino MEGA web server contains the circuit diagram and all of the source code for the project.

This tutorial was written to answer a question on the blog about the Arduino web server tutorial.

An image of the web server with the web page used to control 24 LEDs is shown below.

24 Output Arduino MEGA Web Server using the Ethernet Shield

24 Output Arduino MEGA Web Server using the Ethernet Shield