Martin Ström
my-domain.se

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 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)](/wordpress/wp-content/uploads/pluxemburg_admin_shop.mov)

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.

Index

Photographers

Photos

Loading a photo

Showing a photo

Information

Updated 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

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 `

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.

Pluxemburg upload script

Today when working with the pluxemburg.com-site I got really tired of uploading everything with Transmit. Since our host doesn’t have support for rsync or something like that, I made this really easy bash-script that will upload everything that have been changed since last time the script was runned.

cd ~/Projects/Pluxemburg/pluxemburg.com #local path to site root<br />
find . -newer ./lastupload -exec open -a Transmit "{}" \;<br />
touch ./lastupload

In Transmit, remember that both local and remote paths have been set, and “Use DockSend” enabled. I saved the script as an application using Automator (Automator –> Run Shell Script), and made an icon in 20 seconds.
Now I just run the app from QuickSilver or Finder and it uploads everything really fast and easy.

Update: This is for OS X and only tested in 10.4 Tiger

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)

Fast del.icio.us-poster bookmarklet

I took Hitchhiker’s Sogudi shortcut and modified it to use a JavaScript-prompt() to ask for the tags. Use it in Safari as the first bookmark or so and activate it by pressing ?+1 (or other number depend on where on the bookmark bar it is)

Installation:

1. Drag this link to your Bookmark bar: + del.icio.us
   
2. Right click on the bookmark and choose “Edit Address
   
3. Change CHANGEME to your del.icio.us username
   
4. Done