Skip to content

Installation

Jump to bottom
KarinePistili edited this page Aug 24, 2020 · 5 revisions

How to install

This page will guide you during the installation of the API and the user interface. All requisites noted bellow are very important, make sure to have all of them in the latest long term version, we can not guarantee that the software will run properly if you don't have the requirements correctly installed.

API

To properly install the API it is very important to follow all the steps and to make sure all the required software is properly installed before testing anything on the API.

Pre requisites

1. Install a Liquid Galaxy

This project needs a Liquid Galaxy instance, make sure it's correctly installed before starting. Get the source code here.

2. Install MongoDB

INSTALL ON MASTER ONLY

All presentations configuration objects are stored in a MongoDB database. Download and install MongoDB Community by following the steps below of by checking out the official documentation here.

  • Import the public key used by the package management system
wget -qO - https://www.mongodb.org/static/pgp/server-4.4.asc | sudo apt-key add -
  • Create a list file for MongoDB
echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu xenial/mongodb-org/4.4 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-4.4.list
  • Reload local package database
sudo apt update
  • Install the MongoDB packages
sudo apt-get install -y mongodb-org
  • Start MongoDB
sudo service mongod start
  • Begin using mongo to check if installation went ok
mongo

3. Install Nodejs and NPM

INSTALL ON MASTER ONLY

The API code was done using Nodejs, to have a running server download and install Nodejs by following the commands below or by checking out the official documentation here

  • Install Node.js from apt
sudo apt install nodejs
  • Update Node.js version
sudo npm cache clean -f
sudo npm install -g n
sudo n stable

Use the step bellow to install NPM or check out the documentation here.

  • Install npm
sudo apt install npm

4. Install Nodemon

INSTALL ON MASTER ONLY

To help with debugging and to see all logs while the API is running install Nodemon.

  • Run on the terminal
sudo npm install -g nodemon

5. Install feh and mpv

INSTALL ON ALL MACHINES

You can install feh by running sudo apt install feh on the terminal or by following the steps on the official documentation.

MPV can be installed by following the steps on the official installation guide or by using the commands below.

  • Add PPA
sudo add-apt-repository ppa:mc3man/mpv-tests
  • Update the package manager
sudo apt update
  • Install the program
sudo apt install mpv

6. Install image formats libraries

INSTALL ON ALL MACHINES

Use the commands above to install a few required libraries to work with feh and image magick

sudo apt install libx11-dev
sudo apt install libjpeg-dev
sudo apt install libtiff-dev
sudo apt install libexif-dev
sudo apt install libxext-dev

7. Install FFPLAY

FFPLAY is used to play audio. Intall it by using the command below or by looking at the official documentation here

sudo apt install ffplay

8. Install Image Magick

INSTALL ON MASTER ONLY

To install Image Magick you can refer to the official documentation or follow the guide below.

  • Configure environment
sudo apt update 
sudo apt install build-essential
  • Download source files (NOTE: if the version updates just change the numbers of the package for the version you download)
wget https://www.imagemagick.org/download/ImageMagick.tar.gz
tar xvzf ImageMagick.tar.gz
$ cd ImageMagick-7.0.8-26/
  • Compile and configure
./configure
make
sudo make install
sudo ldconfig /usr/local/lib
  • Verify if it was correctly installed
identify -version

Make sure to have already installed all libraries mentioned above or Image Magick won't execute properly

Clone the repository

Clone the project repository on the master machine either by downloading or by running: git clone https://github.com/LiquidGalaxyLAB/Presentation-Tool.git on the terminal

Install

  1. Go to the Presentation-Tool/backend directory

  2. Inside the /backend folder open a terminal window and run npm install to install all project dependencies on the computer

Configure environments variables

IMPORTANT: The environments variables are very important for the functionality of the API. If any changes were made in the computer, either renamed/moved directories or change of IP addresses and ports, make sure to ALWAYS update you .env file with the new configuration, as it won't be updated by its own.

  1. Inside the Presentation-Tool/backend directory create a file called .env

  2. Copy paste the text below into the file you have just created

PORT=5000
FILE_PATH=/home/lg/Presentation-Tool/backend
SLAVE_STORAGE=/home/lg/storage
HOME=/home/lg

  1. If you have cloned the repository on a different location, update the FILE_PATH variable with the current project location

  2. The PORT is where the API server will be running, if you want to change to a different port, feel free to do it

  3. The SLAVE_STORAGE is the folder that will have to be created on each slave to store the presentations' media

  4. The HOME var is the master home directory

Open port 5000

We have to open port 5000 on the master machine so the API can be able to connect with other computers in the network

How to open a TCP port for 5000:

  1. Using a terminal navigate to /etc

  2. Edit the the iptables.conf file

  3. On the line that contains -A INPUT -p tcp -m multiport --dports 81,8111,8112 -j ACCEPT

  4. add the port 5000

  5. It will have to look like that for example -A INPUT -p tcp -m multiport --dports 81,8111,8112,5000 -j ACCEPT

  6. The order of the ports doesn't matter

  7. Save the file and reboot the computer

