Image Image Image Image Image Image Image Image Image


June 21, 2011

Reventer Tutorial

June 21, 2011 | By | 3 Comments

At present Reventer is still in early development. For those who would like to use it and give feedback, here is a quick tutorial to get you started.

First Start

Until you have created at least one event, the first screen you will get when you start Reventer will look like this:

Click on the “add event” button to create a new event. An event is anything that can happen, like getting a headache, traveling somewhere or measuring something like a payment.

Adding an event

After you’ve clicked on the “add event” button you will be presented with a screen where you have to provide 2 details about the event:

  • What it is called
  • What type of event it is

  • There are three types of events available at the moment:

  • Timestamp – Any event for which you only want to record the time that it happened. Like keeping track of when you get headaches
  • Number – An event for which you want to record when it happened
    along with some numerical value, like your temperature or blood pressure (this doesn’t all need to be medical, and I’ll hopefully come up with some better examples soon)
  • Duration – Any event for which you want to record the duration, like the start and end times for a journey.

    After entering the name, just press the button identifying which type of event you are creating.

    Adding More Events

    To add more events, press the menu button on your phone or device, which will give you the option to manage events:

    Adding Event Instances

    Event instances refer to whenever an event actually happens.

    For timestamp events it is easy to add an event instance, just hit the big red + button next to the appropriate event. For our example using headaches, you would hit the + button every time you get a headache.

    IMPORTANT NOTE: Because events are grouped by either hours or days you will only have a dot to begin with. As you add more event instances over time your graph will get more interesting.

    For number events you will get a prompt to enter a value like below:

    To record a duration event instance, just push the play button next to the event.

    Once the event ends, you hit the stop button and the duration will be recorded in minutes.

    Grouping Event Instances

    This is where it gets interesting. Say you are keeping track of when you are getting headaches. It may be useful to get some idea of whether this is happening at certain times of day. This is where grouping comes in. To change what event instances are grouped by, just tap on the green graph on the main screen, and you will be presented with four options:

  • Hour: The event instances are grouped by the number of occurrences per hour, or, for number and duration events, by the number or duration of the event instance per hour
  • Day: The event instances are grouped by the number of occurrences per day, or, for number and duration events, by the number or duration of the event instances per day
  • Hour of Day: Here grouping is by the hour of the day in 24 hour format. Useful for seeing if event instances are occurring at specific times of day.
  • Day of Week: Here grouping is by the day of the week. Useful for seeing if event instances are occuring on specific days of the week

  • Exporting Events

    To export events wih all there instances you have two options. Either export to the SD Card(Export to CSV) or Export to any of your installed application on your Android device (send CSV).

    Once exported you have all the details of every recorded event instance.



    June 7, 2011

    Reventer 0.3

    June 7, 2011 | By | No Comments

    After some issues reported on earlier versions of Android (thanks bro), I’ve updated Reventer to 0.3 – now it works with any version of Android from 1.6 up. I even tested it on my G1.



    June 5, 2011

    Reventer 0.1 Alpha Release

    June 5, 2011 | By | No Comments

    I’ve just released the first alpha version of Reventer to the Android Market. Whether anyone other than myself will find this useful remains to be seen, but I’m pretty happy with what Reventer can do, and this was always a project aimed at addressing my own requirements.

    Reventer (rapid event recorder) is a tool for data geeks to record when events occur and how often. By collecting data, Reventer helps you determine the empirical probability of events.

    Check it out on the Anrdoid Market.



    April 23, 2011

    massivedata on github

    April 23, 2011 | By | No Comments

    Nothing huge, but I’ve moved the massivedata demo to github. The project isn’t much more than the demo at the moment, but this is, if nothing else, a way to show my intent for massivedata as an open source project.



    April 3, 2011

    New Android App Icon

    April 3, 2011 | By | No Comments

    This week I did some work on the icon for my latest Android App. Contrary to my approach before I’ve decided to ignore the icon guidelines completely. After putting some work into following these guidelines, and providing a tutorial for other users to create Android icons which conformed to the original guidelines using Free and Open Source tools, the standard has been changed completely for Android 2.0+. Who’s to say that the standard won’t change in future?



    October 8, 2010


    October 8, 2010 | By | No Comments

    Over recent years data visualisation has become a topic I really enjoy. Being a DBA, I’m used to trying to make sense of large volumes of data, but there is something extremely satisfying about the immediacy of a clear visual representation. What I was looking for is a tool that would always be available (home, work wherever) and that can handle very large amounts of data.

    That’s partly what sparked my interest in HTML5, which is promising a future with a blank canvas on every PC. From there my search took me to webgl (partly because of a game that I’ve been wanting to write for over a year now), and that’s when I had the idea for massivedata.

    The idea is to have an easy and clear way to visualise large amounts of data. Taking into account that webgl harnesses the power of the GPU, it seems to be the perfect fit for working with large-scale data visualisation.

    How it works

    You start off in heatmap mode. This corresponds to a top-down view in 3D space. Here values are represented by colour, and you have the advantage of seeing a very large amount of data at once.

    From heatmap mode you have the option of switching to a barchart view of either the columns or rows involved in the representation. A slider gives you control over which row/column you’re viewing, so you can compare values in different ways.

    Finally there is explore mode, in which you have a full 3D view of your dataset.

    This is still very much a work in progress, but find out how to get a webgl-capable browser, and then check out the demo.



    September 28, 2010

    Google Buzz Widget

    September 28, 2010 | By | No Comments

    I’ve added a google buzz feed to my site using the example code from Manki’s Weblog. I highly recommend this as it is one of the easiest solutions available for providing this functionality in a CMS-agnostic way. Enjoy.



    May 26, 2010

    Simple Heatmap Generator

    May 26, 2010 | By | No Comments

    The simple heatmap generator is available as a template in the google docs template gallery. It’s basically aimed at being a quick way to see what your data will look like as a heatmap. For the final product I would suggest you use a great tool like R.

    Google spreadsheets do have advantages though, like allowing you to embed spreadsheets in webpages.

    Give it a try and leave your feedback in the comments.



    May 7, 2010

    Android Launcher Icons using “The Box”

    May 7, 2010 | By | No Comments

    While working on EveRated I found it necessary to create icons for my application. From this necessity The Box Method was born. The Box Method uses the cube as illustrated in the official Android Icon Guidelines, and provides a number of layers as guides for either transferring existing icons to 3D space, or creating new 3D icons. You will need to use Inkscape as mentioned in the previous tutorial. The illustration below shows the box along with the various layers containing the guides we will be using.

    The first tutorial in this method will show how to convert an existing icon to a simple 3D Icon using The Box method. The example for this tutorial uses the Android icon, but you can use any image you want. It helps if the image has a plain background, or a transparent background like the image below.

    You will need The Box template to complete this tutorial, and you can download it here. With the template open in Inkscape, we can now start by importing our base image. To import an image into Inkscape, use the File->Import option as shown below, making sure to have the Objects layer highlighted:

    To interact with this image using Inkscape, we need to convert it to a path. This functionality is in the path menu (Path->Trace Bitmap…). Remember to have the image selected when doing this.

    Tracing a bitmap in Inkscape is not an exact science, and different settings will work for different images. Because this is a fairly simple image, I chose to use the “Colours” option with Scans set to 2. When working on your own image, experiment with different settings and use the Update button to see a preview of the results of the current settings. Choosing the “Remove Background” option will remove the bottom layer and should only leave you with the necessary parts of the image, although this does depend on the amount of complexity in the background.

    When you are happy with the preview, you can apply the final result by hitting OK. The trace of the Bitmap will now be located over the original image. Move it into its own location. Make a copy of the trace and move that to its own location as well. Draw a square with a black outline, but no fill, around this last copy. To draw a square as opposed to a rectangle use the ctrl key. These steps are shown below:

    Next we have to combine the square with the trace. Select the square and then select the trace inside it and hit CTRL+K to combine these to objects:

    Make a copy of the combined square and trace, then put it aside. We are going to need it later. Now we can start using the Box. Unlock and select layer “vertical 9”.

    Select the combined square-trace and then the front of the two vertical guides. Remember to unlock the guide layers you are using for this step.

    Making sure you have selected the trace first and the guide second, choose Extensions->Modify Path->Envelope to align the trace to the guide.

    Now we repeat this process with the copy we made earlier and using the “horizontal 9″ layer.

    Proceed by hiding all layers, except for the object layer where our vertical and horizontal objects now exist. Then delete the corners of the bounding squares.

    Now we are going to add some colour to this android. Select the original green image (2) and copy it using ctrl+c. Then select the vertical android and bring it to the front (using the home button or Object->Raise to Top). Hit ctrl+shift+v to paste the colour from the green droid to the outline:

    To finish up we remove the border from both the horizontal and the vertical androids. Set the colour of the shadow to r=g=b=100 and blur to 3 (or an appropriate value).

    And that’s it for the basic tutorial. Very simplistic, but this is just laying the groundwork. Export the image as a 48×48 PNG file. The next tutorial will be slightly more advanced, and hopefully show the usefulness of the Box Method.



    May 7, 2010

    Android Menu Icon Tutorial – Using Inkscape

    May 7, 2010 | By | No Comments


    This week I started work on some icons for EveRated. To do this I have been using Inkscape, which is an awesome tool. I highly recommend that you give it a try if you’re creating icons or other graphical components for Android or any other project for that matter.

    The end result can be seen below and is used in EveRated (available in the Android Market). And the subsequent steps will explain how to create an icon of your own. This tutorial assumes some basic Inkscape skills, but don’t worry, you can find what you need here.

    Download SVG File

    Getting Started

    I used an image supplied with the icon template pack as a guide for the shape of the icon. To start with I created a new file, using File->New->icon_48x48:

    I then created the basic shape of the icon, a quick breakdown of the steps are below:


    As the effects are being applied to the entire icon, I combined all the parts of the house icon (roof, chimney and building) by selecting the parts and pressing ctrl+shift+= (or ctrl++). You can also do this from the Path menu by selecting the union option.

    To set the correct colour for the icon, you can open the Fill Panel by pressing ctrl+shift+f:

    The colour of the icon is defined as a gradient from r=163, g=163, b=163 to r=120, g=120, b=120 with alpha=100. This is per the [Icon Design Guidelines|].

    Glow Effect

    Next I created a new layer called glow. You can create layers from the layers menu (Layer->Add Layer) or by using the Layer Panel which can be activated by pressing ctrl+shift+l or from using the menus: Layer->Layers.

    The next step was to create a duplicate of the icon, you can duplicate your object by selecting it and hitting ctrl+c. To paste it into the glow layer, highlight the glow layer on the Layer Panel. Then use ctrl+alt+v to paste. This key combination pastes the object in the same location where it was copied from.

    To make sure that I was working on the glow layer, I locked the original icon layer. Layers are locked by clicking the padlock next to the layer:

    Then, after selecting the copied Icon on the glow layer, I turned off the fill and set the stroke paint colour to white. I chose a stroke width of 2.0:

    Because we now have a white frame on a white background, the effect is not visible. So to see what is going on, you can add a background layer with a grey square, but remember to get rid of this before the export. Remember to lock the background layer to stop from selecting it by accident. Finally, I set the blur (which can be found below the fill/stroke setting on the fill panel) to 10.0:

    Sunken effect

    For the sunken effect I created a new layer called sunken and pasted the icon to this layer using ctrl+alt+v as before. Note that at this stage the glow layer is below the original layer (called Layer 1 if you haven’t renamed it) and the sunken layer is above it.

    Then I removed the fill and set the Stroke Paint to black with width 1.0. I also set the blur to 2.0. You can experiment with these values to get the best results for your icon.

    After that I pasted another copy of the icon onto the sunken layer. To clip the blurred outline and create the final sunken effect, we select both versions of the icon on the sunken layer and choose Object->Clip->Set.


    To get the icon in a usable format I exported it to a PNG file. You can reach the export dialog by pressing ctrl+shift+e or using the File menu and choosing the Export Bitmap option. Use the page option to export the entire icon and make sure the size is set to 48×48:

    There is not much to it, but to see how it all fits together grab the SVG file below:

    Download the SVG File