万物可视之智能可视化管理平台

原创

要不要吃火锅

修改于 2019-12-25 11:12:49

1.4K0

修改于 2019-12-25 11:12:49

文章被收录于专栏：3D可视化3D可视化

　 IT可视化运维管理平台

　　Tarsier是优锘科技推出的一款可视化+大数据的IT运维管理产品，针对当前业务环境和技术环境下企业IT运维面临的结构复杂、数据碎片、变化常态、机制板结等问题，Tarsier提供以可视化、场景化为核心理念的系列产品助力企业解决问题

　　ThingJS-人人都能用的3D平台

　　ThingJS是优锘科技开发的一套面向物联网应用的在线3D可视化应用开发及运营PaaS平台，以“ThingJS云视PaaS服务”形式面向广大物联网企业提供全生命周期在线3D可视化服务

2D/3D界面

ThingJS 是一个先进的 PaaS 开发平台，开发者可以方便、安全地基于云端的各种工具组件随时随地进行开发。

ThingJS 界面概述

为了便于开发者在ThingJS下进行界面开发，ThingJS 提供的界面体系结构目录如下：

上述ThingJS界面体系中，进行3D场景可视化的区域，我们定义为3D容器，如下图所示：

在3D“容器”内

提供了3D和2D的界面展示能力，如下图所示：

3D 界面

Marker：可以将图标、Canvas绘制的图片，展现在3D场景中或绑定在3D物体上。
WebView：可以将页面嵌入到3D场景中。

2D 界面

原生界面：用户可以使用js代码编写原生的界面，将dom元素插入到相应的节点中。
快捷界面库：内置各种组件模块，供用户进行拼接组装使用。
UIAnchor：可以将普通的2D界面“挂接”到某个3D物体对象上，使之随物体移动。

在3D“容器”外

提供通栏组件（如上通栏、侧通栏）。如果用户想基于 ThingJS 做一套独立的应用系统，可使用通栏组件作为系统级别的菜单。

3D 界面

ThingJS 主要提供 `Marker` 物体和 `WebView` 物体以支持 3D 空间界面。

Marker 物体

Marker 物体可以添加一个图片放置到你希望的位置，也可以将这个图片作为孩子添加到对象身上，随着对象一同移动。

例子 1：

 app.create({
    type: "Marker",
    offset: [0, 2, 0],
    size: [4, 4],
    url: "https://thingjs.com/static/images/warning1.png",
    parent: app.query("car01")[0]
});

参数：

type ：通知系统创建 Marker 物体；
offset ：设置自身坐标系下偏移量为[0, 2, 0]；
size ：设置 Marker 物体大小，也可以添单独数字如 4，等同于[4,4]，大小是以米计算的；
url ：图片的 url；
parent ：指定 Marker 的父物体；

运行结果见下图。Marker 默认是受距离远近影响，呈现近大远小的 3D 效果，也会在 3D 空间中实现前后遮挡。

例子 2：

app.create({
    type: "Marker",
    offset: [0, 8, 0],
    size: 2,
    keepSize: true,
    url: "https://thingjs.com/static/images/reminder.png",
    parent: app.query(".Building")[1]
});

参数：

keepSize：控制是否受距离远近影响，呈现近大远小的 3D 效果。如果设置 true，表示保持大小，不随距离近大远小，此时 size 的单位是屏幕的像素点；
offset ：设置自身坐标系下偏移量为[0, 2, 0]；
size ：设置 Marker 物体大小，也可以添单独数字如 4，等同于[4,4]，大小是以米计算的；
url ：图片的 url；
parent ：指定 Marker 的父物体；

运行结果见下图：

我们还可以使用 h5 的 canvas 手动创建动态图。

例子 3：

function createTextCanvas(text, canvas) {
    if (!canvas) {
        canvas = document.createElement("canvas");
        canvas.width = 64;
        canvas.height = 64;
    }

    const ctx = canvas.getContext("2d");
    ctx.fillStyle = "rgb(32, 32, 256)";
    ctx.beginPath();
    ctx.arc(32, 32, 30, 0, Math.PI * 2);
    ctx.fill();

    ctx.strokeStyle = "rgb(255, 255, 255)";
    ctx.lineWidth = 4;
    ctx.beginPath();
    ctx.arc(32, 32, 30, 0, Math.PI * 2);
    ctx.stroke();

    ctx.fillStyle = "rgb(255, 255, 255)";
    ctx.font = "32px sans-serif";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText(text, 32, 32);
    return canvas;
}

app.on('load', function (ev) {
    var marker = app.create({
        type: "Marker",
        offset: [0, 2, 0],
        size: 3,
        canvas: createTextCanvas('100'),
        parent: app.query('car02')[0]
    }).on('click', function (ev) {
        var txt = Math.floor(Math.random() * 100);
        ev.object.canvas = createTextCanvas(txt, ev.object.canvas)
    })
})

参数：

canvas: 接收 canvas 作为贴图显示

运行结果见下图，在 Marker 上点击时，会改变标记上的数字：

查看示例

WebView 物体

我们可以使用 WebView 物体，将其他网站或者页面的内容嵌到 3D 中。

例子 4：

 var webView01 = app.create({
    type: 'WebView',
    url: 'https://www.thingjs.com',
    position: [10, 13, -5],
    width: 1920 * 0.01, // 3D 中实际宽度 单位 米
    height: 1080 * 0.01, // 3D 中实际高度 单位 米
    domWidth: 1920, // 页面宽度 单位 px
    domHeight: 1080// 页面高度 单位 px
});

查看示例

