I have taken the Vue example one step further and used it to convert 3 different user entered lengths. It is a bit complicated but works. I’m sharing it because it is more realistic that you would want to convert multiple lengths to decimal for processing in javascript.
In this first version I use number variables in the logic in the js function convertUserInput2Decimal to pick the HTML elements/attributes bound to Vue values and in the second I use strings.
Using number variables
# encoding: UTF-8
module DezmoFMSTest
extend self
def to_locale_string( string )
string.tr(',', '.').tr('.', Sketchup::RegionalSettings::decimal_separator)
end
def create_dialog
options = {
:dialog_title => "DezmoFMSTest",
:width => 400,
:height => 400,
:left => 100,
:top => 100
}
dialog = UI::HtmlDialog.new(options)
dialog.set_file(File.dirname( __FILE__ ) + "/test_vue_number_logic.html")
dialog
end
def add_callbacks
@dialog.add_action_callback('parseHtmlText') {|_context, user_length, w_h_d_dim_str|
puts"user_length is #{user_length}"
puts"w_h_d_dim_str is #{w_h_d_dim_str}"
text = to_locale_string( user_length.to_s )
begin
length_number = text.to_l
raise ArgumentError if length_number == 0.to_l
float_number = length_number.to_f
js11 = float_number ? JSON.pretty_generate(float_number) : 'null'
js12 = w_h_d_dim_str ? JSON.pretty_generate(w_h_d_dim_str) : 'null'
@dialog.execute_script("convertUserInput2Decimal(#{js11}, #{js12})")
rescue ArgumentError
float_number = "Please enter valid length > 0"
js11 = float_number ? JSON.pretty_generate(float_number) : 'null'
js12 = JSON.pretty_generate(4)
puts"there is an error and float_number is #{float_number}"
puts"there is an error and js11 is #{js11}"
puts"there is an error and js12 is #{js12}"
@dialog.execute_script("convertUserInput2Decimal(#{js11}, #{js12})")
end
}
end
def show_dialog
@dialog = create_dialog()
add_callbacks()
@dialog.show
end
end
DezmoFMSTest.show_dialog
<html>
<head>
<script src="../vendor/vue.js"></script>
</head>
<body>
<div id="app">
<template>
<h1>{{ name }}</h1>
<div id="example">
Height: <input id="id1" v-model="user_height" placeholder="type height" v-on:change="userHeightToDecimal();">
<p>{{formatted_height}}</p>
Width: <input id="id1" v-model="user_width" placeholder="type width" v-on:change="userWidthToDecimal();">
<p>{{formatted_width}}</p>
Depth: <input id="id1" v-model="user_depth" placeholder="type depth" v-on:change="userDepthToDecimal();">
<p>{{formatted_depth}}</p>
</div>
</template>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
name: "My Little Test...",
user_height: '',
user_width: '',
user_depth: '',
formatted_height: '',
formatted_width: '',
formatted_depth: '',
},
methods: {
userHeightToDecimal: function() {
sketchup.parseHtmlText(this.user_height, 1);
},
userWidthToDecimal: function() {
sketchup.parseHtmlText(this.user_width, 2);
},
userDepthToDecimal: function() {
sketchup.parseHtmlText(this.user_depth, 3);
},
}
});
function convertUserInput2Decimal(float_number, w_h_d_dim_str) {
console.log("in convertUserInput2Decimal and w_h_d_dim_str is " + w_h_d_dim_str)
switch (w_h_d_dim_str){
case 1:
app.formatted_height = float_number;
break;
case 2:
app.formatted_width = float_number;
break;
case 3:
app.formatted_depth = float_number;
break;
default:
alert("Please enter a valid length > 0");
}
}
</script>
</body>
</html>
Strings version
# encoding: UTF-8
module DezmoFMSTest
extend self
def to_locale_string( string )
string.tr(',', '.').tr('.', Sketchup::RegionalSettings::decimal_separator)
end
def create_dialog
options = {
:dialog_title => "DezmoFMSTest",
:width => 400,
:height => 400,
:left => 100,
:top => 100
}
dialog = UI::HtmlDialog.new(options)
dialog.set_file(File.dirname( __FILE__ ) + "/test_vue_string_logic.html")
dialog
end
def add_callbacks
@dialog.add_action_callback('parseHtmlText') {|_context, user_length, w_h_d_dim_str|
puts"user_length is #{user_length}"
puts"w_h_d_dim_str is #{w_h_d_dim_str}"
text = to_locale_string( user_length.to_s )
begin
length_number = text.to_l
raise ArgumentError if length_number == 0.to_l
float_number = length_number.to_f
js11 = float_number ? JSON.pretty_generate(float_number) : 'null'
js12 = w_h_d_dim_str ? JSON.pretty_generate(w_h_d_dim_str) : 'null'
@dialog.execute_script("convertUserInput2Decimal(#{js11}, #{js12})")
rescue ArgumentError
float_number = "Please enter valid length > 0"
js11 = float_number ? JSON.pretty_generate(float_number) : 'null'
js12 = w_h_d_dim_str ? JSON.pretty_generate(w_h_d_dim_str) : 'null'
puts"there is an error and float_number is #{float_number}"
puts"there is an error and js1 is #{js1}"
@dialog.execute_script("convertUserInput2Decimal(#{js11}, #{js12})")
end
}
end
def show_dialog
@dialog = create_dialog()
add_callbacks()
@dialog.show
end
end
DezmoFMSTest.show_dialog
<html>
<head>
<script src="../vendor/vue.js"></script>
</head>
<body>
<div id="app">
<template>
<h1>{{ name }}</h1>
<div id="example">
Height: <input id="id1" v-model="user_height" placeholder="type height" v-on:change="userHeightToDecimal();">
<p>{{formatted_height}}</p>
Width: <input id="id1" v-model="user_width" placeholder="type width" v-on:change="userWidthToDecimal();">
<p>{{formatted_width}}</p>
Depth: <input id="id1" v-model="user_depth" placeholder="type depth" v-on:change="userDepthToDecimal();">
<p>{{formatted_depth}}</p>
</div>
</template>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
name: "My Little Test...",
user_height: '',
user_width: '',
user_depth: '',
formatted_height: '',
formatted_width: '',
formatted_depth: '',
},
methods: {
userHeightToDecimal: function() {
sketchup.parseHtmlText(this.user_height, 'height');
},
userWidthToDecimal: function() {
sketchup.parseHtmlText(this.user_width, 'width');
},
userDepthToDecimal: function() {
sketchup.parseHtmlText(this.user_depth, 'depth');
},
}
});
function convertUserInput2Decimal(float_number, dim_str) {
console.log("in convertUserInput2Decimal and dim_str is " + dim_str)
switch (dim_str){
case 'height':
app.formatted_height = float_number;
break;
case 'width':
app.formatted_width = float_number;
break;
case 'depth':
app.formatted_depth = float_number;
break;
default:
alert("Please enter a valid length > 0");
}
}
</script>
</body>
</html>
With apologies, this is my 3rd edit of this post.