Web Dialog - how to

todd burch · 26 Dec 2007, 22:04

I've just started to learn how to make a web dialog and have some questions.
More will probably follow...

I want to show a default value in the webdialog that the ruby script gets from SketchUp. Something like a points x, y and z coordinates. Is it possible and how do i do it?

Depends. Are you building the HTML in the ruby script, or using a canned separate file for the HTML? (It's not so much "it depends", as it is what approach you take depends on how easy any given solution is.)

@unknownuser said:

Can you dim/deactivate/hide certain elements in a web dialog and activate them based on a checkbox state?

Yes. Standard HMTL applies. (or DHTML, or XHTML, whatever you are using). Look at DOM EVENT programming and javascript.

@unknownuser said:

Is it possible to change some text (The description of a parameter) in a webdialog based on a checkbox state?

Yes. See 3.

@unknownuser said:

How does "ValueChanged" work? Can I have it "executing" the script if I change a numeric value and press enter? (I don't want a OK button.)

Call me lazy to not look it up, but what is "ValueChanged"? Actually, with EVENT programming, you don't even need to press ENTER. (And, there may be a bug with pressing ENTER on either IE or Safari - and the WebDialog box will go away). You can use any event to validate, or callback to sketchup. For instance, the DOM EVENT onblur() could be used to do a callback to SketchUp when someone TABS out of an inputbox. Lots of possibilities here.

Todd

Pixero · 26 Dec 2007, 22:04

@unknownuser said:

Depends. Are you building the HTML in the ruby script, or using a canned separate file for the HTML? (It's not so much "it depends", as it is what approach you take depends on how easy any given solution is.)

I didnt even know you could write the html inside the ruby script.
The only example I've seen used a separate html file.
I'm open for suggestions how to get this working the easiest way. I really need to get default values from SketchUp into the Web dialog for a script I'm working on so please help.

@unknownuser said:

Call me lazy to not look it up, but what is "ValueChanged"? Actually, with EVENT programming, you don't even need to press ENTER. (And, there may be a bug with pressing ENTER on either IE or Safari - and the WebDialog box will go away). You can use any event to validate, or callback to sketchup. For instance, the DOM EVENT onblur() could be used to do a callback to SketchUp when someone TABS out of an inputbox. Lots of possibilities here.
Todd

When you say "you dont even need to press enter" what do you mean?
Would the script start to execute as soon as I start typing in a value?
I dont think I would want that for this script.
Lets say I have a: x, y and z value but I dont want to "run" the script before I've finished typing in my values. How would I do that if press ENTER is buggy?

Thanks!

Jim · 26 Dec 2007, 22:05

You need to think in terms of Events. Dialog elements have events. onMouseOver, onMouseOut, onClick, onBlur, etc.

You can capture these events on most elements - one way follows:


<input type=text onClick="someJavascriptFunction()" value="10">

Even divs and spans have events: (tested in Firefox)


<html>
   <head>
      <script>
	 // javascript function
	 function translate(element) {
	    element.innerHTML = "Hello!";
	 }
      </script>
   </head>
   <body>
      <span onClick="translate(this)">Hola!</span>
   </body>
</html>

@pixero said:

When you say "you dont even need to press enter" what do you mean?
Would the script start to execute as soon as I start typing in a value?
I dont think I would want that for this script.
Lets say I have a: x, y and z value but I dont want to "run" the script before I've finished typing in my values. How would I do that if press ENTER is buggy?

Thanks!

Jim · 26 Dec 2007, 22:05

Pixero,

To set a value from a ruby script...

The webdialog. Let's say you have a text input field...


<html>
<head></head>
<body>
<input type=text id="name" value="Jim">
</body></html>

And the Ruby...


name = "Pixero"
# Miraculously, a dialog has been created.
dialog.execute_script("document.getElementById('name').value='#{name}'")

Pixero · 26 Dec 2007, 22:06

Thanks for your answers but I still can't get it to work.

I've tried with:


def activate
	dialog = UI;;WebDialog.new("jsTest", true,"JS Test", 320, 160, 600, 60, true)
	fn= File.dirname(__FILE__)+'/test.html'
	dialog.set_file fn
	dialog.show {}  	

	name = "Pixero"
	dialog.execute_script("document.getElementById('name').value='#{name}'")

end # activate

todd burch · 26 Dec 2007, 22:06

Are you sure you are building the filename properly?

"What" does not work?

todd burch · 26 Dec 2007, 22:06

Nevermind. Put the dialog.execute_script in a callback.

Pixero · 26 Dec 2007, 22:07

This is what I've tried with this time. Still not working though...
In ruby script:

def activate
	dialog = UI;;WebDialog.new("jsTest", true,"JS Test", 320, 160, 600, 60, true)
    	fn= File.dirname(__FILE__)+'/jsTest.html'
    	dialog.set_file fn
	dialog.show {} 	

	posX = "1"
	dialog.add_action_callback("setup") {|d,p|
		dialog.execute_script("document.getElementById('posX').value='#{posX}'")
	}
    end # activate

In html file:

	<script type="text/javascript">
           function setup(id,value)
           {
              window.location = 'skp;setup@'+document.getElementById('posX').value; 
           }
       </script>

Pixero · 26 Dec 2007, 22:07

Bump.
Can you see whats wrong with my code?

todd burch · 26 Dec 2007, 22:07

Holy Cow!! What's wrong???? I don't think you've ever told us anything more than "it does not work".

We can't keep (well, I'm not going to keep) guessing at what you might have and might not have that you are not showing us or telling us!

There is HTML, javascript and ruby code that you are holding very close to yourself. Any of it might not be coded right.

Todd

Pixero · 26 Dec 2007, 22:08

Sorry, I didnt mean to be secret about it.
It´s just that for now it´s just a (non functioning) test how to get a value from sketchup to a webdialog as default value. If I just can get some help getting this working I'll be sure to post the script I'm working on.

301 Moved Permanently

(www.sketchucation.com)

Jim · 26 Dec 2007, 22:09

For starters, you never call the javascript setup function, which in turn never calls the "setup" callback in the ruby.

Can I ask why you are using the Tool interface for the WebDialog? I never would have thought to use it, although it does work.

Pixero · 26 Dec 2007, 22:09

First of all, thanks for your help.
I'm crawling in the dirt here and it feels like you're teasing me with small bits that I can't quite get the grips on.
I'm just a total noob when it comes to javascript and the script I´m working on need default values from SketchUp. Please give me an example so that (even) I can understand how to get it working.
I've looked at the few webdialog based script I've found but havent seen any that gets their default value from sketchup. They all have "onClick" and other user activated functions.

Why a tool? Maybe it isnt necessary but later on I'm gonna need to save a value so that it will be remembered when using the script again. I dont know if that is something that can be done without the "suspend tool"?

Jim · 26 Dec 2007, 22:10

Short answer, add this to the html file, right before the </body> tag:


<script>
setup(0,0)
</script>

Have a look at the totd.rb file in the Tools directory. It's a good example of a WebDialog.

Here's my re-write. Saving values between sessions can be done using Sketchup.write_default and Sketchup.read_default.


require "sketchup.rb"

#class JS_Test
# Inherit from the WebDialog. There's no need to use a Tool/
class JS_Test < UI;;WebDialog
  #def activate # activate is a method of the Tool class.
  def initialize 
    # dialog = UI;;WebDialog.new("test", true,"test", 320, 160, 1100, 60, true)
    # super called the parant class "new"
    super "test", true,"test", 320, 160, 1100, 60, true
    fn= File.dirname(__FILE__)+'/test.html'
    #dialog.set_file fn
    set_file fn
    #dialog.show {} #show it    	
    show {} #show it    	

    posX = "1"

    #dialog.add_action_callback("setup") {|d,p|
    add_action_callback("setup") { |d, p| 
      d.execute_script("document.getElementById('posX').value='#{posX}'")
    }

    #end # activate
  end # initialize

end #class jsTest


if(not file_loaded?("test.rb"))
  plugins_menu = UI.menu("Plugins")
  #plugins_menu.add_item("test") { Sketchup.active_model.select_tool JS_Test.new } 
  plugins_menu.add_item("test") { JS_Test.new } 
  file_loaded("test.rb")
end


<!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" />
      <meta name="test" content="test" />
      <title>test</title>
      <script>
	 function setup(id,value)
	 {
	    window.location = 'skp;setup@'+document.getElementById('posX').value; 
	 }
      </script>
   </head>

   <body bgcolor="#e0dfe3">
      <input type="text" size="8" id="posX" value="0"></div>	
   <script>setup();</script>
</body>
</html>

301 Moved Permanently

(www.sketchucation.com)

Pixero · 26 Dec 2007, 22:11

Thanks Jim and Todd. Really appreciated.
Finally back on track...

Don't worry, I'll probably be back with more stupid questions...