Differences

This shows you the differences between two versions of the page.

Link to this comparison view

iot:courses:05 [2015/07/20 12:03]
ioana_maria.culic
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>​
-<​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>+  <​center>​ 
 +    ​<iframe width="​640" height="​360" ​src="https://www.youtube.com/embed/YGeLUTJpGa4?​ecver=1" ​frameborder="0" ​allowfullscreen></iframe> 
 +  ​</center>
 </​html>​ </​html>​
  
-{{ :​iot:​courses:​dashboard.png?​500 |}} +<​html>​ 
- +<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>​ <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><​href="​https://​www.slideshare.net/alexandruradovici"​ target="​_blank">​Alexandru Radovici<​/a></strong> </div> 
-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. +</html>
- +
-=== Buttons and sliders === +
- +
-**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 it a color which is going to show in the “on” state. +
-When you press it, it //sends 1 (ON)// and if you press it again, it //sends 0 (OFF)//.  +
-Inside the program you need to  have the \textbf(“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 it sends 0. +
- +
-== Slider ​== +
-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.  +
-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 ===  +
- +
-They are replacing the printing function on the console. There are many types of graphs. +
- +
-== Line == +
- +
-{{ :iot:courses:line.png?​500 |}} +
- +
-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 be relative axes). For logarithmic sensors you can use the logarithmic axes that will display the logarithm of the value received. It can be a time or a point series. +
-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. +
-It also has 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 graphThis 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.  +
- +
-== Step Line == +
- +
-{{ :​iot:​courses:​step-line.png?​500 |}} +
- +
-It is good for digital signals. For example to sample a clock or a button. It has the same properties as the line.  +
- +
-The period when the signal is horizontal, you don't know the exact value of the signal, you can just suppose it stays fixed. +
- +
-== Spline Line == +
- +
-{{ :​iot:​courses:​spline-line.png?​500 |}} +
- +
-The spline line is a normal line but the interpolation is not straight line between two points, it is **Bézier curve**At the spline line is not very clear where the sampling happenedIt 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. +
-== 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, and for each signal it displays the last value. 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 one 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 imageseach on a different lineWhen the signal ​is 0, the widget will display ​the first imageif the signal ​is 1, the second image will come up+This course explains what a web server is, how it works, ​protocols used in web programming and gives examples ​on building and implementing ​web server, of creating dynamic web pagesIt 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 protocola 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 interfacesit 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
  
-The picture needs to be HTTPSotherwise ​the browser will block itThe simplest way to do it is to use **Dropbox**You need to insert ​//dl// in the link instead ​of WWWas it will download ​the file.+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 statuswhich 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 postonly 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.
  
-== QR Code ==+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. ​
  
-{{ :​iot:​courses:qr.png?400 |}}+Also, the response may have more than text. Any additional featureimages, JavaScript objects and so on will need a new request, so the process will be slowed down 
 +===== Webservers on gadgets using Wyliodrin=====
  
-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 deviceIf you want to make a remote control for your device put the buttons ​on the dashboard+The boards are non powerful computersWith wyliodrin there is no need to intall any software or make any configuration on the boards to run webserver ​on them
  
-<​note>​The console ​is also visiblebut it is not writable.</​note>​+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 filescreate 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.  
 +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.
  
-== Sending Signals ==+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 |}}\\
  
-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 payload consisting of signal points (numbers) or an array.+ 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 ​response. \\ 
 +{{ :​iot2015:​courses:​picture02.png?400 |}}
  
-{{ :iot:courses:sendsig.png?200 |}}+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 |}}\\
  
-If it is //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 seriesYou also have a flag component used mostly ​for debugging, where you can a write a text which will be shown on the graph.  +As solutionIOT servers ​have a public adrdressThe port for these servers ​can be either 80 for http or 443 for https
-If the payload ​is an //array// it will send x y pointsFor each element in the array it will consider x being its position ​in it. It is useful for FFT.+The user accesses ​the public page, through the IOT server which is connected to Wyliodrin as well as the boardNow the problem with the board and the web being in the same network ​is solved as both can communicate with Wyliodrin.
  
-If you have number and you want to send the signal with an x componentinstead of writing a function ​you can use this block.+//Web templates//:​ Just as for the static files, ​you will need // 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. \\ 
 +{{ :​iot2015:​courses:​picture7.png?​300| }} \\ 
 +{{ :​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
  
-{{ :​iot:​courses:​setx.png?200 |}}+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. 
  
-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//​).+===== JQuery ===== 
 +There is a library called JQuery, based on JavScript, thus available ​in any browser, which can make function calls to the server.
  
-=== The Octave Node ===+//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. 
  
-{{ :​iot:​courses:​octave2.png?400 |}}+===== 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 =====
  
-It is for signal processing and it consists of function where you can write octave codeThe variable **msg** is the message that you receivedWhen the code ends, this variable ​is passed back into JavaScript. If the code is empty it gets back the initial input+AngularJS ​is a library through which you can build browser applications 
-This node works only on IoT servers, not on boards because they are slow and not all of them support octave.+In the next example, every web node will create a new socket and serve a static web pageIf you include in the respponse a variableand 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.  
 +{{:​iot2015:​courses:​picture01.png?​200 |}} 
 +{{ :​iot2015:​courses:​picture02.png?​400 |}} 
 +{{ :​iot2015:​courses:​picture03.png?500 |}}
iot/courses/05.1437383020.txt.gz · Last modified: 2015/07/20 12:03 by ioana_maria.culic
CC Attribution-Share Alike 3.0 Unported
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0