rectangular DelayButton

[gfxx]

is possible to make delay button rectangular whitout make a custom one? Not see style for .... but maybe there are some trik for make it. I appreciate any suggest.

regards

[Markkyboy]

Try this;

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

Window {
    visible: true
    width: 320
    height: 240
    title: qsTr("Rectangular button")

    DelayButton {
        delay: 2000
        text: "Button"
        anchors.centerIn: parent
    }
}

[gfxx]

ok thanks ... sorry but i have active import QtQuick.Extras 1.4 in my file ..... so only round DelayButton .... but if cancel these module all works ....

Other things not undestand how is possible to change color and backgroundcolor of delay button, for example yellow and red instead of grey and darkgray as standard style.

thanks

[ODБOï]

@gfxx hi
see here https://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-delaybutton

[gfxx]

@LeLev I see but need linear delaybutton shadow and not circular ... if try to use ctx.line(x,x,x,x,x,x) .... I receive an error for inexistent draw function .... and not find a page with permitted draw function ...

thanks

[gfxx]

@gfxx I try with these demo code but with no success ...

        DelayButton {
            id: delayPress
            width: 100
            height: 50
            display: AbstractButton.TextOnly
            delay: 3000
            font.bold: true
            anchors.top: parent.top
            anchors.topMargin: 0
            checkable: true
            anchors.horizontalCenter: parent.horizontalCenter
            opacity: delayPress.enabled? 1 : 0.3
            visible: true


            text: "Delay\nButton"
                contentItem: Text {
                    text: delayPress.text
                    font: delayPress.font
                    opacity: enabled ? 1.0 : 0.3
                    color: "white"
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                    elide: Text.ElideRight
                }

            background: Rectangle {
                implicitWidth: delayPress.width
                implicitHeight: delayPress.height
                opacity: enabled ? 1 : 0.3
                color: delayPress.down ? "#17a81a" : "#21be2b"
                //border.color: "#2b6016"
                //border.width: 1
                antialiasing: true
                radius: 2

                anchors.centerIn: parent

                Canvas {
                    id: canvas
                    anchors.fill: parent

                    Connections {
                        target: delayPress
                        onProgressChanged: canvas.requestPaint()
                    }

                    onPaint: {
                        var ctx = getContext("2d")
                        ctx.clearRect(0, 0, delayPress.width, delayPress.height)
                        ctx.strokeStyle = "red"
                        ctx.beginPath()
                        var startPoint = 0
                        var endPoint = startPoint + delayPress.progress
                        ctx.fillRect(startPoint, delayPress.height, endPoint, delayPress.height)
                        ctx.stroke()
                    }
                }
            }

some suggest?

[gfxx]

@gfxx

var endPoint = startPoint + delayPress.progress

these row is wrong, because progress go from 0 to 1 so you need to multiply the variable "progress" by the length of the desired rectangle .... all this goes great.

Thanks at all