Qt Quick uses qDebug to perform logging, where the standard Javascript logging methods are maped to a Qt log type
console.log() -> qDebug()
console.debug() -> qDebug()
console.info() -> qDebug()
console.warn() -> qWarning()
console.error() -> qCritical()
At this point you loose the distinction between debug() and info().
Is there any way to register a custom logger for the Javascript methods directly in the QML engine without going over qDebug and qInstallMessageHandler?
Although the globalObject is read-only in the QQmlEngine, values stored therein are not. So you can modify the console property of the globalObject. You can do that both in C++ and in QML. Here is a trivial running example in QML:
import QtQuick 2.3
import QtQuick.Controls 1.2
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Console example")
Column {
anchors.centerIn: parent
Button {
text: "debug"
onClicked: {
console.log = console.debug
}
}
Button {
text: "exception"
onClicked: {
console.log = console.exception
}
}
Button {
text: "print something"
onClicked: {
console.log( "logging something" );
}
}
}
}
The first two buttons change, what the third button does by modifying the console.log method. C++ would look something like this (I cannot copy all of my code here, sorry, but it should get you going and it works nicely):
// in a header file
class HelperObject: public QObject {
Q_OBJECT
// ...
public slots:
myLog( QString aMessage );
};
// in an implementation file
QQmlEngine qmlEngine;
HelperObject helperObject;
QJSValue helperValue = qmlEngine.newQObject( &helperObject );
QJSValue consoleObject( qmlEngine.globalObject().property( "console" ) );
if (!consoleObject.isUndefined()) {
QJSValue myLogValue = helperValue.property( "myLog" );
consoleObject.setProperty( "log", myLogValue );
}
Related
I have 3 nested ListViews.The first is the month, second is day and third is hour of day.All of them constructs a calendar.There is a loader that loads a window when I click in the hour ListView, and set text in a Label.This text can be displayed in the hour view and can be deleted or edited through the above window .Unfortunately the text can not be saved because when I scroll the ListViews, delegates changing and not keeping the context of the label(That is normal I suppose).The objective is to be able to save those texts in the label(store the data) and restore them when the application is closed and re-opened.
Below is a generic code sample for 3 ListViews:
ApplicationWindow{
id:appwindow
............
Item{
id:dayView
...........
ListView{
id:monthofdayCalendar
orientation:Qt.Horizontal
model:12
delegate: Item{
ListView{
id:dayCalendar
orientation: Qt.Horizontal
model:32
delegate: Item{
...............
ListView{
id:daylistView
orientation: Qt.Vertical
model:24
delegate:Item{
id:hourItem
property string hourTime:hourweeklistviewLabel
property string notetaking:notesLabe
.............
MouseArea{
anchors.fill:parent
onClicked:{
windowLoader.active =true
daylistView.currentIndex=index
}
}
Rectangle{}
Label{
id:hourweeklistviewLabel
}
Label{
id:notesLabel
anchors.left:hourweeklistviewLabel.right
anchors.leftMargin: 30
text:""
}//Label
}//delegate:Item
}//ListView
} //delegate:Item
}//ListView
}//delegate:Item
}//Listview
}//Item
Below is the code of loader:
Loader {
id:windowLoader
focus: true
active:false
sourceComponent: Window{
id:inputWin
title:"Enter Note"
width:500
height:300
visible:true
onClosing:{
windowLoader.active=false
monthofdayCalendar.currentItem.daycalendarAlias.currentItem.dayList.currentIndex = calendarMonth.selectedDate.getDate() === new Date().getDate()
&& calendarMonth.selectedDate.getDay() === new Date().getDay()
&& calendarMonth.selectedDate.getMonth() === new Date().getMonth()?getHour():12
}
TextField {
id:title
x:50
y:20
placeholderText :'Enter Note'
text:monthofdayCalendar.currentItem.daycalendarAlias.currentItem.dayList.currentItem.notetaking.text
}
TextField{
id:timeDate
anchors.horizontalCenter: title.horizontalCenter
anchors.top:title.bottom
anchors.topMargin:10
placeholderText : calendarMonth.selectedDate.getDate() +"-"
+ (calendarMonth.selectedDate.getMonth()+1)+"-"
+ calendarMonth.selectedDate.getFullYear() + " "
+ monthofdayCalendar.currentItem.daycalendarAlias.currentItem.dayList.currentItem.hourTime.text
}
Button {
id: button
text: qsTr("Add Note")
anchors.centerIn:parent
onClicked: {
if (title.text !==""){monthofdayCalendar.currentItem.daycalendarAlias.currentItem.dayList.currentItem.notetaking.text= title.text}
else{}
}
}
}
}
The big question is how to save (store) the data of notesLabel.text and be able to display it and restore it every time I close and re-open the application.
As you can see the model for each ListView is not a ListModel so I think I can not use those models to save the data if I am right.If I am wrong please advise.
Anyway your help will be appreciateed.
EDIT
I've changed the integer models with ListModel dynamically created.The code of the ListModels is below:
ListModel{
id:hourlistModel
Component.onCompleted:{
for (var i = 0; i <25; i++){
append(createListElement())
}
}
property int h:0
function createListElement(){
return {
hour : h++
}
}
}
ListModel{
id:daylistModel
Component.onCompleted:{
for (var j=0; j <= 31; j++){
append(createListElement())
}
}
property int dD:0
function createListElement(){
return {
day : dD++
}
}
}
ListModel{
id:monthlistModel
Component.onCompleted:{
for (var k=0; k <=11; k++){
append(createListElement())
}
}
property int mN:0
function createListElement(){
return {
monthName : mN++
}
}
}
Can I store the data from Label notesLabel, now I've changed the models of ListViews with ListModels?
Thanks in advance.
I would create an exposed C++ class.
Using the exposed C++ class you have a range of options to pass data from the front/backend
Q_Property/Member
Q_Invokable
Signal/Slots
Given that you are using strictly strings, I would use an exposed series of QStrings or a QStringList.
QString
QStringList
To tackle to file read/write use your now exposed C++ class. You can either stick to file I/O via standard c++ or QFile system.
Constructor - Read the .txt file and save the data to your property data.
Exchange data as needed updating either the QML or C++ property member
Deconstructor - save the property member data back to file.
Brief example code:
someQML.qml
Import MyExposedClass 1.0
Item {
MyExposedClass {
id: myExposedClassID
text: myExposedClassID
}
Text{
id: yearTextID
text: myExposedClassID.year
}
Text{
id: monthTextID
text: myExposedClassID.month
}
Text{
id: dayTextID
text: myExposedClassID.day
}
Button {
id: myButtonID
onButtonPressed {
var finalStr = yearTextID + monthTextID + dayTextID
// If you used a QMember of qstring lets say
myExposedClassID.saveFile = finalStr
// If you used a QInvokable
myExposedClassID.saveFile_INVOK(finalStr)
}
}
}
myClass.h
class myClass : public QObject {
Q_OBJECT
// Serial Dev
Q_PROPERTY(QString day READ getDay WRITE setDay NOTIFY dayChanged)
Q_PROPERTY(QString month READ ... WRITE ... NOTIFY ...)
Q_PROPERTY(QString year READ ... WRITE ... NOTIFY ...)
...
// On construction, read the text file and update the qproperty variables
//implement getters and setters for qproperties
// On deconstruction, write the properties to file
}
If you have issues with MVC and QStrings/QStringlist. You may have to look into QVariants or QAbstracts.
I find QML to be a risky hole to dive into. Its easy to add more and more functionality to a QML file. But if you try and redesign it or change up some logic, it can very quickly ruin the QML. Splitting the QML into a QML & C++ is a nice way to achieve modularity and control.
I am trying to implement a custom button which has press() and release() functions that i call when an expected key event is received. In these functions pressed() and released() signals are called. released() works perfectly but when pressed() is called an error is shown:
TypeError: Property 'pressed' of object CustomButton_QMLTYPE_3(0x78214d8) is not a function
My theory is that the QML can't differentiate the Button's bool pressed property and the pressed() signal. Is this a bug or am i doing something wrong? Here's what i have done:
This is the custom button qml file:
import QtQuick 2.10
import QtQuick.Controls 2.12
Button {
id: control
function press() {
down = true;
pressed();
}
function release() {
down = false;
released()
}
}
In the example below when the F3 key is pressed or released i call the button functions and i expect them to arrive to the Connections i made.
CustomButton {
id: customButton
width: parent.width
height: parent.height
Connections {
target: customButton
onPressed: {
console.log("Custom button pressed!\n");
}
onReleased: {
console.log("Custom button released!\n")
}
}
}
focus: true
Keys.onPressed: {
if(event.key === Qt.Key_F3 && !event.isAutoRepeat) {
console.log("F3 Key pressed!")
customButton.press()
}
}
Keys.onReleased: {
if(event.key === Qt.Key_F3 && !event.isAutoRepeat) {
console.log("F3 Key released!")
customButton.release()
}
}
Like i said release works but the press is problematic. I see these lines in the console:
qml: F3 Key pressed!
qml: press function called
file:///D:/Projects/QmlExamples/qml/fxMenu/button/CustomButton.qml:10: TypeError: Property 'pressed' of object CustomButton_QMLTYPE_3(0x78214d8) is not a function
qml: F3 Key released!
qml: release function called
qml: Custom button released!
If you want manually emit pressed signal, declare it in your Button object:
Button {
id: control
signal pressed;
signal released;
function press() {
down = true;
pressed();
}
function release() {
down = false;
released()
}
onPressedChanged: {
if (down) {
release();
} else {
press();
}
}
}
As you mentioned, there is also a boolean property named "pressed", so it looks like QML engine does not recognize your intentions.
I cannot find a way to communicate from one qml file to the other one. I know there are many ways to send signals from qml to C++ slots and reverse, but all my research about signals between two different qml files failed.
So I would be glad if someone can tell me, how I have to solve this problem.
First of all a little abstracted example to understand the problem in a better way...
The first QML in basics looks like that:
//MyQML1.qml
Rectangle
{
id: idMyRec1
signal mySignalFromQML1()
Button
{
id: idMyButton1
onClicked:
{
idMyRec1.mySignalFromQML1(); //to send the signal
}
}
}
The 2nd one looks like this:
//MyQML2.qml
Rectangle
{
id: idMyRec2
Text{
id: idMyText2
text: "Hello World!"
onMySignalFromQML1: //to receive the signal from the other qml
{
idMyText2.text = "Good Bye World!";
}
}
}
So this button should change the text in my 2nd QML to "Good Bye World!" when clicked...but this doesn't work...are there any other ways to send signals from QML to another QML?! Or am I doing something wrong?
You don't communicate between qml files, the QML file is just a prototype, you communicate between the object instances.
// Rect1.qml
Rectangle {
id: rect1
signal mySignal
Button {
onClicked: rect1.mySignal()
}
}
// Rect2.qml
Rectangle { // Rect1.qml
property alias text: txt.text
Text {
id: txt
}
}
And then you create the objects:
Rect1 {
onMySignal: r2.text = "Goodbye world!"
}
Rect2 {
id: r2
}
There are other ways to make a connection, however, connections happen between object instances, not qml files. The objects don't have to be in the same qml file too, but initially for simple things they will rarely be in different files.
For me this works with Connections and signal in one qml file as follow:
import QtQuick 2.4
import QtQuick.Controls 1.2
Item {
id: item
width: 200
height: 200
signal sendMessage(string msg, int compId)
Button {
text: "SendMessage"
onClicked: sendMessage("hello",1)
}
Item {
id: item1
Connections {
target: item
onSendMessage: if(compId==1) { console.log("Hello by Comp 1") }
}
}
Item {
id: item2
Connections {
target: item
onSendMessage: if(compId==2) { console.log("Hello by Comp 2") }
}
}
}
Of course the items with the Connections can be also in different files.
I am making a simple playlist player on qml. I mean there is a Audio player which plays files with extension .mp3 in a folder. But this "playlist player" assumes the whole folder as a playlist. So I give the path of the playlist folder as a command line argument to the program, for ex. ./playlist_player /home/user/playlist-folder and program plays whole mp3s in the playlist-folder folder. But since qml does not understands wildchars like asterisk(*), I use QDir to find the names of the mp3s to find the names of the mp3s and expose those strings to qml by using an approach which described in here http://doc.qt.io/qt-5/qtqml-cppintegration-exposecppattributes.html. So I have an QObject-derived class names FileNames and it has Q_PROPERTY(QStringList mp3List READ mp3List). So on the constructor of the FileNames I look for the path given in command line, and detect for files with extension .mp3s and push_back those paths to the FileNames::mp3List. And on main.cpp, I instantiate a FileNames object after that instantiate QQuickView object and I pass the FileNames object to Qml side with QQmlContext::setContextProperty member function.
Everything works until that I need also the number of the mp3s in the list to iterate all over with next function which increment index value for the list on qml side. I know I can expose another property for passing count of the mp3List but I ended up with this solution might not be the best native one.
Here is the code that I have wrote;
/* filenames.h */
class FileNames : public QObject {
Q_OBJECT
Q_PROPERTY(QStringList mp3List READ mp3List)
Q_PROPERTY(int mp3ListCount READ mp3ListCount)
public:
explicit FileNames(QObject *parent = 0);
QStringList mp3List() const;
int mp3ListCount() const;
private:
QStringList m_mp3List;
int m_mp3ListCount;
};
/* filenames.cpp */
FileNames::FileNames(QObject *parent) :
QObject(parent), m_mp3ListCount(0)
{
QString path("/home/user/music/");
QDir dirname(path);
QStringList dir = dirname.entryList();
for (const auto &file : dir)
if (file.endsWith(".mp3")) {
m_mp3List.push_back("file://" + path + file);
++m_mp3ListCount;
}
}
QStringList FileNames::mp3List() const
{
return m_mp3List;
}
int FileNames::mp3ListCount() const
{
return m_mp3ListCount;
}
/* main.cpp */
int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv);
FileNames names;
QQuickView view;
view.engine()->rootContext()->setContextProperty("names", &names);
view.setSource(QUrl(QStringLiteral("qrc:///main.qml")));
view.setResizeMode(QQuickView::SizeRootObjectToView);
view.showFullScreen();
return app.exec();
}
/* Playlist.qml */
Item {
id: root
property int index: 0
property MediaPlayer mediaPlayer
property variant list;
property int listCount;
function setIndex(i)
{
console.log("setting index to: " + i);
index = i;
if (index < 0 || index >= listCount) {
index = 0;
mediaPlayer.source = "";
}
mediaPlayer.source = list[index];
}
function next()
{
setIndex(index + 1);
}
function previous()
{
setIndex(index + 1);
}
Connections {
target: root.mediaPlayer
onStopped: {
if (root.mediaPlayer.status == MediaPlayer.EndOfMedia)
{
root.next();
root.mediaPlayer.play();
}
}
}
}
/* main.qml */
Rectangle {
id: root
width: 1024
height: 600
color: "black"
Playlist {
id: playlist
mediaPlayer: player
list: names.mp3List
listCount: names.mp3ListCount
}
MediaPlayer {
id: player
}
VideoOutput {
anchors.fill: parent
source: player
}
}
So does anyone has more native solution to making a "playlist_player" application with Qt?
UPDATE ->
So right now I am using FolderListModel but seems like this class does not work properly without a view. I guess because it works asynchronously. Here is how is my code look like;
/* Playlist.qml */
Item {
id: root
property int index: 0
property MediaPlayer mediaPlayer
property FolderListModel fm
function setIndex(i)
{
index = i;
console.log("setting index to: " + i);
index %= fm.count;
mediaPlayer.source = "file://" + fm.get(index, "filePath");
console.log("setting source to: " + mediaPlayer.source);
}
function next()
{
setIndex(index + 1);
}
function previous()
{
setIndex(index + 1);
}
Connections {
target: root.mediaPlayer
onStopped: {
if (root.mediaPlayer.status == MediaPlayer.EndOfMedia) {
root.next();
root.mediaPlayer.play();
}
}
}
}
/* main.qml */
Rectangle {
id: root
width: 1024
height: 600
color: "black"
property bool onStart: true
Playlist {
id: playlist
mediaPlayer: player
fm: FolderListModel {
id: fm
folder: "file:///home/user/music"
showDirs: false
showDotAndDotDot: false
nameFilters: ["*.mp3"]
property bool ready: count > 0
// startup initialization;
onReadyChanged: if (player.status == MediaPlayer.NoMedia) {
playlist.setIndex(0);
player.play();
}
}
}
MediaPlayer { id: player }
VideoOutput {
anchors.fill: parent
source: player
}
}
Thank you,
Sina.
Using C++ types in QML or defining context properties is perfectly fine when integration with C++ code is needed. C++ naturally extends the possibilities of QML and it is only a matter of understand when a C++ back-end class, or a newly QML type written in C++, is needed. For further discussion about this topic please have a look to this other answer.
Given the answer linked above and the lifetime of your playlist component, using a QML-type instead of a context property would be the right choice. However, as said, QML already provide the right component for you: FolderListModel. In your case it can be easily defined like this:
FolderListModel {
id: folderModel
nameFilters: ["*.mp3"]
showDirs: false
folder: "file:" + /* CPP PROVIDED PATH */
}
and you can use get function to query for the next mp3 in the list, according to the count property.
A great advantage is that FolderListModel does listen for file changes in your folder so that you don't need to check for file addition/removal. Last, but not least, FolderListModel can be easily integrated in a GUI implementation, using it as a model for a ListView. Please see here for an example.
Addendum
As noted by OP the FolderListModel works asynchronously. That's a common behaviour since doing all the checks during component initialisation could lead to a long start-up (especially for directories full of files). There's no property to track when FolderListModel has finished tracking the filesystem, nor it probably makes sense to have one since the filesystem check is continuous. Adding a bool property could help, something like this:
FolderListModel {
id: fm
folder: "..."
showDirs: false
showDotAndDotDot: false
nameFilters: ["*.mp3"]
property bool ready: count > 0
}
When ready is true (because mp3s have been added or the initial scanning has finished) it could be possible to trigger the player. Clearly other properties can be added to improve the behaviour of the model.
The FolderListModel QML Type will do what you need. It supports name filtering, etc.
In my application I'm displaying a list of audio files and the user can drag an external file to add it to the list. I want to be able to refuse the drag if no file in the list is supported by my application.
The issue is that when I call drag.accepted = false; in onEntered of my DropArea then it becomes completely unresponsive to any other event.
Here is some sample code showing the issue. If you drag an MP3 in the window you see that it works. Then if you drag any other file it won't work, as expected. But then dragging an MP3 file back will not work either.
import QtQuick 2.1
import QtQuick.Window 2.0
ApplicationWindow {
title: qsTr("Hello World")
width: 640
height: 480
DropArea {
anchors.fill: parent
onEntered: {
console.log("[Droparea] entered");
// Ensure at least one file is supported before accepted the drag
var validFile = false;
for(var i = 0; i < drag.urls.length; i++) {
if(validateFileExtension(drag.urls[i])) {
validFile = true;
break;
}
}
if(!validFile) {
console.log("No valid files, refusing drag event");
drag.accepted = false;
return false;
}
}
onExited: {
console.log("[Droparea] entered");
}
onDropped: {
console.log("[Droparea] dropped");
}
// Only MP3s
function validateFileExtension(filePath) {
var extension = filePath.split('.').pop();
var valid = false;
if(extension == "mp3") {
valid = true;
}
return valid;
}
}
Text {
id: textDrop
anchors.centerIn: parent
text: "Please drag element"
}
}
Is there a bug in the DropArea or did I misunderstood something? I know I can filter the files in the onDropped but then you loose the visual feedback you get on OSX when dragging file on an area that does not accept them.
It has been a known bug for a long time. A patch has been submitted and after been stalled for several months is now merged into 5.6 branch.
Anyone who wants to use this functionality MUST upgrade to Qt 5.6 or MANULLY integrate the available patch into his/her Qt version.
QQuickDropAreaPrivate, contained in DropArea, updates the containsDrag flag to true when a dragEnterEvent occurs, emitting the entered signal. It updates containsDrag to false when adragLeaveEvent occurs, emitting an exited signal. However, when the drag event is not accepted dragLeaveEvent is never called, leaving the private object in a incosistent state. Each subsequent dragEnterEvent is discarded since containsDrag is still true, i.e. the previous drag event is still considered active and the entered is no more emitted.
Since the issue is related to an interaction between private APIs and usage of the public APIs, the problem does not affect filtering using keys. Unfortunately, this approach does not seem to fit for the presented use case.
A quite partial workaround is to use a MouseArea along with the DropArea. The latter disables itself when a rejection occurs while the former enables back the DropArea for the next drop. This workaround covers the common case in which a wrong item is dropped inside the DropArea, which is the most common and intuitive for an end user. Releasing the wrong item outside the DropArea invalidate the mechanism (until the next drop).
Here's the code:
import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Window 2.0
ApplicationWindow {
title: qsTr("Hello World")
width: 640
height: 480
visible: true
MouseArea {
anchors.fill: parent
hoverEnabled: true
enabled: !drop.enabled
onContainsMouseChanged: drop.enabled = true
}
DropArea {
id: drop
anchors.fill: parent
onEntered: {
console.log("[Droparea] entered");
// Ensure at least one file is supported before accepted the drag
for(var i = 0; i < drag.urls.length; i++)
if(validateFileExtension(drag.urls[i]))
return
console.log("No valid files, refusing drag event")
drag.accept()
drop.enabled = false
}
onExited: console.log("[Droparea] exited")
onDropped: console.log("[Droparea] dropped")
// Only MP3s
function validateFileExtension(filePath) {
return filePath.split('.').pop() == "mp3"
}
}
Text {
id: textDrop
anchors.centerIn: parent
text: "Please drag element"
}
}
you never put accepteed = true
just add drag.accepted = true after you set the valid as valid
for(var i = 0; i < drag.urls.length; i++) {
if(validateFileExtension(drag.urls[i])) {
validFile = true;
drag.accepted = true;
break;
}
}