Variable REPORTER Coordinates

Is it possible to manipulate the x & y coordinates of the variable reporter blocks, when they are selected in the Variables display area and subsequently displayed on the screen ?

Given the various nice display formats, I'd like to use them as value labels for some sprite properties. As such,it would be helpful to programatically position them on the screen.


No, sorry, if you drag them by hand they'll stay put, but watchers aren't first class so you can't send them messages programmatically.


Oh, sure, if you want to write JS code you can do anything! I interpreted the question as whether it could be done in Snap!.

I am not much of a JS'er, but tried this and could not make it work.

Actually, I do not understand what the JS function is supposed to return;
a Var reference of sorts to be able to plug into the properties reporter ?

Maybe a tweak willl help:

I repeat, watchers are not first class in Snap!. You can find one in Javascript, but only for use in Javascript. So, here's what you do:

  1. Make a variable with a visible watcher.
  2. Shift-click the Snap! logo and enter dev mode.
  3. Right-click on the watcher, and find the thing in the menu that looks like the right thing, in this case a WatcherMorph. (There's more than one thing because when you clicked on the watcher you were also clicking on the stage, which is part of the entire Snap! window.) Then, in submenu, choose "Inspect."
  4. Then go rooting around in the inspector until you find what you're looking for. In this case it's "bounds."
    The notation x@y isn't obvious, but it's how a point is represented in an inspector.
  5. You can find out more by clicking the "inspect" button at the bottom, then choose whether to start a new inspector or recycle the existing one.
    "Origin" is the bottom left corner and "corner" is the top right corner. Or maybe it's top left and bottom right; I have no idea whether Y grows upward, as in math, or downward, as in (most) programming languages.
  6. Now you can play with it in your JS block:
this.findVariableWatcher("foo").bounds.origin = new Point(0,0);

I haven't actually tried that -- I'm just guessing. But, guessing is fine. Experiment.

Thanks @bh, Guidance was excellent and I was able to create a custom block that will move my Var Watchers anywhere I want.

try return this.findVariableWatcher(varName)
What you had previously was a string, so it only looked for a watcher called varName
Using the varName parameter will look for whatever name you give to it

Hi @tguneysu,

Using JS (I've moved this topic to Advance Topics category), you can do:

and then, x and y are stage related coords.


To drag and drop...

function (varName, x, y)

var watcher = this.findVariableWatcher(varName),
    stage = this.parentThatIsA(StageMorph),
    newX = +x,
    newY = +y;
watcher.bounds.origin = new Point( + newX * stage.scale, + newY * stage.scale);


Hello Everyone that Helped me,

Thanks a lot for the tutorial and samples. Even though I am not much of a JS person, I was able to follow and use the examples. And in the meantime, I have learned a lot about the hidden world behind the blocks. I am excited that I can manipulate things on the screen beyond what SNAP offers.

I am disappointed... :upside_down_face:

Maybe someday. Scripts are higher up on the list of things to make first class, though.

I used your method and tried out the method I already had hand found that my method actually works better. here it is (I didn't do it because I don't know anything about JS)

and here's the xml

<blocks app="Snap! 5.4," version="1"><block-definition s="does variable %&apos;var&apos; exist?" type="predicate" category="variables"><header></header><code></code><translations>pt:a variável _ existe&#xD;</translations><inputs><input type="%s"></input></inputs><script><block s="doReport"><block s="evaluate"><block s="reportJSFunction"><list><l>varname</l></list><l>if ((typeof varname) != "string") {&#xD;    throw new Error("name isn&apos;t a string: " + varname);&#xD;}&#xD;return this.isVariableIsVisible(varname, true);</l></block><list><block var="var"/></list></block></block></script></block-definition><block-definition s="move variable %&apos;var&apos; watcher to x: %&apos;x&apos; y: %&apos;y&apos;" type="command" category="variables"><header></header><code></code><translations></translations><inputs><input type="%s"><options>§_getVarNamesDict</options></input><input type="%n">0</input><input type="%n">0</input></inputs><script><block s="doIf"><custom-block s="does variable %s exist?"><block var="var"/></custom-block><script><block s="doRun"><block s="reportJSFunction"><list><l>v,x,y</l></list><l>var watcher = this.findVariableWatcher(v)&#xD;&#xD;//Copied from SpriteMorph&apos;s gotoXY method&#xD;&#xD;var stage = this.parentThatIsA(StageMorph),&#xD;  newX,&#xD;  newY,&#xD;  dest;&#xD;&#xD;if(!stage) {return;}&#xD;x = !isFinite(+x) ? 0 : +x;&#xD;y = !isFinite(+y) ? 0 : +y;&#xD;newX = + x * stage.scale;&#xD;newY = - y * stage.scale;&#xD;dest = new Point(newX, newY).subtract(watcher.extent().divideBy(2));&#xD;watcher.setPosition(dest)</l></block><list><block var="var"/><block var="x"/><block var="y"/></list></block></script></block></script></block-definition><block-definition s="change variable %&apos;var&apos; watcher y by %&apos;delta&apos;" type="command" category="variables"><header></header><code></code><translations></translations><inputs><input type="%s"><options>§_getVarNamesDict</options></input><input type="%n">10</input></inputs><script><block s="doIf"><custom-block s="does variable %s exist?"><block var="var"/></custom-block><script><block s="doRun"><block s="reportJSFunction"><list></list><l>alert("Work in Progress")</l></block><list></list></block></script></block></script><scripts><script x="10" y="136"><custom-block s="move variable %s watcher to x: %n y: %n"><block var="var"/><custom-block s="variable %s watcher x"><block var="var"/></custom-block><block s="reportSum"><custom-block s="variable %s watcher y"><block var="var"/></custom-block><block var="delta"/></block></custom-block></script></scripts></block-definition></blocks>

oh and the <does variable [] exist?> block is in the "create variables in program library.

Actually,screens arent first class too.

But if you do everything first class,it will become a language like html.


Scripts are already first class.

If you want first class(fake)watchers,try this.<blocks app="Snap! 5.4," version="1"><block-definition s="display var watcher (only text) named %&apos;t&apos; %&apos;x&apos; %&apos;y&apos; %&apos;imp&apos;" type="command" category="pen"><header></header><code></code><translations></translations><inputs><input type="%txt"></input><input type="%n"></input><input type="%n"></input><input type="%s"></input></inputs><script><block s="gotoXY"><block var="x"/><block var="y"/></block><block s="write"><block s="reportJoinWords"><list><block var="t"/><l>:</l><block var="imp"/></list></block><l>12</l></block></script></block-definition></blocks>

Umm, yes, sorry. What I meant to say is that scripts can't be program-generated, examined, or modified. All you can do with a script is run it.

Use JavaScirpt to copy Snap in a new window and make somthing like that: new ScirptsMorph().display();