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")
}
}
Related
I am using QT v5.12.6 and in my application i am planning to use Progress Bar during application bootup for around 15secs. In this 15secs operations like:
QML components creation.
connection with the server.
Other bootup operations will be running in the background.
Once, all the bootup operation is done i will hide my splash screen which is just a Rectangle which includes Loading text with a progress bar. For this 15 secs i will be incrementing the progress bar but the progress bar doesn't increment/move for some 10 secs. It looks like it is hanged, but if i use a busy indicator it starts to rotate. Unfortunately, i can't use busy indicator component as i need a look and feel like a progress bar.
My application runs on a embedded platform which has low end processor and very less RAM speed. I am assuming this problem is due to the Load on the UI as many components is getting created.
Is there any difference between busy indicator and Progress bar and also any suggestions on how to handle UI load on the bootup ?
Edit 1: Added an example. I have tried my level best to mimic the problem. In this example both the busyindicator and Progress bar is getting stuck for sometime. But in the embedded device Busy indicator works but no idea how. After running the application Please click on Click Me button.
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.3
Window {
property int pbValue:0
visible: true
width: 500
height: 400
title: qsTr("Hello World")
Rectangle{
id: mySplashScreen
anchors.fill: parent
ProgressBar{
id: pBar
height: 20
width: parent.width
anchors.bottom: parent.bottom
from:0
value : pbValue
to:30
}
BusyIndicator{
anchors.right: parent.right
running: (pbValue < pBar.to +1)
}
Button{
text: "click me"
onClicked: {
//Create component equivalent to my application which has "n"
//number of components like buttons, combobox, chart view etc.
//Here just creating the rectangle more number of times.
for(var i = 0 ; i < 15000 ;i++) //HINT : Increase/decrease the value if problem is not seen
{
var comp = mycomp.createObject(mySplashScreen)
}
}
}
}
Timer{
id:timer
interval: 250
running: (pbValue < pBar.to +1)
onTriggered: {
pbValue += 1;
}
}
Component{
id:mycomp
Rectangle{
width: 200
height: 200
color: "green"
}
}
}
Move your object creation code into a separate Timer with a small interval, and rather than creating all of the objects at once, create them maybe 50 at a time every 25 MS or something.
This will allow for the main event loop to process other things like the animations for busy indicator while its loading.
Here's one way to go about implementing this
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.3
Window {
property int pbValue: 0
visible: true
width: 500
height: 400
title: qsTr("Hello World")
Rectangle {
id: mySplashScreen
anchors.fill: parent
ProgressBar {
// changed handling of progress bar
id: pBar
height: 20
width: parent.width
anchors.bottom: parent.bottom
from: 0
value: compList.length // bind this value
to: 15000
}
BusyIndicator {
anchors.right: parent.right
running: (pbValue < pBar.to + 1)
}
Button {
text: "click me"
onClicked: {
timer.running = true
}
}
}
property var compList: [] // created property to store all created components to track what has been done
Timer {
id: timer
interval: 25
running: false
repeat: true
onTriggered: {
for (var i = 0; i < 50; i++) {
var comp = mycomp.createObject(mySplashScreen) // moved component into timer
compList.push(comp) // added component to huge list of components for tracking
}
pbValue = compList.length
if ((pbValue >= 15000)) {
timer.running = false
console.log("All components completed")
}
}
}
Component {
id: mycomp
Rectangle {
width: 200
height: 200
color: "green"
}
}
}
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 :)
I want to capture image with the specific resolution.
I used this code but the image captured from camera with last resolution and the resolution of image captured does not change to size(1280, 720). I want to change the resolution before capturing the image.
imageCapture {
resolution: Qt.size(1280, 720)
onImageCaptured: {
photoPreview.source = preview
}
In many cases, the behavior of QML Camera is strange and some dependencies are not well documented(, yet).
Anyway, following code works for me:
import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Layouts 1.3
import QtQuick.Controls 1.4
import QtMultimedia 5.6
Window {
visible: true
width: 1280
height: 960
GridLayout {
id: grid
rows: 2
columns: 2
Item {
Layout.row: 0
Layout.column: 0
Layout.minimumWidth: 80
Layout.minimumHeight: 30
Button {
id: button
text: "capture"
onClicked: {
camera.stop();
camera.viewfinder.resolution = "640x480";
camera.start();
}
}
}
Camera {
id: camera
captureMode: Camera.CaptureViewfinder
viewfinder.resolution: "160x120"
imageCapture {
id: cameracapture
onImageCaptured: {
photoPreview.source = preview // Show the preview in an Image
console.log( "capture size: ", photoPreview.sourceSize );
timerHelper.restart();
}
}
onCameraStateChanged: {
console.log("camera state changed to: ", cameraState );
if ( cameraState == Camera.ActiveState && viewfinder.resolution == Qt.size(640,480) ) {
cameracapture.capture();
}
}
function cameraHelper() {
console.log( "Stopping cam..." );
camera.stop();
viewfinder.resolution = "160x120";
camera.start();
}
}
Timer {
id: timerHelper
interval: 1
onTriggered: camera.cameraHelper();
}
Item {
width: 640
height: 480
Layout.row: 1
Layout.column: 0
Layout.minimumWidth: 640
Layout.minimumHeight: 480
Image {
width: 640
height: 480
id: photoPreview
}
}
Item {
width: 640
height: 480
Layout.row: 1
Layout.column: 1
Layout.minimumWidth: 640
Layout.minimumHeight: 480
VideoOutput {
source: camera
anchors.fill: parent
focus : visible // to receive focus and capture key events when visible
}
}
}
}
If you want to switch the resolution successfully, you have to stop() and start() the Camera.
It freezes, if you try to switch the resolution back to (160,120) in onImageCaptured, so I used a Timer to obtain some kind of QueuedConnection.
In my case code:
camera.stop(); camera.viewfinder.resolution = "640x480"; camera.start();
doesn't work. When start() called i have error:
CameraBin error: "Device '/dev/video0' is busy"
CameraBin error: "Could not negotiate format"
Looks like my own app doesn't free device and i can't change resolution.
In my case the solution is to add camera.setCameraState(Camera.UnloadedState) before start() called.
I've been trying to run a BusyIndicator (http://doc.qt.io/qt-5/qml-qtquick-controls-busyindicator.html) while I am loading a qml file (http://doc.qt.io/qt-5/qml-qtquick-loader.html), but the BusyIndicator doesn't appear.
What I am trying to do is:
1- The user emits a "handlerLoader(name)", where "name" is the url of the next qml page.
2- In "onHandlerLoader" I run the busyIndicator.
3- Then, I change the Loader source.
The problem is that no matter the time I spent between steps 2 and 3, the BusyIndicator does not appear.
Moreover, when I comment step 3, the busyIndicator appears correctly.
What I am doing wrong?
Thanks!!
This is the code:
Rectangle {
visible: true
width: 800
height: 480
signal handlerLoader (string name)
Loader {
id: pageLoader;
source: "init.qml";
}
BusyIndicator {
id: busyIndicator_inicio
width: 100
height: 100
anchors.centerIn: parent
running: false
}
Connections {
target: pageLoader.item
onHandlerLoader: {
busyIndicator_inicio.running = true
pageLoader.source = name;
}
}
}
The reason is, that your heavy-loading Loader is blocking the thread.
Set it to asynchronous mode, to allow the rest of the program to run.
Further, I'd recommend to prefer declarative bindings to imperative assignments in handlers. See my example:
main.qml:
import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls 2.0
Window {
width: 1000
height: 800
visible: true
Button {
text: 'load'
onClicked: {
loader.source = "TestObj.qml"
}
}
Loader {
anchors.fill: parent
id: loader
active: true
asynchronous: true
visible: status == Loader.Ready
}
BusyIndicator {
id: ind
anchors.fill: parent
running: loader.status == Loader.Loading
}
}
TestObj.qml:
import QtQuick 2.0
Item {
Grid {
anchors.fill: parent
columns: width
rows: height
Repeater {
model: 100
Rectangle {
width: { for (var i = 0; i < 10000; i++) console.log(i); return 1 }
height: 1
color: 'green'
}
}
}
}
Since the asynchronous Loader might display incomplete files for some time, I set it to be visible only when its status changes to ready.
Is it possible to take snapshot of a video in Qt Multimedia? how?
It depends on the platform but what you can probably do is to use a QMediaPlayer, set a subclassed video surface via setVideoOutput, and get the frame data from the QVideoFrame passed in the present method. You'll then have to deal with the frame format and to map if those are not in CPU memory.
However, depending on your need, I would use ffmpeg/libav to get a frame from a specific position.
Try this (Documentation here: http://doc.qt.io/qt-5/qml-qtquick-item.html#grabToImage-method)
import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1
import QtMultimedia 5.0
Window {
id: mainWindow
visible: true
width: 480
height: 800
MediaPlayer {
id: player
source: "file:///location/of/some/video.mp4"
autoPlay: false
}
ColumnLayout {
anchors.fill: parent
VideoOutput {
id: output
source: player
Layout.fillHeight: true
Layout.fillWidth: true
}
Row {
id: buttonsRow
height: 100
spacing: 20
anchors.horizontalCenter: parent.horizontalCenter
Layout.margins: 10
Button {
id: playPauseButton
text: player.playbackState === MediaPlayer.PlayingState ? "Pause" : "Play"
onClicked: {
var playing = player.playbackState === MediaPlayer.PlayingState;
playing ? player.pause() : player.play();
}
}
Button {
text: "Snapshot"
onClicked: {
output.grabToImage(function(image) {
console.log("Called...", arguments)
image.saveToFile("screen.png"); // save happens here
});
}
}
}
}
}