QML AreaSeries with SplineSeries - qml

I am checking the docs of AreaSeries, especialy its upperSeries property and it is obvious it accepts only LineSeries object. However, I want to make AreaSeries to be constructed with SplineSeries and if I do it:
ChartView
{
Layout.fillWidth: true
Layout.fillHeight: true
antialiasing: true
titleColor: "steelblue"
title: qsTr("Sensor data")
theme: ChartView.ChartThemeDark
animationOptions: ChartView.AllAnimations
dropShadowEnabled: true
AreaSeries
{
name: qsTr("Air pressure [kPa]")
color: "green"
borderColor: "white"
borderWidth: 4
brushFilename: "qrc:/icons/UeGradient.svg"
pointLabelsVisible: true
axisX: DateTimeAxis
{
id: ueDateTimeAxisAirPressure
format: "dd.MM.yyyy"
min: ueSensorsData.ueGetMinimalDate()
max: ueSensorsData.ueGetMaximalDate()
} // DateTimeAxis
axisY: ValueAxis
{
id: ueAirpressureAxis
min: ueSensorsData.ueGetMinimalAirPressure()
max: ueSensorsData.ueGetMaximalAirPressure()
} // axisY
upperSeries: SplineSeries
{
id: ueLineSeriesAirPressure
Connections
{
target: ueSensorsData
onUeSignalUpdateGraph:
{
var valueX=ueSensorsData.ueGetLastTimeStamp();
var valueY=ueSensorsData.ueGetLastAirPressure();
ueLineSeriesAirPressure.append(valueX,
valueY);
ueDateTimeAxisAirPressure.min=ueSensorsData.ueGetMinimalDate();
ueDateTimeAxisAirPressure.max=ueSensorsData.ueGetMaximalDate();
ueAirpressureAxis.min=ueSensorsData.ueGetMinimalAirPressure();
ueAirpressureAxis.max=ueSensorsData.ueGetMaximalAirPressure();
} // onUeSignalUpdateGraph
} // Connections
} // upperSeries
} // AreaSeries
} // ChartView
I get following error:
QQmlApplicationEngine failed to load component
qrc:/main.qml:304 Cannot assign object to property
and the error points to problematic line of code upperSeries: SplineSeries.
Is it aught possible to acomplish this task using some other approach, I haven't found it on net.

Related

I am animate the pie chart using Handler event class of google visualization API

if (element.Category.ChartType == "PieChart") {
console.log(sliceOptions);
var animate = 0.05;
console.log("for your test" + rows[4][1]);
console.log("for your test" + rows[3][1]);
console.log("for your test" + rows[2][1]);
console.log("for your test" + rows[1][1]);
wrapper = new google.visualization.ChartWrapper({
chartType: element.Category.ChartType,
dataTable: rows,
containerId: element.Category.Key,
options: {
is3D:true, height: 270, slices: sliceOptions,
pieStartAngle: 100,
animation: { startup: true, duration: 15000, easing: 'Out' },
backgroundColor: '#F8F8FF',
pieSliceText: 'label',
tooltip: { color: '#FF0000' },
slices: {
1: { offset:animate },
2: { offset: animate },
3: { offset: animate },
4: { offset: animate },
},
}
});
google.visualization.events.addListener(wrapper, 'select', selectHandler);
function selectHandler() {
//alert('A table row was selected');
var data = wrapper.getSelection();
alert(data);
}
}
But it throws the above exception.
Uncaught TypeError: wrapper.getSelection is not a function.
I am animate the pie chart using Handler event class of google visualization API.
please provide me solution.
getSelection() is a Chart method, not a ChartWrapper method
try this instead...
wrapper.getChart().getSelection()

QML How reverse play animation

I want an object, need it to fellow a complex path and move as an animation.
The path is included line and curve. just like a train.
Two solution: 1. PathAnimation or 2. states with multi-animation
Problem of solution 1:
The train maybe stop at a random time-point(pause the animation), and go reverse back to the start position(play animation reversely).
So i want know any way to play PathAnimation reversely?
I think QML doesn't have that functionality.
You could set a new path whenever you need a new one. I.e, when you animation ends.
Here you have an example:
import QtQuick 2.3
import QtQuick.Controls 1.1
ApplicationWindow {
visible: true
width: 350
height: 300
Rectangle {
id: window
width: 350
height: 300
Canvas {
id: canvas
anchors.fill: parent
antialiasing: true
onPaint: {
var context = canvas.getContext("2d")
context.clearRect(0, 0, width, height)
context.strokeStyle = "black"
context.path = pathAnim.path
context.stroke()
}
}
SequentialAnimation {
id: mySeqAnim
running: true
PauseAnimation { duration: 1000 }
PathAnimation {
id: pathAnim
duration: 2000
easing.type: Easing.InQuad
target: box
orientation: PathAnimation.RightFirst
anchorPoint: Qt.point(box.width/2, box.height/2)
path: myPath1
}
onStopped: {
console.log("test")
pathAnim.path = myPath2;
mySeqAnim.start();
}
}
Path {
id: myPath1
startX: 50; startY: 100
PathLine { x: 300; y: 100 }
onChanged: canvas.requestPaint()
}
Path {
id: myPath2
startX: 300; startY: 100
PathLine { x: 50; y: 100 }
onChanged: canvas.requestPaint()
}
Rectangle {
id: box
x: 25; y: 75
width: 50; height: 50
border.width: 1
antialiasing: true
Text {
anchors.centerIn: parent
}
}
}
}

Scheduling animations using a Timer in QML

I want to create a component that starts animations from a list. I've provided an example of what I want to do below. I don't know if this is the correct way in terms of performance and timer accuracy. Is it better to use a dedicated timer for each animation?
import QtQuick 2.0
Item {
id: root
function startOne() {
animOne.start()
}
function startTwo() {
animTwo.start()
}
property var listEvent: {
1000: root.startOne,
2000: root.startTwo
}
property int elapsed: 0
property int last_elapsed: 0
Rectangle {
id: one
x: 0
y: 0
width: 200
height: 200
color: "black"
}
Rectangle {
id: two
x: 600
y: 600
width: 200
height: 200
color: "black"
}
PropertyAnimation {
id: animOne
target: one
properties: "x"
to: 600
running: false
}
PropertyAnimation {
id: animTwo
target: two
properties: "x"
to: 0
running: false
}
function pop(last_elapsed, elapsed) {
for (var i = last_elapsed; i <= elapsed; i++) {
if (i in root.listEvent) {
listEvent[i]()
}
}
}
function scheduleEvent(delta) {
root.last_elapsed = root.elapsed
root.elapsed += delta
root.pop(root.last_elapsed, root.elapsed)
}
Timer {
id: scheduler
interval: 16
running: true
repeat: true
onTriggered: {
root.scheduleEvent(scheduler.interval)
console.log("timer: " + root.elapsed)
}
}
}

Accessing ListItemComponents on the run

right now I'm trying to create a ListView which loads the dataModel using a custom QML. Here's the snippet of my code:
ListView {
id: firstPageListView
visible: false
dataModel: firstPageDataModel
layout: GridListLayout {
columnCount: 1
cellAspectRatio: 2.0
headerMode: ListHeaderMode.Standard
verticalCellSpacing: 10
}
listItemComponents: [
ListItemComponent {
//custom qml that will be used
ThumbNote {
title: ListItemData.title
text: ListItemData.text
imageSource: ListItemData.image
listmode: true //list mode
date: ListItemData.date
}
}
]
}
I want to create a button that will change the listmode property of each component into false. By doing so, the object will invoke a function that set in the onListModeChanged() of the ThumbNote QML.
Sorry for my poor english, any help would be appreciated. :)
Perhaps you might consider adding a property to the ListView and binding the ThumbNotes' properties to it.
E.g.:
ListView {
id: firstPageListView
visible: true
dataModel: firstPageDataModel
property bool listMode: true
...
listItemComponents: [
ListItemComponent {
//custom qml that will be used
ThumbNote {
title: ListItemData.title
text: ListItemData.text
imageSource: ListItemData.image
listmode: firstPageListView.listMode
date: ListItemData.date
}
}
]
}
Button {
onClicked: {
firstPageListView.listMode = false;
}
}

How to play SystemSounds in the Blackberry 10 Dev Alpha Simulator?

I am just trying to run the provided sample code which, as far as I know, should work just fine. Is there anything I am missing or is this a limitation of the simulator.
If so, are there any workarounds?
import bb.cascades 1.0
// To use the MediaPlayer, we must include
// the multimedia library.
import bb.multimedia 1.0
Page {
Container {
id: mainContainer
layout: StackLayout {
orientation: LayoutOrientation.TopToBottom
}
topPadding: 50.0
Label {
id: titleLbl
text: qsTr("SystemSound and MediaPlayer\n Sample App")
multiline: true
textStyle.fontSizeValue: 9.0
textStyle.fontWeight: FontWeight.Bold
textStyle.fontFamily: "Verdana"
textStyle.color: Color.DarkBlue
textStyle.textAlign: TextAlign.Center
horizontalAlignment: HorizontalAlignment.Center
}
// Part 1 of the sample: Playing system sounds.
Container {
id: systemSoundsContainer
layout: StackLayout {
orientation: LayoutOrientation.TopToBottom
}
topMargin: 100.0
horizontalAlignment: HorizontalAlignment.Center
DropDown {
id: soundSelectorDropdown
title: "Sound: "
maxWidth: 600.0
Option {
text: qsTr("Battery Alarm")
value: SystemSound.BatteryAlarm
selected: true
}
Option {
text: qsTr("Browser Start")
value: SystemSound.BrowserStartEvent
}
Option {
text: qsTr("Camera Shutter")
value: SystemSound.CameraShutterEvent
}
Option {
text: qsTr("Device Tether")
value: SystemSound.DeviceTetherEvent
}
Option {
text: qsTr("General Notification")
value: SystemSound.GeneralNotification
}
} // soundSelectorDropdown
Button {
id: systemSoundPlayButton
text: qsTr("Play Selected System Sound")
minWidth: 600.0
onClicked: {
systemSound.play();
}
} // systemSoundPlayButton
} // systemSoundsContainer
// Part 2 of the sample: Playing custom sound files.
Container {
id: customSoundsContainer
layout: StackLayout {
orientation: LayoutOrientation.LeftToRight
}
topMargin: 100.0
Button {
id: customSoundPlayButton1
text: qsTr("Play Sound 1")
layoutProperties: StackLayoutProperties {
spaceQuota: 1.0
}
onClicked: {
// Here we could have created a second MediaPlayer object to
// use to play our sound, but instead we programmatically
// changed the sourceUrl property of the current myPlayer
// MediaPlayer object, and re-used it to play our sounds.
myPlayer.setSourceUrl("asset:///sounds/Doorbell_001.wav")
myPlayer.play()
}
} // customSoundPlayButton1
Button {
id: customSoundPlayButton2
text: qsTr("Play Sound 2")
layoutProperties: StackLayoutProperties {
spaceQuota: 1.0
}
onClicked: {
// Same as above, here we also could have created a second
// MediaPlayer object to use to play our sound, but instead
// we programmatically changed the sourceUrl property of the
// current myPlayer MediaPlayer object, and re-used it to
// play our sounds.
myPlayer.setSourceUrl("asset:///sounds/Doorbell_002.wav")
myPlayer.play()
}
} // customSoundPlayButton2
} // customSoundsContainer
} // mainContainer
// The SystemSound and MediaPlayer objects are attached so
// they can be used in our QML code to play sounds.
attachedObjects: [
SystemSound {
id: systemSound
sound: soundSelectorDropdown.selectedValue
},
MediaPlayer {
id: myPlayer
// sourceUrl: < Set in the Button control's onClicked event handler. >
}
] // Attached objects.
}
Source: https://developer.blackberry.com/cascades/documentation/design/audio_video/playing_sounds_code_sample.html
I suspect that that System Sounds are actually .mp3 or .ogg files internally, where the "Cowbell sample" and "Pull My Beard" are using .wav files. It's a known issue, and has been discussed on the Blackberry Developer forums here and here, and also here, that the simulator does not have the correct codecs to play any sounds except .wav files. The sounds should play correctly on actual hardware.