Gas! Gas! Gas!

Continuing from my how to create your own (gas) smart meter post…

Now that I have all the meter reading values I can produce a D3 graph comme ça:

Not massively useful I’ll admit but it’s a start. What I’d like to see is how much gas I’m using a day. So I’ll need to group the values by day and map them to another form. Map? Group? That sounds like a job for Scala!

The stored data is very simple:

A little bit of Scala allows us to workout the amount of gas consumed each day. I’m not saying this is the best way to do it – more just an excuse to use Scala.

Actually, as the boiler runs in the morning and the evening, I’d like to see the difference between am and pm usage.

(I have another version of these methods which are curried but I thought they were a bit nuts to show publicly).

At which point the data becomes a bit too structured making it difficult to feed to D3. So we flatten it again to:

Then we can get our daily usage graph:

Gridlines correspond to the right-hand axis so you can see cost. That’s a lot of gas being burned.

“No SQL” with Liquibase and jOOQ

Not NoSQL but accessing a conventional database with “no SQL”. I don’t hate SQL but I do avoid writing it if possible.  Java and SQL don’t go well together. Large volumes of SQL can become a maintenance nightmare if you’re changing your domain model around.

Yes, I know. The model should hardly change as it should have been perfectly architected from the very beginning of the project……..don’t get me started.

I have always used Hibernate/iBatis in conjunction with Liquibase but wanted to try something else. Even the infallible Hibernate can become a little tedious sometimes. My friend Google led me to jOOQ. It’s a fully-featured database framework with all the bells and whistles you can think of. Any database architect will appreciate its SQL-centric approach.

I had a whirl with it’s code generation feature and was impressed. With Liquibase versioning the database and jOOQ reverse engineering it to generate Java objects I felt assured I had a solid, fault-free build (as far as mapping Java objects to database tables goes). One minor niggle is that if you’re using Maven you will find that the jooq-codegen-maven plugin will run at the generate-sources phase whereas the liquibase-maven-plugin normally runs at process-resources. The problem being that we want to manipulate the database before reverse engineering it.

This is easily fixed by changing the liquibase-maven-plugin phase to generate-sources and then adding a concise [cough] bit of Maven to copy the required Liquibase files into the target directory (earlier than it would normally):


How to create your own (gas) smart meter

Smart meters are all the rage these days so I thought I would have some fun turning my gas meter into one. As my gas bill is three times as much as my electricity bill this might even have some use (haven’t found much use for my electricity smart meter yet).

Firstly, set up a cheap webcam to look at the meter. Every expense was spared with a £30 Tenvis camera:7894

The quality isn’t that high but it should be good enough for some basic text recognition. Note that I had to carefully position the camera to reduce glare from the IR LEDs reflecting off the meter’s glass. I also increased the contrast on the camera as this would make feature extraction more reliable.

Now all I had to do is run the image through some OCR software and read the characters. Simple, right?…..well….sort of. Although this is a controlled environment I don’t know of any software that will reliably extract text from this image. There were a number of OCR APIs at my disposable (Tesseract, Java OCR) but I first had to simplify this complex scene. I did have the advantage that the meter is under the stairs so the image would not be affected by any lighting changes.

How to extract just the digits from the image? I could have just manually defined a boundary area on the image around the digits. But this didn’t seem particularly robust (if the camera moved position, say) and I was keen to use some computer vision cleverness.

I thought it was most probably a good idea to deskew the image first before running any feature extraction algorithm. An ImageDeskew class (found in Tess4J) provided some Hough transformation goodness. This does rely on your image having some distinct horizontal/veritcal lines in it.deskew

Onto feature extraction, I came across the BoofCV library which had some good examples and got me thinking about the best way to extract the characters from the image. I chose to use its binary segmentation capability to try and find areas of interest in the image –

I ran the binary image extractor using code taken from this example.contours

The white line represents a bounding region and the red lines internal bounds inside the outer one. From this image you can see that 2 of the characters are part of the outer boundary and 2 are part of the inner (plus some other erroneous regions). But these were not the only contours found in the image so how did I classify this image to be the one of interest? Luckily, the other detected contours were completely implausible and had far too few or far too many internal boundaries.

So taking the maximum area of the outer boundary we can extract a pretty good image of just the digits.


Not perfect but hopefully good enough for Java OCR.

I assumed an OCR extractor would want black text on a white background so I created a negative of the image:


Then it was just a matter of running the OCRScanner‘s scan method (with the necessary training images added of course). Java OCR does have a character extractor but I created my training images manually with IrfanView:


These steps might have come across as being pretty straightforward but it did, in truth, require a bit of code tweaking to make it work for my particular setup (especially to Java OCR). In Hindsight manually specifying the region on the image where the digits are would most probably be more reliable/straightforward.

And what is the current reading? I created a RESTful service to get the webcam image, run the OCR and then provide a JSON result. So assuming my service is able to connect to the web camera at my house and that OCR recognition is working correctly you should get an image and corresponding reading below:

It’s a kinda magic!

Now all I need to do is run the stored values through a graph drawing framework (D3!) and see if I can find anything interesting. Comparing it to inside/outside air temperature might be a good start.

Interactive psychological testing with Google Web Toolkit

I recently helped a friend set up on online psychology test. Not being at all familiar with psychological experiments I was directed to an existing software suite for inspiration – PEBL Test Battery.

Any of these tests could be converted into an online version with some nifty Javascript or Flash. But thanks to Google Web Toolkit and HTML5’s canvas feature it’s even easier to create interactive tests.

