DIY : The picturetweeting bathroom scale (aka the worst christmas present ever)

grete1

A bathroom scale is probably the last thing you would want as a christmas present. Imagine unwrapping it and trying to NOT seem insulted and hurt? Can you imagine a worse christmas present? Well, how about bathroom scales that take a picture of you, from the worst and least flattering angle, and uploads it straight to the web through Twitter and twitpic? Yes, I know, it’s a horrible idea! Which means it simply HAS to be made. So I did, or at least a working prototype!

Research – trying to find the worst angle to take the picture from!

Check out the example photos taken with the Tweeting batroom scale.

The code

The code is written in actionscript3 and compiles as an AIR app, and is largely based on the wonderful work of Rudy van der Blom which he was so kind as to share with me. He made an APP called Twicam that lets you log in to your Twitter account, snap a 320×240 picture and upload it to the web with the push of a button.

I first change the code a little and added a keylistener, that automated the image posting when you pressed a certain button (r) on the keyboard. My plan was to modify the bathroom scale and add a switch to it, and run wires from the switch to a usb keyboard emulator. I sent that version to Rudy, and then he made a version that was motion triggered, which ment that no wires where necessary. Gold! He also added a cycler that made a grid consisting of four 160×120 images. I then increased the size of the final image to 640×480, and made a small change so that the app only posted a new image after the fourth grid had filled up (instead of every time a new grid was filled), and that is what the code is like now. A work in progress for sure, and I was so much fun to work with Rudy on this. Cool guy!

Code sharing

Rudy has agreed that we can share the code with anyone who want’s it, and I will try to find time to clean it up a little and upload it here. Rudy want’s to make and AIR installer for the motion triggered version and share it from his AIR app site. So stay tuned. Leave your info in the comments below if you want to be notified when the code is online!

Improvements

I have a bug in the code that makes the image uploaded to Twitpic “off” compared to what you see on the screen when the app is running, so that needs to be fixed. I also want to add the manual switch I think, so that the software only sends pictures when someone is actually standing on the scales. The motion trigger seems a little unpredictable and slow, at least it eats almost all my macbook memory for some reason. A manual switch and a key listener would make the result smoother and more predictable, but the drawback is that you need alot more hardware to set it up.

Other uses

The motiontriggered webcam is of course a very affordable security solution with free storage on the web, and can be used for just about anything. But I also made a Twittering christmas calendar, that takes a picture of the “thief” if she opens the day in her calendar too early. It’s still just a prototype, but here are some pictures that might give you an idea on how it works.

lars


Spill: Gamer Commando 4

Et kårny lite førjulsspill jeg lagde for nrk.no/spiller i desember 2008.

“Ære og berømmelse, og en plass i Spiller.nos Hall of Fame venter. Hvem har ikke drømt om å skyte Mario, som hele tiden springer naivt i hælene etter Peach. Eller hva med å plassere et salig headshot i Rooney fra FIFA. Sistebrettet inneholder selve rosinen i pølsa; Dumme spillanmeldere får merke gamernes vrede.”

Spill det i fullskjerm

Open source flash-based sound sequenzer

I’ve been thinking alot about making a soundbased installation in Adobe Flash, using sensors and switches, and I’ve gotten around to making a few small eksperiments/prototypes as research, which I’m planning to share on this site later.

But I also found this old experiment I wrote in Flash 5 (!) and wanted to share it. It is a visual sequenzer (*) / sound toy that lets you drag icons onto a “soundstage”, each icon representing a sample. As you press play a line starts moving vertically, and as the line hits one of the icons, the corresponding sound is played. You can also click, drag and hold an icon, and move it on top of the moving line to trigger the sound. There are two types of sounds. The yellow icons trigger different “wet finger on glass” sounds, and the greywhite icons trigger sonar ping sounds.

Open Source

The code is pretty old, and there are WAY better ways of making something like this with AS3, but still, here is the source code (fla) for it (it also includes the samples, which you are free to use in any way you like).

I still think it is a pretty nice little project, but I am toying with the idea of replacing the click and drag with a webcam mounted in the ceiling, and letting people moving around on the floor trigger the sounds. I have quite a lot to learn before I can make something like that, but I’ll get there!

* Ok, so I guess it is a stretch to call this a sequenzer, but I wanted to create a fun, easy and interesting way to generate a sound collage.

Code: Showing a list of youtube videos using gdata and xslt with php


Let’s start with a little demonstration. The section below is made by calling the php-script https://pappmaskin.no/opensource/youtube/youtube.php?s=super&max=9 within an iframe:

Why iframe?
Just to make it easier to reuse and embed Youtube videos on different sites, and because it makes it easier to try out new ideas without adding messy bits to a larger project. Sort of like rapid prototyping/proof of concept before “committing” to a feature and spending alot of time integrating something you might end up throwing out.

