Message Boards Message Boards

3
|
8547 Views
|
4 Replies
|
9 Total Likes
View groups...
Share
Share this post:

How to get MousePosition[] in the cloud? By JavaScriptExecute ?

Posted 10 years ago

Since MousePosition[] returns $Failed in WolframCloud I was wondering if I could use CloudSystem`JavaScriptExecute to emulate MousePosition[].

But how does JavaScriptExecute actually work?

Suppose I want to first add a javascript function, like

function mouse_position()
{
    var e = window.event;

    var posX = e.clientX;
    var posY = e.clientY;

    document.Form1.posx.value = posX;
    document.Form1.posy.value = posY;

    var t = setTimeout("mouse_position()",100);

}

and then execute it. How to do it? Or did I overlook any documentation of JavaScriptExecute?

POSTED BY: Rolf Mertig
4 Replies

Rolf, our teams are considering this and related features for the future. Thanks for letting us know this is something of interest.

POSTED BY: Vitaliy Kaurov

But how do I interact with Mathematica? I.e., how do I get the same information into the Kernel like MousePosition[] ?

POSTED BY: Rolf Mertig

It is a good idea to import HTML from a file, but this also would work as a string:

HTMLcode = "
  <!DOCTYPE html>
  <html>
  <body>

  <h2 onclick=\"showCoords(event)\">Click this heading to get the x \
(horizontal) and y (vertical) 

  coordinates of the mouse pointer when it was clicked.</h2>

  <p><strong>Tip:</strong> Try to click different places in the \
heading.</p>

  <p id=\"demo\"></p>

  <script>
  function showCoords(event) {
      var x = event.clientX;
      var y = event.clientY;
      var coords = \"X coords: \" + x + \", Y coords: \" + y;
      document.getElementById(\"demo\").innerHTML = coords;
  }
  </script>

  </body>
  </html>
  ";

and then:

CloudDeploy[HTMLcode, "page4.html", "Permissions" -> "Public"]
POSTED BY: Sam Carrettie

Hi Rolf,

Lets give this a try. Here is some javascript code in a html page. It picks up the mouse position when the header is clicked.

<!DOCTYPE html>
<html>
<body>

<h2 onclick="showCoords(event)">Click this heading to get the x (horizontal) and y (vertical) 

coordinates of the mouse pointer when it was clicked.</h2>

<p><strong>Tip:</strong> Try to click different places in the heading.</p>

<p id="demo"></p>

<script>
function showCoords(event) {
    var x = event.clientX;
    var y = event.clientY;
    var coords = "X coords: " + x + ", Y coords: " + y;
    document.getElementById("demo").innerHTML = coords;
}
</script>

</body>
</html>

save this code in a text file: I named it page4.html now deploy it:

CloudDeploy[
 Import["E:\\page4.html",   "Source"], "page4.html", "Permissions" -> "Public"]

looks something like this:

enter image description here

note: I save the html/javascript code to a file and then use Import with "Source". The quotes in the html are then auto escaped. If i do this manually I always make one or more mistakes (with the /")

Reply to this discussion
Community posts can be styled and formatted using the Markdown syntax.
Reply Preview
Attachments
Remove
or Discard

Group Abstract Group Abstract