Introduction

The purpose of the Open Bridge Conning example is to demonstrate how a case study from the Open Bridge Guidelines can be implemented using CDP Studio and the Open Bridge 3.0 theme.

The different elements in the Conning example were copied from the example/template named Adding an Open Bridge Styled GUI to Automation System using the Scratchpad in Design mode. This example also documents the different Open Bridge elements in more detail and should be studied to make the most out of the Open Bridge theme.

The Conning example shows how to add CDP routings to the different elements in the GUI. It does not include a control system, but uses CDPParameters in a CDPComponent named Settings to set values to show on the different GUI elements. The advantage of using a CDPParameter is that the application will store user changes and show these the next time the application is run. All routed control options can be changed from the settings dialog. Load the dialog by first showing the side menu by clicking the menu icon on the upper left and then clicking the button named Settings.

Note the following text copied from the Open Bridge Guidelines: The purpose of this sketch is to show how OpenBridge components can be used in interface design. The design example is not a finished or approved product and should not be used as such. In order to design your product, we recommend applying standard user centered design processes. We plan to release verified reference designs at a later stage. We welcome critique and suggestions that may improve the examples.

Design Overview

The example is based on a sketch in the Open Bridge Guidelines and is not a complete application. Hence, not all buttons and tabs in the GUI have been implemented. This means that some tabs will be empty and clicking some of the buttons will have no effect. They are only there for showing a design similar to the sketch.

The example is designed for full HD resolution and will not adapt to smaller screen sizes. Users can easily implement this following the guidelines in the tutorial named How to Create Adaptive GUI.

Some of the widgets in the example are styled using special properties. The remainder of this section will discuss these in detail and explain features that could be added to the example.

Settings

The settings dialog is loaded from the menu to the left. The button that loads the dialog is configured with the preferParent property set to false. This makes the dialog top level and movable outside the application main window. To style the dialog similar to internal dialogs and avoid the window styling from the operating system, the property named translucentBg in the settings.ui dialog has been set to false.

The left side menu has an initial width of 0 px and will not show in CDP Studio Design mode unless you adjust its maximumSize. To have a look at its contents, locate it in the object inspector by filtering for menuContainer_4. Then temporarily reset the maximumSize for showing the menu.

Time and Date

The time and date in the upper right are both shown using the digital clock widget. To show the date, we have changed the displayFormat property to dd-MM-yyyy. When editing the widget properties, always make sure that the maximum and minimum properties are not edited by mistake (showing in bold text in the property editor). Styling the widgets similar to value texts is done by adding a valueStyle property set to "2".

Current Leg

The arrow showing the direction is currently just an image. A complete application would require images for all possible directions. To switch between the images we could use a stacked widget or add multiple images into one SVG file as described in the documentation of the picture sequence widget.

Wind

The meter showing wind is implemented using the same widget and SVG as the compass. It is configured to look like a wind meter by disabling needle2 and needle3, setting widgetStyle to "1" and needleStyle to "5". The speed and direction texts are placed on top of the meter in a layout.

Azimuth

In Design mode, the thruster in the center of the azimuth will not show unless you set the themeRootDir property in the main window. The property must be set to the directory that contains application images and files. This is usually the same as the Application directory. To avoid problems with the Design mode cache, it is often a good idea to restart CDP Studio after changing this property.

Title and Value Texts

The example includes title and value texts in different colors and sizes. The styling of these texts is done using the dynamic properties; valueStyle and titleStyle. Using these properties ensures that the texts will get the correct styling if switching to a different theme in the future.

Routing Overview

Not all widgets are routed to CDP objects. The example shows how the navigation elements are configured for communication. It does not include a control system. Most of the routings in the GUI are set using the standard routing properties of the different widgets. The following sections will discuss the different widgets in more detail.

Compass

The four different needles are routed using the standard routing properties named cdpRouting, cdpRouting2, cdpRouting3, and cdpRouting4.

Pitch, Roll and Heave

The widget consists of two different widgets, a Meter with 2 needles and a Slide Indicator. Routing is set using standard properties, cdpRouting and cdpRouting2.

Depth Graph

The graph and the slide indicator on its right are two separate widgets. On the graph, add routing in the cdpSignals property. This is a string list that can have multiple routings. Add the same routing on the slide indicator using the standard cdpRouting property.

Wind

The widget is routed using standard properties, except for the wind sector center and width. These two are done using Qt signal and slot connections from two transparent com widgets, placed to the right and left of the Speed and Dir texts. Press F4 in CDP Studio Design mode to show the connections. The connection for wind sector width is dragged from the left com widget signal, valueChanged(double), to the slot in the meter named, setAlarmSectorNormal4(double). The right com widget connection goes from valueChanged(double) to setAlarmSectorCenter4(double). Pressing F3 brings back the ordinary development mode. The actual routing is set using standard properties in the com widgets.

Azimuth

The azimuth consists of two separate widgets; a rotation view widget with an ordinary meter widget on top. Clicking in the center of the azimuth will select the meter that shows the outer ring with an arrow. The arrow is routed using the property named cdpRouting.

The rotation view can be used to rotate any ui file. In the azimuth, this ui file contains the thruster that shows in the center of the widget. The thruster routings are configured in a separate ui file, thrusterM.ui, using ordinary routing properties. Routing for rotating the thruster is set in the rotation view widget by adding and editing a dynamic string property named, rotationRouting. There is a visual guide in the CDP Studio Design Mode Manual explaining how to configure properties like this. It can be found in the section named Connecting Widgets to CDP.

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.