webaccess教程-第12章.doc

第十二章 视频 网页及Flash集成本章要点 基于Web浏览器开发的网际组态软件WebAccess，提供了视频嵌入功能，可以集成众多网络摄像机，以及利用ASPHTML等网页语言开发的网页文件，还可以将Flash动画文件嵌入到WebAccess画面中，本章将针对视频和Flash等控件使用方法进行详细讲解。12.1 网络摄像机集成应用对于目前市场上广泛流行的网络摄像机（Web Camera），WebAccess通过集成其OCX视频控件的方式，集成视频影像到WebAccess监控画面中，实现视频影像与实时数据同步监控的功能。12.1.1 添加摄像图12-1 添加摄像12.1.2 制作视频窗口提交后，添加视频页面会出现如下图所示视频地址链接，复制该链接，用于制作自定义视频窗口。点击该页面的“下载”按钮。图12-2 视频的链接地址12.1.3 自定义视频窗口WebAccess支持用户自定义视频窗口的大小及位置，打开DrawDAQ画面（开始绘图），依次选择菜单栏中的动态-摄像显示，如下图所示。图12-3 自定义视频在弹出的视频添加窗口中，名称一栏，可以自定义；摄像一栏，则直接将12.1.2步骤中复制的视频链接地址复制到该栏位，然后确认。图12-4 设置视频显示确认后系统要求制定该视频窗口的位置及尺寸大小，用户可以通过鼠标拖拽的方式自行定义。定义完成后，如下图所示，会在画面中出现红色的矩形线框。该线框即为视频图像显示窗口。图12-5 定义视频显示大小和位置保存DRW和BGR画面后下载图片。12.1.4 浏览视频效果启动核心程序，打开刚刚制作完成的BGR页面，便可以看到如下加载了视频图像的效果。图12-6 显示视频图象另外，还可以通过点击工具栏中的“摄像”按钮，查看全屏摄像画面。图12-7 全屏显示视频12.2网页文件集成应用随着网络技术的普及和发展，越来越多的视频服务器也开始支持基于IE浏览器远程访问的功能，WebAccess提供接口将视频服务器的多屏视频画面集成到监控画面中。由于不同的行业有不同的报表功能要求，用户可能开发了属于自己行业需求的基于ASP或相关web技术的报表系统，并且希望能够将此报表系统嵌入到WebAccess中，WebAccess提供同样的接口技术将报表及其他相关网页文件嵌入到监控画面中。12.2.1准备工作打开绘图工具（本地绘图DAQ或工程管理器中的开始绘图）12.2.2 参数定义动态摄像显示，弹出摄像显示对话框图12-8 显示网页设置名称：web摄像：htm:注意：摄像文本框的内容以htm:为标识确认后系统要求制定该视频窗口的位置及尺寸大小，用户可以通过鼠标拖拽的方式自行定义。定义完成后，如下图所示，会在画面中出现红色的矩形线框。该线框即为视频图像显示窗口。图12-9 定义视频显示大小和位置保存DRW和BGR画面后下载图片。12.2.3 多链接画面切换添加按钮可以实现在同一视频窗口内切换不同的web页面，如预将搜狐网站及WebAccess开发首页在同一视频窗口中切换，则可以在绘图画面中添加按钮，按钮宏指令如下：链接搜狐网站,按钮宏指令：web=htm:图12-10 链接网页宏指令链接WebAccess工程开发首页,按钮宏指令：web=htm:图12-11链接WebAccess工程开发首页宏指令保存DRW,BGR画面后下载图片。小提示：在视频系统实时监控过程中，如果提示下载安装ActiveX控件，请下载安装；另外，IE浏览器的Internet安全选项由于设定过高可能会阻止ActiveX的运行，请对IE浏览器选项作相应调整。12.2.4 浏览效果启动核心程序后，打开相应的BGR画面，效果如下图所示：图12-12 显示效果通过点击“百度网站”按钮和“WebAccess开发首页”按钮可以在同一视频窗口中调用相应的内容。图12-13 显示百度网页图12-14 显示WebAccess工程开发页面该方法同样适用于以下应用：l 具备IE浏览器远程访问的视频服务器做视频集成应用；l 用户采用各类网页开发工具自行开发的报表文件；l 用户自定义的Windows各类可视控件；12.2.5 扩展应用-调用office文档Word、Excel等Office文档可以在工程项目中作为操作指导、注意事项、值班表等辅助性工具出现，通过WebAccess提供的按钮宏指令可以调用office文档。1.准备工作首先需要将准备好的Word文件转换成网页格式，保存成*.mht单个网页文件格式。图12-15 另存为网页图12-16 保存为单个文件网页2.文件保存Word网页文件命名为WebAccess.mht,保存在工程节点计算机的Web服务目录下，C:InetpubwwwrootWebAccess.mht3添加按钮宏指令打开WebAccess绘图窗口，制作按钮，按钮执行的宏指令为： URL=/WebAccess.mhttarget=poptoolbar=0图12-17 按钮宏指令小提示：l 为方便网络客户端远程调用该Word文件，将IP地址更改为真实局域网IP或互联网IP地址或域名；l 粗体参数为屏蔽IE浏览器工具栏和状态栏，更多参数应用请参考随机帮助手册11.1.55章节；l 如果按钮指令超过70个字符，则需要改为执行按钮宏旨令文件。 4.制作按钮宏指令文件点击WebAccess绘图窗口，点选工具栏中最后一个图标，打开按钮宏指令文件制作窗体，在打开的按钮宏指令制作窗口中，输入同样的按钮宏指令，保存宏指令文件名为word.mcr图12-18 宏文件word.mcr 按钮执行的指令需要稍做调整：改为word.mcr图12-19 宏指令-调用宏文件5.浏览运行效果制作完成后，保存BGR、DRW文件，下载图片后，启动核心程序进入运行画面，效果如下：图12-20 显示效果6.Word文件嵌入应用如果需要将该Word文档嵌入到某运行画面中，则可以如下操作： 绘图动态摄象显示，在摄象一栏内输入：htm:/WebAccess.mht ，然后根据需要定义窗口大小即可。图12-21 Word文件嵌入应用12.3 集成Flash动画文件丰富多彩的Flash动画可以增加监控页面的生动性及更富感染力的表现效果，WebAccess可以直接接嵌入*.swf Flash原始格式文件。动画效果更逼真，文件容量更小。同时，WebAccess还提供了相应的指令可以实现IO点数据在Flash内部变量和WeAccessIO变量之间传递，大大加强了Flash的表现能力，各种按钮宏指令也可以运用与Flash文件中，使得原本基于WebAccess软件的页面跳转等都可以在Flash文件中实现，可以说是工业组态软件在技术领域的极大突破。所有Flash相关的本地应用都可以在WebAccess客户端实现，再一次印证了WebAccess软件真正的网络化组态软件和100%客户端同步功能。具体步骤如下：12.3.1准备工作将已制作好的FLASH文件COPY到 WebAccessnodeconfigproject_node目录下。本例以yanshi.swf为例。提示： project_node为已经创建的工程节点_监控节点名。12.3.2 创建Flash窗口打开绘图程序，通过菜单中的 动态摄象显示，弹出摄象框，名称用户可以自定义，摄象一栏内输入：swflash#yanshi.swf&play=true&loop=true&menu=true&popmenu=true图12-22 链接Flash文件确认后，根据需要用鼠标拖动窗口大小，确定Flash显示框的大小，保存BGR和BRW文件。12.3.3浏览运行效果下载图片，启动核心程序，切换到运行界面。效果如下图：图12-23 显示效果12.3.4 参数定义说明以本例swflash#yanshi.swf&play=true&loop=true&menu=true&popmenu=true进行参数说明讲解。其中：Swflash# -为加载Flash文件的标志符，为固定应用Yanshi.swf-欲加载的Flash文件名，建议将Flash文件放在WebAccessnodeconfigProject_Scada目录下，当Web客户端进行远程访问该Flash文件时，WebAccess客户端程序会自动下载该文件到客户端相应目录下。Play-参数为true或false，用以播放或停止FlashLoop-参数为true或false，用以定义是否循环播放FlashMenu-参数为true或false,用来定义是否显示在Flash文件中的右键菜单，注意，这个选项不会阻止Flash文件中的弹出窗口，如果要屏蔽弹出窗口，需要使用Popmenu参数12.3.5 WebAccess与Flash数据传递WebAccess软件中的IO点和内部变量可以与Flash文件中的变量进行一对一的数据双向传递，因此，可以实现将WebAccess画面移植到Flash文件中进行展示的功能。若实现该功能，需要先了解以下Flash网络命令，以方便具体操作过程中使用。l 在Flash中执行WebAccess按钮宏指令命令格式：fscommand(SENDCMD, Macro); 参数定义：fscommand(命令, 参数); 为Flash中的Action Script网络命令 SENDCMD： 为WebAccess软件命令，固定参数 Macro： 为各种WebAccess按钮宏指令的总称，根据具体需要可以用相应的指令代替，如页面切换，使用GRPAH=ABC.BGR;用户登录使用：LOGIN等；l 在Flash中改值到WebAccess软件中命令格式：fscommand(SETVAL, Tag=Value);SETVAL： WebAccess软件中点赋值命令；Tag： WebAccess软件中IO点或中间变量点名称（可以为中英文）；Value: 具体数值如果需要可以动态修改传递的数值，则可以使用以下命令：fscommand(SENDCMD, TAGVALCHG=Tag);Tag： WebAccess软件中IO点或中间变量点名称（可以为中英文）；l 从WebAccess软件中取值到Flash中显示命令格式：fscommand(GETVAL, Variable=Tag);GETVAL： WebAccess软件中取值命令；Variable： Flash中变量名；Tag： WebAccess软件中IO点或中间变量点名称（可以为中英文）；如果Tag点为无效点，则Flash中的Variable显示为%T-2L$NA，如果Tag点为通讯失败点，则Variable显示为%T-1L$BAD，因此，请确保Flash文件的ActionScript中的Variable可以处理这两个错误代码。12.3.6 应用举例在制作Flash文件时请使用MicroMedia Flash8.0或9.0版本，并安装Flash播放器。 1.新建Flash开发文件定义变量在Flash文件开发页面中，用文本工具定义需要传递IO数据的字符位，如下图：图12-24 FLASH中添加文本对于上图中a1点值的显示文本，选择动态文本，并赋予变量名V1，如下图：图12-25 定义文本为变量V1同理，对于图中a2点值的显示文本，选择动态文本，并赋予变量名V2，如下图：图12-26 定义文本为变量V2 2.定义ActionScript，关联变量 将鼠标放在当前图形所在帧上，右键选择动作，打开ActionScript编辑窗口，如下图：图12-27打开ActionScript编辑窗口 在脚本编辑器中输入以下脚本程序，将WebAccess中点名称a1、a2和Flash变量V1、V2进行关联。onEnterFrame=function()fscommand(GETVAL,V1=a1);fscommand(GETVAL,V2=a2);图12-28 编辑脚本编辑结束可以点击语法检查按钮，进行脚本校对。校对无误后，关闭脚本编辑器。图12-29 校对脚本 3.添加页面跳转按钮 在Flash中添加按钮，执行WebAccess页面跳转命令，可以实现Flash文件与WebAccess运行画面BGR文件之间的相互切换。 首先，利用Flash中的文本工具，添加文本标题，如本例中的main.bgr.结束文本设置。通过鼠标右键点击该文本串，选择转换为元件。图12-30 文本转换元件在下图的页面中，可以为该元件命名，也可以默认使用系统提供的名称。元件类型选择按钮。确认后返回。在画面中会发现Main.bgr周围会出现线框，代表转换成功。图12-31 转换元件属性再次鼠标右键选中该按钮，在弹出的右键菜单中选择“动作”，进入按钮命令编辑页面，输入如下按钮命令：on (release) fscommand(SENDCMD,GRAPH=main.bgr)图12-32 编辑脚本至此，Flash文件制作完毕，关闭按钮动作编辑器，返回主画面。在Flash软件的菜单中选择文件保存，保存源文件，再次选择文件-发布，将原文件生成first.swf运行文件。4.WebAccess页面制作接下来将Flash文件COPY到相应项目文件目录下，并制作Flash文件显示窗口，保存DRW、BGR文件并下载，启动核心程序浏览运行效果。12.4 集成VB控件(OCX)WebAccess支持在iewDAQ 画面中嵌入第三方软件制作的控件如(VB.OCX)，第三方控件中通过调用WebAccess对外提供的bwocxrun.ocx控件达到外部控件和WebAccess之间互相传送点的数值的目的，从而为用户提供了丰富的图形界面制作方法及表现形式。12.4.1 VB控件制作方法及步骤打开VB软件程序，在新建工程的选项框中选择ActiveX控件，如下图：图12-33 新建OCX控件打开，进入控件制作画面，由于嵌入WebAccess 的控件是通过bwocxrun.ocx和WebAccess 通信，所以要先把bwocxrun.ocx引用到VB 中。点击菜单栏中的工程，在弹出的下拉菜单中选择部件，打开部件引用窗口，如下图，在该窗口中选中bwocxrun ActiveX Control Module,点选应用。如果找不到bwocxrun ActiveX Control module可以把bwocxrun.ocx拷贝到系统的WINDOWSSYSTEM32下。在运行的窗口输入REGSVR32 bwocxrun.ocx 点确定。图12-34 添加部件bwocxrun.ocx为控件新增加一属性用来传递WebAccess 窗体开起时系统分配给WebAccess窗体的数值字符串。在VB 工具栏中外接程序下拉菜单中选Active 控件接口向导点击下一步，如下图：图12-35 Active 控件接口向导点选下一步按钮：图12-36 选定接口成员将上图中左侧的可用名称列表中的“hWnd”添加到选定名称列表中，然后点选下一步：图12-37 添加自定义成员新建控件APhwnd属性，如上图。点击下一步图12-38 设置映射将APhwnd属性映射到控件UserControl，点击下一步图12-39 设置属性将APhwnd属性的数据类型定义为String，点击完成，这样就为控件新建了一个属性。接下来就是要通过bwocxrun.ocx使WebAccess 和第三方控件VB.ocx通信.12.4.2 VB控件画面制作及编写代码用鼠标单击VB 工具栏的 OCX 然后在VB 的编辑区的空白处用鼠标点击一下，表示bwocxrun.ocx 这一控件一在VB窗体中生成了一个对象，如第一次引用，名称为bwocxrun1.正是这一对象提供了和WEBACCESS 写值和读值的方法和属性。在程序里可以直接调用他。图12-40 编辑VB控件画面如上图，做好VB窗体的显示界面。分别用鼠标双击读取WEBACCESS 数值和写入WEBACCESS 数值的按钮。在代码窗体中填入以下代码。图12-41 编辑VB代码其中ag01,Tag02,Tag03 是WEBACCESS 里的点，e.Aphed.是打开WEBACCESS 窗体时系统分配给WEBACCESS 窗体的随机数值。如果要让VB 实时数据采集只要把按钮下的代码放在imer1_Timer下 在把时钟的周期设置为1秒。12.4.3 VB控件打包如下图在的工具栏文件下拉菜单下 点击生成vb.ocx控件按钮。弹出如下对话框，选择保存路径，将文件名改为 P 点击确认按钮。图12-42 打包VB控件将Ap.ocx 控件打包成P.CAB 包有两种方法：一种是用inAce打包工具，另一种是用VB 的打包工具。以下选用VB自带的打包工具，这样可以方便的看到Ap.ocx 控件的版本号和D 号。在VB 工具栏中外接程序下拉菜单中选打包和展开向导提示你保存工程选是。弹出如下窗体图12-43 打包向导点选 打包(P)点击 下一步，下一步。弹出如下窗体图12-44 选择包类型包