How to display an info floating window

Developers Ruby API
1

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 :smile:

Thanks

2

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:

1 Like
3

Sounds a lot like the Outliner window.

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

4

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 :slight_smile: )

  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

5

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
It wraps the webdialog controls in pure Ruby wrapper classes.

6

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
7

Awesome! Great work.

Thanks. It’s exactly what I need.

8

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

2 Likes