• Login
sketchucation logo sketchucation
  • Login
ℹ️ Licensed Extensions | FredoBatch, ElevationProfile, FredoSketch, LayOps, MatSim and Pic2Shape will require license from Sept 1st More Info

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.
  • W Offline
    Whaat
    last edited by 1 Dec 2007, 17:49

    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 1 Dec 2007, 17:50

      @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 1 Dec 2007, 17:50

        @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 1 Dec 2007, 17:51

          @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 1 Dec 2007, 17:52

            @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 1 Dec 2007, 17:54

              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 14 Apr 2008, 11:39

                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 14 Apr 2008, 12:17

                  Fixed. Thanks for notifying.

                  Gai...

                  1 Reply Last reply Reply Quote 0
                  • fredo6F Offline
                    fredo6
                    last edited by 19 Apr 2008, 14:36

                    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 20 Apr 2008, 01:38

                      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