Build your own online real-time acquisition system – HTML5 application in embedded systems

* Have been published in the 《无线电》 magazine IV

Author : Jerry, Allen
Summary :
The data collection methods applied in the past to get rid of the traditional embedded system , using the latest feature of HTML5 Canvas API and WebSocket API to achieve a real-time online data collection function. Enhanced the performance and user experience of embedded acquisition systems. Provide a reference for embedded developer.

Nowadays, the rapid development of the Internet of things in all aspects , more and more end devices connected to the network , remote interaction and control; widely use of different kinds of sensors , making more and more distributed data nodes . These interactive data itself is in the form of original information , we need to collect these data , analysis, processing , feedback, its data validity, accuracy , and timeliness to ensure working efficiency, quality and value.
Here, we implemented an online collection system based on W5500, and for introducing a fresh element – HTML5. With this latest Web language , introducing a more real-time , efficient online real-time acquisition system . I believe that with HTML5 in the embedded space will be more and more popular, enhance the value of industrial performance and advantages .
Before the introduction of this real-time acquisition system , let’s first simply to understand what is HTML5.
The difference between HTML5 and HTML
HTML is designed as a markup language to create Web pages so that it can render in a web browser.
HTML5 is the next revision of HTML. The generalized HTML5, includes new and enhanced HTML, CSS3, JavaScript API and a technical portfolio of events .

Figure 1: html5 logo

The following new enhancements to HTML HTML5 representing the main features:

• improve optimization page elements
• Form
• Using the <canvas> element
• WebSocket
• Local Storage
• Information transfer between page
• Video and Audio (timered media player)
• Location (Communication APIs)
• Micro Data

CANVAS API and WEB SOCKET API
In fact, the realization of the online real-time acquisition system is benifits from the two new HTML5 API functions: Canvas and WebSocket.
Canvas was initially introduced by Apple for use inside their own Mac OS X WebKit component in 2004. Canvas consists of a drawable region defined in HTML code with height and width attributes. JavaScript code may access the area through a full set of drawing functions similar to those of other common 2D APIs, thus allowing for dynamically generated graphics. Some anticipated uses of canvas include building graphs, animations, games, and image composition.

WebSocket is designed to be implemented in web browsers and web servers, but it can be used by any client or server application. The WebSocket Protocol is an independent TCP-based protocol. Its only relationship to HTTP is that its handshake is interpreted by HTTP servers as an Upgrade request.

Through the flexible application these two API functions, we achieved through HTTP Server,  real-time receiving data in and dynamic simulation functionality on the Web page.

Online real-time acquisition system demonstration
1 System Environment
a) SCM: STM32F103RC, 256K bytes Flash, 48K bytes SRAM, 2K bytes of EEPROM
b) Ethernet controller: W5500, SPI interface is connected to the microcontroller
c) Power supply: USB powered
2 development tools:. IAR for ARM v5.41, which is used by our engineering version. If you are using a different version of IAR, please make adjustments to the STM libraries.
Before looking at the code, we first look at the entire program flow, as shown below. After the hardware initialization, the network parameters should be configured, which is to be under the local network configuration to set the IP address of W5500 and other network parameters to ensure the W5500 can be networked; This program, we will use two socket of W5500, one is used to create the Http Server, this inputting the IP address in the browser, we are able to remotely access the hardware; another one is to create a Websocket Server, establish a communication link with the web client, used to transmit our temperature and humidity data.

Figure 2: Hardware Flow Chart

When we visit the IP of the device, will send out http request.
W5500 will send the html5 webpage information send to the browser.
Then the browser shows temperature and humidity of the detection device via the browser interface. In the code of the webpage, the browser will connect the W5500 websocket server, after the handshaking, the data channel will be established. So, the sensor device can send the temperature and humidity information towards the browser client. The browser will use the data received to plot the temperature and humidity into dots and graph.
Below is the websocket and Canvas code, the websocket handshake and data frame of W5500; the sensor program introduction.

Figure 3: Webpage UI

