Arduino Yún: Intro to web server

1. Intro

Between all the new features of the Arduino Yún, one of the coolest is that it can be used as a server. This means that once the Yún is configured to connect via WiFi, you can create a client web page that will be uploaded smoothly on the SD card (plenty of space) and you can access it from your browser. Also, all the regular Arduino pins can be controlled from your web page using Javascript. For more info on the server-client model, you can start from Wikipedia.

Since we are using JavaScript and HTML, the client device can be anything that is able to browse the internet; computers, tablets, iPhones, Android devices, Windows phones, practically anything!

In this series of tutorials we will not explain every time the HTML, JavaScript or Arduino code, we just assume a basic comprehension of these topics and illustrate a basic communication between those elements. 

Let's get started.

2. "www" folder

The Arduino Yún can be used via USB like a regular Arduino board, even though in this tutorial we'll be using it via WiFi. Our sketches and other materials can be uploaded via WiFi, after the Yún is configured. If you haven't already configured your board, follow this guide to set it up.

After your Yún is connected to the WiFi, we can start to work on our sketch. As you know, an Arduino Sketch has a .ino extension, that must be contained in a folder with the same name.

With the Yún, we can create a subfolder called "www" into the sketch folder, all the content of this new folder will be uploaded on the SD card automatically (only if uploaded via WiFi, via USB it doesn't work).

Basically the Arduino IDE does the job for us, by copying the content of the www folder on the SD card. If your sketch is called "mysketch", the www folder will be created on the SD card in: SD/arduino/www/mysketch. You can also do this manually, but if you upload using WiFi, the IDE will do the job.

If you don't have an SD card inserted, after uploading the sketch the IDE returns an error, as only the sketch will be uploaded.

The content of this www folder, can be accessed from the SD card on our browser by typing:

http://boardname.local/sd/mysketch  (or 192.168.x.x/local/sd/mysketch)

Where "boardname" is the Yún's name and "mysketch" the name of our sketch.

3. Upload

Let's make a practical example: open the Arduino IDE and start a new sketch; then save it without writing anything in the setup() and loop() function. Once saved, from the top menu select Sketch->Show Sketch Folder. This will open the sketch folder on your computer; here we have to create a new folder and give it the "www" label. Now all the files that we put in this folder, once the sketch will be uploaded via WiFi, they can be accessed from the browser.

The idea is to put web html pages and other cool stuff, but just for testing purposes we can put one or two images.

Now move a picture in the just created "www" folder.

Select the board from the Tools->Port menu. If you have it connected via USB, don't select the USB board but the IP one, as it's the only way to upload everything via IDE.

4. See sketch content from your browser

Now click on the Upload button; if it's the first time you are uploading, it will ask you the password, the default it’s "arduino".

Once the upload process is finished, you can access your sketch's folder by typing in the URL bar:

http://carla.local/sd/test

This because I named my Arduino "Carla" and my sketch "test", if my board's name was "Bob" and my sketch was called "lightValues", my URL would be http://bob.local/sd/lightValues (your Yún's name is not case sensitive, whereas for the sketch it's important to write it with the right caps). Alternatively, if you are using mobile devices (but even from your computer), instead of writing “arduino.local/sd”, you can use “192.168.0.193/sd” where the address (192.168.0.193) it’s the IP address of your board (you can find it in the ports menu of the Arduino IDE).

You should see a directory with all the included files listed. If you click on one of them, like a picture, you should be able to see it in your browser.

5. Make a web page

Now we can make an "hello arduino" HTML page. Just copy the code at the end of this step in a text editor, then save it as "index.html".  

Once saved, put it in the "www" folder of our sketch, with a picture named "arduino.jpg" and upload everything via WiFi.

Hello Arduino!
Hello Arduino!

6. Display page

Now type the same URL as before (if you are using the same sketch), you should see the "index.html" page we just created, rendered in your browser. 

7. Conclusion

As you can see it's rather easy to create HTML pages that can be uploaded on your Yún SD card and displayed in your browser. 

Stay tuned for a tutorial on simple communication between your page and the Arduino pins.