在上一篇Legolas工业自动化平台入门(二)数据响应动作 一文中,我们介绍了“动作”相关内容,了解到“动作”分为多种,各种动作的添加方式相同,但是应用方式各自不同。这篇里,我们会介绍交互事件响应动作的使用。

首先来看一段视频:

在视频中能看到两种阀门(扳手式和旋转式)的不同动作,这里就以它们的实现为例,来介绍交互事件响应动作的使用。

交互事件响应动作指人机交互时的事件响应动作,例如鼠标、键盘,w3c中对各种交互事件有规范的命名,Legolas中交互事件响应动作也遵循w3c中命名规范,在事件名前“on”前缀。对于交互事件响应动作的应用,当交互事件触发时,模板对象会按照命名规则查找对应的动作并执行,所以无需手动绑定。

选中扳手式阀门,对其添加onclick交互动作“开”和“关”:

function (event){
var self = this;
var dialogSetting = {
"title":'阀门',
"size":{"width":260,"height":100},
}
var onLoaded = function(dview){
var vi = dview.getVIsByID("valveControl")[0];
vi._refVi = self;
var angle = self.getValue('angle');
vi.setData(angle==90?'close':'open');
settingView = dview;
}
var diagramSetting = {
"type":DIAGRAMCONTENTTYPE[1],
"src":"handleValve01Control",
"isRuntime":true,
"onLoaded":onLoaded
}
Toolkits.showDiagramViewDialog(dialogSetting,diagramSetting);
}

这里Toolkits.showDiagramViewDialog(dialogSetting,diagramSetting)表示当点击模板对象后,弹出对话框。表示弹出对话框内容为diagram,这里用到了diagram的嵌套。方法参数分别为弹出框的配置参数和diagram的配置参数。在diagramSetting指定了需要加载的diagram名。

这里需要加载的是handleValve01Control图纸,从下图可以看到handleValve01Control图纸中只有一组单选按钮,那么改变阀门状态的动作又在哪呢?选中单选按钮能看到在其“动作”列表中定义了changeValue动作:

function (v){
var angle = 0;
if(v == 'close'){
angle = 90;
}
this._refVi.rotatePartByAxis('handle', {x:0,y:1,z:0}, {x:0,y:15,z:0}, angle);
}

其中,this._refVi为点击的模板对象。

到这里对扳手式阀门交互就完成了,很简单吧? 对于旋转式阀门的处理方法也是如此,只是弹出的图纸不同,旋转的角度不同而已。表达能力太差,感兴趣的童鞋还是到这里申请一个试用,看看我们部署的在线应用吧,申请的时候记得注明一下“自动化产品”噢。

