Category Archives: Coding

Combining RRDtool with jpGraph for Heatmaps

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.

Polaroids in HTML

1 Reply

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

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.

RetroTV broadcasting project part 2

Github and Wiki

RetroTV is now a project on GitHub, they offer free hosting to open-source projects. The address for browsing the code, and the accompanied wiki, is:

http://github.com/stitch/RetroTV

The wiki explains what is going on in the code, and tries to show the projects intentions. It will be the first place for user-oriented documentation. Technical documentation is a little bit more different, preferably only design decisions are listed. Check it out: http://wiki.github.com/stitch/RetroTV/

When popularity increases, the github wiki will be replaced with a real one.

Built communication with VLC

VLC has a telnet interface, and something called VLM; VideoLan Manager, which is a scheduler. Both suffer from pretty poor documentation, but its done. When running VLC in telnet mode, PHP can create schedules and playlists based upon the programming specified by users.

Running the SHOW command, after RetroTV has finished, looks something like this:

Added date support in programming

Creating a schedule has now more flexibility. In the previous, unreleased version, programming was a daily cycle. When the day ended, we would start over from the start. With the current date support, its possible to make complex programming. Adding a date is mandatory, and as such a looping programming isn’t possible. Maybe, when only programming for a single day is specified, looping might become a feature.

Creating a new set of playlists currently looks like this:

Roadmap

The first release will be out before/on August 1st. What has to be done is this:

VLC Streaming Support

The largest blocking issue is VLC’s streaming support. There is a prominent bug in broadcasting M4v content in simple setups. Basically we need to stream any kind of movie file to two different setups. A HTTP setup and a multicast setup. Both experimenting and debugging VLC has proven to be tedious, so this is a risk.

Announcements

Announcements are nearing good-enough-state for version 1.0. Only a few transitions and faster processing are among the desires. I’ve already shown announcements work in a proof of concept.

Logo while Streaming

What’s a TV station without a logo in one of the corners of the video? Well… nothing. It doesn’t seem hard to do, but with VLC you’ll never know. I suspect it will be pretty smooth to do this. The logo has been designed, it was at the top of this article.

Code cleanup

Removing redundant / incorrect comments, renaming some stuff and giving the right place for parts of code. This is a continuous process, which affects every update untill 1.0 is ready.

RetroTV broadcasting project part 1

1 Reply

I want to have my own TV station. Preferably I want software that does everything for me; but after some searches it appeared it didn’t exist. Therefore i’ve started a new open-source project codenamed RetroTV.

The aim of RetroTV is to provide a series of practices and software for running your own TV station. It’s not just software; its the whole package including documentation and guidelines/protips. Currently the software is in alpha stage: i’m developing and testing till its good enough to be picked up by the community.

Throughout this series of posts i’ll show documentation and inner workings, as well as results of the project. For todays post i’ll show the status of the project: it’s far beyond the idea stage, its nearly in beta. And we all know Beta is the way to go.

Automated stations

My goal is not at all to bring live programming or anything of decent quality. My goal is to broadcast old school television: the things we watched in our childhood. In Holland there used to be a station called “Kindernet” which broadcasted Ovide, Bassie & Adriaan, Around the Twist and a host of other series. Kindernet appeared to be a completely automated station.

Its formatting was simple: broad cast a show, have some commercials, and display what’s coming up. This project is largely the same thing, except that you can control its content, its format and will also be able to imitate clip stations such as TMF or MTV.

The Format

For automated stations use a similar way to fill up their time. To understand this format, we have to look at the difference between consumers and the station: which translates into formatting. Below tables show a difference between the consumer-level programming and station-level programming.

12:00:00	Some Show
12:30:00	Some Show
13:00:00	Some Show
14:00:00	Some Show
14:30:00	Some Show
15:00:00	Some Show
16:40:00	Some Show
17:00:00	Some Show

12:00:00	Some Show
12:24:00	Leader
12:24:30	Announcements of what is to come
12:25:30	Commercial bumper
12:25:35	Commercials, till next show
12:28:30	Leader
12:28:45	Announcements of what is to come
12:29:40	Leader

Consumer-level programming

Station-level programming

So what I want for our software, is to schedule shows from a consumer perspective. The software should create the station-level programming for me. In our case we don’t have contracts with sponsors and obligations to sell expensive air-time: which is a good thing.

