Martin Ström
my-domain.se

One (Two, Three, Four) — Unintentional Metallica cover band

The Unintentional Metallica cover band (by Konst & Teknik & Martin 2009/2013)

▶ Play

`git yolo`

In your .gitconfig under [alias]:
yolo = push production

then you can deploy with git yolo

:—)


Beforecast

Beforecast by Peter Ström and myself.


Loopcam 1.6 Released ⟿ Featuring 4chan Sharing

I’ve started working with the awesome project/app/site Loopcam and the first thing we did was to add 4chan sharing.

Read more over on the Loopcam /b/log and happy trolling!!!!!


ℂ◉℗⒴ ℘ⓐṨͲℰ Ⓒℌ◭ℝ◬ℂ⒯℮ℛ

A few weeks ago we (me & Konst & Teknik) finally released the long taking new version of CopyPasteCharacter.com — a website to help people find and copy symbols and characters that are not very easily accessible from the keyboard.

The main new thing, featurewise, is that we included many more characters than the previous version had. More characters has been the top #1 feature request the past three years the site has been online. To make the site easy to use with all new characters, we have divided everything into different sets/collections such as “Numerals”, “Symbols” and “Graphic shapes”.
We also made it possible to create your own set with characters and some smaller things like sharing sets and decide what set that should be the start set on CopyPasteCharacter.com.

www.copypastecharacter.com


Medborgarbussen / SNMBL

SNMBL is a manifestation against the constant increasing prices in public transportation in Stockholm. The first event took place on September, 18 at Slussen, Stockholm.

Daniel Eskils, together with a bunch of other people documented everything and made a movie from the event (here with English subtitles):

Peter and I did the website for the project and the manifestation. To make it easier to find out where the buses were all the time, I built an iPhone app that tracked the current location of the iPhone and sent it to the server. Then a map on the web page reads the latest reported location and show the bus’s location on the map with all the stops.

Read more about the project on www.medborgarbussen.se — mostly in Swedish though.


InstaCRT

OH HAI! go to instacrt.com!

ZOMG Update I
InstaCRT is released in the AppStore (and beeing featured everywhere!) ^__^. Read more!

ZOMG Update II 2012-11-18
InstaCRT with color support was just released! Read more on how it works! ♥‿♥

This project started as an idea to see how a “real world” filter for photos (like the popular Histamatic and Instagram apps) would work, except our filter is actually real and not digitally applied.

When I joined the project, Ruben Broman and Erik Wåhlström were more or less already done connecting all the hardware and had the screen working as a regular external screen connected to his old laptop. The same night I hacked together a funny looking Ruby script that fetched images from a ftp server, downloaded them and showed them in fullscren on the old CRT display while a Canon 7D took the photo. We managed to get it up and running the same night and even had time to throw together a quick iPhone application that uploads the photos to the ftp server. This early version of the project used the Ruby script, Image Capture (built into OS X) and QuickTime 7 to display the photo in fullscreen on the little display. The day after I added a Tumblr uploader so the photos get published on the blog.

This worked but was very instable so all code was rewritten within the first week it was up and running, mostly for stability but also seperated into different smaller scripts to they could run asyncronysly. We replaced QuickTime with a Quartz Composer project that allowed images to be displayed in fullscreen while not beeing the forground application, and replaced Image Capture with the command line tool GPhoto. Everything was still controlled by Ruby scripts but, as written above, seperated into three smaller classes/files so they could work in parallel, with a main deamon file using Forever The ftp server was replaced with a smarter REST based server to handle the uploading, downloading and archiving of the images.

The iPhone app was also rewritten from scratch to be cleaner and smarter. As of today, about 30 people have the beta (distributed using awesome Testflight).

Except for some smaller tweaks, the current version of the project has been up and running for about a month without restart nor crash so I would say it’s pretty stable now. We haven’t really decided exactly what to do with the project right now. We might release the app to the public and keep it going for as long as it’s possible, or just see InstaCRT as a fun hack.


TwitterFax

The TwitterFax is a small project done together with Konst & Teknik. It will watch a given Twitter username for mentions and then print it, together with any twitpics or yimg images attached to it.

The code is pretty simple and uses the Twitter gem for communicating with Twitter and Prawn to genereate the PDF’s. I’ve set it up to run every 15 minute using a Cron job.

Check out the full source code. You’ll need to change what typeface to use or get LucidFaxEFRom.ttf from somewhere else.

So go ahead and mention @konst_teknik to try it out!


Linkli.st

linklist

