[Interest] qt.labs.controls / QtQuickControls2: ToolBar, Label / Image Colors, tinting...
Xavier Bigand
flamaros.xavier at gmail.com
Sat May 7 11:48:07 CEST 2016
Your image is black because the shader is multiplying the color. You should
do your image sources in white to get the correct result.
You can also change the operation in the line :
gl_FragColor = tex * color * qt_Opacity;
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.
2016-05-07 11:08 GMT+02:00 ekke <ekke at 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 <ekke at 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 < <ekke at ekkes-corner.org>
>> ekke at 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 listInterest at qt-project.orghttp://lists.qt-project.org/mailman/listinfo/interest
>>
>>
>> _______________________________________________
>> Interest mailing list
>> Interest at qt-project.org
>> http://lists.qt-project.org/mailman/listinfo/interest
>>
>>
>>
>>
>> _______________________________________________
>> Interest mailing listInterest at qt-project.orghttp://lists.qt-project.org/mailman/listinfo/interest
>>
>>
>>
>> _______________________________________________
>> Interest mailing list
>> Interest at qt-project.org
>> http://lists.qt-project.org/mailman/listinfo/interest
>>
>>
>
>
> --
> Xavier
>
> ekke
>
> _______________________________________________
> Interest mailing list
> Interest at qt-project.org
> http://lists.qt-project.org/mailman/listinfo/interest
>
>
--
Xavier
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20160507/ed83512b/attachment.html>
More information about the Interest
mailing list