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 physicalworld to the Internet

HalloGoddag

Shalom

Vitayu Salut

Ola Hello Cześć

Xin chào

Ciao!

HTTP

Peculiarities of web interfaces for resource constrained embedded systems

WoT enables the physical worldto speak the same language

HTTPHTTP

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 expectedto 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?

EmbeddedHTTP

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 RAM and 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 RAM and 64kB Flash

Running small RTOS

Ethernut Internal, reduced stack

Direct integration via linked library

C 8/32-bit, up to a few 100 MHz

Few kilobytes 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


Outline

Introduction







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 OK\r\n");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 OKContent-Length: 1872

If no file system is available, it can be imitated by a constant array in Flash memory.


Providing static contentNut/OS provides a tool named crurom, which convertsall 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";

const char file2data[] PROGMEM = { 137,'P','N','G', 13, 10, 26, 10, 0...};const char file2name[] PROGMEM = "nutos.png";

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";

const char file2data[] PROGMEM = { 137,'P','N','G', 13, 10, 26, 10, 0...};const char file2name[] PROGMEM = "nutos.png";C:\ethernut\nutapp\uhttpd_tiny> make burn

avr-gcc -c -I../include … httpd_tiny.ccrurom -r -ohtdocs.c htdocsavr-gcc -c -I../include … htdocs.cavr-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!


Outline

Introduction






Types of dynamic content

Server-sidescripting:

Values insertedat documentgeneration

Client-side scripting:Values dynamically

updated withoutrefreshing document



Server-sidescripting:

Values insertedat documentgeneration




How to determine the content length in advance?


Detect URIs with variable content

void SendIndex(){

len = ?...

tcpwrite("<HTML>\r\n"); tcpwrite(timestr);


Send static and variable content

tcpwrite("HTTP/1.1 200 OK......

for (i = 0; i < NFUNCS; i++) { if (strcmp(fnc[i].name, … SendIndex();...

GET /index.html HTTP/1.1…

HTTP/1.1 200 OKContent-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 OKTransfer-Encoding: chunked

GET /index.html HTTP/1.1

8\r\nEthernut\r\n

A\r\ngoes Italy\r\n


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


Call template processor


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 chunked content

GET /sensor.tpl HTTP/1.1…

HTTP/1.1 200 OKTransfer-Encoding: chunked...


Outline

Introduction







● 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)|(1\d\d)|([1-9]?\d))){4}$


JavaScript calculations

● User selects temperature unit● JavaScript does the conversion

Webserver is not involved untiluser presses “submit”



Client-side scripting:Dynamically updatedby JavaScript withoutrefreshing document


JSON vs XML

● Less overhead than XML, thereforepreferred 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


Outline

Introduction






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.comfor the icons