Web dialog pass data from Ruby to webdialog

sachi · 18 Jun 2013, 05:59

Dear All,
I want to implement a webdialog in Sketchup to display data from a database.
This below link was very useful.
http://sketchupapi.blogspot.com/2008/02/sharing-data-between-sketchup-ruby-and .

What I want to do is as following.

1)From the Ruby program, the database will be accessed and necessary data will be retrieved.
2)Then this data passed to the webdialog and show to the user.

However in the above example, the webdialog contains a refresh button. users has to click that refresh button to view the data.

What i want to is display data directly without a refresh button.

Is there a way to pass string data from Ruby to HTML directly.

Do you have any suggestions and any of you have try working with webdialogs?
its bit difficult for me because i have to learn HTML and Javascript too.

thomthom · 18 Jun 2013, 10:02

To send from Ruby to JS: WebDialog.execute_script http://www.sketchup.com/intl/en/developer/docs/ourdoc/webdialog.php#execute_script

JS to Ruby: Use action callback ( http://www.sketchup.com/intl/en/developer/docs/ourdoc/webdialog.php#add_action_callback ) or #get_element_value ( http://www.sketchup.com/intl/en/developer/docs/ourdoc/webdialog.php#add_action_callback )

But beware that under OSX the JS to Ruby communication is asynchronous and you might lose some messages if you send them too fast.

I've been building a collection of data on the topic of WebDialogs: https://github.com/thomthom/sketchup-webdialogs-the-lost-manual/wiki

Worth to have a look there.

sachi · 18 Jun 2013, 17:34

Thank you very much. Thomthom
I'll go through it.

sachi · 19 Jun 2013, 04:10

Hi,

I have been working on those materials and I came to a solution. But still there's a problem.
This is details.rb file

` dialog = UI::WebDialog.new("Details", true, "", 410, 875, 1030, 0, true)
dialog.add_action_callback("pass_data"){|dialog,htmlpage|
java = "set_details(#{@name.inspect},#{@description.inspect})"
dialog.execute_script(java)
}

dialog.set_file 'C:\Program Files\Google\Google SketchUp 8\Plugins\set_id\details.html'
dialog.show()`

This is details.html file

<html>
<head>
<script>
function callRuby(htmlpage) {
query = 'skp:pass_data@' + htmlpage;
window.location.href = query;
document.write(query);}

    function set_details(a,b){
document.write(a);
document.write(b);}

 </script>

</head>

</html>

only "skp:pass_data@pull_selection_count" is the result on the webdialog box.
What i want is to display the values of the Ruby variables name and description.

Do you have any ideas for fixing this?
Thank you in advance.

thomthom · 19 Jun 2013, 07:52

I recommend using a framework like jQuery to make modifying the HTML DOM easier and smooth over most compatibility issues between browser engines.

Aerilius · 19 Jun 2013, 07:59

That is because you "kill" the document when you do document.write(query). Look at the documentation of document.write .

This works:


@name = "the name"
@description = "the description"

dialog = UI;;WebDialog.new("Details", true, "sachi_pluginname_dialogname", 410, 875, 1030, 0, true)

dialog.add_action_callback("pass_data") { |dialog, htmlpage|
  js = "set_details(#{@name.inspect}, #{@description.inspect})" # It's not java.
  dialog.execute_script(js)
}

dialog.set_file 'C;\Program Files\Google\Google SketchUp 8\Plugins\set_id\details.html'
dialog.show()


<html>
<head>
<script>
function callRuby(htmlpage) {
  // Declare the variable with "var" so that it is not global.
  var query = 'skp;pass_data@' + htmlpage;
  window.location.href = query;
}

function set_details(a, b){alert(a);
  // Example 1
  var text = document.createTextNode(a);
  document.getElementById("detail1").appendChild(text);
  // Alternative
  // document.getElementById("detail1").innerHTML = a;
  // Example 2
  document.getElementById("detail2").value = b;
}
</script>
</head>

<body>
  <div id="detail1"></div>
  <input id="detail2" />
</body>

<script>
// If you will access element in the page, you need to do this after the page (body) has loaded.
callRuby("pull_selection_count");
</script>
</html>