[Interest] qt.labs.controls / QtQuickControls2: ToolBar, Label / Image Colors, tinting...
Xavier Bigand
flamaros.xavier at gmail.com
Sat May 7 13:05:53 CEST 2016
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 <ekke at 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 <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>
>> 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>
>>> 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
>
>
>
> _______________________________________________
> 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/23891f73/attachment.html>
More information about the Interest
mailing list