This solution currently consists of these files:
youtube.php, takes s=whateveryouwanttofind and max=number of videos to return as GET parameters
youtube5.xsl, does all the transformation of the xml from youtube into lovely xhtml.
youtube.js, javascript file that handles clicking on the thumbnails to load a new video, using innerHtml
youtube.css, minimalist styling to keep things pretty.
swfobject.js, for embedding flash

The xslt:

<?xml version=”1.0″ encoding=”UTF-8″?> <xsl:stylesheet version=”1.0″ xmlns:xsl=”http://www.w3.org/1999/XSL/Transform” xmlns:fn=”http://www.w3.org/2005/xpath-functions” xmlns:gd=”http://schemas.google.com/g/2005″ xmlns:media=”http://search.yahoo.com/mrss/” xmlns:n1=”http://www.w3.org/2005/Atom” xmlns:openSearch=”http://a9.com/-/spec/opensearchrss/1.0/” xmlns:xdt=”http://www.w3.org/2005/xpath-datatypes” xmlns:xs=”http://www.w3.org/2001/XMLSchema” xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xmlns:yt=”http://gdata.youtube.com/schemas/2007″ xmlns:altova=”http://www.altova.com”> <xsl:output method=”html” encoding=”ISO-8859-1″ doctype-public=”-//W3C//DTD XHTML 1.0 Transitional//EN” doctype-system=”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”/> <xsl:param name=”SV_OutputFormat” select=”‘HTML'”/> <xsl:variable name=”XML” select=”/”/> <xsl:template match=”/”> <html> <head> <title>Pappmaskin.no – Youtube playlist</title> <link rel=”stylesheet” href=”youtube.css” media=”screen” /> <script type=”text/javascript” src=”youtube.js”></script> <script type=”text/javascript” src=”swfobject.js”></script> </head> <body> <div id=”youtube”> <h1>YouTube Playlist</h1> <xsl:for-each select=”$XML”> <xsl:for-each select=”n1:feed”> <xsl:if test=”n1:entry[1]”> <div class=”youtubevideo”><div id=”cur_video”> <xsl:for-each select=”n1:entry[1]/media:group/media:content”> <xsl:if test=”@type = ‘application/x-shockwave-flash'”> <embed> <xsl:attribute name=”src”> <xsl:value-of select=”@url”/> </xsl:attribute> <xsl:attribute name=”width”>480</xsl:attribute> <xsl:attribute name=”height”>385</xsl:attribute> <xsl:attribute name=”quality”>high</xsl:attribute> <xsl:attribute name=”bgcolor”>#000</xsl:attribute> <xsl:attribute name=”id”>cur_video_swf</xsl:attribute> <xsl:attribute name=”name”>cur_video_swf</xsl:attribute> </embed> </xsl:if> </xsl:for-each> </div> <!– ends cur_video –> <div id=”cur_video_title”> <xsl:value-of select=”n1:entry[1]/n1:title”/> </div> </div>    <!– ends youtubevideo –> </xsl:if> <div class=”youtubethumbs”> <xsl:for-each select=”n1:entry”> <xsl:if test=”position() > 1″> <xsl:for-each select=”media:group”> <div class=”youtubethumb”> <xsl:for-each select=”media:content”> <xsl:if test=”@type = ‘application/x-shockwave-flash'”> <a> <xsl:attribute name=”href”>#</xsl:attribute> <xsl:attribute name=”onmousedown”>PlayVideo(‘<xsl:value-of select=”@url”/>’,’http://img.youtube.com/vi/h8oBykb_Pqs/2.jpg’, ‘Youtube’, true);</xsl:attribute> <xsl:attribute name=”onclick”>return false;</xsl:attribute> <xsl:for-each select=”../media:thumbnail[1]”> <xsl:element name=”img”> <xsl:attribute name=”src”><xsl:value-of select=”@url”/></xsl:attribute><xsl:attribute name=”lowsrc”>lowsrc.gif</xsl:attribute><xsl:attribute name=”width”>100</xsl:attribute><xsl:attribute name=”height”>60</xsl:attribute> </xsl:element> </xsl:for-each> <xsl:value-of select=”../media:title”/> </a> </xsl:if> </xsl:for-each> </div> <!– ends avslutter class youtubethumb –> </xsl:for-each> </xsl:if> <!– end if on position > 0 –> </xsl:for-each> </div><!– ends class youtubethumbnails –> </xsl:for-each> </xsl:for-each> <div class=”youtubefooter” style=”clear: both; color: #999999; font-size: 0.8em;”>Disclaimer: These videos are retrieved from Youtube through a simple search. Even though the search is done with a filter to remove “inappropriate material”, it may still contain videos deemed offensive by some. Videos may or may not be in violation of international copyright law.</div> </div> <!– avslutter id youtube –> </body> </html> </xsl:template> </xsl:stylesheet>

The PHP

<?php
$searchterm = $_GET[“s”];
$maxresults = $_GET[“max”];

/* load the xml file and stylesheet as domdocuments */
$xsl = new DomDocument();
$xsl->load(“youtube5.xsl”);
$inputdom = new DomDocument();

//Example http://gdata.youtube.com/feeds/videos?format=1&vq=Ratchet+Clank:+Tools+of+Destruction&max-results=2

$inputdom->load(“http://gdata.youtube.com/feeds/videos?format=5&vq=” . $searchterm . “&max-results=” . $maxresults);

//$inputdom->load(“youtube.xml”);
//if you want to test with a local file

/* create the processor and import the stylesheet */
$proc = new XsltProcessor();
$xsl = $proc->importStylesheet($xsl);
//$proc->setParameter(null, “titles”, “Titles”);
//not in use, but needed if you want to pass variables into the xslt from php

/* transform and output the xml document */
$newdom = $proc->transformToDoc($inputdom);
print $newdom->saveXML();
exit;
?>

Podcastplayer in flash! Php script to convert RSS to XSPF

Big Sound, Little Ears

photo credit: …Tim

Create your own free flash based podcast / mp3 player

I like the flashbased XSPF mp3 player. I had planned to rewrite the actionscript so that it could read rss with enclosures instead, but I liked the possibility to have unique pictures on each track, and I wanted to check out the XSPF format.

So I wrote a PHP script that uses DOMXML and xpath to convert an existing rss to xspf, it even have a search function of sorts.

I’m going to use it on a project I’m working on after a little more tweaking but I wanted to share it with other people who has a podcast and want a quick open source way to present their podcasts on their website.

Localino meets elePHPant
photo credit: Chregu

<?php

$path = “http://podkast.nrk.no/program/radioresepsjonen.rss”;

$showfile = file_get_contents($path);

if(!$doc = domxml_open_mem($showfile)) {

echo “Error while parsing the document…”;

exit;

}

$xpath = xpath_new_context($doc);

$root = $doc->document_element();

//debugging

//echo domxml_version();

//var_dump(xpath_eval_expression($xpath, ‘/rss/channel/item’)); //http://no.php.net/manual/sv/function.xpath-eval-expression.php

//debugging – memory dump

//echo $doc->dump_mem( true, ‘UTF-8′ ) ; //http://no.php.net/manual/sv/function.domdocument-dump-mem.php

//print ” Path: <a href=\”$path\”>$path</a><br>\n”;

//print ” Showfile: <a href=\”$showfile\”>$showfile</a><br>\n”;

//print ” domDoc: <a href=\”$domDoc\”>$domDoc</a><br>\n”;

//print ” root: <a href=\”$root\”>$root</a><br>\n”;

// playlist plus search function

$playlist = $xpath->xpath_eval(“/rss/channel/item[contains(translate(title,’abcdefghijklmnopqrstuvwxyzæøåö’, ‘ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅÖ’), ‘”.strtoupper($_REQUEST[“search”]).”‘)]”);

//debug

//print “playlist found: “.count($playlist->nodeset).”\n”;

print “<?xml version=\”1.0\” encoding=\”UTF-8\” ?>\n”;

print “<playlist version=\”0\” xmlns=\”http://xspf.org/ns/0/\”>\n”;

print ” <title>Put clever title here, or get it from the rss</title>\n”;

print ” <annotation>Description of some sort</annotation>\n”;

print ” <creator>Who made this</creator>\n”;

print ” <info>http://link to more info</info>\n”;

print ” <location>http://yourdomain.com/doesnreallymatter/rss2xspf.php</location>\n”;

print ” <license></license>\n”;

print “<trackList>\n”;

foreach ($playlist->nodeset as $tracklist) {

$description = “”;

$title = “”;

$enclosureurl = “”;

//$enclosureurl = $tracklist->get_attribute(“length”);

//$spor = $tracklist->get_attribute(“spor”);

//$sangid = “$arkivnr-$spor”;

foreach ($tracklist->child_nodes() as $child) {

if ($child->node_name() == “title”) $title = $child->get_content();

if ($child->node_name() == “description”) $description = $child->get_content();

if ($child->node_name() == “enclosure”) $enclosureurl = $child->get_attribute(“url”);

}

print “<track>\n”;

print ” <location>$enclosureurl</location>\n”;

print ” <image>hassan/bilder/else150.jpg</image>\n”;

print ” <annotation>$title</annotation>\n”;

print ” <info></info>\n”;

print ” <info_text>$description</info_text>\n”;

print ” </track>\n”;

}

print “</trackList>\n”;

print “</playlist>\n”;

?>

Copypaste the above code into a new file and save it as rss2xspf.php and upload it to your server to test if you have domxml support. (If you don’t it will say something like Call to undefined function: domxml_open_mem. In that case, tough luck, find a new host.)

Download the exellent XSPF flash based mp3 player here: XSPF Web Music Player (Flash) – Plays MP3 on your website

Read more about XSPF over at http://www.xspf.org/

And please drop a comment if you use it and like or have problems.

You can also send me an email at morten.skogly _at_ gmail dot com.

There’s a lot of room for improvement, like using the rss image in place of a staticly defined image, or inserting a random image, or doing som web2.0 stuff like snarfing the images from amazon or whatever, please let me know if you make something superclever with it :)

