Website for Glasgow University Student Television

At university, I am heavily involved with student media, in particular the student television station GUST. Last year, I have served as Technical Coordinator on the station’s management team. Previously, I was webmaster (a position I have taken on again on a temporary basis now). I originally re-built the website over the summer of 2011 to practice web-development, learn about WordPress, and of course try to give the station a more modern image.

I have to admit, the design has aged a bit, but I like to think I have learned something from that process (my first foray into WordPress theme development). Back then, I did all the ground work of implementing custom post types (e.g. video episodes) and taxonomies (programmes, tagging crew members), and writing a script to import all content from the previous website.

Fast forward to 2013: This summer, I set out to do it all again. In consultation with the current GUST management team, I came up with a draft design (Photoshop), but quickly moved to HTML/CSS mockups based on the previous template’s html code. I re-used my previous template files, adding to and changing the markup to suit new requirements, but keeping the overall structure.

GUST Website Design Testing

This time around, I placed a lot of attention on responsive design, something made a lot easier by using the SASS CSS pre-processor. SASS also helped refine the colour scheme, since changes only required editing a single accent colour I then derived other colours from.

2013-09-05_2112

What have I learned this time? It is probably worth going through the extra trouble initially to use some form of semantic grid framework. My approach required adding some markup in weird places — which seemed to be fine for the static home page I did the initial design on, but quickly became a mess once I moved to the many different dynamically generated pages.

My most recent version of the GUST website theme.

My most recent version of the GUST website theme.

Now, the next big task will be to hand over the project to a new webmaster who will hopefully be elected at the beginning of term in a few weeks. I am also looking forward to training other members of the GUST team on using WordPress, formatting pages and blog posts, and updating content on the website for years to come. Maybe it is asking too much for the website to survive after my graduation, but one can hope — and make sure the next generation at least knows how to use it.

MapRemote — Control a Big Screen Map From Your Phone

MapRemote displays a map on your computer’s screen or projector, and on your mobile phone. You can drag and zoom the map on your phone and the big screen will follow any movements. You can also highlight a place by single-tapping the map on your mobile to place a marker.

Inspired by recent Websockets demos, Airplay and Chromecast, and my preference to avoid inserting screenshots from Google Maps into my Lightroom catalogue when showing holiday photos to my family, I came up with a relatively simple idea to implement this. I completed a functioning prototype as a weekend project (half a day on Saturday for a working prototype used for that evening’s slide show, and most of Sunday to improve the back-end logic, supporting multiple concurrent sessions, and deploying a demo to Heroku).

 

Without further ado, here’s the demo: MapRemote on Heroku.

Map Remote

Using the excellent socket.io library to abstract most of the back-end socket handling, it was a joy to develop this app in node.js. It seems to be perfectly suited for this event-based development, and being able to use the exact same API on the client side also helped. Add the node module hashids to generate obfuscated session names for pairing both screens, and voila!

Heroku does not actually support Websockets out of the box yet, but socket.io abstracts the transport layer away and falls back to a different transport implementation that seems to work just as well. Compared to running the app locally, it’s just that the initial connection to establish the socket takes much longer (evidenced by the long time until the “Loading” indicator disappears — I might have to put up a splash screen or something during that time). I have so far only run the app in Chrome on Windows and Android, but I don’t think there will be many problems running it on other modern browsers.

The main problem remaining is that Google insists on making POI markers clickable to show their own popup window. This sometimes trips up users trying to tap the map to place a marker.

This is a very simple, minimalist, first version. If I have some more spare time, I want to add more features, such as searching for place names, switching to satellite view, placing multiple markers or paths. One could also envision making this collaborative, with multiple controlling phones, each controlling a different colour marker, and the big screen adapting to fit each phone’s viewport and show an overview.

If you are interested in reading more about the technical part of the project, you can find mapremote repository on GitHub. The code is placed under the MIT license, so feel free to tinker with it. The repository should include all you need to run the app on your own machine or deploy it to heroku.

Amazon’s Glasgow Hackathon 2012

Amazon held their first UK Hackathon for students at our University this weekend 1. After being encouraged by our lecturers to attend this event, we actually turned up (I think we were the only second-year group there, competing against other undergraduates from Glasgow University, University of Strathclyde, and a team of PhD students).
Continue reading

Notes:

  1. This post was meant to be published in April, I just never got round to finish it. The event took place during the spring break, on March 30-31.

Arduino controlled 16 x 16 LED Matrix

Almost two years ago now I started planning and building a custom LED matrix to be controlled by my Arduino Duemilanove which sports an ATMega328 microprocessor. I used four Max7221 chips that I knew from a previous project and daisy-chained them to control the four 8×8 sections of my 16×16 matrix.

LED Matrix, Arduino

Arduino is an awesome rapid development and prototyping platform for learning to use and appreciate microcontrollers. Their boards contain a USB controller for power supply and programming from a PC, some status LEDs and pin sockets for interfacing to external hardware, all at a very affordable price. They have recently moved to the Arduino Uno (different USB controller, but still based on the ATMega 328) and version 1.0 of the software. Once I package my code as a library I’ll also check that it’s compatible with the new version.
Continue reading

Hello world!

The year is coming to a close and I’ve yet to make good on one of my new year’s resolutions: To finally do something to my website to free it from the limbo that is the eternal “coming soon” page that existed since I bought my domain name.

I often thought, “Hey, I should write that down” or “Hey, I could put this on my website”, and I experimented with quite a few more or less complicated, more or less home grown approaches to a website but never got around to something I could just use. I’ve been convinced to trust in the plugin-enhanced out-of-the-box power of WordPress after I hacked together the new Glasgow University Student Television website this summer. So, in stark contrast to what I did there, this shall be a simple way for me to publish content, without so much hacking, for now. So yes, once again I’ve joined yet another “Dark Side” (After Twitter, Facebook, et al) and set up yet another WordPress blog.

Now I hope I’ve finally arrived at a solution that I can just use. Maybe that will help in bringing me to actually use it, but I don’t promise anything.

Let’s go.