Two Lions Holding The Zürich Flag

Heraldic hatchings

Two Lions Holding The Zürich Flag

I really like the logo used by the city of Zürich: it has a modern look, but keeps all the traditional elements of the city, the two lions and the white and blue flag. How do you know the lower left part of the flag is blue? It has the traditional heraldry hatching for blue, horizontal lines.

You can see these patterns in many places in Europe, each time a flag had to be printed or engraved into a wall. The hatching patterns for the most common colours, black, white (silver), yellow (gold), red, blue and green, defined by , are pretty standard, but there are many other patterns for less common colours.

I really like the idea of representing colours using standard patterns, so I hacked together a quick JavaScript program that takes an image and converts it into its heraldic black and white equivalent.

The code is very simple, it just looks up each individual pixel and replaces it with the corresponding hatching – it does the job if the input is an image with flat areas with saturated colours. It supports all the colours described in the french wikipedia page on the subject. The only difference is that black is rendered as solid black, as this gives better results, and is consistent with black and white printing (as opposed to engravings).

To use it, simply upload an image, then click on the transform button, if you want to save the result, click on the download button. The code is far from perfect, there is no pre-processing, so you need images with flat colours and sharp lines (no anti-aliasing). The threshold between orange and brown is a bit problematic. The code is available on github.

Flattr this!

Convoi – Cyberpunk Publié il y a environ 3 jours par Thias Vue de nuit de Shibuya, à Tōkyō Dès le début de la conception de Convoi il me paraissait évident qu’il y aurait un monde cyberpunk, avec des voies rouillées sur des docks détrempés par les pluies acides. Si j’ai des idées assez claires sur ce qui devrait se passer dans ce monde dans le premier scénario, le monde à proprement parlé est resté quelque chose de générique, ce qui m’ennuie.

Properly Localising the Sixteen theme

Convoi – Cyberpunk
Publié il y a environ 3 jours par Thias
Vue de nuit de Shibuya, à Tōkyō
Dès le début de la conception de Convoi il me paraissait évident qu’il y aurait un monde cyberpunk, avec des voies rouillées sur des docks détrempés par les pluies acides. Si j’ai des idées assez claires sur ce qui devrait se passer dans ce monde dans le premier scénario, le monde à proprement parlé est resté quelque chose de générique, ce qui m’ennuie.

This blog currently uses the sixteen WordPress theme. Friday I turned on a multi-language plugin (xili) and theoretically, everything should have worked out of the box:

Sixteen has been already translated into French, Spanish, Russian, Japanese, Arabic and supports translation into more languages.

