Using Web Dialogs in Sketchup round two

Last post we were talking about how we can communicate between Sketchup and Web Dialogs in Sketchup. In this short tutorial we will explore how we can for example make a call from Web Dialog and open Input Box in Sketchup, where we will input our first and last name, then we will accept these values from Skatchup and display them in Web Dialog.

So let’s go to work. Open up your text editor and create a new Ruby file. Let’s create a function sendDataToJs and open up a Web Dialog:

def sendDataToJs
dialog = UI::WebDialog.new("Write your first and last name", true, "", 410, 875, 1030, 0, true)
dialog.set_url 'http://www.tdteam.com/work/engineeringtheworld/name.html'
dialog.show
end

Since we will be using inputbox in Sketchup, we have to specify what these inputboxes will show. so we create a new array called prompts = [“Type your first name”, “Type your last name”].

Now we will add action callback, where we will first show inputbox in Sketchup, then we will check if first and last names were inputed, if not we will show error msg box, else we will show inputted name in web dialog.

dialog.add_action_callback("typeName") {|dialog, action|
    input = UI.inputbox prompts, [], [], "Tell me your first and last name."
    input[0] = input[0].to_s.chomp #this holds inputted first name
    input[1] = input[1].to_s.chomp #this holds inputted last name
    if input[0] == '' || input[1] == ''
      UI.messagebox 'You have to input first and last name'
    else
      name = input[0] + ' ' + input[1]
      dialog.execute_script("dataFromSketchup('#{name}')")
    end
  }

As you can see above we have removed all whitespaces from input values, we did this with input[0] = input[0].to_s.chomp and input[1] = input[1].to_s.chomp. If first and last name were inputted (and do not consist only of whitespaces) we assign first and last name to variable name, and call function dataFromSketchup(name) in our Web Dialog.

I also added a action call back to show dialog when we click a link show Console in Web Dialog.

The complete script is:

def sendDataToJs
dialog = UI::WebDialog.new("Write your first and last name", true, "", 410, 875, 1030, 0, true)
dialog.set_url 'http://www.tdteam.com/work/engineeringtheworld/name.html'
dialog.show

  prompts = ["Type your first name", "Type your last name"]
  
  dialog.add_action_callback("typeName") {|dialog, action|
    input = UI.inputbox prompts, [], [], "Tell me your first and last name."
    input[0] = input[0].to_s.chomp
    input[1] = input[1].to_s.chomp
    if input[0] == '' || input[1] == ''
      UI.messagebox 'You have to input first and last name'
    else
      name = input[0] + ' ' + input[1]
      dialog.execute_script("dataFromSketchup('#{name}')")
    end
  }
  #show console call up
  dialog.add_action_callback("showConsole") {|dialog, action| Sketchup.send_action("showRubyPanel:")}
end

Now let’s take a look at our HTML file name.html

<!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>Get your name from Sketchup</title>
<script language="javascript" src="js/prototype.js"></script>
<script language="javascript">
function dataFromSketchup(name){
   $('nameId').update('Your name is <strong>' + name + '<strong>');
}
</script>
</head>
<body>
<div id="nameId">

</div>
<a href="skp:typeName@true">Type in your name in Sketchup</a><br />
<a href="skp:showConsole@true">Show Console</a>
</body>
</html>

I have used javascript framework Prototype in this example, because I do not want to think about browser compatibility when doing JavaScript, that is why I suggest you to use a JavaScript framework like: Prototype or jQuery.

Code here in name.html is pretty straightforward so there is not much to talk about. As you can see we have to links, one is calling typeName and other one showConsole from our Ruby code. We also added a function dataFromSketchup that accepts one argument (which is the name inputted).
Then we just use $ selector to find tag with nameId id and use update Prototype method to show inputted name inside div tag with id=nameId. Name will be show as bold text.

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: