Skip to content

Set up a new mode

Last updated: Feb 12, 2023 by Huy Nguyen

What is a mode?

A mode is a way of viewing the data which comes out of the retina chip. Different modes are designed for different purposes, such as checking noise statistics, viewing spike traces, or a mixture of general real-time data visualization. On opening up the GUI application, the session startup window prompts the user for the mode which they want to view for a particular session. The rest of this document will detail how to add a new mode to the GUI.

Step 1. Develop the general window layout in QtDesigner

Qt Designer is a tool for quickly building graphical user interfaces with widgets from the Qt GUI framework. It gives you a simple drag-and-drop interface for laying out components such as buttons, text fields, combo boxes and more.

To download: https://build-system.fman.io/qt-designer-download For full documentation: https://doc.qt.io/qt-6/qtdesigner-manual.html

1a. Building the GUI in QtDesigner

Full tutorials on Qt Designer can be found online. But here are some general tips which may be the most useful:

Initial settings for creating a new layout:

  • Templates/forms: select "Main Window"

  • Screen Size: select "VGA Landscape" -> you will also have to manually adjust the window size once you are in the main editing window, as this is a pretty small window size.

  • You can also duplicate a previously existing mode .ui file and build off from there (much faster!).

Approach to making the GUI

  • The root of your layout hierarchy should begin with either a vertical, horizontal, or grid layout. This will allow your GUI mode to expand and shrink depending on window size/full screen. Otherwise some weird clipping will happen. In dividing up different areas of the GUI, nest more vertical/horizontal layouts. Examples of how this is done can be seen in already developed modes (for instance "src/view/layouts/SpikeFinding.ui")

  • By default, this layouts are set up so that child widgets/layouts are given even vertical/horizontal space. You can change that by selecting the parent layout object and in the property editor, set "LayoutStretch" to the desired ratio. By default it is 1,1. Examples are 1,3 // 2, 3 // etc.

PyQtGraph plots:

PyQtGraph is a fast plotting library designed for PyQt (analogous to matplotlib). With a few exceptions, most plots made will be created with PyQtGraph. In order for us to use this plotting library, we need to have a special PlotWidget object in PyQt Designer. A brief tutorial of how to do this can be read here: https://www.pythonguis.com/tutorials/pyside6-embed-pyqtgraph-custom-widgets/

Special buttons:

You can add buttons to the menu bar. Which will show up natively in Windows/Mac as a true app menu bar.

1b. Naming variables for use in the codebase

The names of your layouts, plot widgets, and anything else you make in Qt Designer are very important as these will be the exact variable names you will use to call these functions in the code. Name them as you would valid Python variables.

1d. Save the designer file

The QtDesigner files have the file end type *.ui. Make sure to save these layout files to /src/view/layouts for sake of organization.

Step 2. Create references to the new mode in the codebase

I will show how to do this through the example of making a new mode called "Compression":

2a. Add the mode to the startup session window

You will first need to edit /src/view/layouts/SessionStartupGUI.ui in the QtDesigner. Double click on the QComboBox "chooseVisStyle", then add "Compression" as another option.

2b. Add the mode to init_charts


...
elif layout == "Compression": # this is the name you added in part 2a
    from src.controller.modes.mode_compression import setup_compression_plots # this is a file you need to make
    setup_compression_plots(app, CURRENT_THEME, themes, NUM_CHANNELS_PER_BUFFER) # follow convention of setup_INSERT-MODE-NAME
...

2c. Create a dedicated file in /src/controller/modes

In this case, call it setup_compression_plots, like in the code snippet 2b.

You will need to create the following function within that file:

def setup_compression_plots(app, CURRENT_THEME, themes, NUM_CHANNELS_PER_BUFFER):
    # (1) load the Qt Designer template
    uic.loadUi("./src/view/layouts/Compression.ui", app)

    # (2) hook up w GUI loop
    app.charts = { # ---> these are variable names in the QtDesigner plots
        #"arrayMap": app.arrayMap,
        #"miniMap": app.miniMap
    }

    app.chart_update_function_mapping = { # ---> these are functions in src/controller/plots/*.py
        #"arrayMap": update_array_map_plot
        #"miniMap": update_mini_map_plot,
    }
    app.chart_update_extra_params = {
        #"arrayMap": None,
       # "miniMap": None
    }

    app.CHART_MIN_TIME_TO_REFRESH = {
        #"arrayMap": 4,
        #"miniMap": 2,
    }

    #setupArrayMap(app, app.charts["arrayMap"], CURRENT_THEME, themes)
    #setupMiniMapPlot(app, app.charts["miniMap"], CURRENT_THEME, themes)

    # (3) Set up additional functionality
    #app.actionUpdateSession.triggered.connect(app.OnNewSession)
    print("successfully loaded compression plots!")

2d.

Add any plot logic related to the mode in src/controller/plots/