Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014

Aloha
Peculiarities of web interfaces for
resource constrained embedded systems
IoT connects the physical
world to the Internet
Hallo
Goddag
Shalom
Vitayu Salut
Ola Hello Cześć
Xin chào
Ciao!

HTTP
Peculiarities of web interfaces for
resource constrained embedded systems
WoT enables the physical world
to speak the same language
HTTP
HTTP
HTTP
HTTP HTTP
HTTP HTTP HTTP
HTTP
HTTP

Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
Outline
Introduction
Providing static content
Providing dynamic
content
Dynamic web interfaces
WoT things to be done

Burgeoning market
Global IoT market expected
to grow by more than
US$ 5,000,000,000,000
over the next six years.
IDC study, Worldwide and Regional Internet of Things (IoT)
2014 –2020 Forecast: A Virtuous Circle of Proven Value and
Demand

How to connect constrained
things?
●
Two mainstream architectures
 WS-*
➔ Based on WSDL, SOAP, XML...
➔ HTTP/HTTPU used for transport
 REST
➔ HTTP as application protocol
"The Web of Things: A Survey" by Deze Zeng, Song
Guo, and Zixue Cheng, The University of Aizu, Japan

HTTP
●
HTTP
 Major communication platform of the Internet
●
REST (REpresentational State Transfer) is the true
architecture of the Web
 One resource – one URI
 Resources separated from representation
➔ Human interfaces
➔ M2M communication
 Details: Roy Fielding's doctoral dissertation

Whats possible with WoT?
Embedded
HTTP
Sensor node
Cloud services
Web interface
Sensor node

Mashup Technology
●
Physical / Physical Mashup
 Interoperability between devices
 Highly distributed architecture
●
Physical / Virtual Mashup
 Integration of physical data into geographic
maps
 Augmented reality, e.g. Google glasses

Va bene!
We need to support HTTP.
But can we?

Traditional web servers are not designed
for embedded systems
●
Minimum requirements for embedded
Webservers
 CPU with network interface
 TCP/IP Stack with HTTP support
 Non-volatile storage for static web
content
 Some software for generating dynamic
content

Typical classes of embedded systems in 2014
Class CPU Memory OS Support Example TCP/IP
Support
Webserver
Support
A 32/64-bit,
several
100 MHz
Up to some GB
RAMand Flash
Running full
operating
system
Raspberry
Pi
Internal,
full stack
Direct
integration
via detached
process
B 8/32-bit, up
to a few
100 MHz
More than 32kB
RAMand 64kB
Flash
Running small
RTOS
Ethernut Internal,
reduced
stack
Direct
integration
via linked
library
C 8/32-bit, up
to a few
100 MHz
Fewkilobytes of
RAM/ Flash
Libraries Arduino External Directly
integrated in
application
code
D 8-bit, a few
MHz
Some hundred
bytes of RAM/
Flash or even less
Bare metal
only
8051,
ATtiny
External Indirect
integration

Open Source TCP/IP Stacks
Product Available ports Data RAM Code space License First
release
Latest
stable
Comment
CycloneTCP AVR32, AT91SAM3/4,
Coldfire, Kinetis,
LPC17XX, PIC32,
STM32F1-4, many more...
GPLv2 +
Commercial
02/2013 06/2014 Initially
commercial?
fNet Coldfire, Kinetis,
LPC17XX
LGPLv3 03/2009 06/2014 By Freescale
lwIP Too many to list here 10s of kB 40kB BSD 10/2002 12/2012 Easy to port to
new platforms
Nut/Net AVR/32, AT91SAM3/7/9,
Coldfire, Gameboy, LM3S,
LPC17XX, STM32L1/F1-4
10s of kB 30 to 120kB BSD 02/2001 12/2012 Part of Nut/OS,
may be difficult to
port
uIP 6502, AVR, CC2530x,
LM3S, MSP430, MC1322x,
STM32, many more...
few 100
bytes
4 to 5kB BSD 10/2001 Now part of
Contiki

support HTTP.
But how to get started?
Yes, we can

PNG
HTML
CSS

