TWaver家族新成员 — Legolas工业自动化设计平台

对于TWaver可视化家族的成员,大家比较熟悉的是我们的网络拓扑图组件和MONO Design三维建模工具。作为开发工具,这两款产品面向广大的程序猿同志,在界面可视化上为大家省时省力。但是,当项目交付以后,我们经常会遇到这种情况:

在已经交付的某客户现场,甲方又提出了界面改动需求。

通常情况下,需求都不难,但是会超出了当初需求调研以及验收标准中的要求了。而且按照传统的开发流程,撇开时间和费用等问题,界面改动通常需要让后方的美工大人重新调整界面,开发人员进行代码修改,一来一回,耗时耗力。我们近期也遇到了这样的情况,不过得益于项目所使用的Legolas™工业自动化平台,这个改动只花了几分钟就搞定了。

是的,今天我们就来大张旗鼓地给大家介绍一下这位TWaver可视化家族的新成员 ———— Legolas。

还是从项目说起吧。最近我们做了一个油田钻井用工程车辆工况管理的项目。项目早已完成验收,系统运行也没有问题,但是甲方提出,希望能有个表示钻井钻头作业方向的功能,用来方便指导作业工人的工作。下面是我们已经开发完成的界面:

钻井工程车工况管理

大家看到的这个界面,是用Legolas™平台开发的。如何实现在这个界面上添加一个表示钻井钻头作业方向的功能呢?

第一步:现场工人打开系统中的图纸编辑工具,打开需要修改的页面图纸。

(是的,你没有看错,只要让现场工人来操作就可以了)

2

第二步:从左边工具栏中,拖拽一个新的组件到图纸中,设置一下它的ID。

这个组件是用来显示图片的,我们可以通过逻辑判断例如井深数据的变化,来动态计算出钻头的走向趋势,然后用表示上、下的箭头来指明方向。

3

第三步:点击动态逻辑管理界面,进行符合甲方需求的逻辑代码。

由于编辑平台是使用JavaScript开发的,追加一些基本逻辑就是如此简单:

function (r){
var v = r.value;
vardd =this.depth;
if(dd){
if(v>=dd){
this.setValue("image","./images/vi/2d/arrow2.png");
}else{
this.setValue("image","./images/vi/2d/arrow1.png");
        }
    }
this.depth = v;
}

4

第四步:动态逻辑添加完毕,进行新的数据关联。

由于客户希望是进行井深数据的判断,我们就直接把井深数据关到我们新加的这个可视化组件上。

此处输入图片的描述

好了,编辑工作完成,保存一下图纸就可以跳转到实际运行界面上看结果了。

此处输入图片的描述

这只是Legolas应用的一个很小的例子,面对现场突发需求,开发人员不用再半夜起来敲代码,只要指导现场的工人拖拽一下新的需求页面,设置一下所需的动态逻辑就可以了。这也是我们创造Legolas的初衷:

通过Legolas工业自动化平台,用可视化拖拽的方式就能实现应用系统界面布局,并通过复杂逻辑动态注入和数据模型的动态映射,设计出可以运行在各类设备上的应用系统,满足各种领域和行业的需求。

posted @ 2015-11-24 14:37  twaver  阅读(1846)  评论(2编辑  收藏  举报