Tenplustwo ist eine iPhone- (und bald iPad-)App, die den von Productivity-Guru Merlin Mann beschriebenen (10+2)*5-Lifehack umsetzt: Zehn Minuten arbeiten, dann zwei Minuten Pause, dann wieder zehn Minuten Arbeit, und so weiter. Die App stellt dafür einen attraktiv gestalteten und wohlklingenden Timer zur Verfügung.

Durch die Pflichtpausen werden die Anwender motiviert; es sind ja immer “nur zehn Minuten” bis zur nächsten Pause. Und durch den Timer, der die Pausen auf eine kurze Zeit beschränkt, geht es trotzdem bald weiter. Langweilige Aufgaben, auf die man keine Lust hat, sind mit dieser Technik viel schneller erledigt als mit der Methode “Zwei Minuten arbeiten, 30 Minuten Wikipedia.”

Mehr Informationen gibt es auf der Homepage von Tenplustwo. Die Software ist noch bis zum 20. Mai kostenlos verfügbar, danach wird sie zu einem Preis von 0,79€ verkauft. Am besten also gleich herunterladen! (App Store link)

Wir haben auch schon einige Ideen für die weitere Entwicklung von Tenplustwo: Die nächste Version wird eine Universal-App sein, also sowohl iPhone und iPod Touch als auch das iPad unterstützen. Außerdem forschen wir nach einer schönen Art und Weise, die Anzahl der bereits absolvierten Arbeit/Pause-Zyklen darzustellen. Und schließlich soll es möglichst bald möglich sein, die neuen Funktionen von iPhone OS 4.0 zu nutzen, um den Timer auch laufen zu lassen, wenn die Applikation nicht im Vordergrund läuft.

Wir freuen uns, wenn Blogs, Zeitschriften und sonstige Publikationen aller Art über uns berichten wollen. Schreiben Sie uns bei Fragen oder um Promo-Codes zu erhalten. Sie können zusätzlich auch unser Pressekit benutzen.

Das GZA:

Mit dem “Gender-Online-Tool” haben Sie die Möglichkeit, interaktiv leicht verständliche Lernmodule rund um das Thema “Geschlechtersensible Sichtweise” (Gender Mainstreaming) zu bearbeiten, die einfach handhabbar sind und auch noch Spaß machen. Das “Gender-Online-Tool” vermittelt schnell und unkompliziert Wissen und praktisches Handwerkszeug, um bei allen Vorhaben, Projekten und Planungen von vornherein die unterschiedlichen Lebenssituationen und Bedürfnisse von Frauen und Männern besser berücksichtigen zu können.

Besonderes Augenmerk haben wir auf eine schöne, einfach zu bedienende Benutzeroberfläche gelegt. Dazu kommen noch Elemente die den Benutzer zusätzlich am Ball halten sollen. Hier haben wir uns vom Suchtfaktor von Online-Rollenspielen wie World of Warcraft inspirieren lassen, und vom Sammel-Anreiz von Achievements wie zum Beispiel in Xbox Live.

Angelehnt an diese Systeme bieten wir den Kunden des GZA eine motivierende und Interesse weckende Lernumgebung für die Themen Gender und Geschlechtersensibilisierung.

Beiden Kunden sagen wir vielen Dank für die Zusammenarbeit und hoffen, dass sie genauso zufrieden mit den Webseiten sind wie wir.

Initially, the thumbnails we needed were just the easy kind: Either scaled down versions of the initial image, or cropped to a square and then scaled down. Those are easily created in a few lines of Python, and I had created a custom Django template tag to create them. Pretty soon, caching became important, too, and I added that as well.

For our most recent projects, the design necessitated thumbnails that had exactly specified dimensions. Here are some examples:

The code to create these kinds of thumbnails is a little trickier. Since I found no preexisting solution, I decided to roll my own, and now we’re sharing that solution with the world. I’ll talk a little about the algorithm first, if you just want the code, you can grab it right now on the Bitbucket page.

Also, if you aren’t interested in the technical details, you can skip the technical part and go directly to the part where we explain how to use this stuff.

The Technical Part™

So, how do we create an image that fits the correct dimensions, while still ensuring that as much as possible of the content of the original image fits?

First I tried comparing the individual sides of the image to those of the thumbnail, but that obviously resulted in nothing but lots and lots of edge cases: How do I have to scale the image if its width is slightly greater than the thumbnail’s but it’s a lot higher? What if it’s the other way round? What if the image is a rectangle and the thumbnail is a square?

The only comparable attribute of the image and thumbnail sizes is their ratio, obtained by dividing their width by their height. The ratio stays the same regardless of the actual width or height and is therefore ideal for determining exactly which part of the original image to crop. The cropped image can then be resized to obtain a thumbnail with exactly the desired dimensions.

If the thumbnail ratio is greater than the image ratio, the thumbnail is wider than the original image, and we keep the image’s width while cropping top and bottom.

If the thumbnail ratio is less than the image ratio, the thumbnail is taller than the original image, and keep the image’s height while cropping the sides.

