QML fade out changed item - binding

I'm new to Qt and QML - this seems like a rather simple issue but I can't find a simple solution to it.
Say I have the following example QML
Item {
... lots of other stuff
Item {
id: obj_container
property var obj
Text {
text: obj.name
}
Image {
source: obj.source
}
}
}
Now when the obj property becomes null, I would like to fade out the obj_container item, while still displaying the values it had before it was set to null.
Alternatively, if the obj item changes to a different obj, I would like to fade out the obj_container item (still displaying its previous values) and then fade it in again with the new values.
How would I go about this?
UPDATE
the obj in the example is a Q_PROPERTY of an object set using setContextProperty from C++, as in
engine.rootContext()->setContextProperty("obj_holder", &obj_holder);
the obj property in the example above would then be set like
obj_container.obj = obj_holder.obj
though I think for the purposes above it doesn't make a difference where the obj property is coming from or how it was set/changed. When the obj changes, the above should happen (fade out obj_container with old values, fade in obj_container with new values)

Fading out can be easy done with one of Animation.
For example:
import QtQuick 2.4
import QtQuick.Window 2.2
Window {
width: 600
height: 400
visible: true
Text {
id: txt
anchors.centerIn: parent
property int count: 0
text: count
opacity: 1
font.pixelSize: 100
SequentialAnimation {
id: anim
PropertyAnimation {
target: txt
property: "opacity"
to: 0
duration: 1000
easing.type: Easing.OutQuart
}
PropertyAction {
target: txt
property: "count"
value: txt.count + 1
}
PropertyAnimation {
target: txt
property: "opacity"
to: 1
duration: 1000
easing.type: Easing.InOutCubic
}
}
}
Timer {
interval: 2000
repeat: true
running: true
onTriggered: anim.running = true
}
}

Related

Qt/Qml - Press n hold the space bar - use your iphone space bar like a mouse

Is it possible to get such cursor control in QML TextArea?
for example, a video on this topic
https://www.youtube.com/watch?v=XRUCnZFv9Ro
Because Qt now encourages you to use QtQuick 2.x controls instead of QtQuick 1.x controls interactions need to be recreated in the Qt environment, and you can no longer rely on the OS to do this for you. Unfortunately, the user interaction you describe would take some effort to recreate.
To start, the following code only does the first part: intercepts the long press of a space. The second part had not been implemented, i.e. the handling of mouse drag:
import QtQuick
import QtQuick.Controls
Page {
property bool spaceDown: false
Item {
width: parent.width
height: frame.height
Frame {
id: frame
width: parent.width
opacity: holdArea.focus ? 0.2 : 1.0
TextEdit {
id: textEdit
width: parent.width
Keys.onPressed: {
if (event.key === Qt.Key_Space) {
if (spaceDown) {
holdArea.forceActiveFocus();
} else {
spaceDown = true;
}
}
}
}
}
Item {
id: holdArea
focus: true
Keys.onReleased: {
spaceDown = false;
textEdit.forceActiveFocus();
}
}
}
}
You can try the first part here

highchart - label color by based on point data