Although GWT makes it so easy to write web applications it doesn’t help you follow any design patterns (e.g. MVC or MVP).  I used GWTP to implement a Model-View-Presenter front-end (following an MVP pattern with this framework is much easier and it’s well documented). Although GWT now has an API to handle HTML5 canvas it doesn’t seem to be documented anywhere (well I couldn’t find anything other than Javadoc). So I used Vaadin’s GWTGraphics library which is well documented. I think it’s also more cross-browser friendly (or, to be more precise, it fights all the different versions of Internet Explorer – Microsoft like to keep themselves and everyone else busy).

Trail-making task demo here »

Sorting a paginated DataGrid

Ever had the problem of a paginated DataGrid only sorting on the page that is currently being viewed? Yeah, pretty useless I know. I needed the whole set of data to be sorted and a quick search on tinernet suggested quite a few other people did too. Unfortunately none of the blogs I read seemed to have the exact answer. So here is the full working solution – I did this quickly so it may not be perfect. The pagination was done using this chaps implementation so if you’re not using that the below bit of code may not make much sense. A little bit of inspiration was taken from stackoverflow.

After sorting the ArrData list I realised that the refreshDataProvider method doesn’t even use it and instead uses some source property which is an Array representation of the list. Amazingly this has to be sorted separately! I don’t understand why ActionScript has this “feature”.

Cairngorm: Tread carefully

A popular choice of framework when working with Flex is Cairngorm which has a nice tutorial to get you started. The reason I’m writing this blog is because of some code I came across recently. A developer had read the Cairngorm guide, taken it as gospel and then implemented it exactly. The only problem is that he wasn’t writing an application for an online shop which required a shopping cart. In particular the unnamed developer should have ignored the advice on the singleton model and in particular how one implements the IResponder interface.

The Cairngorm example is simple and the singleton model binding to your mxml pages is simple – it’s the quickest way to make Flex’s asynchronous behaviour work easily. If your application is a little more complicated then this simplicity becomes highly inflexible. To make my point a little clearer look at how the result method sets properties on the model.

Ok fine. But let’s imagine a user could have more than one shopping basket (unlikely I know but just to make my point). Or even better, what if your model had separate products for his and her shops. With this pattern you’re now stuffed because the model can only handle one set of products or one shopping basket. Yes, you could change the model so it can handle multiple sets of products, multiple shopping carts but that wouldn’t be the right way to fix the problem.

To overcome this inflexibility all you need to do is ditch the singleton model. Ok maybe don’t ditch the singleton model but only store truly global properties in it – the logged in user, a list of countries etc. Now how do you get your changes from an asynchronous service call to show up in your UI? Well without sounding too radical you could just implement MVC/MVP and pass the result of the event to you controller/presenter class.

I’m not entirely sure what Cairngorm’s Command classes are supposed to do. But my Command classes do virtually nothing and I let the Controller classes manipulate any result before setting it in the view.

Your controller class can then set the result on your mxml page (not very MVC but no bindings required) or you can bind the mxml page to a property on your controller class (the MVC way).

Why is this more flexible? The simple reason is that you have a Controller class for every mxml page. So if you 2 shopping baskets you have 2 ShoppingBasket controller classes. If you have his and her shops you have HisOnlineShopController and HerOnlineShopController – whatever granularity works best. It also stops you using the powerful but ultimately horrendous [Bindable] property on loads of properties in one class which every mxml page is looking at. In MVC the view should only be looking for properties where it needs to be – i.e. the controller/presenter that is handling the display of data in it. That way when you’re trying to find a null reference exception you only need to look at one mxml page (plus any nested pages) and one Controller class to work out where it is. I find this much better than putting a finger in the air and hazarding a guess as to which of the million [Bindable] properties in my singleton model is being set to null and which mxml page is bound to it.

And even better ActionScript is a functional language so it’s really easy to invoke a function after an asynchronous call finishes. Java can only achieve this by using interfaces which is not quite as neat (though the flow is quite clear).


Synchronise Events with Bindings in Flex

I have recently had to delve into the world of Adobe Flex and ActionScript and wanted to share some of my trials and tribulations with it. As I’m not a massive fan of Flash or proprietary technologies I had to assume the work had been assigned to me as a punishment for crimes committed in a previous life. In fact, 2 months in, I’m not entirely convinced what embedded Flash has to offer over conventional html and javascript – especially considering the features available in HTML5. “Meh” pretty much sums up my feelings for Flex – perhaps I’ve been doing too much Java.

Having previously been programming JSF I found Flex quite … different. One notable difference being it’s easy approach to the Observer Pattern with Bindings and another being it’s asynchronous behaviour. As JSF does not have any features comparable to these so this was all unchartered territory for me. In particular, I was experiencing some difficulty with asynchronous calls and the ViewStack. Basically the application was Single-Sign-On and I didn’t want the home view to show until they had been authenticated. Simple right? All you have to do is a bind a Boolean which is set by a CairngormEvent when authentication succeeds. Next problem was that there was some data to show on the home screen. But because every service call is asynchronous the screen would load with a blank area which would only be filled-in once the service call had completed. Well, what’s the point in showing a page unless it’s ready to be shown. I now have 2 conditions that must be true and ChangeWatchers seem to be the only thing that are going to help me.

A capability to synchronise asynchronous events is all I could think of to achieve the desired result. So I created a SynchronisedChangeWatcher class. WARNING – this is an over-engineered solution so I’m not sure if I would recommend using it:

And it’s usage:

So doStuff() will be called when both UserLoggedIn and _CreationComplete properties change – Simplz!