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.
Related
I want to have a rectangle that has a background animation.
take a look at this
codepen.io/shshaw/pen/DxJka
How can I set this as my rectangle background so that it shows this animation in my application?
I want to be able to "load" premade css animations like the one in the link.
If you think to use css, you can use a WebView and in this WebView you can load a html file from resource that read css file from resources too
Within QML there is the possibility to use particle emitters, see Qt Docs for some information. The following should get you going a bit.
import QtQuick 2.11
import QtQuick.Controls 2.4
import QtQuick.Controls.Material 2.4
import QtQuick.Particles 2.0
Item {
Rectangle {
color: "#F9A72B"
anchors.fill: parent
}
ParticleSystem { id: particles }
ImageParticle {
system: particles
source: "qrc:/cloud.svg"
alpha: 0.4
alphaVariation: 0.2
}
Emitter {
system: particles
emitRate: 1
lifeSpan: 70000
velocity: PointDirection { x: -10; xVariation: -5; }
size: 20
sizeVariation: 10
anchors.top: parent.top
anchors.right: parent.right
anchors.bottom: parent.bottom
anchors.margins: 5
}
}
Obviously, you will have to play with the parameters to get it to your liking.
Can anyone tell me why the following fails?
The Rectangles specify border.width: top.bw where bw is a property in the top Window which has id:top. But the result is zero.
If I replace top.bw with just bw it works in this demo but not in the real application which might have a bw defined in an intermediate object. So I need to specify top.bw somehow.
What's wong with this?
import QtQuick 2.14
import QtQuick.Window 2.14
Window {
id: top
width:800; height: 800
property double bw: 15
ListView {
anchors.fill:parent
model: 3
delegate: Rectangle {
width: 100; height: 100
border.width: top.bw
}
}
}
To understand the problem you must add the following:
Component.onCompleted: console.log(top)
And you will get the following:
qml: QVariant(QQuickAnchorLine, )
So it appears that "top" is an undocumented property in Item(This property is for the use of anchors, for more information read Positioning with Anchors) causing a variable name conflict. The solution is to use another id like "root".
import QtQuick 2.14
import QtQuick.Window 2.14
Window {
id: root
width:800; height: 800
property double bw: 15
ListView {
anchors.fill:parent
model: 3
delegate: Rectangle {
width: 100; height: 100
border.width: root.bw
}
}
}
I have a simple QuickControls2 QML design where an image should stretch horizontally to fill the application window and maintain its aspect ratio. But when I run my program, the image doesn't scale/stretch.
Is the problem that the image is smaller than the current window size and QT doesn't upscale/increase the size of the image? Is there a setting to make QT resize the image to fill the width regardless of image size?
Can you let me know what is wrong and how I can fix it?
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
ApplicationWindow {
id: applicationWindow
visible: true
width: 640
height: 480
title: qsTr("Scroll")
ColumnLayout {
id: mainLayout
anchors.fill: parent
Image {
id: imagePane
Layout.fillWidth: true
fillMode: Image.PreserveAspectFit
source: "placeholder.jpg"
}
}
}
Try this:
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
ApplicationWindow {
id: applicationWindow
visible: true
width: 640
height: 480
title: qsTr("Scroll")
ColumnLayout {
id: mainLayout
anchors.fill: parent
Image {
id: imagePane
Layout.preferredWidth: parent.width
Layout.preferredHeight: parent.height
fillMode: Image.PreserveAspectFit
source: "placeholder.jpg"
}
}
}
Using Image.PreserveAspectFit, image is scaled uniformly to fit without cropping ,
Now since you are not filling Layout height, image can't scale beyond it's implicit height.
As your requirement is to make QT resize the image to fill the width regardless of image size means you accept to crop the image beyond the height limit, in which case you need to use:
fillMode: Image.PreserveAspectCrop
I have ListView with my own delegate.
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
ItemDelegate
{
height: 40
Row
{
spacing: 10
anchors.verticalCenter: parent.verticalCenter
CheckBox
{
}
}
}
The problem is that check boxes does not resize despite ItemDelegate's height.
I get this for height = 40:
I get this for height = 10:
I've tried playing with CheckBox'es width and height values - did not help.
Is it possible to make it smaller at all, without customizing it?
You can, in theory, increase the size of the indicator, but it won't increase the size of the checkmark image:
CheckBox {
text: "CheckBox"
anchors.centerIn: parent
checked: true
indicator.width: 64
indicator.height: 64
}
There are a couple of reasons why the image is not scaled. First of all, the checkmark would be blurry if it was upscaled. And more importantly, to retain best possible performance. Instead of calculating all the sizes relative to each other and that way creating huge amounts of bindings like Qt Quick Controls 1 did, Qt Quick Controls 2 bases its scalability instead on the automatic high-DPI scaling system introduced in Qt 5.6. You get simply a different #Nx image when running with scale factor N.
I'm afraid you need to customize your checkbox to get a different size.
Example:
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQml 2.2
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Component {
id: contactDelegate
ItemDelegate
{
id: item
width: 40
height: 40
CheckBox
{
id: control
text: name
indicator: Rectangle {
implicitWidth: item.width
implicitHeight: item.height
x: control.leftPadding
y: parent.height / 2 - height / 2
border.color: control.down ? "#dark" : "#grey"
Rectangle {
width: 25
height: 25
x: 7
y: 7
color: control.down ? "#dark" : "#grey"
visible: control.checked
}
}
}
}
}
ListView {
width: 180;
height: 200;
spacing: 10
model: ContactModel {}
delegate: contactDelegate
}
}
By the way, the spacing property should be set in your ListView, not the delegate. Otherwise, it has no effect.
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.