Read and parse
request, line by line
Determine content
length
while () {
tcpread(buffer);
if (strncmp(buffer, "GET"...
Locate requested
resource
for (i = 0; i < NFILES; i++) {
if (strcmp(aof[i].name, ...
len = sizeof(aof[i].content);
...
tcpwrite(aof[i].content);
...
Send response
header
Send content
tcpwrite("HTTP/1.1 200 OKrn");
tcpwrite("Content-Length: ");
tcpwrite(itoa(len));
...
const struct files {
char *name;
uint8_t content[];
} aof[] = {
{ "index.html",
{ '<', 'H', 'T', 'M'...
GET /index.html HTTP/1.1
HTTP/1.1 200 OK
Content-Length: 1872
If no file systemis available, it
can be imitated by a constant
array in Flash memory.

Nut/OS provides a tool named crurom, which converts
all files in a subdirectory to a C source file.
const char file1data[] PROGMEM = {
'<','H','T','M','L','>','<','H','E','A'...
'A','D','>','<','B','O','D','Y','>','<'...
'C','=','"','n','u','t','o','s','.','p'...
};
const char file1name[] PROGMEM = "index.html";
137,'P','N','G', 13, 10, 26, 10, 0...
};
const char file2name[] PROGMEM = "nutos.png";
'<','H','T','M','L','>','<','H','E','A'...
'A','D','>','<','B','O','D','Y','>','<'...
'C','=','"','n','u','t','o','s','.','p'...
};
const char file1name[] PROGMEM = "index.html";
137,'P','N','G', 13, 10, 26, 10, 0...
};
const char file2name[] PROGMEM = "nutos.png";C:ethernutnutappuhttpd_tiny> make burn
avr-gcc -c -I../include … httpd_tiny.c
crurom -r -ohtdocs.c htdocs
avr-gcc -c -I../include … htdocs.c
avr-gcc httpd_tiny.o htdocs.o -mmcu=...
avrdude -p m128 -c stk -U
flash:w:httpd_tiny.hex
…
Simply type 'make burn'...
...to upload new content.

File Systems
●
If available, use a real file system
 Single files can be replaced during runtime
e.g via FTP or HTTP upload
 Content can be placed on cheap external
memories (Flash, SD-cards)
●
C array method as a fallback
 Simple and robust
 In case of file system failures the device is able
to provide a minimal rescue interface

File Systems
●
Most file systems for resource constrained devices
are deeply integrated into the underlying OS and
difficult to port to other platforms
 Check file system support when selecting an OS
●
Portable Open Source projects
 FatFS at http://elm-chan.org
➔ Use with memory cards
 Coffee, part of Contiki-OS
➔ Use with Flash / EEPROM memory chips

Compression
●
Data compression saves memory space and bandwidth
●
Use of compressed image formats (jpeg, png) is today's
standard
 Consider UTF-8 characters and webfonts for pictograms
●
HTTP compression is not recommended for tiny systems
 On-the-fly compression requires too much CPU power
 Most browsers accept gzip-compressed documents, so it
may seem attractive to store static content in this format
 Problem: Browsers may not always accept it

...but
●
Syntax-aware text compressors may decrease
HTML or CSS code by 10 to 30%, even more when
applied to JavaScript
●
Example: https://htmlcompressor.com/

Fino a qui, tutto bene!
Static web pages are lousy!

Types of dynamic content
Server-side
scripting:
Values inserted
at document
generation
Client-side scripting:
Values dynamically
updated without
refreshing document

Providing dynamic content
Server-side
scripting:
Values inserted
at document
generation

Read and parse
Howto determine
the content length
in advance?
while () {
tcpread(buffer);
Detect URIs with
variable content
void SendIndex()
{
len = ?
...
tcpwrite("<HTML>rn");
tcpwrite(timestr);
Send response
header
Send static and
variable content
tcpwrite("HTTP/1.1 200 OK...
...
for (i = 0; i < NFUNCS; i++) {
if (strcmp(fnc[i].name, …
SendIndex();
...
…
HTTP/1.1 200 OK
Content-Length: ?
CGI way: Call a C function
instead of locating static
data.

●
First problem
 Calculating the content length in advance
often requires too much RAM space
●
Second problem
 Maintaining hard coded static content mixed
with variable content can become quite
painful

Content length problem
●
First solution
 Do not send content length header and close
connection after sending the last character
➔ Sometimes some browsers hang on open
connections
➔ Reconnections are costly on slow lines
(GSM/GPRS)
●
Second solution
 Implement chunked transfer encoding

Chunked Transfer Encoding
HTTP/1.1 200 OK
Transfer-Encoding: chunked
8rn
Ethernutrn
Arn
goes Italyrn

Maintenance problem
●
First solution: Server Side Includes (SSI)
➔ Stored as static content
➔ Variable parts can be replaced on-the-fly during
transmission
●
Second solution: Template system
➔ Similar to SSI, but less verbose
➔ Can be combined with SSI
➔ Fully separates content from coding (wishful thinking)
➔ Suitable for many document formats, not just
HTML/XML

Nut/OS template system
Syntax Element Function Example
{{ expression }} Replaced with
expression result
<div>Current temperature is
{{ temp }}°C</div>
{% command %} Executes commands
if, for and use
{% if ip == '127.0.0.1' %}
<p>localhost</p>
{% elif ip == '255.255.255.255' %}
<p>broadcast</p>
{% else %}
<p>other</p>
{% endif %}
{# comment #} Simply removed {# Revision 1.2.3 #}
●
Subset of Django Template Language
●
Developed for LPC1768 platform
(100MHz Cortex-M3, 64kB RAM, 512kB Flash)
●
Good maintainability

Dynamic data updates
Read and parse
Call template
processor
while () {
tcpread(buffer);
Locate requested
resource
for (i = 0; i < NFILES; i++) {
if (strcmp(aof[i].name, …
ProcTempl(aof[i].cont...
...
void ProcTempl(char *cp) {
...
Send HttpHeader();
...
nxt = GetNextTag(cp);
if (NextTagIsExpr()) {
r = EvalExpr(nxt);
tcpwritechunked(r);
}
else if (NextTagIsCmd(nxt)) {
...
}
else {
tcpwritechunked(nxt);...
Send response
header
Send chunked
content
GET /sensor.tpl HTTP/1.1
…
HTTP/1.1 200 OK
Transfer-Encoding: chunked
...

Dynamic web interfaces
●
Fat client and thin server
●
Let the browser do the job
 HTML5 patterns to verify user input
 JavaScript for CPU-intensive tasks
e.g. floating point calculations or graphics
➔ Scripts may be blocked, non-obstrusive Javascript
is prefered
 CSS3 transitions for catchy animations

HTML5 patterns for validation
●
Example: Check IPv4 address
 ((^|.)((25[0-5])|(2[0-4]d)|(1dd)|([1-9]?d))){4}$

JavaScript calculations
●
User selects temperature unit
●
JavaScript does the conversion
 Webserver is not involved until
user presses “submit”

Client-side scripting:
Dynamically updated
by JavaScript without
refreshing document

JSON vs XML
●
Less overhead than XML, therefore
preferred format for constraint systems
●
JSON is becoming the first choice for web
based applications

JSON templates
{
"timestamp": "{{timestamp}}",
"value": "{{temperature}}"
...
}
●
Template stored as static data
●
Tags replaced on the fly
{
"timestamp": "1404229980",
"value": "22.3"
...
}

Graphical user interface demo
JavaScript
● Queries JSON-data from the web
server
● Manipulates SVG images

JSON gives wings to things
●
Well suited for M2M communication
●
Supported by major cloud services

Web of Things Things To Be
Done (WoTTTBD)
●
Lack of service description standards
 Required, but difficult to define in the early
stage of a fast growing environment
●
Security, trust and privacy
 Most challenging for constraint systems
●
Probably more

Thank you for
your attention.
Any questions?
Mille grazie!
plus.google.com/+EgniteDewww.youtube.com/user/egniteGmbH
www.facebook.de/egniteDewww.twitter.com/egniteEmbedded

Credits and References
References
● IDC study, Worldwide and Regional Internet
of Things (IoT) 2014 –2020 Forecast: A
Virtuous Circle of Proven Value and Demand
● "The Web of Things: A Survey" by Deze
Zeng, Song Guo, and Zixue Cheng, The
University of Aizu, Japan
● Fielding, Roy Thomas (2000), Architectural
Styles and the Design of Network-based
Software Architectures, Doctoral
dissertation, University of California, Irvine
Thanks to
●
Elegant Themes and Freepik from
www.flaticon.com
for the icons

Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014

Recomendados

Recomendados

Más contenido relacionado

Similar a Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014

Similar a Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014 (20)

Último

Último (20)

Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014