I'm currently trying to track a persons drawing movements, and saving them to a database.
On my webpage there is a canvas, which allows the user to draw using the mouse. What I would like is to be able to save the movements that the user makes while drawing, so that I am able to re-trace every movement made while drawing.
My own thoughts for a solution is that whenever the user clicks his mouse within the canvas, the coordinates will be saved until the user releases the mouse button. Another solution is to save an image of the canvas every 3-4 clicks in the canvas, so you are able to kind of see the drawing process.
Does anyone have a better solution, or some tips on how to best achieve such a feature?
UPDATE:
So I may not have been specific enough in my description. Basically I want to record the drawing process for a user by saving the coordinates, so that I am able to retrieve these coordinates from the database and play back the users movements while drawing.
The coordinates will be saved to the database when the user presses a save-button, so I need to store all the coordinates until the button is pressed.
I would like help on both the client- and server-side. The server-side is written in Java. I am currently using JavaScript on the client-side and MySQL as my database.
Sending the coordinates to a server while the person is drawing may cause a lot of traffic, and may slow down your server's response with other users.
Instead of capturing and sending every movement, rather:
buffer the movements from mouse-down until mouse-up, and then send that "draw instance" to the server;
capturing these draw instances in an array and when the user is finished drawing -then only submit to server may be even better
Making use of a "web-socket" instance per user may be advantageous as this will be a lot faster than HTTP-request (AJAX) and at the same time, if you have multiple people drawing at the same time, the web-socket can push the data of other users to each connected user's live drawing.
I'm not sure what you need to accomplish here, but, the above may help.
Perhaps if you can elaborate what it is you want to accomplish, a more detailed answer can be drafted with specific instructions on how to accomplish what you need.
Related
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
I'm working on a web-app and I would like to have some first hand experience on how our users actually use our software. This is my idea:
*Use javascript to save the html-DOM and cursor-position. Possibly only the changes to the DOM to reduce the amount of data.
*Save it to the server along with the users browser used.
Do a javascript that updates the DOM according to the recording and an image that replicate the mouse movements in the corresponding browser.
Has this ever been done before?
Would this work in most cases?
As circle73 said, you can use HTML5 to do this via canvas, however, I don't think that would track the mouse position. You could write a JavaScript function to track the mouse coords every x seconds, you'd just have to time it with the screen captures so you can match up the mouse movements with the captured frames.
Your other options would be to do this via an ActiveX control as answered here: Take a screenshot of a webpage with JavaScript?
I would approach this with the following high-level strategy:
Use jQuery mouseover to record the user's mouse positions on the page. Store these positions (x,y coordinates) locally. Send a structured request to your server with these coordinates.
Use a browser automation framework like Selenium to "play" the stored coordinates. You can use the same path as your user, only in development, in order to see what he saw. For example:
void mouseMove(WebElement toElement, long xOffset, long yOffset)
This moves (from the current location) to new coordinates. There's more info here.
Take screenshots with of the page with Selenium WebDriver. More info here.
I recently spent some time playing a game called Draw Something (Android, iOS). I like the way one player can draw to the screen and the drawing will be re-created for the second player. I want to use something similar to this on my website, but I'm not sure how.
The project I'm working on will use a One-To-Many connection, rather than Draw Something's One-To-One connection. Essentially a user will make a drawing and it should be recreated for anyone who views it.
Is it possible to do this on the web using some combination of HTML5, JS, and Python?
Easily done with ontouchstart, ontouchmove and ontouchend. Example: http://ontouchstart.github.com/
Just track the coordinates of the touch event (or mouse, but use onmousedown, onmousemove and onmouseup) and send it to the server. The server then sends the data to the other clients which draw everything based on the coordinates from the events.
Here is a library using Raphaeljs http://ianli.com/sketchpad/. It stores the drawing in a JSON format that you could use to redraw wherever you need it. I'm not sure how well it would be suited for what you want to do, but it might work.
So I built this real-time drawing app with node.js, socket.io, and html5 canvas. Every pixel that the mouse is moved while clicked is tracked and broadcast (to display drawing input on other computers).
I know it is possible to save an image of the canvas but this canvas is very large (10000x10000+ pixels). Right now, when the page is refreshed all the drawings are gone (as it was just send over a socket, nothing saved).
I would like to save all the canvas data to a db and then somehow rewrite it when the page is loaded again, but it is simply too much. How would you go about doing this??
You can track the clicks and mouse moves that made the canvas look that way while you're sending them over the socket, and simulate them to rebuild the image.
I'm seeing in another forum if the best way to do this is with Javascript or Ajax but I'm wondering if there is an even easier simpler way. I'm trying to create a web service where users can check which countries they have visited from a list of 175 or so and a World map image would then instantly update with a filled color.
There are other similar services, but I'm envisioning mine to be both updating from checks in checkboxes and by clicking on the target country in the displayed image say with an imagemap. Additionally other solutions display all the visited countries in the same color. I would like different colors for different countries or at least for those countries that touch. Eventually I would like to include a feature that enables the choice of which colors to assign countries.
I found a Sourceforge project called pwmfccd. It's simply an open source image of the world and the coordinates on the PNG image for all the countries. You can use mogrify from ImageMagick and floodfill to fill the countries with color. I have done this successfully, locally with batch files.
My ISP has told me where mogrify is located, basically "/usr/bin/mogrify". I now have a horrendously complicated cgi script which if it worked is set to redraw the world map image with each checkbox. It's here. It also redraws the whole web page with each check. The web page starts here. Of course this is not at all efficient, and I think probably the real way to go is Ajax or Javascript, so that maybe just the image gets changed and redrawn, not the whole web page. Sorry I don't even know the difference between Javascript and Ajax and their relative merits at this point.
I suppose you could make just one part of the image update with each check or click on the image instead of even just the image redrawing, but I have never even heard of a hint at being able to do that for irregularly shaped image elements like countries. So I guess an Image map and sister checkbox entries tied to mogrify events redrawing the user's personal copy of the image with an image refresh would be the only way to go.
So how do you do this with something other than Javascript or Ajax or is that definitely the way to go and if so, how would you do it? Or can you after all cut up a web based image into irregular puzzle shaped piece which you can redraw individually at will.
Thanks in advance for reading and considering answering this post.
Well, it looks like maybe my hosting company only supports using PHP with ImageMagick. At least I know better what to try create. I'm completely new to PHP, but I guess that is alright