Release 2.17.1: Use Qt 3D with Live Reloading and Test Plugin Code Examples from Browser

By Alex

Felgo 2.17.1 adds a long list of improvements and fixes. You can now also use 3D components with live code reloading in your apps and games. The plugin documentation now includes the example run button. Use it to test code examples for ads, Firebase and more from the browser on your mobile device. You can also learn how to make custom list delegates with 2 new examples in the documentation.

Use Qt 3D in Your Apps and Games, with Live Code Reloading

Felgo and Qt make it easy to add 3D content to your apps or 2D games. With the QML 3D modules, you can embed 3D objects anywhere within your app. This feature is now also available with the Live Clients on desktop, iOS and Android.

Here is a small code example for you to try right away. It displays a 3D cube on your page. The cube rotates depending on the device rotation, using the RotationSensor. You can also change the color of the cube. All that with about 130 lines of code, without empty lines and comments it’s about 100 lines.


import Felgo 3.0
import QtQuick 2.9
// 3d imports
import QtQuick.Scene3D 2.0
import Qt3D.Core 2.0
import Qt3D.Render 2.0
import Qt3D.Input 2.0
import Qt3D.Extras 2.0
import QtSensors 5.9

App {
  // Set screen to portrait in live client app (not needed for normal deployment)
  onInitTheme: nativeUtils.preferredScreenOrientation = NativeUtils.ScreenOrientationPortrait
  RotationSensor {
    id: sensor
    active: true
    // We copy reading to custom property to use behavior on it
    property real readingX: reading ? reading.x : 0
    property real readingY: reading ? reading.y : 0
    // We animate property changes for smoother movement of the cube
    Behavior on readingX {NumberAnimation{duration: 200}}
    Behavior on readingY {NumberAnimation{duration: 200}}
  NavigationStack {
    Page {
      title: "3D Cube on Page"
      backgroundColor: Theme.secondaryBackgroundColor
      Column {
        padding: dp(15)
        spacing: dp(5)
        AppText {
          text: "x-axis " + sensor.readingX.toFixed(2)
        AppText {
          text: "y-axis " + sensor.readingY.toFixed(2)
      // 3d object on top of camera
      Scene3D {
        id: scene3d
        anchors.fill: parent
        focus: true
        aspects: ["input", "logic"]
        cameraAspectRatioMode: Scene3D.AutomaticAspectRatio
        Entity {
          // The camera for the 3d world, to view our cube
          Camera {
            id: camera3D
            projectionType: CameraLens.PerspectiveProjection
            fieldOfView: 45
            nearPlane : 0.1
            farPlane : 1000.0
            position: Qt.vector3d( 0.0, 0.0, 40.0 )
            upVector: Qt.vector3d( 0.0, 1.0, 0.0 )
            viewCenter: Qt.vector3d( 0.0, 0.0, 0.0 )
          components: [
            RenderSettings {
              activeFrameGraph: ForwardRenderer {
                camera: camera3D
                clearColor: "transparent"
            InputSettings { }
          PhongMaterial {
            id: material
            ambient: Theme.tintColor // Also available are diffuse, specular + shininess to control lighting behavior
          // The 3d mesh for the cube
          CuboidMesh {
            id: cubeMesh
            xExtent: 8
            yExtent: 8
            zExtent: 8
          // Transform (rotate) the cube depending on sensor reading
          Transform {
            id: cubeTransform
            // Create the rotation quaternion from the sensor reading
            rotation: fromAxesAndAngles(Qt.vector3d(1,0,0), sensor.readingX*2, Qt.vector3d(0,1,0), sensor.readingY*2)
          // The actual 3d cube that consists of a mesh, a material and a transform component
          Entity {
            id: cubeEntity
            components: [ cubeMesh, material, cubeTransform ]
      } // Scene3D
      // Color selection row
      Row {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom
        spacing: dp(5)
        padding: dp(15)
        Repeater {
          model: [Theme.tintColor, "red", "green", "#FFFF9500"]

          Rectangle {
            color: modelData
            width: dp(48)
            height: dp(48)
            radius: dp(5)
            MouseArea {
              anchors.fill: parent
              onClicked: {
                material.ambient = modelData
    } // Page
  } // NavigationStack
} // App

Test Code Examples from Plugin Documentation

You can now test the code examples from the plugin documentation. This allows you to run code examples from the documentation on your mobile phone. Just like you are used to from the apps documentation, you can now also test plugins for ads, firebase, analytics and more right from your browser.

You can currently test code examples of the following plugins from the documentation:


Here’s a little example for an AdMob advertisement banner:


import Felgo 3.0

App {
  NavigationStack {
    Page {
      title: "Admob Banner"
      AdMobBanner {
        adUnitId: "ca-app-pub-3940256099942544/6300978111" // banner test ad by AdMob
        banner: AdMobBanner.Smart

New Examples for Custom App List View Delegates

Many of you requested this, so this update adds 2 new examples to the ScollView and ListView documentation. You can check out how to create custom delegate components and display your data with the modelData property.

The second example shows custom foldable delegate components.


Improved Handling of Screen Keyboard on iOS and Android

App and GameWindow provide new properties to make the native keyboard handling on Android and iOS easier. You can use keyboardVisible and keyboardHeight to adapt your app layout when the keyboard is shown.

The following example displays a floating action button above the keyboard. It also adapts to size changes of the keyboard:


import Felgo 3.0
import QtQuick 2.7

App {
  id: app
  // We unset the focus from the AppTextField after the keyboard was dismissed from the screen
  onKeyboardVisibleChanged: if(!keyboardVisible) textField.focus = false
  NavigationStack {
    Page {
      id: page
      title: qsTr("Keyboard Height")
      AppTextField {
        id: textField
        width: parent.width
        font.pixelSize: sp(25)
      FloatingActionButton {
        // Add the keyboard height as bottom margin, so the button floats above the keyboard
        anchors.bottomMargin: app.keyboardHeight + dp(15)
        // We only show the button if the AppTextField has focus and the keyboard is expanded
        visible: textField.focus && app.keyboardHeight != 0
        icon: IconType.check
        backgroundColor: Theme.tintColor
        iconColor: "white"
        onClicked: textField.focus = false

More Features, Improvements and Fixes

Here is a compressed list of improvements with this update:

For a list of additional fixes, please check out the changelog.

How to Update Felgo

Test out these new features by following these steps:

  • Open the Felgo SDK Maintenance Tool in your Felgo SDK directory.
  • Choose “Update components” and finish the update process to get this release as described in the Felgo Update Guide.

Felgo Update in Maintenance Tool

If you haven’t installed Felgo yet, you can do so now with the latest installer from here. Now you can explore all of the new features included in this release!

For a full list of improvements and fixes to Felgo in this update, please check out the change log!




More Posts Like This


How to Make Cross-Platform Mobile Apps with Qt – Felgo Apps


Release 2.17.0: Firebase Cloud Storage, Downloadable Resources at Runtime and Native File Access on All Platforms


Release 2.16.1: Live Code Reloading with Custom C++ and Native Code for Qt


Release 2.16.0: iPhone X Support and Runtime Screen Orientation Changes

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
create apps
create games
cross platform
native performance
3rd party services
game network
level editor
easiest to learn
biggest time saving
best support