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

    A kickass UI using WebDialogs and DHTML Suite.

    Scheduled Pinned Locked Moved Developers' Forum
    20 Posts 13 Posters 2.8k Views 13 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.
    • C Offline
      CPhillips
      last edited by CPhillips

      I posted on the old forums about using DHTML Suite to build Sketchup UI's. Well, I finally got back to that project last weekend and I came up with what I think is a really nice UI. This is a Work In Progress and doesnt actually interact with Sketchup yet.

      Screenshot:
      http://sketchyutils.googlecode.com/files/UIMockup.png

      All the layout was done in about 6 hours. And that while learning html and java script as I go. I cant recommend Dhtml suite highly enough. http://www.dhtmlgoodies.com/index.html?page=dhtml-suite

      Link to zip(also attached):
      http://sketchyutils.googlecode.com/files/SketchyUIMockup.zip

      Instructions:
      -Unzip into your plugins directory.
      -Run Sketchup
      -Open the ruby console and run the command:
      sketchyUITest()
      NOTE:It doesn't actually interact with Sketchup yet. You might as well delete it after you have looked at it.

      I think the best bit is how the panels smoothly scroll when you open and close them. πŸ˜„

      If you are interested in the inner workings: All the code I wrote is in the SketchyUI/Dialogs folder. There is the HTML file which is about 450lines and a Simple.html that is only 150 lines. If you want to understand the HTML you might want to start with Simple.html. Either file should open correctly in a standard web browser.

      Chris

      301 Moved Permanently

      favicon

      (www.sketchucation.com)

      1 Reply Last reply Reply Quote 0
      • T Offline
        todd burch
        last edited by

        Prettttttty cool!

        Todd

        1 Reply Last reply Reply Quote 0
        • PixeroP Offline
          Pixero
          last edited by

          Thanks for the link. πŸ˜‰

          1 Reply Last reply Reply Quote 0
          • T Offline
            tomasz
            last edited by

            Chris,
            It is amazing. My head is exploding πŸ˜’
            Bye Bye Simple input boxes. I just have to wait for the weekend πŸ˜„
            I hope connecting it to SU is easy.

            Thanks a lot!
            Tomasz

            Author of [Thea Render for SketchUp](http://www.thearender.com/sketchup)

            1 Reply Last reply Reply Quote 0
            • D Offline
              diana
              last edited by

              This looks so very nice and I do like how the sections scroll.

              1 Reply Last reply Reply Quote 0
              • N Offline
                not registered yet
                last edited by

                That looks really nice!

                [crojack]

                1 Reply Last reply Reply Quote 0
                • boofredlayB Offline
                  boofredlay
                  last edited by

                  Eagerly awaiting.

                  http://www.coroflot.com/boofredlay

                  1 Reply Last reply Reply Quote 0
                  • Y Offline
                    ypnos1
                    last edited by

                    OMG

                    That is cool
                    and i feel like such a dork for being so exited about somethign like this
                    thanks πŸ˜„

                    1 Reply Last reply Reply Quote 0
                    • C Offline
                      CPhillips
                      last edited by

                      Update, I hooked up the UI to actually send updates to Sketchup any time a value changes. It was pretty easy but I am very glad I waited until I had the layout finished. Maintaining all the names and events is tedious when you are doing a lot of copy/paste of elements.

                      Unfortunately I think I went a bit overboard with the UI. It works fine, but from a user perspective it looks too cluttered and complicated. I am going to break it up and simplify it.

                      If anyone wants advice on how to get one of these running ask here.

                      Chris

                      1 Reply Last reply Reply Quote 0
                      • T Offline
                        tomasz
                        last edited by

                        Chris,
                        I am interested. Give us a guidance, please.
                        Thanks in advance.
                        Tomasz

                        Author of [Thea Render for SketchUp](http://www.thearender.com/sketchup)

                        1 Reply Last reply Reply Quote 0
                        • W Offline
                          Whaat
                          last edited by

                          Did you do the layout by hand-editing the HTML files or did you have layout software to drag and drop, cut and paste, edit colors, etc.?

                          Also, did you find any useful online resources for learning HTML and javascript or did you just try and figure it all out on your own?

                          Thanks for sharing this...

                          SketchUp Plugins for Professionals

                          1 Reply Last reply Reply Quote 0
                          • C Offline
                            CPhillips
                            last edited by

                            @unknownuser said:

                            Chris,
                            I am interested. Give us a guidance, please.
                            Thanks in advance.
                            Tomasz

                            I meant that if you wanted to build a dhtml suite dialog I would give you advice. Do you have a UI in mind?

                            Chris

                            1 Reply Last reply Reply Quote 0
                            • C Offline
                              CPhillips
                              last edited by

                              @whaat said:

                              Did you do the layout by hand-editing the HTML files or did you have layout software to drag and drop, cut and paste, edit colors, etc.?

                              Also, did you find any useful online resources for learning HTML and javascript or did you just try and figure it all out on your own?

                              Thanks for sharing this...

                              I did it by hand. I looked and looked for a good layout editor and came up with nothing that was suitable.

                              Finally I bit the bullet and started doing the html code by hand. It wasnt nearly as bad as I expected. And I now kinda understand why none of the html layout tools are any good. Its more like writing code than a layout. BTW I use SCite as a html aware text editor).

                              The dialogs\simple.html example shows pretty much just the basics.

                              Chris

                              1 Reply Last reply Reply Quote 0
                              • T Offline
                                tomasz
                                last edited by

                                @cphillips said:

                                I meant that if you wanted to build a dhtml suite dialog I would give you advice.
                                Do you have a UI in mind?

                                I meant if you could show us how you have connected html and Ruby. How you pass results back to Ruby.

                                Tomasz

                                Author of [Thea Render for SketchUp](http://www.thearender.com/sketchup)

                                1 Reply Last reply Reply Quote 0
                                • C Offline
                                  CPhillips
                                  last edited by

                                  @unknownuser said:

                                  I meant if you could show us how you have connected html and Ruby. How you pass results back to Ruby.
                                  Tomasz

                                  Ah. Well you don't need dhtml suite for that.

                                  Here is the ruby code that launches a very simple html dialog:

                                  
                                  def showVerySimple()
                                      #create
                                      dlg = UI;;WebDialog.new("VerySimple", true,"verysimple", 300, 300, 100, 50, true)
                                      fn= File.dirname(__FILE__)+'/verysimple.html'
                                      dlg.set_file fn
                                      dlg.show {} #show it
                                      
                                      #create a callback for anytime a value changes in the dialog.
                                      dlg.add_action_callback("ValueChanged") {|d,p|
                                              puts p  
                                              }
                                  end
                                  

                                  The "add_action_callback" code at the end allows the dialog to communicate with sketchup. The "puts p" will print out the name and value of a control that changed.

                                  Here is the HTML:

                                  
                                  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
                                  <HTML>
                                  	<HEAD>
                                      <title>Webdialog UI </title>
                                  	</HEAD>
                                  	<body> 
                                          <div>
                                              <font color="blue">Checkboxes</font><br>
                                              <input type="checkbox" name="check-one" onClick="tellSketchup(this.name,this.checked)">One</input>
                                              <input type="checkbox" name="check-two" onClick="tellSketchup(this.name,this.checked)">Two<br></input>
                                              <input type="checkbox" name="check-three" onClick="tellSketchup(this.name,this.checked)">Three</input>
                                              
                                              <br>
                                              <font color="blue">Radio</font><br>
                                              <INPUT type=radio name="radio" value="radio-a" onClick="tellSketchup(this.value,this.checked)">Aye
                                              <INPUT type=radio name="radio" value="radio-b" onClick="tellSketchup(this.value,this.checked)">Bee
                                              <INPUT type=radio name="radio" value="radio-c" onClick="tellSketchup(this.value,this.checked)">See<br>
                                          </div>
                                     		<script type="text/javascript">
                                             function tellSketchup(name,value)
                                             {
                                                      //this non-intuitive command will call the sketchup callback "ValueChanged"
                                                      //with the name and value of the control that changed
                                                 window.location='skp;ValueChanged@'+name +"="+ value;
                                             }
                                         </script>
                                      </body>
                                  </HTML>
                                  
                                  

                                  The HTML creates three checkboxes and three radio buttons. Anytime a user clicks on a control (ie. changes it) the "onClick" code is called. In this case it calls a javascript function called "tellSketchup". That function simply passes the info to sketchup in the form of a string like "check-one=true".

                                  Thats it!
                                  Chris

                                  301 Moved Permanently

                                  favicon

                                  (www.sketchucation.com)

                                  1 Reply Last reply Reply Quote 0
                                  • J Offline
                                    Jim
                                    last edited by

                                    It comes down to passing Strings from the javascript to the ruby callback by setting the window.location and using the skp: prefix.

                                    
                                    // this is javascript
                                    window.location = "skp;somecallback"; // no paramters
                                    window.location = "skp;somecallback@" + someString;
                                    
                                    
                                    
                                    # this is ruby
                                    dialog.add_action_callback("somecallback") do |d, a|
                                      # d is the dialog
                                      # a is the string passed after the @ in the javascript
                                      puts "somecallback called;#{a.inspect}"
                                    end
                                    
                                    

                                    Hi

                                    1 Reply Last reply Reply Quote 0
                                    • H Offline
                                      herodes
                                      last edited by

                                      Can someone repost the VerySimpleDialog.zip file that was on this thread?

                                      I'd like to have a look...

                                      %(#BFBFBF)[http://arhitektonas.blogspot.com
                                      I know me,... I am that guy...
                                      ]

                                      1 Reply Last reply Reply Quote 0
                                      • GaieusG Offline
                                        Gaieus
                                        last edited by

                                        Fixed. Thanks for notifying.

                                        Gai...

                                        1 Reply Last reply Reply Quote 0
                                        • fredo6F Offline
                                          fredo6
                                          last edited by

                                          Chris,

                                          That's a very neat job and a damned good idea to enhance interactivity for some plugins requiring options and being context sensitive for actions (The Sketchup tool bar is actually very limited to interact efficiently and the button state management of Sketchup is simply buggy).

                                          I guess this works for Mac too.

                                          As soon as I can, I'll give it a try to regroup some commands of my plugins (Bezier, JPP, OOS, etc...) as it will be easier to show the options.

                                          Fredo

                                          PS: your dialog box is very esthetic. I like very much the design. And if you allow me, I will take some inspiration of it when I try one.

                                          1 Reply Last reply Reply Quote 0
                                          • C Offline
                                            CPhillips
                                            last edited by

                                            Thanks Fredo6. Feel free to copy any part of it. πŸ˜„

                                            @unknownuser said:

                                            Chris,

                                            That's a very neat job and a damned good idea to enhance interactivity for some plugins requiring options and being context sensitive for actions (The Sketchup tool bar is actually very limited to interact efficiently and the button state management of Sketchup is simply buggy).

                                            I guess this works for Mac too.

                                            As soon as I can, I'll give it a try to regroup some commands of my plugins (Bezier, JPP, OOS, etc...) as it will be easier to show the options.

                                            Fredo

                                            PS: your dialog box is very esthetic. I like very much the design. And if you allow me, I will take some inspiration of it when I try one.

                                            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