GUST 50: Behind the Scenes of a Re-Union Dinner

A look behind the Scenes

As University started back in September, and as I returned to Glasgow from my stay at home with the family, I soon got sucked back into the wonderful world of GUST. This post is an attempt to present what happened behind the screens of GUST’s 50th Anniversary event in October, and during the lead up to it in the planning phase beginning almost exactly a year prior to this. At the time, I was asked to be Webmaster for the project, with a very short brief (blog posts, photos, and promotional videos). Luckily, I decided to take on a bit more responsibility for shaping the event as it drew closer. Yes, there have been petty arguments, yes, there may have been a few tears, yes, the last two weeks were very stressful for all of us, but all this was worth it for an incredible event that could not have happened without everyone on the team chipping in with their very best, as they did.

Website

The Website had to support two main functions. Firstly, and likely most importantly to the project coordinators, we had to advertise the ticket sales, which were handled through a separate website, and provide all the crucial details for the event itself. Secondly, I wanted to build an engaging online exhibition mirroring the archive content that we had been collecting for a while now, and which was going to be displayed at the event in October. Finally, we wanted to introduce the GUST 50 team with photographs, short biographies, and contact details. Most of this I had previously (November 2013) built using a very slightly modified version of the WordPress default theme, TwentyThirteen, and a few plugins. While visually not very interesting, it fulfilled the main function of introducing the event as the project got started. However, as more and more custom functionality was required, and I started making up sketches for a complete redesign and the addition of the History section, I decided to build a completely new theme and design during the summer months 2014.

gust50-website

GUST 50 Website Homepage

For the new theme I went for a relatively minimalistic design based on the wonderful HTML 5 Boilerplate theme: This gave me a blank canvas with the file and PHP structure for a WordPress theme already in place. I built on this to support custom post types (history records) and custom page templates (homepage, contact page). The colour scheme was also kept simple, being mostly based around black text, white backgrounds, and the GUST 50 Gold/Yellow from the Logo becoming an additional accent colour. This later carried over into the print design, where an additional background-colour (magenta-red) was introduced to complement it. The site launched with much the same content as before but a new look when I returned to Glasgow in September, and I gradually extended it on the content side. More history records were added, and the History Graph was introduced, too.

history-graph-2

A still from the larger, randomised, version of the History Graph, as projected during the dinner

The History Graph is a D3.js based interactive network visualisation of the interlinked History Records, showing relationships between the items, and allowing users to playfully explore the rich content collected for the Archive Project. The D3 Force Layout was used to calculate node positions, these were then rendered as an SVG image, and HTML overlays were used to provide rich context information when a user selected a node by hovering over it with the mouse, or tapping it on a touch-based device. Eventually, the site mirrored almost exactly the content that was being collected for the offline exhibition at the same time, and I will continue working on this as we receive more submissions from alumni, or as we publish more archive video material.

Event Planning

As the Golden Anniversary event drew closer, in late September we all stepped up our efforts to make it the best night possible. Teams were working on decorations, financials, promotion of ticket sales, fundraising through separate events such as the Glasgow Showcase, Technical Equipment planning, and, with me, on the exhibition, pretty much non stop until the night before and even on the day. The technical team and many dedicated helpers worked long hours from Friday to Sunday, moving in and out the lighting equipment, exhibition materials, photo booth, and many other things.

On the night, we had two projector screens in the Dining Hall, which alternated between video playback for the introduction, speaker name cards and a placeholder image for the speeches, and a randomized version of the History Graph during dinner. I used VLC player, set to “repeat one”, with a playlist of the images and videos for this. A wireless keyboard with media keys controlled the playback, and could also be used to alt-tab into fullscreen Chrome which ran the History Graph.

GUST 50 Dinner

GUST 50 Decorations in the Dining Hall. Photo by Gavin Reynolds.

Print Design

I suggested controlling almost all the print design for the event, which included the Exhibition Posters, Tickets, Programmes, Dinner Menus, Seating Plan, Signage, Table Names, and even the name cards for Guests. This made sure the whole evening was branded and came off as one consistent event. The name card font, and the background image from the tickets, were used to create projection slides for the dinner, introducing our speakers. The colour scheme was coordinated with tickets, programmes, posters, table names, and seating plan all using the same style. We made use of archive photographs in black and white, and a few more recent colour photographs, to establish the far-reaching history of the station. For context, the tables were named after past and present GUST shows, with a paragraph about their history. The evening Programme, besides the event information, contained a few factoids about the station’s history, set along side older versions of the logo that were used at the time. The programmes were printed as a single-fold DL flyer on glossy 250gsm paper by print24. All other materials were printed at the SRC’s offices, on 160gsm light card for a feel much nicer than the regular copier paper. All print design work was done in Adobe InDesign CS6.

Exhibition

The History Exhibition was, in my opinion, going to be a key point of the event. It was meant to bring together GUSTies from all generations, exchanging stories, to stir up long lost memories, and provide a history of the station’s legend for the uninitiated. Ana Maria helped me a lot in selecting content, fitting everything into a coherent theme, and deciding on the best utilization of the available space, to give visitors a clear and sensible path through the exhibit.

GUST 50 Exhibition Area. Photo by Gavin Reynolds.

GUST 50 Exhibition Area. Photo by Gavin Reynolds.

A few poster boards and stands were hand-built from plywood by Arif and myself. Photographs were printed at a lab and glued to pre-printed frames with captions, and each board had a specific theme, which was established by its title card, designed similarly to the signage posters. These were complemented with a projected video loop, edited by Anna B., projected onto a white sheet covering a wall, a display of NaSTA award trophies dating back to 1973, a few additional boards full of smaller photos from all ages, and some old props and filming equipment. Old documents, such as annual reports, were printed off and distributed in the seating areas in the exhibition for interested readers. Some guests further contributed to the exhibition’s success, by returning a long thought lost award trophy, and some fact sheets about the technical equipment used in their time.

Photobooth

In the beginning, Anna GG suggested that we should have a photobooth. A bit sceptical, especially at the mentioning of silly hats and other wild ideas for props and a golden glitter curtain at the back, at first, I must say this has turned out to be another key engagement point for our guests, including myself, it was a lot of fun for them and our photographer volunteers alike, and the photos proved very popular on Facebook later, too.

On the technical side, Martin, Brendan, Arif, and I planned a large white back drop (to be covered in gold curtain), two speed-lites (430 EXII) with shoot-through umbrellas, radio triggers, a 5D Mark II on a tripod taking the pictures, and a laptop for tethering to the camera. The night before, we figured out this was not quite what was going to happen, due to trouble sourcing the speedlite holders for our umbrellas and the radio triggers. So in the end, we had one speedlite through the umbrella from camera right up, another bare speedlite as hair light from behind the subject, camera left, and the setup was triggered by a 580 EX on the 5D. Photos were captured to Brendan’s Macbook Pro directly into Lightroom. Its Second Screen was shown in fullscreen mode on a large TV we carried down from our office, to give our guests instant feedback on their photos. One thing we didn’t consider early enough was how many batteries the lights would end up using. Luckily, we had a large box of spare AAs at hand, but had we changed them earlier, we could have avoided many dark frames caused by the growing refresh times of our Speedlites as the batteries discharged.

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.

2014-11-01_2774

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.

2014-11-01_2780

Amazon’s Glasgow Hackathon 2012

Amazon held their first UK Hackathon for students at our University this weekend1)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.. 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).
Contine reading

References   [ + ]

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.
Contine 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.