sebadorn.de

Mastodon – Das wiederentdeckte soziale Netzwerk

Seba — Thu, 20 Jul 2023 22:21:00 +0200

Seit der Übernahme von Twitter durch Elon Musk sehen viele Benutzer die dortigen Entwicklungen mit Sorge: Große Kündigungswellen; Angestellte, die im Büro übernachten; mangelnde Moderation und Abschalten der Pressestelle; Hin-und-Her um das blaue Verifizierungshäkchen, welches durch Twitter Blue nichts mehr mit Verifizierung zu tun hat und so Identitäts-Imitation Tür und Tor geöffnet hat; das Killen von Drittanbieter-Apps … Ich habe bereits ein paar Punkte ausgelassen, aber solange es die Seite noch gibt, werden sicherlich weitere dazukommen.

Wenig erstaunlich also, wenn Nutzer stetig und besonders beim nächsten Vorkommnis abspringen oder zumindest parallel andere Social Media-Dienste ausprobieren.

Twitter-Gründer Jack Dorsey hat einen neuen Dienst namens Bluesky gegründet, der sich aktuell in der Beta-Phase mit Warteliste befindet, Meta hat kürzlich Threads gestartet, welches an Instagram gekoppelt ist – Anmeldungen sind innerhalb der EU jedoch bisher nicht möglich.

Und dann gibt es da wie üblich auch wieder die Open Source-Community, mit einer eigenen, nicht kommerziellen Antwort: Mastodon. Wobei dieses nicht neu ist, sondern jetzt aufgrund der Entwicklungen etwas vom Platz im Scheinwerferlicht erhält.

Der Einstieg – Was sind Instanzen?

Der Einstieg ist nicht ganz so offensichtlich, wie bei anderen Social Media-Seiten, die als kommerzielles Produkt eines Unternehmens betrieben werden. Mastodon ist von Natur aus ein verteiltes System: Jeder kann einen Server mit einer Instanz betreiben, die dann untereinander kommunizieren können. Als normaler Benutzer muss man sich daher entscheiden, auf welcher Instanz man sich anmeldet.

Ein guter Vergleich, den ich gelesen habe, ist der mit E-Mail: Man sucht sich einen E-Mail-Anbieter aus, teilt anderen seine Adresse mit und schickt sich dann Nachrichten.

Die größte Instanz dürfte mastodon.social sein, welche von der Mastodon gGmbH selbst betrieben wird. Eine Übersicht über weitere findet sich unter joinmastodon.org/de/servers. Dort lässt sich auch nach Themen filtern und so z. B. deutsche Regionen oder ein Server zu einem bestimmten Interesse finden. Ich selbst habe mich optimistisch auf mastodon.gamedev.place angemeldet.

Wichtige Informationen dazu:

Wenn du ein Konto auf Instanz A hast, kannst du trotzdem Leuten auf anderen Instanzen folgen, ihnen schreiben usw.
Betreiber einer Instanz können den Kontakt zu anderen Instanzen jedoch blockieren, was auch viel genutzt wird. Eine Liste der von z. B. mastodon.social ausgeschlossenen Server findet sich auf mastodon.social/about unter „Moderated servers“
Im lokalen Feed sieht man entsprechend nur Toots/Tröts des eigenen Servers. Hierfür ist die Wahl der Instanz relevant
Man kann sein Konto auch nachträglich zu einer anderen Instanz umziehen

Unterschiede zu Twitter

Ein offensichtlicher Unterschied sind die Bezeichnungen: Ein Tweet ist ein Toot bzw. Tröt, der Retweet ist ein Boost bzw. lautet einfach Teilen und den Quote Tweet … gibt es nicht.

Dafür kann man Nachrichten auch als Lesezeichen abspeichern, was entgegen dem Favoritisieren dem Verfasser nicht angezeigt wird. Generell hat man auch weniger Einblick in die Likes anderer Leute. Man kann zwar zu einem Post sehen, wer diesen geliked hat, aber man kann auf einem fremden Konto nicht einsehen, was diese Person alles als „Gefällt mir“ markiert hat.

Als letzer Punkt noch ein großer Unterschied: Es gibt keinen persönlichen Feed-Algorithmus. Du bekommst keine Vorschläge angezeigt, keinen Feed zusammengestellt und keine gesponsorten Nachrichten dazwischengeschoben. Das nimmt unter Umständen etwas vom Suchtfaktor, aber ist das schlecht? Kein Doom-Scrolling und geringere Chancen, dass emotional geladene oder bewusst kontroverse Messages eingestreut werden, um die Interaktionen und Views – das „Engagement“ – hochzutreiben.

Apps fürs Smartphone und Tablet

Mastodon ist keine App-First-Anwendung, weswegen eine offizielle App erst im April 2022 erschien. Seitdem scheint sich viel daran getan zu haben. Es gibt aber auch einige empfehlenswerte Drittanbieter-Apps, sodass sich mit Sicherheit eine passende fürs Smartphone oder Tablet finden lässt.

Die offizielle Mastodon-App (für Android und iOS, kostenlos) – Weiter unten auf der Seite befindet sich zudem eine Übersicht vieler weiterer Third-Party-Apps
Tusky (nur Android, kostenlos) – Eine App, die schon länger dabei ist, welche ich verwende und die auch über den F-Droid-Store verfügbar ist
Ivory (nur iOS, bezahlt auf Abonnement-/Subscription-Basis) – Von den Entwicklern der beliebten Tweetbot-App für Twitter, welche eingestellt werden musste

Threads und Interoperabilität – Digitale Nachbarn?

Spannend wird auch, ob es in Zukunft möglich sein wird, dass Leute auf Threads mit jenen bei Mastodon interagieren können. Denn von Meta ist angekündigt worden, das auch von Mastodon verwendete ActivityPub-Protokoll zu unterstützen.

Ob angesichts der bei Threads rasant steigenden Benutzerzahlen da allerdings großer Fokus drauf gelegt wird oder es dann doch unter den Tisch gefallen lassen wird, bleibt abzuwarten. Auch wäre denkbar, dass einige Mastodon-Admins aus datenschutzrechtlichen Bedenken vielleicht Threads aussperren werden – das Facebook-Unternehmen Meta hat in der Hinsicht schließlich zu Recht einen sehr schlechten Ruf.

Dead Cells: Unlocking the Daily Challenge blueprints in the bugged Linux GOG version

Seba — Mon, 28 Jun 2021 22:20:00 +0200

Dead Cells has a Daily Challenge or Daily Run mode, but it is just a minor optional part. Except that is required in order to unlock three weapons (“blueprints”) for the main game. Just by starting a Daily Run on different days unlocks the following blueprints:

Swift Sword (internal name SpeedBlade) the first time
Lacerating Aura (internal name DamageAura) after the fifth time
Meat Skewer (internal name DashSword) after ten starts

However, specifically the Linux version on GOG has an issue where it is impossible to start the Daily Challenge. The Linux version on Steam is not affected. To use anything online-related in Dead Cells – which thankfully is not a lot as it is a local single-player game – the GOG GALAXY client is required. Which does not exist for Linux. Until a GOG GALAXY client for Linux is released, I probably should not buy games from GOG anymore and just go with Steam, because otherwise I cannot trust that all features will work. Which is a pitty because I really like GOG for being DRM-free.

The Dead Cells issue is known for years and by now it seems rather unlikely it will be fixed. At some point a note was added to the store page:

Additional Notes: Galaxy client is required to access Daily Runs and Streaming features.

Let's hack the game

At the point of writing I was using Ubuntu 20.04.2 and the Dead Cells game version 1.14.0 / v24. You will need a hex editor which can handle big files of around 1 GB. I used and can recommend GHex. You can install it with:

$ sudo apt install ghex

In the rest of the article when I use a relative path, assume it is relative to the game installation directory, which in my case is ~/GOG Games/Dead Cells/.

First you should create a backup of the file game/res.pak because we will edit it and any mistake will lead to the game crashing. If that happens just replace the edited file with your backup. Or if you do not have one, reinstall the game. While you are at it, you might as well backup your saves – that is the directory game/save/.

This is the plan:

Find out the internal names of the desired blueprints.
Assign them to a common enemy as an often dropped reward.
Play the game to unlock it. Repeat this until all 3 are unlocked.

The tricky part is, that the edited file has to be the exact same size as before. My guess is this has to do with internal offsets for parsing, because res.pak is a container for many different files. The part we are going to edit belongs to a JSON file called data.cdb.

Step 1: Daily Reward blueprint names

When you open game/res.pak in GHex you just have to search for “dailyReward”. You will find a JSON list with the blueprints. Nicely formatted the section looks like this:

"name": "dailyReward",
"lines":
[
    {
        "item": "SpeedBlade",
        "step": 1
    },
    {
        "item": "DamageAura",
        "step": 5
    },
    {
        "item": "DashSword",
        "step": 10
    }
]

One trick that almost worked, was to set "step": 0. I started the game, tried unsuccessfully to start a Daily Run, and then found the SpeedBlade to be available at The Collector. However, it only worked for this one blueprint and not the other two.

Step 2: Assign to enemy

The most common enemy which also drops blueprints is the Zombie. Let us have a look at the relevant part of its JSON description:

"blueprints":
[
    {
        "rarity": "Rare",
        "item": "HorizontalTurret",
        "minDifficulty": 0
    },
    {
        "rarity": "Always",
        "item": "Bleeder",
        "minDifficulty": 0
    },
    {
        "rarity": "Rare",
        "item": "PrisonerBobby",
        "minDifficulty": 1
    }
],
"id": "Zombie",
"name": "Zombie"

The Bleeder entry looks like the perfect target to be replaced. “Always” does not actually mean the blueprint is always dropped, but it has a very decent chance. When I played to unlock, I actually got the item while still in the first level each time – just not directly from the first few enemies.

But keep in mind: The resulting file has to be the same size as before. Changing too much will just make everything harder on us. Bleeder is 7 characters long while SpeedBlade and DamageAura have a length of 10, and DashSword has 9 characters. To counter-balance that, I shortened the name “Zombie” by the difference. An example:

"blueprints":
[
    {
        "rarity": "Rare",
        "item": "HorizontalTurret",
        "minDifficulty": 0
    },
    {
        "rarity": "Always",
        "item": "DamageAura",
        "minDifficulty": 0
    },
    {
        "rarity": "Rare",
        "item": "PrisonerBobby",
        "minDifficulty": 1
    }
],
"id": "Zombie",
"name": "Zom"

A screenshot from the edited part in GHex (highlighted areas by me):

Step 3: Play the game

I just did some runs on the lowest difficulty. Once unlocked – or to be more precise: once the blueprints are available at The Collector – you can replace the edited res.pak with the original again. The blueprints will stay.

CellPacker

While it did not work for editing, CellPacker was a great help because I could use it to extract the data.cdb file. It is a lot more comfortable having an auto-formatted JSON file at hand. What did not work for me was to repackage res.pak with the tool – the operation required a whopping 12 GB RAM and the game crashed using the file.

Resources

And then it was gone – Notes about developing my js13k entry of 2020

Seba — Sun, 27 Sep 2020 16:00:00 +0200

This was the 3rd time I participated in the js13kGames game jam, so I was already aware of one thing: The size limit isn't my greatest problem, at least not to the extent of having to do code golfing right out of the gate. Instead I should make sure to have a good code base – multiple files for classes and namespaces as needed, named constants/variables instead of hardcoded values.

