Best way to create a rollover buttons

_Mark_

Hi,
I have two images which represents the two states of a button: normal and rollover.
I put them into a resource file and this is the first try to make such a button:

@
Image {
source: mouseArea.containsMouse ? "qrc:///rollover.png" : "qrc:///normal.png"
anchors.horizontalCenter: parent.horizontalCenter
y: 162

    Text {
        anchors.centerIn: parent
        font.pixelSize: 60
        font.bold: true
        color: "#ffffff"
        text: "PRESS ME"
    }

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        hoverEnabled: true
    }
}

@

It works, but it takes few seconds to load each image (they should be cached but it takes the same time every time the mouse enters and exits).

We are talking about files of 3-4 kBytes!
What's wrong? What's the best way to achieve this?

dasRicardo

Hmmm i think this is not very good idea to load the image if you need it depending on the image size it cost a lot of time :). It's better in your case to load both images and show and hide them depending in the state. Another simple way come from html and css. Put your states on one image (only works really good if the icons are nearly the same size so you define a sprite size) and use a parent Rectangle with clip activated. Depending on the state you move the image along an axis with the amount off a sprite. Sorry my english is horrible hopefully you understand what i mean. "Here":http://css-tricks.com/css-sprites/ a link to explain the second way a little bit better :)

_Mark_

Thanks, very interesting!

However I'm afraid the problem is elsewhere (see http://qt-project.org/forums/viewthread/48610/) because I tried this:

@
import QtQuick 2.0

Rectangle {
id: root
width: 1024
height: 768

Component.onCompleted: {
    root.state = "normal"
}

states: [
    State {
        name: "normal"
        PropertyChanges { target: btn; color: "yellow" }
    },
    State {
        name: "rollover"
        PropertyChanges { target: btn; color: "red" }
    }
]


Rectangle {
    id: btn
    width: 600
    height: 300

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        hoverEnabled: true
        onEntered: root.state = "rollover"
        onExited: root.state = "normal"
    }
}

}
@

and the color changes after 1-2 seconds the mouse enters or exits the area. Trying to write the event on console leads to an immediate changes, to the issue is only for rendering.

dasRicardo

'Sorry, can't reproduce this. On my system the color change is immediately.

_Mark_

Yes I know ;-)
On all other systems I have the color changes immediately. But just on that platform I experience such a issue and I can't understand how to fix it.

dasRicardo

Have you tried to make the rectangle smaller? Sounds a little bit like a rendering issue. Have your device enough graphic power to render this? What's your device and specs?

_Mark_

Yes, it doesn't depend much about the rectangle size. The strange thing is the opengl examples runs fine, while the qml or quick ones renders as slow as my application.

Anyway this is the board I'm working on:

http://downloadt.advantech.com/ProductFile/PIS/ARK-1120F/Product - Datasheet/ARK-1120F_DS(07.29.14)20140729172411.pdf

dasRicardo

Hmmm strange. No debug output? Maybe missing Shaders?

_Mark_

Here you can find the debugging output with QSG_INFO=1:

http://qt-project.org/forums/viewthread/48610/#199687

without I get no warnings.