Connecting QML and Javascript - qt

I am trying to make a KDE Wallpaper Plugin. The QML code works fine. But when I try to connect a js script, even without invoking any functions the wallpaper plugin doesn't work.
QML Code:
import QtQuick 2.1
import QtQuick.Layouts 1.1
import org.kde.plasma.core 2.0
import org.kde.plasma.components 2.0 as PlasmaComponents
import org.kde.plasma.extras 2.0 as PlasmaExtras
import "datecompare.js" as decider
import org.kde.plasma.private.konbanwa 1.0
Item {
id: root
Rectangle {
id: backgroundRect
anchors.fill: parent
Image{
id: backgroundImage
height: parent.height
width: parent.width
fillMode: Image.PreserveAspectCrop
source: decider.deciding()
}
}
}
JS Code:
.pragma library
var today = new Date();
var syshour = today.getHours();
var sysminutes = today.getMinutes();
var usertimehour = 17;
var usertimeminutes = 50;
function deciding () {
if (syshour >= usertimehour) {
if (sysminutes>= usertimeminutes) {
return "img/night2.png";
}
if (sysminutes < usertimeminutes){
return "img/day.jpg";
}
}
else {
return "img/day.jpg";
}
}
I checked by myself several times but since I am beginner to javascript, it could be a small mistake that I oversaw. If its done wrong, how can I do it?

It seems that it is not documented but when importing the javascript the alias must start with capital letters, on the other hand the function will run once but it seems that you want it to run depending on the time so you should use a Timer:
import QtQuick 2.1
import QtQuick.Layouts 1.1
import org.kde.plasma.core 2.0
import org.kde.plasma.components 2.0 as PlasmaComponents
import org.kde.plasma.extras 2.0 as PlasmaExtras
import "datecompare.js" as Decider
// import org.kde.plasma.private.konbanwa 1.0
Item {
id: root
Timer{
interval: 1000
repeat: true
running: true
onTriggered: backgroundImage.source = Decider.deciding()
}
Rectangle {
id: backgroundRect
anchors.fill: parent
Image{
id: backgroundImage
height: parent.height
width: parent.width
fillMode: Image.PreserveAspectCrop
}
}
}

Related

Access element in other QML file

I am trying to access items that are in a Repeater, using JavaScript. This works as long as everything is in a single QML file. I understand that, when I split things into two files, the id of the Repeater moves out of the scope of my script.
What I don't understand is how I best solve this problem, since I cannot export the id as property.
Here is a MWE with two files:
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.2
Window {
id: root
visible: true
width: 640
height: 480
ColumnLayout {
Mwe2 {}
Button {
text: "Test"
onClicked: {
console.log("Clicked");
rect.itemAt(1).color = 'yellow'; # <- out of scope
}
}
}
}
File Mwe2.qml
import QtQuick 2.9
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.2
RowLayout {
spacing: 2
Repeater {
id: rect
model: 3
Rectangle {
color: 'red'
width: 50
height: 20
}
}
}
As you indicate, the ids have the scope of the qml file, so if you want to access those elements you must expose it through a property, function, etc. of the top level of the qml. In this case for simplicity I will use an alias.
import QtQuick 2.9
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.2
RowLayout {
property alias repeater: rect
spacing: 2
Repeater {
id: rect
model: 3
Rectangle {
color: 'red'
width: 50
height: 20
}
}
}
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.2
Window {
id: root
visible: true
width: 640
height: 480
ColumnLayout {
Mwe2 {
id: mwe2
}
Button {
text: "Test"
onClicked: {
console.log("Clicked")
mwe2.repeater.itemAt(1).color = "yellow"
}
}
}
}

How to set an item property of one qml from main.qml

