|
HTML网页UI 在上一章节中，我们学习了消息输入对话框可以实现简单的人机交互 如果我们想要在SketchUp实现更为复杂，更为美观的界面，就需要使用HTML及javascript或者vue等技术。 在SketchUp中提供了两个创建HTML界面的接口 WebDialog与HtmlDialog WebDialog现在已经不推荐使用 HtmlDialog需要在SketchUp2017版本以上使用 这两个类的作用与方法几乎一样 这里我们就HTMLDialog进行讲解 0 1、HtmlDialog介绍
HtmlDialog类允许您用Ruby创建HTML对话框并与之交互。这是在SketchUp中生成复杂的嵌入式UI的最佳方法，但通常确实需要HTML和JavaScript专业知识。 如果您只是简单地向用户显示网站， 请考虑使用#openURL， 它将在默认浏览器中而不是SketchUp中的对话框中向用户显示网页。 创建方法： #initialize(properties) ⇒ HtmlDialog
这个方法用于创建一个新的Html界面 参数： properties（Hash）— 包含新创建对话框的初始属性的哈希。 哈希选项（properties）： ：dialog_title（字符串） ：preferences_key（字符串） ：scrollable（布尔值） ：resizable（布尔值）—默认值：true ：width（整数）—默认值：250 ：height（Integer）-默认值：250 ：left（整数）—默认值：0 ：top（整数）—默认值：0 ：min_width（整数）-默认值：0 ：min_height（整数）-默认值：0 ：max_width（整数）-默认值：-1 ：max_height（整数）-默认值：-1 ：style（整数）-默认值：UI :: HtmlDialog :: STYLE_DIALOG 在properties中:style有三种可选值：
UI::HtmlDialog::STYLE_DIALOG
UI::HtmlDialog::STYLE_WINDOW UI::HtmlDialog::STYLE_UTILITY
在SketchUp中一般用默认的就行
代码示例： dialog = UI::HtmlDialog.new(
{
:dialog_title => "Dialog Example",
:preferences_key => "com.sample.plugin",
:scrollable => true,
:resizable => true,
:width => 600,
:height => 400,
:left => 100,
:top => 100,
:min_width => 50,
:min_height => 50,
:max_width =>1000,
:max_height => 1000,
:style => UI::HtmlDialog::STYLE_DIALOG
})
dialog.set_url("http://www.sketchup.com")
dialog.show
注意： 在SketchUp 2019之前，如果还存在:preference_key，则将忽略提供的:width和:height。要变通解决此错误，请在初始化对话框后使用#set_size。 0 2、HtmlDialog实战 上一章节我们用inputbox方法做了个简单的UI 现在我们用html来制作它 先来看一下效果： 在这部分中重点在于js与ruby后台的通信 js传值代码： sketchup.confirm(data_arr); //数据传输到ruby后台
ruby接受数据代码： dialog.add_action_callback("confirm") { |action, params|
# param即js传过来的值
create_cube(params)
}
上面主要通过confirm标识来通信，所以一定要保证前后端这个标识一致
完整代码 cube.html代码：
<html>
<head>
<meta charset="UTF-8"/>
<title>立方体工具title>
<style>
body{
background-color: #f0f0f0;
width: 230px;
height: 200px;
}
style>
head>
<body>
<div>
<div>长度：<input id="cd" type="text" value="1000">div><br/>
<div>宽度：<input id="kd" type="text" value="1000">div><br/>
<div>高度：<input id="gd" type="text" value="1000">div><br/>
<div>材质：
<select id="cz">
<option value="red">redoption>
<option value="yellow">yellowoption>
<option value="purple">purpleoption>
select>
div>
div>
<div style="float: right; margin-right: 10px;">
<input type="button" value="确定" onclick="confirm()">
<input type="button" value="取消" onclick="cancel()">
div>
body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js">script>
<script>
function confirm(){
var cd = $("#cd").val();
var kd = $("#kd").val();
var gd = $("#gd").val();
var cz = $("#cz option:selected").text()
var data_arr = [cd, kd, gd, cz]
sketchup.confirm(data_arr); //数据传输到ruby后台
}
function cancel(){
sketchup.cancel();
}
script>
html>
cube.rb代码：
class Cube
def self.create_cube(input)
model = Sketchup.active_model
model.start_operation('Create Cube', true)
# 创建信息输入框
#
if input
vue = [input[0].to_f.mm,input[1].to_f.mm,input[2].to_f.mm]
v = vue.find{|v| v if v==0}
# 判断输入值是否有效，messbox提示
res = UI.messagebox("在输入的长、宽、高中存在不合法数值", MB_OK) if v
return if res
group = model.active_entities.add_group
entities = group.entities
points = [
Geom::Point3d.new(0, 0, 0),
Geom::Point3d.new(input[0].to_f.mm, 0, 0),
Geom::Point3d.new(input[0].to_f.mm, input[1].to_f.mm, 0),
Geom::Point3d.new(0, input[1].to_f.mm, 0)
]
face = entities.add_face(points)
face.reverse! unless face.normal.samedirection? Z_AXIS
face.pushpull(input[2].to_f.mm)
group.material = input[-1]
end
model.commit_operation
end
def self.create_dialog
dialog = UI::HtmlDialog.new(
{
:dialog_title => "立方体工具",
:preferences_key => "",
:scrollable => true,
:resizable => true,
:width => 260,
:height => 260,
:left => 100,
:top => 100,
:min_width => 50,
:min_height => 50,
:max_width =>1000,
:max_height => 1000,
:style => UI::HtmlDialog::STYLE_DIALOG
})
dialog.set_file File.join(File.dirname(__FILE__), 'cube_ui/cube.html')
dialog.show
dialog.add_action_callback("confirm") { |action, params|
# params即js传过来的值
create_cube(params)
}
dialog.add_action_callback("cancel"){
dialog.close
}
end
end
这只是一个简单的demo，有了HtmlDialog方法可以做更复杂更漂亮的操作界面。 与本文关系不大 这章节更新的比较慢，因为最近很忙。恰好最近在做一个项目，看效果： 这个效果与立体工具插件无关，在这主要告诉大家在SketchUp中界面可以很丰富，主要是vue实现 感兴趣的小伙伴点击关注
往期推荐
| 
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