[Interest] qt.labs.controls / QtQuickControls2: ToolBar, Label / Image Colors, tinting...

Xavier Bigand flamaros.xavier at gmail.com
Sat May 7 01:25:36 CEST 2016


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
>
> --
> 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
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20160507/c229836a/attachment.html>


More information about the Interest mailing list