Legolas工业自动化平台入门(三)交互事件响应动作的更多相关文章

  1. Legolas工业自动化平台入门(二)数据响应动作

    在上一篇文章Legolas工业自动化平台入门(一)搭建应用里,我们简单地提到了"动作"的概念.不清楚的童鞋不要着急,这篇我们就来介绍如何在Legolas平台上添加动作,并应用动作. ...

  2. Legolas工业自动化平台入门(一)搭建应用

    前两篇给大家介绍了TWaver家族的新面孔--Legolas工业自动化平台,通过两个应用案例钻井平台工程用车和水源地监控系统,相信大家对Legolas已经有了一定程度的了解.这几篇文章,我们会逐步介绍 ...

  3. Legolas工业自动化平台案例 —— 水源地自动化监控系统

    天津港爆炸事件后,除了安置群众.追究事故责任外,人们最关心的莫过于爆炸污染物对于周边环境的影响,其中最重要的一块就是饮用水的安全.所幸的是,水源的安全监测是实实在在有据可依的.环保单位和供水企业在建设 ...

  4. libevent源码分析三--signal事件响应

    libevent支持io事件,timeout事件,signal事件,这篇文件将分析libevent是如何组织signal事件,以及如何实现signal事件响应的. 1.  sigmap 类似于io事件 ...

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

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

  6. 【JavaScript学习】-事件响应,让网页交互

    什么是事件: JavaScript 创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件. 比如说,当用户单 ...

  7. JavaScript高级用法一之事件响应与网页交互

    综述 本篇的主要内容来自慕课网,事件响应与网页交互,主要内容如下 1 什么是事件 2 鼠标单击事件( onclick ) 3 鼠标经过事件(onmouseover) 4 鼠标移开事件(onmouseo ...

  8. 脑残式网络编程入门(三):HTTP协议必知必会的一些知识

    本文原作者:“竹千代”,原文由“玉刚说”写作平台提供写作赞助,原文版权归“玉刚说”微信公众号所有,即时通讯网收录时有改动. 1.前言 无论是即时通讯应用还是传统的信息系统,Http协议都是我们最常打交 ...

  9. 追踪app崩溃率、事件响应链、Run Loop、线程和进程、数据表的优化、动画库、Restful架构、SDWebImage的原理

    1.如何追踪app崩溃率,如何解决线上闪退 当 iOS设备上的App应用闪退时,操作系统会生成一个crash日志,保存在设备上.crash日志上有很多有用的信息,比如每个正在执行线程的完整堆栈 跟踪信 ...

随机推荐

  1. 搭建wamp环境,数据库基础知识

    服务器管理软件php Apache.net IISjava Tomcat 服务器管理软件起到的作用:管理服务器工作,具体的工作如下:1.静态页面用户将请求发送到服务器,服务器中的服务器管理软件将请求发 ...

  2. iOS开发之静态库(三)—— 图片、界面xib等资源文件封装到.a静态库

    编译环境:Macbook Air + OS X 10.9.2 + XCode5.1 + iPhone5s(iOS7.0.3) 一.首先将资源文件打包成bundle 新建工程:File -> Ne ...

  3. javaweb回顾第四篇Servlet异常处理

    前言:很多网站为了给用户很好的用户体验性,都会提供比较友好的异常界面,现在我们在来回顾一下Servlet中如何进行异常处理的. 1:声明式异常处理 什么是声明式:就是在web.xml中声明对各种异常的 ...

  4. 3D touch 静态、动态设置及进入APP的跳转方式

    申明Quick Action有两种方式:静态和动态 静态是在info.plist文件中申明,动态则是在代码中注册,系统支持两者同时存在. -系统限制每个app最多显示4个快捷图标,包括静态和动态 静态 ...

  5. 店商互联(北京)科技发展有限公司DS365.com

    店商互联(DS365)是目前北京最为知名的社区便超O2O平台服务商,店商互联(DS365)通过自主研发的移动订货配送与网络营销服务平台,以移动互联网和大数据为技术支撑,为社区超市实体店提供手机订货.物 ...

  6. ios之如何删除默认的约束

    应用场景,你是否尝试过定义一个在设置了autolayout中的xib的控件,然后连线关联了outlet.跟住在代码中设置了针对这个控件的约束,但是发现没有显示效果,控制台里面打印出约束的问题.大概就是 ...

  7. 关于启明星系统(OA系统,预定系统,请假系统等)安全性的说明

    启明星系统推荐是安装在内网里,因此,系统采用了较为简单的身份验证. 事实上,在访问页面时,系统会判断当前cookie的uid是否大于0,如果是,则表示用户已经登录,否则表示未登录. public st ...

  8. 转:最简单的基于 DirectShow 的视频播放器

    50行代码实现的一个最简单的基于 DirectShow 的视频播放器 本文介绍一个最简单的基于 DirectShow 的视频播放器.该播放器对于初学者来说是十分有用的,它包含了使用 DirectSho ...

  9. ASP.NET Web API中的参数绑定总结

    ASP.NET Web API中的action参数类型可以分为简单类型和复杂类型. HttpResponseMessage Put(int id, Product item) id是int类型,是简单 ...

  10. 多台linux服务器时间同步

    1,设置A机时间服务器: a,修改 /etc/ntp.conf,如下: # Undisciplined Local Clock. This is a fake driver intended for ...