November 27, 2013

Make Install: Solarus

Solarus is an open source Zelda-like 2D game engine. How Zelda-like, you may be wondering ? Well...

I'd call that pretty convincing. :-)

For the curious, it has a C++ core, and uses Lua for scripting the actual games.

November 26, 2013


Not much to tell, but I wanted to show the latest progress:

I have tweaked the style a bit to match that of the phone app. Usability has also improved. You can now select the dataset to view by entering the user's name in the top left. You can also quickly jump to the previous or next day in the top right. And the selected day is also highlighted in the calendar.

November 18, 2013

Brain Graphs

I haven't been able to do much work on Brain Drain, but I did want to show you the current state of the web app, which I use for inspecting the collected data.

(Note: the screenshot is showing a ficticious data set. I sincerely hope no-one has this many headaches. The data is generated by another Javascript script, which you can also find in SVN.)

There are two parts to the visualization. The bottom part shows a calendar, focused on the current year. I based this off one of the many D3 examples. The main difference with the stock calendar sample is that you can select any date, and it will show the data for that date in the top part.

The top graph, then, shows the actual collected data. Each bar represents an individual data point. The height of the bar, and its color, represents the pain level. They are placed on the horizontal axis based on the time of day. When moving the mouse over a bar you also get a popup which shows the exact level and all tags which were added by the user at the time of registration.

The main missing feature right now is a way to choose the correct dataset. The database can store datasets for multiple users, but there is no way to select which one you want (other than hacking the URL, which I set up as a temporary solution). Apart from this limitation the interface works just fine, but would benefit from some usability and layout tweaks. Simple next/previous buttons for both the day and year would be nice, for instance. I'm also thinking of adding a tag-based search, or even graphs which group data by time-of-day, day-of-week, tag, etc.

From a developer point-of-view I can't stress the benefits of D3 enough. Once you understand its functional model, and with the help of some samples, you can easily do complex visualizations and interactive graphs with a limited amount of code. D3 has quickly made it on my list of favourite tools.

Well, that's it for now. Next posts on Brain Drain will likely just be showcasing further tweaks, though I do hope I can show you some more interesting stuff soon. As things stand, however, I'm using the application more than I'm developing it, and it has already reached most of the goals I set for it.

November 10, 2013


The phone app has reached a point where it has the minimum required functionality. A user can now take measurements, add custom defined tags to them, and upload everything to the server for storage.

It also has an entirely new look and feel. If you compare the following screenshot with the version from last week you should notice some differences:

The app now has three pages, which can be navigated by swiping left and right. The first page allows you to take a measurement: simply drag the slider to the desired level, then hit the log button. The second page lets you select tags and define new ones. And the final page is used for uploading everything to the server.

As you know I'm building this with Phonegap, which means all of the above is nothing more than HTML, CSS and Javascript. You might expect —at least I did— that setting up such a layout would require quite a bit of scripting, but actually it is mostly based on CSS3's multi-column layouts.

Here's the trick: set the column-count to 'auto' and define the height of your element to be 100%. This will create columns which take up the height of the viewport. Then use a small bit of Javascript to set the column width to the width of the viewport (ideally you'd use viewport relative lengths instead, but this does not work on the phone) and now you have split up your content into screen-sized pages. With a little help of Hammer (the Javascript library, not the artist) you can then capture swipe actions and offset the element to show the right page.

(Figuring out the offset was a bit tricky. Given that visually you're getting a horizontal layout of elements you might think that you can just query the width of each element, divide that by the width of the viewport, and you'd end up with the correct number of pages. You'd be wrong. What I found was that the width actually stays constant and it's the height of the elements which changes. So you have to divide the element's height by the height of the viewport to deduce the right page count. Weird.)

The bigger struggle was the taglist. As the number of tags can grow over time so can the length of this section. My initial thought was to just let it grow in length. The pagination trick would just split up the content accordingly and I could still swipe through pages of tags. I gave this a try, and it worked as advertised, but it didn't look right and it didn't feel right. The reason it didn't look right is that browsers still are very bad at dealing with breaks in content. The reason it didn't feel right is that the distance to the upload functionality was now variable, which makes for a bad user experience. So instead I opted to limit the tag list to one visible page with its own vertically scrolling element inside.

And that was about it. The rest was figuring out the more detailed CSS stylings and getting the interactions in place. I'm still going to be playing around with the overall style, as I'm not sold on it yet. And I need to clean up and sanitize the scripting. But all in all it's in a usable state, and I'm pretty happy with what I've got.

November 07, 2013


Only a brief update on the Brain Drain project for now: I have managed to get the new layout for the phone app working in Android. I now have room for defining and selecting tags to go along with the measurements. What I still have to do is actually enable this functionality in full.

The main lesson learned today: test sooner and more often on an actual device. I have so far been using the Chrome browser as a bit of a substitute testing environment. This works really well, but the webkit engine on Android does not yet enjoy all the same features. Case in point: viewport relative lengths, which I was using to do device-independent layouts without Javascript. The solution ? Well,... yeah,... use Javascript. :-)

