Creating Web Dialogs in Sketchup and making calls from and to Sketchup

Ok, in last three little tutorials I showed some of the things you can do with just a little Ruby code in Sketchup with it’s Ruby API.

Now it is time to move to as far as I am concerned the most interesting part of doing Sketchup development and that is using Web Dialogs. Since I have been doing web related projects for years now I feel right at home using web pages as means to do something. Sketchup let’s us open Web Dialog, which is nothing more than a normal browser window that is opened within Sketchup, where you can make calls from Sketchup to web page on other side and vice versa (via JavaScript).

One thing to note is that webpage is opened in a default browser in a given operating system, that being Internet Explorer on Windows and Safari on a Mac.

Let’s first take a look at how we can open a Web Dialog within Sketchup using Ruby call:

dialog = UI::WebDialog.new("Title of Web Dialog", true, "", 410, 875, 1030, 0, true)

As you can see there are 8 arguments that Web Dialog accepts when it is being created.

  1. title – Web Dialog title
  2. scrolable – true if you want page to be scrollable and false if you don’t
  3. pref key – The registry entry where the location and size of the dialog will be saved
  4. width – width of Web Dialog
  5. height – height of Web Dialog
  6. left – position from the left of the screen in pixels
  7. top – postion from the top of the screen in pixles
  8. resizable – true if you want the webdialog to be resizable, false if you do not want the webdialog to be resizable

Next thing we want to do is show assign which web page to open as our Web Dialog, we do this by: dialog.set_url filepath, where filepath is the path to the html document we want to open. The last thing to do is to show our Web Dialog, which we do by: dialog.show.

Second part of what I wanted to talk in this post is how can we communicate between our Web Dialog and Sketchup.

First let’s see how we can use Ruby to execute any JavaScript code in Web Dialog. If we stored our Web Dialog in a variable called dialog, we can do the following:

dialog.execute_script("any JavaScript here will be executed in Web Dialog");
//we could show JavaScript alert with
dialog.execute_script("alert('Hello from Web Dialog')");

The second line of code will produce a alert window from Web Dialog with text Hello from Web Dialog.

If we wanted to call let’s say a function called test_function, we would just say dialog.execute_script(“test_function()”);, and test_function in Web Dialog will be executed.

One thing to note to all Mac users is that you have to upgrade Sketchup to 6.0 in order for execute_script to work, there was a bug that prevented scripts to be called from Ruby in Web Dialog and that has been fixed in Sketchup 7.

Ok, now to the other side, how to execute code in Ruby (Sketchup) from Web Dialog. This has to be done both on Ruby side and Web Dialog side. Let’s suppose we have a function defined in Ruby called show_hello_world defined like:

def show_hello_world
  UI.messagebox('Hello world');
end

Now we have to tell Ruby to be expecting a call from JavaScript, we can do this by calling add_action_callback method on Web Dialog. Let’s see an example:

dialog.add_action_callback("execRubyFunction") {|dialog, action| show_hello_world}

All there is left to do is to add a link to Web Dialog that will execute show_hello_world function:

<a href="skp:execRubyFunction@true">Execute show_hello_world </a>

As you look at the code above, you can see that we have to add name to add_action_callback within brackets, in our case we wrote execRubyFunction, this is the name we have to repeat in a link, so we do skp:execRubyFunction for our link (plus we add @true).

So if we wrote dialog.add_action_callback(“someOtherNameHere”)… we would have to do the same in html tag skp:someOtherNameHere@true for this to work.

One thing to note also is that after we call dialog.add_action_callback(“nameFunction”){|dialog, action|, everything after this and befor closing } is the code that will be executed when this code is executed from Web Dialog.

dialog.add_action_callback("nameFunction"){|dialog, action|
puts 'this will be written to console'
puts 'this too'
puts 'and this too'
}

Ok, at the end let’s to one quick example, we will use our knowledge of Web Dialogs and action_callback’s to show console of Sketchup when clicking on a link in Web Dialog.

Here is the code for showConsole.rb:

require 'sketchup.rb'
dialog = UI::WebDialog.new("Sending data to JavaScript", true, "", 410, 875, 1030, 0, true)
dialog.set_url 'http://www.tdteam.com/work/engineeringtheworld/showConsole.html'
dialog.show
dialog.add_action_callback("showConsole"){|dialog, action|
  Sketchup.send_action("showRubyPanel:")
}

And sourcecode for showConsole.html (you can use the same address as the one above and you will get this HTML file – also make sure to set width, height, top and left settings when executing WebDialog.new to values of your liking)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Show console</title>
</head>

<body>
<a href="skp:showConsole@true">Show console</a>
</body>
</html>

When you try out this code in Sketchup using Web Console you show see that console will be shown, when you click on a link in Web Dialog. This is because we execute Sketchup.send_action(“showRubyPanel:”) when link is called. You can see what else you can call by using Sketchup.send_action on this link: http://code.google.com/apis/sketchup/docs/ourdoc/sketchup.html#send_action)

Advertisements

, , , , ,

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: