[Interest] qt.labs.controls / QtQuickControls2: ToolBar, Label / Image Colors, tinting...
ekke
ekke at ekkes-corner.org
Sat May 7 12:39:40 CEST 2016
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
> <mailto: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
>> <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
>
> _______________________________________________
> Interest mailing list
> Interest at qt-project.org <mailto: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/4835ce33/attachment.html>
More information about the Interest
mailing list