What editor do you use? I use Notepad++. It’s free and open source.
I think you are using one of the WebDialog based Code Editor extensions.
I’m sorry (to the devs who made them) but I think they are more trouble then they are worth.
When I say paste into the Ruby Console, … I mean the native SketchUp Console.
The other consoles are extensions that can have bugs and warning messages that confuse new coders. I don’t use them when testing or developing as I do not wish to introduce any influences from outside my code.
If you have a separate .html file that you are using for your dialog, then you can paste it into it’s own code delimited block in a forum post, like so …
```html
<!-- html text goes here -->
```
And then post separate Ruby code in it’s block …
```ruby
# Ruby code goes here
```
… and javascript in it’s block …
```javascript
// javascript code goes here
```
… and, etc., etc.
You mean the location of a HTML <script> element ?
It can be in the <head> or within the <body> or after the <body>.
It is okay to have it before the <body>, usually within the <head> element, as long as it doesn’t refer to anything that will be defined later in the document whilst it loads.
Not so. I only pulled them from the <script> tag and showed using them via the Ruby console, to make the point that things need to happen in the correct order.
The main problem with your JS was that it was not being deferred until after the document (and all it’s elements were loaded and it’s data was loaded.)
To defer evaluation, you put your JS code into functions, and then make sure that these functions get called only when things are ready.
There are builtin JS events like body.onload and document.readystatechange. Examples …
EX-1. This JS event handler will call the Ruby dialog object’s "ready" action callback method.
// JavaScript
document.onreadystatechange = function () {
if (document.readyState === 'complete') {
// Call the Ruby side to tell it the dialog's
// webpage is completely rendered and ready:
sketchup.ready();
}
}
EX-2: This JS event handler is from an example I’m doing currently.
I inject into the dialog JS a hash of model properties (:name,:description,:tags) as a JS Object named “data” so it’s already there. At the top of my dialog.js file I have the data Object definition:
// JavaScript
// The values for these data properties will be
// replaced by using Ruby's format string replacement.
var data = {
name: "%{name}", description: "%{about}", tags: "%{tags}"
}
(There are more JS functions but they’d just distract from this example.)
Then in Ruby, I read the dialog.js file directly into a Ruby String …
# Ruby
# Get the JavaScript text.
def javascript
# Read the JavaScript "dialog.js" file:
File.read(File.join(__dir__,'dialog.js'))
end
… and then replace the text properties in the JS text with values from Ruby …
# Ruby
# Get the JavaScript text and replace the %{} parameters
# with the matching values in a properties hash:
js_code = javascript() % Hash[
:name, model.name,
:about, model.description,
:tags, model.tags
]
This snippet above is using the Ruby core String#% method, which is replacing the %{} parameters in the text returned by the javascript() method (shown above.) If it looks confusing perhaps if I simplify it a bit …
# Ruby
# The hash with replacement values:
properties = {
:name => model.name,
:about => model.description,
:tags => model.tags
}
# The javascript text before replacement:
js_code_before = File.read(File.join(__dir__,'dialog.js'))
# Replace the %{} parameters in the javascript text
# with values from the properties hash:
js_code_ready = js_code_before % properties
# The "js_code_ready" text is ready to be inserted into the HTML text:
I then repeat this above also with the HTML text, which itself has
embedded %{script}% and %{styles} replacement parameters …
# Ruby
# Get the HTML text and replace the %{} parameters with
# the matching values in a hash containing references
# to the text for the <style> and <script> elements:
html_text = html() % Hash[
:script, js_code_ready,
:styles, stylesheet()
]
(Sometimes I also do replacement into a CSS stylesheet file’s text.)
Now for this simple tutorial example, I instead could have stuffed the values directly into the HTML text elements where they’ll be editable by the user. But I wanted to show the use of a JS Object to hold the data because it can be passed as is, as a whole back to the SketchUp Ruby dialog object, and SU’s API will convert it to a Ruby hash.
Anyway … once the HTML text object is ready it is given to the dialog object and the dialog is shown so the webpage and it’s JavaScript loads …
# Ruby
# Now set the dialog's HTML to the complete text:
wdlg.set_html(html_text)
wdlg.show
Then when the body of the HTML document is done loading, the values from the “data” JS object are assigned to their corresponding edit control elements whose ids are modelName (an <input type="text"> element), descriptiveText and tags (which are <textarea> elements.)
// JavaScript
document.body.onload = function() {
modelName.value = data.name;
descriptiveText.value = data.description;
tags.value = data.tags;
}
At this point the dialog is ready for users to edit the properties displayed in the edit controls.
I already showed how EASY that is above in post 9.
But I’ll continue with snippets from my current tutorial project …
When the user edits one of the properties the JavaScript must react and take the value of the HTML element and stuff it back in the data object.
// JavaScript
// Edit Controls
var modelName = document.getElementById('model');
var descriptiveText = document.getElementById('description');
var tagsList = document.getElementById('tags');
modelName.onchange = function() {
data.name = this.value;
}
descriptiveText.onchange = function() {
data.description = this.value;
}
tagsList.onchange = function() {
data.tags = this.value;
}
NOTE: The JavaScript keyword
thisin each event handler function block refers to the object upon which the handler’s event was fired. So in the lastonchangeevent,thisrefers totagsList, which is avar(reference) that refers to the document’s HTML element whose ID is"tags".
Then when the user is satisfied, they can click the “Apply” button and the properties will be sent over to Ruby where they’ll be assigned to the model’s properties via API setter methods …
// JavaScript
// Buttons
var applyButton = document.getElementById('apply');
var cancelButton = document.getElementById('cancel');
applyButton.onclick = function() {
sketchup.receive_data(data);
// Let the Ruby side close the dialog after
// it processes the updated property values.
}
cancelButton.onclick = function() {
sketchup.close_dialog();
}
And on the Ruby side we’ve already attached the callbacks that will get called by the JavaScript side …
# Ruby
def attach_callbacks(dialog)
dialog.add_action_callback("receive_data") { |_unused, updates|
# The passed JS Object "data" is now a Ruby hash "updates":
updates.each do |key,value|
# Call the model's setter method for this
# key passing along the value to be set:
dialog.model.method("#{key}=").call(value)
end
# Close the dialog:
dialog.close
}
dialog.add_action_callback("close_dialog") { |_unused|
dialog.close
}
end
# Note: My code is actually using a dialog subclass that has it's
# "owner" model as an accessor instance variable. Ie: dialog.model()
My example property setting block works because I choose parameter names that are the same as the Ruby API model property method names. I could just as easily do …
# Ruby
dialog.add_action_callback("receive_data") { |_unused, updates|
# The passed JS Object "data" is now a Ruby hash "updates":
model = Sketchup.active_model
model.name= updates[:name]
model.description= updates[:description]
model.tags= updates[:tags]
# Close the dialog:
dialog.close
}
And that is how simple it is to send stuff back from the JS side to the Ruby side.
Well, the learning curve is certainly steep. I came to SketchUp and Ruby already certified in HTML, JavaScript and CSS, so I was way ahead of the game.