SketchUp Ruby can interact with HTML inside Instructor

Developers Ruby API
1

I made a demo about interactive between Ruby SketchUp and HTML inside Instructor. This will bring ability to dock your extensions into a Tray. How do you think?

1 Like
2

I like it. Code? Snippet?

(Moved to right category of the forum :wink: )

1 Like
3

Thank you.

I used a simple trick with “Local Storage” as a bridge between 2 HTML dialogs (one from Instructor, one from UI::HtmlDialog). In every dialog using “addEventListener” to watch change of keys we want in Local Storage, so they can connect both way.

Here’s my extension in action.

z4707904309982_e8bffa9d9d434cbccb786b44319e7edc

1 Like
4

Never used Local Storage, and don’t get what the bridge means in tat regards, but if you say it is simple then it should be like that.

1 Like
5

The bridge is a HTML Dialog created by main.rb (for example). It will receive data from Ruby with “execute_script(command)” then save command to Local Storage.

The bridge also listens change from Local Storage to get values from Instructor Dialog then push to SketchUp.

<html>
  <head>
    <title>This is "bridge" created by main.rb</title>
  </head>
  <body>
    <script>
      function createButton(value) {
        console.log("Received from SketchUp: ", value);
        localStorage.setItem("sketchup", value);
      }
      // LISTEN DATA FROM INSTRUCTOR VIA LOCAL STORAGE
      window.addEventListener("storage", function (event) {
        if (event.key === "instructor") {
          const value = localStorage.getItem("instructor");

          sketchup.ready(value);

          // Clear Local Storage after get value
          localStorage.removeItem("instructor");
        }
      });
    </script>
  </body>
</html>
1 Like
6

I think that Instructor pages were never meant for this. They are meant for tool help.

Yes, it was always clear that we could have interactive Instructor pages whilst a custom tool is active.

But as Neil has said, we need a native way for the users to “dock” HTML dialogs into the tray of their choice.

I made the argument to @ChrisFullmer that it need not even be exposed to the API. There could be a little dock icon on the dialog caption bar that allows the user the choice of docking and undocking HTML dialogs.

There are challenges however. HTML dialogs can have minimum widths which might affect the widths of the user’s tray(s). It may be nice for an extension to know whether or not the HTML dialog is docked or not. (Ie, Boolean query method.)