(After cropping, we obviously resize the image to the exact thumbnail dimensions.)

The code for this is as follows (image is the original image, image.size[0] is the original image’s x size, x and y are the thumbnails dimensions):

    1 img_ratio = float(image.size[0]) / image.size[1]
    2 thumb_ratio = float(x) / y
    3 x = int(x); y = int(y)
    4
    5 if(img_ratio > thumb_ratio):
    6     c_width = x * image.size[1] / y
    7     c_height = image.size[1]
    8     originX = image.size[0] / 2 - c_width / 2
    9     originY = 0
   10 else:
   11     c_width = image.size[0]
   12     c_height = y * image.size[0] / x
   13     originX = 0
   14     originY = image.size[1] / 2 - c_height / 2
   15
   16 cropBox = (originX, originY, originX + c_width, originY + c_height)
   17 image = image.crop(cropBox)
   18 image.thumbnail([x, y], Image.ANTIALIAS)

Some comments:

• In the first two lines, we determine the image’s ratio and that of the thumbnail.
• Then we determine, according to the ratio, how wide the thumbnail would be, if it were as high as the image. (For image ratio > thumbnail ratio. Swap width and height for the other way round.)
• We create a tuple called cropBox, (line 16) which we fill with the coordinates of four corners of an imaginary box that covers as many of the image’s pixels as possible while retaining the desired ratio of the thumbnail.
• We crop the image based on the cropbox in line 17.
• Finally, in line 18, we resize the image, which now has the correct ratio, to the correct size as well, thereby creating the thumbnail.

We have some edges cases as well. An easy one is the ratio of the thumbnail being the same as the original image. In this case, the else statement in line 10 is executed, but it could just as well be the the if. Either way, the dimension that is calculated as a product of ratio and the other dimension will be correct.

Another edge case appears if one or both sides of the original image are smaller than the respective side or sides of the thumbnail. In this case, we use the length of the original image’s side length instead of the length as calculated by the ratio.

This creates images that might in fact be smaller than the desired dimensions, instead of scaling the image somehow to fit. We decided this would be better in most cases, since images that are enlarged usually appear blocky or mangled.

So we just cut the size off:

    1 if (image.size[0] < x):
    2     x = image.size[0]
    3 if (image.size[1] < y):
    4     y = image.size[1]

As for file saving and caching, we create a file name based on the original file’s name plus the dimensions, like image-640x480.png. If such a file already exists and its timestamp is newer than the original files (meaning the original has not been replaced by another version) we skip all the time consuming computations and simply return the existing image.

That’s all the code-explaining I will do today. For more, ask a question on Bitbucket or read the source code yourself.

The Part Where I Explain How To Use This Stuff™

Of course you can simply use the described algorithm to create your own image thumbnail template tag if you want. Or you can use it in your Python application without using Django. Or you can port it to C. Whatever.

Oh, by the way, you can use all the code in this blog entry and in the django-thumbnail code repository for free, regardless of wether you make money with it or not. No, you don’t have to make your code open to the general public or to us. You can think of breakthesystem when you need a serious website, a cool iPhone app or an awesome Mac application, though. Or you can buy me a beer. Just contact me for any of that.

And you should follow me on Twitter, obviously. :)

Okay, let’s go. I’m assuming you’ll have a model in your Django application that looks a bit like this, by the way:

class Picture(models.Model):
    title = models.CharField(max_length=255)
    image = models.ImageField(upload_to = "images/%Y-%m-%d")

First, install the template tag. To do that , download the file thumbnail.py and place it in YourDjangoProject/your_django_app/templatetags/tumbnail.py. You’ll probably have to create the templatetags folder. If you’ve just created it, you’ll also have to create an empty file called __init__.py in the templatetags folder.

In your template, add the statement {% load thumbnail %} somewhere before you actually use the thumbnail tag. You’ll need that statement only once, so I recommend placing it at the very top of your template. Then use the tag like this:

<a href="{{ picture.image.get_url }}">
    {{ picture.image|thumbnail:320x240 }}
</a>

This will create a thumbnail of 320 by 240 pixels that links to the original picture.

You can also do this:

<a href="{{ picture.image.get_url }}">
    {{ picture.image|thumbnail:320x0 }}
</a>

The above code will create a thumbnail that is 320 pixels wide. In other words, this is the image scaled down to a width of 320px. You can also use something like thumbnail:0x240 for a variable width and fixed height.

Finally, thumbnail.py can do one more trick:

<a href="{{ picture.image.get_url }}">
    {{ picture.image|thumbnail_with_max_side:320 }}
</a>

The above code will create a scaled down version of the image that is 320 pixels on the longer side, whichever one that is.

And that’s it. I hope you like it. You should now go to django-thumbnail’s Bitbucket homepage and have a look at the current source code, or comment, or follow the project. I probably won’t update this blog entry for new developments regarding django-thumbnail, so Bitbucket is where you should go.