2D html 界面

JS 编写原生界面

var template =
`<div style='position:absolute;left:20px;top:20px;padding: 8px;width:100px;text-align: center;background: rgba(0,0,0,0.5);'>
<p id="p1" style='color:white'>Hello World!</p>
<button style='margin:4px;padding:4px' onclick='changeLevel()'>Into Level</button></div>`;// 插入到 ThingJS 内置的 2D 界面 div 中$('#div2d').append($(template));

查看示例

ThingJS 为了让大家快速编写界面，我们提供一个“快捷界面库”，可快速创建界面。

UIAnchor

还有一个神奇的功能，即使是 2D html 界面，我们照样可以把它连接到 3D 物体上，跟随 3D 物体移动，我们使用 `UIAnchor` 物体来实现这个功能。

示例如下：

var uiAnchor = app.create({
    type: "UIAnchor",
    parent: app.query("car02")[0],
    element: document.getElementById("XXXX"),
    localPosition: [0, 2, 0],
    pivot: [0.5, 1]
});

参数：

element ：要绑定的页面的 element 对象
pivot ：指定页面的哪个点放到 localPosition 位置上，0.5 相当于 50%

查看示例

删除UIAnchor方法为：

uiAnchor.destroy();

注意事项：

删除后，其对应的 panel 也会被删除

显示和隐藏UIAnchor方法为：

uiAnchor.visible = true / false;

通过 js 编写的界面：

可以利用 UIAnchor 连接到 3D 物体上。

查看示例

也可以通过快捷界面库，创建 Panel 以 UIAnchor 的方式连接到物体上。

查看示例

快捷界面库

THING.widget 是一个支持动态数据绑定的轻量级界面库。

可通过界面库中的 Panel 组件创建一个面板，并可向该面板中添加文本、数字、单选框、复选框等其他组件。

效果如下：

创建面板

var panel = new THING.widget.Panel({
    // 设置面板样式
    template: 'default',
    // 角标样式
    cornerType: "none",
    // 设置面板宽度
    width: "300px",
    // 是否有标题
    hasTitle: true,
    // 设置标题名称
    titleText: "我是标题",
    // 面板是否允许有关闭按钮
    closeIcon: true,
    // 面板是否支持拖拽功能
    dragable: true,
    // 面板是否支持收起功能
    retractable: true,
    // 设置透明度
    opacity: 0.9,
    // 设置层级
    zIndex: 99
});

width：如果写百分比字符串则表示相对宽度（相对于3D容器的宽度）
template：目前，模板样式提供两个样式 default 和 default2，如下图:

cornerType: cornerType 是指角标样式，依次是:没有角标 none ，没有线的角标 noline ，折线角标 polyline ；依次见下图：

注意事项：

角标样式都不区分大小写

如果 panel 面板设置了关闭按钮则点击关闭按钮时会将面板设置为隐藏，如需再次打开该面板则调用 panel.visible = true; 显示面板即可。

查看示例

面板属性及方法介绍

// 获取面板标签
panel.domElement;

// 修改面板标题
panel.titleText='修改标题';

// 设置/获取面板相关属性
panel.visible = true / false;
panel.position = [10, 10];//设置panel面板的位置
panel.zIndex = 9;
panel.opacity = 0.5;

// 删除面板
panel.destroy();

面板事件

// 常用事件类型均支持
panel.on("click", callback);
// 'close'事件为面板关闭时触发
panel.on("close", callback);

面板中的数据可通过各组件实现双向绑定

var dataObj = {
    pressure: "0.14MPa",
    temperature: "21°C",
    checkbox: { 设备1: false, 设备2: false, 设备3: true, 设备4: true },
    radio: "摄像头01",
    open1: true,
    height: 10,
    maxSize: 1.0,
    iframe: "https://www.3dmomoda.com",
    progress: 1,
    img: "https://www.thingjs.com/guide/image/new/logo2x.png",
    button: false
};

逐条添加组件

var press = panel.addString(dataObj, 'pressure').caption('水压').isChangeValue(true);
var height = panel.addNumber(dataObj, 'height').caption('高度');
var maxSize = panel.addNumberSlider(dataObj, 'maxSize').step(0.25).min(1).max(10);
var open1 = panel.addBoolean(dataObj, 'open1').caption('开关01');
var radio = panel.addRadio(dataObj, 'radio', ['摄像头01', '摄像头02']);
var check = panel.addCheckbox(dataObj, 'checkbox').caption({ "设备2": "设备2(rename)" });
var iframe = panel.addIframe(dataObj, 'iframe').caption('视屏');
var img = panel.addIframe(dataObj, 'img').caption('图片');
var button = panel.addImageBoolean(dataObj, 'button').caption('仓库编号').url('https://www.thingjs.com/static/images/example/icon.png');

界面库可设置 `Caption` 的字体颜色:如下例所示：

var press = panel.addString(dataObj, 'pressure').caption("水压").isChangeValue(true);
var water = panel.addString(dataObj, 'temperature').caption("水温").isChangeValue(true);
var check = panel.addCheckbox(dataObj, 'checkbox').caption({ "设备2": "设备2(rename)" });
var open1 = panel.addBoolean(dataObj, 'open1').caption("开关01");
var height = panel.addNumber(dataObj, 'height').caption("高度");
var maxSize = panel.addNumberSlider(dataObj, 'maxSize').caption("maxSize").step(0.25).min(1).max(10);
var iframe = panel.addIframe(dataObj, 'iframe').caption('视屏');

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

图像处理

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

登录后参与评论

0 条评论

热度