基于SVG的HMI组件

        人机界面是自动化领域不可或缺重要组成部分。人机界面系统的设计看上去并没有太大的技术门槛,但是设计一个HMI系统的工作量是巨大的,如果你没有足够的耐心和精力是难以完成一个通用HMI系统的。构建UI控件库就是一个似乎永远完不成的事情,用户永远觉得不够用。

        另一方面用户使用HMI的组态工具构建HMI应用也是一个十分繁琐又容易出错的地方,你需要将大量的数据点与HMI上的UI对应起来。

人们期望自动生成HMI界面, 本文讨论如何解决这些问题。

基于模型的设计

        自动控制领域正走向开放性系统,并且采用基于模型的设计理念,OPC UA ,MTP,工业4.0 AAS等技术都是基于信息模型的工业标准。

       当系统采用了信息模块之后,现场传送的数据已经不是简单的整型数和浮点数,而是一个结构化的信息模型。

          如果 HMI 系统构建与信息模型相对应的UI 模型,那么数据模型的数据就能够直接呈现到UI模型上,不再需要组态工具去建立对应关系。这将减少组态时许多的工作量。

转变UI组件的开发方式

        传统的HMI 中的UI组件都是由HMI软件开发商实现的,即便开放了用户开发专用UI组件的能力,通常也是在HMI 组态工具中实现的。在这种相对封闭的UI组件构建方法带来了HMI系统的开发难度。

        由HMI软件开发者开发UI组件往往很难与应用完美的结合,与具体应用相结合时难免看上去牵强附会。

        笔者看来,应该将UI组件库集中方式,转向用户自主开发。具体地讲,将UI组件的开发交给底层设备的开发者,在设备的信息模型中包含了UI 组件。当设备与HMI 软件连接起来后,将UI组件上传到HMI系统中去。例如,一台空气压缩机的信息模型中包含了它的UI组件。

        设备开发者是最熟悉其设备的图形化方式,我们将这种由设备制造商提高UI 组件的方式称为“民主化开发”方法。

        在流程控制行业的NAMUR 的MTP 模型中,就采取了这样一种方法,号称能够根据P&ID 图(Piping and instrumentation diagram)自动生成HMI的画面。

UI 组件的实现技术

HMI 系统实现的方式主要有如下几种:

  1. 基于Web 的HTML5技术
  2. 基于Window 的.NET/C# 技术
  3. 基于Android的技术

        尽管.NET/C# 技术仅限于Windows 平台实现(目前.NET 的用户界面不支持Linux),C#仍然是开发工业控制上位机软件效率最高的设计工具。相比之下,HTML5 Web技术采用了开放性技术(HTML,CSS和javascript),带来了兼容性和灵活性,但是Web 技术过于碎片化,开发效率并不高。

UI组件的组成

        所谓UI组件,就是将HMI的页面分解成多个小型的模块。

        基于MVC 模型,现代界面采取了页面视图与控制逻辑的分离。

        在.NET/C# 技术中,也已经从传统的Form 转向页面与逻辑分离的WPF技术。wpf 窗口包括了描述界面的XAML和后端的代码C#。后端实现XAML 的响应。

        在QT技术中,大致也是如此。

UI 组件技术

  • 单一文件

        由于UI 组件是从底层信息模型中上传到HMI 系统的,为了避免多个文件的上传,最好是单一文件。 比如在Web技术中,我们可以采用VUE 组件。VUE 组件是将HTML,CSS 和JavaScript 合并在一个vue文件中。也可以采用SVG矢量图形

  • 与平台无关

显然WPF 是依赖Windows 平台的。

  • 简单设计工具

SVG

        矢量图形SVG 也是一种单一UI 组件的方法。SVG的全称是可缩放矢量图形(Scalable Vector Graphics,SVG)基于 XML 标记语言。但是SVG不仅仅描述矢量图形,还能够包含JavaScript 程序。 SVG是一种理想的HMI UI组件工具

        SVG 是W3C 的开放型标准。与具体的架构无关。有许多工具能够实现SVG 的绘制。添加Javascript代码只需要文本编辑器就能够完成。

        所以SVG是一种理想的HMI UI组件工具。

