Example of web dialogue for Ruby

Developers Ruby API
, , ,
1

where to find. Simple examples for those starting out.

2

I don’t have much knowledge about coding stuff but this might help: OnScreen GUI Toolkit
Also check this out: SketchUp WebDialogs - The Lost Manual

3

It’s tough to get started. I worked with @slbaumgartner on a couple for the revised Angular Dimension 2 plugin, now on SketchUcation plugin store.

It is still my intention to try to write a tutorial on our (mainly Steve’s) experience, but I’ve been busy for some weeks on another project.

The really hard part is getting your head round how Ruby and JavaScript talk to each other, and how (on Mac anyway, and for new HTML dialogues, also on Windows) they do so asynchronously.

You might look at the code for that plugin. Download it from SketchUp Plugins | PluginStore | SketchUcation

I wrote the prototype Web Dialogue Settings form, with generic field names (field1, field2, …, field1label, field2label,…, field1title,field2title, etc.) in such a way that it would be partly reusable.

Steve handled all the JS and Ruby functions that talk to each other. They cope with several tricky things:

  • some users have comma as a decimal separator, some a full stop/period
  • both metric and imperial dimensions, including fractional inches
  • field validation for format or range, again in both imperial and metric units
  • encoding and decoding the passed strings, which can have embedded single AND double quotes in the same field value, if using imperial units
  • multi-language support

Hope that may give you some clues to get started. Some of it may be more than you need.

Look at:

  • the HTML, CSS, and JS code for the Settings dialogue
  • the Ruby code for the SU end of the communication
  • the method for calling a Help page
  • the multi-language support built in
1 Like
4

To get your dialog really feel like a dialog the CSS2 OS styles is your friend: How to Use Operating System Styles in CSS - SitePoint. This easily allows you to have the same font and colors as other dialogs in SketchUp.

Also using tables or table-display css can help you organize the content of the form. In SketchUp’s native dialogs the labels and inputs are always nicely lined up. You can put all the checboxes, radio buttons and “Text box:” label in one, right-aligned, column and the checkbox and radio button labels, as well as the text input in one left-align column.

2 Likes
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.