Pappmaskin.no

Whiiiiiiiiiiiiiii! If this works there should be about 4 thumbnails on this page, showing links bookmarked using Delicious, and tagged with “art”.

Your World of Text

Shop for Unique & Handcrafted Gifts. Every Order Guaranteed.

This Disgruntled Artwork Perpetually Sells Itself on eBay – eBay – Gizmodo

http://fascinationworkshop.net/prototypes/

See all bookmarks tagged art by mskogly on Delicious.

Download:

Download wp_delicious_snapcasa.zip here, version 0.5 of my very first wordpress plugin.

Usage:

(ps, right now you have to hack it if you want to see your own bookmarks, mskogly is hardcoded  :) Working on that :)

What’s next:

I’m considering a few other thumbnailing services:

http://www.thumboo.com/

http://webthumb.bluga.net/home

http://www.pageglimpse.com/

http://www.scurlr.com/

Tonights nerdfest will include trying to use the SnapCasa and del.icio.us to generate a lovely page full of thumbnails, one for each url.

Ingredients:

1. My 100 latest bookmarked urls from del.icio.us: http://feeds.delicious.com/v2/rss/mskogly?count=100
2. A SnapCasa login account.
3. A server that supports xslt transformation. (I’m running MAMP on my macbook, and pappmaskin is hosted on One.com)
4. A text editor. I’m using Dreamweaver for this, since it has some pretty good tools for building xslt. (Take a look at the Adobe Livedocs for more info on using it).

(More after the break)

Read the rest of this entry »

My sexy colleagues in NRK Mp3 are selling themselves on the auctionsite qxl.no for a good cause (Blå Kors), and I wanted to cook up a fast way to display the latest bid on the NRK Mp3 website.

Here is the result so far:

Not very fancy to say the least! But it does what it needs to: Fetch the latest bid on a particular auction.

Because I have to display it on bort nrk.no/mp3 and nrkp3.no (an externally hosted site), I decided to go for Flash, and using the new and lovely XML functionality of AS3.

It is in use on http://nrkp3.no/programledere-til-salgs/ and the frontpage of http://nrk.no/mp3 until the 19th of october at least.

Todo:
Make the code more reusable, everything is basically hardcoded.
Update: The php is now dynamic, send AuctionNr as a parameter to retrieve the auction you want like this: http://pappmaskin.no/opensource/qxl/qxlproxy.php?AuctionNr=549364732 . Next: Send in AuctionNr using the embed code.

Downloads:
QXL.zip.

The zip contains:

• qxl.fla (as3, made with flash cs3, very easy to understand what to change).
• qxlproxy.php (used to get around crossdomain-issues in flash)

Old QXL webservice documentation:
http://hjelp.qxl.no/avansert:xml_api

QXL Old api:
http://www.qxl.no/accdb/viewItemXML.asp?IDI=549689208

QXL New api, received by mail after contacting QXL:
http://www.qxl.no/accdb/viewitemxml.asp?AuctionNr=549689208&Catg=11395&ListingType=0&ListingSort=1&LanguageNr=0&PageNum=1

Resources:
Good as3 xml tutorial on Gotoandlearn.com

More about this years charity event
http://nrk.no/tvaksjonen/

I downloaded my first copy of Processing (Processing.org) a few years ago, but I have never gotten past the initial few demos and small tutorials. I’ve been interested in generative computer art for many years, evt since I first saw the work of Marius Watz in the mid nineties and had a stint reading dadaist poetry and cutups, but I’ve never had the time to play with this stuff myself. Or the brains to handle the math, hehe. But then I came across this tutorial in Computer Arts #149 (The June 2008 issue), where there are a few really interesting tutorials, which basically gives you enough info to understand the key consepts that you need to create some very interesting apps, like the one below (slightly modified of course, I added random colors among other things).

Read more and see the running java app after the break.
Read the rest of this entry »

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.

Let’s start with a little demonstration. The section below is made by calling the php-script http://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;
?>

Norsk? Du finner en norsk versjon av denne artikkelen på NrkBeta.no

I recently made a Gameinfo service for spiller.no. It pulls in licenced gameinfo from our partner GameXplore though XML, and combines it with a search for related videoes from Youtube before it is presented on the page.

Example: FIFA STREET 3 Gameinfo – NRK Spiller

Youtube + Google Api
I made the Youtube part as a standalone page, and I include it with iframe. The reason I used Iframe was to make it easily reusable on other projects where it would fit to do something similar. I can for instance include it in my blog like this:

<br />

The page takes any search term as a GET, in this example it simply queries the youtube google api with the title of the game, with a few extra parameters (limit on the number of returned movies + a filter to remove “adult content”). I spent some time to create the XSLT to convert the xml from youtube/google to html, which is basically the same format for many of Googles services. I spent hours trying to find out if someone had created this already, but since I couldn’t find anything I had to create it myself. If you want to learn more about the youtube api I suggest starting at the Youtube Api group on Google Groups.

Open source

I have gotten some emails asking for the xslt for the youtube search, so I wanted to share it here:

This is my input, an example Youtube search

This is my example output:

http://pappmaskin.no/opensource/youtube/youtube.php

And here is the xslt I used to produce the above result:

http://pappmaskin.no/opensource/youtube/youtube3.xsl

If you have any questions, feel free to ask in the comments.

Spam? Porn? Nope!
I was of course a little worried about what the youtube search would return, so when testing I went through quite a few games to see if the search returned movies that were unrelated to the gametitle, or contained nudity, but so far it looks really good, the youtube videos are actually the most interesting part of the service, so I’m really happy with it!

Blip.tv gametrailers
Yesterday I also added gametrailers to the mix, check out the gamepage for Assassins Creed for an example (click on the huge image at the top of the page) to make it play. I have bought a lisence for the wonderful Jeroen FLV Media Player which I use to present the gametrailers.

New gametrailers page, based on blip.tv
After that I spent a few minutes to create a new page that lists all the latest gametrailers published through GameXplore. I use the Jeroen Flv Media Player for this page as well. I created this yesterday, so I have to debug it a little bit before we start to promote it, and I also have to consider to increase the video buffer time, it seems like blip.tv har pretty slow servers. Right now there is a five second buffer, which should be more than enough, but even with broadband connection the video stops and buffers every five second. I don’t want people to wait forever for the video to buffer, but it is super irritating when the video stops every 5 seconds to buffer, so I have to decide what to do with it. One (hard) solution could be to download all the .flv to my server and play them from there… I am a big fan of blip.tv, they have the best player around, and their cross posting abilities are great (at least in theory, I still haven’t gotten it to work with this blog or myspace), so I am a little dissapointed to discover that the blip.tv servers (or lines?) are so slow to deliver video. (to Norway at least).

Thickbox
I love the Jquery javascript library, and I love Thickbox, so I decided to use it on the Screenshots on the site, popping them up in their own little box. I modidied the thickbox script and css slightly, replacing the animated loading gif and moved things around a little bit, and I am really happy about the outcome.

Add the spiller.no Gameinfo search to your browser

Prøv også denne: Installere søkemotor for spiller.no

So there it is, hope you like it :)

To embed the search in your site:

<div class=”placeholder”><h3>Spiller.no Gameinfo</h3>
<span style=”color: #fff; width: 160px; font-size: 0.8em;”>Sjekk ut info, screenshots, trailers og anmeldelser på nye og kommende spill:</span>
<form id=”gamesearchform” name=”gamexploresearch” enctype=”application/x-www-form-urlencoded” method=”get” action=”http://www.nrk.no/spiller/gameinfo/?”>
<fieldset>
<input type=”hidden” value=”143″ name=”task”/>
<input style=”padding: 1px 0 2px 0; width:100px; border:1px solid #F7F7F7; border-width: 0pt 1px 1px 0pt;” type=”text” value=”" maxlength=”500″ name=”finn”/>
<button type=”submit”><span>Søk</span></button>
</fieldset>
</form></div>

It’s always interesting to se other peoples error output :) But I’m a little surprised that del.icio.us is showing its soft white underbelly like this.

System error

error: Can’t call method “prepare” on an undefined value at /www/del.icio.us/comp/user/get line 13.

context:

…

9: my $usedb = ‘master’;

10: my $ret;

11:

12: if (!$auth_user) { $usedb = ‘user’ }

13: if (!exists ($db->{$usedb})) { $usedb = ‘master’ }

