基于HTML5及WebGl下生成的json格式的工控SCADA风机叶轮旋转

Rocko 发布于2019-08-05 17:57 / 3032人阅读

摘要：你可能会好奇在代码中我们并没有提到这个标识，这个标识是在水泵的中设置的，关于扇叶的一个标识，我们获取到扇叶，然后设置其旋转。

突然有个想法，如果能把一些用到不同的知识点放到同一个界面上，并且放到一个盒子里，这样我如果要看什么东西就可以很直接显示出来，而且这个盒子一定要能打开。我用HT实现了我的想法，代码一百多行，这么少的代码能实现这种效果我觉得还是牛的。

demo地址： http://www.hightopo.com/demo/...

先来看看效果图：

var box = new ht.CSGBox();
dataModel.add(box);

用HT可以很轻易地实现这个盒子，在HT中封装了很多基础图元类型，我们经常用到的ht.Node也是其中一个，这样我们可以不用反复地写相同的代码来完成基础的实现。

这个例子中用的封装好的基础图元是ht.CSGBox，一个盒子模型，可以参考HT for Web 建模手册，我们在手册中可以看到，在CSGBox中我们只能操作这个盒子的各个面，如果你想要自己设置一些特殊的功能，只需要操作ht.Style（HT for Web 风格手册）即可。

要想实现在盒子上的一个面上添加贴图，我能想到的只有HT封装的ht.Default.setImage函数了。

我想你们都注意到了盒子上有模型化的水泵，上面有扇叶在旋转，那么这个水泵是怎么生成的呢？我用我们的2d编辑器写了一个水泵模型通过graphView.serialization(datamodel)将模型序列化成json格式的文件，然后在这边引用的时候我再调用graphView.deserialize(json)来将json文件导出成可视化的2d模型并设置animation动画，再立即刷新到这个水泵，否则就算设置了动画，水泵上的扇叶旋转也不会生效。

ht.Default.xhrLoad("displays/demo/pump.json", function(text){
    const json = ht.Default.parse(text);
    pumpDM.deserialize(json);
    var currentRotation = 0;
    var lastTime = new Date().getTime();

    setInterval(function(){
        var time = new Date().getTime();
        var deltaTime = time - lastTime;
        currentRotation += deltaTime * Math.PI / 180 * 0.3;
        lastTime = time;

        pumpDM.getDataByTag("fan1").setRotation(currentRotation);
        pumpDM.getDataByTag("fan2").setRotation(currentRotation);
        box.iv();
        // g3d.iv();这边也可以刷新g3d，但是局部刷新更省
        pumpGV.validateImpl();
    }, 10);
}, 10);

这个时候我不能把水泵的graphView和g3d都加到底层div上，并且我的意图是把水泵的graphView加到g3d中的CSGBox中的一面上，所以为了让水泵显示出来必须设置水泵所在的graphView的宽高，而这个宽高必须比我json画出来的图占的面积要大，不然显示不完整。如果想看这个宽高对显示的影响，可以自己改改看来玩玩。

pumpGV.getWidth = function() { return 600;}
pumpGV.getHeight = function(){ return 600;}
pumpGV.getCanvas().dynamic = true;//设置这个是为了让canvas能动态显示

这边还要特别说明一个函数getDataByTag(tagName)这个函数是获取标识号，在HT中tag属性是唯一标识，虽然HT中也有id，但是id是HT中Data类型对象构造时内部自动被赋予的一个id属性，可以通过data.getId()和data.setId(id)获取和设置，Data对象添加到DataModel之后不允许修改id值，可以通过dataModel.getDataById(id)快速查找Data对象。

一般我们建议id属性由HT自动分配，用户业务意义的唯一标示可存在于tag属性上，通过data.setTag(tag)函数允许任意动态改变tag值，通过dataModel.getDataByTag(tag)可查找到对应的Data对象，并支持通过dataModel.removeDataByTag(tag)删除Data对象。

你可能会好奇在代码中我们并没有提到“fan1”这个tag标识，这个标识是在水泵的json中设置的，关于扇叶的一个标识，我们获取到扇叶，然后设置其旋转。

