In my case, i hust use standart image with custom ShaderEffect ,
like in my button implementation
<code>
MouseArea {
id: iconButton
width: panel.buttonSize
height: panel.buttonHeight
Image {
id: buttonImage
source: emojiModel.categoryIcon(modelData);
anchors.centerIn: parent
width: panel.buttonSize - Theme.paddingSmall
height: panel.buttonHeight - Theme.paddingSmall
fillMode: Image.PreserveAspectFit
layer.enabled: true
layer.effect: ShaderEffect {
// grayscale effect
property variant src: buttonImage
property color highlight: iconButton.pressed ? Theme.highlightColor
: Theme.primaryColor
vertexShader: "
uniform highp mat4 qt_Matrix;
attribute highp vec4 qt_Vertex;
attribute highp vec2 qt_MultiTexCoord0;
varying highp vec2 coord;
void main() {
coord = qt_MultiTexCoord0;
gl_Position = qt_Matrix * qt_Vertex;
}"
fragmentShader: "
varying highp vec2 coord;
uniform sampler2D src;
uniform lowp vec4 highlight;
uniform lowp float qt_Opacity;
void main() {
lowp vec4 tex = texture2D(src, coord);
gl_FragColor = vec4(vec3(dot(tex.rgb,
vec3(0.344, 0.5, 0.156))),
tex.a) * qt_Opacity *
highlight;
}"
}
}
onClicked: {
emojiCategoryView.positionViewAtIndex( index, PathView.Center )
}
}
</code>
this shader just make any image grayscale and colorize it with Theme color
it can be modify to make disabled button comor and other
_______________________________________________
SailfishOS.org Devel mailing list
To unsubscribe, please send a mail to devel-unsubscr...@lists.sailfishos.org
