peculiarities of web interfaces for resource constrained embedded systems / better embedded 2014
DESCRIPTION
IoT (Internet of Things) connects the physical world to the Internet. The next logical step is enabling the connected physical world to speak the same language. HTTP is the major communication platform of the Internet. Low cost, low power embedded boards are resource-constrained systems, which do not provide sufficient performance and memory space for standard web server implementations. The author will propose a number of techniques that will allow you to run modern web interfaces on embedded systems with a few hundred kilobytes of flash and some tens of kilobytes of RAM. After looking at few free and Open Source TCP/IP stacks, file systems and RTOSes, the author will show by example how on-the-fly streaming and function-based CGI helps to provide dynamic web content with minimal resource allocation. New web standards like HTML5, CSS3 or SVG provide further help to create usable and appealing web interfaces with minimal resources on the server side. Last not least, HTTP-based machine to machine communication and JSON formatted data combined with mashup technology allows to integrate tiny devices into a new WoT (Web of Things).TRANSCRIPT
![Page 1: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/1.jpg)
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!
![Page 2: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/2.jpg)
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
![Page 3: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/3.jpg)
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
![Page 4: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/4.jpg)
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
![Page 5: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/5.jpg)
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
![Page 6: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/6.jpg)
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
![Page 7: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/7.jpg)
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
![Page 8: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/8.jpg)
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
![Page 9: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/9.jpg)
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
Va bene!
We need to support HTTP.But can we?
![Page 10: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/10.jpg)
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
![Page 11: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/11.jpg)
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
![Page 12: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/12.jpg)
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
![Page 13: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/13.jpg)
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
support HTTP.
But how to get started?
Yes, we can
![Page 14: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/14.jpg)
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
![Page 15: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/15.jpg)
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
Providing static content
PNG
HTML
CSS
![Page 16: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/16.jpg)
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.
![Page 17: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/17.jpg)
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.
![Page 18: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/18.jpg)
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
![Page 19: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/19.jpg)
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
![Page 20: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/20.jpg)
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
![Page 21: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/21.jpg)
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/
![Page 22: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/22.jpg)
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
Fino a qui, tutto bene!
Static web pages are lousy!
![Page 23: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/23.jpg)
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
![Page 24: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/24.jpg)
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
![Page 25: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/25.jpg)
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
Providing dynamic content
Server-sidescripting:
Values insertedat documentgeneration
![Page 26: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/26.jpg)
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.
![Page 27: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/27.jpg)
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
![Page 28: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/28.jpg)
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
![Page 29: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/29.jpg)
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
![Page 30: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/30.jpg)
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
![Page 31: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/31.jpg)
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
![Page 32: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/32.jpg)
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...
![Page 33: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/33.jpg)
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
![Page 34: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/34.jpg)
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
![Page 35: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/35.jpg)
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}$
![Page 36: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/36.jpg)
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”
![Page 37: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/37.jpg)
Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze
Providing dynamic content
Client-side scripting:Dynamically updatedby JavaScript withoutrefreshing document
![Page 38: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/38.jpg)
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
![Page 39: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/39.jpg)
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" ...}
![Page 40: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/40.jpg)
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
![Page 41: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/41.jpg)
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
![Page 42: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/42.jpg)
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
![Page 43: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/43.jpg)
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
![Page 44: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/44.jpg)
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
![Page 45: Peculiarities of web interfaces for resource constrained embedded systems / Better Embedded 2014](https://reader033.vdocuments.mx/reader033/viewer/2022042816/559a629c1a28ab12698b4641/html5/thumbnails/45.jpg)
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