Monday, December 16, 2013

Setting up Arch Linux on Raspberry Pi

I've had a Raspberry Pi for almost a year now and despite my intention to use it for development it's ended up being used to run Raspbmc. I couldn't let it go a year without it being used for something more interesting so I spent some time this evening getting it configured for use.

I gave RISC OS a go first, thinking it'd be fun to use something completely alien to me but the novelty wore off within the first few minutes of using it. So I decided to scrap that idea and install Arch instead.

I've not used Arch since the move to systemd so it seemed like a good opportunity document the install process as my previous post about installing Arch is a little out of date.

To start with you need an SD Card with a recent Arch image. Here is my bash history from preparing the memory card:
$ diskutil list
$ diskutil unmountDisk /dev/disk1
$ sudo dd bs=4m if=archlinux-hf-2013-07-22.img of=/dev/disk1
$ diskutil eject /dev/disk1
Now is also a good time to change the root password. With that done, set the timezone and locale info. Start by uncommenting the line for your locale (in my case en_GB) from '/etc/locale.gen'. Now generate the locale settings:
# locale-gen
You'll also need to run the floowing two commands with the appropriate language and timezone:
# localectl set-locale LANG="en_GB.UTF-8"
# timedatectl set-timezone Europe/London
I'm using a Belkin wireless-N adapter with my Pi so I needed to setup my wifi using the following:
# install -m640 /etc/netctl/examples/wireless-wpa /etc/netctl/home-wifi
Then edit the '/etc/netctl/home-wifi' file with the correct SSID and password. Once done enable it:
# netctl enable home-wifi
You should now have internet access so do an update pacman -Syu then install vim:
# pacman -S vim
To get rid of some unsightly black borders on my monitor (overscan) I needed to edit the boot config:
# vim /boot/config.txt
Uncomment the line 'disable_overscan=1'. I also chose to uncomment 'hdmi_drive=2' as I only ever intend to force audio over HDMI.

I find the default console font a little small on a 1080p monitor so I also decided to create a /etc/vconsole.conf file with the following:
While on the subject of fonts, it may be worth installing these if you need some nice truetype fonts:
# pacman -S ttf-dejavu ttf-droid ttf-linux-libertine ttf-ubuntu-font-family
Before creating a user account install the sudo package and configure it so that all users in the wheel group can use sudo:
# pacman -S sudo
# EDITOR=vim visudo
Uncomment the line '%wheel ALL=(ALL) ALL'.

I'm using a 32GB SD Card for the installation so I had to resize the root partition. This can be done within Arch by using fdisk to delete the extended partition then recreate a new extended partition using the remaining space and another logical partition. Once the changes are written you'll need to reboot then run resize2fs. See Growing the RPi root partition for full details.

Most Linux users stick to using bash but I want my user account to default to Zsh, so have installed the package prior to creating the user account:
# pacman -S zsh
# useradd -m -g users -G audio,lp,optical,storage,scanner,video,wheel,games,power -s /usr/bin/zsh USERNAME
Set a password for the new user then exit and login as the newly created user.

To have a little colour in your zsh prompt add something like the following to the end of your .zshrc file:
PS1="%{%F{cyan}%}%n%{%F{red}%}@%{%F{blue}%}%m %{%F{yellow}%}%~ %{$%f%}%% "
As I'm going to be doing development on the Pi I also installed Java7, Python, NodeJS, Ruby, and a C compiler:
# pacman -S python python-pip ruby clang nodejs jdk7-openjdk openjdk7-src maven

Sunday, November 24, 2013

Android Studio - Early Access Preview v0.3.6

This weekend I decided to continue the work of updating the Android Call Location project to build using the latest version of Android Studio (0.3.6). When I tried Studio in September I had copied my code into a new project to get up and running quickly. It's a perfectly acceptable way of doing things but I wanted to go through the process of migrating my code from the original Eclipse way of doing things to the newer Android Studio style.