Configure the storage

All data used in the project are stored locally, including all the media used on the presentations. Because of that it is very mandatory to set up the all the storage place where the media will be located

  1. Inside the Presentation-Tool/backend directory create a folde called storage. Don't change the name of this folder, it won't work if you use a different name

  2. Go inside the Presentation-Tool/backend/storage directory and create a folder called all. Just like the one from above, don't change the name or it won't work

  3. Now go on and enter on each slave and create a folder called storage in the /home/lg directory. NOTE: this has to be the same directory you've chosen on the creation of the SLAVE_STORAGE variable

If any of these steps weren't properly followed you won't be able to store any media on the Liquid Galaxy

Download and configure the demo

  1. Download the zip file located here

  2. Copy the download file to the Presentation-Tool/backend/utils directory.

Run the server

To run the serve navigate to Presentation-Tool/backend/ and run nodemon server.js. If everything went well you will see logs telling you have the API running on the port you chose (or 5000 if you went with the default) and that it is connected with the database.

Your API will be running on [masterip]:[port].

User interface

To properly install the frontend is very important to follow all the steps and to make sure all the required software is correctly installed and working, including the API.

Choose where the project will be running

As you should already have the repository cloned in the master machine, now you can choose between running its server on the master machine or copying the frontend folder to another computer and run the server there.

Using in another computer

Pre requisites

The following programs have to be installed in your computer:

You will also need the Vue CLI. Install it by using the command below or by following the official docs

sudo npm install -g @vue/cli

Install

  1. Copy the whole /frontend directory from the project repository to the other computer
  2. With a terminal openned, navigate to where you stored the frontend and them to /frontend/presentation-tool
  3. Inside /presentation-tool directory run npm install to install all the project dependencies in your computer

Configure the environment variables

IMPORTANT: The environments variables are very important for the functionality of the User interface. If any changes were made in the computer, either renamed/moved directories or change of IP addresses and ports, make sure to ALWAYS update you .env file with the new configuration, as it won't be updated by its own.

Create the environment variables needed for the project to connect the interface with the API that is running on the Liquid Galaxy

  1. Still on the /frontend/presentation-tool directory, create a file with the name .env
  2. Copy paste the text below on the file you have just created
    VUE_APP_LG_IP=put the liquid galaxy ip address here
    
    VUE_APP_LG_PORT=put the port that the api is running on
  1. Substitute the text after the equal sign with the IP of the Liquid Galaxy master machine and with the port where the API is running (5000 if you used the suggested one on the backend)

Run the app

  1. Run the app by running npm run serve -- --port 8080 on the terminal inside /frontend/presentation-tool directory

  2. Your app will be running on localhost:8080

Running on the master machine

Pre requisites

No pre requisites are needed to be installed in this case, as the master machine already has Nodejs and NPM installed due to the API installation.

Install

  1. With a terminal openned, navigate to where you stored the project and them to Presentation-Tool/frontend/presentation-tool
  2. Inside /presentation-tool directory run npm install to install all the project dependencies in the master computer

Configure the environment variables

IMPORTANT: The environments variables are very important for the functionality of the User interface. If any changes were made in the computer, either renamed/moved directories or change of IP addresses and ports, make sure to ALWAYS update you .env file with the new configuration, as it won't be updated by its own.

Create the environment variables needed for the project to connect the interface with the API that is running on the Liquid Galaxy

  1. Still on the Presentation-Tool/frontend/presentation-tool directory, create a file with the name .env
  2. Copy paste the text below on the file you have just created
    VUE_APP_LG_IP=put the liquid galaxy ip address here
    
    VUE_APP_LG_PORT=put the port that the api is running on
  1. Substitute the text after the equal sign with the IP of the Liquid Galaxy master machine and with the port where the API is running (5000 if you used the suggested one on the backend)

Open port 8080

With the frontend server running on the master machine you will want to access it from another device (computer/tablet/cellphone).

The server will be running on port 8080 and to be possible to access it from the outside you need to open a a TCP port for 8080.

How to open the 8080 port:

  1. Using a terminal navigate to /etc
  2. Edit the the iptables.conf file
  3. On the line that contains -A INPUT -p tcp -m multiport --dports 81,8111,8112 -j ACCEPT
  4. add the port 8080
  5. It will have to look like that for example -A INPUT -p tcp -m multiport --dports 81,8111,8112,5000,8080 -j ACCEPT
  6. The order of the ports doesn't matter
  7. Save the file and reboot the computer

Run the app

  1. Run the app by running npm run serve -- --port 8080 on the terminal inside Presentation-Tool/frontend/presentation-tool directory

  2. Your app will be running on [masterIP]:8080 and can be accessed by any computer connected in the same network

Clone this wiki locally