14: $user_name_q->{$usedb} = $db->{$usedb}->prepare(’select * from users where user_name = ?’);

15: my $query = $user_name_q->{$usedb};

16: $query->execute(lc($user_name));

17:

…

code stack: /www/del.icio.us/comp/user/get:13

/www/del.icio.us/site/search/index:59

/www/del.icio.us/site/autohandler:110

RAW ERROR

System error

error: Can’t call method “prepare” on an undefined value at /www/del.icio.us/comp/user/get line 13.

context:

…

9: my $usedb = ‘master’;

10: my $ret;

11:

12: if (!$auth_user) { $usedb = ‘user’ }

13: if (!exists ($db->{$usedb})) { $usedb = ‘master’ }

14: $user_name_q->{$usedb} = $db->{$usedb}->prepare(’select * from users where user_name = ?’);

15: my $query = $user_name_q->{$usedb};

16: $query->execute(lc($user_name));

17:

…

code stack: /www/del.icio.us/comp/user/get:13

/www/del.icio.us/site/search/index:59

/www/del.icio.us/site/autohandler:110

raw error

Can’t call method “prepare” on an undefined value at /www/del.icio.us/comp/user/get line 13.

Trace begun at /usr/share/perl5/HTML/Mason/Exceptions.pm line 131

HTML::Mason::Exceptions::rethrow_exception(‘Can\’t call method “prepare” on an undefined value at /www/del.icio.us/comp/user/get line 13.^J’) called at /www/del.icio.us/comp/user/get line 13

HTML::Mason::Commands::__ANON__(‘dbh’, ‘DBI::db=HASH(0×1b3f9d0)’, ‘user_name’, ‘mskogly’) called at /usr/share/perl5/HTML/Mason/Component.pm line 134

HTML::Mason::Component::run(‘HTML::Mason::Component::FileBased=HASH(0×1d0bd40)’, ‘dbh’, ‘DBI::db=HASH(0×1b3f9d0)’, ‘user_name’, ‘mskogly’) called at /usr/share/perl5/HTML/Mason/Request.pm line 1069

eval {…} at /usr/share/perl5/HTML/Mason/Request.pm line 1068

HTML::Mason::Request::comp(undef, undef, ‘dbh’, ‘DBI::db=HASH(0×1b3f9d0)’, ‘user_name’, ‘mskogly’) called at /www/del.icio.us/site/search/index line 59

HTML::Mason::Commands::__ANON__(‘all’, ‘xbox’, ‘dbh’, ‘DBI::db=HASH(0×1b3f9d0)’, ‘auth_user’, ‘mskogly’, ‘items’, 10, ‘tagview’, ‘list’, ‘tagsort’, ‘alpha’, ‘bundleview’, ’show’, ‘cookies’, ‘HASH(0×1fd6dc0)’, ‘browser’, ‘ff’) called at /usr/share/perl5/HTML/Mason/Component.pm line 134

HTML::Mason::Component::run(‘HTML::Mason::Component::FileBased=HASH(0×2028030)’, ‘all’, ‘xbox’, ‘dbh’, ‘DBI::db=HASH(0×1b3f9d0)’, ‘auth_user’, ‘mskogly’, ‘items’, 10, ‘tagview’, ‘list’, ‘tagsort’, ‘alpha’, ‘bundleview’, ’show’, ‘cookies’, ‘HASH(0×1fd6dc0)’, ‘browser’, ‘ff’) called at /usr/share/perl5/HTML/Mason/Request.pm line 1074

eval {…} at /usr/share/perl5/HTML/Mason/Request.pm line 1068

HTML::Mason::Request::comp(undef, undef, ‘all’, ‘xbox’, ‘dbh’, ‘DBI::db=HASH(0×1b3f9d0)’, ‘auth_user’, ‘mskogly’, ‘items’, 10, ‘tagview’, ‘list’, ‘tagsort’, ‘alpha’, ‘bundleview’, ’show’, ‘cookies’, ‘HASH(0×1fd6dc0)’, ‘browser’, ‘ff’) called at /usr/share/perl5/HTML/Mason/Request.pm line 760

HTML::Mason::Request::call_next(‘HTML::Mason::Request::ApacheHandler=HASH(0×1fdfe40)’, ‘dbh’, ‘DBI::db=HASH(0×1b3f9d0)’, ‘auth_user’, ‘mskogly’, ‘items’, 10, ‘tagview’, ‘list’, ‘tagsort’, ‘alpha’, ‘bundleview’, ’show’, ‘cookies’, ‘HASH(0×1fd6dc0)’, ‘browser’, ‘ff’) called at /www/del.icio.us/site/autohandler line 110

HTML::Mason::Commands::__ANON__(‘all’, ‘xbox’) called at /usr/share/perl5/HTML/Mason/Component.pm line 134

HTML::Mason::Component::run(‘HTML::Mason::Component::FileBased=HASH(0×1b23360)’, ‘all’, ‘xbox’) called at /usr/share/perl5/HTML/Mason/Request.pm line 1069

eval {…} at /usr/share/perl5/HTML/Mason/Request.pm line 1068

HTML::Mason::Request::comp(undef, undef, undef, ‘all’, ‘xbox’) called at /usr/share/perl5/HTML/Mason/Request.pm line 338

eval {…} at /usr/share/perl5/HTML/Mason/Request.pm line 338

eval {…} at /usr/share/perl5/HTML/Mason/Request.pm line 297

HTML::Mason::Request::exec(‘HTML::Mason::Request::ApacheHandler=HASH(0×1fdfe40)’) called at /usr/share/perl5/HTML/Mason/ApacheHandler.pm line 134

eval {…} at /usr/share/perl5/HTML/Mason/ApacheHandler.pm line 134

HTML::Mason::Request::ApacheHandler::exec(‘HTML::Mason::Request::ApacheHandler=HASH(0×1fdfe40)’) called at /usr/share/perl5/HTML/Mason/ApacheHandler.pm line 793

HTML::Mason::ApacheHandler::handle_request(‘HTML::Mason::ApacheHandler=HASH(0×1ad1730)’, ‘Apache=SCALAR(0×1fdd840)’) called at (eval 43) line 8

HTML::Mason::ApacheHandler::handler(‘HTML::Mason::ApacheHandler’, ‘Apache=SCALAR(0×1fdd840)’) called at /dev/null line 0

eval {…} at /dev/null line 0

del.icio.us System error

Filed in: del.icio.us

photo credit: Walt Jabsco

Greasemonkey (and other solutions for Opera and Windows) allows you to customize the way a webpage displays using small bits of JavaScript. Hundreds of scripts, for a wide variety of poular sites, are already available in the Greasemonkey script repository at http://userscripts.org.

You can write your own scripts too. Mark Pilgrim’s definitive Greasemonkey guide, diveintogreasemonkey.org will show you how.

Greasemonkey Extension for Firefox

User Scripts

My new brilliant idea:
I haven’t used Greasemonkey that much yet but for years I’ve wanted a solution to get easy information about the ethical and environmental profile of a firm or product when I’m in a store. Unfortunatly this is not really feasible, but it could be done in the web using Greasemonkey (+ a wiki of conserned citizens, and perhaps import of existing data (?) by XML. And then the option to edit the wiki througt a greasemonkey script.)

I think I will check if there are any only databases with this kind of data, I know there used to be one in Norway. If you have any tips, just write a comment.

Supercool scripts:

Wikiproxy: Greasemonkey Edition
Inline Mp3 Player
Gmail: Random Signature.
Mailto Compose In GMail (with choice)
Jer’s Wonderful World of Internet
http://pappmaskin.blogspot.com/2005/10/my-wonderous-greasemonkey-idea.html

Another Cool Idea:
Replace banner-ads etc with artwork and poetry, or random naked chicks. I think the name should be Prettify-the-web! :)

photo credit: gadl

Hey, my first Greasemonkey userscript!

Userscripts.org: Amazon Sambok ISBN Search:

This is just a fast remake of the Hight Library Linky script. Its my first script, just wanted to check out how hard it would be to rework. Luckily for me it was super easy. It inserts links to two norwegian bibliographical databases.

Bibsys, containing material from universities and colleges.
And Sambok, containing material from most Public Libraries in Norway.

Pretty useful, at least in theory, since ISBN search is quite limiting. But it will have to do for now.