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