Rotating an object around the origin - qt

With NumberAnimation, I can rotate a 3d object around one of its x, y, or Z axes. I need to rotate the object around the origin - in the picture it is Z.
It's a minimal reproducible example
import QtQuick 2.15
import QtQuick.Window 2.14
import QtQuick3D 1.15
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.12
Window {
id: window
width: 1280
height: 720
visible: true
property int i: 0
property double distance: 1000
Node {
id: standAloneScene
//! [parentnode]
DirectionalLight {
ambientColor: Qt.rgba(1.0, 1.0, 1.0, 1.0)
}
ParallelAnimation{
id: rotation_y
running: false
NumberAnimation { target: cube; property: "eulerRotation.y"; to: 180*i;
duration: 500; easing.type: Easing.InOutQuad}
}
Model {
id: cube
source: "#Cube"
y: 18
scale: Qt.vector3d(1, 1, 1)
materials: [
DefaultMaterial {
diffuseColor: Qt.rgba(0.228, 0.185, 0.142, 0.5)
}
]
}
OrthographicCamera {
id: cameraPerspectiveIsometry
position: Qt.vector3d(distance, distance*1.5, distance)
eulerRotation.x: -45
eulerRotation.y: 45
}
}
Rectangle {
id: isometry
anchors.top: parent.top
anchors.left: parent.left
width: parent.width
height: parent.height
color: "#848895"
border.color: "black"
Label {
text: "Isometry"
anchors.top: parent.top
anchors.left: parent.left
anchors.margins: 10
color: "#222840"
font.pointSize: 14
}
View3D {
id: topLeftView
anchors.fill: parent
importScene: standAloneScene
camera: cameraPerspectiveIsometry
}
}
Button {
anchors.bottom: parent.bottom
anchors.right: right.right
text: "Start"
font.pixelSize: height / 2
onClicked:{
i++;
rotation_y.restart();
}
}
}

Related

Sequential movement of an object by coordinates

