QML COMPONENT IMAGE

[vishalreddy]

Hi this is vishal. Above image is the one which i am working on. When you guys see the image you can see a red circle on the qml component. My question to you guys is that can we put image on top of that qml component or not. If we can, can you guys please provide me the code or technique to do so.

Thanks.

[VRonin]

The image-upload feature on our forum is broken, you might see the picture but other users don't. Please upload your image to a image hoster of your choice (e.g. postimage.org) and embed the pic here with the following markup: ![alternate text](image-url). See also How to insert image on this forum and Hitchhiker's Visual Guide to the Qt Forum.

[Guest]

@VRonin We really need to get this fixed, it has been broken for months now.

[vishalreddy]

[vishalreddy]

@vishalreddy can you guys see the image now ?

[Guest]

@vishalreddy Yes. Sorry for the inconvenience.

[vishalreddy]

@Wieland ok, if anyone know the solution of the problem please provide me.

Thanks

[VRonin]

@vishalreddy said in QML COMPONENT IMAGE:

My question to you guys is that can we put image on top of that qml component or not.

Yes

If we can, can you guys please provide me the code or technique to do so

I never used designer, could you show your code?

[vishalreddy]

@VRonin

import QtQuick 2.4
import QtQuick.Extras 1.4
import QtQuick.Controls.Styles 1.4


Rectangle {
    property string vishal: "unit"
    property int max :100
    property int min: 0
    property int  gaugevalue: 0
    width: 400
    height: 400
    color: "#020202"
    gradient: Gradient {
        GradientStop {
            position: 0
            color: "#020202"
        }

        GradientStop {
            position: 1
            color: "#000000"
        }
    }


    CircularGauge {
        id: circularGauge
        x: 17
        y: 54
        width:328
        height:308
        value: gaugevalue


        maximumValue: max
        minimumValue: min



        Text {
            id: text1

            anchors.bottom: parent.bottom
            anchors.bottomMargin: 52
            x:117
            y: 225
            width: 46
            height: 26
            color: "#f4f2f2"
            text: qsTr(vishal)
            font.pixelSize:  12
        }

    }







}

[VRonin]

Just before Text { put something like:

Image {
    id: myImage
    source: "MyImage.png"
    anchors.fill: parent
}

[vishalreddy]

@VRonin !.

Hi, thanks for the reply. I have provided the image. So, please go through the image and please help me with the problem.
Thanks.

[VRonin]

oh, you mean you want it to appear in the designer icon?
Sorry I misunderstood. As mentioned I never used designer so I'm not qualified to answer that question. Apologies

[vishalreddy]

@VRonin ok, Thanks. Do we have a code for the image to appear on the designer icon? I have tried various ways using the designer but its not working. If you have a sample code can you please provide me.