We’ve been working on a new service on and off for a few months, called Linkli.st. The service was first launched in May but the last week we added some new (and awesome!) features so you should check it out.

Linklist is based around the very simple concept of creating, sharing and browse lists with links. It can be used for basically everything but I’ve found it very useful for things like:

We’re adding new features and working on it all the time so be sure to follow our Twitter feed (@linkli_st) for updates.


nordea-rb

Last week I hacked together a small little project/library called nordea-rb. It’s a Ruby library and a (pretty basic right now) command line tool for getting read-only access to Nordea Bank accounts. I use it for displaying my accounts’ balances so I can see when invoices are paid etc.

Everything you need to know is in the README on GitHub so if you’re interested in this, check it out.


Pluxemburg.com

Pluxemburg.com is the website for Swedish technotronica band Pluxus and the record label Pluxemburg they run together with Jonas Sevenius and us (Martin Strm and Peter Strm).

Pluxemburg has since its launch in 2000 gone from a small independent label with only one artist “Pluxus” to bigger with several artists (and grammy awards!) and then back to again being a quite small label. The 2009 version of Pluxemburg focuses mainly on Pluxus and Pluxus related projects.

A small record label needs to not only work on the websites of their artists and the label itself, but also constantly make sure that the info on the many online forums and communities are up to date and accurate. There needs to be Facebook and Myspace pages, last.fm events, discogs.com entries and so on. Updating these websites as soon as something happens (gigs, releases, parties, videos, etc) is time consuming and unfortunatley often ends up in a copy paste manner (spamming) rather than using the different forums for their different purposes.

When thinking about these conditions in connection to building a new Pluxemburg website, we realized that instead of constantly keeping the Pluxemburg and Pluxus websites updated, we should make a website that mirrors the contents of each community and instead spend our time keeping these communities updated. The information for each part of the new Pluxemburg.com is therefor spread out on the community where it “belongs” the best. The discography is mirrored from Discogs, the events from Last.fm, videos from YouTube, information from Wikipedia, links from Delicious and sounds from SoundCloud. We use the popular tumblelog Tumblr for the newsfeed, adding not only a tool for keeping our website updated but a small community in itself too. All colors used on Pluxemburg.com are based on the “corporate” colors of each community, making also the design a mirror of each community. There is even a Twitter-feed that mirrors everything that goes on on Pluxemburg.com, somehow making the site into a complete loop.

Technically, every day a pretty straight-forward Ruby script will automatically run on our server to update the information from all sources and then sends it (together with a security token to make sure the data isn’t messed with) to a PHP script at pluxemburg.com. The PHP script then processes (cleans and validates) the data and stores it in a file as serialized PHP, which is used by the index page to present the information.

www.pluxemburg.com


Copy Paste Character

Two weeks ago we (me and Konst & Teknik) launched copypastecharacter.com—a site to make it dead easy to copy those special characters which otherwise can be hard to find. We just pushed an update and I realized I hadn’t mentioned it here.

The character you click will automatically get copied into your clipboard, thanks to the flash technique mentioned here. However, I wrote my own JavaScript class to handle the clipboard and the buffer of clicked characters since you can hold down ‹alt› to copy multiple characters at once.

Here’s the source for the copy buffer class in case anyone’s interested:


Colhour WordPress plugin

Colhour Plugin This is a plugin for WordPress. The Plugin makes it easy to have elements on your site in colors generated by the Colhour system. Basically it will let you input CSS rules from a option page in the WordPress Admin, and when the site is viewed later it will have the colors replaced by an ever updating Colhour-color.

