Liquid Galaxy Presentation Tool
Hello, my name is Karine Pistili, I’m in the 4th year of the Computer Engineering degree at a college called FACENS (Sorocaba, Brazil). I collaborate with the Liquid Galaxy project for more than one year, doing different projects and getting to know the technology.
This year I was happily able to be one of the selected students to have the Google Summer of Code 2020 internship.
Liquid Galaxy is a wonderful tool to visualize data in an immersive way. There are multiple possible types of data that can be displayed besides Google Earth.
What if someone wants to create an immersive presentation, that combines those types of data with Google Earth?
The answer is to create a tool that gives the user an interface that is capable to create different sets of data configuration and send to be displayed on a Liquid Galaxy, and this is what my project is about.
The Presentation Tool consists of a front-end application that lets the user set different visual data configurations (slides) to each screen and a back-end that will receive the data, store it in a database and then parse it to be executed in the Liquid Galaxy.
Use cases
A person wants to present the photos of her/his last trip together with a tour on Earth of the places she/he visited
Liquid Galaxy needs to present historical information about a chosen monument. Earth orbiting the point. Videos, images and text showing information dynamically
Someone wants to create a presentation to show graphics and sales results of a company, show different videos, images and texts. A Liquid Galaxy can display many information at once, more screens, more space
A teacher wants to present a new subject to students in a more ludic way. He/she intends to use videos, images and audio to catch the students attention
A person has the objective of raising awareness about ecological disasters and wants to present the now and then of different forests with great impact
Technologies used
I created the frontend using a framework called Vue.js that basically combines Javascript, HTML and CSS to create a friendly and very powerful framework to develop user interfaces. On top of it I used a few libraries to configure and set up my building environment. For example I used a library called Vuex to manage all the states of the data in the interface and Vuetify to give me beautiful material design components, like cards and data tables for example. I also used Axios to make all the HTTP requests to my API.
On API side, I used Node.js as the base of the API and MongoDB to work as my database. As a presentation consists of multiple process running at the same time, I used a lot of Javascript promises to coordinate all executions and bash script to execute each wanted process on each liquid galaxy computer.
All the media displayed on Liquid Galaxy are triggered by bash scripts, but what actually makes a media show up in the screens are the media libraries. To open images I used an image viewer called FEH and for videos I used MPV. In the case of audio it’s played using FFPLAY. Alongside these libraries a few other codecs are important, such as ImageMagick that is the responsible of cropping the sharing screen images and a few other libs to support different formats. Another very import library used is called child_process, and it is the one that give access to Node.js api to use the shell.
A glimpse of the project
Visualization on Liquid Galaxy Home of the interface
Presentation details while executing Presentation creator
Visualization on Liquid Galaxy Visualization on Liquid Galaxy (vertical)
Learn more
If you feel like learning a little more about the project or even contribute with it after the end of GSOC 2020, take a look at the official repository and also to the links down below.
Repository on GitHub: https://github.com/LiquidGalaxyLAB/Presentation-Tool.git
Project proposal: https://docs.google.com/document/d/1oUBlgD03vjnLz5PQ_aFcPiLGQFUNZz7mIpNwcRNiE68/edit?usp=sharing
Project on Google Summer of Code 2020 website: https://summerofcode.withgoogle.com/projects/#4862341352521728