Learn what Felgo offers to help your business succeed. Start your free evaluation today! Felgo for Your Business

Forums

OverviewFelgo 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 6 years, 7 months ago by  GreenAsJade. Reason: fix silly HTML interpretation
    • This topic was modified 6 years, 7 months ago by  GreenAsJade.
    • This topic was modified 6 years, 7 months ago by  GreenAsJade.
    #8909

    Alex
    Felgo 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.

Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded