Introduction

This example demonstrates how to create a GUI/HMI according to the Open Bridge maritime design standard. CDP Studio comes with pre-made widgets styled in the Open Bridge theme and you can easily create GUI/HMIs according to the standard with simple drag-and-drop.

Open Bridge is an open standard built on modern principles of user interface and workspace design, adapted to maritime context and regulations to improve safety and ease of operations.

The example is a comprehensive user interface with multiple pages with widgets styled and combined to demonstrate Open Bridge GUI design with CDP Studio.

The example can be used as a template or starting point to create Open Bridge styled GUI applications.

Logic and Styling

The OpenBridge example allows you to change values on widgets like meters and texts using sliders and buttons. This logic is made using Connection Mode / Signals and Slots. Press F4 in Design mode to see the connections, and F3 when you are done editing signals and slots. There is a separate example showing how the widgets can be connected to control logic; Creating an Open Bridge Styled Conning GUI Using Drag and Drop.

All elements in the example are based on standard widgets that are dragged into the UI using CDP Studio WYSIWYG Design mode. Some widgets, like the ones shown on the navigation page, are achieved by first dragging in a standard widget and then changing its properties. To illustrate this with an example, the compass widget is an ordinary meter with four needles, configured to show as a compass by selecting a different SVG file and toggling its style properties.

There are also a few elements, such as the conning meter, that are made by combining or stacking multiple standard widgets. The structure and styling of such elements are described in the UI itself, found by clicking on the buttons named "Details...". To use these complex elements in other projects, we recommend copying from the example using the Scratchpad in Design mode. Note that copying complex/stacked elements must be done by having the parent widget selected and not one of its child elements. The Object Inspector in the Design mode can be helpful to select the correct element.

All styling (SVG) files that are used in the example are available in the toolkit templates within the CDPStudio installation directory:

<Installation directory>/toolkits/<architecture>/CDP-<version>/templates/themes/openbridge_light

The files were exported from the Open Bridge Figma project and have been updated with the correct structure to be able to load them in the CDP widgets. Users that want to extend or update to future Open Bridge versions can use them as a starting point to create new themes.

Design Overview

The example implements both a top menu and a side menu as described in the Open Bridge Design Guidelines. A stacked widget is used for showing the application pages. It is connected to the menu buttons in the side menu and the page display widget in the top menu using signal and slot connections. The connections will show in CDP Studio Design mode after pressing F4 to enter Edit Signals/Slots mode. Press F3 to go back to Edit Widgets mode.

The first button on the left in the top menu controls whether or not to show the side menu. It has a signal and slot connection from signal toggled(bool) to the slot named animateWidth(bool) in the side menu container. In the container, we have configured the maxWidth and animWidthPx to similar sizes in addition to other animation properties like duration. Configured properties will show as bold text in the Design mode property panel.

The menu buttons in the side menu all emit different page numbers when they are clicked as specified in the button property named valueToEmit. We have connected the signal named checked(int) to the slot named setCurrentIndex(int) in the stacked widget to make it show the page requested by the button.

Adding a new button to the menu in CDP Studio Design mode requires the following steps:

• Duplicate one of the existing buttons in the menu by clicking and dragging it while pressing CTRL.
• Click the new button and configure the page it should trigger by editing valueToEmit
• Press F4 and drag a connection from the button to the stacked widget. Select the signal and slot described above.
• Add the page to the stacked widget if required by right-clicking on the arrows in its upper right corner. Select "Insert Page > After Current Page" in the context menu. The new page is added after the current page you are on.
• Finally, add the page name on both the button and the text selector widget in the top menu. The latter is done by right-clicking and selecting Edit Items... The page name must be placed on the same index as in the stacked widget.

Scratchpad Widgets

The example contains elements that are not available from the standard widget box in Design mode. To ease the copying of such elements to other projects, the example includes a scratchpad file. Loading this file in the Design mode, as described in the Design Mode Manual, will make the non-standard widgets available in the widget box.

The scratchpad file is named openbridge.scratch, located in the directory that contains the Application folder. Open the folder from within Design mode by right-clicking on mainwidget.ui in the file selector, and selecting Show Containing Folder in the context menu. Go to the parent directory to locate the file.

Using the azimuth widgets in a different project requires that the thrusterL.ui and thrusterM.ui files are copied to the Application directory of the project. Also, using the text widgets in dialogs requires a TextContainer somewhere in the parent hierarchy. The text sizes are controlled using the properties named, valueStyle and titleStyle.

How to Run the Example

To run the example from CDP Studio, open Welcome mode and find it under Examples. Next, in Configure mode right-click on the system project and select Run & Connect. See the Running the Example Project tutorial for more information.