How to create QML slider with a custom shape? - qt

I have to create a slider with a custom shape like the one shown below (blue is the slider handle):
The red color one is groove and the blue color one is handle.

For the groove, you can use any Item to draw this shape, e.g. a Image
For the handle, you just use a Rectangle and place it according to the Slider.position, e.g. like so:
Slider {
id: slider
width: 400
height: 150
y: 200
handle: Rectangle {
x: slider.leftPadding + slider.visualPosition * (slider.availableWidth - width)
y: Math.max(slider.topPadding, slider.availableHeight - height + slider.topPadding - ((slider.availableHeight - height) * (slider.position * 2)))
width: 15
height: 30
radius: 5
color: 'blue'
}
}
If you have a stranger shape, just change the function for y.
You can use any function that maps a value position (range [0, 1]) to an y-value. You can use every property of the slider, to calculate an appropriate position.
Here another example, where the slider draws the sine function:
Slider {
width: 400
height: 150
id: slider1
y: 200
handle: Rectangle {
x: slider1.leftPadding + slider1.visualPosition * (slider1.availableWidth - width)
y: slider1.topPadding + (slider1.availableHeight - height) / 2 + (slider1.availableHeight - height) / 2 * Math.sin(slider1.position * 10)
width: 15
height: 30
radius: 5
color: 'blue'
}
}
And here for the fun of it: A random function. But I don't think you can draw a fitting groove to it
Slider {
id: slider
width: 400
height: 150
y: 200
onPositionChanged: {
var a = Math.round(Math.random() * 5) - Math.round(Math.random() * 5)
console.log(a)
handle.handleY = handle.y + (a)
console.log(handle.handleY)
}
handle: Rectangle {
property int handleY: slider.topPadding + slider.availableHeight / 2 - height / 2
x: slider.leftPadding + slider.visualPosition * (slider.availableWidth - width)
y: Math.max(slider.topPadding, Math.min(handleY, slider.availableHeight - height + slider.topPadding))
width: 15
height: 30
radius: 5
color: 'blue'
}
}

You can do this directly in QML using Canvas or in Qt C++ (example with a circular slider) and then expose the element to QML. While not a direct copy-and-paste solution check this to see a custom circular progress bar that uses arc() to draw the element. You can use line() if you want straight lines. The behaviour of the slider is also something you will have to do on your own.
You can try to inherit from Slider to try and get some (or even most) of the functionality that your element requires.

Related

Zooming/Scaling an Image at a specific point within a Flickable

By moving a Slider, I want to be able to scale (zoom in) on an Image and once scaled (zoomed in), be able to move around, ( flick ) I have this example working here below, but my problem is the following.
If I zoom in, scale in, and then flick around to a spot on the image, then I want to zoom (scale) in further on that specific point in the center of the window, when I scale in using the Slider, the zoom (scale) occurs at the center of the image because by default the 'transformOrigin' is Item.Center
Try running the code to understand what I am talking about: ( you will need to change the image source)
import QtQuick 2.12
import QtQuick.Controls 2.3
Item {
id: mainId
width: 1280
height: 720
property int scaleMultiplier: 3
Flickable {
id: flickArea
anchors.fill: parent
focus: true
contentWidth: Math.max(inner.width * slider.value * scaleMultiplier, width)
contentHeight: Math.max(inner.height * slider.value * scaleMultiplier, height)
anchors.centerIn: parent
boundsBehavior: Flickable.StopAtBounds
contentX: contentWidth === width ? 0 : inner.width * slider.value * scaleMultiplier / 2 - flickArea.width / 2
contentY: contentHeight === height ? 0 : inner.height * slider.value * scaleMultiplier / 2 - flickArea.height / 2
Image {
id: inner
scale: slider.value * scaleMultiplier
anchors.centerIn: parent
source: "test_images/1.png"
}
}
Slider {
id: slider
value: .01
orientation: Qt.Vertical
anchors {
bottom: parent.bottom
right: parent.right
top: parent.top
margins: 50
}
from: 0.01
}
}
I tried setting an arbitrary transform origin point like so:
Image {
id: inner
scale: slider.value * scaleMultiplier
anchors.centerIn: parent
source: "test_images/1.png"
transform: Scale {
id: scaleID ;
origin.x: flickArea.contentX + flickArea.width * flickArea.visibleArea.widthRatio / 2
origin.y: flickArea.contentY + flickArea.height * flickArea.visibleArea.heightRatio / 2
}
}
But it seems to have no effect. Any help is appreciated. What am I missing?
Again what I want is when I flick to a specific point on the Image, and scale in, I want the point of origin to scale into be the area in the center of the viewable flickarea. For example let's say I am zoomed in the upper right corner of the image, then I wish to zoom in further, when I zoom in further, the Image is brought back to the center of the image.
Thanks.
Found the answer with help from #sierdzio here:
https://forum.qt.io/topic/105233/zooming-scaling-an-image-at-a-specific-point-within-a-flickable/2
I needed to use resizeContents() method from Flickable
property real zoom: 1;
onZoomChanged: {
var zoomPoint = Qt.point(flickArea.width/2 + flickArea.contentX,
flickArea.height/2 + flickArea.contentY);
flickArea.resizeContent((inner.width * zoom), (inner.height * zoom), zoomPoint);
flickArea.returnToBounds();
}
and
// REMOVE THESE LINES:
contentWidth: Math.max(inner.width * slider.value * scaleMultiplier, width)
contentHeight: Math.max(inner.height * slider.value * scaleMultiplier, height)
contentX: contentWidth === width ? 0 : inner.width * slider.value * scaleMultiplier / 2 - flickArea.width / 2
contentY: contentHeight === height ? 0 : inner.height * slider.value * scaleMultiplier / 2 - flickArea.height / 2
// Instead, do:
contentWidth: inner.width
contentHeight: inner.height

