Wicked Use Of HTML5 To Display Sensor Data

This project shows you one possible way to use HTML5 to fully integrate sensor data from a microcontroller into our technological lives. Now, when we saw this tip come through our inbox we thought it would be an interesting example to learn from but we weren’t ready for how truly cool the setup is. Take a look at the video after the break and you’ll see that scanning the QR code on the project box will immediately start a 10ms resolution live stream of the accelerometer data. Furthermore, the browser page that the phone loads allows you to send what you’re currently viewing to the main frame of a browser running on a different computer with the touch of a button. In this way you can build a dashboard of streaming sensor data. Talk about the future of home automation. Imagine a QR code on your thermostat that allows you gain access to your home’s heating, air conditioning, humidifier, and water heater performance and controls just by snapping a pic? The sky’s the limit on this one so let us know what you’d use it for by leaving a comment.

In this case an mbed microcontroller is handling the data acquisition and pushing that to a server via a WiFly module using the WebSockets library. This data is pushed in the form of a JSON packet which is distributed by the server as a data stream. Clients can access it via a browser through a page that makes use of JavaScript.

[Thanks Simon]

33 thoughts on “Wicked Use Of HTML5 To Display Sensor Data

      1. What is the value exactly in being able to view a live graph? What would be changing fast enough to benefit from reading the graph remotely, and what advantages would this actually give me? To me this just feels like a tech demo, and I don’t see any real-world scenarios that would make this interesting. Using the thermostat example, modern thermostats have LCD screens that could do anything and everything this could do, without requiring a smart phone, wifi card, server, etc. etc. Call me a negative nancy but I just don’t see the benefit in this.

      2. It seems to me that the simplest way would be to just require a login. View only is available with only the QR, but to modify you have to login. You could even have different levels of permissions depending on the credentials entered.

  1. Nope, not the future of home automation. Not by a long shot.

    http://www.crestron.com is the now and future of real home automation. their V panels and the ability to use flash for complete programming so you can have elegant or even movie style feedback puts any HA project shown here to utter shame.

    Yes it’s expensive, but dirt cheap compared to the house.

    1. sorry, but all i see on their homepage is taking money from their customers for overpriced thin-clients with RT-OS as server. I bet only a few cutsomers know why they would/should need RT OS and if so only these few people (maybe even less than these few!) have the skills to make the full use of the RT OS advantages. if you don’t care about spending trillions for a house then go ahead an buy it. if not hack something together to fit your needs and stay within a 1/4 of the costs!

    2. The beauty of Crestron lies in the hardware. It’s very reliable and has features that require hardware developments that most of us hackers won’t or can’t make on our own. One of my favorites is like very video playback on screen in which you can have touch screen buttons overlay or around the video. Hdmi input too. The other benefits are relatively feedback and volume buttons that will raise and lower ur volume in real time with no delay. All other web based products have some delay. Also you have to consider that when you install this in a clients house that it has to work every day for the next 20 years with no trouble. You also don’t want to open urself up to lawsuits so you need to install a product that has been tested and won’t cause fires or other trouble. Finally you want to look for a product that has a lot of products so you don’t have to hack together a whole solution. Crestron has low voltage and 110 and 220 lighting control product lines, serial, ir, relay, and voltage trigger control. They have a large touch panel and keypad selection. The cewtron product is a different grade of product than an Arduino and a few sensors. Don’t get me wrong I love microprocessors and Crestron and I see a future for them together.

    1. wick·ed

      adjective /ˈwikid/ 
      wickeder, comparative; wickedest, superlative

      Evil or morally wrong
      – a wicked and unscrupulous politician

      Intended to or capable of harming someone or something
      – he should be punished for his wicked driving

      Extremely unpleasant
      – despite the sun, the wind outside was wicked

      Playfully mischievous
      – Ben has a wicked sense of humor

      Excellent; wonderful
      – Sophie makes wicked cakes

  2. This is a great use of QR Codes. I’ve had another idea about how to get your weight automatically sent to some web service, without having to buy an expensive WiFi scale. How about retrofitting an old mechanical scale with printed QR codes representing the weight (encapsulated in a URL that’s referring to a suitable website). Get on the scale, point your smartphone at the QR code, and voila; your weight is uploaded (via WebSockets) to the site for later perusal with any browser.

  3. regarding practical uses: tons!
    for instance sending eeg medical data in hospitals for sleep disorders. etc they use a complete cart with PC connected to a USB measuring device to send it to central server for processing. well this could do it cheaper and way more elegant/compact!

    1. Can you wait two weeks? I have just build that for my fermentation fridge.
      A DD-WRT router hosts a Jquery UI web interface with Google annotated timeline graphs and it communicates with Arduino over USB for sensor data and settings.
      I will put it on my website within two weeks and will submit it to hack a day when I’m done.

  4. I seem to be missing the point of the qr code, the phone could just as easily have a shortcut on home screen to the url that the code is pointing to.

    You will usually only have a limited number of devices to control, having each with there own name and icon wouldn’t be to horrible. also you would be able to pull it up quickly whenever not in front of the qr code.

    Love everything else, just don’t like the use of the qr.

  5. Same here,
    Even a two digit number printed over the sensor would likely be more user friendly than a QRCode, not to mention a menu on the web that you can easily browse far from where the sensor is.
    “But this can be scaled to hundreds of sensors!”, but out there, there are already solutions for that scale of sensor networks. Not to mention grid networks (with more battery friendly technology) that I think are more useful for this kind of application.
    Anyway, is interesting to know how you can handle this kind of information through a lan-like network.

  6. On the other side, making a few changes, this could rather be a nice user-friendly way to deploy sensors over your house.
    If they could built an server-client app for any pc and smartphone; you would only need to place the sensor, add it to your home wifi network, and from the app you’ll be able to browse through every sensor.

    With zigbee (or similar) technology you would need to sell a wireless gateway for your home network to be able to reach your sensors data.
    It might be cheaper, but people prefer plug&play… the concept could become the Mac for the home sensors networks.

    1. but besides home applications there’s already well established devices, networks, and software to manage everything you need. I’m talking about industry and those kind of people that can afford a reliable infrastructure. All other applications I’d call them “home applications” (nothing serious and “cheap”, for normal consumers).

  7. jesus christ – do they really need stupid-ass house music to go along with their f*cking sensor video?! I can’t hear what the little brit raver is saying. LLLLaaaammmmmeeeee….

  8. 1. Ditto LuckCharms (w/o the * expletives). Do you really need the sound track? Are you selling flavored Vodka or presenting a cool technology. Completely distracting.
    2. QR – useless. I ditto That1guy’s comments. Embed the device code into the JSON. The HTML on the site/phone should be smart enough to determine the rest.
    3. Why does everyone think the thermostat is this holy grail of ancient technology that needs to be hacked? My thermostat works really well. No it doesn’t send me a graph… but even if it did, I would look at it once and say “Wow… that’s neat” and then never look again! Think industrial (mobile maintence checks of sensors on motors, chemical/temperature processes, water flow meters (ala mbear’s comment) etc.). Selling into the home market has killed many an entrepenuer. Go where the money is.

    Those things aside, you guys did a really nice job. I think you may have a business here, you just need to find the right niche. (No, it’s not all about the money… but it sure is nice to get some cash to fund your next cool project!)

  9. SNMP has been around for years, same with ModBus including it’s multiple variations. Why now all of the sudden this is “the sky is the limit” is beyond me. If you want to do stuff like this all you need is a basic micro controller not a M6. They have just about every type of embedded adapter you can imagine so physical interface is also no obstacle… Making devices communicate directly with web servers and now clients is a bad idea and just asking for trouble. Having a device web page is one thing, having the device communicate to a server is also something, having the device web socket the information for relay to the clients is just an encapsulation of what already exists only more insecure. This exposes the socket to a lot of things it would otherwise not see… I hope your server’s for loop is well structured ;)


  10. Not sure what this is for, stuff like this can be done since 1980. But no normal person really cares for detailed information about their home as long as it’s warm, lights work etc.

    Overkill and way too elaborate. I’m sure parts of the project can be used in the weapon industry though.

Leave a Reply

Please be kind and respectful to help make the comments section excellent. (Comment Policy)

This site uses Akismet to reduce spam. Learn how your comment data is processed.