Forums

OverviewV-Play 2 Support (Qt 5) › Trouble publishing code that uses img tag in Text

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #8906

    Martin

    I have an embedded HTML img tag in text, like this:

     

        MenuButton {
            text: 'img src="../../assets/img/cog.png" height="20" width="20"'
            font.pixelSize: 14
    

     

     

    … which works fine in the test version of the app.

    (You have to imagine angle brackets are there, I can’t type them in this post, because the forum interprets them!)

     

    However, when I configure the build for publishing, I get

    qrc:/qml/common/MenuButton.qml:27:5: QML Text: Cannot open: qrc:/assets/img/cog.png

     

    cog.png is definitely present in the assets/img folder.   Unfortunately I don’t understand well enough how the whole packaging up “qrc” thing works.

     

    Help!

    • This topic was modified 3 years, 4 months ago. Reason: fix silly HTML interpretation
    • This topic was modified 3 years, 4 months ago.
    • This topic was modified 3 years, 4 months ago.
    #8909

    Alex
    V-Play Team

    Hello,

    Is your assets folder set up for deployment like in our empty project template:

    assetsFolder.source = assets
    DEPLOYMENTFOLDERS += assetsFolder

    Also, is the MenuButton item a custom item or one from the QtQuick Controls library?

    Thanks,

    Alex

    #8911

    Martin

    Yes, it is set up like that.

    cog.png is the “odd” img asset in my app: it’s the only one instantiated via an img tag instead of via source property.

    The MenuButon is a custom one – I think I based it on one I found in the examples.  I had to modify it because the original one I had didn’t work when instantiated inside a GridView…

     

    MenuButton.qml

    import QtQuick 2.0
    
    Rectangle {
        id: button
        // this will be the default size, it is same size as the contained text + some padding
        width: buttonText.width+ paddingHorizontal*2
        height: buttonText.height+ paddingVertical*2
    
        color: "#e9e9e9"
        // round edges
        radius: 10
    
        // the horizontal margin from the Text element to the Rectangle at both the left and the right side.
        property int paddingHorizontal: 10
        // the vertical margin from the Text element to the Rectangle at both the top and the bottom side.
        property int paddingVertical: 5
    
        // access the text of the Text component
        property alias text: buttonText.text
        property alias font: buttonText.font
    
        property alias mouseArea: mouseArea
    
        // this handler is called when the button is clicked.
        signal clicked
    
        Text {
            id: buttonText
            anchors.centerIn: parent
            font.pixelSize: 18
            font.family: titleFont.name
            color: "black"
        }
    
        PropertyAnimation {
            id:buttonPressAnimation
            target: button
            property: "opacity"
            duration: 300
            to: 1
        }
    
        MouseArea {
            id: mouseArea
            anchors.fill: parent
            hoverEnabled: true
            onClicked: {
                button.clicked()
            }
            onPressed: {
                button.opacity = 0.5;
                buttonPressAnimation.start()   // onReleased is not reliably received when in a GridView, so just do it this way
            }
        }
    }
    

     

    #8912

    Martin

    I realised a workaround:

     

         // Preferences
         MenuButton {
    -        text: 'img src="../../assets/img/cog.png" height="20" width="20"'
    +        id: settingsButton
    +        text: "      "
             font.pixelSize: 14
             // anchor the button to the gameWindowAnchorItem to be on the edge of the screen on any device
             anchors.left: selectLevelScene.gameWindowAnchorItem.left
             anchors.leftMargin: 10
             anchors.bottom: selectLevelScene.gameWindowAnchorItem.bottom
             anchors.bottomMargin: 10
             onClicked: preferencesButtonPressed()
         }
     
    +    Image {
    +        id: settingsButtonLabel
    +        source: "../../assets/img/cog.png"
    +        anchors.centerIn: settingsButton
    +        height: 20
    +        width: 20
    +    }
    +
    

     

    … obviously not as nice as the embedded img though :)

    #8913

    Martin

    (and this workaround wouldn’t work in a more general case of embedding images inside non-empty text!)

     

Viewing 5 posts - 1 through 5 (of 5 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