• Skip to main content
  • Skip to header right navigation
  • Skip to site footer
CDP Studio logo

CDP Studio

The no-code and full-code software development tool for distributed control systems and HMI

  • Doc
  • Why CDP
    • Software developers
    • Automation engineers
    • Managers
  • Products
    • Automation Designer
    • HMI Designer
    • Maritime HMIs
  • Services
  • Use cases
  • Pricing
  • Try CDP

CDP Studio Documentation

  • Examples and Tutorials
  • Displaying a 3D Object in a Widgets GUI

Using QML in HMI GUI Simulating Spring–Mass System

Displaying a 3D Object in a Widgets GUI

Introduction

This example demonstrates how to use QML to display and control a 3D object and integrate it into a widget-based UI, using control system signals for communication.

The following key features are demonstrated in this example:

  • Using QQuickWidget in a UI to load and display QML.
  • Registering CDPBaseComObj in CDPMain.cpp to enable its use in QML.
  • Using CDPBaseComObj in QML to retrieve data from the control system and update QML elements. This includes property bindings, value-changed handlers, connector elements, and bi-directional communication. The main.qml file contains comments explaining these functionalities.
  • Configuring a UI button to send its pressed state via a control system signal and detecting button presses in QML. The same approach applies to detecting hardware button presses.
  • Displaying and controlling a 3D object within a Scene3D element.

The QML code used to control the 3D object was retrieved from a Qt3D example provided in Qt 5.13.2. It is located within the examples/qt3d/controls directory of the Qt3D module.

The original Qt example is fully QML-based, including the controls for adjusting the 3D object. It can be used as a reference for implementing all UI elements in QML, while still allowing integration with the control system as shown in this example.

GUI Overview

The UI consists of a single UI file, mainwidget.ui, which contains the controls for rotating and adjusting the 3D object. A QQuickWidget is positioned to the right of these controls and is used to load the main.qml file.

The main.qml file includes a Scene3D object for rendering the 3D object provided by Logo.qml. Additionally, it defines the communication objects that connect to Logo.qml and provides functionality for running animations. This is essential for exchanging values between the control system (CDP) and QML.

The Logo.qml file was retrieved from the original Qt3D controls example, with only minor modifications to load the specific 3D object displayed in this example, and some additional light adjustments to improve rendering in Qt 5.13.

The cdp.obj and 3dbenchy.stl files are the 3D models loaded by Logo.qml based on user selection.

In addition to these files, CDPMain.cpp has been updated to enable the use of CDPBaseComObj in QML. For more details, see the Usage in QML section in the CDPBaseComObj documentation.

Logic Overview

The application includes a Logic component that provides control signals for color, shininess, animation, model selection, and resetting the view. Additional logic includes an operator for inverting the animation signal, which disables user interaction with the rotation sliders while an animation is running, and a multiplexer used to select the model file based on the current UI selection.

Logic for connecting to the control system, handling animations, and modifying the 3D object is implemented in main.qml.

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.

Using QML in HMI GUI Simulating Spring–Mass System

The content of this document is confidential information not to be published without the consent of CDP Technologies AS.

CDP Technologies AS, www.cdpstudio.com

Get started with CDP Studio today

Let us help you take your great ideas and turn them into the products your customer will love.

Try CDP Studio for free
Why CDP Studio?

CDP Technologies AS
Hundsværgata 8,
P.O. Box 144
6001 Ålesund, Norway

Tel: +47 990 80 900
E-mail: info@cdptech.com

Company

About CDP

Contact us

Services

Partners

Blog

Developers

Get started

User manuals

Support

Document download

Release notes

My account

Follow CDP

  • LinkedIn
  • YouTube
  • GitHub

© Copyright 2025 CDP Technologies. Privacy and cookie policy.

Return to top