Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Aloha
Peculiarities of web interfaces for
resource constrained embedded systems
IoT connects the physical
world to the Int...
HTTP
Peculiarities of web interfaces for
resource constrained embedded systems
WoT enables the physical world
to speak the...
Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
Outline
Introducti...
Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
Burgeoning market
...
Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
How to connect con...
Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
HTTP
●
HTTP
 Majo...
Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
Whats possible wit...
Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
Mashup Technology
...
Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
Va bene!
We need t...
Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
Traditional web se...
Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
Typical classes of...
Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
Open Source TCP/IP...
Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
support HTTP.
But ...
Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
Outline
Introducti...
Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
Providing static c...
Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
Providing static c...
Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
Providing static c...
Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
File Systems
●
If ...
Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
File Systems
●
Mos...
Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
Compression
●
Data...
Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
...but
●
Syntax-aw...
Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
Fino a qui, tutto ...
Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
Outline
Introducti...
Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
Types of dynamic c...
Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
Providing dynamic ...
Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
Providing dynamic ...
Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
Providing dynamic ...
Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
Content length pro...
Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
Chunked Transfer E...
Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
Maintenance proble...
Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
Nut/OS template sy...
Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
Dynamic data updat...
Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
Outline
Introducti...
Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
Dynamic web interf...
Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
HTML5 patterns for...
Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
JavaScript calcula...
Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
Providing dynamic ...
Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
JSON vs XML
●
Less...
Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
JSON templates
{
"...
Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
Graphical user int...
Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
JSON gives wings t...
Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
Outline
Introducti...
Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
Web of Things Thin...
Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
Thank you for
your...
Peculiarities of web interfaces for resource constrained embedded systems
Better Embedded 2014, Firenze
Credits and Refere...
Nächste SlideShare
Wird geladen in …5
×

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

3.728 Aufrufe

Veröffentlicht am

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).

Veröffentlicht in: Technologie, Business
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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

  1. 1. 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!
  2. 2. 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
  3. 3. 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
  4. 4. Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze 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
  5. 5. 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
  6. 6. 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
  7. 7. Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze Whats possible with WoT? Embedded HTTP Sensor node Cloud services Web interface Sensor node
  8. 8. 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
  9. 9. Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze Va bene! We need to support HTTP. But can we?
  10. 10. 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
  11. 11. 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 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
  12. 12. 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
  13. 13. Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze support HTTP. But how to get started? Yes, we can
  14. 14. 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
  15. 15. Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze Providing static content PNG HTML CSS
  16. 16. 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 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.
  17. 17. Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze Providing static content 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"; 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: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.
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. 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/
  22. 22. Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze Fino a qui, tutto bene! Static web pages are lousy!
  23. 23. 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
  24. 24. Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze Types of dynamic content Server-side scripting: Values inserted at document generation Client-side scripting: Values dynamically updated without refreshing document
  25. 25. Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze Providing dynamic content Server-side scripting: Values inserted at document generation
  26. 26. Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze Providing dynamic content Read and parse request, line by line Howto determine the content length in advance? while () { tcpread(buffer); if (strncmp(buffer, "GET"... 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(); ... GET /index.html HTTP/1.1 … HTTP/1.1 200 OK Content-Length: ? CGI way: Call a C function instead of locating static data.
  27. 27. 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
  28. 28. 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
  29. 29. Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze Chunked Transfer Encoding HTTP/1.1 200 OK Transfer-Encoding: chunked GET /index.html HTTP/1.1 8rn Ethernutrn Arn goes Italyrn
  30. 30. 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
  31. 31. 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
  32. 32. 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 OK Transfer-Encoding: chunked ...
  33. 33. 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
  34. 34. 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
  35. 35. 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)|(1dd)|([1-9]?d))){4}$
  36. 36. 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 until user presses “submit”
  37. 37. Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze Providing dynamic content Client-side scripting: Dynamically updated by JavaScript without refreshing document
  38. 38. Peculiarities of web interfaces for resource constrained embedded systems Better Embedded 2014, Firenze JSON vs XML ● Less overhead than XML, therefore preferred format for constraint systems ● JSON is becoming the first choice for web based applications
  39. 39. 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" ... }
  40. 40. 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
  41. 41. 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
  42. 42. 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
  43. 43. 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
  44. 44. 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
  45. 45. 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.com for the icons

×