AlbertaLoop GUI

How to use

How to start GUI

Install pyqt5 on your computer. For example for mac, simply run brew install pyqt5
Navigate to the directory containing this README and run python3 main.py
To exit out, press Ctrl+C
To launch the GUI with the fake telemetry connection, use the included shell script. sh startGUIWithTelemetry.sh 127.0.0.1 8000 where 127.0.0.1 is your localhost IP and port refers to an open port on your computer. Feel free to change these numbers if they don't work for you. Moreover, this shell script has been tested on Mac. If it doesn't work on your system, feel free to make a new script and please push that to the repo so others can use it as well.

How to edit GUI

If you intend to edit a UI using QTDesigner, download the .ui version of it from github, open it on QTDesigner, edit, and submit a pull request for both the .ui and .py versions.

If you are just editing non-UI methods, do not alter the .ui file and class Ui_MainWindow in the .py version unless changes were made in those locations.

The GUI's user interface was built using QT Designer. Therefore, to edit the UI, you will also need to download the QT Designer. You can find a lightweight QT designer program at (https://build-system.fman.io/qt-designer-download), which doesn't include the gigabytes of unnecessary stuff you get with the regular QTCreator installation.
Then use QT Designer tp open the AlbertaLoop_UI.ui file, and make whatever edits you want
After making the edits, run the command pyuic5 -x AlbertaLoop_UI.ui -o AlbertaLoop_UI.py to auto generate the corresponding python file for the UI.

GUI Directory

We will be trying to match the convention provided in the Mastering GUI book as much as possible. Feel free to add to this list by making a pull request so other team members can review the change.

File names will follow a lowercase underscores naming convention. For ex. "main_window.py"
To remain consistent with the Mastering GUI book, variable names will also follow lowercase underscore naming convention. For ex. health_panel = ...
To remain consistent with the Mastering GUI book, method names will follow a camel case naming convention. For ex. doSomething()...
Class names will follow a pascal case convention. ex. SomeClass
Constants will use an all caps underscore naming convention. ex. SPEED_OF_LIGHT = 3E8

Coding Notes

04/29/2020: Basic features of Front end of this second GUI complete

This GUI was written in PyQT using QT Editor in Python and QtQuick2 in C++ with QML libraries. This is only the concept and functionalities are to be added in later.

IF you are openning the code in VSCode, right click ui.py and hit Run Current File in Python Interactive Window otherwise the QML widget will not show

11/18/2022: Debugging notes when messing with TelemetryModel and its sockets or both

Not so often you might notice socket error messages, something like

Traceback (most recent call last):
  File "/home/test/Desktop/Projects/T_SWE_2022_2023/GUI/main2.py", line 194, in <module>
    TelemetryReceiver = TelemetryReceiver(args.server_ip, args.server_port)
  File "/home/test/Desktop/Projects/T_SWE_2022_2023/GUI/TelemetryReceiver.py", line 11, in __init__
    self.socket.bind((host, 8000))
OSError: [Errno 98] Address already in use

This often occurs when another instance of your code is running in the background. You resolve this issue by nuking all of this processes by using a shell script. Try sh killPythonSessions.sh

Features

July 7th, 2020

A major functionality update was done to the GUI. Now, ALL logic/functionality code will go under ui.py and only front end changes will be altered on the AlbertaLoop_UI.ui using QT Designer

This means that if more features are added to the front end of the GUI, the resulting .ui file can be converted to .py and adding widgets and functions is not to be dealt with anymore as that is all in the ui.py file.

Functionality Changes

As a test, now when something is written into the command line of the GUI and the button is pressed, text is returned to the console. Typing 'exit' and pressing the button exits the program completely.

April 29, 2020

GUI was made in a dark mode in contrast with the first GUI Moreover, the higher contrast and tri-division design allows ease of access and usage.

Main window

The first panel on the left shows a dynamic speed gauge written in QML through QtQuick2 with files under /img as its components. Position, time elapsed, and a progress bar are present.

Second panel contains the Info Panel which displays a tabWidget that shows information about temperature, voltage, and other instrumental data.

Second tab of the tabWidget contains a list of phases. As a demo, all the colours are shown but during implementation, only the colour of the active LCM phase will be displayed while the other stay grey

Tab 3 contains packet logger information with several buttons that do not have current functionality. A Seperate Window button has been added so another window will pop up displaying the packet information at a more comfortable view. This functionality has not been added yet.

GUI Variable Names

So far, the only variables are the GUI element variables. _Anything named self.'...'_label represents titles/labels on the GUI. Variables named self.'...'_ind or self.'...' are values/text that will be dynamically changed

Fixes/Actions Needed

July 7th, 2020: Add the telemetry module stuff in for simulation

albertaloop / GUI

readme