3. Canvas and Websocket
In the browser client, we use the html5 Canvas drawing tools and WebSocket API to build our web interface. When a new temperature and humidity data comes in Canvas coordinate system will plot the value, with the increase in the number of acquisitions of multiple data sample, you can see the curve. Web applications as follows:
1) create a page and canvas with the tag of style and body
2) drawing axes, adding title; establish WebSocket connection
3) new data arrives, drawing dots and lines
The following describes how to create a canvas and the drawing functions of code using:
1) Create a 600×400 canvas in pixels

 <canvasid=‘graph’width=’600′height=’400′></canvas>

2) define of the canvas border width, color, and size of the margins.

#graph {

border: 1px solid #03F;

margin:0 40px 0 80px;

}

3) in order to draw on the canvas in  JavaScript, first need to get the environment through the id of the target canvas. Code needs to get through the id to get the canvas element, then using method of getContex in this element to get its reference to a two-dimensional drawing environment.

canvas=document.getElementById(‘graph’);

context=canvas.getContext(’2d’);

4) Draw a line segment

context.lineWidth=2;//set the line width

context.strokeStyle=‘#999′;// set the line style

context.moveTo(x1,y1);// Move to starting point

context.lineTo(x2,y2);// Create a line path

context.stroke();// Draw out the line

5) Draw a circle

context.fillStyle=‘#000′;//set the fill style

context.beginPath();

context.arc(x,y,2,0,Math.PI*2,true);//Draw a circle of radius 2 at coordinates (x, y)

context.closePath();

context.fill();// fill the circle

6) Write the title text at the specified location

context.fillText(text,x,y,maxWidth);

Use a combination of the above functions can draw the following diagram; If you think this is not dazzle, html5 Canvas also provides a gradient color, rotation, illustrations and other functions designed to play your hands to create their own front-end interface bar.

Figure 4: Canvas sample graph

Then we introduce the WebSocket using html5 and related functions
1) To create a websocket connection, the code you need to create a WebSocket interface instance, input the IP at the URL address, sensorWebSocket object will attempt to listen to the corresponding service of  the URL.

varwsUri=‘ws:192.168.10.111:1818′;

sensorWebSocket=newWebSocket(wsUri);

2) Register events and links to the appropriate handler for the event, for example, in the browser page receives data from the server side, onmessage triggering event, and then call the onMessage function, the code we registered onopen, onmessage, onclose and onerror four events

sensorWebSocket.onmessage=function(evt){onMessage(evt)};

3) message processing function, the hardware we will collect temperature and humidity data using ‘.’ as separator; At  the browser side, after receiving the data, using the string split function of temperature and humidity data partitioning, stored the data into an array object. After the code is to show the number into the coordinate values ​​displayed on the canvas, not repeat them here.

functiononMessage(evt){

vararrayTH=new Array(2);

arrayTH=evt.data.split(‘.’);

……

}

4) close websocket connection

sensorWebSocket.close();

How kind, websocket it is very simple to use, with this tool, you can connect, receive and send messages to a remote server, which is useful in two-way communications, especially in the server needs to take the initiative to send a message to the browser page.
4. Web Socket handshake and data frames
After the server is created socket, first to complete the handshake with the client to start data communication, then the handshake procedure listed in how to achieve it, look under the handshake process:
Table 1 handshake process

Client code has been described above, the following is the code for the hardware of the server 1 & 2:

#define WS_SERVER_PORT  1818//define the monitoring port number

socket(s,Sn_MR_TCP, WS_SERVER_PORT,0×20);//establish socket in W5500

listen(s);//start listen, s is the socket id，in this example it is 2

Below is the network information for W5500，the IP address is the program listening address of the websocket client

uint8 mac[6]={0×00,0×08,0xdc,0×11,0×11,0×11};

uint8 lip[4]={192,168,10,111};

uint8 sub[4]={255,255,255,0};

uint8gw[4]={192,168,10,1};

setSHAR(mac);

setSUBR(sub);

setGAR(gw);

setSIPR(lip);

The code of the 5, 6 and 7 part codes

charsec_ws_key[32]={0×00,};

