[Tutorial]

Yśn Bridge, the REST API, and Jquery

For those unfamiliar with the above three, let me state the final outcome. Through the web you will be able to read and write to the pins on the Yśn through a webpage interface and it will feel professional. The look of the webpage will depend your talents for creating it.

The Yśn Bridge

First, if you do not know, the Yun has two (2) processors; an Atmel ATmega32U4 and an Atheros AR9331. The ATmega32U4 controls the GPIO pins and the microUSB. The AR9331 controls the wifi, ethernet, & USB-A Host connector. The ATmega32U4 works just like many of the Arduino, with the closest relation being the Leonardo. The AR9331 runs a form of Linux which is originally from OpenWrt. The Yśn Bridge connects the two (2) processors. You can read more about the two processors on the webpage - Guide to the Arduino Yśn.

The REST API

The network portion of the REST API runs on the AR9331, but it does NOT do anything without a sketch running on the ATmega32U4. So to make things happen via the REST API, you need to run a sketch. Luckily, the code to run the REST API is in the Arudino IDE examples section. To get to it click Files->Examples->Bridge->Bridge. The tutorial for the REST API is on webpage Guide to the Arduino Yśn in the section under Web services. It is short, I recommend reading it. I also strongly recommend turning off the password protection.

http://arduino.local/arduino/digital/13/1 ^^^^ ^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^^^^^^ protocol ||| |||||||| domain resource

Jquery

Working with the Yśn Bridge, the REST API, and Jquery, can be rewarding and frustrating. Rewarding when it works, of course. Frustrating when things do not go right.

One of the most frustrating portions is called CORS. In short what it means is, if the webpage you load does not come from the Yśn webserver, most, if not all, web browsers will not load the data coming from the Yśn. This means you can NOT have a webpage on your laptop and load the data from the Yśn. This means the webpage MUST BE on the Yśn. There are ways around this, but that would take far more time in learning and coding than is worth the effort1 2 3 - at least at this point.

Running the Example

Next, you'll want to watch the process as it happens. Luckily modern browsers have a tool for this. It is called the console.

''On firefox'' ctrl+shift+i -> make sure you are in "console" & have "Net" selected ''On Chrome'' ctrl+shift+J -> make sure you are in "network"

LOAD THE PAGE: http://arduino.local/tutorial/

The first time you load the webpage in firefox you'll see something like this in the console. Chrome will have a similar display. If you see [HTTP/1.1 500 OK XXXms], you have not started the sketch.

GET http://arduino.local/tutorial/ [HTTP/1.1 200 OK 113ms] GET http://arduino.local/tutorial/jquery-2.1.1.js [HTTP/1.1 200 OK 166ms] GET http://arduino.local/arduino/digital/13/0 [HTTP/1.1 200 OK 321ms]

After the page loads, click the button labeled . Now look at the console and you'll see a new line added; similar to the line below. You should also look over at your Yśn. You will see LED #13 on.

GET http://arduino.local/arduino/digital/13/1 [HTTP/1.1 200 OK 321ms]

How it works

Should you have missed it, the webpage did NOT reload. The button was clicked and LED came on. At the heart of this is AJAX. It opens a socket to the webserver and loads the data. The leading code wrapper for this is Jquery. However, if you don't know about issues, like CORS, Jquery is just another black box.

// READ THIS: http://api.jquery.com/jquery.get/

  1. If you don't know how to load a webpage on the webserver, let me know.
  2. One way to get around this issues is to write hybrid application - such as Phonegap.
  3. Also, if you'd like to see what actually happens I have some [Notes.curl.html Notes].