Since version 22 of the Eclipse ADT Plugin there has been an option to generate Gradle build files when exporting a project from Eclipse. It's been ages since I used Eclipse, still on Indego, so I downloaded the latest version; Kepler. After adding the ADT Plugin and restarting the IDE the option to generate the Gradle files was there. Having Eclipse create the Gradle build files seemed like the best option but in fact was actually the cause of a few problems when the time came to open the project in Android Studio.

In my post about Android Studio Gotchas, I wrote about Android Studio using its own bundled Android SDK. Eclipse used the Android SDK that was manually installed on my system which was not as up to date as the one in Studio. This meant that the generated build.gradle file had an older build tools version.

Another thing I had to look out for was the minimum and target SDK versions. I've chosen version 8 as the minimum and will target version 18. I also set version 18 of the SDK as the compileSdkVersion and 18.1.1 for the buildtoolsVersion. These will all need to have been downloaded through the SDK Manager within Android Studio.

Since creating the application a newer version of the Google Maps API has been released so I also needed add a dependency for Google's play-services. I'm also going to be using Fragments in the app, which were not available in the Android API that was used to create the app. To add this new functionality without breaking backwards compatibility I've added support-v4 and appcompat-v7 to the dependencies as well.
dependencies {
    compile ''
    compile ''
    compile ''

Sunday, October 20, 2013

Android Studio Gotchas

I decided to carry on with some programming today using the Android Studio EAP. On opening the IDE there was a prompt to update to version 0.3.0 so I chose to update and restart. Subsequently much of my time was spent trying to work out why my project wouldn't build anymore.

The first problem was a simple fix. I prefer to use my local Gradle distribution rather than a Gradle Wrapper so I downloaded the latest version (1.8) and changed my GRADLE_HOME environment variable to point to the new version and restarted Android Studio.

The next problem was that the appcompat-v7 dependency could not be resolved. The Android Support Library package is needed for backwards compatibility without it my project will not build. When running the Android SDK manager from the terminal I could see that it was installed and up to date. This baffled me for some time, then I found that Android Studio wasn't actually using the Android SDK that I have installed on my system. The IDE has its own Android SDK bundled. I personally don't like this as I don't think the SDK belongs in the installation of Android Studio. I want the flexibility to chose where my SDK is installed. Once I realised that the SDK on my system path and the SDK being used by Android Studio were not the same it was easy to fix. Use the IDE to open the SDK Manager under the tools menu, then once updated restart the IDE.

Sunday, October 06, 2013

9 years of Ubuntu

I've had to move home twice in the last 12 months and still have a few boxes left to sort out. Whilst unpacking some books the other day I came across the installation cd for Ubuntu 5.04 (Hoary Hedgehog) which came with issue 53 of Linux Magazine. It was Canonicals second release.

At the time I'd been reading about Linux, BSD, and Solaris as I wanted something different from the norm. I found Linux quite frustrating back then (and still do sometimes) and like many others that try it for the first time I only lasted a couple of weeks before returning to the all familiar Windows XP.

I still liked the idea of using open-source software though. So it wasn't long before I was testing the water again from the safety of a virtual machine, then moving onto dual booting.

These days most of my computers run Linux, generally either Ubuntu or Fedora. I made the transition around three years ago and despite the occasional problem, I'm happy with the decision. Yesterday I updated the computer in my lounge to Ubuntu 13.10, which means it's over eight years since I tried Ubuntu for the first time. Canonical released Ubuntu 4.10 (Warty Warthog) in Oct 2004 so this latest version marks their ninth anniversary. In that time they've made a real impact in the Linux community and I hope they continue to do well.

Sunday, September 22, 2013

Android Studio - Early Access Preview v0.2.9

Following on from my post on Friday about Gradle. I decided to get started with the Early Access Preview of Android Studio (v0.2.9). My Android Call Location project has been dormant for some time so it's the perfect opportunity to try out the new tools whilst also updating the project to work with the more recent Android API.

So far I'm very impressed with the integration between the Android SDK and Intellij IDEA. It only took a few minutes to get my project working in an emulated Nexus 4.

Friday, September 20, 2013

How To: Add Gradle support to a Maven project

In 2010 I started working on Confluence/Jira Plugins (written in Java) for Adaptavist. My programming experience back then consisted of small projects with little or no dependencies and no automated tests, so landing a job at a software company was a big eye opener. It was during this time that I was introduced to Maven. Having the ability to define a projects dependencies and build process so that any other developer can easily compile the same project without needing to waste time configuring their dev environment is certainly a big win. It made a huge impression on me and I have been an advocate of Maven ever since.

While working at Adaptavist I had the good fortune to attend Devoxx in Belgium. During the conference I heard about Gradle but didn't pay it much mind as my day to day work was so geared around a specific set of tools. Since that time I've been involved in a few Android projects. Although there is an android-maven-plugin, I found trying to build Android projects using Maven considerably painful; this is due partly to the fact that an Android project structure does not fit well with the conventions that Maven uses.
"Gradle combines the power and flexibility of Ant with the dependency management and conventions of Maven into a more effective way to build"
Recently I came across this page showing the progress of Gradle support in the Android SDK. This prompted me to do a little reading about Gradle to see if it could help make Android development a little less troublesome. Starting with the why Gradle page, and some good presentations on youtube I decided to download and install the latest version (1.7 at time of writing).

Installation is easy, just the same as Maven and most other tools. Set an environment variable called GRADLE_HOME and then make sure %GRADLE_HOME%\bin is on your PATH variable (same kind of thing for Linux & Mac). Once that's done just run 'gradle -v' from the command line to make sure it's setup correctly.

Thankfully the Gradle developers have made it easy for people to add Gradle support to existing Maven projects. In the root folder of your project just run 'gradle setupBuild' and Gradle will detect your pom file and create a 'build.gradle' file using the same dependencies and build settings.

Wednesday, September 18, 2013

How To: Install Quake 3 Arena on Ubuntu

This evening I wiped my old Belinea 2.1 laptop and installed Ubuntu 13.04 on it. I wanted to have at least one game on it so I settled on Quake 3 as the machine is a little old. To install Quake 3 you need to have 'pak0.pk3' from the original installation. Then it's simply a case of running the following commands:
sudo apt-get install quake3 game-data-packager
game-data-packager quake3 /path/to/pak0.pk3 /path/to/
sudo dpkg -i quake3-data_30_all.deb

My laptop resolution is 1280 x 800 (16:10) so to get Quake3 making full use of my screen I needed to edit the q3config.cfg file:
vim ~/.q3a/baseq3/q3config.cfg
Then set the following:
seta r_mode "-1"
seta r_customwidth "1280"
seta r_customheight "800"

Friday, August 30, 2013

Kick the Windows Command Prompt into shape with ConEmu

Having been a Linux user for a number of years I tend to find it somewhat frustrating when using the Windows Command Prompt. Microsoft shows no sign of making any changes in this area even though it's an essential tool for any IT worker, especially software developers. At the least I tend to have Cygwin, Git-Bash, and a couple of instances of the Command Prompt open while working. At home I tend to use either a Mac or some GNU/Linux variant so it's simply a case of opening a new tab in the terminal emulator when I need to.

This is something that ConEmu can take care of. Not only can it allow for tabbed instances of the Windows Command Prompt, it will work for other terminals as well. It was recommended to me today by my boss who was looking for a better way to use the Command Prompt in Windows. I'm currently using it just to help managing the various dev tools I use. So Cygwin, PowerShell, Git-Bash, and the CMD are all available in the same place.

To make a console such as Cygwin available within ConEmu simply open the settings and add a new task.

In the task parameters you can put the location for the related icon:
/icon "C:\cygwin\Cygwin.ico"
Then, in the commands section, add the command that should be run to open a new Cygwin instance:
C:\cygwin\bin\bash --login -i

So now I have all of my command line tools running within one window but it doesn't stop there, ConEmu has tons of features so go take a look.

Saturday, August 10, 2013

Changing workflow from Java to Node.js (JSF to JavaScript)

Over the last year I've been working in a small team on an ambitious project to build a web application that will bring together information from a range of disparate sources within the company and provide all of the key information in a concise manner. It started out as a Java web application generated from a Maven Archetype with dependencies on JSF 2.1, Spring, Hibernate, and Primefaces.

This tried and tested workflow meant that the project was able to advance at a good pace. As the application grew however there seemed to be an ever increasing battle with JSF. We're dealing with a lot of dynamic content on our pages and although our web-app was good it just didn't have the speed we wanted.

The decision was made to move away from JSF and Spring in favour of using a Javascript MVC framework. The application was split into server-side code that would provide a REST interface and our client-side resources. We still use Java for the backend which connects to our various systems and provides a the API for the UI to connect to.

Using this approach all the required layout data is sent to the users browser during the initial page load. After that, most of the data going back and forth is just json. When the browser receives a new json object, it can be added to the page using the appropriate template which is already available. Changing to this new way of doing things has made a massive improvement to the user experience.

The new front end is built using a collection of tools that are run using Node. So instead of Maven, Tomcat, Spring, JSF, Primefaces, and the like, we're now using:
LESS or Sass
So there's a fair amount of reading and tutorials to do to get up to speed but results more than make up for the initial learning curve.

The new user interface started life using a scaffolding tool called Yeoman. Much like using Maven archetypes, Yeoman can be used to generate a project structure for you based on a variety of available generators such as generator-webapp, generator-ember, generator-heroku, generator-chromeapp, generator-firefox-os, and so on. Yeoman should be installed globally using NPM:
npm install -g yo
The install will also include Grunt and Bower. Grunt is used to build your project and Bower handles dependencies such as Bootstrap and other client-side stuff.

There are various client-side MVC frameworks around, the two major contenders being Ember and AngularJS. We went with Ember (more on this in future posts), so the next step is to install the generator for an Ember application:
npm install -g generator-ember
Before using the Ember generator you need to make sure you have ruby & compass installed. You'll also need to install 'grunt-contrib-compass' via NPM:
sudo gem install compass
sudo npm install -g grunt-contrib-compass
By now you should be ready to generate an Ember web app:
yo ember
This will download various packages and create your project structure. When finished you should see the following files and directories in your current directory:
Yeomans job is now done. From now on you'll just need to use Grunt & Bower. When updating or adding dependencies to bower.json you'll need to run 'bower update' or 'bower install'. For now though why not start the application up, just run:
grunt server

Friday, July 05, 2013

How To: Use base64 in your CSS for background images

Following on from my post about using D3 to generate graphs. I've recently been evaluating Highcharts for use in a rather large project that I have been working on since last year. So far I've been impressed with the library but that's another topic. What I want to write about is something I've been playing with recently; embedding images into a CSS file using base64.

The reason I came across this is due to accessibility. On producing some pie charts in our app the client mentioned the fact that the colours being used may prevent some their users from seeing the sections of the chart. After some searching and a post on stackoverflow, I was pointed in the direction of a pattern fill plugin which would solve our issue. The example I had seen used a standard image file but I was keen to create some SVG patterns inspired by the pages on philbit and

Using the example SVG patterns and editing them on Codepen, I gathered a few base64 values which can be used in the following format:
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zd…R0aD0iOTkiIGhlaWdodD0iMjUiIGZpbGw9IiNhOWNlMDAiPjwvcmVjdD4KPC9nPgo8L3N2Zz4=);
The result of using the base64 values of the SVG images as backgrounds within Highcharts is shown below. There is also a jsfiddle if you want to see how it works.

