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]

[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]

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

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 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]

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.

Our Goal:

We want to make the top image for each article look like it has been printed with a white border and then taped on each corner to the page. This is an effect that we used to use on our posts and a Greasemonkey script is a good way to re-implement the effect if you miss that image style.

What You Need:

1. Install Firefox
2. Install the Greasemonkey add-on.
3. Download and install our script: hackaday_nostalgia.user.js

How It Works:

Greasemonkey runs JavaScript on top of the pages that have been loaded by Firefox. The first part of the file is a set of comments that tell Greasemonkey what it’s dealing with:

// ==UserScript== // @name           Hackaday Nostalgia // @namespace      http://hackaday.com // @description    Overlay photograph border and taped corners for article images at Hack a Day. // @include        http://hackaday.com/* // ==/UserScript==

The name, namespace, and include lines are all required for the script to work. Name is what you want to call your script. Namespace is a URL that identifies the script uniquely in case there are two scripts with the same name. Include tells Greasemonkey what pages this script should be applied to. In our case we only want to monkey with the images on hackaday.com so we’ve included all addresses from that domain.

Now that we’ve identified what pages we want to alter, we can parse the document and pull out the elements we want ot change. The first thing to do is examine the page source of our target:

<div class='snap_preview'><p><img class="alignnone size-full wp-image-17747" title="plotter-with-300w-laser" src="http://hackadaycom.files.wordpress.com/2009/10/plotter-with-300w-laser.jpg?w=470&h=313" alt="plotter-with-300w-laser" width="470" height="313" /></p>

With a little digging we can find the line you see above that includes the IMG element for the title of a post. We’re in luck, the page builds each post wrapped in a DIV of the Class ‘snap-preview’. We can use Greasemonkey to parse the page looking for these DIVs and then alter the first IMG element in each one:

//get all DIVs of the snap_preview class
var allDivs, thisDiv;
allDivs = document.evaluate(
 "//div[@class='snap_preview']",
 document,
 null,
 XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
 null);

In the code above we are using the evaluate function to pick out DIVs that are in the ‘snap-preview’ class. We load them into an array called allDivs which we can then step through:

//step through each DIV
for (var i=0; i<allDivs.snapshotLength; i++) {
 thisDiv = allDivs.snapshotItem(i);

 //Alter the first img of each DIV
 var image = thisDiv.getElementsByTagName('img');

 //Make sure we've got an IMG in this DIV
 if (image[0]) {

 //Save original source URL
 var orig_src = image[0].src;
 //Concatenate for CSS use
 orig_src = 'url(' + orig_src + ')';
 //Set original as background
 image[0].style.background = orig_src;

 //Set Hack a Day overlay as image
 image[0].src = 'http://hackadaycom.wordpress.com/files/2009/10/had_frame.png';
 }
}

This block of code is where the magic happens. A loop is used to step through each DIV we grabbed in the previous code snippet. We grab the IMG element by using the getElementsByTagName function. All IMG elements are put into an array called ‘image’, but we only want to alter the first image in each post so we’ll always reference image[0].

For the image border and tape effect, we used the GIMP to create a PNG file that has transparency where we want the original picture to show through. We need the original picture to be behind the overlay so we’re making it a background image using the CSS property ‘background’. The PNG overlay is then set as the new SRC for the IMG element.

That’s all it takes, now images will be overlayed with the border image you see at the top of this post.

Benefits and Drawbacks:

There are some drawbacks to using this system; the overlay covers up the borders of the original image, older posts that already have this image effect will have it applied again, the overlay will be stretched to match each original image which can look weird depending on image height, and the overlay image we’ve provide is of rather low quality (you can probably do better yourself).

Our method uses a very small amount of code and doesn’t require the original image size to be recalculated.

The Next Step:

Now that we’ve showed you how to do this much, you may want to take it one step further. The original picture style also made the images black and white. Can you make the script do this as well? To get started in the right direction, you might want to look at the Pixastic JavaScript image manipulation library and its desaturate function.

Overwhelmed?

If you need some help deciphering what we did here just use your online resources:

• Dive into Greasemonkey: An online book to help you learn greasemonkey scripting
• HTML Dog: A best practices guide to HTML and CSS

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

There are myriad file transfer services on the web. Streamfile tries to set itself apart by providing a unique secure service. Their file upload system is all JavaScript and doesn’t rely on Flash. It uses SSL to secure the file transport. As soon as you start uploading the file, you can hand the link off to your recipient and they can start downloading without waiting for the upload to complete. The free limit is 150MB, but their PRO service allows 2GB files.

[via Download Squad]

