QtDesignStudio/FAQ

From Qt Wiki
Jump to navigation Jump to search

En Ar Bg De El Es Fa Fi Fr Hi Hu It Ja Kn Ko Ms Nl Pl Pt Ru Sq Th Tr Uk Zh

This page contains technical FAQs for Design Studio, its MCU/Qt Ultralight support as well as Figma integration.



Design Studio & MCU/Qt Ultralight

What are the main differences between Qt Quick and Qt Ultralite?

There are several differences due to optimizations required by the embedded world. These include:

  • Some QML types are unavailable in Qt Ultralite. The available types are listed here.
  • Some of the types have additional constraints what is described here.
  • The QML/JS support is limited for MCU to the features described here.

For full overview of the differences please refer to QtForMCUs docs.

How to configure the MCU SDK in Design Studio?

You can set it by navigating to Edit->Preferences->Device->MCU. After setting it, please restart the Design Studio.

I'm starting a project for MCU, what should I remember at the very beginning?

You can start immediately and create a new project using the Qt for MCUs presets.

The components and their properties available in the Design Studio editor should respect the MCU rules. However, if you plan to edit the QML code manually, you may end up creating code that is not valid for the MCU and you won't notice it at first glance.

In this case it is worth configuring Qt for MCUs SDK as mentioned in the previous question. The kit can be obtained from the Qt Maintenance Tool (an appropriate license is required). All you need to do is set the appropriate SDK installation path and reopen/create your project. With the MCUs SDK configured, Design Studio will automatically add an additional deployment step to your project that generates MCU-compliant C++ code. If something goes wrong during this process, such as using properties that are not available in Qt for MCU, you will see an error in the console.

For example, the following code for the Rectangle is perfectly fine, you can paste it into your MCU project in the Design Studio and run it: 

Rectangle { 
    width: 200 
    height: 200 
    visible: true 
    anchors.centerIn: parent 
    color: "red" 
    rotation: 45 
    border.width: 10 
    border.color: "green"  
}

However, a Rectangle type for MCU does not have border and rotation properties. If you configure the MCU SDK kit, you will see errors in the console and Design Studio won't be able to run the project/generate a preview:

/SomePath/SomeProject/Screen01.ui.qml:24:9: error: Group property of unknown type

border.width: 10

/SomePath/SomeProject/Screen01.ui.qml:23:9: error: Binding on property of unknown type

rotation: 45

I've created a new project for MCUs, and I see qmlprojectexporter warnings in the console. How do I get rid of them?

This might happen despite configuring the MCU SDK properly. Please let us know whenever such an issue arises and report a ticket here.

General information about qmlprojectexporter can be found at its dedicated page.

I want to compile and/or deploy my application to MCU target in Qt Design Studio, how do I do that?

You need to use Qt Creator for that, Design Studio does not support this workflow.

In Design Studio MCU project containing .qmlimport file needs to be created. It will contain CMakeLists.txt file that you can use to open Qt Creator project.

If instead you are in a regular Qt (non-MCU) project, you can enable CMakeLists file generation with File > Export Project > Enable CMake Generator.

I wanted to use <REPLACE_WITH_FEATURE> and Qt Ultralite complains that it is not available/supported, why?

One has to be mindful that MCU kit is tailored for embedded devices, hence, some of its functionality has been limited to favor efficiency. This includes QML/JS functionalities that are described here and here. In general, MCU JavaScript environment does not support:

  • property var,
  • property variant,
  • functions,
  • raw arrays (var arr = []) and JS container types like Array, Map, Set etc.,
  • inline components,
  • object literals.

Moreover, some types and their availability or how they work is different. This also differs between hardware targets. Please refer to the following sources:

I want to profile my application, how to do it?

The documentation is available here, and here you can find a benchmark demo. Please note that benchmarking is meant for target devices and most of the metrics might not be implemented for desktop environments.

Where are the project build files located?

You can set the path to the build directory in the Qt for MCUs Deploy step. First you need to ensure that you have MCU SDK installed and set correctly in Design Studio.

Having the correct SDK, go to the Set runtime configuration for the project (cog icon in the bottom left corner) and under Deployment you will see Qt for MCUs Deploy Step, expand it and you will see the default build directory that you can change anytime.

I added a new Qt Quick Control using File->New file but it doesn't work. What did I do wrong?

Unfortunately, the distinction between regular Qt MPU and MCU is not yet well defined in Qt Design Studio. The same set of files is available for MPU and MCU, however, it is not correct and will be adjusted in the future. To get the list of available types in Qt Quick Ultralite please refer to the docs.



Qt Bridge for Figma export

I'm starting a project for MCU, what should I watch out for?

MCU platforms have strict resource constraints (such as memory footprint, CPU usage). Because of this limitation, Qt Quick Ultralite was created, which is mostly compatible with Qt Quick, but you need to be aware of it's limitations. More details can be found here.

Qt Bridge for Figma makes it easier to create projects for the MCU and gives hints when unsupported features are used in the project. To see them, you need to load the plugin, go to Settings and set Export target to Qt for MCUs.

Now, in the 'Home' tab you will see the 'MCU Compatibility' section, where useful tips will appear if unsupported usage is detected in the selected item, e.g.

Mcu compatibility warning stroke.png







How to export Figma variables?

