I’ve taken the Vue instance one step additional and used it to transform 3 totally different consumer entered lengths. It’s a bit difficult however works. I’m sharing it as a result of it’s extra sensible that you’d wish to convert a number of lengths to decimal for processing in javascript.
On this first model I exploit quantity variables within the logic within the js perform convertUserInput2Decimal to select the HTML components/attributes certain to Vue values and within the second I exploit strings.
Utilizing quantity variables
# encoding: UTF-8
module DezmoFMSTest
prolong self
def to_locale_string( string )
string.tr(',', '.').tr('.', Sketchup::RegionalSettings::decimal_separator)
finish
def create_dialog
choices = {
:dialog_title => "DezmoFMSTest",
:width => 400,
:peak => 400,
:left => 100,
:prime => 100
}
dialog = UI::HtmlDialog.new(choices)
dialog.set_file(File.dirname( __FILE__ ) + "/test_vue_number_logic.html")
dialog
finish
def add_callbacks
@dialog.add_action_callback('parseHtmlText') {|_context, user_length, w_h_d_dim_str|
places"user_length is #{user_length}"
places"w_h_d_dim_str is #{w_h_d_dim_str}"
textual content = to_locale_string( user_length.to_s )
start
length_number = textual content.to_l
elevate 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 legitimate size > 0"
js11 = float_number ? JSON.pretty_generate(float_number) : 'null'
js12 = JSON.pretty_generate(4)
places"there may be an error and float_number is #{float_number}"
places"there may be an error and js11 is #{js11}"
places"there may be an error and js12 is #{js12}"
@dialog.execute_script("convertUserInput2Decimal(#{js11}, #{js12})")
finish
}
finish
def show_dialog
@dialog = create_dialog()
add_callbacks()
@dialog.present
finish
finish
DezmoFMSTest.show_dialog
<html>
<head>
<script src="https://boards.sketchup.com/t/need-to-process-numbers-in-js-in-a-htmldialog-but-js-doesnt-cope-with-sketchup-format-length-strings/vendor/vue.js"></script>
</head>
<physique>
<div id="app">
<template>
<h1>{{ title }}</h1>
<div id="instance">
Top: <enter id="id1" v-model="user_height" placeholder="kind peak" v-on:change="userHeightToDecimal();">
<p>{{formatted_height}}</p>
Width: <enter id="id1" v-model="user_width" placeholder="kind width" v-on:change="userWidthToDecimal();">
<p>{{formatted_width}}</p>
Depth: <enter id="id1" v-model="user_depth" placeholder="kind depth" v-on:change="userDepthToDecimal();">
<p>{{formatted_depth}}</p>
</div>
</template>
</div>
<script>
var app = new Vue({
el: '#app',
knowledge: {
title: "My Little Take a look at...",
user_height: '',
user_width: '',
user_depth: '',
formatted_height: '',
formatted_width: '',
formatted_depth: '',
},
strategies: {
userHeightToDecimal: perform() {
sketchup.parseHtmlText(this.user_height, 1);
},
userWidthToDecimal: perform() {
sketchup.parseHtmlText(this.user_width, 2);
},
userDepthToDecimal: perform() {
sketchup.parseHtmlText(this.user_depth, 3);
},
}
});
perform convertUserInput2Decimal(float_number, w_h_d_dim_str) {
console.log("in convertUserInput2Decimal and w_h_d_dim_str is " + w_h_d_dim_str)
swap (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 legitimate size > 0");
}
}
</script>
</physique>
</html>
Strings model
# encoding: UTF-8
module DezmoFMSTest
prolong self
def to_locale_string( string )
string.tr(',', '.').tr('.', Sketchup::RegionalSettings::decimal_separator)
finish
def create_dialog
choices = {
:dialog_title => "DezmoFMSTest",
:width => 400,
:peak => 400,
:left => 100,
:prime => 100
}
dialog = UI::HtmlDialog.new(choices)
dialog.set_file(File.dirname( __FILE__ ) + "/test_vue_string_logic.html")
dialog
finish
def add_callbacks
@dialog.add_action_callback('parseHtmlText') {|_context, user_length, w_h_d_dim_str|
places"user_length is #{user_length}"
places"w_h_d_dim_str is #{w_h_d_dim_str}"
textual content = to_locale_string( user_length.to_s )
start
length_number = textual content.to_l
elevate 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 legitimate size > 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'
places"there may be an error and float_number is #{float_number}"
places"there may be an error and js1 is #{js1}"
@dialog.execute_script("convertUserInput2Decimal(#{js11}, #{js12})")
finish
}
finish
def show_dialog
@dialog = create_dialog()
add_callbacks()
@dialog.present
finish
finish
DezmoFMSTest.show_dialog
<html>
<head>
<script src="https://boards.sketchup.com/t/need-to-process-numbers-in-js-in-a-htmldialog-but-js-doesnt-cope-with-sketchup-format-length-strings/vendor/vue.js"></script>
</head>
<physique>
<div id="app">
<template>
<h1>{{ title }}</h1>
<div id="instance">
Top: <enter id="id1" v-model="user_height" placeholder="kind peak" v-on:change="userHeightToDecimal();">
<p>{{formatted_height}}</p>
Width: <enter id="id1" v-model="user_width" placeholder="kind width" v-on:change="userWidthToDecimal();">
<p>{{formatted_width}}</p>
Depth: <enter id="id1" v-model="user_depth" placeholder="kind depth" v-on:change="userDepthToDecimal();">
<p>{{formatted_depth}}</p>
</div>
</template>
</div>
<script>
var app = new Vue({
el: '#app',
knowledge: {
title: "My Little Take a look at...",
user_height: '',
user_width: '',
user_depth: '',
formatted_height: '',
formatted_width: '',
formatted_depth: '',
},
strategies: {
userHeightToDecimal: perform() {
sketchup.parseHtmlText(this.user_height, 'peak');
},
userWidthToDecimal: perform() {
sketchup.parseHtmlText(this.user_width, 'width');
},
userDepthToDecimal: perform() {
sketchup.parseHtmlText(this.user_depth, 'depth');
},
}
});
perform convertUserInput2Decimal(float_number, dim_str) {
console.log("in convertUserInput2Decimal and dim_str is " + dim_str)
swap (dim_str){
case 'peak':
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 legitimate size > 0");
}
}
</script>
</physique>
</html>
With apologies, that is my third edit of this publish.