[Tom] wrote in to tell us about his JavaScript project for motion detection. It ties together two ideas we’ve talked about recently. The first is doing image processing in-browser using Canvas(), which we’ve seen employed in captcha breaking. The second is offloading heavy processing to browsers, which we saw recently in the MapReduce implementation. [Tom] is using JavaScript to compare consecutive images to determine if there’s any motion. He did this as part of MJPG-Streamer, a program for streaming images from webcams. It can run on very limited hardware, but image processing can be very intensive. Doing the image processing in-browser makes up for this limitation and means that a custom client program doesn’t have to be written. You can find the code here and a PDF about the proof of concept.

We’ve heard about the idea of using browsers as distributed computing nodes for a couple years now. It’s only recently, with the race towards faster JavaScript engines in browsers like Chrome that this idea seems useful. [Antimatter15] did a proof of concept JavaScript implementation for reversing hashes. Plura Processing uses a Java applet to do distributed processing. Today, [Ilya Grigorik] posted an example using MapReduce in JavaScript. Google’s MapReduce is designed to support large dataset processing across computing clusters. It’s well suited for situations where computing nodes could go offline randomly (i.e. a browser navigates away from your site). He included a JavaScript snippet and a job server in Ruby. It will be interesting to see if someone comes up with a good use for this; you still need to convince people to keep your page open in the browser though. We’re just saying: try to act surprised when you realize Hack a Day is inexplicably making your processor spike…

[via Slashdot]

Twitter was flooded this morning with users posting “Don’t Click: http://tinyurl.com/amgzs6″. TinyURL has since terminated the URL. The original page doesn’t seem to be live either. It displayed a button that said “Don’t Click”. If the user happened to be logged into Twitter, it would automatically update their status. The instigator partially describes the method on his blog (translated). The page would load the user’s Twitter page in an invisible iframe. The status would be pasted in and the “Don’t Click” button is placed on top of the update button. You can find the code snippets here and the original author credits this post for the inspiration. Twitter has since added a JavaScript fragment to each page to break out of iframes.

if (window.top !== window.self) { window.top.location.href = window.self.location.href; }

This was certainly the last thing we expected to see today. [ShaunF] has created a Greasemonkey script to bypass the captcha on filehosting site Megaupload. It uses a neural network in JavaScript to do all of the OCR work. It will auto submit and start downloading too. It’s quite a clever hack and is certainly helped by the simple 3 character captcha the site employs. Attempting to do the same thing with ReCAPTCHA has proven much more difficult.

UPDATE: [John Resig] explained of how it works.

[via Waxy]

While working towards open-sourcing Android, the team continued to work on new features in their own private development branch. These have now been published publicly in the “cupcake” branch. There’s a lot of interesting new features and bug fixes included. We’ve got a rundown of many of the significant additions after the break.

The A2DP and AVRCP profiles were both added to the Bluetooth stack. This means support for stereo headsets and remote control. Dial Up Networking wasn’t added, but preliminary work was done on USB Gadget Framework support, which means future devices could appear to the host device as just an ethernet interface.

The browser has been bumped up to the November release of WebKit with the optimized JavaScript engine SquirrelFish. Copy/paste in browser and a 5x draw speed improvement were also added. The trackball now does accelerated scrolling.

Hardware accelerated video recording and playback, an often noted oversight in the initial T-Mobile G1 release, finally show up. A framework for an on-screen keyboard and predictive text are being worked on. Android lets you run background processes and users will be pleased to know there’s a process manager now. Finally, a new Linux 2.6.27 kernel and the least explained addition “basic x86 support” round out the branch.

While there are many good improvements here, there is no indication as to when G1 users will see them or when Android Dev Phone 1 (ADP1) owners will be able to build the release themselves. [Disconnect] points out that there were some other gems included in the branch that aren’t in the announcement like mounting an encrypted e2fs volume which could enable installing apps on the SD card.

[photo: tnkgrl]

[via GotOnTheInter.Net]

Here’s an update on our earlier post about genetic programming. Altered Qualia has posted a new implementation of [Ron Alsing]‘s idea. It starts with 50 polygons and then randomly changes one parameter with each optimization step. If the the change results in fewer differences from the target image, it’s kept as the new best DNA. This search method is similar to simulated annealing. The image above is the result of 1500 good mutations out of 35900 possible. The implementation lets you choose any image, but smaller means the fitness calculation is faster. It’s written in JavaScript using the <canvas> environment. You’ll definitely get better performance using newer browser builds.

[Original image by R Stevens]

[via Waxy]

[Cameron Adams] recently appeared on a panel about JavaScript libraries. He represented the hard working coder that still wrote everything from scratch. He wanted to make something mindblowing for the audience. He ended up creating the JS-909 drum machine entirely in javascript without relying on libraries or flash. While he makes no claims of compatibility, it certainly is a nice bit of kit.

[via Waxy]