Since version 4.6, Qt Bridge for Figma allows exporting Figma variables that are used to generate equivalent collections in QML on the Design System side.

The export is available for both targets (Qt and Qt for MCUs), however for MCUs it's still in the beta stage (user must do some extra manual work, for details go to this question).

To export variables, go to Qt Bridge -> Settings -> Advanced settings and check Export variables.

Note that you need Design Studio 4.6 or newer for this to work.

Design Studio import of data from Qt Bridge for Figma

I've imported a project from Figma and I see the following error ../Frame_1.ui.qml:3:1: module "DesignSystem" is not installed. What should I do?

Full tooling for Design System import logic to MCU project have not been implemented yet. This is meant to be automated in the future. Nonetheless, you can easily integrate the generated files to your project by:

1. In the directory where the design system was generated one needs to create a DESIGN_SYSTEM_NAME.qmlproject. For more information about .qmlproject please refer to the docs. An example file could look like: 

// DesignSystem.qmlproject file
import QmlProject 1.3 
Project { 
    MCU.Module { 
        uri: "DesignSystem" 
    } 
    QmlFiles { 
        files: [ 
            "Collection1.qml", 
            "Collection1Theme.qml", 
            "Collection2.qml", 
            "Collection2Theme.qml" 
        ] 
    } 
}

2. In your root project directory, one has to modify your PROJECT_NAME.qmlproject file by adding the entry that includes the generated module in your project. This could look like: 

// Somewhere in PROJECT_NAME.qmlproject
ModuleFiles { 
    files: [ "Generated/DesignSystem/DesignSystem.qmlproject" ] 
}

Also, you need to extend importPaths array: 

// Somewhere in PROJECT_NAME.qmlproject
importPaths: [ "imports" , "."]

I'm importing project from Figma and see weird bindings like: color: "DSPATH(VariableCollectionId:1:5$VariableID:7:21)"

You may potentially use any version of Qt Bridge for Figma plugin with any version of Qt Design Studio. However, that does not mean that they will be compatible.

You might encounter such entries at the bottom of the file if you are using outdated Design Studio, and newer plugin, where the first does not support the variables import that the latter exports.

In such cases it is always best to update both the plugin and Design Studio to their newest versions.

How to distinguish MCUs from non-MCU projects in DS?

The easiest way to know if the currently opened project is MCU or not is to inspect its PROJECT_NAME.qmlproject file. If the string QDS.qtForMCUs: true is present, then the project is in fact MCU project.

Why is the Design System different for MPU projects vs. MCU projects?

This is a limitation of the current Qt Quick Utralite. It doesn't support duck-typing, hence it cannot support nested QtObjects.

Therefore, for regular Qt Quick we have a QtObject-based Design System where all themes within a collection are defined within a single .qml file: 

// Collection.qml 
QtObject {
    property QtObject currentTheme: mode1
    property QtObject colors: currentTheme.colors
    property QtObject strings: currentTheme.strings
    property QtObject numbers: currentTheme.numbers

    property QtObject mode1: QtObject {
        property QtObject colors: QtObject {
            property color colorBackground: "#ff4bc7c7"
            property color colorFont: "#ff000000"
        }
        property QtObject numbers: QtObject {
            property real radius: 45
        }
        property QtObject strings: QtObject {
            property string collectionName: "Collection1"
        }
    }

    property QtObject mode2: QtObject {
        ...
    }
    ...
}

The use in the project is as follows: 

color: Collection.colors.colorBackground 
radius: Collection.numbers.radius

Design System for MCU is based on custom defined types, where each type has its own .qml file with definition. Hence, we have: 

// CollectionTheme.qml 
QtObject {
    property color colorBackground: "#ff4bc7c7"
    property color colorFont: "#ff000000"
    property real mode: 1
    property string collection: "Collection1"
}

// Collection.qml 
QtObject {
    property CollectionTheme currentTheme: mode1
    property CollectionTheme mode1: CollectionTheme {
        collectionName: "Collection1"
        radius: 45
        colorFont: "#ff000000"
        colorBackground: "#ff4bc7c7"
    }
    property Collection1Theme mode2: CollectionTheme {
        ...
    }
}

As you can see, we don't have any property groups here (like colors, strings, etc.), so the usage is slightly different: 

color: Collection.currentTheme.colorBackground 
radius: Collection.currentTheme.radius

In both cases, the current theme can be changed using the currentTheme property in a particular collection.

Can I have .js files in the project?

No, you can't.

Qt Quick Ultralite subset of JavaScript runtime APIs. You can use JavaScript:

  • In a body of property bindings.
  • In a body of Signal handlers.
  • In a definition of custom methods. However, be aware that many of the types are not supported (see this question).

For more details please go to:

I get a warning when importing assets from Figma that the archive is not compatible with the current project type. What am I doing wrong?

This warning was introduced in Design Studio 4.6. It appears when importing assets from Figma that have not been exported strictly for MCUs.

To get rid of the warning, go to Qt Bridge for Figma -> Settings, set the export target to Qt for MCUs and export your project again.

Note: The 'Qt for MCUs' target was introduced in Qt Bridge for Figma 4.6.

Retrieved from "https://wiki.qt.io/index.php?title=QtDesignStudio/FAQ&oldid=42820"