I waste my time to find how set the visible property to false, the delegate being in an another qml file.
For instance here is a simple example based on Places Map.
Marker.qml
import QtQuick 2.0
import QtLocation 5.6
MapQuickItem {
id: idPointsMarker
sourceItem: Loader{sourceComponent: idRect}
visible: true //if set manually to false, everything works correctly
Component{
id: idRect
Rectangle{
width: 20
height: 20
color: "blue"
}
}
}
and the main.qml
import QtQuick 2.0
import QtQuick.Window 2.0
import QtLocation 5.6
import QtPositioning 5.6
Window {
width: 512
height: 512
visible: true
PositionSource {
...
}
property variant locationOslo: QtPositioning.coordinate( 59.93, 10.76)
PlaceSearchModel {
...
}
Map {
id: map
anchors.fill: parent
plugin: Plugin {name: "osm"}
center: locationOslo
zoomLevel: 13
MouseArea {
id : mouseMap
anchors.fill: parent
onDoubleClicked: {
console.log("DoubleClicked")
Marker.idPointsMarker.visible = false // pb is here
}
}
MapItemView {
model: searchModel
delegate: Marker{
coordinate: place.location.coordinate
}
}
}
}
I wish to toggle the visibility to false on doubleclick. I am not able to access the property anyhow the way i write it. What is the correct syntax?
Sorry for a so simple question. Thanks for help.
You do not have to set the property in main.qml, you must do it in Marker.qml, since the elements of Marker.qml can access all the elements of main.qml. One solution is to establish a property of type bool that manages the visibility and that changes in the double click:
main.qml
Map {
[...]
property bool isVisibleItems: true
MouseArea {
id : mouseMap
anchors.fill: parent
onDoubleClicked: map.isVisibleItems = !map.isVisibleItems
}
[...]
Marker.qml
import QtQuick 2.0
import QtLocation 5.6
MapQuickItem {
id: idPointsMarker
sourceItem: Loader{sourceComponent: idRect}
visible: map.isVisibleItems
Component{
id: idRect
Rectangle{
width: 20
height: 20
color: "blue"
}
}
}
In the following link there is an example

Disable mouse wheel for QML Slider

I want to be able to scroll Flickable with mouse wheel (or two fingers on touchpad) without changing Sliders it may containt.
Sample code and result application:
import QtQuick 2.7
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
ApplicationWindow {
id: rootWindow
visible: true
width: 400
height: 200
title: qsTr("Hello World")
ScrollView {
anchors.fill: parent
flickableItem.flickableDirection: Flickable.VerticalFlick
Column {
Repeater {
model: 40
Slider {
width: rootWindow.width * 0.9
}
}
}
}
}
Looks like there was some attempt to fix this in the past, but not successful.
EDIT: this relates to Controls 1.x only, as controls doesn't seem to have this issue starting from 2.0 version.
You can place MouseAreas on the sliders to steal the mouse wheel event.
Something like this:
import QtQuick 2.7
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
ApplicationWindow {
id: rootWindow
visible: true
width: 400
height: 200
title: qsTr("Hello World")
ScrollView {
id: _scrollview
anchors.fill: parent
flickableItem.flickableDirection: Flickable.VerticalFlick
Column {
Repeater {
model: 40
Slider {
width: rootWindow.width * 0.9
property int scrollValue: 10
MouseArea {
anchors.fill: parent
onWheel: {
//check if mouse is scrolling up or down
if (wheel.angleDelta.y<0){
//make sure not to scroll too far
if (!_scrollview.flickableItem.atYEnd)
_scrollview.flickableItem.contentY += scrollValue
}
else {
//make sure not to scroll too far
if (!_scrollview.flickableItem.atYBeginning)
_scrollview.flickableItem.contentY -= scrollValue
}
}
onPressed: {
// forward mouse event
mouse.accepted = false
}
onReleased: {
// forward mouse event
mouse.accepted = false
}
}
}
}
}
}
}
Using the onWheel - event to forward any scrolling to the ScrollView. The other mouse events, such as clicking, can be forwarded to the parents (in this case the sliders) by setting mouse.accepted = false; for any mouse event you wish to have forwarded.
Edit: Oh, I just saw now that you don't want any changes in the sliders contents. You can also to try to place a MouseArea all over the ScrollView and do the same forwarding.
The easiest, if feasible for you, would probably be, to change from QtQuick.Controls 1.4 which can be either considered deprecated, not maintained, or low-performing to the new QtQuick.Controls 2.0
In this version your issue has been adressed.
To adress your need of QtQuick.Controls 1.4 we'll import the QtQuick.Controls 2.0 with an alias:
import QtQuick 2.7
import QtQuick.Controls 1.4
import QtQuick.Controls 2.0 as NewCtrl
Column {
Slider {
id: oldslider // old slider from QtQuick.Controls 1.4 with your issue
width: 500
height: 250
}
NewCtrl.Slider {
id: newsli // new slider without your issue. Both side by side
width: 500
height: 30
wheelEnabled: false // use this to enable or disable the wheel
}
}
Of course you can also alias the old controls and use the new one as the basic... Or alias both. As you like
Hack from here did it for me.
Slider {
id: slider
Component.onCompleted: {
for (var i = 0; i < slider.children.length; ++i) {
if (slider.children[i].hasOwnProperty("onVerticalWheelMoved") && slider.children[i].hasOwnProperty("onHorizontalWheelMoved")) {
slider.children[i].destroy()
}
}
}
}
This may not work with other controls (e.g. ComboBox).

Take snapshot of video in Qt Multimedia

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
});
}
}
}
}
}

QML Audio stops 400 milliseconds before the end

Can someone, please, explain this odd behavior of my application.
I am using Qt 5.1.0 and msvc2010.
This is my code:
import QtQuick 2.1
import QtQuick.Window 2.1
import QtMultimedia 5.0
Window {
visible: true
width: 360
height: 360
MouseArea {
anchors.fill: parent
onClicked: {
playAudio.play()
}
}
Audio {
id: playAudio
source: "zvuky/1.mp3"
}
}
Your code doesn't have any error. Maybe it's due to the mp3 file and Qt is not able to load it.
Did you try to convert the mp3 file to wav? Sometimes it's better to use SoundEffect instead of Audio.
You could also try the MediaPlayer type.
Here you have an example. It's in GitHub where you can download the audio clips.
import QtQuick 2.5
import QtQuick.Window 2.2
import QtMultimedia 5.4
Window {
visible: true
width: 360
height: 360
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.LeftButton | Qt.RightButton
onClicked: {
if (mouse.button == Qt.RightButton)
playMP3.play()
else
playWAV.play()
}
}
SoundEffect {
id: playWAV
source: "res/kid_giggle.wav"
onPlayingChanged: {
console.log("SoundEffect - onPlayingChanged - category: " + category)
}
}
MediaPlayer {
id: playMP3
source: "res/kid_giggle.mp3"
onPlaying: {
console.log("MediaPlayer - onPlaying - duration: " + duration)
}
}
}
Finelly I found solution.
Everything works perfect with Audio element when I used Qt 5.2.1(msvc2012)

Resources