I want to display a simple gif using qml (pyside backend), but it uses almost 100-400 mb of memory. Can I display a gif without using this much memory?
Something like telegram Animated images: https://telegram.org/blog/animated-stickers. The size of telegram animated images are six times smaller than the average photo.
Code:
AnimatedImage
{
width: 37
height: 28
scale: 0.7
source: "Icons/gifIcon.gif"
anchors.left: parent.left
anchors.top: parent.top
transform: Translate {x: 17; y: 2}
z: 10
}
Related
I'm trying to loop a video on the background of my Pyside6 application, currently implementing it through QML.
Everything works fine so far, but I've noticed the media player clears the screen for a moment before actually repeating the video.
I've seen it was possible to workaround this issue by using a property called "flushMode" in the old Qt5 QtMultimedia, but said property seems to have disappeared in Qt6 (or maybe it's just not implemented yet, I don't know).
I was wondering if there is any other way to make a seamless smooth video loop in QtMultimedia 6.2 (using QML, since my app is running on Python).
This is what I have so far (the media player is separated from the main app because of reasons):
import QtQuick
import QtMultimedia
Rectangle {
id: playVid2
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.rightMargin: 0
anchors.leftMargin: 0
anchors.bottomMargin: 0
anchors.topMargin: 0
MediaPlayer {
id: mpVid2
audioOutput: AudioOutput{}
videoOutput: voVid2
source: "media/video/2.mp4"
loops: MediaPlayer.Infinite
}
VideoOutput {
id: voVid2
anchors.fill: parent
fillMode: VideoOutput.PreserveAspectCrop
}
Component.onCompleted: mpVid2.play()
}
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.
I'm developing a mobile app using App Studio for ArcGIS.
All my QML files has been set a fixed size and x,y axis according to my Xd files. But when I run it on my mobile and other mobiles - it does not support properly. I tried to find different solutions but I was not able to apply it on my page. Also, explored the scalability documentation of QML, but I was not able to understand it.
here is the sample code
App{
id:app
visible: true
x: 0
y: 0
width: 375
height: 812
Page{
anchors.fill: parent
background:
Image {
id: image
x: 0
y: 0
width: 375
height: 812
fillMode: Image.PreserveAspectFit
source: "images/login_backgroud.png"
}
Button {
id: button
x: 52
y: 674
width: 284
height: 40
text: qsTr("Login")
spacing: 0
font.pointSize: 16
}
}
}
Use anchors and layouts instead of hard coding x and y. Set attribute for enabling high DPI scaling. Refer to this Qt documentation for supporting GUI scalability in different form factors, resolutions and DPI.
https://doc.qt.io/qt-5/scalability.html
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.
imagine that we have arrow image as here:
but we want to make from this image an animation:
question
This not very elegant animation was created from a set of different arrow images.
But i want to make same animation by qml. Do you know any components(preferably qml but if you do not know, you can advise me qt classes) with which help i can reach that?
And another question, does it make sense from the point of view of performance to search any ways to reach that instead of combine set of images to gif-format?
Updating based on new information that the arrow has a background.
You need to crop out the arrow to an image file with a transparent background and have the background as a separate image.
From there, you can use a similar concept as below, but with the arrow growing. I believe you will be able to find an image mode that fits the image vertically and does not manipulate it horizontally. I would start by trying fillMode: Image.TileHorizontally.
Treat this as pseudo code, I don't have access to a computer to run this on at the moment.
Image
{
id: backgroundImage
source: "background.png"
Image
{
id: arrowWithTransparentBackground
fillMode: Image.TileHorizontally
source: "arrow.png"
anchors.left: parent.left
anchors.top: parent.top
anchors.bottom: parent.bottom
SequentialAnimation on width {
loops: Animation.Infinite
PropertyAnimation { from 0: to: parent.width }
}
}
}
Old answer for reference, before knowing there was a background to the image:
QML very nicely animates size changes. You could easily have a rectangle on top of your image anchored to the left side that is white and grows from 0 to arrow.width.
Treat this as pseudo code, I don't have access to a computer to run this on at the moment.
Image
{
id: arrowImage
source: "arrow.png"
Rectangle
{
color: "white"
anchors.left: parent.left
anchors.top: parent.top
anchors.bottom: parent.bottom
SequentialAnimation on width {
loops: Animation.Infinite
PropertyAnimation { from 0: to: parent.width }
}
}
}