Anyway, to keep you entertained waiting for the next more sizeable update, here is an interesting blog I found: 0 FPS. It covers graphics programming, geometry and algorithms. Has some pretty nice articles. Enjoy!

November 04, 2013

In design modus

I have only done small updates to the code. For instance, I made the server address and port configurable on server startup. Nothing earth shattering.

What I'm spending time on is designing a usable interface for the phone app. I want the user to be able to easily add tags when making entries, but it should all 'flow' quite easily. Extra dialogs are a no-go, for instance. It should stay as close as possible to "select level, select tags, log". From beginning to end it shouldn't take more than a few seconds.

After looking around a bit and trying some things I think I now have a good idea of where to go. If I don't get it functional over the next few days, I'll try to share a mockup of what I'm going for instead.

November 01, 2013

Brain Drain Tech

In order for upcoming posts to make more sense I'm going to have to give some background on the technology I'm using for the Brain Drain app. Let's jump straight into it:

I'm using Phonegap for the phone app, Node.js (with Restify) for the server, MongoDB as database, and D3.js for the webapp.

Let's get a bit into the reasoning. First the phone app itself. My first idea was to make use of Appcelerator, which lets you build phone apps in a platform independent way by means of Javascript. Unfortunately Appcelerator's licensing is a bit unclear, and I have seen some reports on aggresive fee extractions. Luckily there is the alternative of Phonegap, which works in a similar way and is licensed quite clearly as ApacheV2.

On to the server. Here I wanted to define a REST API, and so I was looking for something which lets you implement this in as easy a way as possible. This led me to Restify which, with the help of Node.js, let's you write such a service with just a few lines of Javascript. Very little overhead, cross-platform, and easy to set up.

The database is MongoDB, and the main reason for that is that I'm trying to build some more proficiency with it for professional reasons. In addition there exists a Javascript driver which integrates into Node.js and which lets you interact with the database in a very straightforward way (the Mongo shell is also Javascript, and the driver is pretty much a one-to-one mapping of everything you can do in the shell).

Then the webapp for visualizing the data. Here I'm using D3.js. D3 takes some getting used to, but once you get into the flow it can actually do pretty much anything you want. It has become my first choice for doing graphs in web applications. Of course I'm also using jQuery for setting up the main interactions, both with the user and with the server.

If you've been paying attention you probably noticed that the whole technology stack consists of Javascript. I actually think this is a great selling point for this combination. Whichever part you're working on there is no switching of languages required. Any proficiency you get while working on one part can be transferred to all other parts. This is even true of the phone app and the web app: both are basically nothing more than websites; only the packaging is different.

So that's about it. More details in future posts when I will try to tackle some of the internals.

October 30, 2013

Brain Drain

So over the past two weeks I have been working on a new project: Brain Drain.

If you have known me for a while you're probably aware that I'm a frequent sufferer of headaches. I have even blogged about it here before. Having gone through another pretty bad week I decided I needed something which helps me get a better picture of my headaches. Whenever a headache strikes I want to be able to easily log its occurence and its strength.

I went in the direction of a very basic smartphone app. My phone is rarely very far away, and starting it up, opening the app and taking a measurement is a pretty fast and painless process. So it seemed like a natural solution.

I now have a basic app running, and in its current incarnation it looks like this:

Yeah, not very pretty, and full of debug info. But in bit of a return to the roots of this blog I wanted to actually write about this project as I'm developing it. Which means you'll get to see the nitty gritty details.

