Embedded Web Servers built around HTML5 SSE servers, with JSON streams for multiple data IDs are very efficient. We show a real implementation that uses less than 200 bytes per session, with a fast update rate and using less than half the bandwidth of a comparable HTML4 AJAX implementation.

1. Web of Things: HTML5 for resource constrained
Embedded Systems
Tuesday, April 23, 13

2. Design West 2013
Web of Things: HTML5 for
resource constrained
Embedded Systems
Jonny Doin, CEO -­‐ GridVORTEX
Sergio Eduardo Alves de Paula, R&D Engineer
Tuesday, April 23, 13

3. Embedded HTML5
Objectives
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.
Tuesday, April 23, 13

4. Embedded HTML5
Agenda
• Which Embedded Systems?
• Embedded Web Servers
• The TCP/IP Stack
• Socket Layer Backend
• Dynamic Content Handling
• SSE/JSON/AJAX
• Some performance data
Tuesday, April 23, 13

5. Embedded HTML5
Which 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);
Tuesday, April 23, 13

6. Embedded HTML5
Which Embedded Systems ?
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;
Tuesday, April 23, 13

7. Embedded HTML5
Which Embedded Systems ?
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;
Tuesday, April 23, 13

8. Embedded HTML5
Embedded 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;
Tuesday, April 23, 13

9. Embedded HTML5
Embedded Web Servers
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;
Tuesday, April 23, 13

10. Embedded HTML5
Embedded Web Servers
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;
Tuesday, April 23, 13

11. Embedded HTML5
The 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;
Tuesday, April 23, 13

12. Embedded HTML5
Hardware-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;
Tuesday, April 23, 13

13. Embedded HTML5
Socket 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;
Tuesday, April 23, 13

14. Embedded HTML5
Socket 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.
Tuesday, April 23, 13

15. Embedded HTML5
Dynamic 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;
Tuesday, April 23, 13

16. Embedded HTML5
Dynamic 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;
Tuesday, April 23, 13

17. Embedded HTML5
SSE - 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;
Tuesday, April 23, 13

18. Embedded HTML5
JSON - 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;
Tuesday, April 23, 13

19. Embedded HTML5
XML 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;
Tuesday, April 23, 13

20. Embedded HTML5
Putting 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;
Tuesday, April 23, 13

21. Embedded HTML5
Some 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;
Tuesday, April 23, 13

22. Design West 2013
THANK YOU
Jonny Doin -­‐ GridVORTEX
jonnydoin@gridvortex.com
Tuesday, April 23, 13