Hackszine.com

Most recent posts: page 2 of 6 1 2 3 4 5 6
Browse the complete archive by category or month.

April 25, 2008

Simple bike computer from scratch

Here's an excellent tutorial that'll show you how to build and program a bike computer using a PIC and a homemade PCB, all from scratch using free tools:

The bulk of the article that follows is to try and take the mystique out of the many steps involved in going from an idea to a finished product.
You won't of course be ready to go into full scale industrial production, but you will now be aware of the things that have to be done, and know how to do them.
We will look at and master:

Hardware steps

Making a PCB from scratch
How to use the FREE tools
Software steps

Very basic Pic source coding

Using MPASM
Getting the HEX into the PIC

With the nice months ahead, you might as well be out riding. Why not keep track of all those miles on a computer of your own design?

Simple Bike Computer - Learn how to program a PIC

April 24, 2008

Open GPS Tracker

Now this looks like fun:

The Open GPS Tracker is a small device which plugs into a $20 prepaid mobile phone to make a GPS tracker. The Tracker responds to text message commands, detects motion, and sends you its exact position, ready for Google Maps or your mapping software. The Tracker firmware is open source and user-customizable.

From the looks of things, the total cost to build a remote-operated GPS tracking unit is on the order of $100. The design uses a prepaid cell phone to receive commands and report its position via SMS.

I'm sure there are a number of boring nefarious application for this that will freak out a lot of folks, but just think about the more interesting possibilities. You could add this to a weather balloon or autonomous flying vehicle easily track it down if there were any flight problems. A bunch of people in any city could put these in their cars on a short time delay and automatically report traffic flow conditions. You could even roll your own "lo-jack" system that would let you find your car if it was stolen, only with this your car's location is only being reported to you instead of a monitoring station, actually increasing your privacy.

Open GPS Tracker

April 23, 2008

Scriptographer - Javascript for Illustrator

My friend Barrett sent along a link today to an Illustrator scripting plugin called Scriptographer. I'm sort of a slouch at Illustrator, so I had him give me the quick 411 and I must say, this is pretty cool.

If you're familiar with Javascript, Scriptographer will enable you to crank out little scripts that can generate illustrations procedurally. As an example, the bubbelbubbling script, show above, tuns your pen tool into a fountain of random bubbles that follow your drawing path. There are certain styles of artwork that could really lend themselves to a procedural drawing tool: fractals, patterns, random "particle" effects. These things would take forever to generate manually, but by defining the effect programatically, you can quickly experiment with your work in a more dynamic fashion, tweaking variables and fine-tuning your work as you go.

The project website also has a growing library of user-contributed scripts that are worth checking out. It's a good place to start for your own creations, or you may just find exactly what you're looking for, already crafted for you by another designer-coder.

Scriptographer

April 22, 2008

Encoding JPEGs client-side in AS3

I've been doing a bunch of Flash Actionscript 3 development lately at work, and one of my favorite features with the new drawing API is the ease and speed with which you can rasterize vector data and manipulate image bitmaps.

What's killer is that Adobe's as3corelib addon library finally gives us some essential tools that have been sorely lacking, none the least of which is a client side JPEG encoder. With this, you can turn any drawable object like a sprite or a movieclip into a ByteArray holding the compressed JPEG data in just a few lines of code. It's as simple as this:

import com.adobe.images.JPGEncoder; var clipbmp:BitmapData = new BitmapData (aclip.width, aclip.height); clipbmp.draw(aclip);
var jpgEnc:JPGEncoder = new JPGEncoder(90); var jpgbytes:ByteArray = jpgEnc.encode(clipbmp);

This turns the "aclip" sprite or movieclip into a rasterized, flattened, BitmapData object. The BitmapData is then run through the JPEG encoder with the quality setting of 90 and you're left with the raw JPEG-compressed image in a ByteArray object. The as3corelib also provides a PNG encoder, with which you can just use the static method PNGEncoder.encode(clipbmp).

This is perfect for saving a capture of user-generated artwork to the server. Just set the data member of a URLRequest object to the ByteArray and post it. For more detailed information on how to put all the pieces together, Henry Jones has a really thorough post of compressing JPEG data and pinging it off a server to force an image download.

Unfortunately, to trigger a JPEG download, you still need to post the image data up to a server script and have it echo it back to the browser. The difference now, though, is that you can do the compression on the client end, saving both server CPU time and the time to upload the image data. This means saving a large image is a few second process instead of taking a minute and a half.

Actionscript 3 Core Library (as3corelib)

April 21, 2008

Post your Earth Day hacks

In celebration of my favorite planet, I'd like to open the comments up to any and all Earth Day hacks, links and activities. Think of it as an opportunity to quickly catalog a list of ideas and tools that can be used for the other 364 days of the year.

Here are a few simple things that you can do tomorrow. I figure it's as good a day as any to start forming a few practical habits, so for my list, I just chose a number of things that you can easily make a regular part of your day.

Bike to work. If you need to find a route, citybikemap.com is a good user contributed resource
Compost the garbage. If you don't have a composter, here are some construction ideas from Instructables: Sinmple Pentagon Composter; Mini Wooden Portable Compost Bin; Trench Composter
Avoid the purchase of anything with excess packaging
Turn lights off when not in use. Convert remaining incandescent bulbs to CFL
Check faucets and toilets for leaky valves. For your toilets, shut off the water while you are at work and see if the water level goes down in the tank. It's a common problem that's easy to fix.
Print no emails.
Bring a mug to work and use it instead of styrofoam or paper cups.
Reconnect with nature: start a garden; go for a hike; take the kids out and identify some plants and birds.
Reclaim some of the yard for native plants and grasses.
Encourage others to do the same, and share your own Earth-friendly tips and hacks.

You may be more or less ambitious, but I think this represents something that's feasible for much of the year. It'd be cool to get a read on what the hacker community is doing to make a positive impact on the globe, so make sure to post your own Earth Day hacks and resolutions in the comments.

April 20, 2008

64HDD - PC hard drive for your Commodore 64

I've been searching for a way to resurrect my old C64 in all its glory, so I can someday try to introduce my son to programming. The two problems I've run into is that I've lost most of my software, and I've only been able to find a couple of blank floppies. It's only an assumption they will still hold data reliably.

I came across the 64HDD project. It's a promising looking solution to my problem, and looks like it's been actively developed since 1999. Using a DOS PC with a parallel port and a xe1541 cable, pictured above, you can supposedly use the PC as a mass storage device for the C64. Essentially, it turns your PC into a 1541 floppy drive emulator, so you can load and save files on your C64 without trying to track down a working 1541 or disk media.

It also means that you could presumably download a bunch of disk images using your broadband connection, shove them onto a hard disk, and then access everything without having to rifle through piles of disks to find the program you want to run.

Has anyone used this before, or do you have any other recommendations or ideas for bringing a legacy system back to life?

64HDD

April 19, 2008

Manipulating Mac keyboard LEDs through software

Amit Singh, the Google Mac Team hacker who taught us all how to use the Mac motion sensor as a human interface device and manipulate the keyboard backlight on the MacBook Pro, wrote a short program that demonstrates how to control the LEDs on your keyboard through a user space program:

If you have an irrepressible urge to turn these LEDs on or off through software, here is a program that shows you how. (Note that the program only manipulates the LEDs -- it will not actually cause caps lock or num lock to be engaged.) The program also serves as an example of how to do user-space Human Interface Device (HID) programming through the I/O Kit.

I'm not sure what you could use this for, but that's for you to sort out, right?

Manipulating keyboard LEDs through software
Reading and manipulating the keyboard backlight on the MacBook Pro
Hacking the sudden motion sensor

April 18, 2008

Tresling - arm wrestling game controller

Meet Tresling, a newfangled competitive sport which combines the physical challenge of arm wrestling with the mental intensity of Tetris. This video has been making the rounds. It's so over the top, I can't help but appreciate it:

The site is scant on details, but as far as I know, this represents the first arm-wrestling human computer interface. The NES brought us guns and running pads. The Wiimote a tennis racket, fishing pole, and boxing glove. If you can get past the initial craziness of Tresling, it's actually an interesting hack in that it's a completely new category of game play made possible by a clever homebrew controller.

Tresling: Arm Wrestling + Tetris

April 17, 2008

SwashBot - robot from a helicopter

CrabFu's latest project, the SwashBot, is a 3-legged radio controlled robot built from RC helicopter guts. The three servos that would normally affect the swashplate control the position of the three legs. Instead of tilting or raising the swashplate, the control inputs move the robot from side to side or up and down in a surprisingly organic-looking way. Here's a video:

I think what I like best about this is its simplicity. You could make one of these guys in an afternoon using the parts from a standard RC helicopter, some hot glue, and a few extra servo horns. I'm not sure how the helmet was made, which is arguably what makes this little bot look so bad ass, but the guts would only take a few hours to put together. Pure genius.

CrabFu's SwashBot [via Makezine]
More of CrabFu's Steam Toys

April 16, 2008

HOWTO - fix a broken NES

If blowing on the Metroid cart and shimmying it carefully into the system isn't working for you anymore, don't start looking to replace your old NES just yet. Retro Gaming Hacks author, Chris Kohler, published this video howto on repairing an old NES.

The 72 pin connector that the game cartridges plug into are notorious for becoming corroded and eventually failing. Thankfully, you can pick up a new connector for a few dollars and replace it easily using a phillips head screwdriver.

How to Fix Your Broken NES
Retro Gaming Hacks

April 15, 2008

Turn an ATX power supply into a lab PSU

With a couple hours of work, it's pretty simple to pull the power supply from an old PC relic and turn it into a pretty decent bench system for powering your electronics projects. The standard ATX power supplys that you find in desktop computers have regulated 5 and 12 and 3.3 Volt outputs with sufficient power for most small project needs. You probably have a few of these just collecting dust in the basement, which means you could have a test bench PSU for quite a bit less than the 80 bucks you'd drop for one on
eBay.

WikiHow and Instructables both have a decent howto on the subject. As always, be careful when working with high voltage electronics. Nobody wants "almost saved $80" on their epitaph, so mind those capacitors.

Convert a Computer ATX Power Supply to a Lab Power Supply
ATX -> Lab Bench Power Supply Conversion

April 14, 2008

Second Life on an Apple II

InexorableTash wrote an Apple II program in assembly that receives streaming video from a Windows PC over a 115kbps serial connection. Why? So his nautilus avatar could wander about in Second Life on hardware:

For another fun example of new software on the Apple II, check out this video of a Wolfenstein-like game called "Escape from the Homebrew Computer Club 3D". In this game, the Apple is doing all the work, no external PC needed:

Some people might say that this sort of stuff has no real practical purpose, but it seems to me it's an important tribute to personal computing history. It puts the last 30 years of technology in perspective.

I can't help but wonder about what we've got in store for ourselves in the next 30.

Second Life on an Apple II [via BoingBoing]
Escape from the Homebrew Computer Club 3D

April 13, 2008

Nice overview of the YouTube API

I caught this self-referential tutorial on YouTube today which walks you through the basics of the YouTube API. It appears to be quite simple to develop Javascript or Flash applications that can control or interact with the YouTube player, or even completely reskin the interface.

What I didn't know until recently was that the API has provisions for allowing your application to upload videos and post comments. You can even authenticate users and allow them to interact with the YouTube backend through your private application. It looks like you can do just about everything programatically except remove the YouTube watermark on the video.

YouTube Developer's Guide
Developer API Blog

April 12, 2008

Javascript Super Mario

CupBoy from the Nihilogic blog wrote a Javascript Super Mario engine which compresses down to just 14K. This includes all of the audio and sprite data for the little demo, which are both encoded within the single Javascript file.

The sprites are stored in custom encoded strings in a format that only allows 4 colors for each sprite but in turn only takes up around 40-60 bytes per sprite.
We also have MIDI music embedded as base64-encoded data: URI's. No music for IE, though, and it seems all the other browsers each have different, minor problems with it, but it sort of works.

It is by no means a complete clone or anything, it's not even an entire level and several key things are missing, such as mushrooms, Koopas and stuff. It was merely done as a sort of proof-of-concept and to see how small it could get.

Granted, you're not going to fit an entire, completed Super Mario in 14KB, but just think about what was accomplished here. The image at the top of this post is probably about 30K. In half the size, CupBoy has a rudimentary side-scroller rendering engine, music, simplified physics and collision detection, and most of the artwork for the original's first level.

Super Mario in 14kB Javascript
John Resig's dissection of the game's encoded data

April 11, 2008

Automatic outbound link analytics with jQuery

I had the challenge of adding Google Analytics tracking code to all the outbound links on a site I've been working on. There are hundreds of these links scattered around the site, so rather than try and edit a bunch of links, manually adding onclick handlers in an error-prone fashion, I decided to get lazy and write some code to handle it for me.

First I was thinking about doing some sort of regular expression search and replace throughout the site and database, but that reminded me of CSS3 selectors and their ability to do simple pattern matching. I've seen people apply a special style to outbound links this way, so after a few minutes of monkeying around with things, I now have a chunk of jQuery that will automatically track clicks on all outbound links.

Here it is, in a nutshell:

jQuery(function($){ // Match all anchor tags in the "maincontent" div with // urls that begin with "http" but don't contain the // string "yourwebsite.com" $('#maincontent a[href^="http"]').not('a[href*="yourwebsite.com"]').click(function(){ try { // Get the href url and toss out the "http://" var href = $(this).attr('href'); if ( href.indexOf("://") > 0 ) { // Track the page in Google Analytics as // "/tracking/outbound/www.somesite.com/foo" var outbound = '/tracking/outbound/' + href.split("://",2)[1]; pageTracker._trackPageview(outbound);
} } catch( e ) {} } }

With this running, all of my internal pages get tracked as usual, and any external links will appear as pageviews that look like "/tracking/outbound/www.somesite.com/foo".

If you link out to many different pages on several sites, keeping the full site url in the tracking code and building these deep paths is particularly useful. Google Analytics will allow you to drill down into the tree like it was normal content and quickly pull numbers on how many total outbound clicks you received (/tracking/outbound), how many went to www.somesite.com (/tracking/outbound/www.somesite.com), and how many people clicked out to a particular page on the site.

This saved me quite a bit of time and is immensely more flexible than any other outbound tracking method I've used. I hope this helps someone else. Drop me a line in the comments if this works out for you.

Update: it looks like I wasn't the first to do this. An article by Rebecca Murphey shows how to do something similar, while also adding the referring post title to the tracking code. Pretty cool stuff, I must say.

April 10, 2008

Silence your hard drive

For a buck's worth of materials, you can quiet your PC by damping your hard disk's vibration:

As the pictures show, the drive is essentially suspended on the stretched elastic. The resilience of the elastic stops all vibrations from passing from the drive to the case -- or vice versa, for that matter.
...

When I showed one of my suspended drive systems to my favorite local dealer, it was the complete absence of vibration in the case that amazed them the most. They could not tell when the PC was turned on by the usual vibration of the case. They found it eerie.

Keep in mind that you'll loose some of the conductive cooling that you get when the drive is mounted to the case, so it'd be smart to do this in cases where there is decent airflow or find a way to attach some sort of heatsink to the bungeed drive.

Hard Drive Silencing: Sandwiches & Suspensions

April 9, 2008

Air on the EeePC

There's a good post on the O'Reilly Rich Internet Application blog about running Air under Linux on the EeePC:

Adobe recently released the first public alpha version of the AIR runtime for Linux on labs. This is great news! I felt compelled to "geek out" with it, and was able to get AIR running on an Asus EeePC, although with a few minor issues.
The Asus EeePC runs a derivative of Xandros with KDE, which is not a supported Linux distribution for AIR. I got it working with a little help from the Adobe forums, and I'm very excited about it. I have never gotten into Linux desktop application development, but I think that's could soon change.

There's a thread on the Adobe forums that has guidance for running Air on Linux machines. It's a simple matter of downloading the SDK and running your applications from the command line using the adl command like so:

~/AIR-SDK/bin/adl -nodebug ~/app/META-INF/AIR/application.xml ~/app

The AIR runtime for Linux release notes are pretty clear that this is still a pretty alpha product with some unfinished features, but it's something, and if you do a lot of AIR or traditional Flash development, this would be a cool way to include Linux as a build target for your next desktop application.

AIR + Linux + EeePC [via Lebon Bon Lebon]
Adobe AIR for Linux
Running AIR on Linux (Adobe forum)

April 8, 2008

Relational database using jQuery and HTML tables

Here's a novel use for the HTML <TABLE> tag: storing client side database tables. Nick Kallen came up with a slick hack that uses the jQuery syntax to perform simple selects and joins on HTML tables. By using CSS3 selectors, you can easily target fields which match or contain your search terms, and Nick's jQuery-based API provides a simple query language, similar to a rudimentary SQL:

