I'm building a HTML5 game and I am trying to put the mouse cursor over a certain control on a specific event so that moving in a specific direction always has the same result. Is this possible?
You cannot move the mousepointer with javascript.
Just think about the implications for a second, if you could ;)
User thinks: "hey I'd like to click this link"
Javascript moves mousecursor to another link
User clicks wrong link and inadvertently downloads malware that formats his c-drive and eats his candy
Run a small web server on the client machine. Can be a small 100kb thing. A Python / Perl script, etc.
Include a small, pre-compiled C executable that can move the mouse.
Run it as a CGI-script via a simple http call, AJAX, whatever - with the coordinates you want to move the mouse to, eg:
http://localhost:9876/cgi/mousemover?x=200&y=450
PS: For any problem, there are hundreds of excuses as to why, and how - it can't, and shouldn't - be done.. But in this infinite universe, it's really just a matter of determination - as to whether YOU will make it happen.
I would imagine you could accomplish placing the mouse cursor to a given area of the screen if you didn't use the real (system) mouse cursor.
For instance, you could create an image to act in place of your cursor, handle an event which upon detecting mouseenter into your scene, set the style on the system cursor to 'none' (sceneElement.style.cursor = 'none'), then would bring up a hidden image element acting as a cursor to be anywhere you like with in the scene based on a predefined axis/bounding box translation.
This way no matter how you moved the real cursor your translation method would keep your image cursor wherever you needed it.
edit: an example in jsFiddle using an image representation and forced mouse movement
Great question. This is really something missing from the Javascript browser API. I'm also working on a WebGL game with my team, and we need this feature. I opened an issue on Firefox's bugzilla so that we can start talking about the possibility of having an API to allow for mouse locking. This is going to be useful for all HTML5/WebGL game developers out there.
If you like, come over and leave a comment with your feedback, and upvote the issue:
https://bugzilla.mozilla.org/show_bug.cgi?id=630979
Thanks!
You could detect position of the mouse pointer and then move the web page (with body position relative) so they hover over what you want them to click.
For an example you can paste this code on the current page in your browser console (and refresh afterwards)
var upvote_position = $('#answer-12878316').position();
$('body').mousemove(function (event) {
$(this).css({
position: 'relative',
left: (event.pageX - upvote_position.left - 22) + 'px',
top: (event.pageY - upvote_position.top - 35) + 'px'
});
});
So, I know this is an old topic, but I'll first say it isn't possible. The closest thing currently is locking the mouse to a single position, and tracking change in its x and y. This concept has been adopted by - it looks like - Chrome and Firefox. It's managed by what's called Mouse Lock, and hitting escape will break it. From my brief read-up, I think the idea is that it locks the mouse to one location, and reports motion events similar to click-and-drag events.
Here's the release documentation:FireFox: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_APIChrome: http://www.chromium.org/developers/design-documents/mouse-lock
And here's a pretty neat demonstration: http://media.tojicode.com/q3bsp/
You can't move a mouse but can lock it.
Note: that you must call requestPointerLock in click event.
Small Example:
var canvas = document.getElementById('mycanvas');
canvas.requestPointerLock = canvas.requestPointerLock || canvas.mozRequestPointerLock || canvas.webkitRequestPointerLock;
canvas.requestPointerLock();
Documentation and full code example:
https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
Interesting. This isn't directly possible for the reasons called out earlier (spam clicks and malware injection), but consider this hack, which creates an impression of the same:
Step 1: Hide the cursor
Let's say you've a div, you can use this css property to hide the real cursor:
.your_div {
cursor: none
}
Step 2: Introduce a pseudo cursor
Simply create an image, a cursor look-alike,and place it within your webpage, with position:absolute.
Step 3: Track actual mouse movement
This is easy. Check internet on how to get real mouse location (X & Y coordinates).
Step 4: Move the pseudo cursor
As the actual cursor move, move your pseudo cursor by same X & Y difference. Similarly, you can always generate a click event at any location on your webpage with javascript magic (just search the internet on how-to).
Now at this point, you can control the pesudo cursor the way you want, and your user will get the impression that the real cursor is moving.
Fair Warning: Do not do it. No one wants their cursor or computer controlled this way, unless if you've some specific use-case, or if you are determined to flee your users away.
You can't move the mouse pointer using javascript, and thus for obvious security reasons. The best way to achieve this effect would be to actually place the control under the mouse pointer.
Couldn't this simply be done by getting actual position of the mouse pointer then calculating and compensating sprite/scene mouse actions based off this compensation?
For instance you need the mouse pointer to be bottom center, but it sits top left; hide the cursor, use a shifted cursor image. Shift the cursor movement and map mouse input to match re-positioned cursor sprite (or 'control') clicks When/if bounds are hit, recalculate. If/when the cursor actually hits the point you want it to be, remove compensation.
Disclaimer, not a game developer.
Related
I'm building a HTML5 game and I am trying to put the mouse cursor over a certain control on a specific event so that moving in a specific direction always has the same result. Is this possible?
You cannot move the mousepointer with javascript.
Just think about the implications for a second, if you could ;)
User thinks: "hey I'd like to click this link"
Javascript moves mousecursor to another link
User clicks wrong link and inadvertently downloads malware that formats his c-drive and eats his candy
Run a small web server on the client machine. Can be a small 100kb thing. A Python / Perl script, etc.
Include a small, pre-compiled C executable that can move the mouse.
Run it as a CGI-script via a simple http call, AJAX, whatever - with the coordinates you want to move the mouse to, eg:
http://localhost:9876/cgi/mousemover?x=200&y=450
PS: For any problem, there are hundreds of excuses as to why, and how - it can't, and shouldn't - be done.. But in this infinite universe, it's really just a matter of determination - as to whether YOU will make it happen.
I would imagine you could accomplish placing the mouse cursor to a given area of the screen if you didn't use the real (system) mouse cursor.
For instance, you could create an image to act in place of your cursor, handle an event which upon detecting mouseenter into your scene, set the style on the system cursor to 'none' (sceneElement.style.cursor = 'none'), then would bring up a hidden image element acting as a cursor to be anywhere you like with in the scene based on a predefined axis/bounding box translation.
This way no matter how you moved the real cursor your translation method would keep your image cursor wherever you needed it.
edit: an example in jsFiddle using an image representation and forced mouse movement
Great question. This is really something missing from the Javascript browser API. I'm also working on a WebGL game with my team, and we need this feature. I opened an issue on Firefox's bugzilla so that we can start talking about the possibility of having an API to allow for mouse locking. This is going to be useful for all HTML5/WebGL game developers out there.
If you like, come over and leave a comment with your feedback, and upvote the issue:
https://bugzilla.mozilla.org/show_bug.cgi?id=630979
Thanks!
You could detect position of the mouse pointer and then move the web page (with body position relative) so they hover over what you want them to click.
For an example you can paste this code on the current page in your browser console (and refresh afterwards)
var upvote_position = $('#answer-12878316').position();
$('body').mousemove(function (event) {
$(this).css({
position: 'relative',
left: (event.pageX - upvote_position.left - 22) + 'px',
top: (event.pageY - upvote_position.top - 35) + 'px'
});
});
So, I know this is an old topic, but I'll first say it isn't possible. The closest thing currently is locking the mouse to a single position, and tracking change in its x and y. This concept has been adopted by - it looks like - Chrome and Firefox. It's managed by what's called Mouse Lock, and hitting escape will break it. From my brief read-up, I think the idea is that it locks the mouse to one location, and reports motion events similar to click-and-drag events.
Here's the release documentation:FireFox: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_APIChrome: http://www.chromium.org/developers/design-documents/mouse-lock
And here's a pretty neat demonstration: http://media.tojicode.com/q3bsp/
You can't move a mouse but can lock it.
Note: that you must call requestPointerLock in click event.
Small Example:
var canvas = document.getElementById('mycanvas');
canvas.requestPointerLock = canvas.requestPointerLock || canvas.mozRequestPointerLock || canvas.webkitRequestPointerLock;
canvas.requestPointerLock();
Documentation and full code example:
https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
Interesting. This isn't directly possible for the reasons called out earlier (spam clicks and malware injection), but consider this hack, which creates an impression of the same:
Step 1: Hide the cursor
Let's say you've a div, you can use this css property to hide the real cursor:
.your_div {
cursor: none
}
Step 2: Introduce a pseudo cursor
Simply create an image, a cursor look-alike,and place it within your webpage, with position:absolute.
Step 3: Track actual mouse movement
This is easy. Check internet on how to get real mouse location (X & Y coordinates).
Step 4: Move the pseudo cursor
As the actual cursor move, move your pseudo cursor by same X & Y difference. Similarly, you can always generate a click event at any location on your webpage with javascript magic (just search the internet on how-to).
Now at this point, you can control the pesudo cursor the way you want, and your user will get the impression that the real cursor is moving.
Fair Warning: Do not do it. No one wants their cursor or computer controlled this way, unless if you've some specific use-case, or if you are determined to flee your users away.
You can't move the mouse pointer using javascript, and thus for obvious security reasons. The best way to achieve this effect would be to actually place the control under the mouse pointer.
Couldn't this simply be done by getting actual position of the mouse pointer then calculating and compensating sprite/scene mouse actions based off this compensation?
For instance you need the mouse pointer to be bottom center, but it sits top left; hide the cursor, use a shifted cursor image. Shift the cursor movement and map mouse input to match re-positioned cursor sprite (or 'control') clicks When/if bounds are hit, recalculate. If/when the cursor actually hits the point you want it to be, remove compensation.
Disclaimer, not a game developer.
There's quite a few questions about this where the solution provided is to just set the top left and top down values of the image to the position of the mouse/touch, however what I want to do is to have an actual dragging movement. Regardless as to where on the canvas I press, if I drag my finger to the right x pixels, I want the image to move to the right x pixels. Same goes with left, up, and down.
I'm at a complete loss as to where to even start with this. I will be handling mobile touch events, so I feel like using canvas.addEventListener('touchmove') would be the best option, but I'm not sure.
I already have the canvas repainting and everything handled, just really need help with the logic for dragging the image in real time, instead of just snapping it into position.
Get the point where the interaction starts (touchstart) and use it to calculate how much the finger moved on the screen (in the touchmove callback) and add it to the image position (also in touchmove).
PS: Also I recommend using something like PIXI JS for canvas/WebGL stuff ... unless you need a custom solution.
I am aware that in most browsers (newest generation), the mouse cursor gets hidden when you type in any key like 'A' or Space. This is to let the user see what he types in.
The cursor gets back visible as soon as you move the mouse for a pixel.
Now here comes the problem -- This happens everywhere in a browser, even when I've focused a non-input element like a div or the such. I do, however, not want the browser to hide my cursor after the user has pressed a key as I'm using keys as shortcuts.
So the question is -- is there any way or trick or anything to prevent this from happening and/or letting the cursor auto-appear again after key-up?
I've tried various "hacks" over the web like invisible divs etc. but everything without success.
EDIT: As questioned, I am experiencing this behavior on every Browser (Chrome latest, Firefox latest, Safari latest) on latest MAC-OS-X.
This is not browser behavior but operating system behavior, and specifically Mac behavior. The cursor will not only hide if you type in the browser, but in any application on your Mac.
This means that the browser has no knowledge or control over the cursor, because it's hidden from a higher level. You can change the cursor with CSS or JavaScript for example, but it still won't show until you move it. You can't actually move the cursor using JavaScript, but even if you could I still doubt it'd help because the operating system didn't receive a signal of the cursor moving.
Also refer to this question on apple.stackexchange.com:
How do I disable hiding of the mouse pointer while typing text?
I just thought of a possible solution to this, but it's going to be really hard to do this in a way that is not annoying the user:
Whenever the cursor moves, save it's position
When the document observes a keyup, show an image of a cursor at the exact coordinates of where the actual cursor was seen last (it's still there, but hidden)
When the actual cursor moves again, hide the image (actually, merge this function with 1.)
The problem here is going to be knowing what cursor image to show. You would first have to detect if the user is on a Mac (or another OS that hides the cursor), but also what cursor should be shown depending on what you're hovering. It means that for every element you're hovering you would also have to detect which cursor is being shown and show an image of the same cursor.
You can cover the basics/defaults by adding some css rules that cover hovering of links and inputs (pointer and text respectively), but what if the user uses custom cursors defined in his OS?
I haven't tried any code yet, this is just a concept that should work in theory so let me know if you need more help with it, but honestly I'd advise against trying to accomplish this. It's going to bring more trouble than it solves, imo.
-edit-
Here's a Proof of Concept: http://jsfiddle.net/4rKMx/2/
I am aware that in most browsers (newest generation), the mouse cursor gets hidden when you type in any key like 'A' or Space. This is to let the user see what he types in.
The cursor gets back visible as soon as you move the mouse for a pixel.
Now here comes the problem -- This happens everywhere in a browser, even when I've focused a non-input element like a div or the such. I do, however, not want the browser to hide my cursor after the user has pressed a key as I'm using keys as shortcuts.
So the question is -- is there any way or trick or anything to prevent this from happening and/or letting the cursor auto-appear again after key-up?
I've tried various "hacks" over the web like invisible divs etc. but everything without success.
EDIT: As questioned, I am experiencing this behavior on every Browser (Chrome latest, Firefox latest, Safari latest) on latest MAC-OS-X.
This is not browser behavior but operating system behavior, and specifically Mac behavior. The cursor will not only hide if you type in the browser, but in any application on your Mac.
This means that the browser has no knowledge or control over the cursor, because it's hidden from a higher level. You can change the cursor with CSS or JavaScript for example, but it still won't show until you move it. You can't actually move the cursor using JavaScript, but even if you could I still doubt it'd help because the operating system didn't receive a signal of the cursor moving.
Also refer to this question on apple.stackexchange.com:
How do I disable hiding of the mouse pointer while typing text?
I just thought of a possible solution to this, but it's going to be really hard to do this in a way that is not annoying the user:
Whenever the cursor moves, save it's position
When the document observes a keyup, show an image of a cursor at the exact coordinates of where the actual cursor was seen last (it's still there, but hidden)
When the actual cursor moves again, hide the image (actually, merge this function with 1.)
The problem here is going to be knowing what cursor image to show. You would first have to detect if the user is on a Mac (or another OS that hides the cursor), but also what cursor should be shown depending on what you're hovering. It means that for every element you're hovering you would also have to detect which cursor is being shown and show an image of the same cursor.
You can cover the basics/defaults by adding some css rules that cover hovering of links and inputs (pointer and text respectively), but what if the user uses custom cursors defined in his OS?
I haven't tried any code yet, this is just a concept that should work in theory so let me know if you need more help with it, but honestly I'd advise against trying to accomplish this. It's going to bring more trouble than it solves, imo.
-edit-
Here's a Proof of Concept: http://jsfiddle.net/4rKMx/2/
In XUL or JavaScript, is there a way to move the mouse cursor to specified position?
The only time that Gecko moves the mouse is on Windows for the snap-to-default-button effect. This is used by XUL dialogs and wizards. The backend code doesn't actually check that you're giving it a button; any XUL control works. The mouse is moved to the centre of the element, if that point is on-screen, and the window is active. Normally the code checks that the system cursor snapping is enabled, but there is a preference that overrides that.
No. you cannot move a mouse cursor using javascript.
But you can do this.
Hide the cursor. Load an image shaped like cursor. Animate the image.
You can use nsIDOMWindowUtils.sendNativeMouseEvent(x, y, 0, 0, null) to reposition the mouse cursor. Perhaps combined with window.screenX/Y to work out where you should move the cursor to, since sendNativeMouseEvent seems to treat the (x,y) as absolute screen coordinates.
I haven't tested this method very thoroughly, so there could be caveats. I can't think of any myself.
I know this is an old question, but I have not seen this solution suggested anywhere before, and it's not exactly obvious.
I've only tested with Firefox v48 on Windows 7. Here, sendNativeMouseEvent calls SetCursorPos to perform the actual repositioning.