<html><head><meta http-equiv="Content-Type" content="text/html; charset=us-ascii"></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; line-break: after-white-space;" class="">In my case, i hust use standart image with custom ShaderEffect , <div class="">like in my button implementation </div><div class=""><code></div><div class=""><pre style="margin-top: 0px; margin-bottom: 0px;" class=""><!--EndFragment--></pre><div class="">
<pre style="margin-top: 0px; margin-bottom: 0px;" class=""><!--StartFragment--><span style=" color:#66a334;" class="">MouseArea</span><span style=" color:#bec0c2;" class=""> </span>{</pre>
<pre style="margin-top: 0px; margin-bottom: 0px;" class=""><span style=" color:#bec0c2;" class=""> </span><span style=" color:#ff6aad;" class="">id</span>:<span style=" color:#bec0c2;" class=""> </span><span style=" font-style:italic; color:#9acfd6;" class="">iconButton</span></pre>
<pre style="margin-top: 0px; margin-bottom: 0px;" class=""><span style=" color:#bec0c2;" class=""> </span><span style=" color:#ff6aad;" class="">width</span>:<span style=" color:#bec0c2;" class=""> </span><span style=" font-style:italic; color:#9acfd6;" class="">panel</span>.buttonSize</pre>
<pre style="margin-top: 0px; margin-bottom: 0px;" class=""><span style=" color:#bec0c2;" class=""> </span><span style=" color:#ff6aad;" class="">height</span>:<span style=" color:#bec0c2;" class=""> </span><span style=" font-style:italic; color:#9acfd6;" class="">panel</span>.buttonHeight</pre>
<pre style="margin-top: 0px; margin-bottom: 0px;" class=""><br class=""></pre>
<pre style="margin-top: 0px; margin-bottom: 0px;" class=""><span style=" color:#bec0c2;" class=""> </span><span style=" color:#66a334;" class="">Image</span><span style=" color:#bec0c2;" class=""> </span>{</pre>
<pre style="margin-top: 0px; margin-bottom: 0px;" class=""><span style=" color:#bec0c2;" class=""> </span><span style=" color:#ff6aad;" class="">id</span>:<span style=" color:#bec0c2;" class=""> </span><font color="#9acfd6" class=""><span style="caret-color: rgb(154, 207, 214);" class=""><i class="">buttonImage</i></span></font></pre>
<pre style="margin-top: 0px; margin-bottom: 0px;" class=""><span style=" color:#bec0c2;" class=""> </span><span style=" color:#ff6aad;" class="">source</span>:<span style=" color:#bec0c2;" class=""> </span><span style=" font-style:italic;" class="">emojiModel</span>.categoryIcon(modelData);</pre>
<pre style="margin-top: 0px; margin-bottom: 0px;" class=""><span style=" color:#bec0c2;" class=""> </span><span style=" color:#ff6aad;" class="">anchors.centerIn</span>:<span style=" color:#bec0c2;" class=""> </span><span style=" font-style:italic;" class="">parent</span></pre>
<pre style="margin-top: 0px; margin-bottom: 0px;" class=""><span style=" color:#bec0c2;" class=""> </span><span style=" color:#ff6aad;" class="">width</span>:<span style=" color:#bec0c2;" class=""> </span><span style=" font-style:italic; color:#9acfd6;" class="">panel</span>.buttonSize<span style=" color:#bec0c2;" class=""> </span>-<span style=" color:#bec0c2;" class=""> </span><span style=" color:#66a334;" class="">Theme</span>.paddingSmall</pre>
<pre style="margin-top: 0px; margin-bottom: 0px;" class=""><span style=" color:#bec0c2;" class=""> </span><span style=" color:#ff6aad;" class="">height</span>:<span style=" color:#bec0c2;" class=""> </span><span style=" font-style:italic; color:#9acfd6;" class="">panel</span>.buttonHeight<span style=" color:#bec0c2;" class=""> </span>-<span style=" color:#bec0c2;" class=""> </span><span style=" color:#66a334;" class="">Theme</span>.paddingSmall</pre>
<pre style="margin-top: 0px; margin-bottom: 0px;" class=""><span style=" color:#bec0c2;" class=""> </span><span style=" color:#ff6aad;" class="">fillMode</span>:<span style=" color:#bec0c2;" class=""> </span><span style=" color:#66a334;" class="">Image</span>.PreserveAspectFit</pre>
<pre style="margin-top: 0px; margin-bottom: 0px;" class=""><span style=" color:#bec0c2;" class=""> </span><span style=" color:#ff6aad;" class="">layer.enabled</span>:<span style=" color:#bec0c2;" class=""> </span>true</pre>
<pre style="margin-top: 0px; margin-bottom: 0px;" class=""><span style=" color:#bec0c2;" class=""> </span><span style=" color:#ff6aad;" class="">layer.effect</span>:<span style=" color:#bec0c2;" class=""> </span><span style=" color:#66a334;" class="">ShaderEffect</span><span style=" color:#bec0c2;" class=""> </span>{</pre>
<pre style="margin-top: 0px; margin-bottom: 0px;" class=""><span style=" color:#bec0c2;" class=""> </span><span style=" font-style:italic; color:#a8abb0;" class="">//</span><span style=" color:#bec0c2;" class=""> </span><span style=" font-style:italic; color:#a8abb0;" class="">grayscale</span><span style=" color:#bec0c2;" class=""> </span><span style=" font-style:italic; color:#a8abb0;" class="">effect</span></pre>
<pre style="margin-top: 0px; margin-bottom: 0px;" class=""><span style=" color:#bec0c2;" class=""> </span><span style=" font-style:italic; color:#45c6d6;" class="">property</span><span style=" color:#bec0c2;" class=""> </span><span style=" font-style:italic; color:#45c6d6;" class="">variant</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#ff6aad;" class="">src</span>:<span style=" color:#bec0c2;" class=""> </span><i style="color: rgb(154, 207, 214);" class="">buttonImage</i></pre>
<pre style="margin-top: 0px; margin-bottom: 0px;" class=""><span style=" color:#bec0c2;" class=""> </span><span style=" font-style:italic; color:#45c6d6;" class="">property</span><span style=" color:#bec0c2;" class=""> </span><span style=" font-style:italic; color:#45c6d6;" class="">color</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#ff6aad;" class="">highlight</span>:<span style=" color:#bec0c2;" class=""> </span><span style="color: rgb(154, 207, 214); font-style: italic;" class="">iconButton.pressed</span><span style=" color:#bec0c2;" class=""> </span>?<span style=" color:#bec0c2;" class=""> </span><span style=" color:#66a334;" class="">Theme</span>.highlightColor<span style=" color:#bec0c2;" class=""> </span>:<span style=" color:#bec0c2;" class=""> </span><span style="color: rgb(190, 192, 194);" class=""> </span><span style="color: rgb(102, 163, 52);" class="">Theme</span>.primaryColor</pre>
<pre style="margin-top: 0px; margin-bottom: 0px;" class=""><span style=" color:#bec0c2;" class=""> </span><span style=" color:#ff6aad;" class="">vertexShader</span>:<span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">"</span></pre>
<pre style="margin-top: 0px; margin-bottom: 0px;" class=""><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">uniform</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">highp</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">mat4</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">qt_Matrix;</span></pre>
<pre style="margin-top: 0px; margin-bottom: 0px;" class=""><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">attribute</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">highp</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">vec4</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">qt_Vertex;</span></pre>
<pre style="margin-top: 0px; margin-bottom: 0px;" class=""><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">attribute</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">highp</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">vec2</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">qt_MultiTexCoord0;</span></pre>
<pre style="margin-top: 0px; margin-bottom: 0px;" class=""><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">varying</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">highp</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">vec2</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">coord;</span></pre>
<pre style="margin-top: 0px; margin-bottom: 0px;" class=""><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">void</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">main()</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">{</span></pre>
<pre style="margin-top: 0px; margin-bottom: 0px;" class=""><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">coord</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">=</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">qt_MultiTexCoord0;</span></pre>
<pre style="margin-top: 0px; margin-bottom: 0px;" class=""><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">gl_Position</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">=</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">qt_Matrix</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">*</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">qt_Vertex;</span></pre>
<pre style="margin-top: 0px; margin-bottom: 0px;" class=""><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">}"</span></pre>
<pre style="margin-top: 0px; margin-bottom: 0px;" class=""><span style=" color:#bec0c2;" class=""> </span><span style=" color:#ff6aad;" class="">fragmentShader</span>:<span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">"</span></pre>
<pre style="margin-top: 0px; margin-bottom: 0px;" class=""><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">varying</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">highp</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">vec2</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">coord;</span></pre>
<pre style="margin-top: 0px; margin-bottom: 0px;" class=""><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">uniform</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">sampler2D</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">src;</span></pre>
<pre style="margin-top: 0px; margin-bottom: 0px;" class=""><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">uniform</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">lowp</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">vec4</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">highlight;</span></pre>
<pre style="margin-top: 0px; margin-bottom: 0px;" class=""><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">uniform</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">lowp</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">float</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">qt_Opacity;</span></pre>
<pre style="margin-top: 0px; margin-bottom: 0px;" class=""><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">void</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">main()</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">{</span></pre>
<pre style="margin-top: 0px; margin-bottom: 0px;" class=""><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">lowp</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">vec4</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">tex</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">=</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">texture2D(src,</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">coord);</span></pre>
<pre style="margin-top: 0px; margin-bottom: 0px;" class=""><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">gl_FragColor</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">=</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">vec4(vec3(dot(tex.rgb,</span></pre>
<pre style="margin-top: 0px; margin-bottom: 0px;" class=""><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">vec3(0.344,</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">0.5,</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">0.156))),</span></pre>
<pre style="margin-top: 0px; margin-bottom: 0px;" class=""><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">tex.a)</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">*</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">qt_Opacity</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">*</span><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">highlight;</span></pre>
<pre style="margin-top: 0px; margin-bottom: 0px;" class=""><span style=" color:#bec0c2;" class=""> </span><span style=" color:#d69545;" class="">}"</span></pre>
<pre style="margin-top: 0px; margin-bottom: 0px;" class=""><span style=" color:#bec0c2;" class=""> </span>}</pre>
<pre style="margin-top: 0px; margin-bottom: 0px;" class=""><span style=" color:#bec0c2;" class=""> </span>}</pre>
<pre style="margin-top: 0px; margin-bottom: 0px;" class=""><br class=""></pre>
<pre style="margin-top: 0px; margin-bottom: 0px;" class=""><span style=" color:#bec0c2;" class=""> </span><span style=" color:#ff6aad;" class="">onClicked</span>:<span style=" color:#bec0c2;" class=""> </span>{</pre>
<pre style="margin-top: 0px; margin-bottom: 0px;" class=""><span style=" color:#bec0c2;" class=""> </span><span style=" font-style:italic; color:#9acfd6;" class="">emojiCategoryView</span>.positionViewAtIndex(<span style=" color:#bec0c2;" class=""> </span>index,<span style=" color:#bec0c2;" class=""> </span><span style=" color:#66a334;" class="">PathView</span>.Center<span style=" color:#bec0c2;" class=""> </span>)</pre>
<pre style="margin-top: 0px; margin-bottom: 0px;" class=""><span style=" color:#bec0c2;" class=""> </span>}</pre>
<pre style="margin-top: 0px; margin-bottom: 0px;" class="">}</pre></div></div><div class=""></code></div><div class="">this shader just make any image grayscale and colorize it with Theme color</div><div class="">it can be modify to make disabled button comor and other<br class=""><br class=""></div></body></html>