Differences
This shows you the differences between two versions of the page.
|
iot:courses:05 [2015/07/24 19:14] alexandru.radovici |
iot:courses:05 [2018/01/24 20:53] (current) alexandru.radovici |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ====== Course 5: Wyliodrin Dashboard ====== | + | ====== Lecture 5. Web server for IoT ====== |
| <html> | <html> | ||
| - | <center> | + | <center> |
| - | <iframe width="640" height="360" src="https://www.youtube-nocookie.com/embed/VNglEGM9LxU" frameborder="0" allowfullscreen></iframe> | + | <iframe width="640" height="360" src="https://www.youtube.com/embed/YGeLUTJpGa4?ecver=1" frameborder="0" allowfullscreen></iframe> |
| - | </center> | + | </center> |
| </html> | </html> | ||
| - | Slides are available from the [[http://www.slideshare.net/alexandruradovici/wyliodrin-dashboard|link]] | ||
| - | <hidden> | ||
| <html> | <html> | ||
| - | <iframe src="//www.slideshare.net/slideshow/embed_code/key/nLIauDIMLiFysY" width="425" height="355" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="//www.slideshare.net/alexandruradovici/wyliodrin-dashboard" title="Wyliodrin Dashboard" target="_blank">Wyliodrin Dashboard</a> </strong> from <strong><a href="//www.slideshare.net/alexandruradovici" target="_blank">Alexandru Radovici</a></strong> </div> | + | <iframe src="//www.slideshare.net/slideshow/embed_code/key/yObqsZs0GROanF" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="//www.slideshare.net/alexandruradovici/lecture-5-webservers-for-the-internet-of-things" title="Lecture 5 - Webservers for the Internet of Things" target="_blank">Lecture 5 - Webservers for the Internet of Things</a> </strong> from <strong><a href="https://www.slideshare.net/alexandruradovici" target="_blank">Alexandru Radovici</a></strong> </div> |
| </html> | </html> | ||
| - | </hidden> | ||
| - | This course is about how Wyliodrin dashboard can improve IoT applications throught its many features. | + | This course explains what a web server is, how it works, protocols used in web programming and gives examples on building and implementing a web server, of creating dynamic web pages. It also introduces the students to AngularJS and JQuery. |
| + | ===== What's a web server and HTTP===== | ||
| + | Any computer that can implement http or https is able to play the role of a web server. | ||
| + | Http is a protocol, a way of communication which supplies web pages. It is pretty widely used and easy to implement. Through http you can transfer html and create simple user interfaces, it can implement Java Script and make more complicated web pages and it is available in most of the browsers. One of the great qualities of this protocol is that it replaced complicated and heavy displays with user friendly web pages. | ||
| - | {{ :iot:courses:dashboard.png?500 |}} | + | How does it work? The browser sends a request to the server who searches the demanded page and returns it to the browser for the user. |
| + | The request will consist of information about the kind of browser that is used, about the computer or about the document requested. It will have a method, a URL, a query string and the upload body in case you want data to be sent to the server. | ||
| + | |||
| + | The response will include the status, which tells the browser if the page was found or not (the errors among the 400s are about a not found page, 300 are redirections and 200s are confirmations of the page being found). | ||
| + | {{ :iot2015:courses:picture1.png?450 |}} | ||
| + | Https has two important security roles. | ||
| + | * It encripts the data. The request and the response will be both encripted on sending and decripted when read. | ||
| + | * The server is always asked for a certificate of authenticity before it is asked for a page. This prevents against stolen data through false web pages. | ||
| + | What does a query consist of? It will always look like this: http://address:[port]URL?querystring. | ||
| + | The port can be absent, in which case it will be 80 for http and 443 for https. It has to be specified if it is not one the two. | ||
| + | Concerning the URL, when it is not written, the default will be // / //. | ||
| + | The available methods in http are : get, post, put and delete. The main ones being the first two. | ||
| + | * Get method needs no upload body. It will only ask for data from the server and send only the headers, the address, the URL. | ||
| + | * Post sends important data to the server, which will be uploaded. Post has the role of modifying data on the server. The response of both these methods is the page and any additional information that was requested. | ||
| + | * Put is similar to post, only that in the semantic way, this method only creates an object on the server. | ||
| + | * Delete also plays a semantic part. It needs no upload body and it delets objects on the server. The same action can be performed however using get. | ||
| - | By using the dashboard, you can drag-and-drop widgets and display information into them. It has a debugging purpose and it supports several widgets that can control your device or display data. | + | On one server there can be more than one websites, which means that, if the host is not specified in the request, the response may not be the one the browser expects. |
| - | ===== Buttons and sliders ===== | + | Also, the response may have more than text. Any additional feature: images, JavaScript objects and so on will need a new request, so the process will be slowed down. |
| + | ===== Webservers on gadgets using Wyliodrin===== | ||
| - | The **Two state button** is basically an on - off switch. Its properties are //the signal// that it needs to send out (it should be lower-case and without spaces) and the possibility to transform it into a **push button**. You can set a color for it, which is going to show in the “on” state. | + | The boards are non powerful computers. With wyliodrin there is no need to intall any software or make any configuration on the boards to run a webserver on them. |
| - | When you press it, it //sends 1 (ON)// and by pressing it again, it //sends 0 (OFF)//. | + | |
| - | Inside the program you need to have the “receive signal” node in order to get the signal from the button. | + | |
| - | **Push button** is the same widget, it just has the “Push” parameter selected. When you press it, it sends 1, it //waits an amount of time// and then sends 0. | + | |
| - | ==== Slider ==== | + | To create a webserver in wyliodrin you will need a // web// node. The simplest way to use a web page in this particular way is to send static files. In the project files, create a new folder // static//. Everything inside it will be sent back to the browser by the server, regardless of the fact that they are html, Java Script or CSS files. Images can be added as well, but they will definetely make the process slower. |
| - | Its properties are //the signal//, //its color//, //minimum and maximum value// and //the step//. Each time you move the slider, it sends its new value to the program. | + | There are other ways of adding an image. For example by using a storage system and including the images from there. This method will solve speed and memory issues. |
| - | You can send a signal back to the slider/ button in order to change its value. | + | |
| - | You can add more sliders/ buttons with the same properties. | + | |
| - | ===== Graphs ===== | + | The //web node//: The route option is actually the URL. The webserver will be active when it stumbles upon the specified route. Afterwords you choose the method, and write the port to setup the server. This port will only be used once, in the beginning. \\ |
| + | {{ :iot2015:courses:picture4.png?300 |}}\\ | ||
| - | They are replacing the printing function on the console. There are many types of graphs. | + | The payload goes either in the query string for the get method or in the upload data for post. The message is built on this payload, on two mandatory variables: // res// which stands for the response and //req// which is the request. Without the last two, the server won't be able to provide a response. \\ |
| + | {{ :iot2015:courses:picture02.png?400 |}} | ||
| - | ==== Line ==== | + | The //web response// node: The message received by this node comes from one web node. |
| + | For a web response the simplet way is to make a redirection. Which means, in the redirect field, you can write the path to one of the static files and the browser will be sent to this page. | ||
| + | On top of these, you will need the board's IP address which might not be public unless it is in the same network with the web server. \\ | ||
| + | {{ :iot2015:courses:picture5.png?300| }}\\ | ||
| + | {{ :iot2015:courses:picture3.png?150 |}}\\ | ||
| - | {{ :iot:courses:line.png?500 |}} | + | As a solution, IOT servers have a public adrdress. The port for these servers can be either 80 for http or 443 for https. |
| + | The user accesses the public page, through the IOT server which is connected to Wyliodrin as well as the board. Now the problem with the board and the web being in the same network is solved as both can communicate with Wyliodrin. | ||
| - | It is the most complex one, you can display more than 1 signal on the graph and you can choose a color for each of them. The graph has a name, you can display the legend or choose to have fixed axes (by default it will have //relative axes//). For logarithmic sensors, you can use the corresponding axes, which will display the logarithm of the value received. It can be a time or a point series. | + | //Web templates//: Just as for the static files, you will need a // templates // folder. This time, when you use the node, you don't need the whole path. You can only write the name of the file in the templates folder. What does the node do? It processes the response, meaning it loads the values plus the payload in it and sends it back to the browser. The values need to be in between two sets of curly brackets // {{}}//. Note that the values won't update unless the page is reloaded. \\ |
| - | The time series have on the x-axis the time stamp, so if you need to plot an array, you need to uncheck the option and configure it yourself depending on what is needed. | + | {{ :iot2015:courses:picture7.png?300| }} \\ |
| - | It also has a minimum and maximum value. \\ There is another feature which shows the actual points received by the signal, meaning the points which create the line in the graph. This feature is called //show points// and by default the graph will display 10 point and then shift the graph to the right. This option can also be modified. | + | {{ :iot2015:courses:picture6.png?200 |}} |
| + | ==== Web services ==== | ||
| + | A long time ago, the web services were more complicated. Now the application only requests the web server for the data, and it is the browser's job to rearrange it so that it is in the right format for the application. | ||
| - | ==== Step Line ==== | + | How to implement it into a Wyliodrin application? |
| + | Using a simple web response and web server node, you send a static page to the user and each time you make a query, instead of a template, you use a web response node and send the payload to the browser, which can be a number, an object or anything else. | ||
| - | {{ :iot:courses:step-line.png?500 |}} | + | ===== JQuery ===== |
| + | There is a library called JQuery, based on JavScript, thus available in any browser, which can make function calls to the server. | ||
| - | It is adviseble for digital signals, for example to sample a clock or a button. It has the same properties as the line. | + | //Case study// : You have the following situation: you change the payload into a variable which stores values from a sensor. You want this variable to be shown in your web page. |
| + | Practically, when an API gets called, what you will do, will be to make a get request to the server using the web address that you want with the URL // /sensor //. The web page will send values that you will store in a variable in your html file. | ||
| - | When the line is horizontal, it means the signal has either the same value, or it cannot be determined, and so the graphic can suppose the value did not change for that time interval. | + | ===== Web sockets ===== |
| + | A web socket is based on the http or https protocol. | ||
| + | It builds a connection between the browser and the server, so that either one can send data. When the browser makes a request, the server recongnises the socket and doesn't close the connection. The two partie send the packages they need to send. If the server does not know how to work with sockets, the socket io will go back to quering. | ||
| + | ===== AngularJS ===== | ||
| - | ==== Spline Line ==== | + | AngularJS is a library through which you can build browser applications. |
| - | + | In the next example, every web node will create a new socket and serve a static web page. If you include in the respponse a variable, and this variable changes, wyliodrin controller will be notified every time this kind of novelty appears and AngularJS will replace the old value of the variable with the new one, creating a dynamic web page. | |
| - | {{ :iot:courses:spline-line.png?500 |}} | + | {{:iot2015:courses:picture01.png?200 |}} |
| - | + | {{ :iot2015:courses:picture02.png?400 |}} | |
| - | The spline line is a normal line, but the interpolation is not a straight line between two points, it is a **Bézier curve**. With the spline line, it's not too clear where the sampling happened. It tries to give you an idea about how the signal might look like (fitted curve). Using the //show points// option might help in some cases. | + | {{ :iot2015:courses:picture03.png?500 |}} |
| - | == Points Maker == | + | |
| - | + | ||
| - | {{ :iot:courses:point-maker.png?500 |}} | + | |
| - | + | ||
| - | It displays only the points, showing the real signal (only where it was sampled). It can be logarithmic, time series or vector series. | + | |
| - | + | ||
| - | All the lines have a menu where you can choose to save the graph as a picture or to export the values from it. | + | |
| - | + | ||
| - | ==== Bar Graph ==== | + | |
| - | + | ||
| - | {{ :iot:courses:bar.png?500 |}} | + | |
| - | + | ||
| - | It is a widget which displays one value of the signal - it goes up or down depending on the last value it receives. It can display more signals, but only the last value for each one. The options are: fixed axes, minimum/maximum values, real time update - **Be careful when using it because you may block your browser**. | + | |
| - | + | ||
| - | Other widgets that work exactly like the bar: solid gauge, VU meter, thermometer. | + | |
| - | + | ||
| - | ==== Custom widget ==== | + | |
| - | + | ||
| - | Custom widget helps you to build your own widget, which Wyliodrin does not provide. It functions exactly like the bar, it displays one signal and only the last value of it. | + | |
| - | + | ||
| - | {{ :iot:courses:custem-widget.png?500 |}} | + | |
| - | + | ||
| - | It works like this: in the edit box you have more links of images, each on a different line. When the signal is 0, the widget will display the first image, if the signal is 1, the second image will come up. | + | |
| - | + | ||
| - | The picture needs to be HTTPS, otherwise the browser will block it! The simplest way to do it is to use **Dropbox**. You need to insert //dl// in the link instead of WWW, as it will download the file. | + | |
| - | + | ||
| - | ==== QR Code ==== | + | |
| - | + | ||
| - | {{ :iot:courses:qr.png?400 |}} | + | |
| - | + | ||
| - | When you start the program, you get a QR code and if you scan it, you can open the dashboard, interact with buttons/sliders, see the graphs, all on your mobile device. If you want to make a remote control for your device, put the buttons on the dashboard. | + | |
| - | + | ||
| - | <note>The console is also visible, but it is not writable.</note> | + | |
| - | + | ||
| - | ==== Sending Signals ==== | + | |
| - | + | ||
| - | In the streams programming you have a node called **Send signal** which will send by default time series (it attaches the time-stamp and sends it to the cloud). It can send a payload consisting of signal points (numbers) or an array. | + | |
| - | + | ||
| - | {{ :iot:courses:sendsig.png?200 |}} | + | |
| - | + | ||
| - | If it is a //number//, the send signal node will check if it has an x component, decide that it is indeed a point (not a time-series). Also, you need to have a graph which is configured so that is doesn't already have the x as a time series. You also have a flag component used mostly for debugging, where you can a write a text which will be shown on the graph. | + | |
| - | If the payload is an //array// it will send x,y points. For each element in the array it will consider x being its position. It is useful for FFT. | + | |
| - | + | ||
| - | If you have a number and you want to send the signal with an x component, instead of writing a function, you can use this block. | + | |
| - | + | ||
| - | {{ :iot:courses:setx.png?200 |}} | + | |
| - | + | ||
| - | This block is going to set the x value in the message to a value from the global context (in this example //some_dat_horizontal//). | + | |
| - | + | ||
| - | ==== The Octave Node ==== | + | |
| - | + | ||
| - | {{ :iot:courses:octave2.png?400 |}} | + | |
| - | + | ||
| - | It is for signal processing and it consists of a function where you can write octave code. The variable **msg** is the message that you receive. When the code ends, this variable is passed back into JavaScript. If the code is empty, it gets back the initial input. | + | |
| - | This node works only on IoT servers, not on boards, because they are slow and not all of them support Octave. | + | |