One really big advantage was, that I had already implemented things like an input system for keyboard and gamepad, and 2D collision detection in other projects of mine. I could just reuse some code with minor adjustments and save quite some time.

1. Improvement through little things

First some ideas on how to improve the general impression of the game, even though the player may not be actively aware of them.

Details to make the scene more alive. Especially animations can play a big role, and having a somewhat self-consistent art style – e. g. having a super detailed character would clash with uni-colored blocks as platforms. Some small details here are:

Standing on a platform and pressing down makes the character look down.
The character torso slowly bops up and down for breathing.
The character blinks.
Little dust clouds rise up when jumping.
Breaking platforms have little dust clouds.
The background moves slower than the foreground, giving a little sense of distance.

Coyote time. Directly after walking of a platform, the player still has a few frames time to jump even though the character isn't on ground anymore.

The game is paused when a gamepad is disconnected. If a gamepad was connected, it may have been used for playing the game. Let's assume it getting disconnected mid-game is an accident.

Pausing means not doing anything (or not much). If a game is a bit more taxing and makes the CPU or GPU sweat, it's good to have the possibility to give it a break and let the temperature drop down again. If you have a pause option – which on its own is already good – it should truly pause and not keep rendering a complex scene.

I went a bit further. When paused, the game renders the pause screen once and then stops the main loop – no updates, no rendering. The game only keeps listening for key events and does a slower gamepad polling to know when to continue.

2. Watch your (time) step

It did not happen a lot, but some entries did not account for different monitor refresh rates. So when the game was developed for 60 FPS, and it maxed out at 144 FPS on my system, the game ran too fast. In the best case animations just looked weird, but mostly it meant having a hard time with the controls.

The solution is to develop for a certain frame rate and introduce a time factor to account for differences. This factor is then used when updating the physics and animation progresses. In the following example that factor is the variable dt. If the target FPS is 60 and the game runs at 120, dt would be 0.5. Because the update and draw functions are called twice as often as targeted, the progress has to be slowed down by half.

js13k.Renderer = {

	/**
	 * Start the main loop. Update logic, render to the canvas.
	 * @param {number} [timestamp = 0]
	 */
	mainLoop( timestamp = 0 ) {
		js13k.Input.update();

		if( timestamp && this.last ) {
			// Time that passed between frames. [ms]
			const timeElapsed = timestamp - this.last;

			// Target speed of 60 FPS (=> 1000 / 60 ~= 16.667 [ms]).
			const dt = timeElapsed / ( 1000 / js13k.TARGET_FPS );

			// update and draw the level …
			this.update( dt );
			this.draw();
		}

		this.last = timestamp;

		requestAnimationFrame( t => this.mainLoop( t ) );
	}

};

I am not saying my solution is the best way to do it. It is short and works well enough, though. An excellent article on the topic is: Fix Your Timestep! by Glenn Fiedler

3. Improving performance

When I started drawing the spikes with lineTo() calls, the performance went noticably down. But since most level objects did not change, they could be cached by pre-rendering them to an invisible canvas. This unchanging canvas is then used in the main loop with drawImage().

/**
 * Render an object to an offscreen canvas.
 * @param  {js13k.LevelObject} o
 * @param  {number}            o.w - Width.
 * @param  {number}            o.h - Height.
 * @return {HTMLCanvasElement}
 */
function toOffscreenCanvas( o ) {
	// This canvas is never added to the document body.
	const canvas = document.createElement( 'canvas' );
	canvas.width = o.w;
	canvas.height = o.h;

	const ctx = canvas.getContext( '2d' );
	ctx.imageSmoothingEnabled = false;
	o.draw( ctx );

	return canvas;
}

The best part: This pre-rendered image can still be used for the breaking animation. The shaking before breaking apart is just a randomized offset in the drawing position, and breaking it in half means two drawImage() calls – one for the left half and one for the right half, cutting the image in half.

Another optimization: Only render what is currently in the viewport. The levels in my game are long, there is never everything at once on the screen. So before drawing a platform or an effect, there is a check if at least some part of the bounding box is inside the current viewport.

/**
 * Draw an object only if it is inside the visible viewport area.
 * @param {CanvasRenderingContext2d} ctx
 * @param {number}                   vpX - Viewport X offset.
 * @param {number}                   vpW - Viewport width.
 * @param {number}                   vpY - Viewport Y offset.
 * @param {number}                   vpH - Viewport height.
 * @param {js13k.LevelObject}        o
 * @param {number}                   o.x - X position in level.
 * @param {number}                   o.y - Y position in level.
 * @param {number}                   o.w - Width.
 * @param {number}                   o.h - Height.
 */
function drawIfVisible( ctx, vpX, vpW, vpY, vpH, o ) {
	if(
		// outside the viewport to the right
		o.x > vpX + vpW ||
		// outside the viewport to the left
		o.x + o.w < vpX
	) {
		return;
	}

	if(
		// outside the viewport to the bottom
		o.y > vpY + vpH ||
		// outside the viewport to the top
		o.y + o.y < vpY
	) {
		return;
	}

	o.draw( ctx );
}

4. What could have been better

One of my main goals were good controls. Moving and jumping should feel amazing. I did not reach that goal and had to settle with good enough. I even reinstalled Celeste to compare how the character controls felt and what was possible: Could you still change direction mid-air when falling after a jump? (Yes.)

Falling of a block while steering in a direction still looks strange as the character more glides away than falls down.

One big-ish decision was to allow multiple wall jumps up the same wall. In a way it is a bad design decision: On one hand there is a time limit until the character loses grip and slides down; on the other hand they can just jump up and cling to the same wall higher up again. But it just felt better and didn't make the game that much easier. All levels are still solvable without using this “trick”.

An optimization area I neglected was memory and garbage collection. In Firefox and on a really old laptop I noticed some micro stutters and lost frames, making the scene suddenly skip. In a game about precise platforming this is a little disaster. From what I read here and there, these stutters could be caused by garbage collection. Some untested thoughts on what to improve:

Not deleting destroyed platforms, just keep them flagged as such so they are not updated anymore and skipped in rendering.
On level begin create a pool of effects – like the dust clouds from jumping – and reuse them instead of creating them when the jump happens.

The second level goes vertically upwards. When the player is already at a higher checkpoint and falls down, it is better for them to not land on a previous checkpoint and instead directly fall to their death. Otherwise they are back at this previous checkpoint. That is just frustrating. Older checkpoints should not overwrite later ones.

The voting for this year's competition is still under way. Articles by other participants can be found on js13kgames.github.io/resources/.

Resources

Changing the message language for Bash

Seba — Thu, 18 Jun 2020 22:28:00 +0200

The system language of my Ubuntu installation is set to German. Per default this also means that my command line output is in German if the application supports it. This can be a bit of a hindrance when developing, because error messages and warnings will also be in German which makes it harder to search for solutions – most discussions in help forums and blogs are in English.

So let's change the terminal language. In your ~/.bashrc file add the following lines:

unset LC_ALL
export LC_MESSAGES=C

If LC_ALL had a value, it would overwrite the setting for LC_MESSAGES, so it has to be unset first. I first tried setting LC_ALL=C, but this had the undesired side effect of certain keys behaving differently. I have a German keyboard with QWERTZ layout, but keys like “ä”, “ö”, “ü” suddenly did different things. I can only assume I would have run into some other issues as well. So keep it simple and just change the messages.

The next terminal you open will have the setting applied. Also note that this only affects your terminal and no other applications – except those launched from said terminal.

To check your language settings you can use locale. My output using Bash looks like this:

$ locale
LANG=de_DE.UTF-8
LANGUAGE=de_DE:en
LC_CTYPE="de_DE.UTF-8"
LC_NUMERIC=de_DE.UTF-8
LC_TIME=de_DE.UTF-8
LC_COLLATE="de_DE.UTF-8"
LC_MONETARY=de_DE.UTF-8
LC_MESSAGES=C
LC_PAPER=de_DE.UTF-8
LC_NAME=de_DE.UTF-8
LC_ADDRESS=de_DE.UTF-8
LC_TELEPHONE=de_DE.UTF-8
LC_MEASUREMENT=de_DE.UTF-8
LC_IDENTIFICATION=de_DE.UTF-8
LC_ALL=

Side note: I also tried LC_MESSAGES=en_US.UTF-8, but that didn't work – no idea why. I also didn't look further into it since I have a working solution.

Sources

js13kGames: Tricks applied in Risky Nav

Seba — Sat, 15 Sep 2018 19:19:00 +0200

From the 13th August to the 13th September I participated in the js13kGames competition. My entry Risky Nav can be seen here and the source code is on GitHub here. In this blog post I will explain some of the tricks and techniques I used in making my game.

The game is tile based, so everything – player, monsters, goal – is always positioned at a (x, y) position on a 2D map.

About the background

The background is a single image which is created once right at the beginning. It is drawn on a canvas and each tile is 1px big. In the rendering loop it is then up-scaled to the desired tile size. To avoid a blurry image, it is necessary to disable anti-aliasing.

context.imageSmoothingEnabled = false;

let w = bgCanvas.width * tileWidth;
let h = bgCanvas.height * tileHeight;

function renderLoop() {
    context.drawImage( bgCanvas, 0, 0, w, h );
}

About the fog/shadow

The fog/shadow around the player is done in a similar way as the background. The image is pre-rendered with each tile being 1px and then up-scaled in the main loop. But it moves with the player. The darkness is determined by the euclidean distance from the player.

for( let y = 0; y < fogMapHeight; y++ ) {
    for( let x = 0; x < fogMapWidth; x++ ) {
        // Euclidean distance from origin.
        let de = Math.sqrt( x * x + y * y );

        // Darkness only starts 2 tiles away from the player.
        // f has to be a value between 0 and 1.
        let f = ( de < 2 ) ? 0 : Math.min( 1.15 - Math.min( 3 / de, 1 ), 1 );
        fogCtx.fillStyle = `rgba(0,0,0,${f})`;
        fogCtx.fillRect( x, y, 1, 1 );
    }
}

Path finding

The path finding for the navigation in the game can be done in a rather cheap fashion, thanks to a lot of restrictions. First, we only have a 2D map in which no diagonal movement is possible. Second, the goal and all obstacles have a static position so the map never changes. The only changing variable is the player position.

This allows to pre-calculate all the possible paths before the game starts. In the game we then only have to find the shortest path out of those already known. The algorithm to create a path map is:

Initialize all fields with the value 0.
Give the field of the goal the value 1. This is our step counter.
Mark every accessible field around the goal (up, down, left, right) as one step higher – with the value 2.
Repeat this for every field. So fields around the second one have the step value 3 and so on.

Here is an example. For better readability the unaccessible fields ("stones" in the game) are marked with a - instead.

[ ][ ][ ][ ][ ][-]
[ ][-][ ][ ][ ][ ]
[ ][-][ ][ ][1][ ]
[ ][ ][ ][ ][-][ ]
[ ][ ][ ][ ][ ][ ]

After the first marking:
[ ][ ][ ][ ][ ][-]
[ ][-][ ][ ][2][ ]
[ ][-][ ][2][1][2]
[ ][ ][ ][ ][-][ ]
[ ][ ][ ][ ][ ][ ]

And after that:
[ ][ ][ ][ ][3][-]
[ ][-][ ][3][2][3]
[ ][-][3][2][1][2]
[ ][ ][ ][3][-][3]
[ ][ ][ ][ ][ ][ ]

Final form:
[7][6][5][4][3][-]
[8][-][4][3][2][3]
[7][-][3][2][1][2]
[6][5][4][3][-][3]
[7][6][5][4][5][4]

When searching for a shortest path while the game is already running, we can now look up the player position in this map. We then instantly know how many steps it will take from our current position to the goal. To gather the concrete path, we check every field around the current one and select the one with a step value of 1 smaller. So assuming we stand on a field of value 5, we then select a field around us with value 4. Repeat and move to a field of value 3 and so on until we are at field 1 – which is the goal.

Better arrow key control

Just using the keydown/up events is not the best way to handle the controls. The keydown event fires repeatedly, but there is quite a break between the first event and the following repeated ones. Also the speed the events are fired at is most likely different from the speed of the game loop.

So instead you use the keydown/up event to keep track of the key states. In the game loop you then query the current state.

For every keydown you save as information the key and the current timestamp.
For every keyup you reset that timestamp to 0 or null or delete it.

let state = {};

document.body.onkeydown = ( ev ) => {
     state[ev.which] = Date.now();
};

document.body.onkeyup = ( ev ) => {
    state[ev.which] = 0;
};

In the game loop you can then do the following:

if( state[40] ) { player.moveDown(); }
else if( state[37] ) { player.moveLeft(); }
else if( state[39] ) { player.moveRight(); }
else if( state[38] ) { player.moveUp(); }

However, this can still be improved. Suppose you press multiple arrow keys at once. Currently it is a fixed order: Down is priorized over left is priorized over right is priorized over up. This can be confusing or downright annoying because it is not intuitive. The last pressed arrow key should always be the one being used. Let's add a function:

function getLastArrowKey() {
    let down = state[40] || 0;
    let left = state[37] || 0;
    let right = state[39] || 0;
    let up = state[38] || 0;

    let values = [down, left, right, up];
    values.sort( ( a, b ) => b - a );

    let max = values[0];

    if( !max ) {
        return null;
    }

    if( max === down ) { return 40; }
    if( max === left ) { return 37; }
    if( max === right ) { return 39; }
    if( max === up ) { return 38; }

    return null;
}

This will return the arrow key which has the most current timestamp. Now adjust the handling in the game loop:

let arrow = getLastArrowKey();

if( arrow === 40 ) { player.moveDown(); }
else if( arrow === 37 ) { player.moveLeft(); }
else if( arrow === 39 ) { player.moveRight(); }
else if( arrow === 38 ) { player.moveUp(); }

Applying those two techniques, the player will now move 1) at a steady rate the moment a key is first pressed down, and 2) even if multiple arrow keys are pressed, the last one is used. Even if the last one is released, then the one which has been pressed before that (and has not been released yet) will be used.

The little things

Some other, maybe not so obvious gameplay improvements:

Player and goal have a minimum distance at game start. Otherwise it would be too easy.
The player always starts near a map border, but not the bottom one. If the player started at the bottom, he most likely would walk up and the character face would not be visible.
Monsters are randomly placed, but always a minimum distance from the player. Avoid that the player gets killed right away in the first seconds.
It is Game Over on the second hit. After the first hit, the player is invincible for 2 seconds to give him a chance to get away.
Using path finding, check if there is a guaranteed path between player and goal before the game starts.
The monsters are dump and try to take the most direct way to the player. This means they could get stuck on stones. To prevent this, they take a random step if the next tile is not an accessible one.

Dead Cells: PS4 controller support on Linux

Seba — Sat, 11 Aug 2018 01:28:00 +0200

Dead Cells is a game, it is really good, and it is available for Linux. However right after installation (version 1.0 from GOG) it did not recognize my PS4 controller. It could not be a problem with the controller itself or Linux in general, because the DS4 worked with other applications – for example it showed up perfectly fine in jstest-gtk (0.1.0).

After some research I came across this reddit post. Dead Cells uses the SDL library, so maybe that's it. I followed the instructions and built and ran sdl2-jstest. The output should contain an entry like this for the DS4 (2nd gen):

Joystick Name:     'Sony Interactive Entertainment Wireless Controller'
Joystick GUID:     030000004c050000cc09000011810000
Joystick Number:    0
Number of Axes:     6
Number of Buttons: 13
Number of Hats:     1
Number of Balls:    0
GameControllerConfig:
  Name:    'PS4 Controller'
  Mapping: '030000004c050000cc09000011810000,PS4 Controller,a:b0,b:b1,back:b8,dpdown:h0.4,dpleft:h0.8,dpright:h0.2,dpup:h0.1,guide:b10,leftshoulder:b4,leftstick:b11,lefttrigger:a2,leftx:a0,lefty:a1,rightshoulder:b5,rightstick:b12,righttrigger:a5,rightx:a3,righty:a4,start:b9,x:b3,y:b2,platform:Linux,'

… or like this for the DS4 (1st gen):

Joystick Name:     'Sony Computer Entertainment Wireless Controller'
Joystick GUID:     030000004c050000c405000011810000
Joystick Number:    0
Number of Axes:     6
Number of Buttons: 13
Number of Hats:     1
Number of Balls:    0
GameControllerConfig:
  Name:    'PS4 Controller'
  Mapping: '030000004c050000c405000011810000,PS4 Controller,a:b0,b:b1,back:b8,dpdown:h0.4,dpleft:h0.8,dpright:h0.2,dpup:h0.1,guide:b10,leftshoulder:b4,leftstick:b11,lefttrigger:a2,leftx:a0,lefty:a1,rightshoulder:b5,rightstick:b12,righttrigger:a5,rightx:a3,righty:a4,start:b9,x:b3,y:b2,platform:Linux,'

Take the value behind Mapping and add a line in your /etc/environment file like this:

SDL_GAMECONTROLLERCONFIG='030000004c050000cc09000011810000,PS4 Controller,a:b0,b:b1,back:b8,dpdown:h0.4,dpleft:h0.8,dpright:h0.2,dpup:h0.1,guide:b10,leftshoulder:b4,leftstick:b11,lefttrigger:a2,leftx:a0,lefty:a1,rightshoulder:b5,rightstick:b12,righttrigger:a5,rightx:a3,righty:a4,start:b9,x:b3,y:b2,platform:Linux,'

After the next reboot everything should be working. Or if you want to test it right away without reboot, then you can just add it to the start script of the game. Assuming you used the standard installation path from the GOG installer, the file is located at ~/GOG Games/Dead Cells/start.sh. Change the file so it now begins with:

#!/bin/bash
# GOG.com (www.gog.com)
# Game

export SDL_GAMECONTROLLERCONFIG='030000004c050000cc09000011810000,PS4 Controller,a:b0,b:b1,back:b8,dpdown:h0.4,dpleft:h0.8,dpright:h0.2,dpup:h0.1,guide:b10,leftshoulder:b4,leftstick:b11,lefttrigger:a2,leftx:a0,lefty:a1,rightshoulder:b5,rightstick:b12,righttrigger:a5,rightx:a3,righty:a4,start:b9,x:b3,y:b2,platform:Linux,'

That's what worked for me. If it still doesn't for you, try adding some udev rules as described in my article Using NW.js to communicate with a DS4 controller.

JavaScript source protection with NW.js

Seba — Sat, 26 May 2018 19:21:00 +0200

You can minify and uglify JavaScript files, but technically the source code of your distributed NW.js application is still readable. But NW.js also provides the means to compile JavaScript to a binary file and then load it as part of the application. The command line tool nwjc to create the binary file is included in the SDK version.

Assuming you have a JavaScript file js/private.js:

'use strict';

function secretFunction( foo ) {
    return foo * 4;
};

Then you can compile it like this to a file js/private.bin:

$ ./nwjs-sdk-v0.30.5-linux-x64/nwjc js/private.js js/private.bin

Internally the tool uses the V8 snapshot feature, which means the versions have to match. A binary file created with NW.js 0.30 can only be loaded by 0.30. Binary files also do not work cross-platform. For each platform it is necessary to compile its own binary file with the SDK for the same platform.

To then load the binary file in your application, it works like this:

let win = nw.Window.get();
win.evalNWBin( null, 'js/private.bin' );

let value = secretFunction( 4 ); // returns 16

Note however that the loading is per window. If you open another window in your application, the file has to be loaded there again.

Using the DevTools you can of course find the functions and variables which have been loaded from the file. The function implementation however is protected:

> String( secretFunction )
< "function secretFunction() { [native code] }"

DevTools issues

Update 2018-12-15: Since NW.js 0.34 this issue seems to be fixed. Loading binary files works even with the DevTools open.

There is an issue with loading binary files and the DevTools. Basically you cannot have the DevTools open and then load the file. There will be no error, but the contents will not be available. This is a known issue.

My temporary solution is to just close the DevTools. But just closing them right before is not enough, you also have to use a timeout before loading the file:

let win = nw.Window.get();

// Function is only available in the SDK build.
if( typeof win.closeDevTools === 'function' ) {
    win.closeDevTools();
}

setTimeout( () => {
    win.evalNWBin( null, 'js/private.bin' );
}, 500 );

But why not check first if the DevTools are open? Then you could open them again afterwards. According to the API documentation there is win.isDevToolsOpen(). But it exists only in the documentation. Using the SDK build there is de facto no such function. This too is a known issue.

Wine for Windows

I successfully used Wine 3 to compile a binary file for the Windows version of a NW.js application and then load it there. So if you are on Linux or macOS you will not need Windows for your build process. You should of course still test your application to make sure it works on all targeted platforms.

Using NW.js to communicate with a DS4 controller

Seba — Thu, 07 Dec 2017 19:55:00 +0100

NW.js still provides the Chrome Apps API which has been removed from Chrome, but not ChromeOS. This will allow us to access in a platform-independant manner devices which are connected with the PC per USB.

Without this API, a 3rd party Node.js module like node-hid could be used. This will however come with platform-dependant libraries and will have to be updated or rebuild each time the Node.js version changes.

This article concentrates on sending data to the controller. However it is also possible to retrieve data like pressed buttons using the established connection. Aside from using chrome.hid there is also the Gamepad API for read-only access.

Identifying the controller

First we need a way to identify the DS4. Devices come with a vendor Id and product Id. According to the Gentoo Wiki they are as follows:

Device	Vendor Id	Product Id
DS4 (1st gen)	hex `054C` / dec `1356`	hex `05C4` / dec `1476`
DS4 (2nd gen)	hex `054C` / dec `1356`	hex `09CC` / dec `2508`

Having tested with both devices, I can also confirm the Ids.

Get the device

For all communication with the device, we will use the chrome.hid API. First we define a filter using the vendor and product Id, and then query the available devices:

var filter = {
    filter: [
        { vendorId: 1356, productId: 1476 },
        { vendorId: 1356, productId: 2508 }
    ]
};

