Calculate the needed width of a WebDialog

onidarbe · 18 Jan 2014, 00:33

Hi,

I like to calculate the width I should make a WebDialog to hold a certain sentence. Now it seems to be 8 times the amount of characters +20 for the border. But is this always the same on every computer? windows+mac?
What if I add some html formatting? So I was maybe thinking on using a hmtl DIV with auto-fit, but how do I read that back, calculate and resize the WebDialog?

Can I even lose the title-bar and/or the borders of a WebDialog?

thanks

myVar="Hello World" popup = UI::WebDialog.new("", false, "WebDialog", 20+8*myVar.length, 100, 50, 150, false) popup.set_html( myVar ) popup.show UI::start_timer(0.5, false) { popup.close }

Dan Rathbun · 18 Jan 2014, 04:06

If YOU do not set the font properties, then they will differ on each platform, and may also differ on single platform from browser version to version.

Read an online tutorial for CSS and write your html with a Ruby "HERE Document" that specifies an inline stylesheet.

See the EditFlag plugin I wrote for AshScott. It has an inline stylesheet.

CSS REF:

Learning CSS
CSS Wikibook
[MSDN: Cascading Style Sheets](http://msdn.microsoft.com/en-us/library/ms531209(v)

Inline style sheets with <STYLE> tag: http://msdn.microsoft.com/en-us/library/ms535898(v=vs.85).aspx

Multi-line strings in Ruby (aka Here Documents):
http://phrogz.net/ProgrammingRuby/language.html#strings

# This is Ruby;
myVar="Hello World"

# This is a "HERE Document". The identifier can
#   be any word, not just "HERE"
html= <<HERE
  <html>
    <head>
      <!-- inside the style tags is a CSS stylesheet -->
      <style>
        DIV.certain {
          font-family ; sans-serif;
          font-weight ; bold;
          font-size   ; medium;
        }
      </style>
    <head>
    <body>
      <div class="certain">#{myvar}</div>
    </body>
  </html>
HERE

popup.set_html( html )
RUBY_PLATFORM =~ /darwin/i ? popup.show_modal ; popup.show

tt_su · 18 Jan 2014, 11:31

Then there is also the matter of monitor DPI and font scaling.
And the windows borders isn't the same between platforms - and they can vary from theme to theme. Some people use applications like WindowBlinds which can greatly change with width of the border.

Calculations is going to be very fragile.

What are you trying to achieve?

onidarbe · 18 Jan 2014, 13:58

Thanks.
I'm trying to make a method that pop-ups a given message for a short time. I like it to have a auto width and height. Maybe I could use a DIV that automatically changes his size of what's inside. But how can I read the displayed size of that DIV back into Ruby?


msg = "
<html>
  <div id='msg' style='border;1px solid black;  float;left'> 
    All plugins reloaded from;<br>
    #{folder}
  </div>
  <script type='text/javascript'>
    width=document.getElementById('msg').offsetWidth;
  </script>
</html>"
popup = UI;;WebDialog.new("", false, "WebDialog", 800, 200, 50, 150, false)
popup.set_html(msg)
popup.show
UI;;start_timer(2, false) { popup.close }

So how do I get that Javascipt variable: width back into Ruby?

tt_su · 18 Jan 2014, 17:18

Use a callback to make a call from JS to Ruby:
http://www.sketchup.com/intl/en/developer/docs/ourdoc/webdialog.php#add_action_callback
Can't remember if I've already shared this link with you, but here's some notes about WebDialogs: https://github.com/thomthom/sketchup-webdialogs-the-lost-manual/wiki

Dan Rathbun · 18 Jan 2014, 19:04

But you never use msg.length to adjust the width of the dialog ?

onidarbe · 18 Jan 2014, 22:57

Hey Dan, Nice that I get a question from a guru

So no, I didn't use msg.length. I let a DIV auto-resize around the message, then I read the width of the DIV and reset the window-size. This way I know exactly what size the text takes, never mind what system. At least that's what I'm thinking. Someone needs to test it on a Mac...
There is however still the size of the window-frame that I can't predict, so I added 30 & 60 to width & height. It would be nice if I find a solution to have my own narrow border without the header, if anyone has an idea, let me now...

You can see what is happening with the DIV if you add border:1px solid black; into the style, as this will show a frame around the message where I get the size from. To be able to resize the popup window, you need to change the last falseto trueas this stands for resizable!

Now I like to make my own advanced but simple UI.messagebox with input, checkboxes and radio's.

PS: I've added some remarks to the code above.

Dan Rathbun · 19 Jan 2014, 00:56

@onidarbe said:

So no, I didn't use msg.length. I let a DIV auto-resize around the message, then I read the width of the DIV and reset the window-size. This way I know exactly what size the text takes, never mind what system.

That is is a great idea!

tt_su · 19 Jan 2014, 10:55

I've used similar to set the size of a webdialog specifying the client area: https://github.com/thomthom/SKUI/blob/master/src/SKUI/window.rb#L98

onidarbe · 23 Jan 2014, 11:44

Thanks!

I found the solution...

[update 2013-01-23]

def popup(msg="", timeOut=0, posX=20, posY=70) # 2013-01-23 onidarbe () gmail 
# Popup a message (including html-tags & \r) with a timout and auto-resize the window
# A click on the popup-window will disable timeOut and has to be closed manually
  # To see how it's working, add  border;1px solid black;  in the <div style='...'>
  htmlCode = %{
    <html onclick='clicked();' >
      <div id='div' style='float;left; white-space;nowrap;' >
        #{msg.gsub(/\r/,"<br>\n")}
      </div>
      <script type='text/javascript'>
        width=document.getElementById('div').offsetWidth;
        height=document.getElementById('div').offsetHeight;
        document.write("<input type='hidden' id='width' value='" + width + "'/>");
        document.write("<input type='hidden' id='height' value='" + height + "'/>");
        function clicked() { location = 'skp;clicked' };
        document.body.scroll = "auto"; 
      </script>
    </html>
  }  
  win = UI;;WebDialog.new( "" )
  # NOTE; Variables made up on multiple lines have only a \n at the end of each line!
  #       "View source" with Windows Notepad needs to have \r\n
  win.set_html( htmlCode.gsub(/\r\n|\n\r|\n|\r/,"\r\n") )
  # Although WebDialog without pref_key doesn't keep size or location, set_size does!
  # Thereby start with a smaller window instead of a larger previous version
  win.set_size( 130, 30 )
  win.set_position( posX, posY )
  win.show
  UI;;start_timer( 0, false ) { 
    win.set_size( win.get_element_value("width").to_f+60,
                  [800, win.get_element_value("height").to_f+80].min )
  }
  if timeOut != 0
    timerID = UI;;start_timer( timeOut, false ) { win.close }  
    win.add_action_callback( "clicked" ) { UI.stop_timer( timerID ) }
  end
end

pluginPath = Sketchup.find_support_file( "Plugins" )
Dir.chdir( pluginPath )
rbFiles = Dir[ "*.rb" ]
popup( "<B>All plugins;</B>\r#{pluginPath }\r\r#{rbFiles.join("\r")}", 2 )