To make it work with black images the formule should be that : gl_FragColor = (tex + color) * qt_Opacity;
But your color must have alpha at 0 else you'll loose the alpha of the texture. Here is the bug of graphical rendering issue when using graphical effects : https://bugreports.qt.io/browse/QTBUG-49288 And this is for the color blinding feature : https://bugreports.qt.io/browse/QTBUG-49152 2016-05-07 12:39 GMT+02:00 ekke <e...@ekkes-corner.org>: > Am 07.05.16 um 11:48 schrieb Xavier Bigand: > > Your image is black because the shader is multiplying the color. You > should do your image sources in white to get the correct result. > > for Google's Material Icons it's no problem: they're provided in black and > white, > but iOS icons from other sources usually are all in black and would be > great to avoid changing color to white before using them > > > You can also change the operation in the line : > gl_FragColor = tex * color * qt_Opacity; > > never did OpenGL stuff before - thx for a hint what I should change there > to make it work with black images > > As I know if you are using a GraphicalEffect by image you'll have the > same number of FBO. An FBO is a buffer that can make the screen size, so it > will also take a lot of video memory. > > I already report a feature request to Qt, because it would be a lot > simpler and better for performances to be able to set the color for each > items. It's really common in OpenGL to specify a blending color with a > texture, doing this simple multiplication for every rendered item have > mostly no cost. > > do you have the bug no to vote for ? > this would also make sense for mobile apps where devs are used to have > something like this > > ekke > > > 2016-05-07 11:08 GMT+02:00 ekke <e...@ekkes-corner.org>: > >> @ Xavier: the ToolButton Image still is black, but perhaps I did >> something wrong. It's the first time I used a ShaderEffect >> Do you really think it could cause problems on Android / iOS apps ? >> Images are small images >> >> @ J-P: ColorOverlay works well and also looks easier to understand for >> mobile devs coming new to Qt because of labs.controls >> So using a 'tinting' color I have to customize qt.labs.controls >> containing images used in ToolBar, BottomNavigation, Drawer, ... - correct ? >> here's the code - images attached >> >> import QtQuick 2.6 >> import QtQuick.Layouts 1.3 >> import Qt.labs.controls 1.0 >> import Qt.labs.controls.material 1.0 >> import QtGraphicalEffects 1.0 >> ToolBar { >> id: titleToolBar >> property alias text: titleLabel.text >> property color textOnPrimary: "White" >> property color toolButtonTintColor: "White" >> RowLayout { >> focus: false >> spacing: 6 >> anchors.fill: parent >> Label { >> id: titleLabel >> text: "Sample One Page APP" >> leftPadding: 16 >> font.pixelSize: 20 >> elide: Label.ElideRight >> horizontalAlignment: Qt.AlignHCenter >> verticalAlignment: Qt.AlignVCenter >> Layout.fillWidth: true >> color: textOnPrimary >> } >> ToolButton { >> // always black: >> Image { >> anchors.centerIn: parent >> source: "qrc:/images/menu.png" >> } >> // onClicked: doSomething() >> } >> ToolButton { >> Image { >> id: buttonImage1 >> anchors.centerIn: parent >> source: "qrc:/images/menu.png" >> } >> // still black: >> ShaderEffect { >> visible: true >> anchors.fill: buttonImage1 >> supportsAtlasTextures: true >> property variant src: buttonImage1 >> property color color: toolButtonTintColor >> 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 highp vec4 color; >> uniform lowp float qt_Opacity; >> void main() { >> lowp vec4 tex = texture2D(src, coord); >> gl_FragColor = tex * color * qt_Opacity; >> }" >> } >> // onClicked: doSomething() >> } >> ToolButton { >> Image { >> id: buttonImage2 >> anchors.centerIn: parent >> source: "qrc:/images/menu.png" >> } >> // YEP: now it's white :) >> ColorOverlay { >> anchors.fill: buttonImage2 >> source: buttonImage2 >> color: toolButtonTintColor >> } >> // onClicked: doSomething() >> } >> } >> } >> >> Am 07.05.16 um 01:25 schrieb Xavier Bigand: >> >> I think that is better to used a ShaderEffect instead of QtGraphicalEffects >> that comes with an FBO. >> >> An FBO can take a lot a GPU resources and doesn't works well with some >> Android phone due to bad drivers. >> >> I personally use this : >> ShaderEffect { >> visible: Qt.colorEqual(parent.color, "white") === false >> anchors.fill: parent >> supportsAtlasTextures: true >> property variant src: image >> // your Image item >> property color color: parent.color >> // put your color here >> 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 highp vec4 color; >> uniform lowp float qt_Opacity; >> void main() { >> lowp vec4 tex = texture2D(src, coord); >> gl_FragColor = tex * color * qt_Opacity; >> }" >> } >> >> >> 2016-05-06 23:07 GMT+02:00 ekke < <e...@ekkes-corner.org> >> e...@ekkes-corner.org>: >> >>> Thanks, J-P, >>> >>> I'll try it out >>> >>> ekke >>> >>> Am 06.05.16 um 21:19 schrieb J-P Nurmi: >>> >>> Hi ekke, >>> >>> One possibility for tinting images could be to use ColorOverlay from >>> QtGraphicalEffects: >>> <http://doc.qt.io/qt-5/qml-qtgraphicaleffects-coloroverlay.html> >>> http://doc.qt.io/qt-5/qml-qtgraphicaleffects-coloroverlay.html >>> >>> -- >>> J-P Nurmi >>> >>> >>> >>> On 06 May 2016, at 19:49, ekke < <e...@ekkes-corner.org> >>> e...@ekkes-corner.org> wrote: >>> >>> just noticed that in Qt 5.7 there's a new property Material.foreground: >>> >>> http://doc-snapshots.qt.io/qt5-5.7/qtquickcontrols2-material.html#foreground-attached-prop >>> seems this didn't make it into the 5.7 Beta >>> from docs: >>> The default value is theme-specific (light or dark). >>> So there's no dependency between primary and foreground and I have to >>> calculate it by myself for text inside ToolBar >>> >>> still my question about tinting images for Material >>> >>> Am 06.05.16 um 17:59 schrieb ekke: >>> >>> it's really easy to create a Toolbar with Title and Menu using >>> qt.labs.controls and Material style: >>> >>> import QtQuick 2.6 >>> import QtQuick.Layouts 1.3 >>> import Qt.labs.controls 1.0 >>> import Qt.labs.controls.material 1.0 >>> >>> ToolBar { >>> id: titleToolBar >>> property alias text: titleLabel.text >>> RowLayout { >>> focus: false >>> spacing: 20 >>> anchors.fill: parent >>> Label { >>> id: titleLabel >>> text: "ekke" >>> font.pixelSize: 20 >>> elide: Label.ElideRight >>> horizontalAlignment: Qt.AlignHCenter >>> verticalAlignment: Qt.AlignVCenter >>> Layout.fillWidth: true >>> } >>> ToolButton { >>> Image { >>> anchors.centerIn: parent >>> source: "qrc:/images/menu.png" >>> } >>> // onClicked: doSomething() >>> } >>> } >>> } >>> >>> I'm getting the primaryColor as background of ToolBar as expected. >>> >>> Problem is when primaryColor is a dark color and needs white as text >>> color. >>> >>> Here's the overview of Material Color Palette where you can see when >>> text should be black or white: >>> >>> <http://www.google.com/design/spec/style/color.html#color-color-palette> >>> http://www.google.com/design/spec/style/color.html#color-color-palette >>> >>> I'm always getting black as color - is there something like * color: >>> Material.textOnPrimary* ? >>> >>> Or do I have to handle this by my own logic or mappings ? >>> >>> Using a dark primary color not only needs white text color, but also >>> white Images as used in ToolButton -> Image above. >>> >>> Do I need two different image sets for black or white ? >>> >>> Or is there something like 'tinting' an Image as for other OS ? >>> >>> (BlackBerry Cascades: setFilterColor(), Android: setColorFilter, iOS: >>> tintColor = UIColor.redColor()) >>> >>> Inside the Toolbar depending from Material primary color, I need black >>> or white, also for BottomNavigation (Android) >>> >>> There are other situations where I have to 'tint' Images with the >>> primary color as for selected buttons in iOS bottom navigation bar >>> >>> Would be great to get some hints or if there's something inside >>> qt.labs.controls / QtQuickControls2 I could use - even with the risk of API >>> changes in future. >>> THANKS >>> -- >>> >>> ekke (ekkehard gentz) >>> >>> independent software architect >>> international development native mobile business apps >>> BlackBerry 10 | Qt Mobile (Android, iOS) >>> >>> >>> >>> _______________________________________________ >>> Interest mailing >>> listInterest@qt-project.orghttp://lists.qt-project.org/mailman/listinfo/interest >>> >>> >>> _______________________________________________ >>> Interest mailing list >>> Interest@qt-project.org >>> http://lists.qt-project.org/mailman/listinfo/interest >>> >>> >>> >>> >>> _______________________________________________ >>> Interest mailing >>> listInterest@qt-project.orghttp://lists.qt-project.org/mailman/listinfo/interest >>> >>> >>> >>> _______________________________________________ >>> Interest mailing list >>> Interest@qt-project.org >>> http://lists.qt-project.org/mailman/listinfo/interest >>> >>> >> >> >> -- >> Xavier >> >> ekke >> >> _______________________________________________ >> Interest mailing list >> Interest@qt-project.org >> http://lists.qt-project.org/mailman/listinfo/interest >> >> > > > -- > Xavier > > > > _______________________________________________ > Interest mailing list > Interest@qt-project.org > http://lists.qt-project.org/mailman/listinfo/interest > > -- Xavier
_______________________________________________ Interest mailing list Interest@qt-project.org http://lists.qt-project.org/mailman/listinfo/interest
