SAISA is the regional athletic conference that includes many international schools from across the South Asian region. Each tournament is hosted at one of the SAISA schools and the other teams travel to the host school to participate. During the first season of SAISA, The Overseas School of Colombo was selected to host the SAISA Girls Volleyball tournament. Although I haven’t participated in any SAISA athletic tournaments, I have been a part of the tech crew for almost every SAISA tournament that was hosted at OSC in the last few years. Since the inception of Gecko Network, the group’s responsibilities have included working on the technical resources of SAISA tournaments, which include the website, livestreams, photography and videography. In previous tournaments, I worked on videography and mainly focused on the website. I also introduced live scores onto the tournament website in the last tournaments, which was a first in the SAISA league.

For this year, my main goal for SAISA volleyball was to build on previous achievements and take things to the next level. As leader, I was also faced with the new challenge of training and managing the rest of the tech crew. Although building websites, making videos and doing other technical work are skills that I have practiced and am well versed in, since this work is done primarily individually, I don’t have much experience managing and training people. Nevertheless working all of the technical aspects of a SAISA tournament cannot be done without collaboration. As such, leading the tech crew of SAISA Girls Volleyball gave me the perfect opportunity to practice my existing skills in technology, while building up the new skill of management and leadership. This blog post will outline the different aspects of my involvement in SAISA Girls Volleyball 2019 and the challenges faced, and skills obtained in each aspect.

The Website

The website is an important organizational element of any SAISA tournament as it serves as the hub for all tournament information. Last year, I spent a lot of time designing the front end of the SAISA website for the Girls football tournament. I used the frontend javascript framework  called Angular.Js  to build the frontend of the website. This made my life easier this year, as I only had to tweak a few things this time around. I changed the UI elements from the football theme to suit the volleyball tournament, and updated the content on the website.

When it came to the back end of the website, I updated most of the code and the database structure in order to better suit the game, and tournament structure of volleyball. I built last year’s backend as a REST API using the Java Spring Framework and connected it to a MySQL Database. The backend wasn’t too complex for SAISA Football since the scoring within the game is not too complex. This time around, the database structure was a bit more complex since Volleyball has scoring elements like sets that make things a bit difficult. I also made the backend a bit smarter, in the sense that it could automatically process the winner of any given game and automatically tally it to the points system to track each team’s progress. The backend primarily served the main frontend of the website with score data and media gallery data. Most of the changes to the backend came due to the new admin dashboard that I developed for this tournament. The website functioned perfectly over the course of the tournament, and received over 1200 unique users and over 5000 page visits during the three day tournament. You can visit the website at http://osc.lk/saisa

Admin Dashboard

One major limitation of the last few SAISA websites I created was the lack of an easy interface to add and update information on the website. This meant that I had to manually update the score data and other information on the database, which is a major inconvenience since, due to security reasons only I could update any information on the website. I took the first steps to solve this problem during SAISA Girls Football 2018, when I built a lightweight Android application to update the scores on the website. The Android app worked well during the tournament, but the app was limited in its functionality and the user experience wasn’t very good. Furthermore, since the app was built natively on Android, only Android users could use the application.

This year, I wanted to solve all of these problems with a web based admin dashboard accessible to any Tech Crew member. The admin dashboard had two primary functions, to update score data and gallery data on the website. Since this was a new addition to the SAISA website stack, I had to design a lot of new code on the backend and I also had to engineer the frontend of the dashboard from the ground up.

I started off by building a basic login form that would talk to the backend and only let authorized users proceed to the admin dashboard. This security measure is important since the admin dashboard is directly connected to the backend that serves all of the data to the main SAISA website. Thereafter, I moved on to work on the more novel aspects of the project.

The aspect of updating the gallery data was easy enough, with a simple form in the front end containing inputs for data about the pictures like a URL, name and a thumbnail. This data is then sent to the backend via the API and stored on the database. The more difficult aspect of this admin dashboard project was the scoring element.

My goal was to make the front end as easy to use as possible, in order to ensure that anyone on the event crew can update scores with minimal training. As such, I made the front end very minimal as seen in the image below. The user begins by selecting the game, he wishes to score, from a drop down list of fixtures that are served by the back end API. On the back end, this selection changes the status of the game from a fixture to a live game, and creates a new scoring session for this user. In case the user is logged out of the system, the session data will be used to redirect the user back to scoring this game.

The scoring page itself has 3 main elements. The most important one being the plus and minus buttons that allow the user to easily add points and remove points in case they made a mistake. These buttons are mapped to their respective teams and it’s scoring function so that the back end can receive the team name and then add or subtract a point and store the updated score on the database. The next element in the scoring page is a simple table at the top of the page that displays the current scores. The score data on the table is obtained from the backend and is updated after every user interaction with the website. Since the winner of each game is decided through a best of three set structure, I also had to add two buttons at the bottom of the page. The first was an end set button. A press of this button would calculate the winner of the current set and activate the next set. The end game button would activate a function on the back end that calculates the winner of the game based on the number of sets won by each team, ends the scoring session and updates the team standings.

I completed the admin dashboard over the course of a weekend. Although most of the programming was done using my preexisting technical knowledge, I learnt a lot about developing systems that exchange and manipulate highly dynamic data. Furthermore, building this new dashboard and integrating it to the existing SAISA backend helped me develop my programmatical thinking and design skills.

