HTML pan and tilt input control - javascript

I'd like to create an input that allows the user to drag a dot around a box and will output the 2D coordinates of that dot inside the box. This will be used to drive pan and tilt values. The picture below shows the functionality I'd like from another application:
I'd like to use this in a web application with HTML and Javascript. The center (0,0) coordinate should be in the middle of the box (where the crosshairs meet in the example above). May I have some guidance as to how to start going about creating this type of thing?

This can be done in pure HTML and JS, although this problem is not a simple one so I'll just point you in the right direction.
First create a container (div) to represent the 2D grid, and dot using HTML/CSS. You can calculate the co-ordinates of the dot in relation to the container using HTMLElement.offsetTop() (although this will be co-ordinates from the top-left of the container, so you will need to do some maths if you want it to be from a different point).
For the actual dragging to happen, you will need to add mouse events (would be easiest to use jQuery for this), such as mousedown, mousemove and mouseup.
Your mousedown event will check that the mouse is over the dot when pressed, and if so, set a 'dragging' flag to true.
Your mousemove will check the cursor position whenever moved (if dragging === true), and use the mouse position to calculate co-ordinates in relation to the box (using the mouse's position in relation to the box position, which will require some maths skills). You can also alter the position of the dot to follow your mouse with CSS (if the dot has position:absolute style applied, you will set the top and left properties using HTMLElement.style.
Finally, mouseup will set the 'dragging' flag to false.
Like I said, this will take some time to implement and you may not do it exactly like this, but here's a basic example.

Related

Is there a way to define a dynamic bounding box for the field of view?

Edit 2: I found what I was looking for here. The near and far planes compound the bounding box of the camera.
I have a Perspective Camera and multiple set of points (SphereGeometry) in the space and I want to define a bounding box according to what is visible in the field of view, so that I only need to load the points that are currently visible in the space according to the camera settings.
My problem when defining the bounding box is that I don't have a reference point between the camera position and what I'm currently looking at. For example, if the camera is at the position v1(20, 20, 20), and let's say the mid point of my set of points is set at v2(5, 5, 5). Then, I can define the initial point of my bounding box as this mid point v2(5, 5, 5) , and I could create a bounding box (square) with size (v1-v2)/2. But once I start moving the camera I lose this reference initial point, and I don't know how to obtain a distance parameter to define a proper bounding box of "what is currently visible".
Every time I move the camera I need to know the size of the bounding box and its position so that it represents as accurate as possible "what is currently visible" in the field of view.
One possible solution could be to translate the initial point v2(5, 5, 5) following every camera movement, is there any way to do this or something similar?
Edit:
So far I've been able to replicate #TheJim01 's code into my component, but I think this solution is not what I was looking for or I'm not able to understand it properly. I'm adding some images next to better explain what is going on.
In the next image I have a set of points of various colors, the 8 brown points represent each of the worldBoxCorners before performing a worldToLocal transformation. Which fits the whole space as it should.
Next, I render worldBoxCorners after the transformation. I do not understand how the bounding box is moved or how can I use it.
What I'm looking for is, for example if I zoom in into the space in the greener zone, to obtain a bounding box alike the last image.
The point is to only load the points that are within the field of view, but for that I need to define a bounding box. When I say loading the points, I mean that only the points that are visible should be loaded from the backend (not talking about rendering here).
This solution provides a perfect bounding box for the current loaded space. What I'm missing on is how to define a new bounding box for a given loaded space according to camera parameters change (zoom in/out or rotations).

Matter.js - how to constrain movement and mouse interaction to a single axis?

Using Matter.js, how can I constrain movement of a body to a single axis (i.e. only the X axis)? I'd like to be able to make it so a body can only be dragged horizontally within a set boundary.
I'm trying to create an abacus and allow the user to flick beads around along a fixed bar. Laying it all out is fine, but I can't for the life of me work out how to restrict the movement like this.
I've tried setting a fixed body above and below the beads, which works to an extent but when I add MouseConstraint the dragging behaviour ignores this altogether and you can drag right through it.
I've also tried using the beforeUpdate event to "reset" the Y value of each bead before it gets drawn (using Body.setPosition). This sort of works to an extent, however the Y value kind of drifts back in to alignment and I'd rather it not deviate at all if that makes sense.
Is there a better way to accomplish this task? Can a body be told to "stick" to another body perhaps? That way I could create my bars and stick the beads to them.

collision detection + mouse events in kineticjs

I am trying to do a drag & drop on a number of rectangle objects that are draggable.
There is another set of rectangle objects acting as container for dropping objects - I have added them to a group.
How can I detect the collision between a group/or any of the box objects(stored in array) - with the draggable elements.
Everything is in a single layer.
Also when the draggable element is placed over the group box, it does not listen to the mouse over event (which is assigned to it) - is there a way to delegate the events(mouseover, mouseout) to the low level object when another element drags over it.
box.on("mouseover",
function(e) {
console.log("mouseover");});
Thanks.
I believe that KineticJS doesn't support it's own collision detection so you would have to write your own function. These 2 SO questions are good starting points:
Dragging collisions
HTML5 / kineticJS getIntersection function implementation
Referencing the answer to this question: How to start mouseover event while dragging
We see that we can follow similarly on KineticJS, and that the solution goes hand in hand with creating your own collision detection function. The only difference here is instead of calculating the coordinates for hit detection on divs, you can calculate the 4 corner point coordinates of each shape (in your case, a rectangle). Also, instead of writing your own drag functions, you can use getMousePos() and the events: dragstart, dragend, and mousemove to rewrite the code from the fiddle example and cater to your kinetic rectangles.

using Raphael JS to scale a group of elements at once

I have a simple scene in Raphael JS which contains mainly basic elements, circles, rect, images, etc.
I want to scale up a circle on the mouseover event, which I can do, but I want to add an image over the top of the circle and have that scale as well when the mouse is over the circle OR the image.
Is there a way that I can scale two (or X) items instead of one at a time? Is there some kind of "container" element that I cant find?
Also, when then mouse is over the circle, the event fires, but then when the mouse goes over the image, the mouseout event of the circle fires, how can I stop this so that it looks like the circle and image are one element?
I think what you have to do here is create a transparent circle over the circle/image combination you already have. So, circle,image,circle. The second circle is where you put your event handling. By doing it this way, the top transparent circle will get focus even when it looks like you're hovering over the image.
Stick the lot of them in a set and scale the set in the mouseover. I'd do an example for you, but I'm inherently lazy. If you're really stuck, I'll give it a go.
Hope that makes sense.

Animate rotated objects with Raphaƫl.js

I'm my current project I need to draw robots and move them around.
A robot is composed of a circle and a box which shows the current orientation of the robot.
My problem is that I when I animate them, the orientation box moves in a strange way because of its rotation...
Here's what I mean: http://jsfiddle.net/zmunB/
Thanks for your help.
Balzard.
This fiddle shows another option. It may not be quite as elegant as rajkamal's solution, but it may be easier to understand if you are not used to working with matrices. You should be able to add features to it at will (notice the 'eye' I added).
Basically, I am just adding the features to a set, and applying the transformations to each element in the set. Kick off the animations by clicking the colored squares to the right. Note that 'Move relative' will make the set move in the direction it is 'looking'.
Please refer this fiddle. http://jsfiddle.net/apUvX/2/ , for transformed movements.
Here in "onAnimation" method of circle, we are transforming the circle's center coordinate to the
rectangles coordinate system using Matrix.x,Matrix.y and assigning the result to the the x,y of the rectangle.

Categories