XAML/C#

        C# 的XAML 能够描述精美的图形界面,而且支持3D 模型的显示。WPF 的UI 组件是用户组件(UserControl )。每个UserControl 包含了一个XAML和一个CS文件。构建用户组件库的方法是:

  1. 新建用户控件库项目,在该库中可以包含多个用户控件。
  2. 编译成为DLL 文件。
  3. 在其它应用程序中导入该DLL 或者动态导入DLL。

        在一些传统的HMI系统中,仍然使用XAML 开发用户界面,例如艾默生公司的MOVICON SCADA 软件就是采用XAML 。

        XAML/C# 的缺点是依赖Windows 平台技术·,要使用微软的VS开发UI控件。另外,组件以DLL 形式呈现,不可阅读和修改。动态载入HMI系统也比较麻烦。

        在笔者看来SVG是比较好的UI组件技术。

基于SVG 的UI组件

下面我们以svidget 开源架构为例介绍基于SVG 的UI组件技术。

:也许有人会疑惑,为什么SVG在能够包含javascript 代码呢?这是由于SVG 是使用XML 描述的矢量化图形。在浏览器中是将SVG的XML 直接嵌入HTML 文本中处理的,所以SVG中能够嵌入HTML5 的内容。

项目Github:https://github.com/joeax/svidget

 svidget  主要构建基于SVG 技术的UI组件,它被成为Widget(小部件),其特点是

可交互

        您可以通过页面的参数、操作和事件从页面操作小部件。 也就是说,您可以设置参数值、调用操作以及处理小部件中的事件。

使用方便

可以使用<object>标签在网页中嵌入SVG Widget。并且使用<param> 标签将数据传递到小组件。

下面是一个简单的例子

假设我想创建一个圆环仪表来显示操作的进度。看起来像这样的东西:

 这是它的原始静态SVG代码:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svidget="http://www.svidget.org/svidget"
		 width="200" height="200" viewBox="0 0 200 200" style="background:transparent">
	<title>Donut Gauge</title>
	<desc>Visualizes a donut-style gauge with text value in the middle.</desc>

	<style>
		#textLabel { font-size: 16px; font-family: Helvetica; alignment-baseline: text-top; }
		#spanContent { font-size: 28px; font-weight: bold; margin: 0px; }
	</style>

	<defs>
		<mask id="donutMask">
			<rect x="0" y="0" width="100%" height="100%" fill="white" />
			<circle r="48" cx="100" cy="100" fill="black" />
		</mask>
	</defs>

	<g>
		<circle id="backCircle" r="98" cx="100" cy="100" fill="#ddd" mask="url(#donutMask)" />
		<path id="foreArc" fill="none" stroke="#7f7fdf" stroke-width="50" d="M 100,27 A 73,73 0 1,1 27,100" />
		<text id="textLabel" x="100" y="110" text-anchor="middle" fill="#3f3f3f">
			<tspan id="spanContent">75</tspan> %
		</text>
	</g>

</svg>

我们可以通过将其转换为 SVG 小部件来使其有用。 要对此进行小部件化,我们首先需要考虑的是它的属性是什么。在 svidget 中,我们将这些称为参数。 对于我们的甜甜圈仪表盘

  • 数据 - 这是主要数据。让它成为 0 到 1 之间的值,表示百分比。
  • 颜色 - 圆圈上前景的颜色。
  • 背景颜色 - 圆圈上背景的颜色。
  • 文本颜色 - 中间文本的颜色。
  • showText - 是否显示文本的布尔标志。
  • 宽度 - 甜甜圈的宽度。可以是介于 1 和 98 之间的值。

 Svidget 使用声明性语法向小部件添加参数。由于SVG是结构化XML,我们可以用svidget命名空间来扩展它。

