专栏首页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('视屏'); 

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 3D建模之建筑建模工作流程

      我们都知道建模是为了研究某种现实或事物而建立相应的模型。但在thingjs开发平台来说,建模是为了让可视化更好展现。每个工程师的建模水平不同,做出来的模型也...

    要不要吃火锅
  • 物联网可视化领域,如何将图表数据与三维场景进行交互?

    随着时代的发展,人们对于事物的处理方式发生了巨大改变,从书信交流到如今视频通话,人们日常生活中的交流方式也发生了改变,尤其是人们对于图像的接受...

    要不要吃火锅
  • 3D可视化应用开发(webgl方向)到底有多难?

    作为一个前端开发工程师,你是不是已经习惯了敲代码,写页面,修BUG,这一点毫无争议,这是工作性质决定的,就像运动员每天都要高强度训练一样。

    要不要吃火锅
  • ASP.NET Core 3.0 原生DI拓展实现IocManager

    昨天.NET Core 3.0正式发布,创建一个项目运行后发现:原来使用的Autofac在ConfigureServices返回IServiceProvider...

    梁规晓
  • 通俗易懂详解Java代理及代码实战

    代理模式是Java常用的设计模式之一,实现代理模式要求代理类和委托类(被代理的类)具有相同的方法(提供相同的服务),代理类对象自身并不实现真正的核心逻辑,而是...

    阿豪聊干货
  • JDK SPI 机制

    最早看到 SPI 这个机制是在 dubbo 实现 中,最近发现原来也不是什么新东西,竟然就是 JDK 中内置的玩意,今天就来一探究竟,看看它到底是什么玩意!

    JMCui
  • 安装完CentOS7 如何启用网络连接

    VirtualBox下安装好CentOS默认是没有启用网络连接的,我们需要手动启用,方法如下:

    飞奔去旅行
  • 设计模式(五)——装饰器

    在装饰模式中, 必然有一个最基本、 最核心、 最原始的接口或抽象类充当 Component抽象构件。

    小森啦啦啦
  • MyBatis注解开发

    指的是MyBatis中SqlSession对象的缓存,当我们执行查询之后,查询的结果会同时存入到SqlSession为我们提供一块区域中。

    用户3112896
  • ”万丈高楼平地起“——如何从“建筑师”角度打造【装饰者设计模式】

    它基于字符流(InputStream/OutputStream) 和 字节流(Reader/Writer)作为基类,下面画出InputStream、Reader...

    须臾之余

扫码关注云+社区

领取腾讯云代金券