Demo  |   文档  |   博客  |   支持库  |   论坛  |   关于  |   EN
  • 首页
  • 产品
  • 解决方案
  • 下载
  • 合作
  • TWAVER DOCUMENT CENTER
    • 开发指南 – TWaver Doodle
      • 产品概述
      • 场景编辑器
      • 机柜面板编辑器
      • 设备面板编辑器
      • 组件模板编辑器
92 views. Last update: March 22, 2016
  1. TWAVER DOCUMENT CENTER
  2. 开发指南 – TWaver Doodle
  3. 组件模板编辑器
Print

IN THIS PAGE

  • 1 功能介绍
  • 2 组成部份
    • 2.1 工具栏
    • 2.2 组件栏
    • 2.3 工作区
    • 2.4 属性框
  • 3 系统集成

功能介绍

组件模板编辑器是可视化修改组建属性、样式等信息的编辑工具。

组成部份

主要分为4个部分,上边为工具栏,左边为组件栏,中间为工作区,工作区右上角为设备属性框。如下图所示
modelEditor

工具栏

  • Import:导入模型数据。可以是JSON字符串,也可是JSON文件
    modelEditorImport
  • Export:导出模型数据。
    modelEditorExport

组件栏

显示make中注册的模型,类别为”基本模型”、”机柜模型”、”设备”和”板块”的所有模型。如何在make中注册设备,请参照make使用手册。

工作区

显示左边选中的组件或导入的组件3D视图。

属性框

显示当前选中组件可以编辑的属性。

系统集成

  1. 指定make路径
  2. 取得显示编辑器的容器jquery对象
  3. 实例化doodle.ModelEditor对象
  4. 调用importJsonObject方法导入数据
  5. 调用getJsonObject方法导出数据
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
        //指定make路径
        make.Default.path = './make/';
 
        //取得显示编辑器的容器jquery对象
        var parentView = $('.main');
 
        //实例化doodle.ModelEditor对象
        var modelEditor = window.modelEditor = new doodle.ModelEditor(parentView);
 
        //调用importJsonObject方法导入数据
        $('#import').click(function () {
            console.log('导入内容');
            importDialog.show();
        });
 
        //import json
        var importDialog = modelEditor.createImportDialog('Import JSON', 'json', function (text) {
            var object = JSON.parse(text);
            modelEditor.importJsonObject(text);
        });
 
        //调用getJsonObject方法导出数据
        $('#save').click(function () {
            var text = modelEditor.getJsonObject();
            if (!text) {
                alert("没有数据");
                return;
            }
            console.log(text);
            var content = "<div>导出数据:<br><textarea>" + text + "</textarea></div>";
            $(content).dialog({
                "title": "导出json",
                "width": 400,
                "height": 500
            });
        });
详细可以参考编辑器中modelEditor.js

92 views. Last update: March 22, 2016
Print