ShakeitUI

Table of Contents

1. About the Project
2. Getting Started
   • Prerequisites
   • Installation
   • Running
3. Usage Notes
   • Overview of Class Relations
   • Using QtDesigner

About the Project

This project contains the UI for the shakeit component. It uses KeyRock for authentication of users.

Getting Started

To get a local copy up and running follow these steps.

Prerequisites

• Docker

  • Windows: Installing docker desktop on windows

• npm and node.js

  • Windows:

    npm install -g npm

  • Linux:

    sudo apt install nodejs npm

• pyqt5

  • Windows:

    pip install pyqt5

  • Linux:

    sudo apt install python3-pyqt5

• qtvirtualkeyboard for pyqt5

  • follow the steps described in the answer here: https://stackoverflow.com/questions/62473386/pyqt5-show-virtual-keyboard

• Python requests

  • Windows:

    pip install requests

  • Linux:

    sudo apt-get install python3-requests

Installation

Before installation of this project KeyRock should be set up. To do so follow the steps below.

1. Clone KeyRock Proxy repository:

   git clone https://github.com/ging/fiware-idm.git

2. Duplicate config.template in config.js:

   cp config.js.template config.js

3. Configure data base access credentials:

   config.database = {
       host: 'localhost', // default: 'localhost'
       password: 'idm', // default: 'idm'
       username: 'root', // default: 'root'
       database: 'idm', // default: 'idm'
       dialect: 'mysql' // default: 'mysql'
   };

4. Configure the server to listen HTTPS requests by generating certificates OpenSSL. You may be asked to enter information that will be incorporated into your certificate request (mostly happens for linux users). If this happens make sure to fill out at least one of the fields, if you dont the request wont go through.

   ./generate_openssl_keys.sh

   and configuring config.js:

   config.https = {
       enabled: true, //default: 'false'
       cert_file: 'certs/idm-2018-cert.pem',
       key_file: 'certs/idm-2018-key.pem',
       port: 443
   };

5. Navigate to extras/docker directory and copy the Dockerfile into the root. Then replace the whole RUN statement on line 69-86 with the following COPY statement:

   COPY . /opt/fiware-idm

6. Navigate to extras/docker directory and copy the docker-compose.yml file into the root. Remove the mailer (line 27-29 and 61-74) and add the following two lines under enviroment for the keyrock service. After this keyrock is ready.

         - IDM_HTTPS_ENABLED=true
         - IDM_HTTPS_PORT=443
   

7. Lastly clone this repository.

   git clone https://github.com/SHOP4CF/shakeitUI.git

You should now have 2 repositories set up: "fiware-idm" and "shakeitUI".

Running

1. Start KeyRock container using the dockercompose file (in the fiware-idm)

   docker-compose up

   Go to localhost:3000 to see the KeyRock site running.

2. The first time the code is run an application should be generated in KeyRock. To do this run the file generateApplication.py (in shakeitUI). This should modify applicationInfo.json. This step only needs to be done before the first time Main.py is run, and this step can therefore be skipped the subsequent times.

   python generateApplication.py

3. Run Main.py (in the shakeitUI)

   python Main.py

To login to the application use the following credentials:

Username: [email protected]

Password: 1234

Usage Notes

Overview of Class Relations

UI files are excluded from this diagram. The UI files is only used by the matching python file, fx: Interation.py -> InteractionUI.py

Using QtDesigner

The projects visual component is designed and set up using QtDesigner. If it is desired to make changes to the visual of the UI, it is recommended to use QtDesigner. QtDesigner comes with most installtions of pyqt5.

If you are using Linux and QtDesigner is not installed it can be installed by using the following command.

sudo apt install qttools5-dev-tools 

The file MainUI.ui in this project is a qt file, and can be opened in QtDesigner. Use QtDesigner to open the file and make changes to it. Before changes from this file can be seen in the code a python file should be genereated based on the changed MainUI.ui. Run the following command in the directory where MainUI.ui is located to do so:

python -m PyQt5.uic.pyuic -x MainUI.ui -o MainUI.py

This command overwrites the old MainUI.py, so as a general rule changes should not be made to MainUI.py. Instead visual changes should be made by QtDesigner and functunality should be in Main.py.

This rule also counts for the other .ui files. The same command also works for them:

python -m PyQt5.uic.pyuic -x InteractionUI.ui -o InteractionUI.py

python -m PyQt5.uic.pyuic -x ExitDialogUI.ui -o ExitDialogUI.py

python -m PyQt5.uic.pyuic -x TimesUpDialogUI.ui -o TimesUpDialogUI.py

python -m PyQt5.uic.pyuic -x InfoDialogUI.ui -o InfoDialogUI.py