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 support as well as Figma integration.

Design Studio & MCU

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:

  • proprety 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

[WIP: To be validated by hand]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:

  • Creating a qmldir file containing all the singletons that were generated. More information about qmldir can be found in the docs. An example qmldir could have the following contents:
# qmldir file
Module DesignSystem 
singleton Collection2 1.0 Collection2.qml 
singleton Collection1 1.0 Collection1.qml
  • Creating a .qmlproject in the design system directory. 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.qmlprojec
ModuleFiles { 
    files: [ "Generated/DesignSystem/DesignSystem.qmlproject" ] 
}

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.

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:

Design Studio import of data from Qt Bridge for Figma

Lorem Ipsum1?

Lorem Ipsum

Lorem Ipsum2?

Lorem Ipsum

Lorem Ipsum3?

Lorem Ipsum

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