The new the-skylab.de Canvas Portfolio

I launched a new the-skylab.de front-/portfolio page today. I felt inspired by the current Vodafone advertisements, so I decided to do something in the same direction.

The skyLab logo should be the central element of the page and is used to navigate. Each click brings a new scene using a rotating black area which uncovers the content. The second scene features a full-screen view to make it possible to show more content.

The new page is heavily driven by Javascript and uses some new technologies like canvas, so i decided to give you some technical background and tell you about the problems I encountered.

This is how it looks like:

skylab-animation

The Final Result

DOM vs Canvas

At first I was unsure which technology to use. I started with some testing using pure DOM technology. I created a square using a DIV element, added round corners to it and did the rotation using jQuery and CSS3 transforms.

dom

Rotating Square using a DOM Div

The result was looking ok, but it felt a bit dirty and needed a lot of unnecessary HTML glue code to work correctly. So I decided to use the new hot shit: HTML5 Canvas.

I checked the „official“ Canvas-API first, but as usual, there are a lot better Javascript-Libraries out there which make the work easier. I checked some frameworks and decided to use fabric.js. Most of the frameworks support the drawing of circles and rectangles and the rotation of those, but lack the ability of setting an origin point for the rotation. A centered rotation doesn’t help me with my concept.

Script

Then I started implementing the script. It uses the concept of „scenes“, gathered together in a „script book“. I can specify the scenes in code which includes a specific rotation of the black area (which is no longer a rectangle, it is a custom drawn triangle path now) and pre- and post-hook to execute and my script will do the rest. These hooks are used e.g. for the circle animation in the second screen.

Problems

Resizing

One big problem was the strange behavior of the actual canvas area which is used for drawing. In my case it is needed to fill the whole screen. But if you specify the size with CSS, it „scales“ the drawing area but does not increase the size of the actual canvas used to draw. This results in ugly and unsharp drawing. You need to specify the size of the canvas in the HTML tag to make it work – or, as a workaround, you can set it via Javascript. This was the solution I decided to use. Currently, I’m hooking into the resize event of the browser and I’m doing a resize of the canvas area.

Also, the page needs to have a minimum and maximum size, otherwise the black area will get to small for the content. This problem isn’t yet solved completely, because enforcing a minimum and maximum size and falling back to scroll bars is currently causing drawing issues.

Mobile

Surprisingly, the page was working great on all mobile devices (I tested iOS7 iPhone & iPad & latest Android stuff). There was only a problem that the initial zoom level was to small on the phones with smaller screens. But there is a workaround: You can set the default view port with a HTML tag like this in your head:

1
meta name="viewport" content="width=1024 height=768

Content and Images

I used a trick to create the illusion that the black circle actually uncovers the content. In fact, that’s not the case. It fades in right before the rotation animation is starting. As the text color is white, the content is invisible until it’s covered with the black background. Unfortunately, that doesn’t work with images. They would be visible before the rotation animation is complete. I arrived at the conclusion that the best workaround is to fade the images in and out with a timed delay right before and after a scene change.

Conclusion

Finally, it was as usual a lot more work than I expected. Especially it wasn’t easy to get the right timing of all animations. But in my opinion, the result is great. I did test it with some people and most of them were sure about what to do. After some initial user tests I implemented the pulsating logo which you can see when you’re initially loading the page which makes clear „I am the logo, click me!“.

A problem with the usage of Canvas is that the page will not run on old browsers. But luckily, in these days that’s a thing you can disregard more and more as every major browser is updating itself.

What do you think about the result?

Howto use isocraft timelapse for minecraft on a linux box

Isocraft is a tool which creates an isometric map of a minecraft map file.

This guide will show you how you can use it to periodically make pictures of your servermap. This is usefull if you want to make short timelapse movies which shows the progress of your map or to provide a live view into your server from the web. The guide will also show you how to avoid making images if no one is on the server.

Here is sample how such a timelapse movie could look like:

So, lets start:

I assume the minecraft server is already running. If not, take a look at my guide for this.

So, first you need to get isocraft. Latest should be here.

The package contains two JAR files. We will use the timelapse.jar. If you take a look into the readme file, it will tell you that you have to include the com folder from the server.jar file into the timelapse.jar.

To do this, go to minecraft.net and download the server software. Please note: a JAR file is nothing other than a packed zip file with a different file extension. So your first task is to extract the timelapse.jar and minecraft-server.jar. Then copy the COM folder from minecraft-server.jar into the extracted folder of timelapse.jar. At last, you need to compress the folder again and name it timelapse.jar. If you did everything right, the following should work. If not, try again 😉

Now copy your modified timelapse.jar + the tileset files into the directory of your minecraft server. To test if everything worked, type the following:

java -Xms128M -Xmx1024M -cp /yourpath/timelapse.jar timelapse

If you did everything right, you should find a bmp file (which is indeed a png file) in your directory.

Our goal is that this timelapse.jar is automatically called every x-minutes. To do this, we’ll use the cron deamon. I’ve written a small bash script which takes care that the timelapse is only called when there are people on the server, otherwise it would create thousands of images which are the same. The script also copies the latest image to a seperate directory and renames the suffix to png since the file is a png file (I think the author just forget this).

The script follows:

#!/bin/bash
cd /home/minecraft/server1
# this checks the server.log if there are people on the server
if tail server.log -n2 | grep -c „0/“ > 0
then
echo „Server1 is empty“
else
echo „Server1 is growded. Doing timelapse stuff“
# run timelapse
java -Xms128M -Xmx1024M -cp /home/minecraft/server1/timelapse.jar timelapse
# copy latest file
find /home/minecraft/server1/ -mmin -1 -type f -name „*.bmp“ -exec cp „{}“ /home/minecraft/isocraft/latest.png „;“
fi

Save it as a textfile, name it cronscript.sh or something. Don’t forget to change the path to your needs!

Finally we need to add the script to our cronscripts. Type:

crontab -e

Add the following line if you want to run the script every minute:

*/1 * * * * /home/minecraft/cronscript.sh >/dev/null 2>&1

And thats it. I finally did a softlink from my webserver’s public directory into the directory where the latest image gets copied to:

ln -s /home/minecraft/isocraft/latest.png /var/www/public/minecraft

Any questions?

Howto host a minecraft server on a linux box in the background with screen

This guide will show you how to host a minecraft server in a screen session on a linux box.

Note: You should NOT run the server as root! Create a special user for this, name it e.g. minecraft.

First, make sure you have java installed. If not, use your package-managment tool to install it, e.g.

aptitude install java5

Get the classic server package from minecraft.net & copy it to your server.

If you try to start the server with

java -cp minecraft-server.jar com.mojang.minecraft.server.MinecraftServer

, you may notice that your shell is blocked. If your user session is closed, the server is a well. To avoid this we’re gonna use screen. So first make sure screen is installed:

aptitude install screen

After that, start the server in a screen session:

screen -dmS minecraft java -cp minecraft-server.jar com.mojang.minecraft.server.MinecraftServer

You have to detach this screen session. To do this, press ctrl + a, d (for detach).

If you want to get an overview over running sessions, type

screen -list

To re-attach a running session, type

screen -r

Ok, the server is running.

Head over to the Isocraft guide to get a nice liveview of the map on your webseite.