echarts图表的显示也是很基础的，但是我们会发现，在将echarts图表添加进graphView中它的动画效果会不显示，所以我们首先要将这个echarts图表所在的图表的dynamic设置为true，即将其设置为动态：

function charts(option){
    var info = {
        canvas: document.createElement("canvas")
    };
    info.canvas.dynamic = true;//设置info.canvas为动态
    info.chart = echarts.init(info.canvas);
    info.chart.setOption(option);
    return info.canvas;
}

最后，只需要将这两个回传的canvas传入ht.Default.setImage中即可：

ht.Default.setImage("echart", charts(option));
ht.Default.setImage("pump", pumpGV.getCanvas());

ht.Default.drawImage函数生成新的图实际上就是在canvas上画图，所以我们只要把我们已经画好的canvas传到ht.Default.setImage就可以生成图片了。

混合云专线服务阿里云生成镜像的格式 json的解析格式基于HTML5的webrtc json格式的服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/60236.html

基于HTML5 WebGL实现 json工控风机叶轮旋转

摘要：你可能会好奇在代码中我们并没有提到这个标识，这个标识是在水泵的中设置的，关于扇叶的一个标识，我们获取到扇叶，然后设置其旋转。突然有个想法，如果能把一些用到不同的知识点放到同一个界面上，并且放到一个盒子里，这样我如果要看什么东西就可以很直接显示出来，而且这个盒子一定要能打开。我用HT实现了我的想法，代码一百多行，这么少的代码能实现这种效果我觉得还是牛的。 demo地址： http://...

LiveVideoStack 2019-08-05 17:56 评论0 收藏0
基于HTML5 Canvas 实现矢量工控风机叶轮旋转

摘要：开头，则返回值，其中代表的属性名。如果不匹配以上情况，则直接将类型作为对象的函数名调用，返回值作为参数值。之前在拓扑上的应用都是些静态的图元，今天我们将在拓扑上设计一个会动的图元——叶轮旋转。先看看最后我们实现的效果：http://www.hightopo.com/demo/... showImg(https://segmentfault.com/img/bVEmt0?w=1023...

Donne 2019-08-05 10:16 评论0 收藏0
HTML5 技术在风电、光伏等新能源领域的应用

摘要：随着新一轮工业革命兴起，应对气候变化日益成为全球共识，能源技术正在成为引领能源产业变革实现创新驱动发展的源动力。随着新一轮工业革命兴起，应对气候变化日益成为全球共识，能源技术正在成为引领能源产业变革、实现创新驱动发展的源动力。从全球到中国，以风能、光伏发电为代表的新能源产业发展迅速，可再生能源发电与现代电网的融合成为了世界能源可持续转型的核心，发电技术继续沿着大规模、高效率和低成本方...

mudiyouyou 2019-08-05 10:46 评论0 收藏0
基于 HTML5 WebGL 的 3D 工控裙房系统

摘要：前言工业物联网在中国的发展如火如荼，网络基础设施建设，以及工业升级的迫切需要都为工业物联网发展提供了很大的机遇。前言工业物联网在中国的发展如火如荼，网络基础设施建设，以及工业升级的迫切需要都为工业物联网发展提供了很大的机遇。中国工业物联网企业目前呈现两种发展形式并存状况：一方面是大型通讯、IT企业的布局；一方面是传统工业软件和工业网络企业自发地延伸，由产品提供商发展为方案供应商。什...

W_BinaryTree 2019-08-05 14:09 评论0 收藏0
快速开发基于 HTML5 网络拓扑图应用

摘要：采用开发网络拓扑图非常容易，例如入门手册的第一个小例子麻雀虽小五脏俱全该例子展示了如何构建两个节点一条连线以及一个的组合效果。更多拓扑图例子可参考采用 HT 开发网络拓扑图非常容易，例如《入门手册》的第一个小例子麻雀虽小五脏俱全：http://www.hightopo.com/guide... showImg(https://segmentfault.com/img/bVDCcV?w...

Nino 2019-08-05 10:12 评论0 收藏0