At this point the app is usable, I can collect the data on my computer, and I can visualize that data for inspection (I'll show more of that in future posts). There are a few more features on my wanted list, such as adding tags when logging headaches.

I have shared the code on Sourceforge for those who want to take a look. And in any case you'll be able to read more about my progress here soon.

October 28, 2013

It's Behind You

In "It's Behind You" Bob Pape tells the story of how he, mostly by chance, became a game developer, and ended up having to port R-Type (now easily considered a must-have-played classic) to the ZX Spectrum; a job he was not looking forward to. That over thirty years later his port is still considered among the best for that platform is something the author would never have expected. And if you read the book you'll understand why.

Bob includes some technical details to satisfy geeks like me, but he writes mostly about the circumstances leading up to, and surrounding, the creation of the game; and that's exactly as it should be. Allow yourself to be exported back to the early 80's, and get a feeling what it was like to be a junior programmer in those days.

Oh, did I mention the entire story is free to read ?

October 15, 2013

Hidden Variables

Hidden Variables is a small tech blog by Domenic Denicola. You won't find many articles, but what is there is very interesting. The latest post is on the extensible web, which is pointing at some exciting work being done in making the web a more sane development platform.

October 01, 2013

Beautiful Quine

Found this via StackOverflow. The following piece of code is a Quine, and it's amazing:

eval(z='p="<"+"pre>"/* ,.oq#+     ,._, */;for(y in n="zw24l6k\
4e3t4jnt4qj24xh2 x/* =<,m#F^    A W###q. */42kty24wrt413n243n\
9h243pdxt41csb yz/* #K       q##H######Am */43iyb6k43pk7243nm\
r24".split(4)){/* dP      cpq#q##########b, */for(a in t=pars\
eInt(n[y],36)+/*         p##@###YG=[#######y */(e=x=r=[]))for\
(r=!r,i=0;t[a/*         d#qg `*PWo##q#######D */]>i;i+=.05)wi\
th(Math)x-= /* Q###KWR#### W[ */.05,0<cos(o=\
new Date/1e3/*      .Q#########Md#.###OP  A@ , */-x/PI)&&(e[~\
~(32*sin(o)*/* ,    (W#####Xx######.P^     T % */sin(.5+y/7))\
+60] =-~ r);/* #y    `^TqW####P###BP           */for(x=0;122>\
x;)p+="   *#"/* b.        OQ####x#K           */[e[x++]+e[x++\
]]||(S=("eval"/* l         `X#####D  ,       */+"(z=\'"+z.spl\
it(B = "\\\\")./*           G####B" #       */join(B+B).split\
(Q="\'").join(B+Q/*          VQBP`        */)+Q+")//m1k")[x/2\
+61*y-1]).fontcolor/*         TP         */(/\\w/.test(S)&&"#\

A Quine is a piece of code which when evaluated yields its own source code. It's basically a geeky exercise in self-replicating code. Some Quines create a chain of Quines; that is they evaluate to a different piece of code which itself evaluates to yet another piece of code, and so on, until you get back to the initial code. The above Quine is such a chain with an interesting feature: it creates an animation of a spinning globe. Check out the original for full effect.

September 10, 2013

Koopa: new players

I never really expected this to happen but it did: Koopa, my little hobby Cobol parser, found some extra developers!

The Koopa team* welcomes Simon Sobisch and Luís Rodrigues. Simon has been very helpful in detecting bugs and suggesting improvements. In fact I had to start making use of the bug tracker just to keep up. :-) Meanwhile Luís offered a major contribution to the grammar, and is now frequently adding more and more directly to the code. Every commit he makes feels like a little present I get to open. :-)

So to both of them a big thank you!

* I.e., me. :-)

July 28, 2013

Koopa 1up: GUI update

Finally found something to post about again: Koopa! I spent the last week updating the GUI applications. Rather than having two separate ones (one for batch processing, one for visualising a single file) I have now integrated them both.

(JTabbedPanes look a bit ugly on the Mac, but I don't want to spend time changing that. It works, and that's enough for now.)

In addition you can now simply drag-and-drop files onto the Koopa GUI and it will try to parse them. And once parsed you can easily navigate from a selected part of some source code to the grammar rule which parsed it.

All this will hopefully make for more a more useful and usable application.

May 21, 2013

Nifty Rift-y

Guess what I got last week ? Yes, it's an Oculus Rift.

From the moment I saw John Carmack extolling the virtues of the Rift I knew I had to get in on the Kickstarter. And last week my Rift finally arrived.

I'm not going to write a lengthy post here talking about the Rift in detail. I basically want to do two things: share some experiences, and give some pointers (especially for those of us 'stuck' on Macs).

So first, some experiences. Yes, the Rift is as impressive as they say. The sense of depth is amazing. You're easily fooled into thinking you're really, physically, somewhere other than where you were a moment before. And this can be very disorienting as well. My favourite Rift application right now has to be Minecrift (which, lucky me, saw a Mac release last week), and I can only play this for short bursts of time before getting some feelings of nausea. Looking around is not the problem, it's moving around which does it. Especially quick movements feel really unnatural when you're really sitting down. But being there, in a Minecraft world, is amazing fun.

