Camera-B-On TV-B-Gone

Camera-B-On Switch

I have created a Camera-B-On TV-B-Gone. This fairly simple mod allows me to use my TV-B-Gone as a camera remote for my Nikon D90. In fact, this will work as a shutter remote for a lot of Nikon cameras.

If you have a USBTinyISP you can easily make a Camera-B-On by upgrading your TV-B-Gone.

Download Source CameraBOn.zip

Why make a Camera-B-On out of a TV-B-Gone?

I’ve made camera remotes before using an arduino board and an IR LED, but there are issues with getting a good range and the form factor is a little bulky.

The Tv-B-Gone is compact, effective and comes built with the ability to have 2 states making it an attractive option. The Tv-B-Gone is about $10 cheaper than a brand name wireless release with the added bonus that you can fuck up TVs. Plus, the Tv-B-Gone was built to be a universal remote and it would be fairly easy to extend it to trigger many cameras. Right now my model only triggers Nikon cameras but it would be really easy to add others.

Unfortunately, most cameras need to be set to “remote” mode for this to work, so it’s not like you’re going to be triggering other people’s cameras – at least not to my knowledge. A guerrilla camera tool would be fantastic, but I don’t think it’s feasible.

1. Adding the Nikon code

The first step was determining the IR Code that would trigger my camera. When I built the arduino version of the shutter release, I used Lucky Larry’s arduino intervalometer code, which includes the timing I needed.

Armed with the timing information, I downloaded the source code and read Lady Ada’s notes on the TV-B-Gone.

The program on the TV-B-Gone microcontroller cycles through about 115 known TV “power” codes. Each signal code is a series of very fast flashes of infrared light generated by an IR LED on a remote. These patterns of on and off times are chosen to try to avoid triggering the wrong devices. A camera’s wireless shutter release remote operates the same way.

For the Nikon wireless shutter the times look like this, in microseconds:
2000 on, 27850 off,
390 on, 1580 off,
410 on, 3580 off,
400 on, 63200 off

This signal is sent twice every time the shutter is meant to be “released”.

With the TV-B-Gone, the TV codes have been compressed to fit as many as possible on the ATTINY85V chip. Fortunately, Lady Ada describes how this happens well enough for me to do the same conversion by hand:

  1. I converted Lucky Larry’s times from microseconds to the appropriate unit by dividing by ten – I don’t think there is a name for that unit, but it’s the value used in the source code.
    const uint16_t code_nikonD90Times[] PROGMEM = {
    200, 2785,
    39, 158,
    41, 358,
    40, 6320,
    };
  2. I described the new value as an index in an array of on/off pairs. e.g. [0, 1, 2, 3]
  3. and converted that index value to binary: [00, 01, 10, 11]
  4. I converted those binary values to bytes and then to hex and doubled them to send the signal twice: 0x1b
  5. const uint16_t code_nikonD90Times[] PROGMEM = {
    200, 2785,
    39, 158,
    41, 358,
    40, 6320,
    };
    const struct IrCode code_nikonD90Code PROGMEM = {
    freq_to_timerval(38400),
    8,             // # of pairs
    2,              // # of bits per index
    code_nikonD90Times,
    {
    0x1B,
    0x1B,
    }
    };

I then created a .hex file with the new code added.

2. Programming the TV-B-Gone with a USBTinyISP

The next step was to program the chip with the new .hex file. This process should involve plugging the TV-B-Gone into my laptop using a USB Tiny ISP programmer and software like AVRDUDE. (Tutorial here) Unfortunately, AVRDUDE wouldn’t recognise my TV-B-Gone.

A quick search (here) seemed to suggest that the LEDs draw too much power and might interfere with the chip being recognised. The only suggestion was to disable the resistors or LEDs to program the board. I decided to continue testing and in the process accidentally blew out all four LEDs by using the USBTinyISP power and battery power at the same time. Luckily, this allowed the board to be recognised!

I made a quick trip to Creatron and picked up new IR LEDs and started again. I got the board programmed and the TV-B-Gone worked for both my camera and TV! Hooray!

3. Camera or TV/Camera mode

I decided to make one more mod to the TV-B-Gone.

