Specialized Widgets for UI pages
- Marc Lievin
You can use graphical controls on a UI page to change objects in a scene or control mechanism functions. For example, you can use a bullet slider on a UI page to change sea state, or add a button that turns on equipment lights. You can also add widgets to display status information.
When you install Vortex Studio, a QtDesigner executable with useful console widgets is included. You can launch the application from your program files to create a new page.
When you add the page to your setup file, the system populates the Properties Panel with the objects and classes in the form and you can connect controls to exposed inputs and outputs in your scene or mechanism.
Vortex Studio Widgets and Controls in QtDesigner
| Console Widget | Image | Description |
|---|---|---|
| BubbleLevelIndicator |
| A bubble-level indicator reproduces a hardware level that you can use to indicate how horizontal (level) or vertical (plumb) a surface is. |
| BulletCompass |
| A circular control that users can rotate to specify an angle (in degrees). |
| BulletSlider |
| A slider control that users can move to specify a single value within a range. |
| CameraWidget |
| Displays a Camera Page that you created using Vortex Studio. |
| ColorPickingWidget |
| A button opens a dialog that lets users select a color for a feature. |
| CompassWidget |
| A twisting knob control that users can rotate to specify an angle (in degrees). |
| CustomDial | (You customize the graphical appearance of this control with a pixmap.) | A dial that uses a custom image for its graphical appearance. |
| CustomPlotWrapper |
| A graph that users can plot values on. |
| DrawingBoardWidget | A feature that displays basic drawings (rectangles, lines, arcs) | |
| ItemSelectionWidget |
| A combo box with a list of items that users can click to select. |
| LabeledSlider |
| A slider that you can customize with steps, colors, and range. |
| LampButton | (Empty widget until pixmap is added) | A 4-state push button. Useful for simulating hardware lamp buttons (supports bookmarks). |
| OrientedLabel | (Empty widget until the text is added) | A text label that users can rotate. |
| PixmapCompassWidget |
| A control whose appearance you customize with a pixmap. Users can rotate the graphical control to specify an angle (in degrees). |
| PixmapDial | (Empty widget until pixmap is added) | A dial that uses a custom image for its graphical appearance. |
| PixmapFrame | (Empty widget until pixmap is added) | Adds a frame to a custom pixmap image. |
| PixmapLampButton | (Empty widget until pixmap is added) | A 4-state push button that you can specify a custom pixmap for. Useful for simulating hardware lamp buttons (does not support bookmarks). |
| PixmapTrackballWidget |
| A graphical trackball/thumbstick control which you can customize with a pixmap image. Useful for replicating joystick or trackball functions on the UI. |
| ScatterPointPlot2D |
| A labeled circular plot graph displays points at a relative distance from the diameter. Useful for showing how far observed values for a metric recorded in the session are from an expected value. |
| SliderWithFilledSection |
| A progress bar. |
| ThreeStatesHalfStickyPushButton | (Empty widget until pixmap is added) | A spring return button with two positions: clicked, and sticky (left only). You must specify a pixmap image for the graphical appearance. |
| ThreeStatesPushButton | (Empty widget until pixmap is added) | A spring return button with three clicked positions: clicked, and sticky (left only). You must specify a pixmap image for the graphical appearance. |
| TimeRealEdit |
| A time display. |
| TitledFrame | (Empty widget until the text is added) | A frame styled with a title. |
| TrackballWidget |
| A non-customizable trackball/thumbstick control. Useful for replicating joystick or trackball functions on the UI. |
| TuningPageDoubleSpinBox |
| A double spin box lets users select a value with decimals. |
| TuningPageSpinBox |
| A single spin box lets users select an integer. |
| TuningPageVector3 |
| A Vector3 selector that lets users specify an entity with three values. Useful for specifying x,y, and z-axis values. |
| TuningPageVxColor |
| A selector that lets users specify an entity with four values. |
| ValueWithUnitWidget |
| A selector lets users specify an optional value and optional unit according to the currently set unit system (US Customary or Metric). |
To Create a New QtDesigner Page and Populate it with Console Widgets
You can see available controls and widgets when you launch the QtDesigner application from the CMLabs bin folder:
- Navigate to the
binfolder in your Vortex Studio installation directory. For example,C:\CM Labs\Vortex Studio2019c\bin. - Run the executable file
designer.exe.QtDesigner opens and shows the available controls and widgets that you can drag and drop to populate the page.
To Connect Fields for Controls in the QtDesigner Page to a Mechanism or Scene
To control aspects of the mechanism or scene using controls in your QtDesigner page, you need to connect the control input and output fields with functions or objects.
The input and output fields connect functions to specific controls on your page so that you can use them to operate the mechanism or move objects in the scene. For example, you can start an engine using a button on the page.
To connect the fields, you must create a Connection Container for the page and connect each field to the script that controls the output field. For information about creating a Connection Container, see Connection Editor.
Example: Connect a Button on a QtDesigner Page to the script that controls an Engine Start Button
In this example, we add a QtDesigner page to a new mechanism so that a user can control basic functions from a graphical interface.
- Open the mechanism.
- Add the QtDesigner page extension to the mechanism.
- In the parameters for the QtDesigner page, in the UI field, specify the file of the QtDesigner UI form with the controls that you want to use.
A preview of the controls loads in the Console view. Input and Output fields for the controls on the page are automatically populated based on the objects and classes you identified in the QtDesigner page.
- To connect the input and output fields in the form with the fields defined for your mechanism, you must create a Container Connection :
- From the Toolbox, in Basics, add a Connection Container to the mechanism.
- Drag the QtDesigner page Input or Output field into the container and connect it to the script that controls the mechanism or scene function that the user will control from the UI page.
For example, here a script that controls the light output on the mechanism is connected with the QtDesigner Page input Lamp_Button_Engine_Start_Stop.
Now, when you play the simulation, the Lamp button for the Engine_Start_Stop light comes on when you start the engine:
