Setup Qt Quick Designer

Unlike the Qt UI Designer, Qt Quick Designer is deeply integrated in Qt Creator. This has one advantage that one can switch to edit mode to fine tune the components.

The following setup is not necessary for the bundled binary package from http://epics.web.psi.ch/software/CSDataQuick

macOS and Linux

The CSDataQuick module must be in the import path before launching Qt Creator.

$ export QML_IMPORT_PATH=CSDataQuick-build/qml

And after you have created your own collection of UI components, you could add them to this path as well. Imagine in a collaboraton environment, everyone could create device components and install them into a central location, e.g. /net/shared/qml/. To reuse these components, it is sufficient to add this central location to the path.

$ export QML_IMPORT_PATH=$QML_IMPORT_PATH:/net/shared/qml

The designer works by creating invisible background renders (qmlpuppet). For modules with C++ plugins, like CSDataQuick, the qmlpuppet must be rebuilt with the same Qt version as the plugin. To enable this, go to menu Tools -> Options, select Qt Quick from the left list, then select Qt Quick Designer tab, in the QML Enumlation Layer group, select Use QML emulation layer that is built by the selected Qt.

Windows

On Windows the situation is a lot more subtle. The safest approach is to build against the same Qt version as the Qt Creator. For example, Qt Creator 4.4 uses Qt 5.9.1 msvc2015 64bit.

In addition, add the bin to PATH. Suppose the build path is C:\CSDataQuick-build

> set PATH=C:\CSDataQuick-build\bin;C:\epics\base-3.14.12\bin\windows-x64;%PATH%
> set QML_IMPORT_PATH=C:\CSDataQuick-build\qml
> C:\Qt\Tools\QtCreator\bin\qtcreator.exe

The long answer is that, Qt Creator needs to know which Qt version to be used to create qml2puppet. One can create an empty project, using the same Qt version used to build CSDataQuick. And then open/create qml displays from there.

Using the designer

Start with an empty template file, mydevice.qml

import QtQuick 2.5
import CSDataQuick.Components 1.0

BaseWindow {
}

Open it with qtcreator,

$ qtcreator mydevice.qml

New qml files created from Qt Creator have Item as the root item. Change manually the root item to BaseWindow.

The following video shows show to switch between edit and design modes.

What is not working

• The Display, Command, StripChar and CartesianPlot editor: if the model is given of ListModel form, it cannot be edited in designer.

  model: ListModel {
      ListElement {
          label: 'list'
          command: 'ls'
      }
  }

  The workaround is to use JSON object array form.

  model: [
      {
          'label': 'list',
          'command': 'ls'
      }
  ]