In practice French did not work out of the box: the french locale files were corrupt, not to mention badly translated, and the plugin uses the timeago JQuery module without setting up localization, you always get English relative time. So here are the steps to fix the Sixteen theme (version for French. Modulo the localization files, this should hopefully work for other languages:

  1. Backup everything
  2. Replace the content of the french localization file sixteen/languages/fr_FR.po with this one.
  3. Use a tool like poedit to generate a new version of sixteen/languages/ If the file is zero byte long, there is a problem.
  4. Replace the file sixteen/js/jquery.timeago.js with the latest version (1.4.1).
  5. Download the locale specific timeago configuration for the language you need, in my case it was, put these files into the sixteen/js/ directory.
  6. Replace the content of file sixteen/functions.php with this updated version

If you don’t care about French, you skip steps two and three, but note that the compiled localization files for Spanish are empty, and missing for Arabic, Japanese and Russian, so I doubt these will work straightaway.

Flattr this!

Light dithering

As I’m mostly working on back-end and pipelines those days, I don’t do much user facing code. To compensate a bit I have been playing around with Javascript and Html5. While I can’t say that Javascript is elegant, it is very easy to play around with, the modern equivalent of Basic, I suppose.

So I wrote a small dithering function, it uses a simpler error distribution matrix than Floyd–Steinberg as it only distributes the error on the pixels to the right and below the one considered. The algorithm also uses some randomisation to avoid patterns.

In order to respect traditions, this one dithers the classical Lenna image. Just click on the button to load the image and the button to dither the image.

Image: Lenna

Flattr this!

Light coding

I was kind of sick this week-end, so I ended up sleeping a lot, doing various minor chores and some light coding and general fiddling in my blog. I have added some breadcrumb micro data, and generally played around with the Rich Snippet Tool from Google, we will see how various search engine will pick up the meta-data I added to this blog.

I have tagged a few reviews that seem to be understood by the tools, I don’t know if they are relevant enough to appear on web results, but there is a certain irony in having meta-data tags fall from grace a few years ago and seem them become more prevalent. Having a pure XML stream and generate the content HTML from it would be cleaner, but in practice having a single place with the data ensures the data stays in sync, plus everybody hates XML.

I also registered this blog with the bing webmaster tools, which offered me 50$ worth of advertising, if only I lived in the US… Finally I made a new version of the emoji-clock, this one handles half hours.

var date = new Date();
var halfhour = (date.getHours() * 2 + Math.round(date.getMinutes() / 30));
var offset = ((halfhour / 2) + 11) % 12
if (halfhour % 2 == 0) {
  var emo = 0x1F550 + offset;
} else {
  var emo = 0x1F55C + offset;
var h = high_surrogate(emo);
var l = low_surrogate(emo);
clock = String.fromCharCode(h) + String.fromCharCode(l);
document.getElementById("emoclock").textContent = clock;

Flattr this!


One of the striking aspect of Mac OS X 10.7 Lion is the extent to which it borrows from iOS. One amusing aspect of this mobile phone influence, is that the system now supports Emoji characters, which have been standardised within Unicode recently. While Emoji are technically characters, they are small icons, and are rendered both in iOS and in Mac OS X Lion as colour bitmaps. Having a font that is both a bitmap and colour is something I had not seen since the Amiga.

Beside cute animals, the Emoji range also contains some semi-useful icons, including ones that represent clocks faces for the twelve hours (between 0x1F550 and 0x1F55B), so I thought I would hack a small javascript that would display the icon corresponding to the current time. In trying to do this, I uncovered one annoying limitation of javascript: it cannot handle characters that do not fit on 16 bits, if you look at the code points mentioned above, they do not fall within the Basic Multilingual Plane (BMP). If you try to call String.fromCharCode(0x1F550) on Safari, you won’t get an error, just a bogus character in the private area (0xF550).

The workaround for this problem is to understand that javascript does not really work with unicode characters, but with utf-16 elements (regardless of the encoding of the page). You can therefore encode your character using Surrogates. Building the surrogate pair implies some bit manipulations. In the end not much has changed in the last twenty years: access to exotic characters invariably involves hacking around with code-point and escape sequences. On the C64, you had to choose between lower-case and graphical characters…

Here is the resulting code (I factored out the surrogate calculation, mostly to avoid escaping problems with WordPress). If you use web-browser that supports emoji, you should see the actual code in action in the top-right corner of this page, if emoji are not supported, you will probably see an empty square.

var date = new Date();
var hour = (date.getHours() + Math.round(date.getMinutes() / 60) + 11) % 12;
var emo = 0x1F550 + hour;
var h = high_surrogate(emo);
var l = low_surrogate(emo);
clock = String.fromCharCode(h) + String.fromCharCode(l);
document.getElementById("emoclock").textContent = clock;

Flattr this!

De l’Université de Genève aux Princes du Schleswig-Holstein

Bâtiment de l'Université de Genève ⓒ Carl O'Brien – Creative Common Attribution 2.5 License

Hors donc l’Université de Genève a fini par se décider à entrer dans le XXIᵉ siècle et d’organiser ses alumni en leur offrant un portail web. J’ai donc été invité à participer en entrer mes informations. Ce qui m’a paru étrange, c’est que j’ai été, depuis l’obtention de mon diplôme, membre de la Société Académique de Genève. Elle dispose d’un site web sommaire qui est surtout remarquable par ses erreurs d’encodage sur la page d’entrée. On y trouve néanmoins une présentation de sa mission:

La Société a pour but de contribuer au développement de l’enseignement et de la recherche de l’Université de Genève.
Elle gère son patrimoine propre ainsi que celui des Fonds qui lui ont été confiés ; elle en utilise les revenus dans les limites prévues par ses statuts et ceux réglementant les donations et dispositions testamentaires dont elle a bénéficié.

Faire partie de cette association est plus un acte de civisme qu’autre chose. De fait, son existence était complètement sorti de ma tête jusqu’au moment où j’ai commencé à écrire ce billet. Il faut dire que j’ai oublié de communiquer l’un de mes multiples changements d’adresses, donc je n’ai pas reçu de nouvelles de la dite association depuis des années. Visiblement cela ne m’a pas manqué.

Clairement la société académique ne pouvait reprendre la gestion des alumni de l’université, peut-être que cela ne contribue pas développement de l’enseignement et de la recherche dans l’université ? Bref, on a jugé nécessaire qu’une nouvelle organisation était nécessaire. Sans aller jusqu’à évoquer les sempiternels anglo-saxons qui sont plutôt occupés ces jours, l’École Polytechnique Fédérale de Lausanne avait déjà tout cela le siècle dernier : l’Association des Diplômés de l’École Polytechnique Fédérale de Lausanne (A³-EPFL pour faire court).

Je suis membre de l’A³-EPFL depuis l’obtention de mon doctorat. Dès le début, j’ai bénéficié d’un portail où je peux mettre mes informations et entrer en contact avec d’autres alumni. J’ai aussi eu droit à une adresse e-mail permanente, de rabais pour acheter du matériel informatique (notamment les offres Neptun de Apple). L’A³-EPFL dispose de section régionales qui organisent aussi des vistes. Je viens de participer à l’une d’entre-elles, mais en tant que guide vu que l’objet était les bureaux de Google à Zürich. Bref c’est une affaire qui fonctionne.

Mettre en place un réseau d’alumni à posteriori est naturellement bien plus difficile, surtout si on créé une nouvelle organisation. J’ai donc eu droit à divers messages m’invitant à vérifier mon identité, puis à entrer des informations dans un formulaire web pour vérifier que j’était effectivement un alumni. Il est clair que des informations comme le nom, le prénom, l’année et le type du diplôme sont des données hautement secrètes : après tout elles ont seulement été publiées dans le journal… Bref, après que l’on ait validé le fait que j’ai obtenu un diplôme de l’université de Genève (moi-même je commence à avoir des doutes), je peux finalement me connecter au portail.

J’aurais jugé l’interface web de très bonne qualité, à mon sortir de la dite université, en 1997. Je commence à entrer mes informations, l’encodage est de l’Iso Latin-1, donc mes petites manies typographiques résultent en une collection de point d’interrogation. J’essaye d’uploader la photo que j’utilise pour ce genre de site, j’ai droit à une boîte à dialogue qui m’annonce que seul les fichiers JPG sont acceptés (j’avais utilisé un fichier PNG). Lorsque j’essaye d’entrer informations professionelles, l’interface se bloque et m’annonce que j’ai entré des données invalides simplement parce que j’ai eu le malheur d’évoquer un 31 avril. Naturellement elle n’explique pas quel champ est invalide, ça serait trop simple. Point de petit calendrier interactif comme on en trouve partout ces jours. J’entre néanmoins mon emploi actuel, et je me retrouve devant les choix suivants pour les branches :

  • Édition, information, marketing
  • Activités associatives, culturelles, récréatives
  • Activités financières et assurances
  • Agriculture, exploitation forestière
  • Conseil, activités juridiques ou comptables
  • Commerce
  • Construction
  • Enseignement
  • Hôtellerie/restauration

Il est clair que l’Université de Genève prépare mieux aux métiers de la construction que l’informatique. À ce stade, dépité, j’ai regardé le code HTML du site afin de comprendre qui était l’auteur de cette chose. Je peux au moins déclarer que l’honneur de mon alma mater est sauf : le site n’a probablement pas été fait des étudiants de l’institution. Je peux affirmer cela, non pas du fait qu’elle ne forme pas d’informaticiens, comme semblent le croire certains, mais simplement parce que le code Javascript est écrit en allemand. Hors tout le monde sait qu’un Genevois se suiciderait avec une cuillère en plastique plutôt que de parler la langue de Goethe. Le code regorge de trésors comme celui-ci :

  var box =;
  var box2 = box.options[box.selectedIndex].value;
    {''; }
      if(box2==9) {
        document.suche.action="../lookbook/start.php"; } 
	else if(box2==4) {
	document.suche.action="../home/art.php"; } 
	else if(box2==2) {
	document.suche.action="../resources/dok.php"; } 
	else if(box2==7) {
	document.suche.action="../resources/termin.php"; } 

La validation des données semble être faite du côté client, avec, en cas d’erreur, des messages d’erreur en allemand. S’il n’y a pas de calendrier pour sélectionner les dates, il semblerait que le code pour ce faire est néanmoins inclus. Le portail n’est d’ailleurs pas hébergé sur le domaine de l’université, comme on aurait pu s’y attendre, mais celui du réseau des alumni de l’internat Louisenlund. Il ne s’agit pas d’une université, mais d’un gymnase dans le Schleswig-Holstein qui semble compter parmi ses alumni les princes des familles Schleswig-Holstein, von Hessen, Rantzaus et Sayn-Wittgensteins.

Je me considère comme plutôt cynique, surtout pour les questions ayant trait à l’interaction entre les grandes organisations et l’informatique, mais là, je dois avouer que je suis impressionné…

Flattr this!