Re: [SailfishDevel] using icon image provider with custom icons
Le lundi 25 mai 2020 à 14:47 +0300, David Llewellyn-Jones a écrit : > On 25/05/2020 14:31, Julien Blanc wrote: > [snip] > > > > Isn't there something smarter to do ? I can't find where the theme > > image provider gets registered, but i suppose it would be a far > > better > > solution to just extend it somehow, and provide a search path for > > the > > app folder (the logic being the same). > > Creating an ImageProvider as you've described, is the approach I've > always used. This has always been my go-to reference for this: > > https://sailfishdev.tumblr.com/post/87464226712/iconbutton-how-to-use-own-icons-with-highlight > > Even though I agree it'd be good to have a simpler, more generic > approach, as far as I'm aware there isn't one. I'd be happy to be > proven wrong though. Thanks for the link. This covers colorization, but unfortunately not size selection. I’ll use this as a base, though. Thanks everyone for your detailed answers. Regards, Julien ___ SailfishOS.org Devel mailing list To unsubscribe, please send a mail to devel-unsubscr...@lists.sailfishos.org
Re: [SailfishDevel] using icon image provider with custom icons
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
>
> 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 )
> }
> }
>
> 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
___
SailfishOS.org Devel mailing list
To unsubscribe, please send a mail to devel-unsubscr...@lists.sailfishos.org
Re: [SailfishDevel] using icon image provider with custom icons
In my case, i hust use standart image with custom ShaderEffect ,
like in my button implementation
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 )
}
}
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
Re: [SailfishDevel] using icon image provider with custom icons
On 25/05/2020 14:31, Julien Blanc wrote: [snip] > I’d like to benefit from icon coloring and correct size selection. > However, it seems the "theme" icon provider only looks in the system > folders, not the app folder (at least that's what strace shows). > > From a quick look, it seems every app is somehow reinventing the wheel > here, using its own custom image provider or other techniques to > provide the path. > > Isn't there something smarter to do ? I can't find where the theme > image provider gets registered, but i suppose it would be a far better > solution to just extend it somehow, and provide a search path for the > app folder (the logic being the same). Creating an ImageProvider as you've described, is the approach I've always used. This has always been my go-to reference for this: https://sailfishdev.tumblr.com/post/87464226712/iconbutton-how-to-use-own-icons-with-highlight Even though I agree it'd be good to have a simpler, more generic approach, as far as I'm aware there isn't one. I'd be happy to be proven wrong though. David -- Website: https://www.flypig.co.uk ___ SailfishOS.org Devel mailing list To unsubscribe, please send a mail to devel-unsubscr...@lists.sailfishos.org
[SailfishDevel] using icon image provider with custom icons
Hello, I’m currently in the process of integrating custom icons into my app. I need this because the available icons in the silica theme simply do not cover every use case. I’d like to benefit from icon coloring and correct size selection. However, it seems the "theme" icon provider only looks in the system folders, not the app folder (at least that's what strace shows). From a quick look, it seems every app is somehow reinventing the wheel here, using its own custom image provider or other techniques to provide the path. Isn't there something smarter to do ? I can't find where the theme image provider gets registered, but i suppose it would be a far better solution to just extend it somehow, and provide a search path for the app folder (the logic being the same). Any advices / hints on this ? Regards, Julien ___ SailfishOS.org Devel mailing list To unsubscribe, please send a mail to devel-unsubscr...@lists.sailfishos.org
