Realm of Embedded Technology: Generic Web-Interface steps for Embedded Devices

In today's world any equipment is considered as fully automatized, if and only if it can be accessed from anywhere??

What anywhere means??

anywhere means ???[anywhere]

Thats funny ha ha ha..... Anywhere refer to any corner of world.

How it happen??

Its all about the interface we are providing from embedded device to real world. And that interface must support long distance accessibility. So, possibilities are -

1) UART - Not a long distance

2) Bluetooth - Not a long distance

3) GPRS/GSM - Yes, it does

4) Internet - Yes, it does.

So, the preferable is 3) & 4). But 4 is dominating over 3, as of terrain & network accessibility issue. So, here the discussion is all about "Accessibility of Embedded Hardware over internet".

What is needed for implementing this -

* The designer need to familiar with HTML, Javascript/php/python/cgi & many more, If Javascript

then get acquaint with node.js/jquery/Angular JS/AJax. These are some library & framework, All

this needed for web server development.

* The designer need to fully familiar with Embedded environment - OS used in MCU like Linux,

Windows, Android or Embedded RTOS which should support HTTP protocol &

TCP/IP protocol in the library.

* The method of accessing the h/w of embedded controller using C/C++ or any other relevant

language.

* Router with port forwarding functionality or use Yaler.net (accessibility of device from web it take

care of firewall restriction of router).

So, lets start our discussion only for web server design for Embedded System using HTML & Javascript. However, Javascript is starting choice for beginner, as you grow experienced in embedded its quite difficult to stick to Javascript as embedded system need to be dependable & predictable. But there is no way to guarantee correct timing and response times with code that runs on an interpreter. And also memory management is big constraint with embedded system. So, for more complex or professional development you may need to switch on to some other option.

Javascript can use the power of the web browser to create an experience that the device itself could never produce. To be able serve anything, at least two conditions must be met:

1) System will need to have some sort of network connection

2) System must able to accept and respond to HTTP requests over the network connection, The HTTP request can, of course, be proximate by some other system.

Starting on an Embedded System -

Lets consider we have a “xyz” microcontroller based board. And an LED is connected to port 2.19 of the controller. We have a generic program written in c/c++ to control led on/off condition named as led_blinky.c/led_blinky.cpp. Lets consider below scenario -

We'hv a linux based OS on our controller where everything is considered as file. So, in this case our program led_blinky is converted into an executable lets using command $(CC) "led_blink.c/.cpp" -o "led_blinky_executable" [Where CC is the cross compiler may be gcc or g++]. Lets keep this executable in a specific file loction say "/home/program/". For running this use command prompt and cd to this location then turn on LED by executing "./led_blinky_executable 1" & for turning off execute "./led_blinky_executable 0".
We have a plane embedded system with RTOS. Here static web page can be created using HTML and served to client on request. And a dynamic web page need to be created using CGI (Comon gateway interface) script using C or C++. Refer Tutorialspoint. The entire process here has to include - checking request from client, doing operation as per the request and all this has to embedded together and keep on running unlike linux, which run on demand.

Types of Web Pages used -

"A static page" is the page developed using HTML. This serve the role of crating all kind of graphical interface. It might be in the form of button, checkbox, radiobutton, text area, scroll bar, graph, window etc.
"A Dynamic page" is the page actually it is known as a script. This is known as script since it is designed to run on special run-time environment and it automate multiple steps, like taking input from web page widget (These inputs known as forms in HTML) and perform particular action related to hardware. So, this dynamic page is the most important in dealing with embedded hardware. For scenario1 builting dynamic page is bit easier task, we simply have to include some javascript library like node.js/jquery/Angular JS/AJax. But for scenario2 we need to develop a CGI script in c/c++/python (python is not best choice for embedded RTOS) as it needed for handling GET & POST methods.

So, our furthur discussion is on Javascript and its library implementation for embedded hardware interface. Lets consider an use-case of controlling LED connected to one of the IO pin. Below are the step wise explanation -

Create a static web page. It is fairly simpler job using HTML & Javascript. Refer some artical mentioned below and you will through.

<html>

<head>

<title>My LED Blinker Site</title>

<script language="javascript" src="..." type="text/javascript">

----

</script>

</head>

<body>





<form>

<input type="radio" name="led_control" value="led_On"> led_On

<input type="radio" name="led_control" value="led_Off"> led_Off

</form>

</body>

</html>

Create a scripting page.

*Prerequisite - Make sure that npm, nodejs, socket.io, some web server like apache should

be installed in your system.
1. To control the LED with Javascript, we will need to use a librarry built for Node.js called "socket.io". This can be checked using "npm info socket.io version". Refer Tutorialspoint socket.io tutorial for detail using of socket.io. This simply creates socket for listening communication from web-browser.
2. Then one need to include express framework which is used for handling get & post methods needed for communication between Server and host.
3. Then create Server.js script which can emit & handle events from web browser to web server and vice-versa.