UI Code structure - DigitalHolography/Holovibes GitHub Wiki

The UI is created with Qt and OpenGL and styled with CSS. Qt is used for windows (layouts, button, field) while OpenGL is used to display images (raw, hologram, filter 2D, lens) and overlays.

File structure

Code

gui/:

  • GUI: common UI behavior: close windows, open windows, open light ui, browse file.
  • other/: defines custom QWidget used in .ui and some utility classes.
  • selections/: overlays base folder.
    • interfaces/: base overlay class for rectangular overlay, circular one, filled one.
    • overlays/: overlay specialization for zoom, registration, reticle, ...
  • windows/:
    • panels/: implementation of each panel: import, export, view, ...
    • *: window implementation

Assets

Holovibes/assets/:

  • icons/: for the executable and ps1.
  • shaders/: OpenGL fragment and vertex shaders.
  • style/
    • style.css: the main style sheet.
  • ui/: window layouts
    • mainwindow.ui: global behavior are implemented in MainWindow.cc/hh and panel specific features are implemented in separate files. (Ex: view panel UI logic is implemented in view_panel.cc/hh).
    • lightui.ui: more user friendly UI implemented in Lightui.cc/hh.
    • advancedsettingswindow.ui: Not all settings are in the main window some are only accessible in this window. Implemented in AdvancedSettingsWindow.cc/hh
    • plotwindow.ui: chart plotting. Implemented in PlotWindow.cc/hh.

Logic

UI calls API functions to trigger specific actions or request a value. Most of API functions have a ApiCode as return value. Depending on this value, the UI will be refreshed.

Window handling and common UI behavior is handled inside GUI.hh. It's a kind of API for the UI.

UI global values are stored inside user_interface_descriptor.hh.

Main window and panel

All of them have common functions:

  • on_notify(): the UI updates his fields with the latest value inside the API.
  • load_gui(): called at startup, used to load user settings.
  • save_gui(): called on closing, used to save user settings

Adding elements with QtCreator

  • In QtCreator, load a .ui file
  • Add a widget and change its name in the right column.
  • Open as plain text the .ui file and add in the <slots> element at the end of the file a slot with the prototype of the function (ex: <slot>functionName(args)</slot>).
  • Add a new slot in QtCreator cliking on the green '+' on the middle.
  • Fill the 4 columns with the name of your function in the last column.
  • Add the prototype in the {Panel}.hh and implement it in {Panel}.cc.

If you want to use a custom widget, you can change its class in the .ui file directly if it doesn't work in QtCreator.

Overlays

Note

Overlays are UI elements rendered on top of displayed images. There is also some logic and controls associated with them.

There are drawn using modern OpenGL (Vao).

List of overlays

  • Zoom: select an area with your mouse on the main display (XY view) by clicking left and then drag to select the zone (a green overlay will appear). Click right to return to default zoom.
  • For the 3D cuts: press Space on the main display and move your mouse where you want, a red cross overlay will follow your mouse (this will automatically set the X and Y settings). Press Space again to fix the position. On the slice (YZ and XZ windows) a rectangular red overlay show on which frequency the calculus are made (it's the Z setting). You can press Space you move the rectangle and Space again to fix its position.
  • Charts: When in charts recording mode you can select two zones, the signal zone and the noise one. These overlays work the same as the Zoom one
  • Reticle: When clicking on display reticle a red outlined square overlay will appear.
  • Registration: when enabling registration a circle will appear indicating the size of the registration mask.

How to add a new overlay

Class hierarchy Description Variables
Overlay Base class color_: the fill and border color.
alpha_: the opacity of the border.

zone_: have a src point and a dst point.
translation_: in OpenGL clip space [-1, 1] where (-1,-1) is the top left corner and (1,1) the bottom right one. Default at (0,0) the center.
scale_: in the range [0,1].

In the end zone_ will be converted to translation_ and scale_.
RectOverlay -> Overlay an outlined rectangular overlay.
FilledRectOverlay -> RectOverlay a filled rectangular overlay with borders. fill_alpha_: the opacity of the background.
SquareOverlay -> FilledRectOverlay a filled square overlay
CircOverlay -> Overlay an outlined circular overlay resolution_: the number of line segments generated to approximate the circle shape.
radius_: the radius of the circle.
zone_.src(): the center of the circle
  • Add a new entry in the KindOfOverlay enum located in the Overlay.hh file.
  • Create a new class that inherits from one of the class above.
  • In the constructor specify the properties of the overlay (color_, alpha_, ...).
  • If you want to move the overlay change the value of whether zone_ or translation_/scale_ in the setBuffer method.
  • Add a case statement inside OverlayManager::create_overlay().

Use overlay

// Display the overlay `OverlayKind`
UserInterfaceDescriptor::instance().mainDisplay->getOverlayManager().create_overlay<gui::OverlayKind>();

// Hide the overlay `OverlayKind`
UserInterfaceDescriptor::instance().mainDisplay->getOverlayManager().disable_all(gui::OverlayKind);
⚠️ **GitHub.com Fallback** ⚠️