Differences
This shows you the differences between two versions of the page.
|
iot:labs:07 [2016/06/24 23:46] ioana_maria.culic created |
iot:labs:07 [2017/09/11 09:39] (current) alexandru.radovici created |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ====== Lab 7: Programming with Streams====== | + | ====== Lab 7: Web server ====== |
| - | ===== Traffic Lights ===== | + | ===== Request data from a web page ===== |
| - | ===== What you need ===== | + | |
| - | * One Raspberry Pi connected to Wyliodrin STUDIO; | + | |
| - | * Five LEDs; | + | |
| - | * One button; | + | |
| - | * Six 200 Ohms resistors; | + | |
| - | * Jumper wires; | + | |
| - | * Breadboard. | + | |
| - | ===== The Setup ===== | + | Remember using a web service. When you make a request to the server, you need to show it the method, meaning what you expect it to do, which, in the case where you want data to be drown from the web by the server, would be //get//. Next, you need to tell the server where to get this data from. Any query has the following structure: http://address:[port]URL?querystring. Through this query the server will find the data you want and send it back to your browser. |
| - | Connect the LEDs and the button to the Raspberry Pi following the schematics in the figure. | + | |
| - | {{ :iot:labs:traffic-lights.png?400 |}} | + | |
| - | The button is connected in a voltage divider circuit. You can notice that the button has 4 legs. Usually, one leg from one side is connected to the one in front of it. However, there might be the case that the legs care connected side by side, this is why we encourage you to use a measuring device in order to identify how the legs are connected. Once the button is pressed, all the legs get connected. | + | |
| - | {{:iot:labs:connected.png?200|Button}} | + | |
| - | In the schematics, the button is connected to a pull-up resistor, that means that the GPIO pin will read the value 1 if the button is pressed and 0 otherwise. | + | To get information from the Web you need as usual, only a few nodes. |
| - | ===== The Code ===== | + | |
| - | Create a new Wyliodrin STUDIO application and name it **traffic lights**. | + | |
| - | {{:iot:labs:semaphore_button_streams.png?300|Traffic Lights Applicatio }} | + | |
| - | The previous shows the nodes you need to use and how to connect them. Now let's see what each node does. | + | Let's imagine you need to access the data from a web site. How could you implement this need in Streams? |
| - | First of all, notice the **semaphore** function node. This node is connected to the nodes controlling the GPIO pins connected to the LEDs and it outputs the values that need to be written on each pin. | + | To be able to see the data in under a structure that can be easily interpreted by the nodes, it will have to be in JSON format. What you'll actually use from the website is an API URL. |
| + | Under functions you have the node //http request//. | ||
| - | The figure below shows the code of the function. Basically, it verifies the value of the payload it received and depending on the value, it describes a certain state. The value 0 corresponds to the initial state when the cars lights have their green light turned on and the rest turned off and the pedestrian lights have the red light turned on and the green one turned off. This is why the function returns a list containing the values [0,0,1,1,0]. The block automatically knows to distribute each of these values in a message on the corresponding output (the first value is transmitted on the first output, the second value on the second output and so on). As a result, the **digital write** nodes (red, yellow, green, ped-red and ped-greed) receive the values 0,0,1,1 and respectively 0. | + | Go on the web site you want to get data from. Now search for the API and copy the URL. It will give you access to the data you request written as a JSON. |
| + | In the settings of the second node, paste the URL into the corresponding field. | ||
| - | {{:iot:labs:semaphore_function.png?300|Semaphore function}} | + | The problem is that when the node puts this data in the payload, it will be a string. In order to be able to parse it, you need to converse it back to a JSON. Use the node which has this very name. |
| + | {{ :iot2015:labs:parseobj.png?300 |}} | ||
| + | There is a way of extracting only a part of this object. Search for the //change// node. This will make of the message in the payload, the one you wish to have. | ||
| + | There it is, now print it on the screen to see how it works. | ||
| + | {{ :iot2015:labs:httprequest.png?400 |}} | ||
| + | ===== Send a message to a web page ===== | ||
| + | This time, you build a server yourself. What do you need? A port on which your server, once started will listen on and instructions on what it should do. Also you will need a web response, as any request comes with a response. While the former is made of instructions, messages to be sent and an address of the desination, the latter will return the status of the request: did the server find the page, could it access it? | ||
| - | The **digital write** nodes have names according to the LED they control (the red node controls the red LED of the cars' semaphore and so on). Each node controls a pin by either setting it to HIGH or to LOW. The pin will be set to HIGH if the payload of the message is 1 and to LOW if it equals 0. For each node, you need to select the number of the pin they are controlling. For the **red** node you need to type the number 2 for the pin, as the LED representing the red light is connected to GPIO 2. | + | Many important details about web servers can be found in the corresponding course. These will help you understand every step in building and using the web services. |
| + | What you will do is to make a web server, using the //Web// node. | ||
| + | In it's settings see that your server will listen on a port, and follow the method you choose to a route configured inside the node. | ||
| - | Another important aspect are the two **run** nodes. The one directly connected to the **set 0** node will get triggered once the application start running and then it will send a message every 48 hours. For this, you need to double click the node and mark the **Fire once at start?**. Afterwards, you also need to set the interval to every 48 hours. | + | The message you send will be in payload, but you change it simply by using the same node as before. |
| - | The node connected to **run**. **set 0** is a **change** node and it allows you to change the payload of the message. As the first state of the system is 0, the payload is set to 0 and sent to the function. Basically, the run-set 0- function connection resets the traffic lights every 48 hours. All the other **set** nodes work the same, but they set some other values to the payload. | + | Web response will set the status for the web response. For example, if you write 200 it will be ok, the connection works, but 404 is error //not found//. |
| - | {{:iot:labs:change_edit.png?200|}} | + | |
| - | The other **run** node is connected to **digital read**, so each second a new reading is done. | + | Now you have your own web server. Let's access the page where the new payload will be shown. Add a new tab on your browser and write your board's IP. |
| - | The **digital read** node reads the value coming from the button. You have to set the number of the pin the reading should be done from. In this case, the button is connected to pin 6, so go to the node's properties and set 6 for the pin. | + | You find this IP if you open your board's shell and write //ifconfig// . |
| + | After you write in the URL fields of the new tab the IP add // : // and then your port, in this case 5000. | ||
| - | If the value read is 1 (HIGH), you need to change the states of the lights, otherwise you can simply ignore the reading. The node named **if button pressed** is a **switch** node that routes messages based on their properties. This specific node has only one output which will send further on any message that has the payload 1, basically it will act as a filter which sends a message only when the button is pressed. The figure below depicts how to filter the values. | + | Before anything else, you need to run the project to start the server. Only after,if you enter the page, it should show the message from the payload. |
| + | {{ :iot2015:labs:sendtoweb.png?400 |}} | ||
| - | {{:iot:labs:if_button_pressed.png?200|}} | + | ===== Try dynamic view in a web page ==== |
| + | You saw already how to create a web page using Streams programming language. What you added to the web page was the message in the payload. | ||
| - | The **switch** node is then connected to a **trigger** node. This node creates two messages whenever a message arrives on the input and it outputs the messages separated by a distance specified in the properties. For this project the node allows you to automatically send a message after 30 seconds from the pushed button so that the traffic lights system returns to its initial state. The first message has the payload 1 and the second has the payload 0, thus identifying the states the lights need to get to. | + | There is another way by which you can create a web page using Streams. |
| + | ==== Use HTML to create a web page ==== | ||
| - | {{:iot:labs:trigger.png?200|Trigger node properties}} | + | The concept is pretty much the same. You send the payload to the web server to write data on a webpage. This time, the payload can be an HTML file, where you build your document. |
| - | Further on, depending on the value the **trigger** node outputs, the **filter input** node will set the lights to the intermediate state and after 5 seconds (**delay** node) it will send another message with the value of final state stored in the payload. | + | More to that. If in this HTML file you use a variable, say //light//, and you write it in between two sets of curly brackets {{}} and, if the same variable stores a value in your Streams main file, maybe the value from a light sensor, it will be added to the web page. In short, you store a value in a variable in Streams and use it in the HTML like so: { {variable} } (with no spaces) , and the value will appear on the web document. |
| + | How? The template will be processed, meaning the variable in this html file will be given the value from the payload and loaded in the response. | ||
| - | The **filter input** node is also a **switch** node which has two outputs, in this case. The first output is for the value 0 (triggered when the button has just been presses) and the second for the value 1 (triggered when the system needs to get back to its initial state). This way you can differentiate between the two. | + | Now you have a variable in your Streams main file to which you give the value from a light sensor. This same variable is used in the HTML file you created. Now, let's make the connection between the two. |
| - | {{:iot:labs:filter_input.png?300|Filter input node properties}} | + | Replace the // web response// node with //web template//. In the latter's settings, write the name of the html file. You can run the project and access the page with the same address: http://IP:5000. |
| + | |||
| + | ==== Dynamic web pages ==== | ||
| + | In these cases there won't be static files inluded in the page returned to the browser by the server. Using AngularJS, a library which can be used with javaScript and included in HTML files, you can now constantly check if the value has changed and instead of using the request, response, end of communication schematics, you can now keep the communication line open. This way you can see the changes on the web page in real time without the need to reload the page. | ||
| + | |||
| + | You have an already built example of how to use an AngularJS in the additional HTML file. You find it, when creating a new application as //Web Server// under Streams programming language. | ||
| + | Let's use the same example with the light sensor. | ||
| + | |||
| + | Compared with the previous part, nothing changes concerning the //web route// node and its connection to the //web response//. The latter, has a slight change thought that we will come back to a bit later. | ||
| + | |||
| + | In this example, the function will generate random numbers and put them in a variable called //random//. | ||
| + | You can read an analog pin, as described in the Sensors lab, and send the value to a variable. | ||
| + | |||
| + | {{ :iot2015:labs:webserverex.png?500 |}} | ||
| + | Now, the only method by which you can constantly send this value to your web page is to use a HTML file, to which you add AngularJS features, thus making your page a dynamic one. | ||
| + | |||
| + | In the example application, on the left side of the page, there is the file manager. Inside you will see that in the folder with the name of your project, you have the main file and one other folder //static//. Here you will find the HTML file you need. | ||
| + | |||
| + | Let's look into this one. | ||
| + | The head has the scripts which make possible the next part of the HTML, so it shouldn't be modified. The first one implements AngularJS, the second handles the communication, the third controls the variables. | ||
| + | |||
| + | Moving on to the body, //ng-controller// defines the controller. | ||
| + | Within the body of the HTML you can write the tags that are necessary for the page you envision. | ||
| + | Looking at the example, you will find the variable defined in streams, in the node value, meaning //random//. If you have used //light//, you would write //{ {light} }// (no spaces). | ||
| + | |||
| + | Now that you have the HTML you wished for, go back to streams. You will have to tell the web server where to take the data from. In the node //web response// you left earlier the field //redirect// not filled. Here, you need to write the address to the HTML, from within the project. // /static/project_name.html //. | ||
| + | |||
| + | You told the web server what the port is, how the page should look like, what it should contain and on which route to locate it. Now run the project and thus you start your server. | ||
| + | |||
| + | The next step is to actually access the page and see if it was created correctly. | ||
| + | |||
| + | Take the board's IP search the page just as you did in the previous part: // http://IP:port //. | ||
| ===== Exercises ===== | ===== Exercises ===== | ||
| - | - Use a button in the dashboard to control the traffic lights; | + | |
| - | - Display in the dashboard the state of the traffic lights using the **extra widget**. **Note:** you can use the following pictures: | + | - Write a web server and show to the user a static html page. If he requests anything else that that page, show him an error page. |
| + | - Write a web server that shows the user the temperature on each refresh. | ||
| + | - Add a select box to the page, so that the user can select what he wants to see: the temperature or the light. | ||
| + | - Modify the server you just wrote to display the data without refreshing the page. | ||
| + | - Use a websocket to display the all data. | ||
| + | - Build a web service that allow controlling the device pins. | ||
| + | - Write a web page to test the service. | ||
