mycode

console.log("Button clicked!")

Layout.preferredWidth: 100
Layout.alignment: Qt.AlignHCenter

implicitWidth: contentWidth
horizontalAlignment: Text.AlignHLeft

baselineOffset:
topPadding: 10
anchors.margins
anchors.fill: parent
anchors.centerIn: parent

//-----------------------------------------------
layer.enabled: true
layer.effect: OpacityMask {
    maskSource: Rectangle {
            id: opMask
        width: popupContent.width
        height: popupContent.height
        radius: 18
    }
}
//-----------------------------------------------
rgba
0% = #00
10% = #16
20% = #32
30% = #48
40% = #64
50% = #80
60% = #96
70% = #112
80% = #128
90% = #144
//-----------------------------------------------
Component.onCompleted: control.setTime()

   Timer {
        repeat: true
        interval: 60*100095
        onTriggered: updateData()
        running: true
    }

opacity: index !== 122 ? 1 : 0
//-----------------------------------------------


import QtQuick 2.6
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Text {
        id: my_text
        font.pixelSize:  30
        text: "Hello"
    }

    Timer{
        id: timer
        interval: 1000
        running: true
        repeat: true
        onTriggered: my_text.opacity = my_text.opacity === 0 ? 1 : 0
     }
}


MouseArea {
     anchors.fill: parent
     onClicked: redPinRings.visible ? redPinRings.visible=false: redPinRings.visible=true
 }
//-----------------------------------------------

import QtQuick 2.6
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Text {
        anchors.centerIn: parent
        id: my_text
        text: "Hello"
        font.pixelSize:  30

        OpacityAnimator {
            target: my_text;
            from: 0;
            to: 1;
            duration: 400;
            loops: Animation.Infinite;
            running: true;
            easing {
                type: Easing.InOutExpo;
            }
        }
    }
}

Rectangle {
        id: popup
        x: 30
        y: 40
        //radius: 15
        width: 160
        height: 40
        color: "green"
        visible: false

            Rectangle {
            x:0
            y:0
            width: 50
            height: 50
            color: "red"
        }
    }
    Text {
        text: myItem.width
    }
    Text {
        text: myItem.height
        y: 20
    }
    OpacityMask {
        anchors.fill: popup
        source: popup
        maskSource: roundMask
    }



//-----------------------------------------------

//gradient to background on image

Image {
    id: test
    source: '/assets/icons/alldata.pro_logo.png'
    x: 216
    y: 145
    anchors.horizontalCenter: parent.horizontalCenter
    visible: false // very imortant!
}
LinearGradient {
    id: mask
    anchors.fill: test
    start: Qt.point(0, 0)
    end: Qt.point(test.width, 0)
    gradient: Gradient {
        GradientStop { position: 0.2; color: "transparent" }
        GradientStop { position: 0.5; color: "black" }
        GradientStop { position: 0.8; color: "transparent" }
    }
    visible: false
}

OpacityMask {
    anchors.fill: test
    source: test
    maskSource: mask
}

//-----------------------------------------------
// rounded shadowed popup
//
import QtQuick 2.0
import QtQuick.Window 2.2
import QtQuick.Controls 2.3
import QtGraphicalEffects 1.0

ApplicationWindow {
    id: window
    width: 400
    height: 400
    visible: true

    Rectangle {
        id: rectMain;
        width: parent.width
        height: parent.height

        Canvas {
            anchors.fill: parent

            property real hue: 0
            RotationAnimation on hue {
                from: 0
                to: 360
                duration: 4000
                running: true
                loops: Animation.Infinite
            }
            onHueChanged: requestPaint()
            onPaint: {
                var ctx = getContext("2d");
                ctx.fillStyle = Qt.hsla(hue / 360, 1, 0.5, 1);
                ctx.fillRect(0, 0, width, height);
            }
        }
        Button {
            text: "Open"
            onClicked: popup.open()
        }

        Popup {
            id: popup

            x: 100
            y: 100
            width: 200
            height: 300
            modal: true
            focus: true
            closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside

            // new attached property in 5.10, in 5.9 and older use the overlay.modal property of ApplicationWindow.
            Overlay.modal: GaussianBlur {
                source: ShaderEffectSource { // you can just do source: window.contentItem if you just want a live blur.
                    sourceItem: window.contentItem
                    live: false
                }
                radius: 8
                samples: 16
            }

            padding: 0

            Rectangle {
                id: popRect;
                color: "red";

                width: parent.width
                height: parent.height

                layer.enabled: true
                layer.effect: OpacityMask {
                    maskSource: Rectangle {
                            id: opMask
                        width: popRect.width
                        height: popRect.height
                        radius: 18
                    }
                }
            }

            background: DropShadow {
                source: popup.contentItem

                horizontalOffset: 0
                verticalOffset: 5
                radius: 10
                samples: 7
                color: "black"
            }
        }
    }
}