How to detect user has drawn a certain path using Javascript - javascript

I want to create a small activity where user will be required to draw certain predefined shape using Javascript/Jquery.
But I am not able to figure out a way to validate what the user has drawn.
I will appreciate any help as to how to approach this problem. Thanks in advance.

Have you thought of the following jQuery commands: for .mousedown(), .mouseenter(), .mousemove(), .mouseup(), .mouseleave(), .mouseenter()? I assume that you will be monitoring the user's mouse movement especially the interaction between the mouse and a predefined space in the browser. Depending on that, you can place a listener that monitors their mouse movement from the user.
Hope this helps.
Thomas

Related

BoxSeries3D cursor and mouse clicks

I'm trying to have the data for the box under the mouse appear on hover like the 2D charts. There do not seem to be any interactive examples that I could find showing this and figuring it out from the API is eluding me. I'd also like to get the box that is clicked on by the mouse but the onMouseClick event added to the box series 3D that I tried as a starting point does not seem to do anything.
unfortunately BoxSeries3D or 3D series in general do not support any user interactions at the time. The same event methods as for 2D exist, but they don't do anything.
The development of new or missing LCJS features is adjusted in real time according to existing user needs, so it is a good thing that you asked this. If you are a licensed user, or would be interested in getting closer to the development to voice your requirements, please contact us

Advice on how to accomplish background scrolling in all directions

I'm trying to figure out what is the best way to begin creating an effect like (https://howifight.53.com) where the background is scrollable/draggable in all directions.
I know the technology behind this is pixi.js however, I can't seem to dig out how this effect is achieved. Any pointers in a good direction would be awesome.
First, you need to set up the page and styles.
You need a containing element to contain the HTML you're moving around (using overflow:hidden). Then you need an element within that to actually move around with JavaScript.
Then you need to implement some drag/drop functionality. Capture mousedown, then capture mousemove and update on each requestAnimationFrame, then stop dragging with mouseup is triggered.
That's a very basic overview, but I've mocked up an example for you to look at: jsFiddle. Feel free to ask any questions.

Display 2 cursors at the same time using Javascript

I'm actually working on a video conferencing project and I was wondering if there is any way to display 2 cursors at the same time based on mouses' position of the 2 guys talking to each other?
Basically, they gonna share the same screen, but I want one to be able to see the mouse pointer of the other one since they gonna work on common exercice.
Thanks for the help
Wouldn't it be easiest to have a div element with a custom mouse cursor that you move around in JavaScript by the coordinates received from the other user?
I think having two equal-looking cursors would just cause confusion.

Image Magnifiers and Clickable Content

I'm currently using an application that generates large images for organizational maps, unfortunately the content is quite small due to the volume of data being output. I would like to find a way that allows the user to view segments of the map in an intuitive manner, yet still allow the user to click content inside of the map.
The first thing that came to mind was an image magnifier using something similar to the loupe jQuery plugin. This works great for magnifying the image, but I can't select content once magnified. If anyone has any suggestions for possible solutions to this issue I would greatly appreciate the help.
Thanks!
You might try Etalage: http://frique.me/demos/etalage/ -- if you click on the image, the link works (triggers the javascript alert), almost no other image zoomer seems to do that.
I'm trying to find something that returns the coordinates on a click, so I can ask users to zoom and and find things within a picture, and then I'll have the coordinates to crop the picture to extract the items they've found. But I haven't found a script that does that yet, either.

jQuery and Rails image tagging / rectangle selection

I have a simple problem in my mind but can't figure out where to start and JS isn't my strongest front. The JavaScript part is what gives me troubles.
I have an uploaded image which I want to drag my mouse upon to make a rectangle and get the rectangle coordinates. Those coordinates should go into my Rails app db so that this rectangle is latter displayed to the user and the image part that is selected will be zoomed to the user.
I've gone through several jQuery plugins that do tagging on images but first of all they are too complex for my needs and can't be customizable to this specific need of mine.
In order to get a real live example please see this http://www.stylebistro.com/lookbook/Tops/PJfJzgo2fN9
It is essentially what I want to achieve but the administration part is giving me troubles.
Regards,
Yavor
jCrop has an API that returns image coordinates. It can zoom the image as well, so it should be a good fit.

Categories