Thursday, June 20, 2013

A few reasons why I use LESS

Last year I was introduced to LESS. It's a great way to write CSS as it allows you to nest your styles, set variables, and much more. The first reason I prefer LESS over standard CSS is variables. It's a simple feature that's really helpful. Say you want to use #fd0100 as your value for red. In CSS this would require ensuring that any time you change the red value in one CSS rule you should check for other instances that the same value was used and then update them accordingly. With LESS you simply need to define what your red value is:
@red: #fd0100;
Next up is imports. When using LESS you can split your CSS rules accross multiple files to make them more manageable. Then when you come to build your project you can have them all build into a single CSS file. For example, in the project I'm working on I have a main.less file that imports the following:
@import "reset";
@import "colours";
@import "mixins";
@import "tablet";
@import "desktop";
Mixins are another great feature for LESS. Using mixins you can write little chunks of re-useable CSS. In this little example I have a mixin that sets border-radius using browser specific rules as well as the standard CSS rule. The default radius is 4 pixels but the mixin can have any other valid value passed to it.
.border-radius(@radius: 4px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;

Thursday, April 11, 2013

Getting started with Node.js

I've read and heard a lot of good things about Node.js over the last year or so. I first learned of it while I was doing a little research into Cloud Platforms such as Heroku and dotCloud back in 2011. At first I, as many others, was a little dubious about how well Javascript would perform as the basis of an entire web application. Nevertheless, after seeing a short presentation that a co-worker had prepared for the JavaScript Leeds User Group last year, I was certainly keen to see more.

A lot has happened to me since then and I've spent much of that time working with JSF but I finally got around to installing Node onto my dev box. To get started you can start from scratch with some plain old Javascript such as the example on the node site:
var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World\n');
}).listen(1337, '');
console.log('Server running at');
This would be saved to a file such as server.js which can then be run with: 'node server.js'.

