I have a problem with a BusyIndicator, what happens is that I have appointed BusyIndicator that when loading the feed is removed, but in my file. QML images do not appear in the feed, I wonder if there is any way to tell the BusyIndicator that when the image is displayed BusyIndicator remove.
Well I did this, you can give it a try.
Image
{
id : image1
source:"...your source here"
}
BusyIndicator
{
id:busy1
anchors.centerIn: parent
width:50
height:50
visible: image1.status == Image.Loading
running: image1.status == Image.Loading
}
//indicator only visible and run when image is loading. After image is being loaded or when Image.Ready, the busy indicator will disappear.
You can do something like this
Image{
id:remoteImage
source: "http://www.example.com/m.jpg"
onProgressChanged: {
if(progress==1.0)
busyIndicator.visible=false;
}
}
Related
Iam using QML Busyindicator when a user login or loading a data in a page or something like this, I want to be able to make the busyindicator overlay over the current window and make the window not editable, something similar to the messagebox when it shows up and disables all the Window, so I cant interact with the widgets on this window until the loading finish, something like the ProgressDialog in Android.
this is my code and what I try to do, also I tried to use MessageDialog and use this indicator inside it and remove all buttons, but it does not work.
Popup {
id: waitpop
width: 100
height: 100
BusyIndicator {
id: login_progress
running: true
anchors.fill: parent
}
anchors.centerIn: Overlay.overlay
closePolicy: Popup.NoAutoClose
}
this code shows the busy indicator but the user still can interact with the button and text field and everything, so any ideas?
The modal property prevents you from being able to click outside the popup.
Popup {
anchors.centerIn: Overlay.overlay
closePolicy: Popup.NoAutoClose
modal: true
BusyIndicator {
running: true
}
}
Currently I am getting images from server , so sometimes it takes some time to load or sometimes if there is no image on the server ,the image place is showing blank. So i need to show something/default image as long as the server image is not loaded.
I tried to do this, if there is no image on the server from where i'm loading image then I try to show a image from my local.
Is there any way to show a default image if the image is not loaded properly from server.
Image {
id:img
height: 100
width: 300
Component.onCompleted: {
if(there is no image on server){
img.source="assets/images/someimage.png"
}
else{
img.source="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8aHVtYW58ZW58MHx8MHw%3D&ixlib=rb-1.2.1&w=1000&q=80"
}
}
}
A possible solution is to place an Image on top of the main Image and when it is loaded hide the initial Image:
Image {
id: img
width: 300
height: 100
source: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8aHVtYW58ZW58MHx8MHw%3D&ixlib=rb-1.2.1&w=1000&q=80"
Image{
id: default_img
anchors.fill: parent
source: "assets/images/someimage.png"
visible: img.status != Image.Ready
}
}
I'm working on a QML based app. where I dynamically load the content. However when running the application it takes quite a long time (5-10 secs), so I need to show any loading screen or indicator while the whole content is being loaded. Can anyone suggest me how to do it ?
For example, after I login in my application it took some time to load the next page so within that oeriod of time i want to show the loading screen.
App {
id: app
height: 400
width: 200
Rectangle {
id: rectangle
Button {
id: button
text: qsTr("GO TO NEXT PAGE")
onClicked:stackView.push("page2.qml")
}
Image {
id: image
fillMode: Image.PreserveAspectFit
source: "default-app.png"
}
}
}
Suppose this is my code then where can i use loader ? I never used it before
You can use the status from a Loader component (I'm guessing you are using that since you are loading "dynamically"). Then use that in a BusyIndicator.
Loader {
id: loader
asynchronous: true
...
BusyIndicator {
anchors.centerIn: parent
running: loader.status == Loader.Loading
}
}
Heck, the Qt docs for BusyIndicator should have get you going!
I have a background image for my page, and I want to implement a sort of page refresh when the background is clicked. However, I didn't find any actions for the image element in QT quick.
What's the right way to implement this?
You need to use MouseArea to handle click events.
Image {
source: "myimage.png"
MouseArea {
anchors.fill: parent
onClicked: {
// do what you want here
}
}
}
I'm trying to play test video with qml by this code:
import QtQuick 2.2
import QtMultimedia 5.0
Item {
width: 300
height: 300
MediaPlayer {
id: player
source: "C:\\Downloads\\video.mp4"
}
VideoOutput {
id: video
anchors.fill: parent
source: player
}
MouseArea {
anchors.fill: parent
onPressed: player.play()
}
}
But, when I click on view, nothing happens. And if I change onPressed event to something else action (not with the player), it works fine, then it's not a MouseArea problem.
Where did I wrong?
Thank you.
The file path seems to be wrong. Since baclslashes need to be escaped in string litterals, the actual path remaining is:
c:\Downloads\video.mp4
That's a path, but not an URL. The correct URL is (see File URIs in Windows):
file:///C:/Downloads/video.mp4
On your code source:
C:\\Downloads\\video.mp4
should be source:
C://Downloads//video.mp4