change image source when mouse over

[joko]

Hi,

Please help me how to properly implement mouse over in this item
I'm stuck here, i don't know where to put the hover

The hover filename is "level-on-over-vertical.png" and "level-off-over-vertical.png"
Once disabled == true, hover should not be working



Item
{
id: levelItem
anchors.leftMargin: 30
anchors.fill: parent

Row
{
id: levelRow

Repeater
{
id:levelRepeater
model: 15

Image {
source: "../images/level-" + fillSource() + "vertical.png"
id: levelImg
fillMode: Image.PreserveAspectFit

function fillSource() {
var source
if (!disabled) {
source = index <= level? "on-" : "off-"
} else {
source = index <= level? "disabled-" : "off-"
}
return source
}
}


}
}

MouseArea
{
id: levelArea
anchors.fill: levelRow
function xToIndex(xPos) { return xPos/25 }
function setDisabled(xPos){
if (disabled)
disabled= !disabled
level= xToIndex(xPos)
}
onClicked: setDisabled(mouse.x)
onPositionChanged: {
if ((mouse.x >= 0 && mouse.x <= 375) &&
(mouse.y >= 0 && mouse.y <= 55)) {
level= xToIndex(mouse.x);
}
}
}

}



Any help is greatly appreciated. TIA.

[wysota]

You have definitely too much imperative code. This is not C++.


Item {
id: root
property bool hoverDisabled: false
Image {
source: ma.containsMouse ? "level-on-over-vertical.png" : "level-off-over-vertical.png"
MouseArea {
id: ma
enabled: !root.hoverDisabled
hoverEnabled: true
anchors.fill: parent
}
}
}

[joko]

You have definitely too much imperative code. This is not C++.


Thank you for your quick response.

I have tried this code, however I encountered an error where it can't find the file.
That is why I resorted to creating a function



Image {
readonly property string over: imgArea.pressed || imgArea.containsMouse ? "over-" : ""
readonly property string onOff: index <= volume ? "on-" : "off-"
readonly property string dsabled: index <= volume ? "disabled-" : "off-"
id: levelImg
source: "../images/level-" + !disabled ? (onOff + over) : dsabled + "vertical.png"
fillMode: Image.PreserveAspectFit

MouseArea {
id: imgArea
enabled: disabled ? false : true
hoverEnabled: true
anchors.fill: parent
}
}

[wysota]

If it couldn't find a file then you provided an incorrect URL for it. Using or not using a function doesn't matter here.

Is this something that you wanted to do?

import QtQuick 2.3
import QtQuick.Controls 1.0

Item {
id: root
width: 800
height: 200

property int currentLevel: 0
property int levelUnderMouse: -1
property bool indicatorEnabled: true
property int maxLevel: 10

Button {
checkable: true
checked: true
text: "Enabled"
anchors.left: parent.left
anchors.top: parent.top
onCheckedChanged: indicatorEnabled = checked
}

function urlForState(disabled, hover, active) {
// put your logic here
if(disabled && active) "http://www.qtcentre.org/images/reputation/reputation_highneg.png"
if(disabled) return "http://www.qtcentre.org/images/reputation/reputation_neg.png"

if(active) return "http://www.qtcentre.org/images/reputation/reputation_pos.png"
if(hover) return "http://www.qtcentre.org/images/reputation/reputation_pos.png"
return "http://www.qtcentre.org/images/reputation/reputation_highpos.png"
}

Item {
anchors.centerIn:parent
width: row.width
height: row.height
scale: 4
Row {
id: row
spacing: 2
Repeater {
model: root.maxLevel
Image {
source: root.urlForState(!indicatorEnabled, index === levelUnderMouse, currentLevel >= index)
}
}
}
MouseArea {
anchors.fill: row
hoverEnabled: true
enabled: !root.disabled

function xToIndex(xPos) { return xPos/row.width*root.maxLevel }
onClicked: {
root.currentLevel = xToIndex(mouse.x)
}
onPositionChanged: {
var idx = xToIndex(mouse.x)
root.levelUnderMouse = idx
if(pressed)
root.currentLevel = idx
}
onExited: root.levelUnderMouse = -1
}
}
}

[joko]

If it couldn't find a file then you provided an incorrect URL for it. Using or not using a function doesn't matter here.

Is this something that you wanted to do?

Thank you very much wysota!

[danielvianna]

Can this be done via CSS?
I'm trying to replace an icon on the menu and when you mouse over it will be replaced by another one with a different color.

I'm a UI designer with limited coding knowledge, I'm trying to avoid doing anything via back-end (because everytime I do something there it needs to go through an engineer). So I'm trying to split the GUI as much as I can from the functionality code. I'm using QT creator 5.

Also, if anyone is interested in some paid mentoring I'm looking for people, please contact danielribas1984@gmail.com