Differences
This shows you the differences between two versions of the page.
|
iotcluj:labs:07 [2016/07/14 11:55] ioana_maria.culic [Use HTML to create a web page] |
iotcluj:labs:07 [2016/07/14 12:42] (current) ioana_maria.culic [Exercises] |
||
|---|---|---|---|
| Line 49: | Line 49: | ||
| 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. | 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. | ||
| - | 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. | + | 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. |
| - | + | ||
| - | 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. | + | |
| The picture below shows a basic server which displays a random number. | The picture below shows a basic server which displays a random number. | ||
| Line 59: | Line 57: | ||
| What the server does is to generate a random number every one second and store it in the **random** variable. | What the server does is to generate a random number every one second and store it in the **random** variable. | ||
| - | The other stream of nodes sets the route to **/** and responds with a html template. The **template** node returns the html code which the **Web response** node will return to the client. | + | The other stream of nodes sets the route to / and responds with a html template. The **template** node returns the html code which the **Web response** node will return to the client. |
| The **template** note generates the following html page: | The **template** note generates the following html page: | ||
| {{ :iotcluj:labs:template.png?400 |}} | {{ :iotcluj:labs:template.png?400 |}} | ||
| - | Notice that the random variable is accessed and the structure {{ random }} will be replaced with the variable's value. | + | Notice that the random variable is accessed and the structure { { random } } will be replaced with the variable's value. |
| ==== Dynamic web pages ==== | ==== Dynamic web pages ==== | ||
| Line 80: | Line 78: | ||
| 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. | 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. | + | This time, the HTML page is described in the **web html** node. |
| - | + | ||
| - | 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. | 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. | 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). | + | 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. | 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. | ||
| Line 101: | Line 94: | ||
| - 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 and show to the user a static html page. If he requests anything else that that page, show him an error page. | ||
| - Build a web service that allow controlling the device pins. (Hint: without any html page, just write the links in the browser) | - Build a web service that allow controlling the device pins. (Hint: without any html page, just write the links in the browser) | ||
| - | - Write a web page to test the service. | + | - /pin?mode=read&pin=pin_number |
| + | - /pin?mode=write&pin=pin_number&value=value | ||
| + | - Extend the service for the Arduino pins also with /arduino/digital/pin and /arduino/analog/pin | ||
| + | - Write a web page to test the service. (Hint: for writing values use html forms with method GET, read about them) | ||
| - Write a web server that shows the user the temperature on each refresh. (Hint: use the template node) | - Write a web server that shows the user the temperature on each refresh. (Hint: use the template node) | ||
| - Write a web server that shows the user the temperature without refresh. (Hint: use the web html node) | - Write a web server that shows the user the temperature without refresh. (Hint: use the web html node) | ||
| - Add a select box to the page, so that the user can select what he wants to see: the temperature or the light. | - Add a select box to the page, so that the user can select what he wants to see: the temperature or the light. | ||
