I have a soundtrack to be played through the run time as the main theme:
App{
...............
Audio{
source: "../assets/Art Of Silence_V2.mp3"
autoPlay: true
loops : Audio.Infinite
}
.......
}
How do I stop it from playing when the app is in the background and resume it afterwards?
Assuming that your application contained in a Window or ApplicationWindow component
Window{
...............
Audio{
readonly property bool forground : Window.visibility !== Window.Minimized &&
Window.visibility !== Window.Hidden
source: "../assets/Art Of Silence_V2.mp3"
autoPlay: true
loops : Audio.Infinite
onForgroundChanged: { forground ? start() : stop() }
}
.......
}
Related
I have a ListView, where the currently displayed modelData changes as a button cycles through several department options. If one of these departments has no data, my delegate continues showing the previous list data until it reaches a new section of modelData with data.
What I want to do, is when the model is 'empty' (being undefined, which may happen when the key it's looking for is yet to be created in my Firebase Database, or no items are currently visible), text/image is shown instead; i.e, "Move along now, nothing to see here".
My model is drawn from JSON, an example is below. and my calendarUserItems is the root node of multiple children within my Firebase Database, the aim of my AppButton.groupCycle was too add a further direction to each child node, filtering the data by this to view and edit within the page.
A sample of my code is:
Page {
id: adminPage
property var departments: [1,2,3,4]
property int currGroupIndex: 0
AppButton {
id: groupCycle
text: "Viewing: " + departments[currGroupIndex]
onClicked: {
if (currGroupIndex == departments.length - 1)
currGroupIndex = 0;
else
currGroupIndex++;
}
}
ListView {
model: Object.keys(dataModel.calendarUserItems[departments[currGroupIndex]])
delegate: modelData.visible ? currentGroupList : emptyHol
Component {
id: emptyHol
AppText {
text: "nothing to see here move along now!"
}
}
Component {
id: currentGroupList
SimpleRow {
id: container
readonly property var calendarUserItem: dataModel.calendarUserItems[departments[currGroupIndex]][modelData] || {}
visible: container.calendarUserItem.status === "pending" ? true : false
// only pending items visible
// remaining code for simple row
}
}
}
}
an example of JSON within my dataModel.calendarUserItems is:
"groupName": [
{ "department1":
{ "1555111624727" : {
"creationDate" : 1555111624727,
"date" : "2019-03-15T12:00:00.000",
"name" : "Edward Lawrence",
"status": "pending"
},
//several of these entries within department1
},
},
{ "department2":
{ "1555111624727" : {
"creationDate" : 1555111624456,
"date" : "2019-05-1T12:00:00.000",
"name" : "Katie P",
"status": 1
},
//several of these entries within department2
},
}
//departments 3 & 4 as the same
]
If departments 2 and 3 have modelData, yet 1 and 4 do not, I want the text to display instead, and the ListView emptied, instead of showing the previous modelData.
I have tried playing with the image/text visibility but the issue lays more with clearing the modelData and I'm unsure where to begin?
Any help is greatly appreciated!
I have achieved the display by using the following as my delegate:
delegate: {
if (!(departments[currGroupIndex] in dataModel.calendarUserItems) ) {
return emptyHol;
}
var subgroups = Object.keys(dataModel.calendarUserItems[departments[currGroupIndex]]);
for (var i in subgroups) {
var subgroup = dataModel.calendarUserItems[departments[currGroupIndex]][subgroups[i]];
modelArr.push(subgroup);
}
var modelObect = modelArr.find( function(obj) { return obj.status === "pending"; } );
if (modelObect === undefined) {
return emptyHol;
}
return currentGroupList;
}
Then when my AppButton.groupCycle is pressed, I have added modelArr = [] to clear the array on each press, this works as intended.
Thanks!
I am trying to implement a keyClick with a shift modifier but it doesn't work. Below is a basic setup of what I am trying to do. The first test_case1 can perform what I am doing but I'd like the second test_case2 to work as well but with using the Qt.ShiftModifier.
../MyTextBox.qml
Page {
id: page1
objectName: "page1"
TextField {
id: lastNameField
objectName: "lastNameField"
text: qsTr("")
}
}
tst_page.qml
import "../"
Item {
width: 800
height: 600
MyTextBox {
id: page1
}
TestCase {
id: "txtBox"
when: windowShown
function test_case1 () {
//var qmlObj = findChild(page1, "lastNameField")
var qmlObj = page1.lastNameField
// Bring to focus
mouseClick(qmlObj, Qt.LeftButton, Qt.NoModifier)
// Keypress
keyPress("Y")
keyPress("e")
keyPress("s")
tryCompare(qmlObj, "text", "Yes") // pass
}
function test_case2 () {
var qmlObj = page1.lastNameField
// Bring to focus
mouseClick(qmlObj, Qt.LeftButton, Qt.NoModifier)
// Keypress
keyClick(QT.Key_Y, Qt.ShiftModifier)
keyClick(QT.Key_E)
keyClick(QT.Key_S)
tryCompare(qmlObj, "text", "Yes") // fail
}
}
}
test output
PASS : test_case1()
FAIL! : test_case2()
Actual (): yes
Expected (): Yes
Edit: Added a simple project to github for testing.
I'm using this example: QML Flipable Example.
I created rectangles with GridLayout. I just added my new state the example:
states: [
State {
name: 'back'
PropertyChanges { target: rotation; angle: 180 }
when: flipable.flipped
},
State {
name: 'remove'
PropertyChanges {
target: card
visible: false
}
}
]
I wanted when I click the rectangles, check rectangles, they open and if they are same or not. My algorithm for this job:
property int card1: -1
property int card2: -1
property int remaining: 20
function cardClicked(index) {
var card = repeater.itemAt(index); // Selected card
if (!card.flipped) { // If selected card is not opened
card.flipped = true; // Open card
if (card1 === -1) { // If card is first selected card
card1 = index; // Set first selected card
} else { // If selected card is not first card, I mean that is second card because first card is already selected
card2 = index; // Set second card
area.enabled = false; // Disabled GridLayout (area)
delayTimer.start(); // Start `Timer` QML component
}
} else { // If card is opened so, close that card, because that card is opened and player clicked its
card.flipped = false; // Close that card
card1 = -1; // first card is not selected
}
}
function validateCards() {
var state = ''; // Default state: Close cards
if (imageIndexes[card1] === imageIndexes[card2]) { // If first card and second card are equal, you found same cards :)
state = 'remove'; // You found cards so, remove cards
--remaining; // If this equals 0, you found all cards
}
// If cards are not same, close cards but if they are same remove them
repeater.itemAt(card1).state = state;
repeater.itemAt(card2).state = state;
card1 = -1; // first card is not selected
card2 = -1; // second card is not selected
area.enabled = true; // Enabled area (GridLayout)
if (remaining === 0) { // If you found all cards, game over
console.log('Game Over!');
}
}
I added MouseArea into Rectangles:
MouseArea {
anchors.fill: parent
onClicked: cardClicked(index) // This index belongs to my `Repeater`.
}
I put a Timer for animation to work correctly and check cards:
Timer {
id: delayTimer
interval: 1000
onTriggered: validateCards()
}
This example and animations are running nice but sometimes they aren't running correctly:
How can I solve this animation bug?
UPDATE!
You can find all source code on here.
I think you are complicating the application by using the timer since you do not know if the item finished changing its position, it would be appropriate to execute that task when it finishes turning the letter over.
Another error that I see in your code is that you are assigning a state = "".
I have modified in the following parts:
GameArea.qml
GridLayout {
[...]
property variant imageIndexes: GameUtils.generateCardIndexes(
imageCount, repeatCount)
property int lastIndex : -1
Repeater {
id: repeater
model: 40
Card {
id: card
backImageSource: 'qrc:/images/img_' + area.imageIndexes[index] + '.jpg'
onFinished: verify(index)
}
}
function verify(index){
if(lastIndex == -1){
lastIndex = index
return
}
area.enabled = false
var lastItem = repeater.itemAt(lastIndex)
var currentItem = repeater.itemAt(index)
if(lastItem.backImageSource === currentItem.backImageSource){
lastItem.state = "remove"
currentItem.state = "remove"
}
else{
lastItem.flipped = false
currentItem.flipped = false
}
if(repeater.model === 0){
console.log("Winning")
}
lastIndex = -1
area.enabled = true
}
}
Card.qml
Item {
[...]
property alias state: flipable.state
signal finished()
Flipable {
[...]
transitions: Transition {
NumberAnimation { target: rotation; property: 'angle'; duration: 400 }
onRunningChanged: {
if ((state == "back") && (!running))
finished()
}
}
MouseArea {
anchors.fill: parent
onClicked: card.flipped = true
}
}
}
The complete code can be found at the following link
A portion of my application (Weather.qml) currently makes a HTTP GET request for the weather every 5 minutes using a Timer and GPS coordinates. I also have a user setting (Settings.qml) that lets the user choose a location.
I was wondering if it was possible to trigger the Timer whenever the location setting was modified and for the Timer to take in the new coordinates to be passed into the HTTP Get request.
At the moment, I am just passing a GPS coordinate as an argument (weatherLocation) to the executable on launch.
Weather.qml
WeatherForm {
// A timer to refresh the forecast every 5 minutes
Timer {
interval: 300000
repeat: true
triggeredOnStart: true
running: true
onTriggered: {
if (weatherAppKey != "" && weatherLocation != "") {
// Make HTTP GET request and parse the result
var xhr = new XMLHttpRequest;
xhr.open("GET",
"https://api.darksky.net/forecast/"
+ weatherAppKey + "/"
+ weatherLocation
+ "?exclude=[minutely,hourly,daily,alerts,flags]"
+ "&units=auto");
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE) {
var a = JSON.parse(xhr.responseText);
parseWeatherData(a);
}
}
xhr.send();
} else {
...
}
}
}
...
}
Settings.qml
SettingsForm {
Rectangle {
...
ComboBox {
id: cityComboBox
anchors.right: parent.right
anchors.verticalCenter: parent.Center
model: ListModel {
id: cbItems
ListElement { city: "Vancouver"; coordinates: "49.2666,-123.1976" }
ListElement { city: "New York"; coordinates: "40.7306,-73.9866" }
ListElement { city: "Hong Kong"; coordinates: "22.2793,114.1628" }
}
textRole: 'city'
// Trigger the Timer here possibly
onCurrentIndexChanged: console.debug(cbItems.get(currentIndex).city)
}
}
}
It is not possible and it is not needed. Just have the coordinates in a property somewhere the timer can reference it. You have direct access to everything that's in the scope of the file (except in delegates).
I was wondering if it was possible to trigger the Timer whenever the
location setting was modified
You could, but that defeats the purpose of having a timer - the timer is triggered by an elapsing interval of time. However you could restart and trigger the timer then the coordinates change:
property string location : weatherLocation
...
onLocationChanged: timer.restart()
Just modify the code to use location in the place of weatherLocation. You can change the location by:
onCurrentIndexChanged: location = cbItems.get(currentIndex).coordinates
If you make location a property of the main qml component, it will be directly accessible from every object nested (directly or indirectly) in the main component (unless it is shadowed by an identically named source local property).
I've been learning QtQuick for about a week and I'm facing a weird behaviour on what I'm trying to achieve. I would like to make a vertical ListView with a Keyboard navigation so that when I press UP or DOWN, the items move up or down and if an item goes in or out of the "viewport", its opacity property will change smoothly to 0 or 1.
Here is my current QML code:
import QtQuick 2.4
Rectangle {
width:200
height:400
ListView {
property int activePosition:1
property int itemDisplayed:3
width:parent.width-50
height:parent.height-50
anchors.centerIn:parent
model:10
snapMode:ListView.SnapToItem
focus:true
cacheBuffer:2000
Component.onCompleted: {
console.log(count+' != '+contentItem.children.length+' ???')
}
Keys.onPressed: {
var i = 0
console.log('pos='+activePosition)
console.log(count+' != '+contentItem.children.length+' ???')
if (event.key === Qt.Key_Up) {
if (activePosition == 1 && currentIndex > 0) {
i = currentIndex+itemDisplayed-1
if (i < contentItem.children.length - 2/* why -2 instead of -1 ??? */) {
console.log('out='+i)
contentItem.children[i].state = 'out'
}
}
activePosition = activePosition > 1 ? activePosition - 1 : activePosition
}
if (event.key === Qt.Key_Down) {
if (activePosition == itemDisplayed && currentIndex < contentItem.children.length - 2) {
i = currentIndex-itemDisplayed+1
if (i >= 0) {
console.log('out='+i)
contentItem.children[i].state = 'out'
}
}
activePosition = activePosition < itemDisplayed ? activePosition + 1 : activePosition
}
}
delegate: Rectangle {
id:rect
state:index < ListView.view.itemDisplayed ? 'in' : 'out'
opacity:1.0
width:ListView.view.width
height:ListView.view.height/ListView.view.itemDisplayed
border.color:'white'
border.width:1
color:activeFocus ? 'red': 'gray'
onActiveFocusChanged: {
if (activeFocus) {
state = 'in'
console.log('in='+index)
}
}
states: [
State { name:'in'; PropertyChanges { target:rect; opacity:1.0 } },
State { name:'out'; PropertyChanges { target:rect; opacity:0.0 } }
]
transitions: [
Transition {
to:'in'
NumberAnimation { property:'opacity'; duration:250 }
},
Transition {
to:'out'
NumberAnimation { property:'opacity'; duration:250 }
}
]
Text {
text:index
anchors.centerIn:parent
}
}
}
}
First question : model=10, why model.count is not equal to contentItem.children.length? onCompleted gives 5 vs 11 and during navigation 10 vs 11
Second question: If I press UP or DOWN, it works fine until I reach index=4, why?
As I'm a beginner on QtQuick so maybe it's not the right approach. I tried to use the visible property but every item has visible = true even if they are outside. I tried also indexAt() with no success.
Any help would be great :-)
Now I know better about the ListView behavior. My previous code can be fixed by removing the Keys.onPressed event which is no longer useful, and by using the itemAt() method directly into the onActiveFocusChanged handler.