Web Dialog - how to

Jim

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

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

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

Are you sure you are building the filename properly?

"What" does not work?

todd burch

Nevermind. Put the dialog.execute_script in a callback.

Pixero

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

Bump.
Can you see whats wrong with my code?

todd burch

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

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

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

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

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

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

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