The board allows you to solder a jumper to control whether it uses North America or European codes. I ditched the European codes and opted to add a camera only mode by soldering a tiny “ON” switch (or is it “NO”?) in place of the jumper. The switch sandwiched nicely between the existing switch and a capacitor. I figured it would be easy to remember “On” is for the camera mode since it’s called a Camera-B-On.

Unfortunately, I had reinstalled the working LEDs. This meant that I wouldn’t be able to program the TV-B-Gone anymore. To deal with this, but not wanting to solder another switch to the board, I created a “detachable joint” jumper>resistor connection as pictured below to purposefully break the board when needed and allow me to reprogram:
Camera-B-On detachable joint

Here’s a self portrait from the above video; I guess autofocus doesn’t work:
Self Portrait

Future Revisions

The obvious next steps for the Camera-B-On is to add intervalometer functionality and support more camera brands. Intervalometers allow photographers to do time lapse. The fact that cameras don’t come with Intervalometer functionality built in baffles me – it would be so easy to add.

Here’s the arduino version I built a while ago:

Posted in Projects | 4 Comments

Paper Dolls Boutonnière

DSC_3622

DSC_3638

DSC_3600

In the Summer of 2011, The Grumpy Owl, a fantastic writer and patron of the bespoke, commissioned Breeyn and I to create paper, colour change boutonnières. The boutonnières were an extension of the successful paper dolls project we created for F.A.T. 2011. The Grumpy Owl beat me to the punch (by, like, 2 years) and blogged it previously.

Paper Dolls Boutonnière from Christopher Lewis on Vimeo.

DSC_3593

DSC_3594

The boutonnières consist of a simple electronic circuit: watch batteries power an RGB LED and each colour is individually controlled using 3 pot switches, allowing for an immeasurable number of variations in colour. Each switch basically increases resistance to each colour, RGB. Hot glue dimples (or nipples, as I prefer), were glued to the outside of the RGB LED allowing for the colour to spread in more directions.

Paper Dolls Boutonnière Electronics from Christopher Lewis on Vimeo.

DSC_3603

DSC_3613

The electronics sat inside absolutely beautiful paper roses and carnations that Breeyn crafted. The paper flowers are detailed with stems constructed of silver wire.

DSC_3671

Boutonniere electrical works

Perhaps my favourite thing about this project, beyond the beauty of the end product, is the potential to change the significance of the boutonnière for different occasions. For example, Blue or purple carnations are considered a funerary flower.

DSC_3596

Posted in Projects | Leave a comment

Mobile Controlled Dress

BlinkM Colour Changes


Colour Change Paper Dress from Christopher Lewis on Vimeo.

For the past few months I’ve been collaborating with my dear friend Breeyn McCarney on a project called Paper Dolls, which debuted at [FAT] 2011. It was the first fashion show I’ve participated in and it was incredibly well received. The highlight for me was taking a bow on the runway at the end of the show; such a thrill!

Breeyn and I initially met to work on ideation together and discuss the possibilities of how technology could be included. The collection consisted of paper dresses augmented with technology. I even got to help cut and assemble some of the paper components, but it was really only a very small fraction of the time Breeyn spent designing and crafting.

The most ambitious and fantastic of the dresses was the BlinkM dress. I’m simply in love with what we built!

BlinkM Dress Backstage

The dress is controlled using a mobile application that allows the wearer, or spectators, to change the colour of the dress by simply clicking on one of 16 possible colour choices; it could really be a much higher number of choices, but 16 made for a mobile friendly and easy interface. It was designed with the expectation that a wearer could interact with others, say at a party, and allow other people to remotely control the dress. There is a potential to use the dress for any type of data visualization where colour is an indicator, but I do believe there is also an “aesthetic utility” that is being met (it’s pretty!).

There are a lot of moving parts to this. First, the dress has 7 BlinkMs embedded in it and can run stand-alone showing random colours, as it did at the [FAT] 2011 show, or connected to and powered by an Arduino board. The Arduino board and lights are controlled by a laptop. The laptop runs TinkerProxy 2 which lets a Flash Controller send the desired hue. The hue is written to my laptop from a publicly visible Web Application at colour.breeyn.com. The Flash Controller reads the hue by pulling a value from a text file; push would have been overkill and because it’s run locally the latency is fairly low with the hue being updated every 0.5 seconds:

The mobile control aspect was born from an experiment I did months ago. The apartment I live in is visible from quite far away and I’m always anxious to see which apartment is mine. I created a setup where I could use a technology called Megaphone to call a number and turn lights on and off in my apartment so that I could see which apartment was mine. I used BlinkMs so I could change the colour of the lights and distinguish my apartment from others:

The simplest of the augmented dresses were decorated with small LED throwies.

Flower Dress

Flower Dress with Throwies

More photos at http://www.flickr.com/photos/blacksanta_69/sets/72157626490971049/

Posted in Projects | 1 Comment

A Tweet Button for Flash

Tweet Button Popup Login

Tweet Button Popup Login

Recently, twitter introduced another method of sharing using a Tweet Button and I haven’t seen many AS3 or Flash friendly solutions. In fact, I’m a little surprised the folks at twitter snubbed Flash on this one – there doesn’t appear to be any Flash friendly documentation.

I suspect the Tweet Button is a direct response to the popularity of Facebook’s Like Button. At first I didn’t really see the point – there already is a way to add a type of status update button and I often don’t see the point of just jumping on the new thing. However, there are some definite advantages. You can include the following in a Tweet Button:

  • related allows you to ‘recommend’ other twitter profiles for the end-user to follow – this will show up for the end-user after they’ve submitted their comment
  • via lets you specify a screen name that will get added to the end of the post. e.g. via @blacksanta_69
  • url lets you specify the path to the page to share. This gets shortened using twitters t.co link service. The t.co service is going to be used for all twitter links in the near future
  • text value is used for  the content update

Additionally, twitter now “counts” the number of times an url is tweeted and you have the option to display that on your page. At this point, there isn’t a way to tap into the count data using the twitter api – I think you would have to rely on digging through the DOM with Javascript, and that’s not ideal. Fortunately, displaying the number of tweets seems a little tacky to me (think geocities),  so I haven’t included that in my Flash approach. However, I have to accept that, like youtube, people are probably more likely to click on things that have millions of tweets. Adding the count is something I’m going to have to do in the future.

There is also a noticeable advantage in using a branded popup that can be closed and minimizes how intrusive the sharing process can be.

Tweet Status Submission

Tweet Status Submission

Related Screen

Related Screen

Tweet Button in AS3 with Javascript Popup

I’ve decided to mimic the html Tweet Button functionality as much as possible. This means presenting the user with a custom Tweet Button in Flash, popping up a popup window on click and prepopulating the window.

The single most important thing to remember is to drop the ‘www’ when opening the popup window. This screwed me up for a while – encoding the data you send gets really murky when you post to ‘www’.

1. The Popup Javascript function needs to be added to your html page in the <head> part of the page. The width and height are hardcoded in the javascript to reflect the Twitter recommended dimensions of a Tweet window. However, this can easily be passed as a parameter from Flash if you want.

function openTweetWin (url) {
window.open(url, "tweetThis", "width=550,height=450,toolbar=no,scrollbars=no");
}

2. Create a button in flash and add the following code. It’s worth noting that this works everywhere except within the Flash IDE, so test it on the html page

//Add an Event Listener for the button
btn_tweet.addEventListener(MouseEvent.CLICK, clickTweet);
btn_tweet.buttonMode = true;