Dragging the range of a RangeSlider

In my Qt project for viewing logfiles with charts, I need a range slider for easy navigation on the time axis.
What I need is support for dragging both handles; when clicking and dragingg in between the handles, both handles are moved together. The behaviour of the RangeSlider is to position the nearest handle to the clicked position, and I cant find any way of changing this from any properties.
When the provided controls is not providing the required functionality, I wonder if the only approach is to create a new component from scratch, or if there is any way of customizing the existing controls?
What you want is certainly possible:
RangeSlider {
id: sli
width: 300
from: 0
to: 1000
first.value: 300
second.value: 700
Rectangle {
anchors.left: sli.first.handle.right
anchors.right: sli.second.handle.left
anchors.verticalCenter: sli.verticalCenter
height: sli.first.handle.height
color: "red"
MouseArea {
anchors.fill: parent
property real dx: 0
onPressed: dx = mouseX
onPositionChanged: {
var d = ((mouseX - dx) / sli.width) * Math.abs(sli.to - sli.from)
if ((d + sli.first.value) < sli.from) d = sli.from - sli.first.value
if ((d + sli.second.value) > sli.to) d = sli.to - sli.second.value
sli.first.value += d
sli.second.value += d
dx = mouseX
}
}
}
}
The red rectangle is actually redundant, I merely put it there as a visual aid.

Drawing to the left of x,y coordinates

I'm working currently on Qt, when i try to draw something (for e.x Rectangle) giving its x,y coordinates & its width & height Qt starts to draw the rectangle starting from its x, y coordinates to the right direction, to demonstrate what I'm talking about see the following picture:
and the following code:
Rectangle {
id: rectangle1
x: 257
y: 221
width: 50
height: 50
color: "#000000"
}
I would like to know if there is anyway i can start drawing to the left of x,y coordinates, it's like drawing giving the width & height negative values. see the following image for illustration:
I have tried drawing giving the width a negative value, it works fine on the design mode but when i run or debug my application the rectangle does not show up, any ideas on this would be appreciated
You can not use negative values for this purpose since negative width or height is not supported in QML. But you can use Scale type to accomplish this :
Rectangle {
id: rectangle1
x: 257
y: 221
width: 50
height: 50
color: "#000000"
transform: Scale { origin.x: 0; origin.y: 0; xScale: -1}
}
Scale allows you to scale your item relative to an arbitrary point. Here we scaled the X axis of the item relative to it's interior point (0, 0).
To draw rectangle 50px from the left parent area:
Rectangle {
id: rectangle1
x: parent.width - 50 // rectangle start 50px from the left
y: 221 // similar with y pos: parent.height - 50
width: 50
height: 50
color: "#000000"
}
But I am not sure If I understood your question properly.

How to use QML Scale Element for incremental scaling with different origin