It's a little more productive to use one of the available frameworks to get going though. I did a little research and chose to use Express to get started.

Express can be downloaded via the Node Package Manager (npm). It's worth doing a global install, which can be done using the -g option:
sudo npm install -g express
Now that express is installed we can use it to generate the basic structure of our webapp (I use -c less here to enable support for LESS):
express -c less myapp
This creates a directory named 'myapp' that contains everything we need to get started. In that directory you'll see 'package.json' which should contain something similar to:
  "name": "application-name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node app.js"
  "dependencies": {
    "express": "3.4.0",
    "jade": "*",
    "less-middleware": "*"
Running 'npm install' from within the directory will then cause the Node Package Manager to download the specified dependencies to a sub folder called 'node_modules'. You can view the downloaded packages by running 'npm ls'.

There is also a file called 'app.js' which is similar to the basic example taken from the node website shown earlier. Run 'node app.js' to start the server running, you'll then be able to see the default page in your browser by going to localhost on the specified port.

Wednesday, March 06, 2013

Visualise your data with D3.js

Recently I've been learning about D3. It's a Javascript library which helps to visualise data. The web app that I'm working on logs usage data when a user performs particular actions.

I've put together a REST interface which returns all the actions for the last few weeks as an array of Javascript objects. Something a little like this:
{"id":111, "time":1362145523957, "userName":"perky", "activity":"change direction"}
Using this data I want to show how many of each activity has been done per day. D3 makes this really simple, the nest function allows me group the data on multiple keys:
var dateFormat = d3.time.format("%x"),
    nestedData = d3.nest()
    .key(function(d) { return d.activity; })
    .key(function(d) {return dateFormat(new Date(d.time));})
The nestedData is a tree in which I have a key value pair for each activity and the value is an array of key value pairs for each day in which there are activities of that type.

D3 also provides convenient ways to scale the generated output along each axis. In the SVG that is generated I set the interval along the X axis for each day ranging from the earliest to the last date in my data set. The resulting line graph and the code used to generate it are both available in this jsfiddle.

Mike Bostock, the creator of D3, has some really good examples of what D3 can do on

If you want to use D3 for producing graphs it may also be worth looking into NVD3 and Rickshaw which use D3 to but handle some of the hard work for you.