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.

[Read more...]

Hackaday links: March 6, 2011

Omnidirectional personal transport

[Dan] sent us a link to this Honda U3-X personal transport device. It’s kind of like a Segway that can move in any direction but our head already hurts from the thought of going over backward on one of these.

How light bulb filaments were developed


Now that incandescent light bulbs are about to be outlawed here in the US, we thought you might enjoy learning how the filaments were developed. This another video by [Bill Hammack], the engineer guy, and we’re big fans of his work.

Wooden stove reflow

Who needs a PID controlled skillet when you can reflow on this wooden stove? Well maybe not reflow, this is more of a salvage operation.

Javascript control

We’ve seen more than enough Arduino controlled outlets. But if you’re interested in using Javascript to control the Arduino this post may be just what you’re looking for.

Sledgehammer keyboard

[Taylor Hokanson] built a qwerty keyboard that you hit with a sledgehammer. Enough said. [Thanks Larry]


Learn to code at Lifehacker

[Adam] over at lifehacker is putting together a series on the principles of programming called “Learn to code”. They are using Javascript as a basis to teach the fundamentals that would allow you to get stuff done in any similar language, like actionscript. After you’ve got these basics down, even moving to an object oriented language shouldn’t be too difficult. We absolutely love educational resources and hope they continue this series pretty far. They’ve already released part one and part two. We have supplied the video from each after the break, but there’s more info at the links.

[Read more...]

Behind the scenes of a 1K graphics demo

Programmer/designer [Steven Wittens] has posted a fantastic write-up on the black art of producing compact demo code, dissecting his own entry in the 1K JavaScript Demo Contest. The goal is to produce the best JavaScript demo that can be expressed in 1024 characters or less and works reliably across all standards-compliant web browsers.

[Wittens] details several techniques for creating a lot of visual flash in very few bytes, including the use of procedural graphics rather than fixed datasets, exploiting prime numbers to avoid obvious repetitions in movement, and strategically fudging formulas to save space while adding visual interest. These methods are just as applicable to other memory-constrained situations, not just JavaScript — some of the contest entries bear a resemblance to the compact microcontroller demos we’ve previously showcased, except running in your browser window.

The contest runs through September 10th, allowing ample time to come up with something even more clever. Whether he wins or not, we think [Steven] deserves special merit on account of having one of the most stylish blogs in recent memory!

CoffeeScript: like aspirin for JavaScript

CoffeeScript is a language that compiles down into JavaScript. “But why? JavaScript is so simple?” Bullcorn.

If you don’t use JavaScript everyday the language is wonky and frustrating. When you need quick snippet of Javascript to build into a page you may know how to do it with three or four different languages but struggle with the touchy syntax that has long given developers headaches.

Give CoffeeScript a try, you’ll like it. If you do, give them a hand with development too.

[via @hornbeck]

How to overlay images by using Greasemonkey

HaD_frame

Today we’re going to take a look at writing scripts for the Greasemonkey add-on for Firefox. This add-on allows us to use JavaScript to make changes to the way webpages are displayed on our browser. These changes can only be seen by a copy of Firefox that is running a particular script. As an example, we’re going to write a script that adds a border to the banner image of each article on Hack a Day by overlaying the image you see above. Find out how it’s done after the break. [Read more...]

XMPP and home automation

xmpp_office_lights

[Matthias] from Intuity Media Lab put together a nice bit on controlling office lights with XMPP from his Android phone. In the article, he explains the components involved in the project, why he chose XMPP, and lists everything you need to replicate it. The project makes use of a wide variety of tools and libraries, weaving together code from multiple languages to achieve its goal. Overall, his project is a welcome change in a world full of Twitter-based solutions.

Follow

Get every new post delivered to your Inbox.

Join 97,581 other followers