YunServer: Sensor Values To HTML Page

Arduino IDE

Arduino Yun

Micro SD card 2GB with SD adaptor

<h3 >1. Start from the examples</h3>If you look under the Bridge library examples, there's one called “TemperatureWebPanel” that takes a value from an Arduino pin, then sends it to the server using the Bridge library and finally prints it on the HTML page. This is a very basic application but the concept is super powerful and it’s exactly what we are recreating from scratch in this tutorial. We start from this example to understand some core concepts of this system.All the processes that are sending and receiving data from Arduino to Linino and reverse are carried on by the <a href="http://arduino.cc/en/Reference/YunBridgeLibrary">Bridge Library</a>. This new piece of software comes with the IDE 1.5.4 and makes it very simple to communicate with the Linino part of your Arduino board. Have a look at the Bridge examples or look at the reference for more details<h3 >2. TemperatureWebPanel</h3>Let's see how to build something interactive ourselves, starting from the TemperatureWebPanel example. We’ll try to do the same but with less data, to grasp the core concepts.To make this work, we need two elements: our Arduino sketch and a HTML page.The HTML page will send requests to the Yun server, who will answer with some value that the page will display. The communication will be like: “Yun, can you tell me the temperature value?” “It’s 34 degrees”.Let’s start from the HTML page: we are not focusing on the content as much as the functionality. Our page will be empty with just the numeric value of the sensor. If you already know some CSS wizardry you can customize it.To send requests, we need to write some Javascript. If you're new to this, don't worry, we are going to use a library that simplifies the job. In the TemperatureWebPanel example, they used Zepto, a lighter version of jQuery (but you can use jQuery or any other JS library, as everything will be uploaded on the SD card). We are just imitating the example, to better understand it, so we are going to use Zepto as well.<h3 >3. HTML &amp; Zepto</h3>Make a new empty folder, then place a new index.html file inside ( you can make it with any text editor, personally I use <a href="http://www.sublimetext.com/2">SublimeText2</a>).Second step is copying zepto.min.js in that folder (you can copy it from the “www” folder of the TemperatureWebPanel example, or <a href="http://zeptojs.com/">download it</a> from their website).Zepto is nothing more than a lightweight version of <a href="http://jquery.com/">jQuery</a>. To make it so small, they had to sacrifice browser compatibility. If this doesn’t work in your browser, just use standard jQuery. In our sketch, jQuery / Zepto is used for the $(“#content”).load function, that without any library, in pure JavaScript, it would be longer and more complicated.<h3 >4. index.html</h3>The content of our index.html page:<pre ><code >&lt;!DOCTYPE html&gt; &lt;head&gt; \t&lt;script type=&#34;text/javascript&#34; src=&#34;zepto.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; function refresh() { $('#content').load('/arduino/temperature'); \t \t} &lt;/script&gt; &lt;/head&gt; &lt;body onload=&#34;setInterval(refresh, 1000);&#34;&gt; \t&lt;span id=&#34;content&#34;&gt;Waiting for Arduino...&lt;/span&gt; &lt;/body&gt; </code></pre><h3 >5. HTML in details</h3>After including Zepto, make a new script in which we create a function, refresh(). It simply loads into our 'content' span, the full content of the &#34;/arduino/temperature&#34; URL.<pre ><code >function refresh() {               $('#content').load('/arduino/temperature');           } </code></pre>The function above can be read as: “load into the element tagged as ‘content’, the content of the ‘/arduino/temperature’ URL.In the body tag, you can call the refresh function every second (1000 milliseconds) with the javascript &#34;setInterval&#34; method. Inside the body, make an element with the 'content' id, that is where our message from Arduino will be loaded.When our script loads the content every second, it makes a call to that URL (/arduino/temperature) on the Yún server. The Yún receives that call and answers back with the value, that is loaded as it is, straight into the &#34;content&#34; div<h3 >6. Arduino Sketch</h3>Now let's see the Arduino side:Open up the Arduino IDE and start a new sketch.Let's start by including the libraries that we use, at the top of our sketch, before the<code > setup()</code> , with that list of <code >#include</code> .Then initialize a YunServer object, named server.<pre ><code >YunServer server; </code></pre>Now in the setup function, we start Bridge and server on the localhost (no one from the external network can connect):<pre ><code >void setup() {  Bridge.begin();  server.listenOnLocalhost();  server.begin(); } </code></pre>Then in the loop, we create a client object to get the client requests:<pre ><code > // Get clients coming from server  YunClient client = server.accept(); </code></pre>Our code will be executed only “on-demand”, that is when the Arduino receives a client request:<pre ><code >if(client) { ... } </code></pre>If we receive an answer, the first thing that we want to do is to save the content in a String object and eliminate the whitespaces, with the trim() method.<pre ><code >String request = client.readString(); request.trim(); </code></pre>After that we want to operate a check on the String. This is probably unnecessary if we are dealing with a single element, as we can just send the element without any “label”; however if we are dealing with multiple elements, this is the way to do it. We check that the string contains the “temperature” substring.<pre ><code >if (request == &#34;temperature&#34;) {      int val = analogRead(A1);      client.print(val);    } </code></pre>If the request string is &#34;temperature&#34;, read the value from the pin A1, where the temperature sensor is connected, then print it on the client. Everything that you put in the client.print() brackets, it’s going to be reported in the &#34;content&#34; span of our HTML page.In this case just the value of the A1 pin, but if you have a look at the TemperatureWebPanel example, it prints also time and number of hits.Although we are sending a string that is &#34;/arduino/temperature&#34;, the &#34;/arduino&#34; part is not considered in the sketch (even though it's necessary in the JS part), so our string is just &#34;temperature/value&#34;.<figure><img src=https://projects.arduinocontent.cc/7a4eb8ca-5110-4201-ac47-3fdf9b5a64b8.png /><figcaption> </figcaption></figure><h3 >7. Up &amp; Running</h3>The last step of this process is to upload everything on the Yún.After saving your sketch (you can see the full code after the break), make the www subfolder and copy index.html and zepto.min.js into it. Now select the IP Yún from the Tools-&gt;Port menu and upload it via WiFi.To see the webpage just open a browser window and go to this URL:<a href="http://arduino.local/sd/mysketch">http://arduino.local/sd/mysketch</a> (“arduino” is your board ‘s name and “mysketch” your sketch name)If everything went fine, at the beginning you should see just a zero on the top left of the page, but after some seconds it will start to print values from the A1 analog port.You can access this page from any device connected to the same network, just copy the link.<figure><img src=https://projects.arduinocontent.cc/9681f7d5-9d1c-407d-8b1d-e0f3f4e2f412.png /><figcaption> </figcaption></figure>

YunServer: Sensor Values To HTML Page

Send sensor values to a web page using YunServer.