I need to move an object by the clock and counterclockwise sequentially. But the for loop works differently, it only moves in the latter direction. When you click on the button, the object must first turn clockwise, and then counterclockwise. Maybe there is some kind of delay when performing the animation? How can I do it?
import QtQuick 2.15
import QtQuick.Window 2.14
import QtQuick3D 1.15
import QtQuick.Controls 2.14
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
visibility: "Maximized"
property int scl: 5
property int angle: 360
Node{
id: standAloneScene
DirectionalLight {
ambientColor: Qt.rgba(1.0, 1.0, 1.0, 1.0)
}
Node {
id: sphere
Model {
id: model_sphere
source: "#Cube"
x: 200
y: 100
z: 0
materials: [
DefaultMaterial {
diffuseColor: Qt.rgba(0.053, 0.130, 0.219, 0.75)
}
]
}
}
ParallelAnimation{
id: start
running: false
NumberAnimation {
target: sphere
property: "eulerRotation.y"
to: angle
duration: 2000
easing.type: Easing.InOutQuad
}
NumberAnimation {
target: model_sphere
property: "eulerRotation.y"
to: 2*angle
duration: 2000
easing.type: Easing.InOutQuad
}
}
OrthographicCamera {
id: cameraOrthographicFront
eulerRotation.y: 45
eulerRotation.x: -45
x: 600
y: 800
z: 600
}
}
Rectangle {
id: view
anchors.top: parent.top
anchors.left: parent.left
width: parent.width
height: parent.height
color: "#848895"
border.color: "black"
View3D {
id: topLeftView
anchors.fill: parent
importScene: standAloneScene
camera: cameraOrthographicFront
}
Button {
id: posmoveZ
width: view.width/8
height: view.height/16
anchors.top: view.top
anchors.right: view.right
text: "start"
font.pixelSize: height
onClicked: {
for(var i=0; i<6; i++){
if(i % 2 == 0){
angle = 360
}
else{
angle = -360
}
start.restart();
}
}
}
}
}
The simplest answer to your problem is put your animations inside a SequentialAnimation, i.e.
SequentialAnimation {
loops: 3
ParallelAnimation {
id: clockwise
NumberAnimation { /* ... */ }
NumberAnimation { /* ... */ }
}
ParallelAnimation {
id: counterClockwise
NumberAnimation { /* ... */ }
NumberAnimation { /* ... */ }
}
}
Also, you should let QML use the default width and height of a Button. Here's the complete solution:
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Window 2.15
import QtQuick3D 1.15
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
visibility: "Maximized"
property int scl: 5
property int angle: 360
Node{
id: standAloneScene
DirectionalLight {
ambientColor: Qt.rgba(1.0, 1.0, 1.0, 1.0)
}
Node {
id: sphere
Model {
id: model_sphere
source: "#Cube"
x: 200
y: 100
z: 0
materials: [
DefaultMaterial {
diffuseColor: Qt.rgba(0.053, 0.130, 0.219, 0.75)
}
]
}
}
SequentialAnimation {
id: sequentialAnimation
loops: 3
ParallelAnimation{
id: clockwise
running: false
property int count: 3
NumberAnimation {
target: sphere
property: "eulerRotation.y"
from: 360
to: 0
duration: 2000
easing.type: Easing.InOutQuad
}
NumberAnimation {
target: model_sphere
property: "eulerRotation.y"
from: 720
to: 0
duration: 2000
easing.type: Easing.InOutQuad
}
}
ParallelAnimation{
id: counterClockwise
running: false
NumberAnimation {
target: sphere
property: "eulerRotation.y"
from: 0
to: 360
duration: 2000
easing.type: Easing.InOutQuad
}
NumberAnimation {
target: model_sphere
property: "eulerRotation.y"
from: 0
to: 720
duration: 2000
easing.type: Easing.InOutQuad
}
}
}
OrthographicCamera {
id: cameraOrthographicFront
eulerRotation.y: 45
eulerRotation.x: -45
x: 600
y: 800
z: 600
}
}
Rectangle {
id: view
anchors.top: parent.top
anchors.left: parent.left
width: parent.width
height: parent.height
color: "#848895"
border.color: "black"
View3D {
id: topLeftView
anchors.fill: parent
importScene: standAloneScene
camera: cameraOrthographicFront
}
Button {
id: posmoveZ
anchors.top: view.top
anchors.right: view.right
anchors.margins: 10
text: "start"
font.pixelSize: height
enabled: !clockwise.running && !counterClockwise.running
onClicked: {
sequentialAnimation.restart();
}
}
}
}

How to position one label at the end of another label and center both of them

