Best way to create a rollover buttons



  • 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?



  • 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 :)



  • 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.



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



  • 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.



  • 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?



  • 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



  • Hmmm strange. No debug output? Maybe missing Shaders?



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

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

    without I get no warnings.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.