Help moving from Inputbox to WebDialog

Developers Ruby API
1

So far i have been using inputboxes to pass values from the user to the script. but with the limits of the inputbox,I have decided to move to using the WebDialog.

not to embed a webpage. but to make more user friendly, organized dialogs to pass values.

However i do not know how to handle the values passed in the html form. do i need to learn javascript?
or can ruby handle it all? if so how? any help getting pointed in the right direction is appreciated :slight_smile: Thanks

1 Like
2

For what I understood, you just wanna pass value from webdialog to your script Ruby:

You gonna need 3 steps:
1 - Add action_callback to web_dialog
2 - A method in ruby side
3 - A js to call this method

1:

@dialog = UI::WebDialog.new("My Title", false, "my_key", 1, 1, 1, 1, false)
@dialog.set_size(510, 380)
@dialog.set_file File.dirname(__FILE__) + "/web_dialog/my_web_dialog.html"
@dialog.add_action_callback("my_ruby_method_to_js_call") {|dialog, param| my_ruby_method param.to_s }
@dialog.show

2:

def my_ruby_method(params)
  #here you have your params from web_dialog
end

3:

function my_js_method(){
  window.location = 'skp:my_ruby_method_to_js_call@my_params';
}

<button onclick="my_js_method()">Send to Ruby</button>

Documentation: Homepage | SketchUp Developer

3

You should not use the “skp:” protocol as it is still shown in the API documentation. It is limited, low-level and leads (especially newbies) to bad and hardly maintainable code. It’s not forbidden, but really, don’t use it, save your efforts and time and use an existing library that wraps a more comfortable function around it.

If you still haven’t started with WebDialogs, you are in a perfect position not to start with “skp:” at all.

If you have no experiences with JavaScript and just want a simple, but native/good looking UI that is better than inputbox, then the ideal solution is for example the SKUI (SketchUp UI) library. Download it, embed it into your project and you can generate WebDialogs purely with Ruby.

1 Like
4

Well, that’s a good advice, good to know.

5

@Aerilius, is there another way to work with web_dialog without being with SKUI? And not using skp: protocol?

6

The skp: protocol should at least be wrapped in a function (to which you pass the callback name and parameters as arguments), which will already (slightly) decouple your code from the implementation that is inside the function, and improve your plugin’s design.

There have been numerous efforts to create solution to wrap the skp: into a library (can be found in many plugins), similar to what SKUI does. At the moment there is not (yet) a reusable stand-alone solution.

1 Like
7

Just applied webdialog few times, for now on I’ll use SKUI. Thanks for advice, sorry @bckwdsmn for my bad reply.

8

Thanks guys! that helps a lot pointing me in the right direction.

Do you know if there is a way to change the WebDialog from using ‘Explorer’ to using ‘Chrome’ or ‘Firefox’?

I’m having JS problems and wondering if its because of the WebDialog browser

9

I recommend anyone getting started with WebDialogs to have a look at this repo’s Wiki: GitHub - thomthom/sketchup-webdialogs-the-lost-manual: Collection of unofficial documentation of SketchUp's WebDialog class.

10

Afraid not - embedded web controls are not hot-swappable. We’d love to use something other than the system web engine, but it’s far from trivial.

As for you JS problems, what problems is that?

11

So i’m no good at JS, but i was using a JS book i have. This is the code in the .js file and the .html file

add-content.js is:

var today = new Date();
var hourNow = today.getHours();
var greeting;

if (hourNow > 18) {
    greeting = 'Good Evening';
} else if (hourNow > `12) {
    greeting = 'Good Afternoon';
} else if (hourNow > 0) {
    greeting = 'Good Morning';
} else {
    greeting = 'Welcome';
}

document.write('<h3>' + greeting + '<h3>');

and the add-content.html is:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of Page</title>
    <link rel="stylesheet" href="css/style.css" /> 
  </head>
  <body>
    <h1> Title on Page </h1>
    <script src="add-content.js"></script>
  </body>
</html>

So the text from the js file wont show up, but any html will

12

maybe this ` symbol before 12 is broken js file?

1 Like