Today I was thinking aloud about Tree Regular Expressions and how they might make a nice query language for document databases like CouchDB. Someone pointed out that CSS3 selectors might make a great concrete syntax for this. One thing lead to another and I thought, why not build a relational database in HTML? So I did. I even got inner joins working.
Let's start with a few tables:
<table class="users">
  <tr>
    <td class="id">1</td>
    <td class="first_name">amy</td>
    <td class="last_name">bobamy</td>
  </tr> 
  ...
</table>
<table class="photos">
  <tr>
    <td class="id">1</td>
    <td class="user_id">1</td>
    <td class="url">http://www.example.com/foo.png</td>
  </tr> 
</table>
Now we can express some queries:
$('.users')
  .where('.id:eq(1)')
  .select('*')
This is equivalent to SELECT * FROM users WHERE id = 1
$('.users')
  .where('.id:eq(1)')
  .select('.id, .name')
This is equivalent to SELECT id, name FROM users WHERE id = 1

How cool is that? Check out Nick's blog post for an example of text search and an inner join. The API in his jquery.db.js is quite straightforward and only about 50 lines of code. Adding a sort function shouldn't be too difficult.

I'm pretty much convinced now that jQuery is black magic.

Building a relational database using jQuery and <TABLE> tags
Download the jquery.db.js library

April 7, 2008

Javascript marker clustering for Google Maps

Everyone who works with large data sets in Google Maps has come across the problem of displaying a bunch of markers in a small area. Not just an eyesore, displaying anything more than a hundred marker icons at a time can bog the browser down on a lot of platforms, Safari on PPC Macs delivering the most pain.

The solution is to cluster nearby markers into an aggregate marker when there are too many markers being displayed, or when markers are so close at a particular zoom level that they completely overlap. For extremely large datasets this is most efficiently done on the back-end, with successive AJAX calls refreshing the marker set from a PHP script that filters out the visible markers from the set.

You can also handle the clustering on the client side, using javascript to scan the entire set of locations and dynamically determine what's visible and what should be clustered. The downside is that you have to download the entire set and store it in the browser's memory, but unless you start getting well into tens of thousands of markers this isn't a big deal. The benefit to the client side method is that it's less complex, it lets you work around large result sets from back-end APIs that you can't control, and with ACME Labs' Clusterer javascript library it's extremely easy to code.

To use Clusterer, first download and include the Clusterer2.js file from the link below in your maps page. Then you need to instantiate a Clusterer object, passing your map object to its constructor:

var clusterManager = new Clusterer(map);

From there, you use it in place of the traditional MarkerManager or any addOverlay calls by calling the Clusterer's addMarker method. It takes two parameters, the marker to add, and a text string that will be listed in the cluster's contents when it is clicked:

clusterManager.AddMarker(marker, "Marker Description");

The cluster manager will take care of all the dirty work, only displaying items when they are within your view, and dynamically clustering them appropriately when there are too many on the screen at once. When one of the clusters is clicked, it will display a list of the locations inside of it. Most of what you'd want to tweak, like the threshold at which to start clustering and the icon used for representing a cluster, are all adjustable through the API via some self-explanatory methods such as SetMaxVisibleMarkers(n) and SetIcon(icon). Follow the link below for more information, or read the source for a few of the less-documented options.

Clusterer documentation
Clusterer source

April 6, 2008

Windows Mobile del.icio.us plugin

If you're a del.icio.us power user and you use Windows Mobile, you've probably missed the del.icio.us plugin that's available in desktop browsers like IE and Firefox. Dale Lane took this problem as a challenge and coded a nice little Pocket IE plugin that adds a del.icio.us submittal form to the browser's menu.

This is not as trivial as I expected - it took hundreds and hundreds of lines of code just to get a new entry in the Internet Explorer's menu that gets me access to the web browser object as an IWebBrowser2. And (perhaps especially so for someone who has been getting a little lazy with Java and C#! ), some of it is a little intricate and complex.
Still, once done I could use my access to the browser to launch my "post to del.icio.us" form and prefill it with the URL and page name of PIE's current page. From there, the form uses the public del.icio.us API to send all the info off to my del.icio.us list.

It's written in C++ and he's zipped up the full Visual Studio project. Based on the difficulty and lack of great documentation for doing something like this, this is actually a pretty solid find. If you want to make a PIE plugin, this would be a good place to start.

A del.icio.us plugin for Windows Mobile (or C++ is a pain)
Pocket IE del.icio.us plugin and source