sketchucation logo sketchucation
    • Login
    πŸ€‘ SketchPlus 1.3 | 44 Tools for $15 until June 20th Buy Now

    Calculate the needed width of a WebDialog

    Scheduled Pinned Locked Moved Developers' Forum
    10 Posts 3 Posters 477 Views 3 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • onidarbeO Offline
      onidarbe
      last edited by

      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 }

      1 Reply Last reply Reply Quote 0
      • Dan RathbunD Offline
        Dan Rathbun
        last edited by

        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 
        

        πŸ’­

        I'm not here much anymore.

        1 Reply Last reply Reply Quote 0
        • tt_suT Offline
          tt_su
          last edited by

          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?

          1 Reply Last reply Reply Quote 0
          • onidarbeO Offline
            onidarbe
            last edited by

            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?

            1 Reply Last reply Reply Quote 0
            • tt_suT Offline
              tt_su
              last edited by

              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

              1 Reply Last reply Reply Quote 0
              • Dan RathbunD Offline
                Dan Rathbun
                last edited by

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

                I'm not here much anymore.

                1 Reply Last reply Reply Quote 0
                • onidarbeO Offline
                  onidarbe
                  last edited by

                  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.

                  1 Reply Last reply Reply Quote 0
                  • Dan RathbunD Offline
                    Dan Rathbun
                    last edited by

                    @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!

                    πŸ‘

                    I'm not here much anymore.

                    1 Reply Last reply Reply Quote 0
                    • tt_suT Offline
                      tt_su
                      last edited by

                      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

                      1 Reply Last reply Reply Quote 0
                      • onidarbeO Offline
                        onidarbe
                        last edited by

                        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 )
                        
                        
                        1 Reply Last reply Reply Quote 0
                        • 1 / 1
                        • First post
                          Last post
                        Buy SketchPlus
                        Buy SUbD
                        Buy WrapR
                        Buy eBook
                        Buy Modelur
                        Buy Vertex Tools
                        Buy SketchCuisine
                        Buy FormFonts

                        Advertisement