chrome.hid.getDevices( filter, ( devices ) => {
    // Error handling.
    if( chrome.runtime.lastError ) {
        console.error( chrome.runtime.lastError );
        return;
    }
    if( !devices ) {
        return;
    }

    var device = devices[0];
    // Next: Connect to the device.
};

Linux

On Linux you have to add some udev rules to be able to access the devices as non-root. Create a file /etc/udev/rules.d/61-dualshock.rules with the following content:

SUBSYSTEM=="input", GROUP="input", MODE="0666"
SUBSYSTEM=="usb", ATTRS{idVendor}=="054c", ATTRS{idProduct}=="05c4", MODE:="666", GROUP="plugdev"
KERNEL=="hidraw*", SUBSYSTEM=="hidraw", MODE="0664", GROUP="plugdev"

SUBSYSTEM=="input", GROUP="input", MODE="0666"
SUBSYSTEM=="usb", ATTRS{idVendor}=="054c", ATTRS{idProduct}=="09cc", MODE:="666", GROUP="plugdev"
KERNEL=="hidraw*", SUBSYSTEM=="hidraw", MODE="0664", GROUP="plugdev"

Then reload the udev rules with the following command. If your DS4 was plugged in, you will have to disconnect it and then connect it again afterwards.

sudo udevadm control --reload-rules

Source: https://npmjs.com/package/dualshock-controller

Connect

In order to connect with the device the device Id is necessary. On success the callback will be passed a connection object containing a connection Id we will need.

chrome.hid.connect( device.deviceId, ( connection ) => {
    // Error handling.
    if( chrome.runtime.lastError ) {
        console.error( chrome.runtime.lastError );
        return;
    }
    if( !connection ) {
        return;
    }

    var connectionId = connection.connectionId;
    // Next: Send a command.
} );

Send the command

The command will be passed as a buffer of length 10 of type uint8 so the values are between 0 and 255. The report Id has to be 5.

const reportId = 5;

var data = new Uint8Array( 10 );
var i = 0;
// Unchanging beginning.
data[i++] = 0xFF;
data[i++] = 0x04;
data[i++] = 0x00;
// Options we can use.
data[i++] = 0x00; // rumble right
data[i++] = 0x00; // rumble left
data[i++] = 0x00; // red LED brightness
data[i++] = 0xFF; // green LED brightness
data[i++] = 0x00; // blue LED brightness
data[i++] = 0x00; // flash on duration
data[i++] = 0x00; // flash off duration

chrome.hid.send( connectionId, reportId, data.buffer, () => {
    // Error handling.
    if( chrome.runtime.lastError ) {
        console.error( chrome.runtime.lastError );
    }
} );

Setting all RGB values to 0 will turn off the light. The rumble values let the controller side rumble stronger the higher the value. Sending a 0 while it still rumbles – it stops after a few seconds on its own – will stop it immediately.

Source for the format: https://github.com/ehd/node-ds4

Disconnect

When you don't need the device anymore, disconnect it.

chrome.hid.disconnect( connectionId, () => {
    // Error handling.
    if( chrome.runtime.lastError ) {
        console.error( chrome.runtime.lastError );
    }
} );

Android file transfer over MTP is a nightmare

Seba — Fri, 02 Sep 2016 23:00:00 +0200

Update, 30.09.2017: After trying it again today, I found none of the problems listed below anymore. It's fast and painless. So that's good!

It was bad before, but after the upgrade to Ubuntu 16.04 – which may or may not be related, it probably is – it went from bad to downright painful. Connecting device and PC works fine. What does not is …

It is slow. Opening the SD card directory with my music takes several seconds.
After deleting files the amount of available space is not updated. I free space for new files but get a warning telling me there isn't enough free space. At least I have the option to try and copy the files anyway, ignoring the warning.
The new problem: After just one transfer, I cannot access the device per MTP anymore. No content is listed for the music directory anymore. Seemingly trying to load the contents it ultimately fails to do so. Unplugging does not help. Restarting the PC does not help. Restarting the device does not help. Using a different PC with macOS does not help. What helps is … using the Android file manager and deleting a file. Something is seriously broken here.

In early Android versions the device was mounted as USB mass storage. Those were the good, old days. At least they had understandable reasons for replacing it.

An alternative to using MTP is FTP. I used the app FTPServer to start an FTP server on my device while connected to my home WiFi. In the FTPServer settings I chose wlan0 as standard interface and pointed the server root to the directory /mnt/extSdCard. Now I can use FileZilla or Nautilus (see image above) to connect to the server from my PC. The transfer speed is of course a little limited, but the file transfer itself? – works just fine.

While I'm happy to have found a good alternative to the nightmare that is MTP, I find this whole situation quite ridiculous. At some point I'd like to upgrade from my Galaxy S3. While I'm not considering iOS or Windows Phone, I'm also disappointed of Android. Hopefully the Ubuntu phones take of.

Improvements after Mozilla’s Observatory results

Seba — Sat, 27 Aug 2016 16:15:00 +0200

Mozilla made their Observatory service public, which lets you check the security of sites. A first run resulted in an F for sebadorn.de. Following some of the suggestions I could improve that to a B-.

1. Redirect HTTP to HTTPS

Thanks to Let’s Encrypt I already offered HTTPS, but I didn't enforce it. Now visitors to http://sebadorn.de are redirected to https://sebadorn.de. I did so by adding the following rule to my .htaccess file:

<IfModule mod_rewrite.c>
	RewriteEngine On
	RewriteCond %{HTTP_HOST} ^sebadorn\.de [NC]
	RewriteCond %{SERVER_PORT} 80
	RewriteRule ^(.*)$ https://sebadorn.de/$1 [R,L]
</IfModule>

2. Add some more headers

<IfModule mod_headers.c>
	Header always edit Set-Cookie (.*) "$1; HttpOnly; Secure"
	Header set Content-Security-Policy "frame-ancestors 'self'"
	Header set X-Content-Type-Options "nosniff"
	Header set X-Frame-Options "SAMEORIGIN"
	Header set X-XSS-Protection "1; mode=block"
</IfModule>

Set-Cookie: Cookies about to be set received additional directives: HttpOnly and Secure. HttpOnly disallows cookies being read by JavaScript and Secure enforces an HTTPS connection. (Source)
X-Content-Type-Options: Setting this header to nosniff tells browsers not to try and guess the MIME type of contents, which potentially prevents XSS attacks. (Source)
X-Frame-Options: Setting this header to SAMEORIGIN or DENY prevents other pages from displaying the site in a frame which prevents clickjacking. (Source)
X-XSS-Protection: Setting this header to 1; mode=block tells browsers to try and detect XSS attacks and in this case stop loading the page. (Source)

Remove intro/outro from an MP3 without re-encoding

Seba — Thu, 03 Dec 2015 21:44:00 +0100

I have this podcast I listen to repeatedly. But most episodes have an intro and outro part before the actual episode, which gets quite annoying. One possibility is, of course, to just use an audio editor like Audacity, cut the unwanted parts, and save the file. But this would result in the MP3 being re-encoded and losing in quality. This shouldn't be necessary since I only want to cut off some data, right?

The tool for the job is mp3splt. I wrote this little bash script:

#!/usr/bin/env bash

F_IN=$1
F_OUT=${F_IN%.mp3}
START=$2
END=EOF-$3
OUT_DIR=./nointro

# Split at "-".
FILE_SPLIT=(${F_IN//-/ })

# Remove "_" and " " characters.
TRACK=${FILE_SPLIT[0]//_/}
TRACK=${TRACK// /}

mp3splt -f -d "$OUT_DIR" "$F_IN" "$START" "$END" -o "$F_OUT"
eyeD3 --track=$TRACK "$OUT_DIR/$F_IN"

Example: ./shorten.sh 26-FacelessOldWoman.mp3 1.18 1.15.5

First, the track number will be extracted from the file name. In my case, the number is always at the beginning and separated by a minus from the title. So we split the string and remove some unwanted characters (whitespace, underscore).

In the example, the first 1min 18sec will be removed and the last 1min 15.5sec. The resulting MP3 will be saved with the same name in the directory set in OUT_DIR.

Most id3 tags will be kept – including the embedded cover –, but the track number will be overwritten by mp3splt. That is why I extracted the track number from the file name before. Now I can set it again with eyeD3.

Done.

Stackless BVH traversal

Seba — Fri, 13 Mar 2015 23:42:00 +0100

Im Path Tracing verwendet man spezielle Datenstrukturen für die Geometrie, um diese schneller gegen die Strahlen testen zu können. Eine der üblichsten ist dabei die Bounding Volume Hierarchy (BVH) – ein Binärbaum, der die Szene immer weiter unterteilt. Einen solchen Baum würde man normalerweise rekursiv durchlaufen. Auf der GPU mit OpenCL steht jedoch keine Rekursion zur Verfügung.

Was man daher macht, ist, selbst einen kleinen Stack zu verwalten, in dem man sich den nächsten zu besuchenden Knoten merkt. Dieser Stack benötigt jedoch zusätzlichen privaten Speicher, welcher knapp bemessen ist, und dadurch die Anwendung ausbremst. Wünschenswert ist daher ein Verfahren, das ohne Stack auskommt.

Aufbau und Ablauf

Jeder Knoten hat entweder genau zwei oder keine Kindknoten.
Jeder Knoten hat zudem ein Attribut nextNode.
- Für den linken Kindknoten zeigt nextNode auf den rechten Geschwisterknoten.
- Für den rechten Kindknoten zeigt nextNode auf den Elternknoten.

Vom Wurzelknoten aus wird immer zuerst dem linken Kindknoten gefolgt. Falls der Strahl die Bounding Box nicht trifft, es sich um einen Blattknoten handelt oder zuletzt ein rechter Knoten besucht wurde, dann wird als nächstes der Knoten besucht, auf den nextNode zeigt. Ist man wieder beim Wurzelknoten angelangt, beendet der Algorithmus.

Nachteil: Knoten werden auf dem Weg nach oben erneut besucht. Ein unnötiger Schritt, der nur zusätzliche Zeit in Anspruch nimmt.

Optimierung

Die Optimierung ist denkbar einfach. Dafür muss jediglich der nextNode der rechten Knoten angepasst werden. Anstatt auf den Elternknoten, können rechte Kindknoten direkt auf den nächsten zu testenden Knoten zeigen.

Dafür setzt man zunächst nextNode immer weiter auf einen höheren Elternknoten, bis es sich bei diesem um einen linken Kindknoten handelt. Danach setzt man nextNode auf den rechten Geschwisterknoten. Auf diese Weise werden alle bereits besuchten Elternknoten übersprungen. Existiert kein rechter Kindknoten, ist man beim Wurzelknoten angelangt und zeigt auf diesen, was den Endpunkt markiert.

Den so erzeugten Baum kann man dann folgendermaßen abwandern:

int index = 0;

do {
	bvhNode node = scene->bvh[index];

	float tNear = 0.0f;
	float tFar = INFINITY;

	bool isNodeHit = (
		intersectBox( ray, node, &tNear, &tFar ) &&
		tFar > 0.00001f && ray->t > tNear
	);

	// In case of no hit: Go right or up.
	index = node.nextNode;

	if( !isNodeHit ) {
		continue;
	}

	// Not a leaf node, progress further down to the left.
	if( !isLeaf( node ) ) {
		index = node.leftChild;
	}
	// Node is leaf node.
	else {
		intersectFaces( scene, ray, node, tNear, tFar );
	}
} while( index > 0 );

Anmerkung: Links/rechts

Welcher der beiden Kindknoten als „linker“ und welcher als „rechter“ gesetzt wird, ist egal. Ich setze als linken Kindknoten denjenigen mit mehr Oberfläche. Mehr Oberfläche bedeutet, dass ihn potentiell mehr Strahlen treffen und man so eventuell ein früheres Ende erreicht. Tatsächlich hat diese Vorsortierung die Performance geringfügig verbessert.

Resultat

Mein Algorithmus kommt wie gewünscht ohne Stack aus. Weiterer Speicher wird nur für eine Variable index, sowie ein neues Knoten-Attribut nextNode benötigt. Beim Abwandern des Baumes wird jeder Knoten höchstens ein einziges Mal besucht.

Zumindest in meiner Implementierung [1] verbesserten sich die Render-Zeiten in allen meinen Test-Szenen. Dies kann aber auch an einer schlechten Implementierung des Stack-basierten Algorithmus liegen, mit dem verglichen wurde. Ich habe beide Verfahren im Projekt belassen und versuche sie von Zeit zu Zeit weiter zu optimieren und erneut zu vergleichen.

[1] Vorbereitung der BVH-Datenstruktur und BVH traversal.

Standalone-Anwendungen mit node-webkit

Seba — Sun, 19 Oct 2014 16:28:00 +0200

Gestern habe ich ein wenig in node-webkit reingeschnuppert. Damit sollen sich ganz einfach Desktop-Anwendungen auf Basis von HTML, JavaScript und Node.js erstellen lassen. Die erstellte Anwendung lässt sich dann relativ einfach für verschiedene Betriebssysteme verpacken. Für nicht allzu rechen-intensive Spiele scheint mir das recht interessant. Tatsächlich verwendet auch das kürzlich erschiene A Wizard's Lizard node-webkit [1].

Für eine kleine Demo habe ich das Beispiel von three.js genommen und als Anwendung verpackt. Das HTML und JavaScript lasse ich hier mal aus. Mein package.json für ein Fenster ohne Toolbar sieht wie folgt aus:

{
	"main": "index.html",
	"name": "nw-demo",
	"window": {
		"frame": true,
		"height": 600,
		"kiosk": false,
		"toolbar": false,
		"width": 900
	}
}

Den Inhalt des Projekt-Verzeichnisses verpackt man als nächstes als ZIP-Archiv:

zip -r demo.nw *

Diese Datei lässt sich mit nw demo.nw ausführen, benötigt aber eben weiterhin node-webkit auf dem System. Im nächsten Schritt wird node-webkit daher in das Archiv integriert:

cat ~/node-webkit-v0.10.5/nw demo.nw > demo && chmod +x demo

Versucht man nun ./demo auszuführen, gibt es eine Fehlermeldung:

[13445:1019/161018:FATAL:content_main_runner.cc(751)] Check failed: base::i18n::InitializeICU().

Im selben Verzeichnis wie die Standalone-Anwendung müssen auch die Dateien nw.pak und icudtl.dat liegen. Beide Dateien finden sich im selben Verzeichnis wie nw, hier also ~/node-webkit-v0.10.5/. Einfach herüberkopieren und die Anwendung lässt sich starten.

Meine kleine Demo habe ich auf GitHub hochgeladen. Darin befindet sich auch ein Build-Skript für Linux, das sich um alles kümmert. Es muss nur der Pfad zur node-webkit-Installation angepasst werden.

[1] forum.lostdecadegames.com/topic/115/node-webkit-and-steam

Sublime Text 3 portable unter Linux

Seba — Fri, 05 Sep 2014 15:24:00 +0200

Sublime Text ist derzeit der Editor meiner Wahl, zusammen mit einigen Zusatz-Paketen. Installiert habe ich ihn über das Web Upd8 PPA. Das ist allerdings hinderlich, wenn man ihn auch als normalen Text-Editor zum spontanen Bearbeiten verwenden möchte. In dem Fall springt immer das zuletzt geöffnete Projekt mit auf. Eine Extra-Installation wäre hier praktisch.

Lade Sublime Text 3 als tarball herunter.
Entpacke das Archiv nach ~/.st3_portable. (Name egal.)
Erstelle in dem Verzeichnis einen Ordner namens Data. (Wichtig!)

Das reicht schon, um auf eine portable Version umzustellen. Für die Verwendung als Gelegenheits-Text-Editor steht aber noch ein wenig mehr an. So soll, wenn eine Datei geöffnet wird, auch das zugehörige Verzeichnis in der Sidebar angezeigt werden. Dafür erstellt man sich ein kleines Bash-Skript ~/.st3_portable/st3_p.sh:

#!/bin/bash
cd ~/.st3_portable/
FOLDER=$(dirname "$1")
./sublime_text "$FOLDER" "$1"

Das Argument $1 ist die zu öffnende Datei. Im letzten Schritt muss nun noch eine .desktop-Datei angelegt werden. Erstelle eine Datei ~/.local/share/applications/st3-portable.desktop mit dem Inhalt:

[Desktop Entry]
Version=1.0
Type=Application
Name=Sublime Text 3 (portable)
Comment=Sophisticated text editor for code, markup and prose
Exec=/home/seba/.st3_portable/st3_p.sh %F
Terminal=false
MimeType=text/plain;
Icon=sublime-text
Categories=TextEditor;Development;Utility;
StartupNotify=true

X-Desktop-File-Install-Version=0.21

Anstatt /home/seba/ sollte da natürlich der eigene Benutzername stehen. Relative Pfadangaben bzw. ~/ funktionieren hier nicht. Ist die Datei gespeichert, sollten sich Dateien nun per Rechtsklick › Öffnen mit › Sublime Text 3 (portable) öffnen lassen.

Mit dem Upgrade zu Ubuntu 14.04 hätte ich noch warten sollen

Seba — Sat, 17 May 2014 13:10:00 +0200

Da meine Masterarbeit abgeschlossen ist, habe ich gestern das Upgrade von Ubuntu 13.10 auf 14.04 gewagt. Zwar gab es keine kritischen Probleme, aber doch einige Ärgernisse – wovon sich die meisten mit Recherche und Herumprobieren beheben ließen.

Konflikt zwischen Wine und NVIDIA-OpenCL

Es macht keinen Sinn, aber scheinbar hat jemand in den Paket-Abhängigkeiten gepfuscht oder sonst irgendetwas. Wollte man wine installieren, musste nvidia-libopencl1-331 deinstalliert werden und vice versa. Ich brauche beide Pakete. Wie sich herausstellte, lässt sich Wine 1.7 aber installieren.

Dafür fügt man das Wine Team PPA zu seinen Softwarequellen hinzu und kann dann wine1.7 installieren. Daraufhin lässt sich auch playonlinux installieren.

Sollte /usr/lib/libOpenCL.so dann immer noch fehlen, muss wahrscheinlich nur ein Symlink nachgetragen werden:

sudo ln -s /usr/lib/i386-linux-gnu/libnvidia-opencl.so.1 /usr/lib/libOpenCL.so

Fallout 3 läuft nicht mehr unter Wine

~~Ein leider noch ungelöstes Problem.~~ Vor dem Upgrade lief Fallout 3 unter Wine ziemlich gut – nicht perfekt, aber ziemlich gut. Jetzt öffnet sich nur noch ein inhaltsloses Fenster. Eine Neu-Installation hat nicht geholfen. Mit Debugging bin ich auch noch nicht weit gekommen, da in den Logs kein eindeutiger Fehler zu finden ist. Wer Tipps hat, ich wäre dankbar. Vielleicht tauchen ja demnächst Leidensgenossen auf appdb.winehq.org auf.

[Update 2014-05-18]: Wine 1.7.19 ist erschienen und behebt genau dieses Problem (siehe Changelog).

In Firefox keine YouTube-HTML5-Videos über 360p

Grund ist mangelnde Unterstützung des H.264-Codecs. Das ist jedoch nichts Neues und bisher gab es dafür einen Workaround mit GStreamer. Der funktioniert nun nicht mehr, da die benötigten Pakete durch neuere ersetzt wurden.

Eine Möglichkeit ist sicherlich, ein PPA zu finden, dass die alte Version zur Verfügung stellt, aber ich habe ehrlich gesagt genug davon, andauernd andere PPAs einbinden zu müssen. Was YouTube anbelangt steige ich wieder auf Flash um. Mit Firefox 30 könnte sich das wieder ändern, wenn dann hoffentlich GStreamer 1.0 unterstützt wird.

GNOME-Terminal ohne Transparenz

Wie aus dieser Antwort eines GNOME-Entwicklers hervorgeht, wurde Hintergrund-Transparenz im Rahmen größerer Code-Aufräumarbeiten (vorerst?) entfernt. Ich will aber transparente Terminals, also bin ich auf Terminator umgestiegen.

sudo apt-get install terminator

Einige GNOME Shell-Erweiterungen sind nicht aktuell

Ich mag die GNOME Shell. Aber nur durch einige Erweiterungen wird sie wirklich gut, ansonsten wäre sie arg unattraktiv für mich. Die eine oder andere Erweiterung wurde von ihrem Autor leider noch nicht aktualisiert, was zum Glück kein allzu großes Problem darstellt. Diese Erweiterungen sind in JavaScript geschrieben und liegen einfach in einem HOME-Unterverzeichnis (~/.local/share/gnome-shell/extensions/). Die folgenden Anpassungen waren ausreichend für Nvidia GPU Temperature Indicator und Sensors.

In metadata.json die aktuelle Version eintragen:
```
"shell-version": ["3.10"],
```

Anstatt PanelMenu.SystemStatusButton verwendet man PanelMenu.Button.

PanelMenu.Button.prototype._init.call(this, 0.0, 'sensorsMenu', false);

Aus der Funktion .addActor() wurde .actor.add().

Symbole im Cairo-Dock verschwinden

Zusätzlich zur GNOME Shell habe ich noch am Bildschirmrand ein Cairo-Dock für die offenen Anwendungen. Leider waren viele Symbole plötzlich nicht mehr zu sehen. Die Lösung war erfreulich unkompliziert. Cairo-Dock muss im OpenGL-Modus gestartet werden:

cairo-dock -o

Bilder aus der Masterthesis: Physik-basiertes Rendering

Seba — Thu, 10 Apr 2014 02:59:00 +0200

Das große Eichhörnchen ist aus Glas (Brechungsindex 1,5). Die dunklen Stellen – z.B. an der Schnauze – sollten nicht dunkel sein, aber der Pfad hat hier seine maximale Länge erreicht, weshalb keine Licht- und somit Farbinformationen gewonnen werden konnten. Die ganzen Erklärungen, was ich in diesem Projekt überhaupt gemacht habe, kommen irgendwann in einem anderen Blogeintrag.

Gleiche Szene wie eben, nur wurde als Licht ein eher dunkles, warmes Orange (CIE A) gewählt. Das kleine Eichhörnchen wurde zudem zur weißen Lichtquelle umdefiniert.

Ein Ikosaeder in der Mitte und die Wände links und rechts davon spiegeln. Allerdings ist die Spiegelung nicht perfekt, sondern leicht matt gewählt, weshalb das Bild mit zunehmender Spiegelungsanzahl verschwimmt. Die schwarze Wand am Schluss gibt es nicht wirklich, hier haben die Pfade nur wieder ihr Maximum erreicht.

Die weißen Linien zeichnen die Bounding Boxen ein. Als Datenstruktur wurde eine Bounding Volume Hierarchy verwendet – die Dreiecke wurden in kleine Gruppen eingeteilt.

Matter, grüner Boden. Der Affenkopf ist das Suzanne-Modell von Blender. Hier ist sehr schön Color Bleeding zu sehen – die Farbe des grünen Bodens strahlt auf die Objekte ab.

Das Applejack-Modell von KP-ShadowSquirrel. Die Farben und Material-Eigenschaften habe allerdings ich verbockt. Die richtigen Farben zu finden ist recht schwer, wenn man sie nicht einfach per Color Picker und Schieberegler zusammenklicken kann. Da mein Renderer mit Wellenlängen und Intensitäten zur Farbrepräsentation arbeitet, war viel Ausprobieren und Herantasten nötig.

Noch einmal mit anderer Beleuchtung. Alle Bilder wurden für circa 2 Minuten bei 10 FPS auf der Grafikkarte gerendert.

Der kleine Kampf CyanogenMod auf dem Galaxy S1 zu installieren

Seba — Fri, 16 Aug 2013 19:17:00 +0200

Um das Ende vorwegzunehmen: Die Installation selbst hat reibungslos geklappt und auf meinem alten Samsung Galaxy S1 läuft nun super-flüssig CyanogenMod 10.1 (Android 4.2.2). Auf den Schritten dahin bin ich nur unterwegs ein wenig angeeckt.

Ich folgte dabei (so gut es ging) der offiziellen Anleitung.

Heimdall für 64-Bit-Linux funktioniert nicht mit 64-Bit-Linux

Heimdall wird benötigt, um eine Recovery-Datei auf das Smartphone zu schieben, während es sich im Download Mode befindet. Heimdall gibt es für Windows, Linux und Mac. Nur funktioniert die 64-Bit-Linux-Version scheinbar nicht bei jedem, worauf in der Anleitung aber auch hingewiesen wird. Die 32-Bit-Version erfüllt aber ihren Zweck. Von daher war das nicht wirklich ein Problem.

Endlose Boot-Schleife

Nun sollte ich also in den ClockworkMod Recovery Mode booten, indem ich zum Einschalten Volume up + Home + Power drücke. Dies machte ich, aber das Gerät kam nicht über den Boot-Begrüßungs-Screen (der mit dem Samsung-Logo) hinweg. Ab und zu flackerte dieser mal kurz, ansonsten ging es aber nicht mehr weiter. Ich probierte es mehrmals, manchmal konnte ich es wieder über den Power-Knopf ausschalten, manchmal entfernte ich einfach den Akku.

Ein kurzes YouTube-Erklär-Video brachte mich schließlich auf den Trichter, dass mein Timing schlecht war. Man darf die Tastenkombination nur so lange drücken, bis das Samsung-Logo erscheint. Entweder habe ich vorher immer zu lange oder zu kurz gehalten, aber diesmal hat es geklappt.

Wie bekomme ich das Image nach /sdcard?

Nun musste also das CyanogenMod-ZIP auf den internen Speicher verfrachtet werden. Die Anleitung empfiehlt dafür ADB – ich hingegen rate davon ab, das schont Nerven. Meine aktuelle ADB-Version hat das Smartphone immer als offline aufgeführt und entsprechend konnte ich auch nicht damit interagieren. Ich habe verschiedene USB-Ports ausprobiet, ein anderes Kabel genommen, das Smartphone neugestartet … nope, no dice!

Daraufhin hatte ich über das ClockwordMod Recovery-Menü das Gerät als Mass Storage gemountet. Dadurch konnte ich über Ubuntu darauf zugreifen und die Datei einfach hinüberkopieren … oder auch nicht. Der Kopiervorgang hat sich jedes Mal kurz vor Ende aufgehangen und die Datei hat es nie auf das Gerät geschafft.

Schließlich habe ich meinen Laptop gepackt und das darauf noch installierte, seit Jahren nicht mehr gebootete Vista gestartet. Smartphone angeschlossen und es wurde als Wechseldatenträger erkannt – gut! USB-Stift mit dem ZIP eingesteckt und der Explorer hängt sich auf – schlecht. Abgemeldet, neu angemeldet. Diesmal habe ich zuerst das ZIP hinüberkopiert und dann das Smartphone angeschlossen. Erfolg! Das ZIP war auf dem Gerät!

Vorschlag: Bevor ihr auch nur mit dem ersten Schritt der Anleitung beginnt, ladet das benötigte ZIP herunter und übertragt es ganz normal auf euer Smartphone. (Den internen Speicher, nicht auf eine externe Karte!) Dann müsst ihr weder mit ADB herumhantieren, noch genervt einen Alternativ-Weg suchen.

Von da an hat es geklappt. Und ja, der nicht zu leugnende, kleine Linux-Fanboy in mir ist ein wenig angefressen wegen der benötigten Windows-Hilfe.

Wie bekomme ich den Play Store da drauf?

Okay, hier gibt es also ein ZIP zum Download. Aber sind Apps nicht normalerweise APK-Dateien? Was soll also mit dem ZIP … oooh.

Das Gerät wieder mit Volume Up + Home + Power einschalten und diesmal anstatt dem CyanogenMod-ZIP das Gapps-ZIP installieren.

Unterm Strich ist also nichts Tragisches passiert. Es war nur teils anstrengend und als ich im Boot-Loop steckte, hatte ich schon kurzzeitig das Schlimmste befürchtet.

Opera –› Firefox

Seba — Wed, 17 Jul 2013 20:20:00 +0200

Opera 15 ist erschienen (zumindest für Windows und Mac) und bringt den großen Engine-Sprung von Presto zu Blink mit sich. Eine nachvollziehbare und sinnvolle Umstellung. Allerdings erscheint mir die Veröffentlichung überstürzt und Opera 15 ein halbgares Produkt. Wozu gibt es denn die drei Release-Kanäle Opera (Stable), Next und Developer?

Opera 15 hat keine Bookmarks, herrjenocheins! Stattdessen soll dafür das Speed Dial ausreichen, mit dem sich zwar auch Seiten speichern, gruppieren und suchen lassen, aber das eben keine einfache Auflistung bietet. Bin ich ein „Power User“-Randfall, nur weil ich 100+ Bookmarks habe?

Das generelle Feedback war auch entsprechend negativ und Opera hat verlauten lassen, dass ein paar Prioritäten umverlagert werden. Dann fehlen aber immer noch die Site Preferences. Vermutlich fehlt noch mehr, aber für mich ist der Deal hier schon geplatzt. Nunja, ganz abgesehen davon gibt es ohnehin noch keine Linux-Version.

Der neue Blink-Opera wird wohl frühestens in einem Jahr auf einen vernünftigen Stand kommen – vorausgesetzt, er soll überhaupt die Funktionalität der 12er-Version wieder erreichen. Wenn ein Unternehmen ankündigt, es wolle sein Produkt massentauglicher gestalten, überkommt mich ein ungutes Gefühl.

Also könnte ich entweder bei Opera 12 bleiben, der noch eine Weile sicherheitstechnisch gepflegt werden wird, oder ich gewöhne mich schon mal um. Seit einiger Zeit mache ich auch die Erfahrung, dass Opera 12 von Firefox und Chrome – gerade was JavaScript-Geschwindigkeit betrifft – abgehängt wird und die eine oder andere Seite ein Problem mit Opera 12 hat, wie z.B. YouTube oder Mega.co.nz.

Jetzt bin ich also bei Firefox und versuche mir mit Addons alles so herzurichten, dass es mir an Nichts fehle. Warum Firefox und nicht Chrome? Firefox lässt sich etwas besser bzw. mehr konfigurieren und Mozilla ist mir auch das sympathischere Unternehmen – das meine ich weniger negativ für Google, als vielmehr positiv für Mozilla.

Übernahme der Bookmarks

Die Bookmarks lassen sich in Opera als HTML exportieren. Firefox kann diese HTML-Datei wieder importieren und schon hat man alle Bookmarks inklusive Verzeichnisstruktur. Vorher sollte man in Opera vielleicht noch das Müll-Verzeichnis leeren, da diese sonst zusammen mit den anderen Bookmarks im obersten Verzeichnis landen.

Mir ist bewusst, dass es eine Opera 15 Extension für Bookmarks gibt. Diese ist hochgradig unnütz. Die Bedienung und Optik ist lachhaft schlecht und der Import hat bei mir erst gar nicht funktioniert – was aber auch daran liegen mag, dass ich aus der Opera-Linux-Version exportierte und in Opera-Windows-in-einer-VM importierte.

Addons

Adblock Plus zusammen mit dem Element Hiding Helper. Der Zweck dürfte bekannt sein: Werbung und andere nervige Elemente blockieren.

Add to Search Bar ist praktisch, um sehr einfach neue Suchmaschinen hinzuzufügen: Einfach ein Rechtsklick in das Suchfeld der besuchten Seite und auswählen. Die eingerichteten Suchen können entweder über das Suchfeld genutzt werden oder – wie ich es bevorzuge – per Kürzel über die Adressleiste verwendet werden.

FireGestures um die Mausgesten aus Opera nachzubilden. Die verschiedenen Mausgesten lassen sich zudem frei einrichten und so habe ich auch ein paar Bewegungen, die ich von Opera gewohnt war, wieder so eingestellt.

FXChrome bietet einen sehr sauberen, Chrome-ähnlichen Look. Es ist so ein typisch minimalistisches Design, wie ich es liebe.

Greasemonkey für Userscripts. Insofern man überhaupt Unterstützung für Userscripts braucht. Opera 12 hatte es build-in und so geht es mit Firefox.

HTTPS Everywhere, damit von mehr Seiten oder auch nur bestimmten Elementen auf Seiten (wie z.B. die Gravatars auf meinem Blog) die HTTPS-Variante verwendet wird, insofern vorhanden.

Private Tab für eben solche, da Firefox an sich nur Private Windows anbietet. Verstehe ich nicht so recht, aber nun gut, dem ließ sich ja leicht Abhilfe schaffen.

Super Start, da das Speed Dial von Firefox so gar nicht meinen Wünschen entspricht. Vor allem nervt mich, dass dort immer die letzten besuchten Seiten auftauchen, es sei denn, ich belege alle Plätze.

Die Vorschaubilder der Seiten haben allerdings erst einmal Kartoffel-Aufnahmen-Qualität. In about:config den Wert von extensions.superstart.site.snapshot.width auf 512 zu erhöhen verbessert dies deutlich.

YesScript, um gezielt Seiten die Ausführung von JavaScript zu untersagen. Also ein Blacklist-Verfahren – im Gegensatz zu NoScript, das eine Whitelist führt.

Fein-Einstellungen

Letzter Tab soll nicht den ganzen Browser schließen: In about:config muss der Wert für browser.tabs.closeWindowWithLastTab auf false geändert werden.

Hat noch jemand Vorschläge für nützliche Addons oder Einstellungen?

PGP Public Key meiner Mail-Adresse

Seba — Tue, 11 Jun 2013 17:59:00 +0200

In Anbetracht aktueller Ereignisse habe ich mir das Thema PGP/Mail-Verschlüsselung noch einmal angeschaut und möchte die Möglichkeit einfach mal all jenen, die meine Mail-Adresse haben, anbieten. Die Einrichtung ging mit dieser Anleitung für Thunderbird recht schnell und unkompliziert vonstatten.

PGP Public Key für meine GMX-Adresse – es bediene sich, wer möchte. Für meine anderen Adressen kann ich das auch noch nachholen, falls Bedarf besteht.

Wer es sich auch einrichtet: Bloß nicht so schusselig sein und den Private Key irgendwo in die Cloud (DropBox etc.) legen; sonst kann man sich das Verfahren auch gleich sparen.

Ansonsten: Danke und viel Glück, Herr Snowden. Hoffentlich wird das mit dem Asyl in Island was.

[Update 2013-06-13] Machen wir das doch so: sebadorn.de/public_keys

Opera Extensions und JavaScript-Whitelisting

Seba — Sun, 21 Apr 2013 00:02:00 +0200

JavaScript-Whitelisting

Gemeint ist, wenn man JavaScript erst im Browser deaktiviert und dann nur für jede gewünschte Seite gesondert aktiviert. Man führt also eine Whitelist für Seiten, die JavaScript ausführen dürfen. Warum kann das eine gute Idee sein?

Sicherheit und geschützte Privatsphäre: Böse Dinge wie dynamisches Nachladen von schädlichen Inhalten von Fremd-Servern wird erschwert. Das allgegenwärtige Tracking durch hauptsächlich Werbefirmen (das beinhaltet auch und gerade Google) wird nahezu unmöglich.
Internet im Light-Modus: Kein Popup, das nach Facebook-Likes oder Twitter-Gefollowere bettelt; keine nervige Bottom-Menubar, die aufklappt, und überhaupt: 99% weniger Werbung.

Das Problem mit Opera

Deaktiviert man global JavaScript, funktionieren Extensions nicht mehr, selbst wenn die besuchte Seite auf der Whitelist steht. Konkret ist das Problem, dass keine Content-Skripte mehr in die besuchte Seite injiziert werden – ein elementärer Bestandteil der meisten Extensions.

Der Witz an der Sache ist, dass Userscripts – diese einzelnen JavaScript-Dateien, die auf .user.js enden – weiterhin funktionieren, denn dafür gibt es sogar eine extra Einstellung. Auch die Opera Developer Toolbar „Dragonfly“ funktioniert weiterhin.

Also: Warum nicht auch Extensions?

Workaround

Aktiviere JavaScript global.
Füge eine Site Preference hinzu für die Adresse „*“ und deaktiviere für diese JavaScript. Dabei handelt es sich um eine Wildcard, die alle Seiten betrifft – besucht und unbesucht.
Füge eine Site Preference hinzu für die Adresse „wuid-*“ und aktiviere für diese JavaScript. Dies ist für die Extensions, damit z.B. das Background-Skript und die Optionen-Seite funktionieren.

Ab sofort laufen auf jeder Seite, die auf der Whitelist steht, auch die Extensions.

Browser-Addons: Nachrichten-Broadcast an alle Tabs

Seba — Mon, 25 Mar 2013 17:25:00 +0100

Situation

Meine Extension injiziert auf bestimmten Seiten ein Content Script. Man kann dann auf dieser veränderten Seite auch Einstellungen ändern, die im der Extension zugewiesenen Storage gespeichert wird. Dafür wird wie üblich eine Nachricht mit den Änderungen an den Hintergrundsprozess geschickt.

Problem

Angenommen, ich habe zwei oder mehr Tabs offen. Nun verändere ich die Einstellung A in einem dieser Tabs. Die Änderung wird gespeichert, aber alle anderen Tabs zeigen nach wie vor den alten Zustand an. Erst nach einem Neuladen der Seite wird die Änderung sichtbar.

Was wir wollen, ist eine Synchronisation der Tabs, was bedeutet, wir müssen alle im Hintergrund eintreffenden Änderungen allen anderen Tabs ebenfalls mitteilen. Und das geht so …

Lösung: Opera

opera.extension.broadcastMessage( msg );

Eeyup, das war es.

Lösung: Chrome

In Chrome müssen wir uns die IDs der Tabs merken, die unser Content Script beinhalten. Dafür sendet besagtes Content Script zuallererst immer eine Nachricht an den Hintergrund, damit wir uns seine Tab-ID merken können. Wird der Tab geschlossen, verwerfen wir die Tab-ID wieder.

var openTabs = [];

chrome.extension.onMessage.addListener( handler );

function handler( e, sender, sendResponse ) {
    if( e.data.msg == "content script loaded" ) {
        openTabs.push( sender.tab.id );
        chrome.tabs.onRemoved.addListener( onTabRemove );
    }
    ...
};

function onTabRemove( tabId, info ) {
    var idx = openTabs.indexOf( tabId );
    if( idx >= 0 ) {
       openTabs.splice( idx, 1 );
    }
};

Ein Broadcast an alle relevanten Tabs sieht dann wie folgt aus.

for( var i = 0; i < openTabs.length; i++ ) {
    chrome.tabs.sendMessage( openTabs[i], msg, myCallbackFunction );
}

Lösung: Firefox

In Firefox gehen wir ähnlich vor wie in Chrome und merken uns alle Tabs, die unser Content Script inne haben, in der Variable workers.

var self = require( "self" );
var pageMod = require( "page-mod" );

var workers = [];

pageMod.PageMod( {
    include: "*.mozilla.org",
    attachTo: ["existing", "top"],
    contentScriptWhen: "ready",
    contentScriptFile: [self.data.url( "myContentScript.js" )],
    onAttach: handleOnAttach
} );

function handleOnAttach( worker ) {
    workers.push( worker );
    worker.on( "detach", function() {
         forgetWorker( this );
    } );
};

function forgetWorker( worker ) {
    var idx = workers.indexOf( worker );
    if( idx >= 0 ) {
        workers.splice( idx, 1 );
    }
};

Unser Broadcast funktioniert dann wie folgt.

for( var i = 0; i < workers.length; i++ ) {
    workers[i].postMessage( msg );
}

Opera extensions: messaging

chrome extensions: chrome.tabs

Firefox SDK: page-mod

Add-ons für Chrome, Firefox und Opera selbst hosten

Seba — Wed, 13 Mar 2013 18:14:00 +0100

Ich habe eine Browser-Extension für Chrome, Firefox und Opera erstellt. Alle Dateien liegen bei mir lokal, ich habe also z.B. nicht Firefoxs Add-on Builder verwendet, sondern nur das SDK. Als die Extension fertig war, wollte ich sie auch selbst hosten. Ich meine, wie schwer kann das schon sein? Ja, nun …

In diesem Artikel gehen wir davon aus, dass sich die Browser-spezifischen Extension-Dateien in den Unterverzeichnissen Chrome/, Firefox/ und Opera/ befinden.

Der Artikel ist lang geworden. Hier sind ein paar Sprungmarken:

Hosting und Updates mit Opera
Hosting und Updates mit Chrome
Hosting und Updates mit Firefox

Opera

In Operas config.xml muss ein Verweis auf die XML-Datei auf dem hostenden Server stehen, die später nach Updates gefragt wird.

<widget …>
    …
    <update-description href="http://example.org/updates-opera.xml" />
</widget>

Dann packen wir die Extension ein. Dafür wird einfach alles in ein ZIP-Archiv mit der Datei-Endung OEX gepackt.

cd Opera/
zip -r MyExtension.oex *

Die XML-Datei für Updates updates-opera.xml beinhaltet lediglich einen Pfad zur Extension, sowie die aktuelle Versionsnummer dieser.

<update-info xmlns="http://www.w3.org/ns/widgets" src="http://example.org/MyExtension.oex" version="1.1"></update-info>

Das war es auch schon. Ein Hindernis ist jedoch, dass die eigene Domain erst von den Benutzern als „Trusted Website“ in Opera eingetragen werden muss – wie auf diesem Screenshot zu sehen.

Chrome

In manifest.json wird für Updates ein zusätzlicher Eintrag benötigt.

{
    …
    "update_url": "http://example.org/updates-chrome.xml"
}

Wird die Extension zum ersten Mal verpackt, lautet der Befehl:

google-chrome --pack-extension=Chrome/

Dabei wird ein Private Key erzeugt und hier mit dem Namen Chrome.pem abgelegt. Diese Datei sollte geheim bleiben – also nicht einfach in ein öffentliches Repository hochladen!

Bei jedem späteren Mal, dass die Extension verpackt wird, lautet der Befehl dann:

google-chrome --pack-extension=Chrome/ --pack-extension-key=Chrome.pem

In der XML-Datei updates-chrome.xml steht die ID der Extension, der Pfad zur Installations-Datei und die aktuelle Versionsnummer. Die ID erfährt man von der Chrome-Erweiterungs-Seite (chrome://extensions) – dafür muss man ein Häkchen bei „Developer Mode“ setzen. Diese ID ändert sich nicht mehr, auch nicht mit späteren Updates.

<?xml version="1.0" encoding="UTF-8"?>
<gupdate xmlns="http://www.google.com/update2/response" protocol="2.0">
    <app appid="replace-this-with-your-extension-id">
        <updatecheck codebase="http://example.org/MyExtension.crx" version="1.1" />
    </app>
</gupdate>

Ein Problem bei der Installation ist, dass dies nicht direkt über die Website erfolgen kann. Die Extension muss vom Benutzer heruntergeladen und dann auf die Chrome-Erweiterungs-Seite (chrome://extensions) gezogen werden (Drag&Drop). Updates funktionieren dann jedoch ganz normal.

Firefox

Ich sage es vorne weg: Firefox hat mich ordentlich angepisst. Mir ist klar, dass alles im Sinne von Sicherheit geschieht und durchaus sinnvoll ist. Aber aus Entwicklersicht war es eine Qual überhaupt erst einmal herauszufinden, wie vorzugehen ist. Erschwerend kam hinzu, dass ich kein SSL verwende. Dafür ist die Firefox-Extension die einzige, die für eine Installation keine größere Mitarbeit seitens des Benutzers erfordert.

Zunächst wird die Extension mit dem cfx tool aus dem SDK verpackt.

CFX=~/.firefox-addon-sdk-1.13.2/bin/cfx
cd Firefox/
$CFX xpi --update-url http://example.org/updates-firefox.rdf

Nun müssen wir allerdings das für das XPI erstellte install.rdf bearbeiten. Also extrahieren wir diesen Teil.

unzip MyExtension.xpi install.rdf

Nun benötigen wir ein weiteres Tool, genannt McCoy. Dafür gibt es eine grafische Variante von Mozilla selbst, oder eine gepatchte Version, die man über das Terminal verwenden kann, was ich hier mache.

Zuerst erstellen wir für unsere Extension einen Schlüssel. Ähnlich wie bei Chrome, wird dies nur einmalig gemacht und dann immer wieder verwendet.

MCCOY=~/.mccoy/mccoy
$MCCOY -createKey "ThinkOfSomeKey"

Als nächstes fügen wir unseren Public Key in das install.rdf ein und packen es wieder in das XPI.

$MCCOY -installRDF install.rdf -key "ThinkOfSomeKey"
zip -f MyExtension.xpi install.rdf

Nun bilden wir einen Hash vom XPI, da wir diesen noch brauchen werden. Welches Hashing-Verfahren eingesetzt wird, ist relativ egal. Ich habe mich für sha256 entschieden.

XPI_HASH=$(sha256sum MyExtension.xpi | sed "s/ .*//g" -)

Gratuliere, wir sind ungefähr bei der Hälfte! Schauen wir uns jetzt etwas Leichtes an: Den Button auf der Website, um den Installations-Prozess einzuleiten. Dafür haben wir eine HTML-Seite mit einem Element, das die ID trigger_ff hat. Stehe das Nachfolgende nun in einer JS-Datei namens foo.js:

var trigger = document.getElementById( "trigger_ff" );

trigger.addEventListener( "click", function( e ) {
    e.preventDefault();

    var params = {
        "MyExtension": {
            URL: "http://example.org/MyExtension.xpi",
            IconURL: "http://example.org/MyIcon_32x32.png",
            Hash: "sha256:%XPI_HASH%",
            toString: function() { return this.URL; }
        }
    };
    InstallTrigger.install( params );
}, false );

Den Hash können wir beispielsweise so einfügen:

sed -i "s;%XPI_HASH%;sha256:$XPI_HASH;g" foo.js

Als nächstes widmen wir uns der RDF-Datei für Updates. Erstelle eine Datei updates-firefox.rdf.

<?xml version="1.0" encoding="utf-8"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#">
    <Description about="urn:mozilla:extension:MyExtension@example.org">
        <em:updates>
            <Seq>
                <li>
                    <Description>
                        <em:version>1.1</em:version>
                        <em:targetApplication>
                            <Description>
                                <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
                                <em:minVersion>18.0</em:minVersion>
                                <em:maxVersion>19.*</em:maxVersion>
                                <em:updateLink>http://example.org/MyExtension.xpi</em:updateLink>
                                <em:updateHash>%XPI_HASH%</em:updateHash>
                            </Description>
                        </em:targetApplication>
                    </Description>
                </li>
            </Seq>
        </em:updates>
    </Description>
</RDF>

Die ID {ec8030f7-c20a-464f-9b0e-13a3a9e97384} wird nicht verändert, denn hierbei handelt es sich um die ID für Firefox – es wird gesagt, dass dies eine Extension für Firefox ist und z.B. nicht für Thunderbird.

Klickt der Benutzer den Installations-Button, erfährt Firefox den Hash und überprüft, ob die zu installierende Datei auch die ist, die hier angepriesen wurde. Dieser Vergleich findet auch bei Updates statt. Daher müssen wir auch hier den Platzhalter %XPI_HASH% ersetzen.

sed -i "s;%XPI_HASH%;sha256:$XPI_HASH;g" updates-firefox.rdf

Hinweis: Der Hash muss für jede neue Version erneut errechnet und eingefügt werden!

Nun kommt wieder McCoy zum Einsatz, indem wir in das Update-RDF unsere Signatur einfügen.

$MCCOY -signRDF updates-firefox.rdf -key "ThinkOfSomeKey"

Wenn man möchte, kann man das erzeugte RDF auch noch überprüfen lassen.

$MCCOY -verifyRDF updates-firefox.rdf -key "ThinkOfSomeKey"

Geschafft.

Relevantes

Wer mein Build-Skript und Templates für die XML/RDF/JS-Dateien sehen möchte, findet diese in meinem GitHub-Repository.

Diese Tutorials und Dokumentation könnten von Interesse sein:

Mozilla Dev Derby: Pete’s Adventure

Seba — Fri, 01 Mar 2013 21:29:00 +0100

Im Januar habe ich zum zweiten Mal bei der Mozilla Dev Derby einen Beitrag eingereicht. Das Thema lautete diesmal Drag&Drop und da dachte ich mir, dass sich doch etwas Hübsches finden lassen müsste. Eine erste Idee, auf die ich mich ziemlich versteift hatte, gab ich später doch wieder auf – ich hätte meinen eigenen Ansprüchen nicht Genüge tun können. Von mir stammt nun Pete's Adventure (Mirror), eine kurze interaktive Geschichte, mit der ich doch sehr zufrieden bin. Code und Ressourcen sind auf GitHub zu finden.

Drag&Drop

Drag&Drop mit JavaScript ist nicht schwer. Ein paar wenige (dumme) Besonderheiten muss man nur kennen. Zum Beispiel, dass es in Firefox nur funktioniert, wenn auch irgendwelche Daten gesetzt sind. Ein leerer String reicht da schon:

var note = document.getElementById( "note" );
note.addEventListener( "dragstart", function( e ) {
    e.dataTransfer.setData( "text/plain", "" );
}, false );

Ein Drop wird zudem nur erkannt, wenn man die Events dragenter und dragover für das Element stoppt:

function stop( e ) {
    e.preventDefault();
}
var dropzone = document.getElementById( "dropzone" );
dropzone.addEventListener( "dragenter", stop, false );
dropzone.addEventListener( "dragover", stop, false );
dropzone.addEventListener( "drop", doSomething, false );

Das dürften auch schon die größten Stolpersteine gewesen sein. Nun warte ich weiter auf das Ergebnis des Wettbewerbs, das eigentlich sehr bald verkündet werden müsste.

Update 2013-03-02: Ha, nächster Tag und das Ergebnis ist da. Erster Platz!

BOINC – CPU-Zeit spenden für die Wissenschaft

Seba — Sun, 28 Oct 2012 18:35:00 +0100

Nicht jeder wissenschaftlichen Forschungsgruppe steht ein Super-Rechner zur Verfügung. Eine Möglichkeit, dennoch aufwendige Simulationen durchführen zu lassen, ist die Berkeley Open Infrastructure for Network Computing – kurz BOINC. Das Projekt basiert dabei auf freiwilliger Unterstützung durch zumeist Privatpersonen, die ihre Rechenleistung zur Verfügung stellen. Die installierten Clients erhalten Arbeitspakete, berechnen diese und senden ihre Ergebnisse zurück an das Projekt-Backend.

Client

Der Client existiert sowohl für Windows, Mac als auch Linux – nicht zuletzt dank Freigabe des Quellcodes in 2003. Ziel des Clients ist es, ungenutzte CPU-Zeit zu verwenden: Sollte man gerade nur Musik hören, im Internet surfen oder andere unstrapaziöse Dinge erledigen. In den Optionen lässt sich auch einstellen, ob nur zu bestimmten Tageszeiten gerechnet werden soll und ob ein CPU-Auslastungslimit zu beachten ist. Natürlich kann man das Programm auch einfach von Hand starten und beenden – was meine Vorgehensweise ist.

Bedenken sollte man allerdings, dass gerade der Dauerbetrieb eine nahezu durchgängige Belastung der CPU bedeutet – und damit höherer Stromverbrauch und Wärmeentwicklung. Fängt plötzlich der Lüfter an aufzudrehen, sollte man es vielleicht doch lieber sein lassen oder zumindest einen Blick auf die Temperaturen haben.

Teilnehmen

Alle relevanten Informationen finden sich auf der offiziellen BOINC-Seite: https://boinc.berkeley.edu/.
Dort sind ebenfalls zahlreiche verfügbare Projekte aus verschiedenen Forschungsgebieten aufgelistet.
Ich selbst nehme bisher nur am World Community Grid teil.

Der erste Selbstbau-PC

Seba — Sun, 19 Aug 2012 19:56:00 +0200

Lang hat es gedauert. Endlich habe ich einen neuen PC. Nachdem ich zweimal Fertigsysteme zurückgeschickt habe, entschloss ich mich, selbst Hand anzulegen. Dazu musste ich mich nur erst einmal informieren, da meine Hardware-Kenntnisse nur knapp über 0 schwebten. So habe ich mich durch Reviews, Empfehlungen und Info-Grafiken gearbeitet und mir ein zweistündiges Video angeschaut, wie man die Teile dann zusammenbaut.

Schließlich kam der große Moment: Eingeschaltet und das EFI lud, wunderbar! Die Festplatte gab Klicklaute von sich und wurde nicht erkannt. Reklamation und weiter ging es einige Tage später.

Neue Festplatte ist da. Wenig euphemistisch baute ich sie ein, doch – Tada! – sie funktioniert. Also konnten die Betriebssysteme und Software folgen. Als ich dann Spiele ausprobierte, stutzte ich. Die Grafikkarte kam auf 60°C beim Browsen und 90°C (Lüfter auf 90%) nach 5 Minuten Spiel (Minecraft in "Balanced"-Modus und Bastion). Also Reklamation und weiter ging es eine Woche später. Zu diesem Zeitpunkt war ich extrem angepisst; beste Ich-habe-keinen-Bock-mehr-auf-den-Scheiß!-Stimmung.

Vor dem Einbau schaute ich die Ersatz-Grafikkarte noch einmal streng an. Ein Kabel hing leicht in den Raum zwischen Karte und Lüfter. Entweder hätte es den Lüfter blockiert oder es wäre mit der Zeit kaputtgeschabt worden. Mit ein wenig Kabelbinder war dem zum Glück leicht beizukommen. Die Temperaturen liegen nun in einem guten Bereich^[1].

Eckdaten (grob)

Weder habe ich vor zu overclocken, noch plane ich Grafikkarten in SLI zu verwenden. Ausreichender Support von Linux ist zudem ein Muss.

Motherboard: ASRock Z68 Extreme3 Gen3
CPU: i5 2400
GPU: GTX 560 Ti
RAM: 8GB 1333MHz
HDD: WD Caviar Black 500GB

Gelerntes

Man kann CPUs undervolten. Weniger Saft bedeutet weniger Wärme. Für die Hardware besteht dabei angeblich kein Risiko und schlimmstenfalls schmiert der PC unter Last ab. Dann setzt man die Einstellung einfach wieder eine Stufe zurück. Ich bin jetzt bei einem Offset von -1.125V, was mir ca. -3°C bringt.

Man kann Arbeitsspeicher übertakten und es gibt Modelle mit Heatsinks für bessere Wärmeableitung. Ich bezweifel ganz ehrlich, dass man außerhalb von Benchmarks eine Verbesserung beobachten kann.

Es gibt Grafikkarten, die teurer sind als der PC, den ich mir nun zusammengestellt habe. Und es gibt Leute, die kaufen sich gleich zwei und betreiben sie in SLI.

Fazit

Ganz so leise wie mein alter ist er nicht. Damit habe ich auch nie gerechnet, schon allein weil im alten die Grafikkarte noch passiv gekühlt war und der neue über zwei Gehäuselüfter verfügt. Aber ich habe mich schnell an das leichte Summen gewöhnt – für das ich erst einmal die Lüfter-Geschwindigkeiten herunterdrehen musste, die standardmäßig auf „Full On“ standen.

Wirklich gespart habe ich durch das Zusammenbauen nicht. Dafür steckt das drin, was ich wollte. Und als Informatiker habe ich auch auf diesem Gebiet endlich mal ein wenig Erfahrung gesammelt.

[1] Ungefähr 50 bis 60°C bei 40 bis 50% Lüftergeschwindigkeit nach knapp 1 Stunde Minecraft/Bastion. Wirklich höher ging es danach nicht mehr. Im Normalbetrieb sind es recht konstant 42°C bei 30%.

Einbau der CPU: „Habe ich die CPU richtig herum draufgelegt? Nochmal nachschauen. Ja, okay. Dann schließe ich jetzt … Liegt die wirklich richtig drauf? Ah, okay, war richtig. Das lässt sich aber schwer schließen. Ohjeohjeohjeohje… Okay, ist zu.“

Festschrauben des Motherboards: „Und jetzt hier die … Fuck, mir ist die Schraube runtergefallen auf das Board! Hoffentlich hat das nichts zerkratzt! Jetzt ganz vorsichtig aufsammeln … komm her, du! Gah. Gah! Okay.“