function clickTweet(e:Event):void{

//The path to the share page
var path:URLRequest = new URLRequest("http://twitter.com/share");

//using the GET method means you will use a QueryString to send the variables
//twitter likes this. This is used as an alternate method if we don’t use
//a javascript popup
path.method = URLRequestMethod.GET;

//The URLVariables class is a nice way to keep everything organised. There is the added bonus
//that we can use these values if we GET instead of using the Javascript popup.
var tweetVars = new URLVariables();
tweetVars.url = "http://www.majorcallisto.com/?p=15";
tweetVars.text = "Major Callisto rocks my world with an AS3 Tweet Button";
tweetVars.via = "blacksanta_69";
tweetVars.related = "majorcallisto: Christopher Lewis, Creative Technologist";

//Set the URLRequest to include the URLVariables
path.data = tweetVars;

//If Flash is okay with us using ExternalInterface
if (ExternalInterface.available){
//I would imagine that If ExternalInterface wasn’t available that would be caught
//with the try/catch statement – oh well.
try{
//We’re going to pass this as a string to javascript, so we have to
//"stringify" it instead of using the URLVariable + URLRequest approach
//I’m putting a dummy placeholder in the first position of the
//QueryString so that I can shuffle my variables around without
//worrying about who gets a ‘?’ instead of a ‘&’. It’s faster than
//writing a quick if statement, but commenting about it takes far more time ; )
path.url +="?d=0";
for (var each in tweetVars){
path.url += "&"+each+"="+tweetVars[each];
}

//Make a call to the openTweetWin Javascript function
//and pass it the ‘stringified’ version of the QueryString
ExternalInterface.call("openTweetWin", path.url);
} catch (error:SecurityError){
//If it doesn’t work just open a damn window.
navigateToURL(path, "_blank");
} catch (error:Error){
//If it doesn’t work just open a damn window.
navigateToURL(path, "_blank");
}
} else {
//If it doesn’t work just open a damn window.
navigateToURL(path, "_blank");
}
}

Gives you:
Get Adobe Flash player
Source FLA Here

Status updates the old way

Twitter already has a few methods of ‘sharing’ by creating a status update. With a status update you can simply add a Query String to the end of a link to Twitter. Below is the HTML only example followed by the Flash example I commonly use.

In HTML

<!– Simply take the link to twitter and add a querystring (denoted by the ‘?’) at the end with your text Use the ‘+’ symbol instead of spaces so browsers can understand (this is called escaping and can be done with javascript) –>
<a href="http://twitter.com/home?status=Major+Callisto+rocks+my+world+http://www.majorcallisto.com" target="_blank">Share This</a>

Gives you:
Share This

In AS3:

//Import the button class
import fl.controls.Button;

//Create a button and position it
var btn_tweet:Button = new Button();
btn_tweet.label = "TWEET";
btn_tweet.x = 10;
btn_tweet.y = 10;

//Add the button to the stage
addChild(btn_tweet);

//Add an Event Listener for the button
btn_tweet.addEventListener(MouseEvent.CLICK, clickTweet);

function clickTweet(e:Event){

//The path to the status page
var path:URLRequest = new URLRequest("http://twitter.com/home");

//using the GET method means you will use a QueryString to send the variables
//twitter likes this
path.method = URLRequestMethod.GET;

//The custom status message to send. Might as well let twitter worry about the char count
var tweetVars:URLVariables = new URLVariables();//escape("Major Callisto rocks my world http://www.majorcallisto.com");

//Twitter uses a "status" variable to prepopulate the page
tweetVars.status = "Major Callisto rocks my world with his Flash AS3 Tweet Button http://www.majorcallisto.com";

//Add the variables to the URLRequest
path.data = tweetVars;

//Open the page in a "_blank" (new) window and let the user worry about closing
navigateToURL(path, "_blank");
}

Gives you:
Get Adobe Flash player


Source FLA

Now if I can only customize that damn Share This Tweet Button \/

Posted in Projects | Tagged , , , | 13 Comments

QR Code Sample

Get Adobe Flash player

Kaywa QR Code Generator

This is an implementation of the libspark.org QR Code Reader created by LOGOSWARE . When the red “brackets” turn blue it has read the code.

There are lots of issues with using a QR code that I’m only just realising. For example, the Kaywa gernerator lets you choose a size of QR Code – I think the dimensions are the same between similar codes but the pixels in the image produced are different. It looks like the information is sometimes truncated for me with smaller size images. This suggests that (obviously) the code reader is very resolution dependant; my camera is low-quality and there is a chip in the lens which I think is contributing to this issue. A slightly better camera would probably be more effective.

I’m still trying to work out how exactly the QR code works. Initial dives into the class has been spent rummaging through pages and pages of two-dimensional array declarations – that suggests that these codes may not be that complex.

Posted in Uncategorized | Leave a comment