In my post on flexible working in June 2017 I mentioned work I’d done for Harlaw Hydro. This community-based, crowd-funded hydro electric scheme has a small generator installed at the outflow of Harlaw Reservoir near Balerno, Scotland.
I was involved in the development of the Harlaw Hydro website used to raise awareness of, and funds for, the project.
With the pump in place, they were keen to display the power being generated.Project team
This project required a blend of design and programming so I decided to work in tandem with Steve Greenslade at Web-Tastic. I’ve known Steve for many years and have worked with him on a number of projects.
Steve is a software engineer by trade so was responsible for collating the information from the generator. This was stored in a database and connected to the website. I took on responsibility for the design and build of the front end interface.
Displaying the data
There were two key decisions to make in terms of the power meter:
- What information to show
- How to display it within a WordPress-based website
We decided to code the meter using PHP. It is a programming language that we have a lot of experience using and , being open source, is also free. The language allows dynamic information to be loaded onto a page from a MySQL database, so that is the type we chose to store the pump data.
We set up three different displays for use:
- Television (to display the information on a wall-mounted display in the visitor centre at Harlaw Reservoir)
The desktop and mobile versions were embedded on a webpage using iframes. CSS classes and media queries were used to display the relevant iframe based on display size.
All three display versions were hosted on a section of the web server separate to the main WordPress directory.
We decided to incorporate a blend of live and legacy data in the display. The data is set to refresh every five minutes.
The first section of data states the current power being generated in kilowatts (kW) and indicates how many houses can be powered with that energy. This is shown using text and is represented with a range of numbered houses.
The next section shows a range of data relating to the turbine, reservoir and power generation levels in three separate boxes.
The meter features a range of charts detailing power generation and reservoir levels over the periods of 24 hrs, seven days and a year. We used HighCharts to display the data pulled from the database.
This online resource offers a wide range of chart styles and customisation options and allows users to interact with the data similar to the way they can in Google Data Studio.
Desktop users of the power meter have the option of downloading 24 hrs worth of data as a CSV file. Those wanting additional data can request it via an email link.
Steve is based in Reading, England and I live in Airdrie, Scotland. Because of this we took the opportunity to experiment with cloud-based tools that would allow us to collaborate online.
Asana is a cloud-based task management tool that I started using for my awdesign and Edinburgh Napier work around the time of this project. I previously relied on a mix of paper-based lists and native iPhone apps, including notes and reminders, but found these inefficient.
We set up a team on Asana which allowed for:
- Team conversations
- Task creation
- Task assignment.
Using this allowed us to systematically identify each requirement for the meter and any task dependencies (tasks that were reliant on others being completed).
Codeanywhere is a coding tool accessible via a web browser. It supports a wide range of programming languages, including PHP.
We were able to commit changes and upload files to the web server using Git commands. This functionality allowed us to properly log changes as the project proceeded.
The project was a success and was delivered to time and budget. The tools used allowed for a seamless workflow despite great distance between us.
I found the project challenging but enjoyable, and have benefited greatly from the skills developed during it. I continue to use Asana daily to manage work tasks and used Codeanywhere to build the Facebook voting app for Edinburgh Napier’s Destination Edinburgh campaign.
If repeating the project now I would:
- Continue to use Asana for task management
- Continue to use Codeanywhere for the coding elements of the interface
- Use Slack for communicating rather than email
- Investigate using Google Data Studio as an alternative reporting interface.
Make your stats work for you
Want to see how people are using your site or tips on getting the best from your data? Get in touch to find out more about:
- Google Analytics
- Google Data Studio
- Google Tag Manager