Create graphs for displaying debug information

[steph1111]

Task summary

The PyQt project provides Python bindings for C++'s Qt graphical user interface (gui) creator. The dashboard (on the dashboard branch) is being created using PyQt. Its purpose is to provide the pilot and copilot with a visual interface for controlling and monitoring the robot. The dashboard contains multiple tabs, one of which is the debug tab. Here we want to display data relevant to debugging the state of the robot. On seahawk_rov, the debug_node publishes information about the Pi to the \debug_info topic. The Debug message includes the cpu usage, memory_usage, cpu temperature, net bytes sent, and net bytes received. These values should be plotted on a dynamic plot on the debug tab using PyQt graph. Start by creating an independent widget which can dynamically update upon function call like the one in this article PyQt graph. For now do not worry about integrating it with ROS or the dashboard.

Getting started

Installing packages

# PyQt
pip3 install PyQt5

# pyqtgraph
pip3 install pyqtgraph

Git stuff

# Talk to steph to make sure the current version actually works first
git checkout dashboard
git pull origin dashboard
git checkout -b dynamic-plot

Starter code

# dynamic_plot.py
from PyQt5 import QtWidgets as qtw
from PyQt5 import QtCore as qtc
import pyqtgraph as pg

from seahawk_deck.dash_styling.color_palette import DARK_MODE
COLOR_CONSTS = DARK_MODE

class DynamicPlot(qtw.QWidget):
    """
    Creates a 'DynamicPlot' which inherits from the 'qtw.QWidget' class. A 'DynamicPlot'
    plots numeric data on a graph, updating with the `update_plot()` function
    """

    def __init__(self, parent: str, style_sheet_file: str):
        """
        Initialize dynamic plot widget

        Args:
            parent: Widget to overlay 'DynamicPlot' on
            style_sheet_file: Style sheet text file formatted as a CSS f-string
        """
        super().__init__(parent)

        # Your code here

        # Uncomment later when we add the CSS
        # with open(style_sheet_file) as style_sheet:
        #     self.setStyleSheet(style_sheet.read().format(**COLOR_CONSTS))

    def update_plot(self, data):
        """
        Update data displayed by widget

        Args:
            data: New data to display
        """
        # Your code here
        pass

# test.py
from os import environ
import sys

from PyQt5 import QtWidgets as qtw
from PyQt5 import QtGui as qtg
from PyQt5 import QtCore as qtc

# from dynamic_plot import DynamicPlot

class MainWindow(qtw.QMainWindow):
    """
    Creates a 'MainWindow' which inherits from the 'qtw.QMainWindow' class. 'MainWindow'
    provides the main dash window space to overlay widgets
    """

    def __init__(self):
        """
        Set up the 'MainWindow'
        """
        super().__init__()

        # Set up main window
        self.setWindowTitle("Dynamic Plot Test")

        # graph = DynamicPlot(self, "dummy_file.txt")
        # self.setCentralWidget(graph)

        # Display window
        self.showMaximized()

def fix_term():
    """
    If VS Code was installed with snap, the 'GTK_PATH' variable must be unset.
    This is automated in this function
    """
    if "GTK_PATH" in environ and "snap" in environ["GTK_PATH"]:
        environ.pop("GTK_PATH")

def main():
    # Setup dashboards
    fix_term()
    app = qtw.QApplication([])
    pilot_dash = MainWindow()
    sys.exit(app.exec_())

if __name__ == "__main__":
    main()

[steph1111]

Working and fast, lightmode is problematic tho :/