Working as a Trainee at Symbio – Infoscreen Coding
This was a fun project with a lot of independence. Also, I get to see the results every morning I come to work.
My name is Juha Rainto and I started as a trainee at Symbio in February. From July to August, I worked on building an info screen for our Oulu office building. The screen needed to have all the businesses in the building listed by floor, a ticker message editable by each company as well as a clock and weather data. The background was to be a live stream from Oulu market square.
A Bit of Software
The project began by researching the right platform to build the system upon. I was pointed to Ghost CMS, a blogging environment previously unknown to me. However, Ghost CMS seemed to fit the project perfectly. Two months and a little bit of elbow grease later this blogging platform is now greeting visitors to our office in Oulu.
The admin side of things is quite simple. In essence, each company has three attributes they can modify (their logo, color scheme and a short ticker message). The blogging pedigree of Ghost offered easy tools to manage different users with varying levels of control. The admin user of course has the most control; adding now companies to the building, overseeing existing ones and maintaining the site. The representatives of each company can be added as authors, whose rights are limited to editing only their own company’s info.
Getting Deeper Into Functionality
The front page—actual info screen—needed the most work. Since Ghost uses Handlebars as it’s templating language it was a pretty simple job to format the page and have Handlebars insert content where needed. Using Handlebars helper methods, you can use various if-else statements when loading the page. This will generate a static HTML page, and the first major task was updating the content on the page dynamically.
Ghost stores all its data into a SQLite3 database so my first instinct was to read the changes made to the database. This idea quickly became obsolete. When reading the Ghost documentation further I discovered Ghost Content API; A REST API that can be accessed to read all the content posted on your Ghost blog. Now the system uses a timed JavaScript function that reads the API using AJAX and compares the data displayed in the HTML to the database and make changes where necessary.
Smaller tasks included the clock and weather data shown at the bottom of the screen. The clock – well it’s a clock — uses JavaScript to read the system time. The weather data is read from an XML file fetched from the Norwegian Meteorologisk Institutt’s location forecast API. A ticker text was needed to automatically animate if it passed a certain character length. The animation is done with CSS3 and applied to a specific HTML class. This class gets applied to the text by a JavaScript function. This function is called once on page load for all text elements and after that only when changes are made.
Troubles and Shooting Them Down
The final and most arduous task was the stream of Oulu’s market square. Here I want to give a big shout out to my co-worker Topi Ruokamo who was instrumental in troubleshooting the RTSP stream. The RTSP steam needed to be converted to a web supported format. The stream was supposed to be in real time, but we only managed to get one frame from it and after a while the stream would crash. We tried different transport layers and settings, but nothing seemed to work. What was supposed to be quite simple task, turned into a real headache.
One day while working from home I was surprised to see the stream working as intended. Here’s an ode to remote work. Without it this problem would have taken a lot longer to recognize. It was a network issue where the office network didn’t allow us to connect to the stream, but our personal networks could. After this it was business as usual working the stream into the site.
Now that the site was fully operational on a Windows machine it was time to export it to the final hardware.
Tales From the Hardware
The project was originally intended to be run on a Raspberry Pi 4. Affordable, easy to install and readily available, the Raspberry Pi is already used to run information and advertisement screens all around the world. Our plans to use a Raspberry for this project first encountered a hiccup when the ticker text showed noticeable lag when animated across the screen. Add to that, the live stream and the website would at times drop to render at 5 fps. This might be my inability to squeeze every bit of power from the Raspberry or the Raspberry just lacked the oomph, as Jeremy Clarkson might put it. So, Raspberry had to go, and the project is currently running on an HP ProDesk 600 G3 Mini.
Final Thoughts
This was a fun project with a lot of independence. Being fairly new to Symbio and the industry in general — almost out of school — it was a very teaching project as well. Following the initial design documentation, making suggestions, and having feedback on those suggestions was wonderful. I’m very happy with the results — a feeling shared with the customer — and I get to see it every morning coming to work. Just hoping no error screens are waiting for me in the morning.
Juha Rainto
11.10.2022 | Articles
Symbio O2 Story
Symbio moves: Part 2 – Helsinki