I'm trying to use a QML Scale Element to perform view scaling around a point clicked by the user, but it's not always working as documented.
To reproduce the problem, run the minimal QML example below (I'm using Qt 5.3.1 on Ubuntu 14.04 x86_64) and then:
Click in the center of the blue rectangle at the top left.
See that everything is scaled up, but the center of the blue rectangle remains at your click location. This is as documented in http://doc.qt.io/qt-5/qml-qtquick-scale.html - "[The origin] holds the point that the item is scaled from (that is, the point that stays fixed relative to the parent as the rest of the item grows)."
Now click in the center of the red rectangle.
See that everything is scaled up, but the center of the red rectangle did not remain at your click point, it was translated up and to the left. This is not as documented.
My goal is to have it always zoom correctly maintaining the click point as the origin, as stated in the documentation.
P.S. Interestingly, if you now click again in the center of the red rectangle, it scales up around that point as promised. Clicking again now on the center of the blue rectangle, you see the same unexpected translation behaviour.
P.P.S. I'm working on an application where the user can mouse-wheel / pinch anywhere on the containing rectangle, and everything inside should scale up or down around the mouse / pinch position. Many applications have exactly this behaviour. See for example inkscape.
import QtQuick 2.2
import QtQuick.Controls 1.1
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle {
x: 100
y: 100
width: 300
height: 300
transform: Scale {
id: tform
}
MouseArea {
anchors.fill: parent
onClicked: {
console.log(mouse.x + " " + mouse.y)
tform.xScale += 0.5
tform.yScale += 0.5
tform.origin.x = mouse.x
tform.origin.y = mouse.y
}
}
Rectangle {
x: 50
y: 50
width: 50
height: 50
color: "blue"
}
Rectangle {
x: 100
y: 100
width: 50
height: 50
color: "red"
}
}
}
(I filed this as a Qt bug, because the behaviour does not follow the documentation. At the moment of writing, the bug seems to have been triaged as "important". https://bugreports.qt.io/browse/QTBUG-40005 - I'm still very much open to suggestions of work-arounds / fixes over here)
In fact it is not a deviant behavior, just a different one from what you may expect after reading the doc.
When you change the Scale transform of your rectangle, the transformation is applied on the original rectangle. The point you click on stay in the same place from the original rectangle point of view.
That's why your rectangle "moves" so much when you click on one corner then the opposite corner.
In order to achieve what you want, you can't rely on transform origin. You have to set the actual x y coordinates of your rectangle.
Here's a working example:
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle {
id: rect
x: 100
y: 100
width: 300
height: 300
Rectangle {
x: 50
y: 50
width: 50
height: 50
color: "blue"
}
Rectangle {
x: 100
y: 100
width: 50
height: 50
color: "red"
}
transform: Scale {
id: tform
}
MouseArea {
anchors.fill: parent
property double factor: 2.0
onWheel:
{
if(wheel.angleDelta.y > 0) // zoom in
var zoomFactor = factor
else // zoom out
zoomFactor = 1/factor
var realX = wheel.x * tform.xScale
var realY = wheel.y * tform.yScale
rect.x += (1-zoomFactor)*realX
rect.y += (1-zoomFactor)*realY
tform.xScale *=zoomFactor
tform.yScale *=zoomFactor
}
}
}
}

QML NumberAnimation.duration behaviour

I'm trying to make a player move smoothly towards a destination in QML. I'm using a NumberAnimation to animate the x,y position changes. The NumberAnimation's duration should be proportional to the distance the player has to travel, so that the player moves at the same speed regardless of how far away they are from their destination.
import QtQuick 1.1
Item {
width: 720
height: 720
MouseArea {
anchors.fill: parent
onClicked: {
var newXDest = mouse.x - player.width / 2;
var newYDest = mouse.y - player.height / 2;
var dist = player.distanceFrom(newXDest, newYDest);
// Make duration proportional to distance.
player.xMovementDuration = dist; // 1 msec per pixel
player.yMovementDuration = dist; // 1 msec per pixel
console.log("dist = " + dist);
player.xDest = newXDest;
player.yDest = newYDest;
}
}
Rectangle {
id: player
x: xDest
y: yDest
width: 32
height: 32
color: "blue"
property int xDest: 0
property int yDest: 0
property int xMovementDuration: 0
property int yMovementDuration: 0
function distanceFrom(x, y) {
var xDist = x - player.x;
var yDist = y - player.y;
return Math.sqrt(xDist * xDist + yDist * yDist);
}
Behavior on x {
NumberAnimation {
duration: player.xMovementDuration
// duration: 1000
}
}
Behavior on y {
NumberAnimation {
duration: player.yMovementDuration
// duration: 1000
}
}
}
Rectangle {
x: player.xDest
y: player.yDest
width: player.width
height: player.height
color: "transparent"
border.color: "red"
}
}
My problem can be demonstrated by running the application above and following these steps:
Click on the bottom right hand corner of the screen.
Immediately click in the centre (or closer towards the top left) of the screen.
On the second click (while the rectangle is still moving), it seems that the rectangle's number animation is stopped (which is what I want) but it assumes the position of the destination (not what I want). Instead, I want the animation to stop and the rectangle to assume the position at which it was stopped, then to continue on to the new destination.
The correct behaviour - ignoring that the movement speed becomes disproportional - can be seen by setting both of the NumberAnimation.durations to 1000.
I think that you are looking for SmoothedAnimation. There are only two types of animation that deal nicely with the destination changing before the animation is completed. That is SmoothedAnimation and SpringAnimation. Both of these use the current position and velocity to determine the position in the next frame. Other animation types move the position along a predetermined curve.
Simply changing NumberAnimation to SmoothedAnimation makes your example look correct to me.

Resources