HTMLDialog vs WebDialog?

HTMLDialog vs WebDialog?

Postby leela » Wed Jul 12, 2017 12:10 pm

Do any developers here have an opinion on HTMLDialog vs WebDialogs?

It seems like the docs steer us towards using HTMLDialog but all of the learning resources available are for the WebDialog.

As I understand it some of the ways to pass data are different in the HTMLDialog windows, but they don't seem to be documented anywhere.

If I make an extension only for 2017 users that be very limiting?

Also are there any stats about % users for each version up to 2017?
0
User avatar
leela 
 

Re: HTMLDialog vs WebDialog?

Postby Garry K » Wed Jul 12, 2017 7:49 pm

I use the same strategy to move data back and forth between Ruby and the Dialog.

For SU 2017 users I have a configuration where you can use HTMLDialog or WebDialog. This configuration is ignored for older Sketchup versions.

I personally like the older IE style WebDialog. I trap the Enter key so you can use it instead of clicking OK. With the chrome version the enter key doesn't get trapped when a drop down list is opened. Also the position of the drop down list in Chrome is out immediately after moving the HTMLdialog form. Lastly I like to color the background of a checkbox for a little quicker visual and this does not work in Chrome.

At some point Trimble will drop the WebDialog in favor of just supporting Chrome.
0

Garry K 
Premium Member
Premium Member
 

Re: HTMLDialog vs WebDialog?

Postby driven » Thu Jul 13, 2017 10:45 pm

Garry

I can color the backgrounds of input boxes with css...

and the Enter key works as well...

test this fiddle in a HtmlDialog...

http://jsfiddle.net/wkpeq/1/

it works on a mac for CEF in SU...

are you trying with jQuery or another framework?

john
0
learn from the mistakes of others, you may not live long enough to make them all yourself...

driven 
PluginStore Author
PluginStore Author
 

Re: HTMLDialog vs WebDialog?

Postby Garry K » Fri Jul 14, 2017 4:01 pm

John

I use JQuery - not JsFiddle.

With Windows I can color the background of Input Text and Select - just not check boxes.
Also the Enter key doesn't trap while you are inside a drop down list.

Here IE allows me to color background of check boxes.

check boxes.png


And here is chrome - notice the check boxes background is transparent. Also I moved the form while the drop down list is open and now you can't tell which drop down I was in. The difference is IE closes the drop down when you click and drag the form - chrome does not.

check boxes chrome.png
0

Garry K 
Premium Member
Premium Member
 

Re: HTMLDialog vs WebDialog?

Postby driven » Sun Jul 16, 2017 8:45 pm

Garry K wrote:I use JQuery - not JsFiddle.


JsFiddle is an online test environment...

you can even test your jQuery in it...

if you launch it from within SU it quickly shows if code works in the SU browser of your running [IE/Safari/CEF]...

to test you use set_url and add code too see what flies...

both your issues work in CEF using vanilla js inside SU, so are most likely jQuery needing updating...

john
0
learn from the mistakes of others, you may not live long enough to make them all yourself...

driven 
PluginStore Author
PluginStore Author
 

Re: HTMLDialog vs WebDialog?

Postby Dan Rathbun » Tue Jul 18, 2017 10:54 pm

Garry K wrote:Also the Enter key doesn't trap while you are inside a drop down list.

But when the user (in CEF) hits ENTER on an `<select><option>`, that changes the selection does it not ? And therefore it should fire the some event ?



I just tested in normal Chrome and the ENTER key works fine.
http://jsfiddle.net/wkpeq/73/

Code: Select all
<!DOCTYPE html>
<html>
    <head>
        <script>
            function CheckKey(e) {
                var code = e.keyCode ? e.keyCode : e.which;
                if(code === 13) {
                  alert("You press Enter key.");
                }            
            }

            function SubstanceChangeHandler(val) {
              alert("New substance chosen: "+val);
              txtTest.value= val;
            }        
        </script>
    </head>
    <body>
        <input name="txtTest"  type="text" id="txtTest" onkeyup="CheckKey(event)"/>

        <select onchange="SubstanceChangeHandler(this.value);">
          <optgroup label="Alkaline Metals">
            <option>Lithium (Li)</option>
            <option>Sodium (Na)</option>
            <option>Potassium (K)</option>
          </optgroup>
          <optgroup label="Halogens">
            <option>Fluorine (F)</option>
            <option>Chlorine (Cl)</option>
            <option>Bromine (Br)</option>
          </optgroup>
        </select>  
    </body>

