Example html dialog (suite)

ui::htmldialog

#44

Thanks Dan! That’s exactly what I was trying to say.


#45

What if someone needs to express a length in imperical units? A back quote is not the same as the ’ symbol.


#46

Where we are back at escaping, not replacing.


#47

Problem solved.
Very simply: I was passing the info to HTML with a text sub in rb. (an array)
That info was not in a good Javascript format.
Obviously the purpose of JSON (js object notation) is to format for js.
So added one line (.to_json) and pass this formatted info to HTML (text sub still). Bingo. !

Someday I will give another shot at ‘execute_script’. I get the rb part but not quite the html-js one.


#48

Obviously I replace it back on the other side !!


#49

And what if someone is writing a back tick? Does that become a single quote?


#50

I have a number of characters that are trapped - so the user can’t use them - or accidentally insert them.

There is no benefit in using back quotes or carets etc. when dealing with lengths or quantities. This strategy (at least for me) has resulted in very very few user issues.


#51

Perhaps it would help if you open the debug javascript console in the html dialog and try entering the string value your Ruby would pass to javascript. That is, in the Ruby console take the stuff in the argument to dialog.execute_script, assign it to a Ruby variable, and puts that variable (so you see the string after interpolation of #{}. Copy-paste the Ruby output into the javascript console and see what it does there. That’s the equivalent of what happens when you send it via execute_script.

If it isn’t valid javascript code you will see an error message. If it is valid, you can type additional javascript snippets to probe what you actually got.


#52

Thanks Steve,
In fact that is what I do. My lack of knowledge is no more with formats and units, it is with how or what to write in the HTML so it has the info sent from rb as a reference. I found clues in my readings, have to boil it down. I suspect this must be simple.


#53

Maybe you could help there: https://github.com/SketchUp/api-issue-tracker/issues/191#issuecomment-458677479


#54

You mean like WebDialog / HtmlDialog Tutorial using sketchup-bridge?


#55

Hum… Interesting indeed. !!
Some more reading for me.


#56

One more observation about HtmlDialog.
The ‘required’ input attribute does not seem to work when the dialog is called from rb.
I mean this code for example,

< input type=‘text’ id=‘thi’ value=‘t’ required>

opened in any browser will pop a message if the field is not filled.
Not from SketchUp. Or I’m missing something?


#57

required means it must be checked at some point of time (after all, the field is allowed to be empty before the user fills in something). By default, this is when the submit event is triggered on a form block element. If there is no form around the input, the browser does not know when the user input should be complete (and valid).


#58

W3Schools is a great place to learn more about HTML, Javascript, CSS, JQuery etc.

https://www.w3schools.com/


#59

required
Forgot to mention, the bit of code submitted as exemple was indeed extracted from a form that has a button to terminate input.
Can you have the warning display from a Htmldialog ?
Like it does from a browser?
fill%20field


#60

Yeah, been there a lot. This is where I got that ‘required’ bit.


#61

It seems in embedded Chromium the default validation GUI does not work properly.

w = UI::HtmlDialog.new({:dialog_title=>'Required test'})
w.set_html <<-HEREDOC
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  </head>
  <body>
    <form id="form1">
      <input type="number" id="input1" required />
      <input type="submit" id="button1" value="Ok" />
    </form>
    <script>
    var form = document.getElementById('form1');
    var input = document.getElementById('input1');
    var formButton = document.getElementById('button1');
    formButton.addEventListener('click', function (event) {
      console.log('Button click');
      // Validate either individual input elements with `required` or `pattern` attributes
      console.log(input.checkValidity());
      // or validate the whole form.
      console.log(form.checkValidity());
      // This should show the default validation GUI:
      input.reportValidity();
      // or
      form.reportValidity();
    });
    form.addEventListener('submit', function (event) {
      // Apparently the submit event is only triggered when all required form fields (if any) are valid.
      console.log('Form submit: ' + input.value);
      // Prevent default submit action which reloads page.
      event.preventDefault();
    });
    </script>
  </body>
</html>
HEREDOC
w.show

If you think it is worth it, you could do validation manually (iterate over input elements and check validity), then either:

  • mark these fields with a CSS class that highlights them (red etc.). Don’t forget to remove the CSS class as soon as input is changed and becomes valid.
  • add hidden messages (div, span) for each field and make them visible if the input field is invalid
  • use a popover or notification library to show the message.

See here for a simple tutorial:


#62

Will this work with SU 2017 ?


#63

I have been using it for 4 years, so yes.