Artificial mouse events with Javascript and Arduino?

Question

I'm working on a hardware project involving a large touch panel, which I'd like to use to control mouse events in a JS app. Currently I have the panel connected to an Arduino Micro, which appears as a USB HID device, so I can treat it as a mouse, but that's actually not an ideal solution for this project. My goal, without regard for whether it's actually possible, is for the panel to behave like a graphics tablet, so I can map my serial data to absolute coordinates on my display, and then fire mouse events at those locations. I'd also like to restrict that functionality to within the browser, rather than let it behave like a mouse across my entire system, although that's probably a secondary concern.

As far as I can tell, actually moving the cursor with JS won't be possible (for largely obviously security reasons). The best I've found is initmouseevent() which unfortunately seems like it's been depreciated within the last couple of years. The reality is that I don't need to actually move the mouse though; I want to trigger various behaviors at specific positions within the canvas, but that's only because this app currently looks for mouse events, and there's no particular reason why it couldn't run with different events, so long as they provide the appropriate data.

I'm including some code, but my question isn't really code specific. If you have any general suggestions, I'd really appreciate them!

Thanks!!

As the app is currently written, it listens for mouse events:

canvas.addEventListener('mousedown', this.onMouseDown.bind(this), false);

Then passes the events through a series of functions:

 onMouseDown: function (event) {
      event.stopPropagation();
      event.preventDefault();

      this._gui.callFunc('onMouseDown', event);
      this.onDeviceDown(event);
      //console.log(event);
    },

onDeviceDown: function (event) {
  console.log("onDeviceDown " + JSON.stringify(event));
  if (this._focusGui)
    return;

  this.setMousePosition(event);
  //console.log("setMousePosition " + event);

  var mouseX = this._mouseX;
  var mouseY = this._mouseY;
  var button = event.which;

  var canEdit = false;
  if (button === MOUSE_LEFT)
    canEdit = this._sculpt.start(event.shiftKey);

  if (button === MOUSE_LEFT && canEdit)
    this.setCanvasCursor('none');

  if (button === MOUSE_RIGHT && event.ctrlKey)
    this._action = 'CAMERA_ZOOM';
  else if (button === MOUSE_MIDDLE)
    this._action = 'CAMERA_PAN';
  else if (!canEdit && event.ctrlKey) {
    this._maskX = mouseX;
    this._maskY = mouseY;
    this._action = 'MASK_EDIT';
  } else if ((!canEdit || button === MOUSE_RIGHT) && event.altKey)
    this._action = 'CAMERA_PAN_ZOOM_ALT';
  else if (button === MOUSE_RIGHT || (button === MOUSE_LEFT && !canEdit))
    this._action = 'CAMERA_ROTATE';
  else
    this._action = 'SCULPT_EDIT';

  if (this._action === 'CAMERA_ROTATE' || this._action === 'CAMERA_ZOOM')
    this._camera.start(mouseX, mouseY);

  this._lastMouseX = mouseX;
  this._lastMouseY = mouseY;
},

And so on.

sbonkosky · Accepted Answer · 2016-05-02 16:58:51Z

1

You could use jQuery and trigger the mousedown event with a manually built event object, setting the pageX, pageY, and which properties yourself.

https://api.jquery.com/category/events/event-object/

var e = new jQuery.Event("mousedown");
e.pageX = 10;
e.pageY = 10;
e.which = 3; // 1 for left button, 2 for middle, and 3 for right
$("#elem").trigger(e);

$("#elem") would be the page element you want to trigger the event on so you would you something like $(canvas) in your code.

answered May 2, 2016 at 16:58

sbonkosky

2,5571 gold badge22 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Artificial mouse events with Javascript and Arduino?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related