Javascript variables...back into R

[Ryan Mears]

Hello,

I am having trouble moving data from a javascript variable back to R after user interaction (i.e.,to obtain pixel coordinates from html canvas).

I've worked through the input tutorial on custom input bindings and made variations on the increment button script.

 

I'm certain that my inability to get data from a javascript variable is because I don't adequately understand the concept of javascript closures. 

Could someone please help? I'd like to know how to move data (string or some number format) from a javascript variable to a variable in R.

Much thanks in advance.

-Ryan

[Joe Cheng]

Ryan, if you can share the code you have so far it would make it a lot easier to help--is that a possibility?

-Ryan

--
You received this message because you are subscribed to the Google Groups "Shiny - Web Framework for R" group.
To unsubscribe from this group and stop receiving emails from it, send an email to shiny-discus...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Ryan Mears]

Joe,

Here is the javascript file

https://gist.github.com/anonymous/3bd325499ea76c28844b

and ui and server R.

https://gist.github.com/doesmindmatter/4946165

https://gist.github.com/doesmindmatter/4946176

The working example is on glimmer:

http://glimmer.rstudio.com/mindmatter/icselect/

I have two questions now.

1) If you click on the canvas in the "Select" tab the centered-coordinates for each "component" are displayed at the top of the canvas, how can I get clicked coordinates into R so that I can add the coordinate to the data.frame listed under the "Table" tab.

2) Is there a way to send the mousedown canvas coordinates directly to R? (This isn't important for this project.) For future projects I'd like to send a javascript variable or array directly to R without the html intermediary. 

Many, many thanks!

-Ryan

[Ramnath Vaidyanathan]

Here is an ugly hack to achieve it.

http://glimmer.rstudio.com/ramnathv/app7/

I am attaching my code along with this. I will update this thread with a short explanation later tonight, but the code is pretty self explanatory.

[Ryan Mears]

Ramnath,

That is so clever to use the existing input binding. It is a hack, but it's more brilliantly simple, than ugly. 

I'd still like to hear more explanation/examples from Joe Cheng (or a RStudio maintainer) of how to formally manage input/output bindings (i.e., for javascript beginners like myself).

-Ryan

[Joe Cheng]

That's very clever, Ramnath.

I think we should add an <input type="hidden"> binding to Shiny. So you could just set the hidden value, rather than a visible field and then hiding it.

I hesitate to share this with you, but there is another way, that is not documented and may not be supported in the future as it breaks some collaboration features we were hoping to get to one day. You can call Shiny.onInputChange(name, value) and that will act as if that control exists and was changed. However it can't be used while the page is loading; the Shiny client code must have fully initialized first.

On Wed, Feb 13, 2013 at 6:43 PM, Ramnath Vaidyanathan <ramnath...@gmail.com> wrote:

Here is a cleaner solution. I have basically replaced your maptitle element with a hidden textInput with the same id. This way we can directly let javascript manipulate the text input for which Shiny already has a binding defined. Note that you need to unbind all before letting javascript update a Shiny input variable and then bind them back again. This is required for reactivity to work. Here is a gist with ui.R, server.R and mycanvas_ic.js.

https://gist.github.com/ramnathv/2a86d5fb67a14641128a

Cheers

[Alex Brown]

I have a GIST that gives javascript an INPUT that can be read from R.

https://gist.github.com/alexbbrown/4362368

Also includes an output.

-Alex

[Laszlo Szakacs]

+1 for "hidden" binding

[Ryan Mears]

Alex,

Once I understand how this i/o binding works I'll send an update.

The direct javascript input is most appealing with the shortest possible lag without hanging up the UI (especially for locations with server-client communication lags).

The potential to interface to d3.js is very cool.

Thanks!

-Ryan

[Ryan Mears]

Javascript scoping is not at all intuitive to me, and the event loop in the gist (see below, canvasImg.js) is difficult to combine with other javascript event listener loops that I'm trying to implement.

Currently, I'm attempting to create a custom input binding for shiny that produces the same behavior as the following javascript behavior:

http://glimmer.rstudio.com/mindmatter/canvasImg/

https://gist.github.com/doesmindmatter/5006486

I'd like to extend selectInputBinding from shiny.js to produce a new image reference and to redraw canvas whenever a new selection from the drop down menu occurs.

The problem with canvasImg.js is that the event loop is continuous, not conditional like the reactive functions in shiny.

It might be possible to use an approach similar to the extension of textInputBinding in shiny.js:

var textareaInputBinding = {};
  $.extend(textareaInputBinding, textInputBinding, {
    find: function(scope) {
      return $(scope).find('textarea');
    }
  });

  inputBindings.register(textareaInputBinding, 'shiny.textareaInput');

I think that I need to understand the following terms/concepts so that I can create a custom shiny input:

1) scope (The dropdown selector, canvas, & new image need to be included for the namespace/closure.)

