I am trying to control a parallel-coordinates-chart (parcoords.js from D3js framework) with my leap motion controller.
So at the parcoords.js file is a drag function which uses the standard d3js drag behavior, which supports touch and mouse, described here: https://github.com/mbostock/d3/wiki/Drag-Behavior#wiki-drag
But I try to realize a grad-gesture by the leap motion to drag the axis around individually. Solving this I need to map the leap-coordinates to control the mouse via javascript. Another solution might be to call the reorder-able function, when a grab is detected by my javascript. But I do not know how to use the leap-finger coordinates to work with d3js drag behavior.
I hope anyone have an idea to solve this Problem.
A demo of the d3js parallel coordinates can be found here: http://3developers.de/parcoords/
There is also a red square to show you leap finger position.
Yours Lucas
The main problem is that you would need to define what a "drag gesture" is. Here are some options:
Any finger ("pointable") movement. So as soon as the controller detects a finger, the dragging starts and is defined by the movement of the finger. The drag stops when the finger leaves the area where it can be detected by the controller.
A gesture starts the drag. This could be for example a "tapping screen" gesture. The drag then follows the movement of the respective finger and stops when the gesture is repeated.
You can further restrict when dragging starts by requiring the finger to be immediately above the respective element.
In any case, D3 doesn't offer direct support for leap motions, so you would have to manually trigger the events for dragstart, drag and dragend.
Related
I am developing a 3D engine on an html-canvas in JS and want to be able to handle mouse movements for camera movement. I want it to be able to track infinintly in every direction. I have tried to use event.client(X/Y) to record the movement, but when the cursor comes to the end of the window or screen, the cursor can't move further, thus I can't look further in that direction. Is there a way to fix this without the use of libraries? Examples of it working are for example Krunker.io where you can move your crosshair around is space endlessly. (I think it is made using three js)
I found the Pointer-lock API which let's me lock the cursor and record the movement and used event.movementX/Y instead of event.clientX/Y. This makes you not run out of "screen real estate" and can rotate continuously.
Need to implement really big graphic report with up to 5K elements on it (Gantt chart).
User must be able to scroll through report (scrollbar or mouse grab action) and change scale.
So far I came up with following ideas:
Scrolling by mouse grab action
Listen to user mouse down event and rerender the whole canvas on every mouse move (changed position) until mouse up event.
Scroll bars
Have to be custom made (also canvas or just html), also with event listeners on move action.
Scale
Could be implemented by using canvas scale property.
Do I think in right direction or there's a better (less code / more efficient) approach?
I am trying to use
d3.js Multiple Area Chart for representing a collection of data. The graph building part was completed successfully. I've created a brush for timeline dragging and the bug is that, I guess, the mousedown event is not recognised by the brush. When I click on the context area (brush), I don't have to drag and release the mouse to select an area. After clicking the selection of area goes to left and right automatically depending on the direction my mouse moves. Is that some kind of bug or due to some changes that I made in the code?
I am having problems detecting mouseover events on SVG path elements. It seems that the smaller the strokeWidth for the path element, the less success I have in detecting the mouseover.
Also, I am using jquery-svg plugin to do the drawing.
Below is a fiddle of trying to detect using a jquery mouseover event on the path element.
Mouseover Fiddle
Below is a fiddle of trying to detect by attaching a mousemove listener to svg, then using document.getElementFromPoint.
getElementFromPoint Fiddle
Neither of these seem to work reliably, especially if the mouse is moving fast. Is it possible to make either of these more sensitivity to better detect the mouseover? Or perhaps a better way of doing this?
The way browsers work, you don't get mouseover events continuously, but you get one each time the operating system updates the cursor position. And if the mouse is moving fast, you will get a events a few pixels apart. The mouse doesn't slide over the document, it jumps. Here's a jsfiddle showing where each event occurs. There's nothing that you can do to get mouseover events for all the elements between two consecutive positions of the cursor.
You could do something different: remember the previous location of the mousemove event, compute the line between that point and the current mouse position, and compute all the intersections between this line and all the other shapes in the document. But that is going to be resource-intensive, since there's no API available for that, you'll have to compute intersections yourself. There is a library that can help you.
I'm making a game using the HTML5 canvas. There is some odd behaviour when dragging and dropping in Internet Explorer. It works most of the time, but approximately one in ten times it will show the can't drag image symbol (that little circle with a cross through it). When I release the mouse button after this has happened the image will jump into place, and it then follows the mouse around despite the mouse button being up, like the mouseup event never happened. This does not happen at all in any other browser which makes me think it's not the way I have implemented drag and drop.
I can't understand why it would show this symbol even if there was something wrong with my drag and drop code. How would it even know I'm trying to drag an image? Has anyone experienced this before and what did you do about it?
I didn't think it was necessary to post any code as it's just standard drag and drop, although I have my own input class so it might look confusing. But I'll talk about some of the details now.
If the mouse is pressed that frame I check to see whether it's over one of the draggable images. If it is then next time the mouse is moved while the mouse button is still down the image is moved to the mouse's new position minus the offset.
I remove the mouse move event listener each time the mouse is released and add the event listener each time the mouse button is pushed. I store each mousedown and mouseup event in an array, and on each frame I loop through the events to set the appropriate flags. (wasPressed, wasReleased, isDown, etc) I only store the the most recent mousemove event. I then query these flags from my game loop.
Make sure you're not letting any events bubble, usually this means calling e.preventDefault(); on your mouseodwn/move/up events
in addition, you should prevent selection on the canvas, which should stop some dragging and double click bugs:
canvas.addEventListener('selectstart', function(e) { e.preventDefault(); return false; }, false);