Archive for the ‘ Software ’ Category

Blink(1) + Google Latitude = “Where’s Daddy?”

A while back, I backed a Kickstarter: Blink(1) – The USB RGB LED. In a world of next-day instant-gratification deliveries, it’s always a pleasant surprise when something you totally forgot about ordering turns up.

It fits neatly into the spare USB port under an Apple keyboard.

2012-12-13 20.18.07

Time for a Pomodoro hack – make something useful in 25 minutes. No time for over-engineering – hack fast!

After a long delay on the train yesterday and my kids calling up to ask if I was nearly home yet, I knew exactly what I wanted to build…

The “where’s daddy?” indicator:

  • Blue -> home (or near home)
  • Red -> work
  • Green -> commuting.

Ingredients:

Timeline:

  • Minutes 0-3: Unpack Blink(1), download command line tool, and test it out. Looks good.
  • Minutes 4-14: Read the API docs for Google Latitude. Tried really hard to get authentication working but realized I was burning time. Arrrg, the pressure – this is taking too long! Aborted and looked for a quicker way.
  • Minutes 15-18: Found a quicker, hackier way to get Google Latitude data. Worked!
  • Minutes 19-22: Hacked up a quick Python script to poll Google Latitude, and convert the coordinates to a value from 0.0 to 1.0 where 0.0 is home, 1.0 is work and 0.5 would be half way between.
  • Minutes 23-25: Based on the number, call the blink1-tool command setting the color to indicate my location.

2012-12-13 20.18.18 2012-12-13 20.18.29

Here’s the code:

https://gist.github.com/4282399

(Ok, I cheated a little – I spent another Pomodoro cleaning up the code, adding comments, etc and another 2 Pomodoros writing this blog post).

2012
12/14
CATEGORY
Electronics
Geek
Software
TAGS

2 comments

Resistor color codes – now in DuckDuckGo search results

Remember a few weeks back I announced resisto.rs, a no-frills resistor color code calculator?

Welllll, if you happen to be a user of DuckDuckGo, it’s now even easier. See the resistor colors directly in your search results!

 

Image

Try it out at DuckDuckGo.

And thanks to DuckDuckGo for making it so easy to extend your search engine.
Here’s the code.

2012
12/05
CATEGORY
Geek
Software
TAGS



1 comment

resisto.rs

I never have a resistor color chart handy when I need one. So I built a little web-app. Fast loading, simple, mobile friendly, and to the point.

http://resisto.rs/

resisto.rs

2012
11/03
CATEGORY
Software
TAGS


6 comments

Updated website for Smoothie Charts

Smoothie Charts has a new website. Rather than add to it, I ended up taking stuff out. It’s simple and to the point. It also works well on mobile / tablets.

http://smoothiecharts.org/

Image

2012
09/08
CATEGORY
Software
TAGS


Comments Off on Updated website for Smoothie Charts

Driving 16 LEDs from a Raspberry Pi, using a shift register

Just received a Raspberry Pi.

Thought it would be fun to try and hook the GPIO pins up to a shift register. This would allow a few pins to drive many more.

 

2012
05/24
CATEGORY
Electronics
Geek
Software
TAGS



Comments Off on Driving 16 LEDs from a Raspberry Pi, using a shift register

A 3D WebGL GCode viewer, for understanding 3D printers

Towards the end of 2011, I built a 3D printer (RepRap Prusa Mendel). It took 6 weeks of evenings and weekends.

Here it is, printing an Octocat I found on Thingiverse:

Image

Image

Image

To help understand the model better, I created a WebGL based tool that can view GCode (the set of movement instructions sent to the printer).

Image

It’s built on MrDoob’s (excellent) three.js library, which brings 3D programming to mortals.

If you work with .gcode files, try it out:

Code is over on GitHub:

And here’s a full set of photos journaling the building of the printer, and some things I’ve printed with it:

2012
04/01
CATEGORY
Software
TAGS



2 comments

MSP430 + ShiftBrite

I like the Texas Instrument MSP430 microcontroller. It’s cheap, low-powered and has tons of features. You can get a complete development board, with embedded debugger, software and 2 controllers for $4.30!

I also like the macetech ShiftBrite RGB LED modules. Makes it easy to add a bit of color to electronics projects.

So here’s a library that makes it easy to control a ShiftBrite from an MSP430:

2011
10/15
CATEGORY
Electronics
Geek
Software
TAGS



1 comment

Webbit + SiteMesh = …. well, Webbit and SiteMesh

SiteMesh is now available for Webbit Server:

Tutorial here: https://github.com/joewalnes/webbit-sitemesh

2011
08/14
CATEGORY
Software
TAGS





