QML ApplicationWindow zooms in unintentionally and doesn't show all components - qt

So I'm trying to create an application in QML, and doing so by using an ApplicationWindow. The following code is in main.qml, where some of the components are defined in other files (they are not essential for this problem):
import QtQuick 2.12
import QtQuick.Extras 1.4
import QtQuick.Controls 2.5
import QtQuick.Controls.Styles 1.4
import QtQuick.Window 2.3
import QtDataVisualization 1.3
import Qt3D.Core 2.9
import Qt3D.Render 2.9
import QtCharts 2.3
ApplicationWindow {
id: window
width: 1280
height: 720
//visibility: ApplicationWindow.FullScreen
visible: true
color: "#444444"
Speedometer {
id: speedometer
x: 49
y: 144
width: 306
height: 320
minValue: 0
maxValue: 600
visible: true
}
Thermometer {
id: thermometer
x: 1170
y: 233
scale: 2
minValue: 0
maxValue: 50
visible: true
}
Slider {
id: slider
from: 0
to: 100
x: 28
y: 594
width: 1224
height: 98
font.pointSize: 14
hoverEnabled: false
enabled: false
live: true
snapMode: Slider.NoSnap
value: 0
visible: true
Behavior on value {
NumberAnimation {
duration: 200
}
}
background: Rectangle {
x: slider.leftPadding
y: slider.topPadding + slider.availableHeight / 2 - height / 2
implicitWidth: 200
implicitHeight: 4
width: slider.availableWidth
height: implicitHeight
radius: 2
color: "#999999"
}
handle: Rectangle {
x: slider.leftPadding + slider.visualPosition * (slider.availableWidth - width)
y: slider.topPadding + slider.availableHeight / 2 - height / 2
implicitWidth: 26
implicitHeight: 26
radius: 13
color: "#0099ff"
}
}
Timer {
interval: 200
running: true
repeat: true
property var distance: Math.random
onTriggered: update()
}
function update(){
var distance = (Math.random() * 0.03) + 0.1;
var speed = (distance * 50) / 0.02;
slider.value = slider.value + distance;
speedometer.value = speed;
thermometer.value = Math.random() * 25 + 25;
}
DataManager {
id: manager
onNewVelocity: {
lineSeries.append(velocity.x, velocity.y)
chartView.title = name
}
}
Timer {
id: timer
repeat: true
interval: 1
onTriggered: {
manager.dummyData();
}
}
Chart {
id: chart
height: 250
width: 250
x: 1000
}
Text {
id: labelText
color: "white"
width: 300
height: 100
}
Button {
id: startThread
text: "Start"
onClicked: {
timer.start()
}
}
Button {
id: stopThread
text: "Stop"
x: 200
onClicked: {
timer.stop()
}
}
Button {
id: clearGraph
text: "Clear"
x: 100
onClicked: {
lineSeries.clear()
}
}
}
The content itself isn't that important, but the thing that is, is the fact that when I personally run the project, the application window doesn't show what it is supposed to. And I'd like to emphasize: I'm collaborating with others on this exact project, and when they run the exact same code as me, they get different results.
The first image is what I get when running the code:
The second image is what they get, and what is actually supposed to show when running the code:
So I've been trying to search Google for every possible solution, but have found nothing. I've reinstalled Qt and QtCreator, but to no prevail. We are running the exact same thing, but I'm the only one that don't see all components show up. The first image is way more zoomed in than the latter, and I'd really like if anyone knew how to fix this. I've struggled to find anything that could help so far
(Extra note: the code I ran didn't include the graph as it wasn't up to date with current version on git, but the other things remain the same. So the bar below and the thermometer component on the right SHOULD be visible, but they're not).

I eventually found a solution to what seems to be a bug from Qt's end. I had to launch QtCreator via a qtcreator.bat file in the same directory as qtcreator.exe with the following content:
#echo off
set QT_SCALE_FACTOR_ROUNDING_POLICY=Round
set QT_AUTO_SCREEN_SCALE_FACTOR=0
qtcreator.exe
When I now run the project, it shows the correct scale :)

Related

QML: Move the rectangle outside the window

