How to Access your Arduino from the Internet

If you have built an Arduino web server (e.g. by following the Arduino web server tutorial), you will be able to access your web server on your local network, probably through your ADSL router. But what must be done if you want to access the Arduino server from outside of your home network?

The tutorial on connecting your Arduino web server to the Internet describes how to set up and access your Arduino web server from the Internet via any Internet connected device such as a PC, tablet or smart-phone. This allows you to remotely view and interact with your Arduino web server pages.

An external service such as no-ip can be used as a solution to the dynamic IP address that is usually assigned to the router. This is also explained in the tutorial.

Go to the tutorial now →

Raspberry PI: Booting more than One Operating System

More than one operating system can be loaded to the same Raspberry PI SD card using the NOOBS installation files. This allows easy experimentation and evaluation with different operating systems.

In the article on booting multiple operating systems, Raspbian, RISC OS Pi and Arch Linux are loaded onto a single 16Mb SD card to show how easy it is to boot multiple operating systems on the RPI.

Switching LEDs on from a Web Page using Arduino

The Arduino and Ethernet shield are set up as a web server. The web page that the server hosts allows two LEDs to be controlled by clicking checkboxes on the web page.

This video shows the Arduino and web page in action:

The LEDs are interfaced to pin 2 and pin 3 of the Arduino.

This is an answer to a question from the Arduino web server blog entry relating to the article on Arduino Web Server LED Control. The question is on how to control two LEDs from a web page.

The Arduino sketch for this solution:
This code is a hack from some previous code that I wrote and so does not look exactly like the code from the sketch that the question is related to.

Changing Text and Button Color using AJAX and the Arduino Web Server

This is an answer to the question about part 7 of the Arduino Ethernet shield web server tutorial (using Ajax) posted on the blog entry for the tutorial. The question is on how to change the text that shows the status of a switch on a web page as well as the color of the button on the web page. The switch is interfaced to the Arduino Ethernet web server.

This video shows the solution to the question in operation, but the color of the button text is changed instead of the color of the button (because it looked better):


The Arduino sketch for this solution sends the following web page (HTML with JavaScript and CSS) to the web browser:

HTML with JavaScript and CSS from Arduino Web Server

Click for a bigger image










The sketch for this solution can be downloaded here:

Solution Explanation

The idea is to send the status of the switch (either ON or OFF) as well as the button HTML code with text color to the web browser. This is done every time that an Ajax call is made. An initial Ajax call is made when the page loads. Additional Ajax calls are made every time the button on the web page is clicked. In other words the status of the switch is displayed on the web page the first time that the web page is loaded and then every time that the button on the web page is clicked. The button text will be colored red when the switch is open and colored green when the switch is closed.

The Arduino sketch is a modified version of the sketch from part 7 of the tutorial: Arduino Web Server Switch Status Using AJAX Manually

The following is modified in the sketch:

First of all, a div is created with the ID “data_to_update”. Both elements to be updated (text and button) will be inserted here by JavaScript code after they have been received from the Arduino web server. This will occur after an Ajax call. The div looks as follows on the web page:
<div id="data_to_update">
<p id="switch_txt">Switch state: Not requested...</p>

The div could have been left empty as everything in the div will be replaced after the Ajax call.

Next, the following line of JavaScript code replaces everything between the opening and closing div tags when the Arduino responds to the Ajax call:
document.getElementById("data_to_update").innerHTML = this.responseText;

The last modification to the code is to make sure the JavaScript function GetSwitchState() is called at least once when the page is loaded. If it is not called, the button will not be visible on the web page and therefore the user will not be able to click the button to make Ajax calls. The onload event is used to run this function once when the web page loads by adding a call in the body tag of the HTML page:
<body onload="GetSwitchState()">

In the Arduino sketch, the Arduino responds to the Ajax call from the web page by sending the button status text and the button with color information. This is done in the Arduino sketches’ GetSwitchState() function. This function checks the state of the interfaced push-button switch and responds as follows:
If the switch is open, it sends OFF paragraph text and red button text:
cl.println("<p>Switch state: OFF</p><button type=\"button\" style=\"color: red;\" onclick=\"GetSwitchState()\">Get Switch State</button>");
The above line of Arduino code sends these lines of HTML with CSS to color the button text red:
<p>Switch state: OFF</p>
<button type="button" style="color: red;" onclick="GetSwitchState()">Get Switch State</button>");

If the switch is closed, this line of Arduino code is run:
cl.println("<p>Switch state: ON</p><button type=\"button\" style=\"color: green;\" onclick=\"GetSwitchState()\">Get Switch State</button>");
which sends this HTML with CSS code to color the button text green:
<p>Switch state: ON</p>
<button type="button" style="color: green;" onclick="GetSwitchState()">Get Switch State</button>");