</html>
0
    I'm not here much anymore. But a PM will fire email notifications.
    User avatar
    Dan Rathbun 
    PluginStore Author
    PluginStore Author
     

    Re: HTMLDialog vs WebDialog?

    Postby Dan Rathbun » Wed Jul 19, 2017 12:26 am

    Garry K wrote: Also I moved the form while the drop down list is open and now you can't tell which drop down I was in. The difference is IE closes the drop down when you click and drag the form - chrome does not.

    Let us try some tests to see if we can get Chrome to close the <select> droplists.

    Code: Select all
     <body onmouseout="document.blur();" onmouseover="document.focus();">

    I'm hoping this will cause the current active selection element to lose focus and have it's blur event fire.

    If this does not work, then perhaps keep track of the current object that has focus:

    Code: Select all
    <!DOCTYPE html>
    <html>

        <head>
            <script>
                // Global variable:
                activeObject = document.body;
                previousObject = document.body;
               
                function setActive(obj) {
                    activeObject = obj;
                }

                function clearActive(obj) {
                    activeObject = document.body;
                    previousObject = obj;
                }

                function blurAll() {
                    if activeObject != document.body {
                        activeObject.blur();
                        if activeObject != document.body {
                            clearActive(activeObject);
                        }
                    }
                    document.blur();
                }

                function reFocus() {
                    document.focus();
                    if previousObject != document.body {
                        previousObject.focus(); // calls setActive(previousObject)
                        previousObject = document.body;
                    }
                }

                function CheckKey(e) {
                    var code = e.keyCode ? e.keyCode : e.which;
                    if(code === 13) {
                      alert("You press Enter key.");
                    }           
                }

                function SubstanceChangeHandler(val) {
                  alert("New substance chosen: "+val);
                  txtTest.value= val;
                }       
            </script>
        </head>

        <body onmouseout="blurAll();" onmouseover="reFocus();">
       
            <input name="txtTest"  type="text" id="txtTest" onkeyup="CheckKey(event)"/>

            <select onchange="SubstanceChangeHandler(this.value);"
                    onfocus="setActive(this);" onblur="clearActive(this);">
              <optgroup label="Alkaline Metals">
                <option>Lithium (Li)</option>
                <option>Sodium (Na)</option>
                <option>Potassium (K)</option>
              </optgroup>
              <optgroup label="Halogens">
                <option>Fluorine (F)</option>
                <option>Chlorine (Cl)</option>
                <option>Bromine (Br)</option>
              </optgroup>
            </select>

        </body>

    </html>


    If this scenario works, you can set the onfocus and onblur handlers for all <select> elements via an iteration loop after the page loads.
    0
      I'm not here much anymore. But a PM will fire email notifications.
      User avatar
      Dan Rathbun 
      PluginStore Author
      PluginStore Author
       

      Re: HTMLDialog vs WebDialog?

      Postby driven » Wed Jul 19, 2017 2:01 am

      Dan Rathbun wrote:Let us try some tests to see if we can get Chrome to close the select drop lists.


      using Enter or a Click closes them, if not, there is a javascript over-ride preventing default behaviour...

      john
      0
      learn from the mistakes of others, you may not live long enough to make them all yourself...

      driven 
      PluginStore Author
      PluginStore Author
       

      Re: HTMLDialog vs WebDialog?

      Postby Dan Rathbun » Wed Jul 19, 2017 3:59 am

      You missed the point John, he's doing neither. He is simply leaving the droplist and grabbing the window caption bar and moving the entire window. This is leaving the droplists behind (as if torn off) as shown in the screenshots above.

      My attempt to fix it would detect when the mouse leaves the body of the html document, and blur the <select> element hopefully making it close it's droplist.
      0
        I'm not here much anymore. But a PM will fire email notifications.
        User avatar
        Dan Rathbun 
        PluginStore Author
        PluginStore Author
         

        Re: HTMLDialog vs WebDialog?

        Postby driven » Wed Jul 19, 2017 9:28 am

        gotcha, you mean bug SU-35701.

        john
        0
        Last edited by driven on Wed Jul 19, 2017 9:00 pm, edited 1 time in total.
        learn from the mistakes of others, you may not live long enough to make them all yourself...

        driven 
        PluginStore Author
        PluginStore Author
         

        Re: HTMLDialog vs WebDialog?

        Postby Garry K » Wed Jul 19, 2017 8:57 pm

        Thanks guys - I haven't had time to look into this yet. But what I see looks encouraging.
        0

        Garry K 
        Premium Member
        Premium Member
         

        Re: HTMLDialog vs WebDialog?

        Postby Dan Rathbun » Mon Jul 24, 2017 10:27 pm

        Let us know if any of the suggestions work.
        0
          I'm not here much anymore. But a PM will fire email notifications.
          User avatar
          Dan Rathbun 
          PluginStore Author
          PluginStore Author
           

          Re: HTMLDialog vs WebDialog?

          Postby medeek » Sun Sep 10, 2017 2:30 am

          I have some issues with Mac users and my webdialogs. Unfortunately, I don't have a Mac computer at my disposal so I can't directly test and debug the issues but it appears to be some behavior with the blocking not working correctly in MacOS.

          Does anyone have any suggestions on a work around for this problem.

          I've been tempted to switch to HTMLDialog from WebDialog but I have too many people using the plugins who have older versions of SU.

          I also don't see any distinct advantage to switching unless it will fix my MacOS problem.
          0
          Nathaniel P. Wilkerson PE
          Medeek Engineering Inc
          design.medeek.com
          User avatar
          medeek 
          PluginStore Author
          PluginStore Author
           

          Re: HTMLDialog vs WebDialog?

          Postby medeek » Sun Sep 10, 2017 2:41 am

          Here is my code for my webdialog for the timber truss feature that I recently added. I think the issues with Mac users may have to do with the dialog not being "modal" even though I am using the show_modal method:

          Code: Select all
          # Create the WebDialog instance
          if @Licensemode == "trial"
            dlg1 = UI::WebDialog.new("Timber Truss Geometry - Medeek Truss Plugin - (trial version)", true, "SelectionInfoPrefKey", 1210, 860, 500, 250, true)
          else
            dlg1 = UI::WebDialog.new("Timber Truss Geometry - Medeek Truss Plugin", true, "SelectionInfoPrefKey", 1210, 860, 500, 250, true)
          end

          dlg1.add_action_callback("PUSHTOHTML_SETTINGS") {|dialog, params|
                   
            js_command = 'pushdata( "' + @Trusstype.to_s + '|' ....  .... '|' + @Panel.to_s + '" );'
            # puts js_command
            dialog.execute_script(js_command)   
          }

          dlg1.add_action_callback("GET_SETTINGS") {|dialog, params|
                   
            params = params.to_s
            # puts params
            paramlist = []
            paramlist = params.split("|")

            @Trusstype = paramlist[0]

            @Span = paramlist[1]
            if @Span == ""
              @Span = @TrussSpan_ft
            else
              @Span = @Span.to_f
            end

          ....            

            @Panel = paramlist[20]
            if @Panel == ""
              @Panel = @Span * 12.0 * 0.25
            else
              @Panel = @Panel.to_f
            end
          }

          dlg1.add_action_callback("CLOSE_DIALOG") {|dialog, params|
            dialog.close
          }

          # Find and show our html file
             
          dlg1.set_file File.dirname(__FILE__) + "/html/web_dialog_timber_truss.html"
          dlg1.show_modal()
          0
          Nathaniel P. Wilkerson PE
          Medeek Engineering Inc
          design.medeek.com
          User avatar
          medeek 
          PluginStore Author
          PluginStore Author
           

          Re: HTMLDialog vs WebDialog?

          Postby driven » Sun Sep 10, 2017 9:28 pm

          can you add a link to the version showing issues...

          without the html and params it's impossible to guess the issue...

          I doubt it has anything to do with modality of the window...

          john
          0
          learn from the mistakes of others, you may not live long enough to make them all yourself...

          driven 
          PluginStore Author
          PluginStore Author
           

          Re: HTMLDialog vs WebDialog?

          Postby medeek » Mon Sep 11, 2017 2:22 pm

          The html code is rather large due to the insane amount of javascript that is used to generate the SVG preview so rather than post it on the board it can be viewed here:

          http://design.medeek.com/resources/timb ... truss.html

          Just take a look at the source code of this page.

          The version of the plugin having the issues is 1.9.8, download here:

          http://design.medeek.com/calculator/ske ... ss_ext.rbz
          0
          Nathaniel P. Wilkerson PE
          Medeek Engineering Inc
          design.medeek.com
          User avatar
          medeek 
          PluginStore Author
          PluginStore Author
           

          Re: HTMLDialog vs WebDialog?

          Postby driven » Mon Sep 11, 2017 8:00 pm

          are they seeing errors like this?

          the `onLButtonDown' doesn't finalise before the dialog shows, and then creates and new dialog when you click again...

          Code: Select all
          /users/johns_imac/library/application support/sketchup 2017/sketchup/plugins/medeek_truss_ext/medeek_timber_roof_truss.rbs:801:in `get_truss_geometry_timber'
          /users/johns_imac/library/application support/sketchup 2017/sketchup/plugins/medeek_truss_ext/medeek_roof_truss.rbs:1103:in `main_menu'
          /users/johns_imac/library/application support/sketchup 2017/sketchup/plugins/medeek_truss_ext/medeek_roof_truss.rbs:5705:in `calculate_obj'
          /users/johns_imac/library/application support/sketchup 2017/sketchup/plugins/medeek_truss_ext/medeek_roof_truss.rbs:5718:in `update_state'
          /users/johns_imac/library/application support/sketchup 2017/sketchup/plugins/medeek_truss_ext/medeek_roof_truss.rbs:5726:in `onLButtonDown'


          john
          0
          learn from the mistakes of others, you may not live long enough to make them all yourself...

          driven 
          PluginStore Author
          PluginStore Author
           

          Re: HTMLDialog vs WebDialog?

          Postby medeek » Tue Sep 12, 2017 6:06 pm

          I will check with the user who reported the error and see what I come back with. Thank-you for helping me look into this.
          0
          Nathaniel P. Wilkerson PE
          Medeek Engineering Inc
          design.medeek.com
          User avatar
          medeek 
          PluginStore Author
          PluginStore Author
           

          Re: HTMLDialog vs WebDialog?

          Postby medeek » Fri Sep 15, 2017 2:36 am

          Code: Select all
          Error: #<NoMethodError: undefined method `*' for nil:NilClass>
          /users/momdad/library/application support/sketchup 2017/sketchup/plugins/medeek_truss_ext/medeek_timber_roof_truss.rbs:1064:in `create_timber_geometry'
          /users/momdad/library/application support/sketchup 2017/sketchup/plugins/medeek_truss_ext/medeek_timber_roof_truss.rbs:801:in `get_truss_geometry_timber'
          /users/momdad/library/application support/sketchup 2017/sketchup/plugins/medeek_truss_ext/medeek_roof_truss.rbs:1103:in `main_menu'
          /users/momdad/library/application support/sketchup 2017/sketchup/plugins/medeek_truss_ext/medeek_roof_truss.rbs:5705:in `calculate_obj'
          /users/momdad/library/application support/sketchup 2017/sketchup/plugins/medeek_truss_ext/medeek_roof_truss.rbs:5718:in `update_state'
          /users/momdad/library/application support/sketchup 2017/sketchup/plugins/medeek_truss_ext/medeek_roof_truss.rbs:5726:in `onLButtonDown'
          Error: #<TypeError: String can't be coerced into Float>
          /users/momdad/library/application support/sketchup 2017/sketchup/plugins/medeek_truss_ext/medeek_timber_roof_truss.rbs:1355:in `+'
          /users/momdad/library/application support/sketchup 2017/sketchup/plugins/medeek_truss_ext/medeek_timber_roof_truss.rbs:1355:in `create_timber_geometry'
          /users/momdad/library/application support/sketchup 2017/sketchup/plugins/medeek_truss_ext/medeek_timber_roof_truss.rbs:801:in `get_truss_geometry_timber'
          /users/momdad/library/application support/sketchup 2017/sketchup/plugins/medeek_truss_ext/medeek_roof_truss.rbs:1103:in `main_menu'
          /users/momdad/library/application support/sketchup 2017/sketchup/plugins/medeek_truss_ext/medeek_roof_truss.rbs:5705:in `calculate_obj'
          /users/momdad/library/application support/sketchup 2017/sketchup/plugins/medeek_truss_ext/medeek_roof_truss.rbs:5718:in `update_state'
          /users/momdad/library/application support/sketchup 2017/sketchup/plugins/medeek_truss_ext/medeek_roof_truss.rbs:5726:in `onLButtonDown'
          Error: #<TypeError: String can't be coerced into Float>
          /users/momdad/library/application support/sketchup 2017/sketchup/plugins/medeek_truss_ext/medeek_timber_roof_truss.rbs:1355:in `+'
          /users/momdad/library/application support/sketchup 2017/sketchup/plugins/medeek_truss_ext/medeek_timber_roof_truss.rbs:1355:in `create_timber_geometry'
          /users/momdad/library/application support/sketchup 2017/sketchup/plugins/medeek_truss_ext/medeek_timber_roof_truss.rbs:801:in `get_truss_geometry_timber'
          /users/momdad/library/application support/sketchup 2017/sketchup/plugins/medeek_truss_ext/medeek_roof_truss.rbs:1103:in `main_menu'
          /users/momdad/library/application support/sketchup 2017/sketchup/plugins/medeek_truss_ext/medeek_roof_truss.rbs:5705:in `calculate_obj'
          /users/momdad/library/application support/sketchup 2017/sketchup/plugins/medeek_truss_ext/medeek_roof_truss.rbs:5718:in `update_state'
          /users/momdad/library/application support/sketchup 2017/sketchup/plugins/medeek_truss_ext/medeek_roof_truss.rbs:5726:in `onLButtonDown'
          0
          Nathaniel P. Wilkerson PE
          Medeek Engineering Inc
          design.medeek.com
          User avatar
          medeek 
          PluginStore Author
          PluginStore Author
           

          Re: HTMLDialog vs WebDialog?

          Postby medeek » Fri Sep 15, 2017 2:37 am

          The error codes posted above.
          0
          Nathaniel P. Wilkerson PE
          Medeek Engineering Inc
          design.medeek.com
          User avatar
          medeek 
          PluginStore Author
          PluginStore Author
           

          Re: HTMLDialog vs WebDialog?

          Postby Dan Rathbun » Sun Sep 17, 2017 8:29 pm

          medeek wrote:The error codes posted above.

          ... are occurring (according to your error messages,) in "medeek_roof_truss.rbs", line 5726, in callback method onLButtonDown.

          In the first you are calling a *() method upon an object that is referencing the global singleton nil object. Since the NilClass does not have an "asterisk" method, a NoMethodError is raised.

          The second method is caused by your code expecting a Float object, but getting a String object instead.

          The answer is simple. Whenever an object reference could reference disparate types (classes) of obejcts, use a combination of type validation and Ruby rescue clauses with the onLButtonDown callback method.
          0
            I'm not here much anymore. But a PM will fire email notifications.
            User avatar
            Dan Rathbun 
            PluginStore Author
            PluginStore Author
             

            Re: HTMLDialog vs WebDialog?

            Postby medeek » Sun Sep 17, 2017 9:28 pm

            Okay 95% of that just went over my head, but I'll try and decipher into terms I can understand.

            But why would this error only be raised for SketchUp running on MacOS and not Windows?
            0
            Nathaniel P. Wilkerson PE
            Medeek Engineering Inc
            design.medeek.com
            User avatar
            medeek 
            PluginStore Author
            PluginStore Author
             

            Re: HTMLDialog vs WebDialog?

            Postby Dan Rathbun » Thu Sep 21, 2017 3:57 am

            Basically I'm trying to prompt you to learn how to read Ruby error and backtrace messages.
            “filename:lineNo: in `method”‘ or “filename:lineNo.”

            http://ruby-doc.org/core-2.2.4/doc/synt ... _rdoc.html
            http://ruby-doc.org/core-2.2.4/Exception.html

            medeek wrote:Okay 95% of that just went over my head, but I'll try and decipher into terms I can understand.


            https://en.wikipedia.org/wiki/Data_validation

            An example in Ruby of testing if an object reference is pointing at an object of a certain class:
            if obj.is_a?(NilClass)
            ... or ...
            if obj.is_a?(Float)

            An example in Ruby of validating that an object reference call responds to a certain method call:
            if obj.respond_to?(:methname)
            ... and testing for the "asterisk" method specifically:
            if obj.respond_to?(:*)

            medeek wrote:But why would this error only be raised for SketchUp running on MacOS and not Windows?

            I don't know (offhand) as I avoid Macs myself. (But OSX and MS Windows use different sets of keycodes.)

            Actually, looking at the backtraces (in your original error listing) the errors are kicked off by a LButtonDown keypress, but are occurring in the `create_timber_geometry()' method, lines 1064 and 1355.
            0
              I'm not here much anymore. But a PM will fire email notifications.
              User avatar
              Dan Rathbun 
              PluginStore Author
              PluginStore Author
               

              SketchUcation One-Liner Adverts

              by Ad Machine » 5 minutes ago



              Ad Machine 
              Robot
               



               

              Return to Developers' Forum

              Who is online

              Users browsing this forum: sallyyyychan and 9 guests

              Visit our sponsors: