[Interest] qt.labs.controls / QtQuickControls2: ToolBar, Label / Image Colors, tinting...
ekke
ekke at ekkes-corner.org
Sat May 7 11:08:36 CEST 2016
@ 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
> <mailto: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
>>
>> --
>> J-P Nurmi
>>
>>
>>
>>> On 06 May 2016, at 19:49, ekke <ekke at ekkes-corner.org
>>> <mailto: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 list
>>>> Interest at qt-project.org <mailto:Interest at qt-project.org>
>>>> http://lists.qt-project.org/mailman/listinfo/interest
>>>
>>> _______________________________________________
>>> Interest mailing list
>>> Interest at qt-project.org <mailto:Interest at qt-project.org>
>>> http://lists.qt-project.org/mailman/listinfo/interest
>>
>>
>>
>> _______________________________________________
>> Interest mailing list
>> Interest at qt-project.org <mailto:Interest at qt-project.org>
>> http://lists.qt-project.org/mailman/listinfo/interest
>
>
> _______________________________________________
> Interest mailing list
> Interest at qt-project.org <mailto:Interest at qt-project.org>
> http://lists.qt-project.org/mailman/listinfo/interest
>
>
>
>
> --
> Xavier
ekke
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20160507/6795eb50/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: menu.png
Type: image/png
Size: 123 bytes
Desc: not available
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20160507/6795eb50/attachment.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: menu at 2x.png
Type: image/png
Size: 158 bytes
Desc: not available
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20160507/6795eb50/attachment-0001.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: menu at 3x.png
Type: image/png
Size: 193 bytes
Desc: not available
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20160507/6795eb50/attachment-0002.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: menu at 4x.png
Type: image/png
Size: 223 bytes
Desc: not available
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20160507/6795eb50/attachment-0003.png>
More information about the Interest
mailing list