Category Archives: Hack42

Combining RRDtool with jpGraph for Heatmaps

Yes it works. Story below. Results:

 

 

How did he do it?

Simple. This is a combination of RRD Tool, jpGraph and PHP. RRD provides the database with measurements, jpGraph provides heat map graphs and PHP glues it all together. (colors are taken from exploded creepers from minecraft).

What am i seeing anyway?

It looks cool, but you’re looking at a heat map of the open/closed state of our hackerspace. For the last year, we’ve measured if the hackerspace was opened or closed. We measured about every five minutes.

The average of the past three months is displayed in a granularity of hours. This roughly means 2000 measures for a single graph. It renders nearly instant.

Step by step

Export measured values

rrdtool xport --start $e-$timespan --end $e --step 3600 --maxrows 4242 --enumds 
        DEF:st=../state.rrd:state:AVERAGE 
        CDEF:open=st,1,0,IF 
        XPORT:open:"isopen" 

 

Spread the measured values by hours

foreach($measurements["data"]["row"] as $row) {
       switch ($row["t"] % 86400) {
           case 82800: $hourOpen[0] += $row["v0"]; break;
           case 0: $hourOpen[1] += $row["v0"]; break;

 

Shift is six hours, so primetime is clearly visible

for($i=0;$i<$steps;$i++){
       $element = array_shift($array);
       $array[] = $element;
   }

 

Feed the data to jpgraph

$mp->colormap->SetMap($colormap);
unset($colormap);
$mp->SetCenterPos(0.5,0.47);
$mp->SetSize(0.75, 0.7);

 

Other uses:

The same type of graph can also be used to visualize the temperature in a day. To see how the temperature rises over time. I don’t think there will be a rewrite though, definition of done.

Note: the graph is supposed to give an estimate if Hack42 is open or not.

See also

Polaroids in HTML

To make the showcase on the Hack42 wiki look better, i came up with an idea: polaroids. Instead of showing default lists with pictures, you can also show them in a fashion people can relate to. In about an hour i worked out the idea. The list of pictures now looks like a spread of polaroids with words written on them.

With the intelligence in most browsers, it looks even better than expected. For the nerds: below the picture i’ll explain what i did. Also check the project page on the 42 wiki.

 

HTML, CSS, CSS Fonts

The pictures are normal pictures inside a <div>. The div has a padding of 10 pixels. Because of the description, the text under the picture adds to the polaroid effect.

The divs have a 1 pixel border, and use CSS3.0 (and browser specific) shadow and rotation.

The font is called GoodDog. It’s supposed to look like handwriting done with a permanent marker. The font face declaration uses external fonts that are located on the web server. The link is always black, even if you’ve visited the page. The CSS was injected into mediawiki, so it works in all skins.

Check out the information on the project page on the 42 wiki, source is on this page.

Hack42 site header

I just came across a nice wordpress plugin that makes site-headers look absolutely gorgeous. So, using my Photoshop skills and general knowledge on web development, i made one for Hack42. It came out fantastic!

Shoop da whooooopp

In a few hours i selected some photos and created about 10 images with the size 950*200. Here’s a few:

With special tooling, that comes with the commercial version of the plugin, the slideshow was created. The tooling allows to choose what images to use, what titles and subtitles, the delay, styles and some other minor things. In the end it delivers a .zip file that can be uploaded to the site.

Now to actually make a header… things get creative and innovative.

Mad scientist at work

With some careful engineering and code manipulation tricks i actually got the header where i wanted it to be: the header. It required edits in the style.css and header.php files, as well as a dummy page for some workarounds.

One problem occurred: the site header is 200 pixels high, while wordpress insisted it should be 170 pixels. Somewhere, buried deep down in wordpress this was specified. I’ve looked everywhere but nowhere to find why or when 170 pixels high was defined.

Time to move in the heavy artillery.

If you know something on coding, you might want to get a bucket or two to vomit. Basically i change any value of “170” with “200” on a large portion of the site. This is the wrong way to do things.

<?php
ob_start();
wp_head();
$fuckingimageheighthack = ob_get_clean();
$fuckingimageheighthack = str_replace("170", "200", $fuckingimageheighthack);
print $fuckingimageheighthack;
?>

It worked like a charm.

Result?

Who cares about all the grunt work. We all want to see nice images and flashy headers. That’s what counts and that’s what we’ve accomplished with all this work. It looks awesome and professional. And that’s just the way i like things.

PS this website will soon also feature these great professional headers with images of my life.

Best Wishes from Hack42

Hackerspace Hack42 looks back at 2011. As one of the founders it’s great to see such prosperity. The future for Hack42 looks very bright.

Due to their move to KKN6 it has become one of the largest hackerspaces in Europe in terms of space. In the past year there have been over 50 activities and many projects. Will these numbers increase this year? I hope so!

The complete text is on hack42.nl (in dutch).

HITBSecConf2011 presentation on Hack42

I did a presentation on Dutch Hackerspace Hack42: how we built it and what you can find there. It was a light-talk to get the track started. Fun! Hack in the Box is one of the leading security conferences in the world.

Slides: D1 SIGINT – Elger Stitch Jonker – Building the Hackerspace.pdf

Slides in image format: HITBSecConf2011 – Krasnapolsky, Amsterdam – 19 en 20 mei 2011

Abstract:

http://conference.hitb.org/hitbsecconf2011ams/?page_id=1676

“We got our space in February and in just a few months we’ve built something amazing. In these fifteen minutes we’ll try to show you everything we’ve done; from the museum to the atmosphere, from the labs to the bar and even our cozy restrooms.”

About Elger ‘Stitch’ Jonker

Some say that during daytime he’s a mad scientist at a large IT specialist. Others say that during nighttime he works on Awesome Retro, Rave Radio and Hack42. All we know is, he’s called The Stitch.