2) return (I anticipate that return would be the mechanism to instruct canvas to draw the new image node)

3) callback (I think a callback is needed to update multiple canvases with multiple different images from a single dropdown selection. From what I understand, callbacks are heart of communication between multiple javascript processes.)

Thanks in advance!

[Joe Cheng]

I don't understand this sentence, can you elaborate?

> The problem with canvasImg.js is that the event loop is continuous, not conditional like the reactive functions in shiny.

[Ryan Mears]

I probably shouldn't have included that. This was my guess why I was unable to combine two different event loops. 

The other event loop pertains to mouse move and mouse click locations on canvas. For example move the mouse over canvas and click with the following:

 http://glimmer.rstudio.com/mindmatter/icselect/

You received this message because you are subscribed to a topic in the Google Groups "Shiny - Web Framework for R" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/shiny-discuss/ITFUwvYE-f8/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to shiny-discus...@googlegroups.com.

[Ryan Mears]

Here is the code for the canvas behavior:

https://gist.github.com/doesmindmatter/5043908

 http://glimmer.rstudio.com/mindmatter/icselect/

The mouse click behavior on canvas should ultimately make a data frame addition (another version of this routine in R will append to icsheet.csv). 

[Ryan Mears]

Update: It appears that the closure of canvasing.js https://gist.github.com/doesmindmatter/5006486 is preventing the canvas context from being updated by other event listeners that are outside the closure https://gist.github.com/doesmindmatter/5043908. 

[Ryan Mears]

How can a string variable be made visible to scopes outside a javascript closure? 

Thanks in advance for any insight!!

 var str="b1-140";  

  var imgstr="";

$("select").change(function () {

  $("select option:selected").each(function () {

     var str = $(this).text();

      return str;   

  });

   var imgstr=str;

return imgstr;

}).change();

[Joe Cheng]

Declare "var str;" up by 'var imgstr=""'. Or better yet, simply change "var str = $(this).text();" to "imgstr = $(this).text();" and get rid of str altogether.

[Ryan Mears]

Great! 

Thank you, Joe!

--
You received this message because you are subscribed to a topic in the Google Groups "Shiny - Web Framework for R" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/shiny-discuss/ITFUwvYE-f8/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to shiny-discus...@googlegroups.com.

[Blake Arensdorf]

Can someone give me a brief summary of how to do this? I'm currently in the process of moving the functionality backgrid.js over to Shiny. I pass in the data by converting to JSON and then displaying it, but since the user can make changes to the table, I need to figure out how to get the table back into R and do something with it and I can't figure it out.

I think this thread might have a solution but I'm not following these comments and with things being deleted, can someone provide a short explanation / snippet of how I'd go about doing this?

Thanks.

[ZJ]

You need to know how to build input/outputs

http://rstudio.github.io/shiny/tutorial/#building-inputs

Not sure if my prezi will help

http://prezi.com/ja3mrgmq5cuw/?utm_campaign=share&utm_medium=copy

[Blake Arensdorf]

I figured this would be better in a Gist.

Thanks, ZJ. I've actually been following those tutorials but can't seem to get the data back into R correctly. Hopefully you guys can take a look at this function and see where I'm going wrong, but I've basically tried to start by building it as simple as possible and then once I get it working I'll spend time wrapping it up and making it usable by others and understandable from a code perspective. 

So far I've gotten the backgrid table to display in my app by using this "GetBackgrid" function and putting it in 'global.r'. When I want to render the table, I simply call this function from server.R. However, when I reference the 'input$campaignGrid' which is the id I've given the object in the HTML, it returns null though the table is still populated. Here is what I've done (again this renders and looks perfect but doesn't return the value I want):

https://gist.github.com/blake-arensdorf/562b3edb89a2702589f3