I am trying to write a little program, which has to connect to the Internet. While doing this, the app should show an animation which I have made in Flash Professional and exported as a sprite sheet.
I use the AnimatedSprite Type in QML:
import QtQuick 2.2
import QtQuick.Controls 1.1
ApplicationWindow {
visible: true
width: 640
height: 480
flags: Qt.FramelessWindowHint
| Qt.Window
color:"#00000000"
title:"Presenter Remote"
Rectangle{
color:"steelblue"
height:parent.height
width:parent.width
radius: 10
}
Image {
anchors.right: parent.right
anchors.top: parent.top
anchors.topMargin: -20
scale: 0.5
source: "close.png"
MouseArea {
width:parent.width
height:parent.height
onClicked: Qt.quit()
}
}
AnimatedSprite{
source: "Animation_Cloud.png"
anchors.centerIn: parent
frameHeight:313
frameWidth:232
running: true
frameCount:60
frameDuration: 20
width:232
height:313
}
}
When I compile and launch I get the sprite animating, but it moves from right to left while doing it.
How can I set the sprite still and just keep the "half arrows" moving?
The problem seems to be with your sprite sheet; remove the excess space from the right hand side of the .png.
Related
new bee here. I am trying something very simple and it is not working and I cannot figure out why.
I am on windows and according to to the documentation, I can easily re-size an image using "fillMode: Image.PreserveAspectFit"
https://doc.qt.io/qt-6/qml-qtquick-image.html
Here is the QML code
import QtQuick
Image {
id: buttonId
width: 60
height: 100
source: "large1.png"
fillMode: Image.PreserveAspectFit
}
This is getting included from a parent QML as such:
RowLayout
{
anchors.centerIn: parent
spacing: spacerWidth
MyImage {
}
}
The source image is 334x484 px
but here is what I get when I render the page:
my window is set to 480x272
Window {
width: 480
height: 272
visible: true
title: qsTr("Test")
What such a simple scaling is not working?
thank you.
With the user "SMR" help, it scaled properly as below:
Image {
id: buttonId
fillMode: Image.PreserveAspectFit
Layout.preferredWidth: 60
Layout.preferredHeight: 100
I am trying to apply some styles to a new qt 5.7 application I am working on and the following is not working at all. It gives the error:
qrc:/SignInView.qml:67 Cannot assign to non-existent property "style"
And I can't edit it in design mode for the same reasons.
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.1
import QtQuick.Controls.Styles 1.4
Page {
id: page1
ColumnLayout {
id: columnLayout1
height: 100
anchors.right: parent.right
anchors.left: parent.left
anchors.top: parent.top
Label {
text: qsTr("Label")
font.pointSize: 16
horizontalAlignment: Text.AlignHCenter
Layout.fillWidth: true
}
Image {
id: image1
width: 200
height: 200
Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
fillMode: Image.PreserveAspectCrop
anchors.horizontalCenter: parent
source: "qrc:/qtquickplugin/images/template_image.png"
Button {
id: button1
text: qsTr("Button")
anchors.bottomMargin: 10
anchors.rightMargin: 10
anchors.bottom: parent.bottom
anchors.right: parent.right
}
}
Rectangle {
id: field1
width: 200
height: 40
color: "#ffffff"
Layout.fillWidth: true
Label {
id: label1
text: qsTr("Full Name")
anchors.topMargin: 0
anchors.left: parent.left
anchors.leftMargin: 5
anchors.top: parent.top
}
TextField {
style: TextFieldStyle {
textColor: "black"
background: Rectangle {
radius: 2
implicitWidth: 100
implicitHeight: 24
border.color: "#333"
border.width: 1
}
}
}
}
}
}
I have being trying to follow this example:
http://doc.qt.io/qt-5/qml-qtquick-controls-styles-textfieldstyle.html
It fails at the style attribute in the Qt Creator giving the error that style doesn't exist.
I assume it's something with my libraries not loading or maybe the environment I have setup.
I don't have style in buttons or anywhere else either. I assumed if I had the imports it would work but it's not.
A related issue on SO is here: QML - How to change TextField font size
But here it seems to just work.
In Qt Quick Controls 2, there is no such property as TextField::style. In general, there is no way to use the style objects from Qt Quick Controls 1 with Qt Quick Controls 2. The APIs between the two major versions of Qt Quick Controls are not compatible. See the following documentation pages for more details:
Differences between Qt Quick Controls
Styling Qt Quick Controls 2
Customizing Qt Quick Controls 2
A new API-incompatible major version was introduced, because there is basically no way to make the heavily Loader-based architecture of Qt Quick Controls 1 perform reasonably well. Therefore all that dynamic loading of Components was ditched in Qt Quick Controls 2. The delegates that used to be dynamically instantiated from Components provided by a dynamically loaded style object are now part of the control instead, instantiated "in place". In essence:
TextField {
style: TextFieldStyle {
textColor: "white"
background: Rectangle { color: "black" }
}
}
vs.
TextField {
color: "white"
background: Rectangle { color: "black" }
}
You can read more about the history here. In particular, this post highlights the fundamental structural changes in Qt Quick Controls 2.
I'm fairly new to QML/Qt. Basically I would like to know how to apply a blur to the inside of the white rectangle seen on the photo below and only the inside so that it blurs the part of the background image within the rectangle. I tried doing this in a normal Qt project but don't think its possible without using QML.
It's possible. Use ShaderEffectSource item:
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtGraphicalEffects 1.12
import "qrc:/"
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Image {
id: bug
anchors.fill: parent
width: 32
height: 32
source: "qrc:/Original_bug.png"
ShaderEffectSource{
id: shader
sourceItem: bug
width: 128
height: 128
anchors{
right: parent.right
rightMargin: 32
verticalCenter: parent.verticalCenter
}
sourceRect: Qt.rect(x,y, width, height)
}
GaussianBlur {
anchors.fill: shader
source: shader
radius: 8
samples: 4
}
}
}
Using sourceRect property you can specify an area to be blurred.
There are some issues when resizing the source image. This example works good only for static one.
I wanted to have the Material style ProgressBar component, but with some modifications to make it's height adjustable.
So far so good, I had the result I wanted.
So I just copied this code inside MyPb.qml to use it as a component:
import QtQuick 2.11
import QtQuick.Templates 2.4 as T
import QtQuick.Controls.Material 2.4
import QtQuick.Controls.Material.impl 2.4
T.ProgressBar {
id: control
property real radius: 3
contentItem: ProgressBarImpl {
implicitHeight: control.height
scale: control.mirrored ? -1 : 1
color: control.Material.accentColor
progress: control.position
indeterminate: control.visible && control.indeterminate
}
background: Rectangle {
implicitWidth: control.width
implicitHeight: control.height
radius: control.radius
color: Qt.rgba(control.Material.accentColor.r, control.Material.accentColor.g, control.Material.accentColor.b, 0.25)
}
}
Which gives this result for the sake of example:
With the code:
Rectangle {
width: 600
height: 300
color: "black"
MyPb {
anchors.centerIn: parent
id: prg
width: 100
height: 20
indeterminate: false
radius: 5
visible: true
value: 0.5
}
}
Because ProgressBarImpl doesn't really support radius, the rounded corners are "buried" under the opaque progress rectangle as can be seen on the picture (left of progress bar).
Now, the reason I'm not making my own progress bar is that I want the "indeterminate" animation as well. So I thought it would be much
simpler to reuse the Qt implementation than starting making my own
animations.
So I wonder if there would be a way to have the Material progress bar, but apply to it some kind of treatment to get rounded corners both with indeterminate = false/true.
Any help would be appreciated!
See the following post in the Qt forum:
https://forum.qt.io/topic/91649/make-a-round-progress-bar/7
The progress bar proposed there consists of the following components:
a rounded Rectangle for the "trough" of the progress bar
an Item that acts as a rectangular clip path
a rounded Rectangle inside that Item, used as the coloured bar
Adapted to your question, I get the following code as a proof-of-concept:
import QtQuick 2.9
Rectangle {
property int percentage: 40
id: root
width: 400
height: 100
radius: height / 2
color: "#333"
Item {
id: cliprect
anchors.bottom: parent.bottom
anchors.top: parent.top
anchors.left: parent.left
width: parent.width * parent.percentage / 100
clip: true
Rectangle {
width: root.width
height: root.height
radius: height / 2
anchors.bottom: parent.bottom
anchors.left: parent.left
color: "#e33"
}
}
}
It should be easy to move that into a template / make it compatible with the Material properties.
You could try setting an OpacityMask on the contentItem using the background item as a mask source.
If that doesn't work out, it will be easier just to create a progress bar. It is a very trivial and non-interactive component with a tiny usage interface after all.
I have a TextArea. If I set padding constantly padding working normally.
import QtQuick 2.9
import QtQuick.Controls 2.2
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
TextArea{
font.pixelSize: 20
anchors.fill: parent
wrapMode: TextArea.Wrap
leftPadding: 100 //*parent.width/640
rightPadding: 100 //*parent.width/640
}
}
If I uncomment lines above then I have strange behavior.
What am I doing wrong?
Screenshot
It seems to be a bug, probably some updates are missing, when setting up the width of the contentItem of the ApplicationWindow, so the line lengths are not calculated properly.
If you write:
leftPadding: {
console.log(parent, parent.width)
return 100 * parent.width/640
}
You can see, that the parent.width is initially set to 0 and then changes to 640. When this change happens, there must be something going wrong with the signals.
A resize of the window will update the line lengths, so the proper layout is restored. You might try to file a bugreport on http://bugreports.qt.io to have it fixed.
Other than that, you may give an ID to your ApplicationWindow and use this instead of parent
import QtQuick 2.7
import QtQuick.Controls 2.0
ApplicationWindow {
id: win
visible: true
width: 640
height: 480
title: qsTr("Hello World")
TextArea{
font.pixelSize: 20
anchors.fill: parent
wrapMode: TextArea.Wrap
leftPadding: 100 * win.width/640
rightPadding: 100 * win.width/640
}
}