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!
Jul 06, 2015
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
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
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
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
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
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
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
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
Whats possible with WoT?
EmbeddedHTTP
Sensor node
Cloud services
Web interface
Sensor node
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
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
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
Va bene!
We need to support HTTP.But can we?
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
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
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
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
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
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
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
support HTTP.
But how to get started?
Yes, we can
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
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
Providing static content
PNG
HTML
CSS
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
Providing static content
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.
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
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.
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
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
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
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
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
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
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
...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/
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
Fino a qui, tutto bene!
Static web pages are lousy!
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
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
Types of dynamic content
Server-sidescripting:
Values insertedat documentgeneration
Client-side scripting:Values dynamically
updated withoutrefreshing document
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
Providing dynamic content
Server-sidescripting:
Values insertedat documentgeneration
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
Providing dynamic content
Read and parse request, line by line
How to determine the content length in advance?
while () { tcpread(buffer); if (strncmp(buffer, "GET"...
Detect URIs with variable content
void SendIndex(){
len = ?...
tcpwrite("<HTML>\r\n"); 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();...
GET /index.html HTTP/1.1…
HTTP/1.1 200 OKContent-Length: ?
CGI way: Call a C function instead of locating static data.
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
Providing dynamic content
● 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
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
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
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
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
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
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
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
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
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
Dynamic data updates
Read and parse request, line by line
Call template processor
while () { tcpread(buffer); if (strncmp(buffer, "GET"...
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 OKTransfer-Encoding: chunked...
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
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
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
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
HTML5 patterns for validation
● Example: Check IPv4 address ((^|\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))){4}$
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
JavaScript calculations
● User selects temperature unit● JavaScript does the conversion
Webserver is not involved untiluser presses “submit”
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
Providing dynamic content
Client-side scripting:Dynamically updatedby JavaScript withoutrefreshing document
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
JSON vs XML
● Less overhead than XML, thereforepreferred format for constraint systems
● JSON is becoming the first choice for web based applications
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
JSON templates
{ "timestamp": "{{timestamp}}", "value": "{{temperature}}" ...}
● Template stored as static data● Tags replaced on the fly
{ "timestamp": "1404229980", "value": "22.3" ...}
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
Graphical user interface demo
JavaScript● Queries JSON-data from the web server
● Manipulates SVG images
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
JSON gives wings to things
● Well suited for M2M communication● Supported by major cloud services
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
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
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
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
Thank you for your attention.
Any questions?
Mille grazie!
plus.google.com/+EgniteDewww.youtube.com/user/egniteGmbH
www.facebook.de/egniteDewww.twitter.com/egniteEmbedded
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
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