Comments Off on Webbit + SiteMesh = …. well, Webbit and SiteMesh

A Simple Good Looking Context Menu, for jQuery

Yes, there are loads of context menu plugins already. But they require a fair amount of work to make them look good.

This one is easy to use, small, and looks good.

Demo

Features

  • Tiny library. Only dependency is jQuery.
  • Simple API.
  • Looks good out of the box, with no additional tweaking.
  • Designed to look and behave like a standard Windows context menu.
  • There’s so little code, it should be easy to add your own custom features.

The menu looks like this:

Installation

Include the files jquery.contextmenu.css and jquery.contextmenu.js in your page <head>. You also need jQuery. It is recommended that you use the HTML 5 DOCTYPE to ensure rendering consistency.

<!DOCTYPE html>
<html>
  <head>
    <script src="jquery-1.6.2.min.js"></script>
    <script src="jquery.contextmenu.js"></script>
    <link rel="stylesheet" href="jquery.contextmenu.css">
    ... rest of your stuff ...

You can get the files from here:

Usage

The plugin introduces a contextPopup() method to the jQuery object.

Assuming you have an element that you’d like to bind a context menu to:

<div id="mythingy">hello</div>

You can wire up a context menu like this:

$('#mythingy').contextPopup({
  title: 'My Popup Menu', 
  items: [ 
    { label:'Some Item',
      icon:'icons/shopping-basket.png',
      action:function() { alert('clicked 1') } }, 
    { label:'Another Thing', 
      icon:'icons/receipt-text.png', 
      action:function() { alert('clicked 2') } },
    // null can be used to add a separator to the menu items
    null,
    { label:'Blah Blah', 
      icon:'icons/book-open-list.png', 
      action:function() { alert('clicked 3') } }
  ]});

Icons

The icons should be 16×16 pixels. I recommend the Fugue icon set (shadowless).

Go get it

It’s over on GitHub:

2011
07/22
CATEGORY
Software
TAGS



5 comments

A slide-show in 2 lines of JavaScript

A while back, I needed to create a quick slide-show. I decided to hack it up in HTML – mostly to make it easier to track the diffs in version control and make it easy to distribute. There are many frameworks out there to build sexy HTML based slideshows, but I only had 10 mins to prepare and didn’t want to take the chance of hitting a road block – so I did it myself from scratch. Here’s how…

Step 1: Content (HTML)

Firstly, let’s get some content on the page. In my case, I just had a list of sentences – one per slide. But you could of course do whatever you like here – embed images, bullet lists, etc.

<!DOCTYPE HTML>
<html>
  <head>
    <title>My slides</title>
  </head>
  <body>
    <section>This is the <em>first</em> slide</section>
    <section>This is the <em>second</em> slide</section>
    <section>This is the <em>third</em> slide</section>
    <section>This is the <em>penultimate</em> slide</section>
    <section>And this is the <em>final</em> slide</section>
  </body>
</html>

I used the HTML 5 section element, as that is the most semantically relevant tag. And because I’m using HTML 5 tags, I added the HTML 5 DOCTYPE.

Here’s how it looks: Example 1

Step 2: Transitions (JavaScript)

Firstly, a bit of CSS to make each <section> cover the entire page, and hidden when the page loads (imagine a deck of cards, but you can’t see the first one yet).

<style>
  section { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; }
</style>

Next, a bit of JavaScript at the bottom of the page to find the first section and fade it in when the page loads. I used jQuery because it makes it really easy to express this stuff.

<script>
  var currentSection = $('section').first().fadeIn();
</script>

This is assigned to a the variable “currentSection” as we want to keep track of which slide we’re on for the transitions.

Now the transition. What I want to say is… “whenever the body is clicked or a key is pressed, fade out the current section, find the next section (which will now be referred to as currentSection), and fade that in”.

With jQuery, that’s:

$('body').bind('click keypress', function() { currentSection = currentSection.fadeOut().next('section').fadeIn(); });

So now we have transitions (click or keypress).

Here’s how it looks: Example 2

Step 3: Prettify (CSS)

Now make it look how you want. Here’s the CSS I used:

<style>
  body    { color: #ffffff; background-color: #000000; font-family: arial; font-size: 40px; -webkit-user-select: none; }
  section { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; text-align: center; padding-top: 200px; }
  em      { color: #ffff00; font-family: serif; font-size: 150%; }
</style>

That’s all.

See the final result: Example 3

An advantage of building it yourself is you’re in complete control, and can make it do, well, anything.

Oh, and here’s the original slideshow I hacked this up for: 10 reasons why I’m not a cool Java developer (a 5 minute lightning talk at the Google Open Source Jam)

2011
02/08
CATEGORY
Software
TAGS
3 comments