Web Based Embedded Data Monitor

Post by **Benj** » Mon Dec 22, 2008 10:28 am

The Internet is one of todayβ€™s most valuable tools for sharing and transferring data around the globe. It is used by just about everyone for a million different reasons. One aspect of the Internet that most people avoid is web hosting. It is a little known fact that Internet pages can be hosted from your home computer for free using your standard Internet connection. A few Internet providers do not like you doing this but as long as you do not exploit the privilege then they should not have any reason to complain. Here is a little guide on how to configure and share websites from your home PC.

http://www.technospot.net/blogs/host-a- ... r-home-pc/

We are going to ignore this and instead get an Embedded system online by using the same port forwarding principals and an EB023 Internet E-Block. As there are a lot of different ISPs, routers and other small differences that could potentially cause technical problems we will not provide support to get this working for you. However saying this the method should work as is on most systems without too much effort. Remember if you get stuck Google is your best friend.

Here is a large list of common household routers with information on how to configure the port forwarding correctly to allow your embedded system to be seen from the Internet.

http://portforward.com/routers.htm

For a demonstration we have created a demo application using the EB023 Internet E-Block combined with an analogue sensor. The EB023 was programmed via the Flowcode Webserver component and the program was based on the normal web server example available from our website. Simply configure the IP address of the EB023 board to sit on your home network and then configure your Internet router to forward internet page requests on port 80 to the IP of the EB023 and your ready to go. You could even go online and get a domain name that forwards the clients directly to the embedded system at your home so you donβ€™t have to remember IP addresses. These domain names can be purchased or are available for free using services such as NO-IP.

The Flowcode component is capable of generating standard HTML as well as client side Javascript code. Using Javascript I have created two functions, one to refresh the web page every 2 seconds and one to detect if the temperature is above a threshold value. Depending on the temperature variable we get the following web pages shown below: One shows the temperature variable within the threshold and the other shows the variable outside the threshold. Remember Javascript runs on the client machine therefore less work for your embedded processor.

Here is my webpage code, It includes all of the Javascript functions and styles to allow for the different text colours and sizes shown above.

Code: Select all

<html>
<head>
<title>Embedded Temperature Monitor</title>

<script type="text/javascript">

function reFresh()
{
  location.reload(true)
}

window.setInterval("reFresh()",1000);

function checkTemp()
{
  var temp = %BOO1%;
  if(temp > 100)
  {
	document.write('<span class=\\"style5\\"><b>OVER TEMPERATURE!!</b></span>');
  }
  else
  {
	document.write('<span class=\\"style4\\"><b>OK</b></span>');
  }
}

</script>

