[SailfishDevel] using icon image provider with custom icons

rgrnetalk at yahoo.com rgrnetalk at yahoo.com
Mon May 25 12:48:53 UTC 2020


Could https://doc.qt.io/qt-5/qml-qtgraphicaleffects-coloroverlay.html be used for this purpose? (I use it for an image in my hud app, haven't used it to color custom icons)

On Monday, 25 May 2020, Dmitriy Sedov wrote:
> 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
> 
>

-- 
Sent from my Sailfish device


More information about the Devel mailing list