• Login
sketchucation logo sketchucation
  • Login
🤑 SketchPlus 1.3 | 44 Tools for $15 until June 20th Buy Now

HTMLDialog vs WebDialog?

Scheduled Pinned Locked Moved Developers' Forum
23 Posts 5 Posters 4.5k Views 5 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.
  • D Offline
    driven
    last edited by 13 Jul 2017, 21:45

    Garry

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

    and the Enter key works as well...

    test this fiddle in a HtmlDialog...

    Edit fiddle - JSFiddle - Code Playground

    JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.

    favicon

    (jsfiddle.net)

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

    are you trying with jQuery or another framework?

    john

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

    1 Reply Last reply Reply Quote 0
    • G Offline
      Garry K
      last edited by 14 Jul 2017, 15:01

      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

      1 Reply Last reply Reply Quote 0
      • D Offline
        driven
        last edited by 16 Jul 2017, 19:45

        @garry k said:

        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

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

        1 Reply Last reply Reply Quote 0
        • D Offline
          Dan Rathbun
          last edited by 18 Jul 2017, 21:54

          @garry k said:

          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/

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

          I'm not here much anymore.

          1 Reply Last reply Reply Quote 0
          • D Offline
            Dan Rathbun
            last edited by 18 Jul 2017, 23:26

            @garry k said:

            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.

            
             <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:

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

            I'm not here much anymore.

            1 Reply Last reply Reply Quote 0
            • D Offline
              driven
              last edited by 19 Jul 2017, 01:01

              @dan rathbun said:

              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

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

              1 Reply Last reply Reply Quote 0
              • D Offline
                Dan Rathbun
                last edited by 19 Jul 2017, 02:59

                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.

                I'm not here much anymore.

                1 Reply Last reply Reply Quote 0
                • G Offline
                  Garry K
                  last edited by 19 Jul 2017, 19:57

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

                  1 Reply Last reply Reply Quote 0
                  • D Offline
                    driven
                    last edited by 19 Jul 2017, 20:00

                    gotcha, you mean bug SU-35701.

                    john

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

                    1 Reply Last reply Reply Quote 0
                    • D Offline
                      Dan Rathbun
                      last edited by 24 Jul 2017, 21:27

                      Let us know if any of the suggestions work.

                      I'm not here much anymore.

                      1 Reply Last reply Reply Quote 0
                      • medeekM Offline
                        medeek
                        last edited by 10 Sept 2017, 01:30

                        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.

                        Nathaniel P. Wilkerson PE
                        Medeek Engineering Inc
                        design.medeek.com

                        1 Reply Last reply Reply Quote 0
                        • medeekM Offline
                          medeek
                          last edited by 10 Sept 2017, 01:41

                          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:

                          # 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()
                          

                          Nathaniel P. Wilkerson PE
                          Medeek Engineering Inc
                          design.medeek.com

                          1 Reply Last reply Reply Quote 0
                          • D Offline
                            driven
                            last edited by 10 Sept 2017, 20:28

                            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

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

                            1 Reply Last reply Reply Quote 0
                            • medeekM Offline
                              medeek
                              last edited by 11 Sept 2017, 13:22

                              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:

                              favicon

                              (design.medeek.com)

                              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/sketchup/medeek_truss_ext.rbz

                              Nathaniel P. Wilkerson PE
                              Medeek Engineering Inc
                              design.medeek.com

                              1 Reply Last reply Reply Quote 0
                              • D Offline
                                driven
                                last edited by 11 Sept 2017, 19:00

                                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...

                                /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

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

                                1 Reply Last reply Reply Quote 0
                                • medeekM Offline
                                  medeek
                                  last edited by 12 Sept 2017, 17:06

                                  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.

                                  Nathaniel P. Wilkerson PE
                                  Medeek Engineering Inc
                                  design.medeek.com

                                  1 Reply Last reply Reply Quote 0
                                  • medeekM Offline
                                    medeek
                                    last edited by 15 Sept 2017, 01:36

                                    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'
                                    

                                    Nathaniel P. Wilkerson PE
                                    Medeek Engineering Inc
                                    design.medeek.com

                                    1 Reply Last reply Reply Quote 0
                                    • medeekM Offline
                                      medeek
                                      last edited by 15 Sept 2017, 01:37

                                      The error codes posted above.

                                      Nathaniel P. Wilkerson PE
                                      Medeek Engineering Inc
                                      design.medeek.com

                                      1 Reply Last reply Reply Quote 0
                                      • D Offline
                                        Dan Rathbun
                                        last edited by 17 Sept 2017, 19:29

                                        @medeek said:

                                        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.

                                        I'm not here much anymore.

                                        1 Reply Last reply Reply Quote 0
                                        • medeekM Offline
                                          medeek
                                          last edited by 17 Sept 2017, 20:28

                                          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?

                                          Nathaniel P. Wilkerson PE
                                          Medeek Engineering Inc
                                          design.medeek.com

                                          1 Reply Last reply Reply Quote 0
                                          • 1
                                          • 2
                                          • 1 / 2
                                          • First post
                                            Last post
                                          Buy SketchPlus
                                          Buy SUbD
                                          Buy WrapR
                                          Buy eBook
                                          Buy Modelur
                                          Buy Vertex Tools
                                          Buy SketchCuisine
                                          Buy FormFonts

                                          Advertisement