Esc 209 slides-doin

Web of Things: HTML5 for resource constrained Embedded Systems

Tuesday, April 23, 13

Design West 2013

Web of Things: HTML5 for resource constrained Embedded Systems

Jonny Doin, CEO -‐ GridVORTEXSergio Eduardo Alves de Paula, R&D Engineer


Embedded HTML5Objectives

This class is NOT a tutorial on HTML5, nor it is about Web Design.

It is about a design approach to implement a responsive dynamic Web Server in an Embedded System

The simple techniques shown would allow you to implement one this weekend, in your own project.


Embedded HTML5Agenda

• Which Embedded Systems?• Embedded Web Servers• The TCP/IP Stack• Socket Layer Backend• Dynamic Content Handling• SSE/JSON/AJAX• Some performance data


Embedded HTML5Which Embedded Systems ?

Currently, the class of “Embedded Systems” includes a wide range of systems:

• dedicated Linux machines, having Gigabytes of memory and powerful processors;

• medium sized microcontrollers with RTOS, having Megabytes of memory;

• small control oriented microcontrollers, with very limited memory and no operating system (bare-metal);



We focus on the smaller systems:

• Program memory ranging from 128KB to 2MB;• SRAM ranging from 32KB to 256KB;• Usually running with no operating systems, in a

‘bare-metal’ application;• Frequently found on Industrial instrumentation and

control applications;



Industrial bare-metal systems

• Often are connected to Fieldbus networks;• Need deterministic response to field events;• Usually are sensitive to increased response latency;• In recent years are connected to TCP/IP networks;• Integration with IT backend and M2M control;• Besides M2M, are required to support HMI clients

via web browsers;


Embedded HTML5Embedded Web Servers

Current systems are required to do much more than showing simple static text pages:

• Dynamic monitoring of sensor and process data;• Interact with the control process to send

commands;• Responsive and complex configuration interfaces;• Graphically plot process and sensor data;



This set of requirements is formidable, and traditionally required a LAMP stack (Linux, Apache, MySql, Perl/Python/PHP).

• The dynamic content usually relies on backend support (PHP / Server scripts / process database)

• Large RAM space dedicated to network buffers;• Responsive user interface demands process

bandwidth;



In a small embedded system, the toll of a fast web server can drain system resources.

• Available RAM is reduced for core data processing; • Most Embedded Web Servers allow limiting RAM

allocation, however:• Small allocated memory usually leads to

unresponsive interfaces;• Network buffers for each socket cannot be

eliminated;


Embedded HTML5The TCP/IP Stack

In this design we selected a hardware TCP/IP chip as the network interface.

• Eliminates network buffer RAM from main processor;• Dedicated hardware protocol, reduces processor

bandwidth for protocol datagrams;• handles network processing up to the socket layer;• reduced code footprint on main application;• simple implementation from the socket layer up;


Embedded HTML5Hardware-based TCP/IP

The location of the network interface in a separate chip brings other advantages:

• Separate processing environment;• Insulates core app from network protocol attacks;• Reduces threats from the network toxic environment;• Network interface can be reset without breaking the

app core;


Embedded HTML5Socket Layer Backend

The socket layer on the server side must implement the HTTP state machine.

• Parsing of HTTP requests;• Composition of HTTP frames to be sent;• Handlers for server sent events (SSE);• Handlers and parser for CGI commands;


Embedded HTML5Socket Layer Backend

Several NFR (non-functional requirements) are important in the implementation of the socket backend:

• Guarded buffers and overflow detection techniques;• Strict control of memory allocation;• Safe state machines;• Error detection and containment;• Failures should not reach the app core.


Embedded HTML5Dynamic Content Handling

Can be implemented in a number of ways:• Directly rendering the page, embedding the data in

the page description (printf):• Poor update rate (page refresh);• Needs the entire payload to be buffered before

transmission;• Fixed pages with placeholders for streaming data:• use CSS to format data;• use SSE to bind streaming data to fields;


Embedded HTML5Dynamic Content Handling

Using fixed pages for dynamic content has a number of advantages:

• All formatting and placement of the data fields are controlled by the page script, not by the server;

• Complete concern separation from the server and presentation layers;

• The payload length is always known when assembling the frame header, since the frames are always static;

• Fixed payloads allow “windowing” buffering;

• This can be done with less than 200bytes of page buffers per socket;


Embedded HTML5SSE - HTML5 Streaming Data

SSE (Server-Sent Events) is one of the new HTML5 features that is most appealing to embedded web servers.

• Allow a stream of server data to be sent to the page without continuous client request;

• Data update rate can be set individually by each stream;

• Can be implemented cleanly with event generators in the server;

• Data binding and parsing is simple when using JSON;


Embedded HTML5JSON - Javascript Object Notation

A simple text format for data interchange.

• Based on name/value pairs description;

• Is powerful while having simple formatting rules;

• can be applied to streaming data pairs;

• values are accessible by javascript in a natural manner;

• helps keeping server-side concerns generalized by having a standard formatting of data;

• can be completely abstracted by event generator descriptors;


Embedded HTML5XML HTTP Requests

Used to send commands and data from the client to the server.

• Simple standard parsing on the server side;

• When used with SSE cuts bandwidth needs by half, when compared to AJAX;

• When JSON is used, parsing is very straightforward;

• Javascript has total control over the user interface;


Embedded HTML5Putting it all together

Using SSE and XML HTTP Requests need coordination from the page script.

• SSE streams are continuous until stopped by the page script;

• While the SSE stream is playing, no data can be sent back to the server;

• The page script stops the SSE stream, sends XML HTTP Requests and starts the SSE stream again;

• Error detection and browser support detection must be done in the page script;


Embedded HTML5Some Performance Data

Simple web servers for dynamic content can be realized using HTML5 SSE, JSON and XML HTTP Requests. Successful use of these features results in fast and small servers.

• Multiple data stream updates with less than 100ms latency;

• RAM usage on the server side (for the web server) of less than 2KB;

• Server side code footprint of less than 5KB;

• Less than 500 lines of C code;

• Exception handling on the script side and on the server is simplified;


Design West 2013

THANK YOU

Jonny Doin -‐ GridVORTEX

[email protected]


mailto:[email protected]

mailto:[email protected]

Internet

Esc 209 slides-doin