Forums

OverviewFelgo 2 Support (Qt 5) › QML Button text cannot display utf-8 Chinese (only show empty spaces)

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #16696

    BlueT - Matthew Lien - 練喆明

    I’m developing a cross-platform app with Qt 5.9 (+ Felgo) for our coworking space in Taiwan.
    All of users are Traditional Chinese native, so I’m using UTF-8 Chinese strings in my app.

    Most of the parts seems ok, but the QML Button with UTF-8 Chinese only show me empty spaces.

    On Desktop it works fine, but on Android (both in emulator and on phone) the problem occured.
    And, if I set the button.text = “中文 UTF-8 Chinese” again later in Component.onComplete, it display correctly.

    Can I use Chinese (UTF-8) strings in the Button.text field?
    If yes, what should I do to make it work?

    Codes:

    
        // imports
        import Felgo 3.0
        import QtQuick 2.0
        import QtQuick.Layouts 1.1
        
        import QtQuick.Controls 2.1
        //import QtQuick.Controls.Material 2.1
        import QtPositioning 5.2

     

    QML part

     

    
        // QML Button parts
    
        Rectangle {
    		id: containerBtn
    		height: dp(60)
    		radius: 5
    		anchors.right: parent.right
    		anchors.left: parent.left
    		anchors.bottom: parent.bottom
    		border.color: "blue"
    
    
    		Button {
    			id: btn_reload_pic
    			text: "截圖.reload()"
    			//dropShadow: true
    			//icon: IconType.recycle
    			anchors.right: parent.horizontalCenter
    			//width: parent.width / 4
    			//radius: 5
    
    			onClicked: {
    				var currentTime = new Date();
    				currentSnapshot.snapshotURL = currentSnapshot.snapshotURL + "?t=" + currentTime
    			}
    		}
    
    		AppButton {
    			id: btnLock
    			text: "芝麻開門(或關門)"
    			dropShadow: true
    			icon: IconType.question
    			anchors.left: parent.horizontalCenter
    			width: parent.width / 4
    			radius: 5
    
    			onClicked: lockSwitch()
    		}
    	}
    
    

     

     

     

    javascript set works

        // Component.onComplete
        btnLock.text = '芝麻關門';

     

    Screenshots:

    Button shows empty utf-8 chinese string [1]

    after setting button.text later in onComplete [2]

    Environments:

    Qt 5.9
    QtCreator 4.3.0
    Felgo 2.12.1-1
    Ubuntu 16.04 LTS 64bit
    Android 7.0 API 24, x86 emulator / HTC 10

    Test App: MOLiApp on Google Play (I cannot post link here)

    [1]: https://i.stack.imgur.com/4JLlr.png
    [2]: https://i.stack.imgur.com/bFSf4.png

    #16697

    BlueT - Matthew Lien - 練喆明

    Update:
    This only happens at the first tab (the tab shown when App start)
    POC here: https://github.com/BlueT/qt-testing-utf8

    I create a Felgo Tabbed application, and add buttons on it. Nothing more.

    You can see that at the first page some words become empty space, but in the second page all words shows correctly.

    But the two pages are identical.

     

     

    #16698

    Günther
    Felgo Team

    Hi BlueT!

    I just tested the POC project and also downloaded the MOLIApp beta from PlayStore. I was able to reproduce the issue with our Android 7 test device. The problem does not occur on another device running on Android 5, so I assume this is related to Android 7.

    Without digging a little deeper, it’s hard to say why the font is broken for UTF-8 characters on Android 7 when used at the initially visible page. I’ve added the issue to our bugtracking system.

    As a workaround, I was able to get it working by using a QML Loader to load the first page at runtime after app-start and then only display it after it was loaded:

    import QtQuick 2.6
    import Felgo 3.0
    
    App {
      id: app
    
      // loads the given QML item dynamically after app-start
      Loader {
        id: loader
        source: "FirstPage.qml"
        asynchronous: true
        anchors.fill: parent
        visible: false
    
        // after loading is finished, add the item to the main QML
        onLoaded: loader.item.parent = content
      }
    
      // container item for dynamically loaded page
      Rectangle {
        id: content
        anchors.fill: parent
      }
    }
    

     

    Hope this helps!

     

    #16699

    BlueT - Matthew Lien - 練喆明

    Hello Günther,

    Thanks for your reply and all the works on helping me/us.

    This is a serious bug to all non-latin / utf-8 developers/users.  Kinda depressed especially when it’s found after I’ve spent a lot (compare to other solutions) to purchased Felgo license without enough survey, and expecting Felgo can help me on stepping into the next level of my technical education career… Hahaha
    I had already started my project, so you’re my only hope!

     

    I’ve tested the workaround you suggested, but no luck to be able to apply it into the tabbed navigation item. Maybe there’s something I missed?
    This code gives me an empty page.

    import Felgo 3.0
    import QtQuick 2.6
    
    App {
    
    	Navigation {
    
    		// Comment to use a navigation drawer instead of tabs on Android
    		navigationMode: navigationModeTabs
    
    		NavigationItem {
    			title: qsTr("First Page")
    			icon: IconType.square
    
    			Loader {
    				id: loader
    				source: "FirstPage.qml"
    				asynchronous: true
    				anchors.fill: parent
    				visible: false
    
    				// after loading is finished, add the item to the main QML
    				onLoaded: loader.item.parent = content
    			}
    
    			//FirstPage {}
    			// container item for dynamically loaded page
    			Rectangle {
    				id: content
    				anchors.fill: parent
    			}
    		}
    
    		NavigationItem {
    			title: qsTr("Second Page")
    			icon: IconType.circle
    
    			SecondPage {}
    		}
    
    	}
    }
    

     

    BTW, two further questions:

    1. Should I use QtQuick 2.5 or 2.6?  In Felgo’s version of QtCreator, there’s no 2.6 in it’s auto completion list. (I know there’s a version 2.6 exists in the world, just not sure if it’s included and supported by Felgo 2.12.1-1).
    2. Does import sequence matters?  If yes, what rules should I follow?

     

    Thanks again.  Really hoping to have a working prototype.

     

    Best wishes,
    BlueT

     

    #16702

    Günther
    Felgo Team

    Hi!

    For the navigation component to work correctly, the NavigationItems require to be a direct child of the Navigation.

    With the above example, I simply wanted to show that using a Loader, which creates the QML at runtime after the app-start, solves the issue of having a wrong font for the first visible page, which was created during app-start before.

    This means, you can e.g. use a Loader to completely load your whole first app screen dynamically this way. Using a Loader is recommended anyways, as otherwise the initial startup-time of the app might become quite long if your statically created pages are quite complex.

    You can have a look at the qt documentation to learn more about Loader and Dynamic Object Creation (loader is simply a convenience type to dynamically create QML objects).

    The following example wraps the main navigation in a Component, which allows to create it dynamically at runtime then:

    import Felgo 3.0
    import QtQuick 2.5
    
    App {
      id: app
    
      // loads the given item dynamically after app-start
      Loader {
        id: loader
        sourceComponent: navigationComponent
        asynchronous: true
        anchors.fill: parent
        visible: false
    
        // after loading is finished, add the item to the main app content item
        onLoaded: loader.item.parent = app.contentItem
      }
    
      // component for main navigation
      Component {
        id: navigationComponent
        Navigation {
    
          // Comment to use a navigation drawer instead of tabs on Android
          navigationMode: navigationModeTabs
    
          NavigationItem {
            title: qsTr("First Page")
            icon: IconType.square
    
            FirstPage {}
          }
    
          NavigationItem {
            title: qsTr("Second Page")
            icon: IconType.circle
    
            SecondPage {}
          }
    
        }
      }
    }
    

     

    Does this solution work for you?

    #16703

    Günther
    Felgo Team

    Regarding imports:

    The ordering of the import statements does not matter. Qt Quick 2.5 is the main version at the moment, using 2.6 in the example above was a typo on my end, but it doesn’t cause any issues. QML is really relaxed in terms of versions.

    You will see an error in the log as soon as you use a feature which would require an import of the newer version, and this is solved simply by increasing the number for the QML file with the affected import.

    Cheers,
    Günther

    #16705

    BlueT - Matthew Lien - 練喆明

    Hello Günther,

    This workaround works, thanks a lot! 🙂

    Still hope this bug can be resolved in the nearly future. 🙂

     

    Best,

    BlueT

Viewing 7 posts - 1 through 7 (of 7 total)

RSS feed for this thread

You must be logged in to reply to this topic.

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
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support