# How to display an info floating window

**URL:** <https://forums.sketchup.com/t/how-to-display-an-info-floating-window/4117>\
**Category:** Ruby API\
**Created:** [November 19, 2014, 2:40pm UTC](https://forums.sketchup.com/t/how-to-display-an-info-floating-window/4117 "2014-11-19T14:40:51Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Rojj](https://avatars.discourse-cdn.com/v4/letter/r/e19adc/32.png) [@Rojj](https://forums.sketchup.com/u/Rojj)\
**Post date:** [November 19, 2014, 2:40pm UTC](https://forums.sketchup.com/t/how-to-display-an-info-floating-window/4117/1 "2014-11-19T14:40:51Z")

</div>

Hi

I would like to be able to display a floating window that shows key information about my script. Things like project name, values of some parameters, etc… My script generates different versions of the original Skethcup file in an hierarchy. The info displayed by the window would allow me to understand at a glance where I am in the hierarchy.

Can you please direct me to the correct way to do this? I guess I will have to use webDialog and Javascript, but I wanted to check first 😄

Thanks

---

<div class="post-metadata">

**Author:** ![tt\_su](https://sea2.discourse-cdn.com/sketchup/user_avatar/forums.sketchup.com/tt_su/32/17_2.png) [@tt\_su](https://forums.sketchup.com/u/tt_su)\
**Post date:** [November 19, 2014, 2:54pm UTC](https://forums.sketchup.com/t/how-to-display-an-info-floating-window/4117/2 "2014-11-19T14:54:32Z")

</div>

Yes, a WebDialog would be fit for that task.

Though if you are new to WebDialogs you probably want to scan through these notes regarding quirks with Webdialogs:

> **[GitHub - thomthom/sketchup-webdialogs-the-lost-manual: Collection of...](https://github.com/thomthom/sketchup-webdialogs-the-lost-manual)**
>
> Collection of unofficial documentation of SketchUp's WebDialog class. - GitHub - thomthom/sketchup-webdialogs-the-lost-manual: Collection of unofficial documentation of SketchUp's WebDialog...

---

<div class="post-metadata">

**Author:** ![DanRathbun](https://sea2.discourse-cdn.com/sketchup/user_avatar/forums.sketchup.com/danrathbun/32/500_2.png) [@DanRathbun](https://forums.sketchup.com/u/DanRathbun)\
**Post date:** [November 19, 2014, 6:39pm UTC](https://forums.sketchup.com/t/how-to-display-an-info-floating-window/4117/3 "2014-11-19T18:39:59Z")

</div>

Sounds a lot like the **Outliner** window.

There is also a multi-line `UI.messagebox()`, but it’s modal.

---

<div class="post-metadata">

**Author:** ![Rojj](https://avatars.discourse-cdn.com/v4/letter/r/e19adc/32.png) [@Rojj](https://forums.sketchup.com/u/Rojj)\
**Post date:** [November 21, 2014, 7:26am UTC](https://forums.sketchup.com/t/how-to-display-an-info-floating-window/4117/4 "2014-11-21T07:26:13Z")

</div>

OK Thanks. I managed to create my first WebDialog and create a basic table (This will contain my project info). Please consider that I am completely new to HTML. I have been reading quite a bit but I am still struggling to achieve what I need.

This is the ruby code

```
# sample.rb
require 'sketchup.rb'
wd=UI::WebDialog.new( 
	"Project Info", true, "", 
400, 300, 100, 100, false )
wd.add_action_callback("create_table") do |js_wd, message|
	#UI::messagebox( 'I\'m Ruby. JavaScript said: "' + message + '"' )
	text = "Project"
	js_command = 'tableCreate("' + text + '")'
	wd.execute_script(js_command)
	puts message
end
#Show file		
wd.set_file( 'C:\\Filelocation\\sample.htm')
wd.show()

```

…and this is the sample.htm file

```
<html>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<head>
		<style>
			body {background-color:white}
			h1 {color:blue}
		</style>
	</head>
	<title> Project Information </title>
	<body>
		<script type='text/javascript'>
			function tableCreate(text){
				var body = document.body,
				tbl = document.createElement('table');
				//tbl.style.width='200px';
				tbl.style.border = "1px solid black";
				
				for(var i = 0; i < 3; i++){
					var tr = tbl.insertRow();
					for(var j = 0; j < 3; j++){
						var td = tr.insertCell();
						td.appendChild(document.createTextNode(text + ' (' + i + ',' + j + ')'))
						td.style.border = "1px solid black";
					}
				}
				body.appendChild(tbl);
			}
			
			function tableUpdate(tbl, text, i, j){
				var body = document.body;
				tbl.rows[i].cells[j].innerHTML = text;				
			}

			//Callbacks
			function create_table( cb_name, msg ) {
				fake_url = 'skp:' + cb_name + '@' + msg
				window.location.href = fake_url
			}
			create_table("create_table", "tbl" )
		</script>
	</body>

```

If I have understood correctly, I cannot execute a script without a callback. Is this right?

I have a couple of questions (actually a bit more, but 2 will suffice for now 🙂 )

1. I don’t really understand how to execute the function **tableUpdate** without executing **tableCreate** again.
2. How do I return the reference to **tbl** to my ruby script?

Thanks a lot

---

<div class="post-metadata">

**Author:** ![tt\_su](https://sea2.discourse-cdn.com/sketchup/user_avatar/forums.sketchup.com/tt_su/32/17_2.png) [@tt\_su](https://forums.sketchup.com/u/tt_su)\
**Post date:** [November 21, 2014, 12:07pm UTC](https://forums.sketchup.com/t/how-to-display-an-info-floating-window/4117/5 "2014-11-21T12:07:39Z")

</div>

Btw, for simple UI need you can also try out SKUI: [GitHub - thomthom/SKUI: Ruby wrapper of classes that maps to GUI controls in SketchUp's UI::WebDialogs](https://github.com/thomthom/SKUI)  
It wraps the webdialog controls in pure Ruby wrapper classes.

---

<div class="post-metadata">

**Author:** ![TIG](https://sea2.discourse-cdn.com/sketchup/user_avatar/forums.sketchup.com/tig/32/198_2.png) [@TIG](https://forums.sketchup.com/u/TIG)\
**Post date:** [November 21, 2014, 4:27pm UTC](https://forums.sketchup.com/t/how-to-display-an-info-floating-window/4117/6 "2014-11-21T16:27:05Z")

</div>

_Another tip:_  
On PCs **wd.show()** is needed to let you still work while the dialog is in front of the main dialog.  
**show\_modal** keeps it always in front but stops you working in SketchUp.  
BUT on a MAC the ‘ **show** ’ dialog will move behind the SketchUp window when you click on something.  
On a MAC you need to use **show\_modal** to keep it in front BUT on a MAC you can still work in the SketchUp window…  
Test for different OSs using something like this:

```
if (RUBY_PLATFORM.downcase =~ /mswin|mingw/) != nil ### PC
        MAC=false
else #MAC
        MAC=true
end

```

Then to set OS specific things:

```
if MAC
       wd.show_modal()
else
       wd.show()
end

```

---

<div class="post-metadata">

**Author:** ![Rojj](https://avatars.discourse-cdn.com/v4/letter/r/e19adc/32.png) [@Rojj](https://forums.sketchup.com/u/Rojj)\
**Post date:** [November 21, 2014, 6:51pm UTC](https://forums.sketchup.com/t/how-to-display-an-info-floating-window/4117/7 "2014-11-21T18:51:08Z")

</div>

Awesome! Great work.

Thanks. It’s exactly what I need.

---

<div class="post-metadata">

**Author:** ![MSP\_Greg](https://sea2.discourse-cdn.com/sketchup/user_avatar/forums.sketchup.com/msp_greg/32/206066_2.png) [@MSP\_Greg](https://forums.sketchup.com/u/MSP_Greg)\
**Post date:** [December 5, 2014, 3:00am UTC](https://forums.sketchup.com/t/how-to-display-an-info-floating-window/4117/8 "2014-12-05T03:00:27Z")

</div>

Rojj,

You didn’t mention whether your html was static or whether the info in the WebDialog would change after it was displayed.

If it is static, and if the info won’t change, there’s another method you can use, which is to use the set\_html method of WebDialogs. You don’t need a separate file for the html. This concept can also be used (with some javascript) to replace the UI::messagebox.

```
# SketchUp set_html demo code
# html variable is a Ruby HERE doc
html = <<-'00HERE!!'
<html>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <head>
        <title>Project Information</title>
        <style type="text/css">
            body {background-color:white; font-size:1em;}
            h1 {color:blue;}
            table {border:1px solid black; border-collapse:collapse;}
            td {border:1px solid black; padding:0.3em 0.5em 0.3em 0.5em;}
        </style>
    </head>
    <body>
        <table>
            <tr><td>_0_0</td><td>_0_1</td><td>_0_2</td></tr>
            <tr><td>_1_0</td><td>_1_1</td><td>_1_2</td></tr>
            <tr><td>_2_0</td><td>_2_1</td><td>_2_2</td></tr>
        </table>
    </body>
</html>
00HERE!!

# below replaces placeholders inside of td elements
html.sub!(/_0_0/, "Rojj")
html.sub!(/_0_1/, "is")
html.sub!(/_0_2/, "Here")

html.sub!(/_1_0/, "Thom")
html.sub!(/_1_1/, "was")
html.sub!(/_1_2/, "There")

html.sub!(/_2_0/, "Greg")
html.sub!(/_2_1/, "might be")
html.sub!(/_2_2/, "here")

wd = UI::WebDialog.new("Project Info", true, "", 400, 300, 100, 100, false )
wd.set_size(400,300)
wd.set_html(html)
wd.show()

```

Greg