I have created a slider for a mediaplayer application in QML. The value property of the slider is updated by a thread in the background. My issue is that when the slider is dragged to do a seek,even though a seek action has been done and new value for the slider is updated by dragging, when the mouse is released, the handle jumps to its previous position before coming to the new position. I created the slider using the code below
Slider {
id: sliderHorizontal
x: 145
y: 478
visible: false
activeFocusOnPress:true
maximumValue: 100.0
minimumValue: 0.0
updateValueWhileDragging :true
value: Media.SliderValue
onValueChanged: {
//seek to the new value calling a c++ function
}
}
Can anyone guess why the slider is going back even though the background thread that updates the value is also updating to a new position ?
Related
I am trying to find out why flicking is not working with a TreeView example on my Raspberry Pi3 with touch screen.
Looking at the qml code of TreeView.qml, e.g.
https://github.com/RSATom/Qt/blob/master/qtquickcontrols/src/controls/TreeView.qml:
BasicTableView {
...
__mouseArea: MouseArea {
id: mouseArea
parent: __listView
width: __listView.width
height: __listView.height
z: -1
propagateComposedEvents: true
focus: true
// If there is not a touchscreen, keep the flickable from eating our mouse drags.
// If there is a touchscreen, flicking is possible, but selection can be done only by tapping, not by dragging.
preventStealing: !Settings.hasTouchScreen
...
}
}
By similarly looking at the qml code for BasicTableView.qml, it seems that behavior is controlled by Settings.hasTouchScreen.
According to:
https://code.woboq.org/qt5/qtquickcontrols/src/controls/Private/qquickcontrolsettings.cpp.html
it corresponds to the following method:
bool QQuickControlSettings1::hasTouchScreen() const
{
const auto devices = QTouchDevice::devices();
for (const QTouchDevice *dev : devices)
if (dev->type() == QTouchDevice::TouchScreen)
return true;
return false;
}
However, in my case, Settings.hasTouchScreen returns false; i.e. the touch screen (although working for the rest), is not
correctly detected by the QML environment, which probably explains why the flicking does not work.
According to https://doc.qt.io/qt-5/qtouchdevice.html, my touch device should have been registered somehow by the private QWindowSystemInterface::registerTouchDevice() method, but wasn't.
How can I get this to work?
Thanks!
It seems not to work correctly with tslib, but works by using the evdevtouch plugin which is enabled by adding the following command line arguments when launching the program:
-plugin evdevtouch:/dev/input/eventX
where eventX is the event assigned to the touch input.
With that, QTouchDevice::devices() is no longer empty, and the flicking of the TreeView works.
I have one button. I want to change the states of button e.g:
Default image is black.
onEntered i want image as blue, onExited i want image as black(equal to default state), and onReleased i want image as blue(equal to onEntered state).
Note:
onRelease should be active inside the button and outside the button onRelease shouldn't work.
How this can be achieved?
Mouse area looks like this:
MouseArea
{
anchors.fill: firstImage(parent)
onEntered:
{
firstImage.source = "blue.img"
}
onExited:
{
firstImage.source = "black.img"
}
onReleased:
{
firstImage.source = "blue.img"
}
}
Problem i am facing is:
onRelease is active outside the button.
I want onRelease to be active when press is released inside the button.
You can leverage the fact that you can give every object in qml an extra custom property.
I came up with the following, which seems to be what you ask, however, I see a flaw, because when you are 'entered' and press, the button will go to entered state, so there is not difference in the 'released' state, and after leaving the MouseArea it will again go to 'exited' state.
Note, I did not copy the firstImage.source stuff, but you can easily tailor this example to your situation
import QtQuick.Controls 2.4
Button {
hoverEnabled: true
property bool touched : false
onHoveredChanged: touched = hovered
onReleased: touched = true
text: touched ? "touched" : "not touched"
}
The hoverEnabled needs to be set
I'm programming a small PoC in QML. In a couple of places in my code I need to bind to/query global mouse position (say, mouse position in a scene or game window). Even in cases where mouse is outside of MouseAreas that I've defined so far.
Looking around, the only way to do it seems to be having whole screen covered with another MouseArea, most likely with hovering enabled. Then I also need to deal with semi-manually propagating (hover) events to underlying mouseAreas..
Am I missing something here? This seems like a pretty common case - is there a simpler/more elegant way to achieve it?
EDIT:
The most problematic case seems to be while dragging outside a MouseArea. Below is a minimalistic example (it's using V-Play components and a mouse event spy from derM's answer). When I click the image and drag outside the MouseArea, mouse events are not coming anymore so the position cannot be updated unless there is a DropArea below.
The MouseEventSpy is taken from here in response to one of the answers. It is only modified to include the position as parameters to the signal.
import VPlay 2.0
import QtQuick 2.0
import MouseEventSpy 1.0
GameWindow {
id: gameWindow
activeScene: scene
screenWidth: 960
screenHeight: 640
Scene {
id: scene
anchors.fill: parent
Connections {
target: MouseEventSpy
onMouseEventDetected: {
console.log(x)
console.log(y)
}
}
Image {
id: tile
x: 118
y: 190
width: 200
height: 200
source: "../assets/vplay-logo.png"
anchors.centerIn: parent
Drag.active: mausA.drag.active
Drag.dragType: Drag.Automatic
MouseArea {
id: mausA
anchors.fill: parent
drag.target: parent
}
}
}
}
You can install a eventFilter on the QGuiApplication, where all mouse events will pass through.
How to do this is described here
In the linked solution, I drop the information about the mouse position when emitting the signal. You can however easily retrieve the information by casting the QEvent that is passed to the eventFilter(...)-method into a QMouseEvent and add it as parameters to the signal.
In the linked answer I register it as singleton available in QML and C++ so you can connect to the signal where ever needed.
As it is provided in the linked answer, the MouseEventSpy will only handle QMouseEvents of various types. Once you start dragging something, there won't be QMouseEvents but QDragMoveEvents e.t.c. Therefore you need to extend the filter method, to also handle those.
bool MouseEventSpy::eventFilter(QObject* watched, QEvent* event)
{
QEvent::Type t = event->type();
if (t == QEvent::MouseButtonDblClick
|| t == QEvent::MouseButtonPress
|| t == QEvent::MouseButtonRelease
|| t == QEvent::MouseMove) {
QMouseEvent* e = static_cast<QMouseEvent*>(event);
emit mouseEventDetected(e->x(), e->y());
}
if (t == QEvent::DragMove) {
QDragMoveEvent* e = static_cast<QDragMoveEvent*>(event);
emit mouseEventDetected(e->pos().x(), e->pos().y());
}
return QObject::eventFilter(watched, event);
}
You can then translate the coordinates to what ever you need to (Screen, Window, ...)
As you have only a couple of places where you need to query global mouse position, I would suggest you to use mapToGlobal or mapToItem methods.
I believe you can get cursor's coordinates from C++ side. Take a look on answer on this question. The question doesn't related to your problem but the solution works as well.
On my side I managed to get global coordinates by directly calling mousePosProvider.cursorPos() without any MouseArea.
I would like to keep the dataview scrollable so that I can use the scrollBy and scrollTo functions, but I don't want the user to be able to swipe to scroll the dataview. But I still need to respond to the swipe gesture.
I was thinking that maybe adjusting the momentumEasing values could do it. But I'm having trouble getting my changes to be used by the scroller. In my dataview config I have the following code, but it changes nothing about the scroller behaviour:
scrollable: {
momentumEasing: {
momentum: {
acceleration: 0,
friction: 999999
},
bounce: {
acceleration: 0,
springTension: 0
}
}
}
Any ideas why this doesn't work? Alternatively, are there any other, cleaner ways to acheive what I'm after? I also will need to remove the scollbar from appearing, but I assume that can be done with CSS?
Thanks.
You just need to override the onDragStart method in your scroller so it does nothing.
container.getScrollable().getScroller().onDragStart = null;
I am currently building a site which utilises multiple flexsliders. The concept is that when the user clicks a specific button, it shows a flexslider with featured content relevant to the button pressed, which is all pretty simple stuff.
The problem i am having is at the moment, the flexsliders are firing on the click of a button, however whenever a user clicks on a different button, the slider is not reset.
I want to try and make the slider reset to slide 0 on each button click. I have tried using .stop() and some of the callback features within the plugin, but i have had no luck as of yet. Was wondering if anybody else had ever faced this before? (and won..)
the code in the footer.php is pretty standard issue at the moment:
$('.button').click(function() {
$('.flexslider').flexslider({
controlNav: true,
directionNav: false,
slideToStart: 0,
pauseOnHover: true,
});
});
I know it's been long since this question was posted, but it might help somebody.
I actually faced the same problem. After some poking around I managed to get it working using the following code:
// Catch the flexslider context
var slider = $(".flexslider").data("flexslider");
// Unset the animating flag so we can move back to the first slide quickly
slider.animating = false;
// Move to the first slide and stop the slideshow there
slider.flexAnimate(0, true, true);
If you want to return at the first slide, but don't want the animation to stop, just replace the last line with slider.flexAnimate(0);
I believe that the slider.stop() method doesn't unset the animating flag. In my opinion it should, because this flag is used in the flexAnimate() function to check whether to actually slide or not. If the flag is set to false, then the flexAnimate() function will suddenly return.
think the answer might lie in the start callback function. Try something like this (untested)
$('.button').click(function() {
$('.flexslider').flexslider({
controlNav: true,
directionNav: false,
slideToStart: 0,
pauseOnHover: true,
start: function(slider) {
if (slider.currentSlide != 0) {
slider.flexAnimate(0)//move the slider to the first slide (Unless the slider is also already on the first slide);
}
}
});
});
use the new api at line 1056 in flexslider like
' startAt: 0,
//Integer: The slide that the slider should start on. Array notation (0 = first slide)'