SketchUp can open Web Dialog instance, which is a browser window that is opened within SketchUp.It is possible to make calls from SketchUp to web page or from web page to SketchUp using JavaScript.In these examples Java Script communicates with Ruby. Document files can be stored in the SketchUp plugin folder. They can also be launched via the Ruby console.Data can be shared between Java Script and Ruby. One can utilized Ruby Api.
It provides two mechanisms.
A. One can define a Ruby method that a WebDialog can call.
WebDialog.add_action_callback()
B. One can send data from Ruby to JavaScript.
WebDialog.execute_script()
Creating communication between Ruby on Rails and JavaScript
Creating JavaScript and Ruby communication between Nextselect.rb and Nextselect.html
1. Creating the Web - Dialog instance
my_thi_dialog = UI::WebDialog.new("Multi Actions", false, "Selection Info", 400, 300, 400, 200, true)
2. Creating the communication ( Ruby is expecting a call from JavaScript )
my_thi_dialog.add_action_callback("get_data") do |web_dialog,action_name
( * Java Script from HTML - site )
By Using the skp:callback_method_name method we can invoke the callback method from our web dialog
( Message from Nextselect.html
<script>
function callRuby(actionName) {
query = 'skp:get_data@' + actionName;
window.location.href = query;
} )
Note * Data is sent down to Ruby as a single string. Data is passed via the window.location bar and there is a length limit of 2038 characters.
3. Filepath is the path to the html document
my_thi_dialog.set_file("C:/Program Files/SketchUp/SketchUp 2017/Tools/Nextselect.html")
4. Showing Nextselect.html file
my_thi_dialog.show()
Web Page Request: When you want to call the SketchUp API from the web page, you typically make a request to the URL specified by the data attribute on the <script> tag. For example:
<input type="button" value="Call with AJAX">
This will trigger an AJAX call that sends data to the SketchUp server.
Server-Side Handling: The web page then processes this request, either by calling a JavaScript function or directly interpreting the data as it comes in. This is where AJAX's response handling mechanism kicks in.
Response Handling:
HTTP Status Codes: The server might return an HTTP status code indicating success (e.g., 200 OK), which indicates that the request was successful and the data has been received.
Data Returned: If a successful response is returned, you can access the data stored in the web page as if it were an HTML element or a JavaScript variable. For example:
<script>
var response = JSON.parse(data);
// Now you can work with the 'response' object, e.g., alert(response[0]);
</script>
Error Handling: The server might return an HTTP status code indicating an error (e.g., 404 Not Found, 500 Internal Server Error), which indicates that there was a problem with the request or the data.
Response Content Type: The response body can be in different formats, such as JSON, XML, or plain text. You handle these differently depending on what kind of data you are working with.
Server-Side Processing: After making an AJAX call to the SketchUp server, the web page might need to perform additional processing within its script block. This could involve fetching more data from the server, updating a UI element (like a map or a viewport), or logging the request and response details.
User Interactions: Once the AJAX call is successful, you can interact with the data in the web page as needed. For example, if you are using JavaScript to display the location on a map, you might fetch the current coordinates from SketchUp and update the UI accordingly.
Benefits:
Scalability: This approach scales well for large-scale applications because it allows the web page to make requests in parallel with multiple users or processes.
Reusability: The JavaScript code can be reused across different parts of the web application, making development faster and more maintainable.
Security: AJAX makes your web application harder to intercept, as it does not expose sensitive data directly.
In summary, calling SketchUp from a web page is a simple yet powerful way to make small updates or display dynamic content without requiring direct JavaScript execution. The server-side handling involves making HTTP requests that can be handled by the browser's capabilities (e.g., parsing JSON), allowing for a more scalable and user-friendly approach compared to traditional client-side scripts.