Livestreams

As mentioned above, the participating teams travel from their schools to the country hosting the tournament. In order to give parents and other school community members the opportunity to watch the games live and follow the tournament, all SAISA tournament are live streamed by the host schools. The live stream is usually handled completely by the OSC tech team under our tech director Mr. Fisher’s guidance. However, for girls volleyball, GeckoNet and the SAISA tech crew were asked to help out with the live stream. We had to essentially, man a few cameras and track the ball during the games.

In addition to this, I also managed to embed scores onto the stream. In previous years, the live stream didn’t include an embedded scoreboard, meaning that viewers couldn’t really make sense of the ongoing action. We had identified this as a major weakness in the stream, and were trying to figure out a solution. My goal was to figure out a way to embed a scoreboard that would fetch its data from the website’s backend that is updated through the admin dashboard. Since I didn’t know much about the stream I had to do a bit of research on the topic, but in the end I came up with an elegant solution.

I learnt that the streaming software we were using, OBS Studio, could embed a web page onto the stream. I fiddled a bit with OBS and tested the feature before working on the solution. Basically, I built two web based scoreboards that would display the score data from the live games on court A and B in real time. I quickly added a function to the backend that would return the score data for teams A and B, and then designed two dynamic web pages containing the scoreboards. The web based scoreboards would update the team names, logos and of course scores in real time. After hosting the webpages, I tested out the scoreboard with OBS and a camera and it worked like magic.

There was no latency between updating the scores on the admin dashboard and seeing the changes on the live stream. Moreover, during the tournament, the scoreboard updated itself soon after the point ended. The live stream functioned flawlessly throughout the tournament and we received a lot of praise from the participating teams for the quality of both the live stream and the addition of a scoreboard for the first time in any SAISA lives stream. Below is the live stream of the championship game on the last day of the tournament.

Training

With the implementation of a new system in any organization comes the requirement for training, and as the leader of GeckoNet I had to make sure that everyone on the team would be able to contribute and keep everything running smoothly. This training is not only important because of the implementation of a new system, but also because my team for this tournament is comprised of primarily younger students from middle school.

Although training some students to use an admin dashboard to update scores in a volleyball tournament may seem daunting, the training stage wasn’t too difficult because I took the time to make the dashboard very simple and intuitive to use. I managed to show everyone the basic features of the dashboard and get everyone quite comfortable with keeping score within a lunch time training session. Training people to do anything is a new skill that I acquired over the course of my involvement in this SAISA tournament.

Management

Given the huge workload over the course of the event, I knew that collaboration would be vital for our success. However, successful collaboration relies on good leadership and management. Although I haven’t really managed a team before, as the leader of the tech crew I had to develop this skill and use it over the course of the tournament.

My job was to allocate people to all of the jobs throughout the day. I needed to have 6 people working at all times: 2 on photography, 2 on the live streams and 2 on scoring. Initially, I created an elaborate time table to manage the staff between these jobs. However, the time table quickly fell apart as it didn’t take into account variables like the times some students had to attend classes. Therefore, after a few hours I adjusted my management strategy. I just made sure that I had capable individuals working at every posting. I then switched people around and made sure that everyone got enough breaks during the day. Managing some of the younger kids and getting them to work was a bit challenging at times, but overall everyone contributed and I managed to get us through the three days.

Photography

Taking good pictures of the action on court is also one of the tech crew’s important responsibilities. The pictures we take eventually end up on a variety of places from social media profiles to CAS blogs very much like this one. Since many of the tech crew members were quite inexperienced in the realms of photography, pictures were taken in auto mode. I had a camera on each court and the pictures were processed after each game.

I taught ShoJi, a 7th grade GeckoNet member, how to edit photos on Lightroom on the first day of the tournament and he did the processing thereafter. When a game finished the photographer would hand over the SD card to ShoJi and obtain an empty card for photographing the next game. ShoJi would then import the photos into Lightroom, edit them, watermark them and then export them to the GeckoNet hard drive and the GeckoNet Google drive account. He did this throughout the tournament and I uploaded the pictures onto the website through the admin dashboard every few hours. We did this for all games throughout the tournament and had uploaded a few thousand photographs by the end of the closing ceremony. You can see all of the pictures from the tournament on the SAISA website at http://osc.lk/saisa/#!/gallery

Videography

The last but not the least aspect of our involvement with the SAISA Girls Volleyball tournament was videography. During every SAISA tournament, GeckoNet collects footage of the action. This footage is used to create a tournament highlight video that is displayed at the closing ceremony. The footage is also added to GeckoNet’s database of rare content for use in future projects. Since the videography aspect has to come together as a polished video by the end of the tournament, I created a team to handle it throughout the event.

This group were all GeckoNet members, who knew a thing or two about the equipment, videography and video editing. As such, they did all of the planning and recording by themselves over the course of the tournament. When it came to the final video, I gave them some creative guidance while they were editing on the final day of the tournament. The final video received a lot of praise at the closing ceremony and in my opinion is one of the best SAISA video GeckoNet has put together in the last few years. You can watch the full video below

Conclusion

My involvement in the SAISA Girls Volleyball tournament took quite a lot of time and hard work during the three day tournament and the weeks leading up to it. Nevertheless, this experience improved my technical knowledge and also developed me into a better leader.