HTML5 for Microcontrollers!
Simon Ford.
HTML5 already holds some pretty exciting prospects for web application developers, but there is no reason why it should stop there. If you can get microcontrollers to start talking the same language too, the opportunities for the Internet of Things enabled by HTML5 could be amazing!
This project shows an early glimpse of how you can build Internet of Things sensors with mbed that can be quickly deployed using just a smartphone, and transmit their real-time sensor data to a server that can be visualised on different clients, all using these new HTML5 web standards:
You can see immediately from the demo just how natural the deployment and interaction feel, and why HTML5 could be a key enabler in the Internet of Things.
The hardware
The mbed Microcontroller reads it's attached sensors and sends the real-time data to a server over Wifi using HTML5 Websockets. In our case, the messages are simple JSON messages to a simple websockets server hub.
This example uses the new mbed Cortex-M0 beta to make battery-powered prototypes of sensors communicating via wifi:
Of course, the same concept works over any transport, such as using the mbed NXP LPC1768 built-in Ethernet to make wired websockets connections.
Viewing the data stream on a web page
The real time data from any sensor can be viewed on any client using HTML5 Canvas just by subscribing to the stream:
This is just an example - the clients for this data can range from simple viewers such as this that just display the data they see, to complex databases, filters and triggers; anything that can listen on a websocket connection.
The code
As an overview, here is the main C/C++ code running on the mbed microcontroller that makes it all work:
Import program
00001 #include "mbed.h" 00002 #include "Wifly.h" 00003 #include "Websocket.h" 00004 00005 DigitalOut l1(LED1); 00006 00007 //Here, we create an instance, with pins 9 and 10 connecting to the 00008 //WiFly's TX and RX pins, and pin 21 to RESET. We are connecting to the 00009 //"mbed" network, password "password", and we are using WPA. 00010 Wifly wifly(p9, p10, p21, "mbed", "password", true); 00011 00012 //Here, we create a Websocket instance in 'rw' (read-write) mode 00013 //on the 'samux' channel 00014 Websocket ws("ws://sockets.mbed.org/ws/samux/rw", &wifly); 00015 00016 00017 int main() { 00018 char recv[40]; 00019 00020 while (1) { 00021 00022 //we connect the network 00023 while (!wifly.join()) { 00024 wifly.reset(); 00025 } 00026 00027 //we connect to the websocket server 00028 while (!ws.connect()); 00029 00030 while (1) { 00031 wait(0.5); 00032 00033 //Send Hello world 00034 ws.send("Hello World! over Wifi"); 00035 00036 // if a message is available, print it 00037 if (ws.read(recv)) { 00038 // show that we receive messages 00039 l1 = !l1; 00040 } 00041 } 00042 } 00043 }
Hopefully that gives a good feel for how quickly these prototypes can be put together.
The technology is coming, so it is now just up to you to create the killer apps! For all the dirty details of how to build it to get you on your way, see:
19 comments on HTML5 for Microcontrollers!:
You need to log in to post a discussion
Release date please? :-D