Basically I want to display a text telling the user if a switch is turned on or off. The words "on" and "off" have a small background associated with them so I thought maybe making two labels would work. Now I have an issue where I'm hard coding the position of the second label, and it doesn't look clean because both of them are not centered. Here is the code:
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Window 2.0
Window {
visible: true
width: 400
height: 400
property bool switchOn: false
Rectangle {
color: '#D3D3D3'
anchors.fill: parent
Label {
id: sentence
text: qsTr("The switch is currently turned ")
color: 'black'
width: parent.width
wrapMode: Text.Wrap
font.pixelSize: 40
anchors.top: parent.top
Label {
id: endText
text: switchOn ? qsTr(" off ") : qsTr(" on ")
font.pixelSize: 40
color: "white"
anchors {
top: parent.top
left: parent.left
topMargin: 50
leftMargin: 310
}
// #disable-check M16
background: Rectangle {
color: switchOn ? "grey" : "red"
radius: 8
}
}
}
Switch {
id: switch1
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
anchors.topMargin: 150
text: qsTr("Switch")
onToggled: switchOn = !switchOn
}
}
}
How can I have that sentence appear as one sentence and center it within a parent object?
EDIT:
Here I can get them in a row, but if my sentence ends on the second row and my first row is longer than the first, the ending text is placed way further than it needs to be:
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Window 2.0
Window {
visible: true
width: 400
height: 400
property bool switchOn: false
Rectangle {
color: '#D3D3D3'
anchors.fill: parent
Row {
anchors.horizontalCenter: parent.horizontalCenter
Label {
id: sentence
text: qsTr("The switch is currently ")
color: 'black'
width: 300
wrapMode: Text.Wrap
font.pixelSize: 40
anchors.top: parent.top
}
Label {
id: endText
text: switchOn ? qsTr(" off ") : qsTr(" on ")
font.pixelSize: 40
color: "white"
anchors.top: sentence.top
anchors.topMargin: 45
// #disable-check M16
background: Rectangle {
color: switchOn ? "grey" : "red"
radius: 8
}
}
}
Switch {
id: switch1
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
anchors.topMargin: 150
text: qsTr("Switch")
onToggled: switchOn = !switchOn
}
}
}
You can do that by using the lineLaidOut signal of the Label. It gives you information about each line's geometry (you can also modify them if needed):
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Window 2.0
Window {
id: root
visible: true
width: 400
height: 400
property bool switchOn: false
Rectangle {
color: '#D3D3D3'
anchors.fill: parent
Label {
id: sentence
text: qsTr("The switch is currently ")
color: 'black'
anchors.horizontalCenter: parent.horizontalCenter
width: 300
wrapMode: Text.Wrap
font.pixelSize: 40
anchors.top: parent.top
property real lastLineY
property real lastLineWidth
onLineLaidOut: line => {
if (line.isLast) {
lastLineY = line.y;
lastLineWidth = line.implicitWidth
}
}
Label {
id: endText
text: root.switchOn ? qsTr(" off ") : qsTr(" on ")
font.pixelSize: 40
color: "white"
x: sentence.lastLineWidth
y: sentence.lastLineY
background: Rectangle {
color: root.switchOn ? "grey" : "red"
radius: 8
}
}
}
Switch {
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
anchors.topMargin: 150
text: qsTr("Switch")
onToggled: root.switchOn = !root.switchOn
}
}
}
You can put the Labels within a Row, and horizontally center the Row.
Rectangle {
color: '#D3D3D3'
anchors.fill: parent
Row {
anchors.horizontalCenter: parent.horizontalCenter
Label {
id: sentence
...
}
Label {
id: endText
anchors.top: sentence.top
...
}
}
}

Mask from pictures, crop image behind cursor