I use highchart (spider chart).
I want the labels of xAxis to be colored dynamically, not immedient value.
I want to be able to write code like this:
let myConfig = {
//...any config...
options: {
xAxis: {
labels: {
style: {
color: function(point){
if (point.ext > 3){
return 'red';
}
else{
return 'green';
}
}
}
}
}
}
Please don't suggest me do it by add labelStyle to each point; this way not named 'dynamic'.
You could use xAxis.labels.formatter
Demo: https://jsfiddle.net/BlackLabel/dtqx6wn0/
Points in a series will not be accessible (not created yet) at the time of the axis labels' formatter, but you could access raw data or processed x or y values of each series.

Highchart - show / hide an y-Axis without hiding the series

I'm working with Highchart.
I've got a multiple series graph in which each series have their own y-axis.
pretty much like this one (jsfiddle)
when we click on the legend item for a series, it hides it and the associated y-axis
(using showEmpty:false helped hiding also the name of the axes)
What I'm trying to achieve is hiding the y-Axis of a given series without hiding the series itself.
I tried to hide it by modifying the showAxis property like this :
serie.yAxis.showAxis = false;
but it doesn't work.
Anyone knows how I should do ?
EDIT : I managed to edit the text so I can remove the axis title by setting the text to null but its not enough to hide the whole axis and its values.
here's what i did to edit the text:
serie.yAxis.axisTitle.attr({
text: null
});
Highcharts 4.1.9+
Since 4.1.9, there is an option Axis.visible which can be used to show/hide an axis, demo: http://jsfiddle.net/3sembmfo/36/
Older versions of Highcharts
It's a new feature for Highcharts 3.0 - that allows to update axes in realtime: chart.yAxis[0].update(object) - as object takes the same options as for creating chart. For example:
chart.yAxis[0].update({
labels: {
enabled: false
},
title: {
text: null
}
});
And jsFiddle: http://jsfiddle.net/39xBU/2/
EDIT:
Use below snippet to hide/show axis by just calling axis.hide() and axis.show(). Live demo: http://jsfiddle.net/39xBU/183/
(function (HC) {
var UNDEFINED;
HC.wrap(HC.Axis.prototype, 'render', function (p) {
if (typeof this.visible === 'undefined') {
this.visible = true;
}
if(this.visible) {
this.min = this.prevMin || this.min;
this.max = this.prevMax || this.max;
} else {
this.prevMin = this.min;
this.prevMax = this.max;
this.min = UNDEFINED;
this.max = UNDEFINED;
}
this.hasData = this.visible;
p.call(this);
});
HC.Axis.prototype.hide = function () {
this.visible = false;
this.render();
HC.each(this.plotLinesAndBands, function (plotLine) {
plotLine.render();
});
};
HC.Axis.prototype.show = function () {
this.visible = true;
this.render();
HC.each(this.plotLinesAndBands, function (plotLine) {
plotLine.render();
});
};
})(Highcharts);
It's actually gotten simpler. You only have to set the yAxis title attribute to false:
yAxis: {
title: false
},
Here is an example: jsfiddle example
We can hide Yaxis label without hiding the y-Axis without hiding the series by returning the empty string as follows:
yAxis: {
title: '',
labels: {
formatter: function() {
return '';
},
style: {
color: '#4572A7'
}
}
},
For newer versions (I'm using the 6.2.0), the yAxis property has a parameter called gridLineWidth. Just set it to 0 and the grids for that axis are going to disappear. In this JSFiddle there is an example of it.
However, if you are in styled mode this it's trickier. Here, you have to set a className for the target axis and then set the CSS like this:
.highcharts-yaxis-grid {
&.right-axis {
path {
stroke: none;
}
}
}
For example, this will make dissapear the grids of the axis with a className set as right-axis. This allow to have different styles for the multiple axis.

Kendo slider background color?

I am using Kendo Slider. My requirement is, for every slider value changes I need to change the kendo slider background color.
If you want to change the background of the slider, you can do something like:
$("#slider").kendoSlider({
orientation: "vertical",
min: 0,
max: 100,
smallStep: 1,
largeStep: 20,
showButtons: true,
change: function (e) {
var top = $("#slider").closest(".k-slider-wrap");
if (e.value < 33) {
$(".k-slider-track", top).css("background-color", "#ff0000");
$(".k-slider-selection", top).css("background-color", "#ff0000");
} else if (e.value < 66) {
$(".k-slider-track", top).css("background-color", "#00ff00");
$(".k-slider-selection", top).css("background-color", "#00ff00");
} else {
$(".k-slider-track", top).css("background-color", "#0000ff");
$(".k-slider-selection", top).css("background-color", "#0000ff");
}
}
});
What I did is defining a slider with values between 0 and 100 and define the change handler to read current value (as e.value) and depending on the value define the background of the slide.
The important thing is:
k-slider-selection is the CSS class for the part of the slide that is selected.
k-slider-track is the CSS class of the complete slide.
Ex: if the value is 33 the slider part for 0-33 is k-slider-selection while the full range (0-100) is k-slider-track

Attach JQuery animation to methods/setters instead of CSS properties?

From the JQuery reference # http://api.jquery.com/animate/ :
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle' }, 5000, function() {
// Animation complete.
});
It seems we can only modify real CSS properties, however I wish I could animate JQuery object properties as well. As example I would like to animate the 'value' property of a progressbar:
http://jqueryui.com/demos/progressbar/#option-value
//setter
$('.selector').progressbar('option', 'value', 37);
I couldn't find a way to animate this 'value' property of the progressbar, is there any way to do so?
Thanks for help..
If it's to animate the value couldn't you use javascript setInterval() and clearInterval() method?
You could do something like:
var progressBar = $('#progress');
var index=0;
var maxCount=100;
var theInterval = setInterval (function(){
progressBar.progressbar({value:index});
if (index == maxCount) {
clearInterval(theInterval);
}
index++;
}, 100 );
In the above example the setInterval function fires every 100 milliseconds and just increases the value by 1 each time, when it hits 100 the clearInterval function stops it animating.
You might find this link useful: http://acko.net/blog/abusing-jquery-animate-for-fun-and-profit-and-bacon.
Not exactely what you wanted but you could get around and implement your own step function to update the progress bar.
var step_def = $.fx.step._default;
$.fx.step._default = function (fx) {
if ( fx.prop != 'progress' ) return step_def(fx);
fx.elem[fx.prop] = fx.now;
$(fx.elem).progressbar('option', 'value', fx.now);
};
// Now call animate
$('.selector').progressbar('option', 'value', 0)[0].progress = 0;
$('.selector').animate({ progress: 100 }, { duration: 1000 });

Resources