I am trying to rotate a Gauge needle, but instead of pivoting at the base of the needle which have a circle with cross.. needle is pivots around the tip of the needle.. please see the attached image.. tip of the image is fixed/pivots but base is rotating.. please suggest how to correct this ?
main.qml :--
import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.5
Window
{
visible: true
x :0
y :0
width: 800
height: 480
color: "grey"
Rectangle
{
id: cluster
Speed_Needle{
id: cluster_pointer_base
x : 214+16
y : 222
}
}
Slider
{
id : slide_1
width: parent.width
from: 0
to: 360
value: 0
enabled: true
onValueChanged:
{
cluster_pointer_base.value=slide_1.value
}
}
}
Speed_Needle.qml :--
import QtQuick 2.0
Item {
property int value: 0
width: 186
height: 36
Image
{
id: root
source: "files/pointer_needle2.png"
x : 0
y : 0
transform: Rotation {
id: needleRotation
angle : value
Behavior on angle {
SmoothedAnimation { velocity: 50 }
}
}
}
}
You have to set the origin of the Rotation:
Speed_Needle.qml :--
import QtQuick 2.0
Item {
property int value: 0
width: 186
height: 36
Image
{
id: root
source: "files/REE Demo images/pointer_needle2.png"
x : 0
y : 0
transform: Rotation {
id: needleRotation
angle : value
origin.x: root.width / 2 // here!
origin.y: root.height / 2
Behavior on angle {
SmoothedAnimation { velocity: 50 }
}
}
}
}
Related
I'd like to draw a gradient inside a custom shape. I have used the property fillColor previously and try to use the property fillGradient now. The shape is fine I would say - at least it looks like expected :) What isn't fine in any way is this gradient thing. It just doesn't look anything like expected.
Here is what I want to do. This should run as it is in Qt Design Studio.
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Shapes 1.15
Rectangle {
id: btn
color: "white"
readonly property alias fieldHeight: p.fieldHeight
Shape {
ShapePath {
id: p
property int r: 172
property int fieldWidth: 123
property int fieldHeight: 79
property int deltaX: 30
startX: 0
startY: 0
strokeColor: "black"
strokeStyle: ShapePath.SolidLine
fillGradient: LinearGradient {
GradientStop {
position: 0
color: "#6c6c6c"
}
GradientStop {
position: 1
color: "#000000"
}
}
PathArc {
id: upperBorder
x: p.fieldWidth
y: 0
radiusX: p.r
radiusY: p.r
}
PathLine {
x: p.fieldWidth - p.deltaX
y: p.fieldHeight
}
PathArc {
x: p.deltaX
y: p.fieldHeight
radiusX: p.r
radiusY: p.r
direction: PathArc.Counterclockwise
}
PathLine {
x: 0
y: 0
}
}
}
}
The problem is you're not specifying the start and end point of the line that the gradient should follow. Qt annoyingly has 2 different objects called LinearGradient and they have different property names. One is from QtGraphicalEffects, and the other is from QtQuick.Shapes. You're using the shapes version, so your gradient should look something like this:
fillGradient: LinearGradient {
x1: 0
y1: 0
x2: p.fieldWidth
y2: p.fieldHeight
GradientStop {
position: 0
color: "#6c6c6c"
}
GradientStop {
position: 1
color: "#000000"
}
}
In my QML application I'm trying to create a grid of items that can be flipped at the press of a button. The backside of such an item should then fill a major part of the screen until it is flipped back.
Let's say I start off with the following view of my application
When I press the question mark button of the item in the center then the item is flipped and moved slightly. What I would expect to see after this is the following
The blue box is the backside of my item and it covers most of the screen. Pressing the 'X'-Button on the top right would again flip the item back.
However what I actually see after flipping the first time is the following
You can see that parts of the items in my grid are covered by my flipped item and parts are not.
The code I'm using is as follows
import QtQuick 2.9
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.2
import QtQuick.Window 2.2
Window {
id: main
width: 640
height: 480
visible: true
title: qsTr("Hello World")
function absolutePos(item) {
var my_x = item.x
var my_y = item.y
if (item.parent !== null) {
var parent_pos = absolutePos(item.parent)
my_x += parent_pos.x
my_y += parent_pos.y
}
return {x: my_x, y: my_y}
}
GridLayout {
columns: 5; rows: 3
Repeater {
model: 15
delegate: Item {
width: main.width / 5 - 10
height: main.height / 3 - 10
Flipable {
id: flipable
anchors.fill: parent
property bool flipped: false
front: Rectangle {
anchors.fill: parent
border.color: "black"
border.width: 2
}
back: Rectangle {
id: backSide
width: 580; height: 400
property var absolute_pos: absolutePos(this)
border.color: "blue"
border.width: 2
Button {
anchors.top: parent.top
anchors.right: parent.right
text: "X"
width: 30; height: 30
onClicked: {
flipable.flipped = !flipable.flipped
}
}
}
transform: [
Rotation {
id: rotation
origin.x: flipable.width / 2
origin.y: flipable.height / 2
axis.x: 0; axis.y: 1; axis.z: 0
angle: 0
},
Translate {
id: translation
x: 0; y: 0
}
]
states: State {
name: "back"
PropertyChanges {
target: rotation
angle: 180
}
PropertyChanges {
target: translation
x: 490 - backSide.absolute_pos.x
}
PropertyChanges {
target: translation
y: 40 - backSide.absolute_pos.y
}
when: flipable.flipped
}
transitions: Transition {
ParallelAnimation {
NumberAnimation {
target: rotation
property: "angle"; duration: 300
}
NumberAnimation {
target: translation
property: "x"; duration: 300
}
NumberAnimation {
target: translation
property: "y"; duration: 300
}
}
}
}
Button {
anchors.top: parent.top
anchors.right: parent.right
text: "?"
width: 30; height: 30
onClicked: {
flipable.flipped = !flipable.flipped
}
}
}
}
}
}
I was already trying to achieve the effect by manually setting the parent of my Flipable to Window.contentItem so that it will always be above any other items. However this also doesn't fix the problem since the item will still cover the siblings following the current item.
Also I'm still hoping, there is a solution which doesn't require manipulating the z-order of my items in some arcane way.
I am not sure what you mean by "some arcane way", but changing the z property of your delegate is perfectly fine:
delegate: Item {
z: flipable.flipped ? 1 : 0
// ...
}
You will also probably want to hide the "?" button when flipped:
visible: !flipable.flipped
I'm using QtQuick/QML and I want to create a ripple effect when I click on a button. I do know that this is available in Material Style, but I think it's an inherent property when you change the theme and I don't want to change anything else in my project.
Is there a way to add ONLY the ripple effect onto my button, and change nothing else? If so, how do I do it?
As Kostia Hvorov said, QtQuick.Controls.Material.impl.Ripple is the easiest way to go.
I would like to add my trick to handle rectangular background with radius:
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Material.impl 2.12
import QtGraphicalEffects 1.12
Column
{
spacing: 20
Button
{
anchors.horizontalCenter: parent.horizontalCenter
id: button
text: "ripple demo"
}
Ripple {
id: ripple
anchors.horizontalCenter: parent.horizontalCenter
clipRadius: 4
width: 200
height: 64
pressed: button.pressed
active: button.down || button.visualFocus || button.hovered
color: "#20FFFFFF"
layer.enabled: true
layer.effect: OpacityMask {
maskSource: Rectangle
{
width: ripple.width
height: ripple.height
radius: 4
}
}
}
}
Try it Online
Easiest way to do it - using Ripple from QtQuick.Controls.Material.impl
So just add Ripple to your background Rect:
Ripple {
clipRadius: height
width: parent.width
height: parent.height
pressed: control.pressed
anchor: control
active: control.down || control.visualFocus || control.hovered
color: control.flat && control.highlighted ? control.Material.highlightedRippleColor : control.Material.rippleColor
}
You can replace "control.Material.rippleColor" or/and "control.Material.highlightedRippleColor" to any color and get any ripple color effect.
But there is one problem, it will work only with rectangular background(without round) otherwise it will be looking bad.
I have made this with some PropertyAnimation. Here is how:
import QtQuick 2.15
import QtQuick.Controls 2.15
Button {
id: control
opacity: enabled ? 1.0 : 0.2
property int tripleWidth: width * 3
background: Rectangle {
border.width: 1
border.color: "black"
radius: 3
color: "white"
clip: true
Rectangle {
id: ripple
property int diameter: 0
property int pressX: 0
property int pressY: 0
x: pressX - radius
y: pressY - radius
color: "green"
radius: diameter / 2
width: diameter
height: diameter
opacity: 1 - diameter / control.tripleWidth
function animate(x, y, size) {
pressX = x
pressY = y
diameter = size
}
Behavior on diameter {
PropertyAnimation {
duration: 200
onRunningChanged: {
if(!running) {
duration = 0;
ripple.diameter = 0;
duration = 200;
}
}
}
}
}
}
onClicked: {
ripple.animate(pressX, pressY, control.tripleWidth)
}
contentItem: Item {
implicitWidth: txt.implicitWidth
implicitHeight: 20
Text {
id: txt
anchors.centerIn: parent
text: control.text
}
}
}
I Edit last Answer and its work.. Here is How:
import QtQuick 2.5
import QtQuick.Window 2.5
import QtQuick.Controls 2.5
RoundButton {
id: control
width: 93
height: 39
property int tripleWidth: width * 3
background: Rectangle {
border.width: 1
border.color: "black"
radius: 3
color: "white"
clip: true
Rectangle {
id: ripple
property int diameter: 0
property int pressX: 0
property int pressY: 0
x: pressX - radius
y: pressY - radius
color: "green"
radius: diameter / 2
width: diameter
height: diameter
opacity: 1
function animate(x, y, size) {
pressX = x
pressY = y
diameter = size
}
Behavior on diameter {
PropertyAnimation {
duration: 300
}
}
}
}
onHoveredChanged: {
ripple.opacity = 0
ripple.diameter = 0
}
onPressed: {
ripple.opacity = 0.8
ripple.animate(pressX, pressY, control.tripleWidth)
}
Timer {
id: timer
}
contentItem: Item {
implicitWidth: txt.implicitWidth
implicitHeight: 20
Text {
id: txt
font.pointSize: 15
anchors.centerIn: parent
}
}
onClicked: {
function delay(delayTime, cb) {
timer.interval = delayTime;
timer.repeat = false;
timer.triggered.connect(cb);
timer.start();
}
delay(10, function() {
ripple.opacity = 0
ripple.diameter = 0
})
}
}
Try it....
I wanted to create an UI similar to below images. I understand Qt Pathview helps me to move the items in an circular fashion. But I couldn't get how to create the background similar to the images with equal space between the text. I tried with rectangle (radius:360) to draw circle, but the pathview items doesn't move along the center of the rectangle-circle.
Maybe this simple example could help you with PathView:
import QtQuick 2.12
import QtQuick.Window 2.12
Window {
visible: true
width: 400
height: 400
Item {
id: container
width: 300
height: 300
anchors.centerIn: parent
Rectangle {
anchors.fill: parent
radius: width /2
color: "orange"
Rectangle {
x: 50
y: 50
width: 200
height: 200
radius: 100
color: "white"
}
}
PathView {
anchors.fill: parent
model: 10
delegate: Rectangle {
width: 50
height: 50
radius: 25
color: "green"
}
path: Path {
startX: 150; startY: 25
PathArc {
x: 150; y: 275
radiusX: 125; radiusY: 125
direction: PathArc.Clockwise
}
PathArc {
x: 150; y: 25
radiusX: 125; radiusY: 125
direction: PathArc.Clockwise
}
}
}
}
}
I know that it is possible to draw a circle in QML using the following code:
Rectangle {
width: 150
height: 150
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
color: "#095e7b"
border.color: "#0a2f4a"
border.width: 2
radius: width*0.5
}
My question is: what if I need to draw a sector of a circle. (Pizza Slices) and make each of these slices clickable? Can I do this using QML only?
Yes, using Canvas (and Context2D):
import QtQuick 2.3
Rectangle {
width: 400
height: 400
Canvas {
anchors.fill: parent
onPaint: {
var ctx = getContext("2d");
ctx.reset();
var centreX = width / 2;
var centreY = height / 2;
ctx.beginPath();
ctx.fillStyle = "black";
ctx.moveTo(centreX, centreY);
ctx.arc(centreX, centreY, width / 4, 0, Math.PI * 0.5, false);
ctx.lineTo(centreX, centreY);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "red";
ctx.moveTo(centreX, centreY);
ctx.arc(centreX, centreY, width / 4, Math.PI * 0.5, Math.PI * 2, false);
ctx.lineTo(centreX, centreY);
ctx.fill();
}
}
}
I actually took the code for this from this answer, as Qt's Canvas implements the HTML5 Canvas API. This makes it really easy to find examples on the web; just search for "draw pie slice blah html5 canvas", for example.
For the mouse detection, you'll have to brush off your maths skills...
... or just steal the code from here. :)
Note that Canvas only repaints when it's resized, or when requestPaint() is called, so if you want to change the colour of a slice depending on the mouse position, you'll need to call that function to see the colour change.
Draw it using qml, you don't need the canvas. As a guideline I usually go through Qt's examples before deciding on an implementation. The code below can be found in "Shapes" example.
import QtQuick 2.11
import QtQuick.Shapes 1.15
Shape {
width: 120
height: 130
anchors.bottom: parent.bottom
anchors.right: parent.right
// multisample, decide based on your scene settings
layer.enabled: true
layer.samples: 4
ShapePath {
fillColor: "black"
strokeColor: "darkBlue"
strokeWidth: 20
capStyle: ShapePath.FlatCap
PathAngleArc {
centerX: 65; centerY: 95
radiusX: 45; radiusY: 45
startAngle: -180
sweepAngle: 180
}
}
}
Use charts http://doc.qt.io/QtCharts/qtcharts-qmlmodule.html
import QtQuick 2.0
import QtCharts 2.0
ChartView {
width: 400
height: 300
theme: ChartView.ChartThemeBrownSand
antialiasing: true
PieSeries {
id: pieSeries
PieSlice { label: "eaten"; value: 94.9 }
PieSlice { label: "not yet eaten"; value: 5.1 }
}
}
Since the question was about drawing "pizza slices" and making each of them clickable, an important detail is mapping clicks to the right segment (aka the right "pizza slice").
None of the prior answers seem to contain any onClicked handling, so I offer yet another possibility. (All the prior answers are also valid, they just don't make it immediately clear where to intercept clicks.)
I had a similar case wherein I needed to slice a rectangle on a 45 degree diagonal, and detect whether clicks fall above or below the diagonal line.
Thankfully, it turns out that QML allows you to:
create a grid
apply a transform: Rotation to that grid
... and then automatically your clicks "just work"
(meaning: clicking on a 45-degree rotated rectangle maps as you would wish)
The demo code renders a rotated grid like the following, and outputs (via console.log) the color that you click on:
The following has been tested on Ubuntu using Qt 5.14
import QtGraphicalEffects 1.12
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Universal 2.2
import QtQuick.Layouts 1.14
Item {
height: 1000
width: 2000
GridLayout {
id: grid
columnSpacing: 0 // the default is non-zero!
rowSpacing: 0
anchors.centerIn: parent
rows: 2
columns: 2
Rectangle {
height: 200
width: 200
color: 'red'
MouseArea {
anchors.fill: parent
onClicked: {
console.log('red')
}
}
}
Rectangle {
height: 200
width: 200
color: 'yellow'
MouseArea {
anchors.fill: parent
onClicked: {
console.log('yellow')
}
}
}
Rectangle {
height: 200
width: 200
color: 'green'
MouseArea {
anchors.fill: parent
onClicked: {
console.log('green')
}
}
}
Rectangle {
height: 200
width: 200
color: 'blue'
MouseArea {
anchors.fill: parent
onClicked: {
console.log('blue')
}
}
}
transform: Rotation {
origin.x: grid.width * 0.5
origin.y: grid.height * 0.5
axis {
x: 0
y: 0
z: 1
}
angle: 45
}
}
}