Example schedule

RetroTV can already translate the consumer-programming into station level programming. As a consumer we only need to tell what shows air at what time. Look at the following PHP script: this is all we need in the current version.

$showSchedule = new showSchedule();
$showSchedule->addShow(TIMESLOT_SERIE,   "0600", "Penn & Tellers Bullshit!");
$showSchedule->addShow(TIMESLOT_CARTOON, "0700", "Kinder Theater"); // div filmpjes van 5 mins
$showSchedule->addShow(TIMESLOT_CARTOON, "0730", "Samson");
$showSchedule->addShow(TIMESLOT_CARTOON, "0800", "Teddy Ruxpin");
$showSchedule->addShow(TIMESLOT_CARTOON, "0830", "Ovide");
$showSchedule->addShow(TIMESLOT_CARTOON, "0900", "Bassie en Adriaan");
$showSchedule->addShow(TIMESLOT_CARTOON, "0930", "Around The Twist");
$showSchedule->addShow(TIMESLOT_SERIE,   "1000", "MythBusters");
$showSchedule->addShow(TIMESLOT_SERIE,   "1100", "AVGN");
$showSchedule->addShow(TIMESLOT_SERIE,   "1120", "Aqua Teenage Hunger Force");
$showSchedule->addShow(TIMESLOT_SERIE,   "1200", "Family Guy");
$showSchedule->addShow(TIMESLOT_SERIE,   "1230", "Drawn Together");
$showSchedule->addShow(TIMESLOT_SERIE,   "1300", "The A Team");
$showSchedule->addShow(TIMESLOT_SERIE,   "1400", "Knight Rider");
$showSchedule->addShow(TIMESLOT_SERIE,   "1500", "Kinder Theater");
$showSchedule->addShow(TIMESLOT_SERIE,   "1530", "Spongebob Squarepants");
$showSchedule->addShow(TIMESLOT_SERIE,   "1600", "The Legend of Prince Valiant");
$showSchedule->addShow(TIMESLOT_SERIE,   "1800", "Philosophy - A guide to Happiness");
$showSchedule->addShow(TIMESLOT_SERIE,   "2100", "Penn & Tellers Bullshit!");
$showSchedule->addShow(TIMESLOT_SERIE,   "2300", "Penn & Tellers Bullshit!");

Note: the current version has placeholders to support parental advisory. If this makes the Beta release, i’ll highlight it in another post.

Announcements

Behind the scenes the software is smart enough to fill up this programming with whatever it needs. As an added bonus, it will fill large gaps in the programming with pre-supplied funny movies from Youtube. What things this software can handle will be handled in a next post, describing “Content Packages”.

One important thing is to inform viewers what’s coming up next. For this, the script builds movie files displaying the program schedule. This part of the software is in a very early state, but its already pretty nice. Have a look:

The movie is generated “on the fly” using nothing more than a predefined background, some music, PHP and ffmpeg. The latter two are both powertoys: both haven’t been utilized to their full potential yet. The poor preview quality is intentional: it will only get better.

Creating movie-frames in PHP is a pain though: till now i couldn’t figure out how to do fadein-movement animations. Of course PHP wasn’t made for moviemaking: the default-Beta announcement rendering is already a challenge. I’ll make sure the Beta has enough information to get started on your own Announcement software.

Open Standards

As said before, this project will be released as open software in the upcoming weeks. For now i can already tell you the software packages it “depends”. VLC is the tool that does the streaming. Guidelines and scripts for broadcasting are included: both for unicast as multicast streaming. Just ask your local network adminstrator for Multicast support and you’re good.

Another software package is ffmpeg, a “simple” command line encoding tool. You won’t have any beef with this, as everything with this tool happens behind the scenes. Its used for inspecting movie files and creating announcements.

For storing file information and play-statistics (to make proper playlists) are stored in SQLITE. A database that is near-ideal for small projects like this. You can do SQL, so its all good.

The final package is PHP, with support for GD. The last creates frames for announcements, while PHP does the logic for creating playlists. All playlists are in an open format called Spiff, which they shorten as XSPF.

Next posts…

There is still enough to tell. About content packages, software internals, streaming and of course example rendered playlists. I’m watching a playlist right now and its freaking sweet!! More youtubes soon! 🙂

Elger's Weblog!

Creator, Builder, Maker, Hacker. Music and amazing original content.