[SOLVED] Regarding Slider and Canvas

[Pradeep Kumar]

Hello Guys,

Im new to the forum, i need a assist to figure out
how to change the canvas value (y value) with respect to slider value.

[p3c0]

Hi @Pradeep-Kumar.M,
Do you mean inside the onPaint or that of Canvas item itself ?

[Pradeep Kumar]

@p3c0
hello.
inside onpaint, i made use of it {onpaint}.

[Pradeep Kumar]

@p3c0
inside canvas i made use of onpaint

[p3c0]

@Pradeep-Kumar.M Can you post some code for better understanding ?

[Pradeep Kumar]

@p3c0

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Controls.Styles 1.1
import QtQuick.Window 2.0

Window{
    id: win
    visible: true
    width: 420
    height: 320
    Rectangle{
        id: rect
        width: 420
        height: 320
        Slider{
            id: slide
            width: 50
            height: 215
            maximumValue: 1.0
            orientation: Qt.Vertical
            anchors.left: rect.left
            anchors.leftMargin: 50
            anchors.top: rect.top
            anchors.topMargin: 50
            onValueChanged:
            {
                progress.value = value;
                canvas.y--
            }

        }
        Rectangle{
            id: rect2
            width: 100
            height: 210
            color: "gray"
            anchors.left: slide.right
            anchors.leftMargin: 50
            anchors.top: rect.top
            anchors.topMargin: 50
            ProgressBar{
                id: progress
                width: 10
                height: 215
                orientation: Qt.Vertical
                style: ProgressBarStyle{
                    background: Rectangle{
                        radius: 25
                        color: "lightgray"
                        border.color: "gray"
                        border.width: 1
                        implicitWidth: 200
                        implicitHeight: 24
                        anchors.left: progress.right
                        anchors.leftMargin: 20
                    }
                    progress: Rectangle{
                        color: "red"
                        radius: 25
                        border.color: "steelblue"
                        anchors.top: progress.bottom
                        anchors.leftMargin: 20
                    }
                }
            }
        }
        Rectangle{
            id: rect3
            width: 12
            height: 12
            radius: 18
            color: "red"
            border.color: "black"
            anchors.top: rect2.bottom
            anchors.left: slide.right
            anchors.leftMargin: 49
        }



    }
    Canvas
    {
        id:canvas
        width:420
        height:320
        property color strokeStyle:  Qt.darker(fillStyle, 1.4)
        property color fillStyle: "#bdbdbd"
        property bool fill: true
        property bool stroke: true
        property real alpha:0.5
        onFillChanged:requestPaint();
        onStrokeChanged:requestPaint();
        onScaleChanged:requestPaint();

        onPaint: {
            linewidth: 0.0
            var ctx = canvas.getContext('2d');
            var originX = 0
            var originY = 0
            ctx.save();
            ctx.globalAlpha = canvas.alpha;
            ctx.strokeStyle = canvas.strokeStyle;
            ctx.fillStyle = canvas.fillStyle;
            ctx.lineWidth = canvas.lineWidth;


            ctx.moveTo(120,230);
            ctx.lineTo(120,230);
            ctx.lineTo(140,230);
            ctx.lineTo(150,255);
            ctx.lineTo(140,275);
            ctx.lineTo(120,275);
            ctx.lineTo(120,250);

            ctx.closePath();
            if (canvas.fill)
                ctx.fill();
            if (canvas.stroke)
                ctx.stroke();
            ctx.restore();
        }

    }
    Item
    {
        focus: true
        Keys.onUpPressed:
        {
            slide.value += 0.01
            canvas.y--
        }
        Keys.onDownPressed:
        {
            canvas.y+=1;
            slide.value -= 0.01;

        }
    }
}

canvas is moving upwards with respect to slider,

canvas is not moving downwards with respect to slider.

[p3c0]

@Pradeep-Kumar.M

onValueChanged:
{
    progress.value = value;
    canvas.y--
}

You are always reducing the y value regardless of Slider's value. So it will always move in one direction i.e upwards.

[Pradeep Kumar]

@p3c0

what do i do if i want to move upwards as well as downwards,
with respect to slider value

[p3c0]

@Pradeep-Kumar.M
Same as how you update the progress bar. Bind the value. But you will need to deduce a formula which will move it precisely. For eg:

onValueChanged:
{
    progress.value = value;
    canvas.y = -value*160 //replace with your own formula
}

just to demonstrate how it works.

[Pradeep Kumar]

@pc30
hello one more question
can we add our own user defined attached properties to the existing QML Items.

[Pradeep Kumar]

@pc30

thank you so much, its working fine,
and by the way your good name please,
and i hope i'l practise much more interesting stuff,
problem is solved.

will you answer my second question please which i have posted.

[p3c0]

@Pradeep-Kumar.M By "existing QML Items" you mean the inbuilt QML items or your own custom defined items ?

[Pradeep Kumar]

@p3c0
our own user defined items.

[p3c0]

@Pradeep-Kumar.M I think yes. But I haven't used as such. Check out the following attached-properties for some information regarding it. Example here.

[Pradeep Kumar]

@p3c0
thank you

[Pradeep Kumar]

@p3c0

hello.
i got with respect to mouse implementaion,
can i have implementation of canvas with slider value with key up pressed, and key down pressed?. can you suggest.

[p3c0]

@Pradeep-Kumar.M As it doesn't return anything, you will need to keep a counting variable which will be increased and decreased on key up and down pressed (you will need to decide how much to increase or decrease at a time). Then assign this count (with some multiplier) value to y in similar way we did with slider.