I have a basic background from a blue image with a transparent background (PNG), how can I make a different background from the image after the arrow?
I tried the option using a mask, but it cuts the picture either in width or in height, this does not work
blue background:
it should be:
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Window 2.15
import QtQuick.Controls.Styles 1.4
import QtQuick.Extras 1.4
import QtQuick.Extras.Private 1.0
import QtGraphicalEffects 1.0
Window {
width: 1280
height: 480
visible: true
title: qsTr("Hello World")
color: "#000"
CircularGauge {
id:gauge
property bool accelerating
width: 377
height: 377
anchors.top: parent.top
anchors.horizontalCenter: parent.horizontalCenter
anchors.topMargin: 101
maximumValue:8
value: accelerating ? maximumValue : 0
Component.onCompleted: forceActiveFocus()
Behavior on value { NumberAnimation { duration: 1500 }}
Keys.onSpacePressed: accelerating = true
Keys.onReleased: {
if (event.key === Qt.Key_Space) {
accelerating = false;
event.accepted = true;
}
}
style: CircularGaugeStyle {
labelStepSize: 1
labelInset: outerRadius / 6
minimumValueAngle: -110
maximumValueAngle: 110
background: Rectangle {
id: rectangle
implicitHeight: gauge.height
implicitWidth: gauge.width
color:"Transparent"
anchors.centerIn: parent
radius: 360
Image {
width: 417
height: 287
anchors.top: parent.top
source: "Blue_bg.png"
anchors.topMargin: -23
anchors.horizontalCenter: parent.horizontalCenter
asynchronous: true
sourceSize {
}
}
}
foreground: Item {
Text {
id: speedLabel
anchors.centerIn: parent
anchors.verticalCenterOffset: -20
text: "126"
font.pixelSize:76
color: "white"
antialiasing: true
}
}
tickmarkLabel: Text {
font.italic: true
font.bold: true
text: styleData.value
font.pixelSize: 30
color: styleData.value <= gauge.value ? "white" : "#ffffff"
antialiasing: true
}
}
}
}
How can I achieve this effect?
You can use a Canvas to draw an arc (see Draw an arc/circle sector in QML?). If you combine this with an OpacityMask (see QML Circular Gauge) you can mask the blue "background" (it's more like a foreground in the given example) to make that cool speedometer :-)
import QtQuick 2.12
import QtQuick.Window 2.12
import QtGraphicalEffects 1.0
Window {
width: 640
height: 480
visible: true
Image {
id: img
source: "blue.png"
visible: false
}
Canvas {
id: mask
anchors.fill: img
property double angle: 45
onPaint: {
var ctx = getContext("2d");
var centerX = width / 2;
var centerY = height / 2;
ctx.beginPath();
ctx.fillStyle = "black";
ctx.moveTo(centerX, centerY);
ctx.arc(centerX, centerY, width / 4, (Math.PI) * (1 + angle / 180), 0, false);
ctx.lineTo(centerX, centerY);
ctx.fill();
}
}
OpacityMask {
anchors.fill: img
source: img
maskSource: mask
}
}

Scroll Bar is not working in ScrollView qml

I'm trying to use a scrollbar inside a scrollview. The scrollbar shows up and I can interact with it (hover/pressed), but it doesn't move, and I can't understand why. I wrote my code by following the official documentation and online examples.
Here's the code:
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15
Window {
width: 740
height: 580
visible: true
color: "#00000000"
title: qsTr("Hello World")
Rectangle {
id: rectangle
color: "#40405f"
anchors.fill: parent
Button {
id: button
text: qsTr("Menu")
anchors.left: parent.left
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.leftMargin: 10
anchors.bottomMargin: 466
anchors.topMargin: 74
onClicked: animationMenu.running = true
}
ScrollView {
id: scrollView
width: 0
anchors.left: button.right
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.leftMargin: 10
anchors.bottomMargin: 10
anchors.topMargin: 10
clip: true
Rectangle {
id: rectangle1
color: "#00000000"
border.color: "#00000000"
border.width: 0
anchors.fill: parent
PropertyAnimation {
id: animationMenu
target: scrollView
property: "width"
to: if(scrollView.width == 0) return 240; else return 0
duration: 800
easing.type: Easing.InOutQuint
}
Column {
id: columnMenu
width: 0
anchors.fill: parent
spacing: 10
Button {
id: button1
text: qsTr("Button")
}
Button {
id: button2
text: qsTr("Button")
}
Button {
id: button3
text: qsTr("Button")
}
Button {
id: button4
text: qsTr("Button")
}
}
}
ScrollBar {
id: vbar
hoverEnabled: true
orientation: Qt.Vertical
size: scrollView.height / rectangle1.height
anchors.top: parent.top
anchors.right: parent.right
anchors.bottom: parent.bottom
wheelEnabled: true
pressed: true
active: true
}
}
}
}
Ok, so I edited the code to a smaller version so that it can be run.
Some advices:
Use anchors or Layouts. Do not use fixed values or some kind of treats, no matter if it works. The long term value of your code will be bad.
You should read carefully the (ScrollView documentatio). Also the Size section and the Touch and Mouse Interaction Section.
I am able to modify your example without the animation.
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.12
import QtGraphicalEffects 1.15
Window {
width: 740
height: 580
visible: true
color: "#00000000"
title: qsTr("Hello World")
Rectangle {
id: rectangle
color: "#40405f"
anchors.fill: parent
RowLayout{
anchors.fill: parent
Button {
id: button
text: qsTr("Menu")
width: 100
height: 50
}
ScrollView {
id: scrollView
Layout.fillWidth: true
Layout.fillHeight: true
RowLayout{
implicitHeight: 2000
implicitWidth: 2000
Column {
id: columnMenu
width: 0
anchors.fill: parent
spacing: 10
Repeater{
model: 50
delegate: Button {
text: qsTr("Button")
}
}
}
}
}
}
}
}

QML ListView::contentWidth is wider than actual content

Trying to implement ListView's content scroll by clicking on a button. When scrolling towards the end of the view ListView's content does not stop at the end of the last picture it overscrolls. Below I provided the minimum working example as well as the preview what goes wrong. Just change the .img path to make it work on your PC. I was looking for some help in sources of ListView and its inherited parent Flickable but nothing that could help to resolve the problem. How to make it stop at the end of the last picture?
import QtQuick 2.14
import QtQuick.Window 2.14
Window {
visible: true
width: 1024
height: 300
Item {
id: root
anchors.fill: parent
property var imagesUrlModel: ["file:///C:/Users/mikha/OneDrive/Изображения/toyota.jpg",
"file:///C:/Users/mikha/OneDrive/Изображения/toyota.jpg"
]
property int _width: 0
Component {
id: imageDelegate
Image {
id: image
sourceSize.height: 300
source: modelData
fillMode: Image.Stretch
}
}
Rectangle {
id: leftButton
anchors.top: root.top
anchors.bottom: parent.bottom
anchors.topMargin: 15
anchors.leftMargin: 10
anchors.left: parent.left
color: "green"
width: 25
MouseArea {
anchors.fill: parent
onClicked: {
listView.contentX = listView.contentX > 0
? listView.contentX - 50 > 0 ? listView.contentX - 50 : 0
: 0
}
}
}
Rectangle {
id: rightButton
anchors.top: root.top
anchors.bottom: parent.bottom
anchors.topMargin: 15
anchors.rightMargin: 10
anchors.right: parent.right
color: "green"
width: 25
MouseArea {
anchors.fill: parent
onClicked: {
listView.contentX = listView.contentX < listView.contentWidth
? listView.contentX + 50
: listView.contentWidth
//wrong content width
}
}
}
ListView{
id: listView
clip: true
boundsBehavior: Flickable.StopAtBounds
anchors.topMargin: 15
anchors.left: leftButton.right
anchors.right: rightButton.left
anchors.top: root.top
anchors.bottom: parent.bottom
spacing: 5
orientation: ListView.Horizontal
model: root.imagesUrlModel
delegate: imageDelegate
}
}
}
In your example just change listView.contentWidth to listView.contentWidth-listView.width in onClicked event for rightButton. But that's not enough. You should check whether the listView.contentX+50 is not overflowing listView.contentWidth-listView.width before you update the listView.contentX. In such case you need to update listView.contentX with difference between listView.contentWidth and listView.width.
Here it is:
listView.contentX = listView.contentX+50 <= listView.contentWidth-listView.width
? listView.contentX + 50
: listView.contentWidth - listView.width
I used another approach with repeater and scrollview and it has worked!
import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick 2.7
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
Window {
visible: true
width: 1024
height: 300
Item {
id: contentItem
anchors.fill: parent
Rectangle {
id: rightButton
anchors.top: contentItem.top
anchors.bottom: contentItem.bottom
anchors.rightMargin: 10
anchors.right: contentItem.right
color: "green"
width: 25
MouseArea {
anchors.fill: parent
onClicked: {
var allowedWidth = scrollView.flickableItem.contentWidth - scrollView.viewport.width
if(row.width < scrollView.viewport.width){
return
}
var offset = scrollView.flickableItem.contentX + 50
if(offset <= allowedWidth){
scrollView.flickableItem.contentX += 50
}
else {
scrollView.flickableItem.contentX = allowedWidth
}
}
}
}
ScrollView {
id: scrollView
anchors.left: contentItem.left
anchors.right: rightButton.left
anchors.top: contentItem.top
anchors.bottom: contentItem.bottom
clip: true
verticalScrollBarPolicy: Qt.ScrollBarAlwaysOff
horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff
property var imagesUrlModel: [
"file:///C:/Users/mikha/OneDrive/Изображения/toyota.jpg",
"file:///C:/Users/mikha/OneDrive/Изображения/toyota.jpg"
]
Row {
id: row
spacing: 15
Repeater {
id: repeater
anchors.left: parent.left
anchors.right: parent.right
model: scrollView.imagesUrlModel
delegate: Component {
id: imageDelegate
Image {
id: image
sourceSize.height: 300
source: modelData
fillMode: Image.Stretch
}
}
}
}
}
}
}

Resources