Now for some pointers. There are not as many Rift-enabled applications yet for the Mac as there are for PC, and I had a hard time finding them at first. But there are two sites which make your life easier: The Rift List, and Rift enabled. Both sites see frequent updates, and both allow you to filter out Mac applications. My favourites so far ? Spacewalk, which lets you explore the ISS from the outside (and boy is that thing big!). Then there is First Law, which is a basic space shooter. And Blue Marble, in which you're again in space, but which sports the best graphics I've seen so far.

April 05, 2013


I was planning on doing some more work on this before I blogged about it, but as it has been sitting idle for a while let me just post what I've got. It looks something like this:

This is Committed. It's basically a technology exercise inspired by Commit Logs from Last Night.

What does it do ? Well, in short, it analyzes commit logs from public SVN repositories of Sourceforge projects. You can then run full text queries on these commit logs through a web application. The results are shown in a graph as a trend over time, and you can also browse through individual matches.

How was it implemented ? Well, I set this up as an excuse to experiment with Scala and the Play! Framework. Briefly, I'm using Scala's actor system to query Sourceforge and find public SVN repositories. The actors then fetch the commit logs for these repositories, and feed the commit messages (along with some metadata) to a SOLR database. The Play application then takes the queries from the user, runs them against the SOLR database, and displays the results.

So, what was it like ? Scala's Actor system seems really cool. This experiment only uses some of it's very basics, but it provided a useful introduction. It feels like a really nice alternative to more heavy weight messaging middleware and message driven beans. The model is simpler, and the integration into the language removes a lot of the barriers.

Play, to me, is just another alternative to Ruby on Rails, GRails, and others. If you're using Scala then it is probably a natural choice. Other than that I didn't find any special reason to pick it over some of the alternatives.

I was also planning to use Chef and Vagrant to set up a sort of local processing cluster, so that I could experiment a little with how to scale some of these technologies in different ways. I haven't gotten around to doing this yet.

What I am doing right now is taking an online Scala course. It's presented by Martin Odersky, who created the language in the first place. We're only in the second week, but so far I quite like the course, and it does really help you to get into the Scala mindset. So to anyone who's interested in playing with Scala: this course is definitely something to consider following.

That's about it from me. As usual, I shared my project on Sourceforge. So if anyone feels like taking a peek or playing around with it, be my guest. And if you do, be sure to give me your feedback!

February 12, 2013


You may already have seen it elsewhere, but TPB AFK is a documentary on the people behind The Pirate Bay and, to a lesser extent, their legal issues. Whether or not file sharing is right or wrong, whether or not the entertainment industry is fighting progress, etc. is left up to the viewer to decide. But whereas TPB is often presented as a criminal organisation, what I saw was just a bunch of people with their own ideals and flaws...

Interestingly, if you're in Belgium and you go to the official website for this documentary and finally choose to download the movie's torrent (set up by the movie's makers), you get the following page:

Make of that what you will... (Never knew there was a Small Internet Wall of Belgium though; somewhat surprising to me.)

February 03, 2013

A New Skribler

As promised, here is an update on Skribler. I have just uploaded a new experimental version of Skribler on Sourceforge.  A new website is up, as well as an online demo. And it looks a little something like this:
So, yeah, this new version of Skribler is browser-based. I'm mostly relying on three pieces to make it work:
  • HTML5's contentEditable, which forms the basis of everything. It makes all content editable, but for the purpose of a structured editor it is too liberal in what it allows.
  • Rangy, which allows me to capture selections and caret info and manipulate these through Javascript. With a little help of JQuery this allows me to restrict the default behaviour of contentEditable.
  • Knockout.js, which is an amazing Javascript library. This takes care of processing changes to the abstract syntax trees and updating the concrete syntax.
Using this I set up three examples of DSLs:
  • Martin Fowler's Reader Configurations, based on an example from his Language Workbenches article.
  • HTML Template Configuration Language, a DSL created by Thomas Cleenewerck with the purpose of more easily setting up websites through composition of templates.
  • Knockout.js Template Language, which can be used to generate the Knockout templates for transforming abstract syntax trees into conrete syntax. In fact, this example was used to generate its own examples.
This version of Skribler is very much alpha software. It is incomplete (no easy adding of new elements by mere typing yet), and only tested in Firefox on Mac OS X Mountain Lion. By all means play around with it, but don't expect it to work perfectly just yet. :-)

January 21, 2013

Thanks Mom...

For the hand-made, quilted, Minecraft Creeper laptop bag!

Geek chique! :-)

PS. Sorry everyone for the lack of updates. Maybe it's the winter blues... I'm working on a new version of Skribler, but I don't have much to show yet. If I get it to a more generally usable state you can expect a post on that.