Idea for your site: You can use del.icio.us to make your own mp3 podcast, visit bands you like bookmark the mp3s you like with del.icio.us, go there to get the rss, and your set to go, you have the same music on your site as on your ipod :) (You might have to use feedburner.com as a gobetween to create the enclosures and make it itunes-compatible.)

Updated: 06.04.2008: Unless you really really digg the XSPF player linked up above, I suggest you use the superb Jeroen Media Player instead. It is open source and supports both XSPF and RSS directly. It takes up more space, but it has video support and a very cool javascript api.

Tom Igoe – Physical Interaction Design Using Processing

Warning: file_get_contents(): php_network_getaddresses: getaddrinfo failed: Name or service not known in /customers/7/5/b/pappmaskin.no/httpd.www/wp-content/plugins/delicious_screenshots/wp_delicious_sceenshots.php on line 75Warning: file_get_contents(http://feeds.del.icio.us/v2/json/mskogly/physicalcomputing?Fcount=3): failed to open stream: php_network_getaddresses: getaddrinfo failed: Name or service not known in /customers/7/5/b/pappmaskin.no/httpd.www/wp-content/plugins/delicious_screenshots/wp_delicious_sceenshots.php on line 75Warning: Invalid argument supplied for foreach() in /customers/7/5/b/pappmaskin.no/httpd.www/wp-content/plugins/delicious_screenshots/wp_delicious_sceenshots.php on line 79

Notes from a presentation by Tom Igoe
at FlashForward 2005.

Lecture notes:
http://www.tigoe.net/workshops/flashforward05/
http://tigoe.net/pcomp/

Using the serial port and a pc to create interactive art and toys.

One of the more liberating ideas that’s come out of the past couple decades is amateur software development. Instead of seeing software as something that’s handed down from “the professionals”, we see it as a very flexible toolkit. This attitude hasn’t yet taken hold on the hardware side. The basic physical interfaces we’ve got for the computer don’t meet the demands of every profession, and there are many needs that go unmet because there’s just not a big enough market for a hardware vendor to bother making a specialized widget. We’ve already accepted the idea that if no one makes the software you need, you can develop it yourself. The same is true, or can be, with hardware. This is the spirit behind physical computing.

About InstantSOUP.

InstantSOUP is intended for an audience of design students – interaction design, product design, architecture – and for people who work with Macromedia Flash™ and Action Script.
It makes the first steps into the world of physical prototyping almost as easy as preparing Instant Soup.
InstantSOUP is a way to connect the virtual and physical worlds. It teaches how to make physical input devices for games, how to connectrepurposed electronic gadgets to Flash, how to activate physical objects from remote locations and even how to create little robots.


Adobe to acquire Macromedia


GODAMMIT!

Macromedia – Press Room : ADOBE TO ACQUIRE MACROMEDIA

ADOBE TO ACQUIRE MACROMEDIA

Combined Company to Deliver Industry-Defining Technology Platform for Rich, Interactive Content

SAN JOSE, Calif. – April 18, 2005 – Adobe Systems Incorporated (Nasdaq: ADBE) today announced a definitive agreement to acquire Macromedia (Nasdaq: MACR) in an all-stock transaction valued at approximately $3.4 billion.

The combination of Adobe and Macromedia will provide customers a more powerful set of solutions for creating, managing and delivering compelling content and experiences across multiple operating systems, devices and media. Together, the two companies will meet a wider set of customer needs and have a significantly greater opportunity to grow into new markets, particularly in the mobile and enterprise segments.

“Customers are calling for integrated software solutions that enable them to create, manage and deliver a wide range of compelling content and applications – from documents and images to audio and video,” said Bruce Chizen, chief executive officer of Adobe. “By combining our powerful development, authoring and collaboration software – along with the complementary functionality of PDF and Flash – Adobe has the opportunity to bring this vision to life with an industry-defining technology platform.”