<svidget:params>
<svidget:param name="data" shortname="d" type="number" description="The percentage to fill. Value should be between 0 and 1." />
<svidget:param name="color" shortname="color" type="string" subtype="color" binding="#foreArc@stroke" description="The circle foreground color." />
<svidget:param name="backColor" shortname="bcolor" type="string" subtype="color" binding="#backCircle@fill" description="The circle background color." />
<svidget:param name="textColor" shortname="tcolor" type="string" subtype="color" binding="#textLabel@fill" description="The text color." />
<svidget:param name="showText" shortname="st" type="bool" description="Whether to show the text in the middle." />
<svidget:param name="width" shortname="w" type="number" description="The width of the donut portion of the circle." />
</svidget:params>

完整的代码

<?xml version="1.0" encoding="utf-8" ?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svidget="http://www.svidget.org/svidget"
		 width="200" height="200" viewBox="0 0 200 200" style="background:transparent">
	<title>Donut Gauge</title>
	<desc>Visualizes a donut-style gauge with text value in the middle.</desc>

	<style>
		<![CDATA[		#textLabel { font-size: 16px; font-family: Helvetica; alignment-baseline: text-top; }		#spanContent { font-size: 28px; font-weight: bold; margin: 0px; }		]]>
	</style>
	
	<svidget:params>
		<svidget:param name="data" shortname="d" type="number" description="The percentage to fill. Value should be between 0 and 1." />
		<svidget:param name="color" shortname="color" type="string" subtype="color" binding="#foreArc@stroke" description="The circle foreground color." />
		<svidget:param name="backColor" shortname="bcolor" type="string" subtype="color" binding="#backCircle@fill" description="The circle background color." />
		<svidget:param name="textColor" shortname="tcolor" type="string" subtype="color" binding="#textLabel@fill" description="The text color." />
		<svidget:param name="showText" shortname="st" type="bool" description="Whether to show the text in the middle." />
		<svidget:param name="width" shortname="w" type="number" description="The width of the donut portion of the circle." />
	</svidget:params>

	<defs>
		<mask id="donutMask">
			<rect x="0" y="0" width="100%" height="100%" fill="white" />
			<circle r="48" cx="100" cy="100" fill="black" />
		</mask>
	</defs>

	<g>
		<circle id="backCircle" r="98" cx="100" cy="100" fill="#ddd" mask="url(#donutMask)" />
		<path id="foreArc" fill="none" stroke="#7f7fdf" stroke-width="50" d="M 100,27 A 73,73 0 1,1 27,100" />
		<text id="textLabel" x="100" y="110" text-anchor="middle" fill="#3f3f3f" visibility="visible">
			<tspan id="spanContent">75</tspan> %
		</text>
	</g>

	<script type="application/javascript" xlink:href="../scripts/svidget.js"></script>
	<script type="application/javascript">
		<![CDATA[
	
		var _data = 0;
		var _width = 50;
		var FULL_RADIUS = 100;
		var DONUT_RADIUS = FULL_RADIUS - 2; // 98
		
		function init() {
			//setArcPath(0.75);
			//debugger;
			var widget = svidget.current();
			widget.param("data").on("set", onParamDataSet);
			widget.param("width").on("set", onParamWidthSet);
			widget.param("showText").on("set", onParamShowTextSet);
			setParamData(widget.param("data").value());
			setParamWidth(widget.param("width").value());
			setParamWidth(widget.param("showText").value());
		}
		
		function onParamDataSet(e) {
			//alert('onParamDataSet');
			var val = parseFloat(e.value.value); // { value: val }
			setParamData(val);
		}
				
		function onParamWidthSet(e) {
			var w = parseInt(e.value.value); // { value: val }
			setParamWidth(w);
		}
		
		function onParamShowTextSet(e) {
			var show = e.value.value;
			setParamShowText(show);
		}
		
		// range: 0 to 1
		function setParamData(val) {
			val = rangify(val, 0, 1);
			// set donut arc
			setArcPath(val);
			// set text
			setContentLabel(val);
			// set global data
			_data = val;
		}

		// range: 1 to 98
		function setParamWidth(w) {
			w = rangify(w, 1, DONUT_RADIUS);
			// set donut mask - i.e. empty hole in middle aka the donut hole
			var rad = DONUT_RADIUS - w;
			setMaskRadius(rad);
			setArcWidth(w);
			// set global width
			_width = w;
			// re-set arc path
			setArcPath(_data);
		}
		
		function setParamShowText(show) {
			//debugger;
			var textLabel = document.getElementById("textLabel");
			var v = !show ? "hidden" : "visible";
			textLabel.setAttribute("visibility", v);
		}

		function setMaskRadius(rad) {
			var maskCir = document.querySelector("#donutMask > circle");
			maskCir.setAttribute("r", rad);
		}

		function setContentLabel(pct) {
			var val = parseInt(pct * 100);
			var spanContent = document.getElementById("spanContent");
			spanContent.textContent = val + "";
		}

		function setArcPath(pct) {
			var path = generateArcPath(pct);
			var foreArc = document.getElementById("foreArc");
			foreArc.setAttribute("d", path);
		}
		
		function setArcWidth(w) {
			var foreArc = document.getElementById("foreArc");
			foreArc.setAttribute("stroke-width", w);
		}
	
		// pct == 0 to 1
		function generateArcPath(pct) {
			var baseY = 2;
			var halfWidth = _width / 2.0;
			var startY = baseY + halfWidth;
			var arcRadius = FULL_RADIUS - startY;
			var largeArc = pct > 0.5 ? 1 : 0; // if greater than 50 we need to use large arc in path
			var pctRadians = (Math.PI * 2) * pct;
			var endX = round3((Math.sin(pctRadians) * arcRadius) + FULL_RADIUS);
			var endY = round3((-Math.cos(pctRadians) * arcRadius) + FULL_RADIUS);
			if (endX == 100 && pct > 0) endX = 99.999; // this corrects issue with path if start and end are same it won't draw an arc
			//debugger;
			
			// M 100,27 A 73,73 0 1,1 27,100
			var path = "M 100," + startY + " "; // move to start
			path += "A " + arcRadius + "," + arcRadius + " 0 " + largeArc + ",1 " + endX + "," + endY;
			
			return path;
		}
		
		function rangify(val, min, max) {
			if (isNaN(val) || val < min) val = min;
			if (val > max) val = max;
			return val;
		}
		
		function round3(val) {
			return parseInt(val * 1000) / 1000.0;
		}
	
		window.addEventListener('load', init, false);
	
	  ]]>
	</script>
</svg>

在网页上嵌入小部件的主要方法是object> 标记。 框架使用 role=“svidget” 查找所有 <object> 标签,并实例化小部件。 

<object id="myDonutGauge" role="svidget" data="widgets/donut.svg" type="image/svg+xml" width="200" height="200">
<param name="data" value="0.55" />
<param name="color" value="#da3333" />
<param name="backColor" value="#ffac33" />
<param name="textColor" value="#da3333" />
<param name="showText" value="true" />
<param name="width" value="40" />
</object>

您还可以使用 svidget.load() 以编程方式加载小部件:

svidget.load("#widgetContainer", "widgets/donut.svg", { 
data: 0.55, 
color: "#da3333",
backColor: "#ffac33",
textColor: "#da3333",
showText: true,
width: 40,
});

 在Github 中包含了一个demo 网页

很酷吧?

HMI组件实现的细节 

在具体地实现中,还有如下细节要考虑:

  •  UI组件只是提供了组件,网页布局仍然需要组态软件来完成。尽管简单了许多。
  •      网页中包含一个JavaScript 的运行时(runtime),它是与信息模型无关的。他只完成信息的交换。运行时将信息模型的NodeID 传递给UI 组件。UI组件订阅信息对象的特性(Property)并且支持事件和方法调用。

结束语

本文讨论的一种灵活的HMI组件方法,具体细节可以交流。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/10420.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Halo博客建站实战以及问题汇总

目录 简介 特性 快速开始 安装步骤 环境准备 Docker-compose方式部署 问题汇总 mac端无法访问页面 页面登录提示账号密码错误 重装注意点 资料 官方文档 简介 Halo 强大易用的开源建站工具 特性 代码开源 我们的所有代码开源在 GitHub 上且处于积极维护状态&…

《分解因数》:质因数分解

目录 一、题目&#xff1a; 二、思路&#xff1a; 三、代码&#xff1a; 一、题目&#xff1a; 分解因数 《分解因数》题目链接 所谓因子分解&#xff0c;就是把给定的正整数a&#xff0c;分解成若干个素数的乘积&#xff0c;即 a a1 a2 a3 ... an,并且 1 < a1…

HCIA第二次笔记

目录 OSI/RM七层参考模型——开放式的系统互联参考模型 核心——分层 TCP/IP模型——TCP/IP协议簇 应用层 应用层协议 封装与解封装 传输层 TCP协议和UDP协议的区别 TCP的报文 TCP的三次握手 TCP的四次挥手 TCP的四种可靠传输机制 OSI/RM七层参考模型——开放式的系…

[目标识别-论文笔记]Object Detection in Videos by Short and Long Range Object Linking

文章标题&#xff1a;2018_Cite13_Tang——Object Detection in Videos by Short and Long Range Object Linking 这篇论文也被叫做“2019_Cite91_TPAMI_Tang——Object Detection in Videos by High Quality Object Linking” 如果这篇博客对你有帮助&#xff0c;希望你 点赞…

学生信息管理系统【GUI/Swing+MySQL】(Java课设)

系统类型 Swing窗口类型Mysql数据库存储数据 使用范围 适合作为Java课设&#xff01;&#xff01;&#xff01; 部署环境 jdk1.8Mysql8.0Idea或eclipsejdbc 运行效果 本系统源码地址&#xff1a;https://download.csdn.net/download/qq_50954361/87673902 更多系统资源库…

【设计模式】如何在业务开发中使用适配器模式?

文章目录前言适配器模式定义通用代码实现适用场景案例场景分析一坨坨代码实现适配器模式重构总结前言 适配器模式&#xff08;Adapter Pattern&#xff09;&#xff1a;将一个类的接口变换成客户端所期待的另一种接口&#xff0c;从而使原本因接口不匹配而无法在一起工作的两个…

高速Serdes技术(FPGA领域应用)

目录引入一、Serdes&#xff08;概念-历程&#xff09;1、概念2、技术现状3、发展历程二、Serdes结构三、在FPGA领域中的运用四、Serdes跟Lvds的关系五、Xilinx 有关 serdes的文档六、参考文献引入 回顾接口技术发展历史&#xff0c;其实数据的传输最开始是低速的串行接口&…

OSI七层网络模型与TCP/IP四层模型

一、OSI七层网络模型 OSI 七层模型 是国际标准化组织提出一个网络分层模型&#xff0c;其大体结构以及每一层提供的功能如下图所示&#xff1a; 但由于各方面原因&#xff0c;OSI 七层模型并没有被广泛应用&#xff0c;更多的是作为网络分层的一种基础理论模型。 二、TCP/IP…

NumPy 基础知识 :1~5

原文&#xff1a;Numpy Essentials 协议&#xff1a;CC BY-NC-SA 4.0 译者&#xff1a;飞龙 一、NumPy 简介 “我宁愿使用通用语言进行数学运算&#xff0c;也不愿尝试使用数学语言进行通用编程。” – John D Cook 在过去的十年中&#xff0c;Python 已成为科学计算中最受欢迎…

MVCC

MVCC基本概念 当前读 当前读 : 读取的是记录的最新版本,读取时还要保证其他并发事务不能修改当前记录,会对读取的记录进行加锁. 对于我们日常的操作. 如 : select....lock in share mode(共享锁) , select * for update , update ,insert,delete(排他锁) 都是一种当前读. 快…

Java对象模型

介绍 Java是一种面向对象的语言&#xff0c;而Java对象在JVM中存储是由一定结构的。而这个 Java对象自身的存储模型称之为Java对象模型HotSpot虚拟机中&#xff0c;设计了一个OOP-Klass Model.OOP指的是普通对象指针&#xff0c;而Klass用来描述对象的具体类型。如下图所示是一…

文章生成器写出来的原创文章

文章生成机器人 文章生成机器人是一种基于人工智能技术和自然语言处理算法的程序&#xff0c;可以自动地生成高质量、原创的文章。 文章生成机器人的优点如下&#xff1a; 提高工作效率&#xff1a;文章生成机器人能够在较短的时间内自动帮助用户生成大量的文章&#xff0c;提…

Python 小型项目大全 21~25

二十一、DNA 可视化 原文&#xff1a;http://inventwithpython.com/bigbookpython/project21.html 脱氧核糖核酸是一种微小的分子&#xff0c;存在于我们身体的每个细胞中&#xff0c;包含着我们身体如何生长的蓝图。它看起来像一对核苷酸分子的双螺旋结构&#xff1a;鸟嘌呤、…

计算机网络微课堂1-3节

目录 1. TCP/TP协议​编辑 2. 3.调制解调器 4.因特网的组成 5.电路交换 6.分组交换 重要常用 7.报文交换 8.总结电路交换 报文交换和分组交换 9. 1. TCP/TP协议 2. ISP 网络提供商 ISP的三层 国际 国家 和本地 3.调制解调器 什么是调制解调器&#xff0c;它存在的…

Python 小型项目大全 11~15

十一、标题党生成器 原文&#xff1a;http://inventwithpython.com/bigbookpython/project11.html 我们的网站需要欺骗人们去看广告&#xff01;但是想出有创意的原创内容太难了。幸运的是&#xff0c;有了标题党生成器&#xff0c;我们可以让一台计算机产生数百万个令人发指的…

【Linux】浅析Input子系统

文章目录1. 框架1.1 数据结构1.2 evdev_handler1.3 evdev_init1.4 input_register_handler2. 应用如何打开节点并读取到事件数据2.1 evdev_fops2.2 evdev_open2.3 evdev_release2.4 evdev_read2.5 evdev_write2.6 evdev_poll2.7 evdev_fasync2.8 evdev_ioctl2.9 evdev_ioctl_co…

[考研数据结构]第3章之栈的基本知识与操作

文章目录 栈的基本概念 栈的实现 顺序栈 共享栈 链栈 栈的基本概念 栈的定义 栈&#xff08;Stack&#xff09;是只允许在一端进行插入或删除操作的线性表 相关术语 栈顶&#xff08;Top&#xff09;线性表允许进行插入或删除的那一端称之为栈顶栈底&#xff08;Bottom&…

【计算机网络-数据链路层】集线器、网桥、交换机

本文许多文字和图片使用了湖科大教书匠&#xff08;高军老师&#xff09;的 PPT&#xff0c;在此表示感谢。正是他让非科班的我能以奇妙的方式走进网络的世界。 文章目录1 【物理层】集线器&#xff08;Hub&#xff09;——共享式以太网1.1 为什么使用集线器&#xff1f;1.2 集…

macOS Monterey 12.6.5 (21G531) Boot ISO 原版可引导镜像

本站下载的 macOS 软件包&#xff0c;既可以拖拽到 Applications&#xff08;应用程序&#xff09;下直接安装&#xff0c;也可以制作启动 U 盘安装&#xff0c;或者在虚拟机中启动安装。另外也支持在 Windows 和 Linux 中创建可引导介质。 2023 年 4 月 10 日&#xff08;北京…

ESXI 6.7全面系统教程~汇总

ESXI 6.7全面系统教程 许可证&#xff1a;0A65P-00HD0-375M1-M097M-22P7H esxi 是一个脱机系统&#xff0c;也是一个虚拟机系统与vmware 相比&#xff0c;它可以直接运行在硬件上&#xff0c;这样可以减少资源浪费&#xff0c;一般用于服务器上&#xff1b;下面是esxi 的完整…
最新文章