<style type="text/css">
.style1 {
	font-size: xx-large;
	font-weight: bold;
	color: #0000FF;
}
.style2 {font-size: medium}
.style3 {font-size: medium; font-weight: bold; color: #0000FF; }
.style4 {color: #00FF00}
.style5 {color: #FF0000}
</style>
</head>
<body>
<p align="center" class="style1">Embedded Temperature Monitor<br>
  <br>
  <span class="style2">System Status: <span class="style4">Online</span></span></p>
<p align="center" class="style3">Sytem Temperature: %BOO1% Β°C</p>
<p align="center" class="style3">Temperature Status: <script> checkTemp() </script></p>
</body>
</html>

Taking this further
Since the value returned by the sensor is a generic value of 0 to 255 to represent 0V to 5V we have several options to convert the data into a more standard temperature value. This can be processed on the microcontroller as a look up table or complex equasion, processed on the PC viewing the webpage by using a Javascript function or processed on a remote server using a scripting technology such as PHP or PERL.
If you are hosting a website from an embedded system anywhere in the world then you can use a scripting language such as PHP to take the page data and allow it to be included in a dynamic generated site. For example if you wanted to add the real time local sunlight level to your website.
Rather then using your embedded system to host a website or webpage you can instead use the Flowcode TCP/IP component to output UDP or TCP data that can be collected by your PHP or PERL server. This would cut down some of the overhead and allow much more data to be pumped through the systems.

rmr · Post by **rmr** » Mon Dec 22, 2008 10:06 pm

Thanks for some very good Ideas for an Data Monitor

I am seaching for something "the other way round". I want to switch some things at my home
from outside my Home with the Help of a EB-023-Webserver-Website.
(At home there is an Flowcode-PIC-Webserver with EB-023 Internet-Board)
(For Example: Im am at work. I look on my Website and see, that the temperature at home ist too high.
So I click on a Button "Fan on" ....and the Fan at home ist running.)

There is a Thread in the Forum, but it isn't continued since end of 2007 an the information inside
is not quite complete.

I Think there are a lot of users with a EB-023 who want to do similar things (and have the same Problems).
It would be kind to have som further Information on this theme (for example an example? )

Post by **Benj** » Wed Dec 24, 2008 12:41 pm

Hello

The reason there is not an example of this is that this is not an easy task.

The reasons this is not simple are as follows.

You could do the process with a basic form - Only you cant because forms and other html are client side eg the code is running on your internet browser. Same problem with Javascript.

The server can collect this code but only via a scripting language such as PHP which the embedded server is unable to run.

So to sum up you would have to use a webserver PC with scripting capabilities that then fed off TCP or UDP requests to your embedded system. Not an easy task.

A much easier way of doing what you require would be to send a UDP or TCP packet from a piece of software over the web and into your embedded host. This can probably be done with VB and maybe even PHP or HTML but I have not seen a example of this in practise.

A second way would be to use your home PC to accept the Web packet and then forward to the embedded system by means of USB or RS232 etc.

Post by **Benj** » Fri Mar 13, 2009 11:22 pm

Thinking about this again I have an idea about controlling your embedded application from the web.

In the C code file "Webserver_Code.c" find the function starting "char %a_GetHTMLReq(char ch)"

You could edit the page details so that if you visited different pages it controlled different things.

For example lets say you went to your "IP/page1.htm" this could toggle a light in the house every time you visited the page.

The code to edit would look like this. I have created a Flowcode byte variable called output that I then can output to a port somewhere in my main program loop.

Code: Select all

    %a_try_page_1:
  #ifdef %a_USE_PAGE1
    //try first page...
    for (i=0; i<name_length; i++)
    {
        if (rxpage[i] != %a_HTML_PAGE1[i])
        {
            goto %a_try_page_2;
        }
    }
    retval = 1;
    FCV_OUTPUT = (FCV_OUTPUT + 1) % 2;
    goto %a_page_found;
  #endif

This is the line I added to the code

Code: Select all

FCV_OUTPUT = (FCV_OUTPUT + 1) % 2;

This basically takes the value already stored in the variable "output" and adds one to it. The entire value is then given a modulus '%' of 2 (basically minuses 2 from the number until the number is smaller then 2) to toggle the variable between a state of 1 and 0.

output = (output(0) + 1) MOD 2 = 1
output = (output(1) + 1) MOD 2 = 0
output = (output(0) + 1) MOD 2 = 1
etc..

As a side not you can also do this in Flowcode calculation icons using the % or MOD operators.

This method is obviously not very secure so you could probably take it further by passing password or verification data in the address bar which must be validated before the variable is updated. This is the form information I mentioned earlier. Guess I should have taken a closer look at the C code before speaking. Therefore you should in theory be able to create a html form that passes say a username and or password from a text box input into the address bar after the page address.

Item 2 on this search page looks like a good solution.
http://www.boutell.com/newfaq/creating/scriptpass.html

You could even use the webserver to trigger other Flowcode components into action for example logging via RS232/USB/SD. Create a fresh Flowcode file and add the component and the component macro you wish to call from the webserver and then compile to C. Look inside the main routine for the component macro icon code you created and simply copy the function call into your webserver C file. Alternatively change a variable in the C code file and monitor this variable in your main loop to call the hardware macros of other components.

poilvert · Post by **poilvert** » Fri Jan 18, 2013 4:11 am

Hi,

Is there a new solution to control output with an EB023 and the webserver macro component ?
I need to control an output with a button or a checkbox in a webpage.

Thanks

Matrix user forums

Web Based Embedded Data Monitor

Please rate this article out of 5: (1 being the worst and 5 being the best)

Web Based Embedded Data Monitor

Re: Web Based Embedded Data Monitor

Re: Web Based Embedded Data Monitor

Re: Web Based Embedded Data Monitor

Re: Web Based Embedded Data Monitor