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 > <mailto: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 >> <mailto: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 >>> >>> -- >>> J-P Nurmi >>> >>> >>> >>>> On 06 May 2016, at 19:49, ekke <e...@ekkes-corner.org >>>> <mailto: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 >>>>> >>>>> >>>>> 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 list >>>>> Interest@qt-project.org <mailto:Interest@qt-project.org> >>>>> http://lists.qt-project.org/mailman/listinfo/interest >>>> >>>> _______________________________________________ >>>> Interest mailing list >>>> Interest@qt-project.org <mailto:Interest@qt-project.org> >>>> http://lists.qt-project.org/mailman/listinfo/interest >>> >>> >>> >>> _______________________________________________ >>> Interest mailing list >>> Interest@qt-project.org <mailto:Interest@qt-project.org> >>> http://lists.qt-project.org/mailman/listinfo/interest >> >> >> _______________________________________________ >> Interest mailing list >> Interest@qt-project.org <mailto:Interest@qt-project.org> >> http://lists.qt-project.org/mailman/listinfo/interest >> >> >> >> >> -- >> Xavier > ekke > > _______________________________________________ > Interest mailing list > Interest@qt-project.org <mailto: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