Die anderen Mensen werden nicht mehr angezeigt, weil sich herausgestellt hat, dass die Webseite des Studentenwerks wohl sehr händisch aufgebaut wird, und es große Unterschiede zwischen den einzelnen Unterseiten gibt. Weil es sowieso schon relativ tricky ist, den Inhalt der Seiten zuverlässig auszulesen, warten wir mit dem Umsetzen der anderen Mensen, bis sich ein paar Leute melden, die tatsächlich Bedarf danach haben.

Hier geht’s zu iMensa

Wie findet ihr iMensa? Habt ihr noch Verbesserungsvorschläge oder Wünsche? Was würdet ihr zum Beispiel davon halten, wenn iMensa eine eigenständige .de-Adresse hätte?

Hier ein kurzer Trailer:

(Trailer in Full HD)

Mitgewirkt haben

• Roland Beck
• Tobias Lau
• Remi Smirra
• Claudius Hauser
• Alexander Bach
• Korbinian Schmid
• Dominik Forstmaier
• Daniel Jilg ←ich gnihihi!

Deswegen stellt breakthesystem heute iMensa vor, eine Mini-Webanwendung für iPhone und iPod Touch, mit der Studenten der Augsburger Hochschulen einfach und komfortabel den Speiseplan für ihre Mensen abfragen können.

Um die Anwendung aufzurufen, besuchen Sie einfach die Adresse eat.breakthesystem.org mit ihrem Gerät.

Wenn Sie möchten, können Sie einen Link zu iMensa auf ihrem iPhone installieren, indem Sie die Seite aufrufen und dann den “+”-Button am unteren Bildschirmrand antippen.

iMensa holt sich die Speisepläne für die Augsburger Mensen in der Universitätsstraße, Friedberger Straße, Schillstraße, sowie die der Hochschulen in Neu-Ulm und Kempten.

This blog post is partly based on Rob Hudson’s Installing Django on Leopard post, which has helped me a lot in the past. Thanks, Rob!

Also, if you need help installing other tools on your machine, Dan Benjamin of hivelogic.com has created tutorials for installing MySQL, Git and Mercurial.

Prerequisites

Luckily, Snow Leopard brings everything with it that you need: Subversion and Python 2.6 are already pre-installed with the new OSX. This is especially important because as of now, 3 days after the release of OS X 10.6, there is no working version of Macports yet, which might otherwise help you install lots of command-line-tools for your mac.

Downloading Django

First, open your Terminal.app. It should be in the Utilities folder, located inside the Applications folder.

To download Django 1.1 using Subversion, first cd into the Python site-packages directory by pasting the following line into the terminal window and pressing enter:

cd /usr/local/lib/python2.6/site-packages

A few commentators rightfully point out that the correct path to the site-packages should be:

cd /Library/Python/2.6/site-packages/

And then download Django into the site packages directory using Subversion:

sudo svn co http://code.djangoproject.com/svn/django/tags/releases/1.1/django

Installing Django

Now Python should know about Django itself. You’ll only have to tell your system about the django-admin.py so that you can create new projects. To do this, create a symlink:

sudo ln -s /Library/Python/2.6/site-packages/django/bin/django-admin.py /usr/bin/django-admin.py

Cleaning Up

On American Macs, this should already be enough. On many other system, you’ll need one more thing to avoid the dreaded unknown locale: UTF-8 error.

We simple need to set two environment variables to tell your system about your input language. In your terminal, type

nano ~/.profile

which will open your profile file. If there is already something in the file, ignore it. Add these two lines:

export LC_ALL=de_DE.UTF-8
export LANG=de_DE.UTF-8

As you can see, the locale is now de_DE.UTF-8 which is the correct entry for me, as I live in Germany. For other countries, substitute “de_DE” by the correct code as taken from this list of locales.

Save the file by pressing Ctrl+x, then y. Finally, close your terminal and take a deep breath. You have just installed Django on Snow Leopard. Happy coding.

Nach diversen Brainstorming-Sessions stand die Story: ein Dokumentarfilm über eine fiktive Unterart des Opossums (Didelphis Awesomniens, kurz: OPAWZM). Aber seht selbst!

Hier die embedded Vimeo-Version. Wobei ich finde, dass jeder meiner Leser sich hier die HD YouTube-Version ansehen sollte!

An dieser Stelle mein Dank an meine Teamkollegen Korbi und DOMPZN für die großartige Zusammenarbeit.

Ich bin gespannt auf eure Meinung!

Konzept, Design und Umsetzung sind dabei komplett von breakthesystem übernommen worden.

Leider können wir diesmal nur Screenshots zeigen, da die Webseite momentan nur aus dem internen Netz der Universität erreichbar ist. Für Surfer im Netz der Uni Augsburg oder Studenten, die per VPN-Client von zuhause eingeloggt sind, ist die Seite unter http://mac.student.uni-augsburg.de/ erreichbar.

Mehr, bitte

Stay tuned und so: Einige meiner Uni-Projekte dieses Semesters sind schon vorbei, zum Beispiel meine Arbeit über das DVCS Mercurial. In den nächsten Wochen kommen die anderen auch noch zum Schluss, und die besten werde ich dann hier veröffentlichen.