There are a couple of input fields on the options page; one for each “length” of the spectrum (for it to start over again). I.e., if you want a div element with the id “header” to get its background colorized from Colhour and its Colhour cycle starting over every day (after 24 hours), you just enter the CSS rules in the “day” input field. The actual color-value should be replaced with `%colhour%´ so the plugin can insert the current color in its place. 

colhour-plugin2.png

I suggest not having any other CSS rules in the Colhour admin than the ones dealing with the colors you want replaced. I.e., strip out the fonts, border sizes etc and keep all that in your .css file where they belong (and can be cached).

Bad:

#myDiv {
    font: 1.1em Courier; 
    padding: 2em;
    background: #DDD url(my-background.png) no-repeat top left;
    border: 2px dotted %colhour%;
}

Good: 

#myDiv {border-color: %colhour%;}

Download here, put it in your wp-themes/plugins/colhour.php (note the .php extension) folder and activate it as usual in WordPress admin » Plugins. The options can be found under Options » Colhour.

Update May 4, 2006 I’ve updated the plugin with some minor tweaks and UI enhancement. Also, this site is now using the plugin to style the links.

WordPress theme

Finally this site looks like something other than the default WordPress theme. Peter and I wanted to connect our work sites to each other and decided to use his simple but easy-to-use WordPress theme as a base.

The problem was that his theme never was cross browser compatible and worked more or less only in Safari. My first task was to re-code the theme from scratch to make it work in all modern browsers using valid XHTML and CSS with as clean and simple code as possible.

I also set all font sizes using em:s (instead of px or pt) to make the text resizable. It wasn’t too hard making it work (even in Microsoft Internet Explorer) thanks to some great resources. Sooner or later I’ll convert the positions, margins etc to em:s as well, but font sizes should be enough for now.

I also added AJAX comments and used effects from script.aculo.us. I’m using Prototype to add CSS classes to some elements and to wrap i.e. all <h3>‘s content in a <span> to achieve the look I wanted without any unnecessary markup. Since <input type="search" /> only is supported by Safari and I wanted to use it, I used a script (thanks Wolfgang Bartelme) that replaces the regular text input field with a search field for Safari only. This way the document will stay valid XHTML 1.1.

Next task was to make the theme more personal for my site. I’ve tried some different looks but couldn’t really decide how I wanted it and choose (for now at least) a slightly darker version of Peter’s theme. I think it looks good and is easy to use without making too much noise.

When I implanted the tagging I first looked at Ultimate Tag Warrior 3 but it seemed too advanced for my needs, so I decided to use the native category system in WordPress 2.0, that lets one add tags (categories) by just entering them in separated by comma in a text field (WP 1.x didn’t have this feature). The tag cloud is a modified and simplified version of Tag Cloud Plugin.

Download

Update April 20, 2006 The theme is now released in a beta version. Some notes: * You’ll need the [Post Updated Plugin](http://guff.szub.net/2005/02/22/post-updated) to get a page’s last modified date. * My “lite” version of the [TagCloud plugin][tagcloud] can be [downloaded here][tagcloudlite]. * You’ll problably want to change the `autosave` attributes value in `javascripts/global.js` (line #24) to your own unique id. [Read more on the attribute](http://weblogs.mozillazine.org/hyatt/archives/2004_07.html#005890). I also found this great plugin for the admin area, [Cat2Tag](http://www.agkamai.org/cat2tag) The link seems to be broken, get it download it here for now for easier tagging of your content without using a separete database like [Ultimate Tag Warrior 3][utw] does. Cat2Tag just use WordPress’ own categories instead. [Download](http://my-domain.se/wordpress/wp-content/uploads/burnfield-dark.zip).
Update May 4, 2006 The [TagCloud plugin][tagcloudlite] is updated to use the [rel-tag](http://microformats.org/wiki/rel-tag) [microformat](http://microformats.org/about).
Update August 18, 2007 Since a lot of people ask me how to get the thumbnails to work, here is the instructions I usually email them:

— ✄ ——————

First, download a newer version of `posts-thumbnail.php` replace the current one (from the downloaded .zip file) with this one attached in this message. Create the thumbnail image and name it “thumb-POST_SLUG.png”. The post slug is shown on the “edit post” screen in the admin (i.e my latest post with title “Rails’ time extensions ported to JavaScript” has post slug “rails-time-extensions-ported-to-javascript” and the thumbnail should therefore be named “thumb-rails-time-extensions-ported-to-javascript.png”). Then just upload the image from the same screen using WordPress’ built-in uploader (you dont have to give it any description or title). Then the theme should automatically find the image for you and show it in the list view.

———— ✄ ——

Btw is a new version of this theme under development and will make the thumbnail handling easier.
Update October 31, 2007 The link to the plugin “Cat2Tag” seems to be down (thanks Kris Aubuchon) so, for now at least, you can download it here. I haven’t really looked into the new tagging system in WP 2.3 so perhaps this plugin isn’t necessary any more.

Colhour IRL

Another Colhour project! I wanted to try to take the Colhour system a step out from the digital to the “real” by making a regular wall clock using the Colhour system. This was mostly an attempt to see if the concept could work outside the computer and if I could find the parts needed.

I wanted to find a mechanical clockwork that had date, year and month (or an easy way to hack it) as well, since the original system isn’t just using hour, minutes and seconds, but also dates. Sadly, I couldn’t find any clockwork like this (didn’t really expect it actually) so I bought a regular one and built the clock around my limitations.

My first solution was to set the date, year and month by hand since it isn’t so hard to adjust it everyday. But I changed it and removed the date parts and used just the parts the clock could control automatically. It’s currently made of just paper glued to the clock’s hands to rotate. The result works, but I realized the hour is made for a 24 h clock but the clockwork, of course, is using 12 h. As an experiement this works for now, but I want to find a solution to make the dates work as well. One possibility could be to build my own clockwork and control it from the computer. Or one could put a 48 times bigger gear driven by the hour hand to make that one drive the date hands.

First version with manually controlled date hands

Second version, without dates


Logotype for Anders Ekert Film & Video

This is a logo for my friend’s company which is in the filming and video industry.


Pluxemburg

pluxemburg-site.png

Pluxemburg is a record label I’m co-running with some friends. The site in its current form is almost two years old, but a lot of things have changed since it was first released. Since I just released some updates, I thought I’d write something about them and show how the CMS/administrative interface works.

Recent site updates

I won’t go through the whole site and tell you everything about it. Instead, go browse it by yourself. The shop has been improved with a smarter cart that doesn’t forget your items if you by accident reload your browser or hit the back button. Validation is more clear and better looking in the same style as the improved (and AJAX powered) guestbook and newsletter subscription.

Browser support

When the site launched almost two years ago, it fully supported Internet Explorer 5 (Mac), IE 5, 5.5 and 6 on PC and of course, old and new Firefox versions, Mozilla, Safari etc etc. It was a pain to fix the CSS especially for IE Mac and IE5, IE5.5 on Windows. Currently, I’ve dropped support for MacIE (it’is not even supported by Microsoft any more), IE5 and IE5.5 for Windows. I think the site should work more or less using outdated browsers, but it might not look exacly as intended.

CMS and site admin

The site is powered by an advanced CMS that helps us adding and editing news, products in the shop, guestbook spam and a lot of other things. When I first wrote it for this site, I had in mind to keep it so general I could, so it could be extended and used in other projects. Of course the administrative interface is password protected, but I’ve recorded two movies showing some parts of it. I’ll convert the movies to H.264 right after this is posted, so for now, the movies are pretty large in size. The movies are now in H.264 format and are 75% smaller (before: total 44.8 MB, now: 11.6 MB)

The first movie, shows a basic task such as adding some news items to specific part of the site and then view it. Pretty basic.

Watch the first movie (QuickTime 7, 20.9 3.1 MB)

The second show how easy it is to manage products in the shop, as well as track orders.

Watch the second movie (QuickTime 7, 23.9 8.5 MB)

To download them, hold the ⌥ (alt) key down and click the link or right click and choose “Download Linked File”

You’ll need QuickTime 7 to watch them.


Marie Frans

Website and CMS for swedish photographer’s agency I made together with Peter. We also did their graphic identity.

The frontend is optimized to be a fast, simple but effective way of browsing the photographers and their photos, check it out. The CMS makes it easy for the photographers to upload, edit and organize their photos and for the site editors to write news and edit information on the site. It’s a customized version of the administrative interface I coded for pluxemburg.com with added functionality such as image uploading and photo organization. I wanted to let the server handle the image resizing and creation of thumbnails as well, but found out that PHP’s image functions didn’t do as good work as expected. I tried all kind of different techniques but we ended up using Photoshop and manually make the thumbnails. Photoshop does a way better job and with this kind of client (working with photographs) we wanted as good quality as possible.

I’ve made a movie (QuickTime, 4.9 MB) showing how the admin interface works when uploading and reordering the photos, since it’s password protected. You’ll need QuickTime 7 to watch it.

Update 2006-03-13

Since the agency and the site was shut down some weeks ago, I’ve put up some screen shots to show how it was done. I might record a movie and/or a mirrored version for reference.

Index

mf-index.png

Photographers

mf-photographers.png

Photos

mf-photos.png

Loading a photo

mf-loading.png

Showing a photo

mf-show.png

Information

mf-info.png


Updated Colhour website

Colhour website

Colhour is my and Peters system to visualize time using colors. We wanted to extend the previous web site a bit by adding more information about the system and link to projects that were using the system. Also, the former site didn’t set the “Right now” text in the current times color but black only. I decided to rewrite the flash content from scratch, mainly because I wanted to do it in ActionScript 2, and then use the new BitmapData class available in Flash 8. It was my first “real” AS2 project but I’ve done some Java before and a lot of reading about AS2 so there weren’t any problems to make it work. I used the BitmapData#getPixel to get the actual color from the flash movie from specified positions, instead of hard coding all available colors into an array and then update the text field with correct color from the current time. After spending too much time with some wierd coordinate error I got (and make a ASCII-generator from everything), I finally worked it out. After the first update, the update method won’t trigger if nothing has happend to the hand (year, month etc). Since most visitors of the site won’t wait so long that they’ll see any update in year, month, date or even hour, it was unnecessary waste of CPU to update all hands all the time.

Colhour


Konst & Teknik site

Konst & Teknik website

My friends over at Konst & Teknik asked me to code their web site. It’s only one page, that should show the results from Google Image searches for the word in their name, “konst” and “teknik” (“art” and “technology” in swedish). I liked the idea and also got the opportunity to do some ruby scripting and try the Prototype JavaScript library.

Server side

Since Google currently doesn’t offer any API to do other searches than pure web searches and we wanted to use Google Image Search, I had to do my own image fetching script. The script is a ruby script that will pull the images and info from Google Images and store them in a local index file. First, I used Net::HTTP but I found out that it had problem dealing with the swedish characters (used in swedish, ie åäö) so I changed the URL-fetching to use curl instead, witch also was slightly faster. The index is written from ruby using Marshal. It is scheduled to run twice a week using cron.

Client side

My first approach was to make one class that downloads and shows the image for the given keyword. Then create one instance for each word (konst and teknik), controlling the preloading and image-switching every 4th second (meaning; updating one of the images every second second). But I found out it was hard to make the updates smooth and exacly on time.

Instead I split the client side script into of two main classes, the Preloader class and the Switcher class. The Preloader triggers a request using AJAX to a server side ruby script that will return a new random image from the image index and then stores the info received from the server in a local array. After some delay the script will start over again with a new request for another image. When the Preloader is done indexing some images then the Switcher will kick in and start showing them and switch every other second between the images for each word as long as there are images preloaded and ready to be shown. If the Preloader is out of preloaded images then the Switcher will pause and show a loader while the Preloader’s buffering. We wanted the images to be vertical aligned by bottom but I couldn’t make it work with CSS only (nor with vertical-align, float or position). Instead, the script is switching between two <div>s (for each word, totally four divs) and when the “not active” div got a new image loaded into it, it will find its dimensions and set its margins automatically. The next time it’s time to switch image (for this word) this div will be shown instead, the other one becomes invisible and get the next image loaded.

The script should work fine in Safari, Firefox, Camino etc (even WinIE6). It needs some code cleaning (mostly OO-issues; currently I’m referencing the instances from the class, which I think is a bit ugly) but I’m releasing it anyway.

Check it out http://www.konst-teknik.se


Colhour as iChat picture 2.0

This is the second version of the Colhour as iChat picture I posted the other day. The biggest improvment is that it will show both the hours and the minutes.

There’re two versions of the script. The first one uses a Ruby script together with RMagick to create every image on the fly with the current time. But since it requires some installation of Ruby gems and other libraries, I decided to make a version with all 1440 images pregenerated (created with a small Ruby script of course) so you wont need to install the other libraries. The AppleScript still uses some Ruby, but it’s included in OS X, and should (at least) work on a basic OS X 10.4 Tiger installation. Let me know otherwise.

Instructions on how to set up a cron job to run the script every minute is in the previous post. Both the on-the-fly generated version (update-gen.scpt) and the pregenerated version (update-pregen.scpt) are included in the zip file.


iChat picture with Colhour

This is a small AppleScript to update your iChat picture from the Colhour system that I have created with Peter. From the beginning I wanted to update it every second, but since it used 60% – 80% CPU, I decided to go with an update rate of once a minute instead. So you’ll only be able to se the current minute from the iChat picture.

To install: Download and extract somewhere on your hard drive. Edit your crontab file manually or with an app like Cronnix to run the script every minute. It should look something like this:

*/1 *   *   *   *   YourUserName    osascript ~/path/to/update.scpt

I suppose I should do this in the “correct OS X Tiger” way by using launchd instead, but that’s for next time. As well as update it to show the the full date in different squares (without seconds due to CPU usage) like the one on harald.net

Source included.

Version 0.2

Added a check in the script to see if iChat is running or not, so it wouldn’t launch iChat every minute.


E-mail subject cloud

This is an attempt (and my first Apple Script) to generate an html-page using Peter Ström’s E-mail system. Everything could probably been done better etc but it works for now.

Download here (source included)


CSS is in progress