LedDisplay/app/ressources/qml/Chip.qml

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtGraphicalEffects 1.12
import QtQuick.Templates 2.12 as T
import QtQuick.Controls.impl 2.12
import QtQuick.Controls.Material 2.12
import QtQuick.Controls.Material.impl 2.12

Item {
    id: control

    property bool raised: false
    property alias mouseArea: mouseArea
    property string text: ""
    property string color: ""
    property bool isDarkColor: control.checkIsDarkColor(color)
    property double glowRadius: 0.01
    property double glowSpread: 0.01
    property bool glowVisible: true
    property double glowScale: 1
    property double glowOpacity: Math.pow( control.opacity, 1000 ) * 0.3
    property bool interactive: true
    property int horizontalPadding: width * 0.15
    property int verticalPadding: height * 0.15
    property int radius: height * 0.5

    signal clicked

    function checkIsDarkColor(color) {

        var c = color.substring(1);      // strip #
        var rgb = parseInt(c, 16);   // convert rrggbb to decimal
        var r = (rgb >> 16) & 0xff;  // extract red
        var g = (rgb >>  8) & 0xff;  // extract green
        var b = (rgb >>  0) & 0xff;  // extract blue

        var luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709

        return luma < 150
    }

    RectangularGlow {
        id: effect
        glowRadius: control.glowRadius
        spread: control.glowSpread
        color: "black"

        visible: control.glowVisible

        cornerRadius: background.radius
        anchors.fill: background
        scale: control.glowScale
        opacity: control.glowOpacity
    }

    Rectangle {
        id: background
        anchors.fill: parent
        color: control.color
        radius: control.radius
        clip: true

        Behavior on color {
            ColorAnimation {}
        }


        Ripple {
            id: ripple
            clipRadius: height
            clip: true
            width: parent.width
            height: parent.height
            pressed: mouseArea.pressed
            anchor: background
            active: mouseArea.pressed || mouseArea.visualFocus || mouseArea.containsMouse
            color: control.Material.rippleColor

            layer.enabled: true
            layer.effect: OpacityMask {
                maskSource: Item {
                    width: ripple.width
                    height: ripple.height
                    Rectangle {
                        anchors.fill: parent
                        radius: control.radius
                    }
                }
            }
        }
    }


    ColorOverlay {
        source: ripple
        color: "red"
    }

    Text {
        id: contentText
        anchors.centerIn: background

        width: background.width - 2 * control.horizontalPadding
        height: background.height - 2 * control.verticalPadding

        font.pixelSize: height
        fontSizeMode: Text.Fit
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
        minimumPixelSize: 1

        color: control.isDarkColor ? "white":"black"
        text: control.text
    }

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        enabled: control.enabled && control.interactive
        onClicked: control.clicked()
    }
}