Is it possible to move the rectangle outside the window? The only thing I came up with is to write custom logic that will resize the top window when moving the rectangle outside the window.
Current behavior (imgur .gif):
Current behavior
Desired behavior (imgur .png):
Desired behavior
main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
Window {
id: root
width: 300
height: 500
visible: true
flags: Qt.ToolTip | Qt.FramelessWindowHint | Qt.WA_TranslucentBackground
color: "#00000000"
Rectangle {
id: draggable
color: "blue"
x: 100
y: 100
width: 100
height: 100
MouseArea {
anchors.fill: parent
property real lastMouseX: 0
property real lastMouseY: 0
onPressed: {
lastMouseX = mouseX
lastMouseY = mouseY
}
onMouseXChanged: {
draggable.x += (mouseX - lastMouseX)
}
onMouseYChanged: {
draggable.y += (mouseY - lastMouseY)
}
}
}
Rectangle {
color: "blue"
x: 100
y: 300
width: 100
height: 100
// ...
}
}
Windows can be children of other Windows. The Window behavior is still subject to certain platform-dependent behavior, but on a Desktop environment child Windows should still be able to move outside the parent Window. So simply changing your Rectangle to be a Window will give you the desired effect.
Window {
id: root
Window {
id: draggable
...
}
}

QML Hold Image Button to continuously increment value

I am trying to have a display value continuously increment by 1 while a button is pressed and held down. I implemented my button with an Image element which is using a MouseArea to increment the display value when pressed once. I am not sure if there is another default signal that supports it, and if there is, I can't find one.
I am using Python+Pyside6, but would hope this is something I can accomplish with just QML.
Image{
id: incrementValue
source: "icons/arrow-up-circle-sharp.svg"
fillMode: Image.PreserveAspectFit
property int size: 50
sourceSize.width: size
sourceSize.height: size
smooth: true
Layout.alignment: Qt.AlignTop
visible: true
MouseArea {
anchors.fill: parent
onClicked: {
displayValue.text = (( displayValue.text*1.00) + 1.0).toLocaleString(Qt.locale("f"))
}
}
}
Text{
id: displayValue
text: "00.00"
}
I write this Example For you :
If you want set Image for Button Put Image inside it.
import QtQuick 2.12
import QtQuick.Window 2.12
import Qt.labs.qmlmodels 1.0
import QtQuick.Controls 2.13
Window {
visible: true
width: 400
height: 400
title: qsTr("Hello World")
property int counter: 0
Button {
id: button
x: 45
y: 46
text: qsTr("up")
onClicked:
{
counter +=1
}
}
Button {
id: button1
x: 188
y: 46
text: qsTr("down")
onClicked:
{
counter -=1
}
}
Text {
id: name
x: 118
y: 130
width: 98
height: 60
text: counter
}
}
As I understand from your question :
There is PressAndHold Signal in Button use onPressAndHold instead of onClicked.
Use a Timer with a 1s interval. Bind it’s running property to the pressed property of a MouseArea or Button. On timeout, increase respectively decrease the value.

How can a checkbox color be customized without losing checkmark in qml?

How can a checkbox color of the indicator be customized without changing the checkmark it shows by default?
I'm going to illustrate what happens by default:
import QtQuick 2.0
import QtQuick.Controls 2.2
ApplicationWindow {
id: window
title: "Stack"
visible: true
width: 300
CheckBox {
}
}
If i go to documentation the examples I see there don't mantain the checkmark…
https://doc.qt.io/qt-5.9/qtquickcontrols2-customize.html
Because of that, instead of a Rectangle i use a Text component on the indicator property
import QtQuick 2.0
import QtQuick.Controls 2.2
ApplicationWindow {
id: window
title: "Stack"
visible: true
width: 300
CheckBox {
id: control
indicator: Rectangle {
implicitWidth: 26
implicitHeight: 26
x: control.leftPadding
y: parent.height / 2 - height / 2
radius: 3
border.color: control.down ? "#17a81a" : "#21be2b"
Text {
width: 14
height: 14
x: 1
y: -2
text: "✔"
font.pointSize: 18
color: control.down ? "#17a81a" : "#21be2b"
visible: control.checked
}
}
}
}
It doesn't look exactly like the default:
Is there anything we can do to make it like the default one?
A brute force solution is to copy the implementation of the CheckBox.qml to your own code and then to change the required parts. It turned out that the check symbol is not a text, but moreover a simple image.
The following would give you a CheckBox being the same as CheckBox.qml, but having a green Check-Symbol instead of a black work. I copied this code from Qt 5.13.
import QtQuick 2.12
import QtQuick.Templates 2.12 as T
import QtQuick.Controls 2.12
import QtQuick.Controls.impl 2.12
ApplicationWindow {
id: window
title: "Stack"
visible: true
width: 300
CheckBox {
id: control
indicator: Rectangle {
implicitWidth: 28
implicitHeight: 28
x: control.mirrored ? control.leftPadding : control.width - width - control.rightPadding
y: control.topPadding + (control.availableHeight - height) / 2
color: control.down ? control.palette.light : control.palette.base
border.width: control.visualFocus ? 2 : 1
border.color: control.visualFocus ? control.palette.highlight : control.palette.mid
ColorImage {
x: (parent.width - width) / 2
y: (parent.height - height) / 2
defaultColor: "#353637"
color: "green" // Added this
source: "qrc:/qt-project.org/imports/QtQuick/Controls.2/images/check.png"
visible: control.checkState === Qt.Checked
}
Rectangle {
x: (parent.width - width) / 2
y: (parent.height - height) / 2
width: 16
height: 3
color: control.palette.text
visible: control.checkState === Qt.PartiallyChecked
}
}
}
}
I guess, that there is no way to override parts of the ColorImage component, as there is no id being set, so that the color property cannot be redefined.
Here's a somewhat hackish solution, that could break if CheckBox implementation details change:
CheckBox
{
font.italic: !hasReferential
font.pointSize: 8
indicator.width: 15
indicator.height: 15
Component.onCompleted: indicator.children[0].color = "green"
}

Why are changes to the QML code sometimes not reflected when hitting 'Run' and how to solve it?

In this Qt Quick simple example, I want that when I move a Racked upwards, we have a message on console.log showing that movement and another message when the Racket is moved downwards. I've written this code for that:
Racket.qml:
import QtQuick 2.8
Rectangle {
id: root
width: 15; height: 50
x: 400; y: 100
color: "red"
property int oldY: 100
property bool yUwards: false
property bool yDwards: false
onYChanged: {
if( y > oldY) {
yDwards = true
yUwards = false
console.log("Racket moved downwards.\n")
}
else if( y < oldY) {
yDwards = false
yUwards = true
console.log("Racket moved upwards.\n")
}
oldY = y
}
MouseArea {
anchors.fill: parent
drag.target: root
drag.axis: Drag.YAxis
drag.minimumY: 10
drag.maximumY: 440
}
}
main.qml:
import QtQuick 2.8
import QtQuick.Window 2.2
Window {
visible: true
width: 800
height: 600
Rectangle {
id: table
width: 700; height: 500
border.width: 10
border.color: "black"
color: "white"
Racket {
id: redRacket
x: 630; y: 100
color: "red"
}
}
}
When I at the first time hit Run, the code didn't work, so I hit clean all, run qmake and then rebuild all, then it worked!
How does a new QML programmer like me figure out that the code is fine but this process is needed to successfully run the program?
This is indeed a bug in QMake.
As #Mitch posted in his comment, a bug report was already filed: bugreports.qt.io/browse/QTBUG-13334
If you read through the comments in that bug report, a workaround for the problem was posted. Have been using it for a couple of months now and it seems to fix the issue.
All you have to do is paste this at the end of your pro file.
#update qml
qml_scenes.depends = $$PWD/resources/scene1.qml $$PWD/resources/scene2.qml ...
qml_scenes.commands =
QMAKE_EXTRA_TARGETS += qml_scenes

QML: changing source of Video item causes hang

I have a trouble in changing Video item sources. In a code below I pick randomly a mov file from the folder on a mouse click. After 2 - 7 (max) times it always hangs (on changing). All movs are rather small (700 kb - 7 mb), H.264, Mac OS. Any ideas how to fix it?
import QtQuick 2.4
import QtMultimedia 5.4
import Qt.labs.folderlistmodel 2.1
Item {
id:container
property bool change_video: false
width: 320
height: 240
FolderListModel {
id: folderModel
folder: "file:///Users/michaellevin/Dropbox/Movie/Xcanvas/XXX/animation/"
nameFilters: ["*.mov"] }
Video
{ id: vvv
width: container.width
height: container.height
//autoLoad: true
autoPlay: true
anchors.fill: parent
anchors.margins: 0
onStopped: play()
}
MouseArea {
id: xxx
anchors.fill: parent
onClicked: {
var index = Math.floor(Math.random()*(folderModel.count))
print(index)
//vvv.stop()
vvv.source = folderModel.get(index, "fileURL")
//vvv.play()
}
}
Timer {
id: start; interval: 10; running: true; repeat: false;
onTriggered: vvv.source = folderModel.get(2, "fileURL")
}
}

Resources