characcept_key[32]={0×00,};

//get Sec-WebSocket-Key:

if(strstr((charconst*)wsRxBuf,“Sec-WebSocket-Key: “))

{

mid((char*)wsRxBuf,“Sec-WebSocket-Key: “,“\r\n”,sec_ws_key);//get sec_key

calc_accept_key(sec_ws_key,accept_key);//calculate the key

sprintf((char*)wsTxBuf,“HTTP/1.1 101 SwitchingProtocols\r\nUpgrade: WebSocket\r\nConnection:Upgrade\r\nSec-WebSocket-Accept: %s\r\n\r\n”,accept_key);//estibush handshake

send(s,wsTxBuf,strlen((char*)wsTxBuf));//send to client side

}

handshaked=1;

This may seem a little abstract, we look at the actual packets of it, on top of a red font for the handshake browser page request, Sec-websoket-Key as soon as we intercepted sec_key, behind blue font server handshake Reply after Sec-websoket-Accept to accept_key we encoded. Is it clear?

Figure 5: Handshake capture information

After the handshake is successful, the device side can be sent at regular intervals to collect temperature and humidity data to the browser page. WebSocket protocol packets is very lightweight, below is the packet frame format description:

Figure 6: WebSocket data frame format

The above figure is the official block diagram, the first byte is FIN, followed by three are RSV1 to 3. RSV is a reserved space , filled with zeros , then the first four FIN only need to set up the first byte. Then the next four is stored opcode values ​​, explain opcode defined load data. FIN is used to indicate the last fragment of the message , if there is only one message, the FIN is 1 ; Here we use the opcode define the data is text -0×1, this is the first word of binary 1000001 (0×81), the first one is the FIN value , the last one is the value of the opcode .
Followed by a second byte of data , which consists of one of the MASK and 7 of PayloadLen composition data MASK identify whether the data frame using a mask , PayloadLen indicates the length of the data portion. But PayloadLen is only seven in length, and replaced if only unsigned integer values ​​from 0 to 127 , of course, such a small value can not describe the larger data, so the data length specified when the time is less than or equal to 125 , as it was described in the data length If this value is 126 , then when the two bytes to store the store data length is 127 if eight bytes used to store the data later in length . Where temperature and humidity data only 5 bytes every time we send , and does not use a mask , so the configuration is 0×05.
Then, followed the above chart is MaskingKey, which used four bytes, stored mask of the real part. But when the MASK is set to 1 only when the existence of the data, otherwise it does not use the data of the mask .
Finally, the data part , if the mask is present, then all the data needs to be done once XOR mask . If the mask does not exist , then the back of the data can be used directly.
Look at our code sends data is how to achieve it:

wsTxBuf[0]=0×81;

wsTxBuf[1]=0×05;

wsTxBuf[2]= Temp/10+0×30;

wsTxBuf[3]= Temp%10+0×30;

wsTxBuf[1]=0x2E;//分隔符‘.’

wsTxBuf[2]=Humi/10+0×30;

wsTxBuf[3]= Humi%10+0×30;

send(s,wsTxBuf,strlen((char*)wsTxBuf));

Is the code very easy?!

5 Data Collection
Here briefly explain the data collection process .
Our choices are the temperature and humidity sensors DHT11, real-time collection and upload the indoor temperature and humidity data. DHT11  is connected with the microcontroller with W5500, it requires only a single-chip communication I / O ports, it is very easy to use.
For the details DHT11 connection with the microcontroller and related debugging will not explained in detail here. You may search for relevant information in the web.

With HTML5 continues to mature, it brings more than just a Web revolution in the PC environment. For embedded field, it can also lead to better user experience and product performance. Of course, we still need the help of the W5500 Ethernet chip. Its full hardware TCP/IP protocol stack is quite valuable not only greatly reduce the embedded resources, but also saves a lot of development steps and difficulty, thereby allowing us to spare more resources and effort to achieve a more exciting Web features.
If you’re interested, please start making your own online real-time acquisition system soon!!

Complete program code can be downloaded here.