CN115098163B - 一种基于组态可视化产品的多端适配方法 - Google Patents

Abstract

本发明涉及物联网技术领域，具体公开了一种基于组态可视化产品的多端适配方法，其中，包括：将可视化图形进行分组，得到多个可视化图形单元，并记录每个可视化图形单元的位置信息；建立媒体查询规则，以确定可视化图形所要适配的显示终端以及每个可视化图形单元在该显示终端上的显示样式；根据所要适配的显示终端以及每个可视化图形单元在该显示终端上的显示样式进行终端适配，完成可视化图形的适配显示。本发明提供的基于组态可视化产品的多端适配方法能够有效提升界面模型在多个终端进行展示的兼容性。

Description

一种基于组态可视化产品的多端适配方法

技术领域

本发明涉及物联网技术领域，尤其涉及一种基于组态可视化产品的多端适配方法。

背景技术

当需要构建一套工厂组态模型的时候，为快速构建自己的产品模型，可以借助Canvas等技术实现一个界面画板功能，将所需要展示的设备元素通过拖拽的方式放到画板中并最终将其应用为独立界面模型，可以减少大量的重复工作，然而目前大部分成型的产品所设计出的界面往往只是针对某一种终端的，例如有些PC端的设计并不能很好的展示到移动端中。

因此，如何提升界面模型在多个终端进行展示的兼容性成为本领域技术人员亟待解决的技术问题。

发明内容

本发明提供了一种基于组态可视化产品的多端适配方法，解决相关技术中存在的界面模型缺乏多个终端之间的显示兼容性的问题。

作为本发明的一个方面，提供一种基于组态可视化产品的多端适配方法，其中，包括：

将可视化图形进行分组，得到多个可视化图形单元，并记录每个可视化图形单元的位置信息；

建立媒体查询规则，以确定可视化图形所要适配的显示终端以及每个可视化图形单元在该显示终端上的显示样式；

根据所要适配的显示终端以及每个可视化图形单元在该显示终端上的显示样式进行终端适配，完成可视化图形的适配显示。

进一步地，将可视化图形进行分组，得到多个可视化图形单元，并记录每个可视化图形单元的位置信息，包括：

设置父级包裹器；

将所述可视化图形在所述父级包裹器内进行分组，以使得分组后的每个可视化图形单元均位于所述父级包裹器内；

标记每个可视化图形单元在所述父级包裹器内的绝对位置以及可视化图形单元在所述父级包裹器内的相对位置。

进一步地，根据所要适配的显示终端以及每个可视化图形单元在该显示终端上的显示样式进行终端适配，包括：

根据所要适配的显示终端以及每个可视化图形单元在该显示终端上的显示样式分别进行布局适配和图形适配。

进一步地，根据所要适配的显示终端以及每个可视化图形单元在该显示终端上的显示样式进行布局适配，包括：

确定所要适配的显示终端的显示边界，以使得所述父级包裹器位于所述显示边界范围内；

根据每个可视化图形单元在所述父级包裹器内的绝对位置以及可视化图形单元在所述父级包裹器内的相对位置确定每个可视化图形显示单元在该显示终端上的布局。

进一步地，确定所要适配的显示终端的显示边界，包括：

获取所要适配的显示终端的当前分辨率；

根据可视化图形单元在所述父级包裹器内的相对位置确定所要适配的显示终端在当前分辨率下的显示边界。

进一步地，根据所要适配的显示终端以及每个可视化图形单元在该显示终端上的显示样式进行图形适配，包括：

根据所要适配的显示终端以及每个可视化图形单元在该显示终端上的显示样式分别进行图形路径配置和图形压缩处理。

进一步地，建立媒体查询规则，以确定可视化图形所要适配的显示终端以及每个可视化图形单元在该显示终端上的显示样式，包括：

获取显示终端的机型设备型号；

根据所述机型设备型号确定显示终端的终端类型；

根据所述显示终端的终端类型确定对应的显示样式，其中所述显示终端的终端类型包括移动端和PC端。

进一步地，当所述显示终端的终端类型为移动端时，根据所述显示终端的终端类型确定对应的显示样式，包括：

确定移动端的DPR值以及操作系统类型；

根据移动端的DPR值以及操作系统类型对每个可视化图形单元进行缩放处理；

对缩放处理后的每个可视化图形单元确定显示样式，所述显示样式包括默认样式和自定义样式。

进一步地，当所述显示终端的终端类型为PC端时，根据所述显示终端的终端类型确定对应的显示样式，包括：

确定PC端的操作系统类型；

根据PC端的操作系统类型对每个可视化图形单元进行渲染处理；

对渲染处理后的每个可视化图形单元确定显示样式，所述显示样式包括默认样式和自定义样式。

进一步地，所述方法还包括在完成可视化图形的适配显示的步骤后进行的：

对完成终端适配的可视化图形依次进行媒体查询处理、自适应布局处理和图形优选处理，获得优化后的可视化图形。

本发明提供的基于组态可视化产品的多端适配方法，通过将可视化图形进行分组可以得到多个可视化图形单元，然后建立媒体查询规则，并确定显示样式，最终实现终端适配，这种方式只需要使用一套可视化设计配置即可在PC端和移动端均呈现，解决了现有技术中需要跨端适配的问题。另外针对不同的使用场景，减少了大量重复性工作，提高了产品的灵活性，且通过快速生成所需工业场景中的可视化应用，能够提高针对各个业务场景的及时性。

附图说明

附图是用来提供对本发明的进一步理解，并且构成说明书的一部分，与下面的具体实施方式一起用于解释本发明，但并不构成对本发明的限制。

图1为本发明提供的基于组态可视化产品的多端适配方法的流程图。

图2为本发明提供的基于组态可视化产品的多端适配方法的具体实施方式流程图。

具体实施方式

需要说明的是，在不冲突的情况下，本发明中的实施例及实施例中的特征可以相互结合。下面将参考附图并结合实施例来详细说明本发明。

为了使本领域技术人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分的实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本发明保护的范围。

需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包括，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

在本实施例中提供了一种基于组态可视化产品的多端适配方法，图1是根据本发明实施例提供的基于组态可视化产品的多端适配方法的流程图，如图1所示，包括：

S100、将可视化图形进行分组，得到多个可视化图形单元，并记录每个可视化图形单元的位置信息；

在本发明实施例中，具体可以包括：

设置父级包裹器；

将所述可视化图形在所述父级包裹器内进行分组，以使得分组后的每个可视化图形单元均位于所述父级包裹器内；

标记每个可视化图形单元在所述父级包裹器内的绝对位置以及可视化图形单元在所述父级包裹器内的相对位置。

应当理解的是，通过引入父级包裹器，在最终形成的canvas布局流设置里面，都将基于这个父级包裹器进行设置。分组后的每个可视化图形单元可以视为所述父级包裹器的子元素，即分组后的每个可视化图形单元均位于父级包裹器内。

在本发明实施例中，所述父级包裹器的作用可以理解为，标记其内子元素（即每个可视化图形单元）的相对位置，这样在通过媒体查询改变父级包裹器的位置从而保证子元素的布局不受影响。

此处需要说明的是，媒体查询可以根据当前显示设备的特性（如：视口宽度, 屏幕比例，设备显示方向）为其添加css样式，使用媒体查询可以在不改变页面内容的情况下为特定的设备显示特定的样式。如果没有媒体查询就不能。媒体查询能够帮助用户更方便的判断当前设备特性（视口宽度等），更方便的针对视口设置合适的样式。总之，媒体查询可以让网页适应多个终端。

S200、建立媒体查询规则，以确定可视化图形所要适配的显示终端以及每个可视化图形单元在该显示终端上的显示样式；

在本发明实施例中，如前文所述，为了实现通过媒体查询进行适配引入了父级包裹器的概念，通过媒体查询能够实现可视化图形的便捷性适配。

因此，为了实现媒体查询，在本发明实施例中，具体包括：

建立媒体查询规则，以确定可视化图形所要适配的显示终端以及每个可视化图形单元在该显示终端上的显示样式，包括：

获取显示终端的机型设备型号；

根据所述机型设备型号确定显示终端的终端类型；

根据所述显示终端的终端类型确定对应的显示样式，其中所述显示终端的终端类型包括移动端和PC端。

作为一种具体地实施方式，当所述显示终端的终端类型为移动端时，根据所述显示终端的终端类型确定对应的显示样式，包括：

确定移动端的DPR值（设备像素值）以及操作系统类型；

根据移动端的DPR值以及操作系统类型对每个可视化图形单元进行缩放处理；

对缩放处理后的每个可视化图形单元确定显示样式，所述显示样式包括默认样式和自定义样式。

作为另一种具体地实施方式，当所述显示终端的终端类型为PC端时，根据所述显示终端的终端类型确定对应的显示样式，包括：

确定PC端的操作系统类型；

根据PC端的操作系统类型对每个可视化图形单元进行渲染处理；

对渲染处理后的每个可视化图形单元确定显示样式，所述显示样式包括默认样式和自定义样式。

应当理解的是，在媒体查询中，可以根据当前的机型设备型号进行记录，以便于找到适配于该终端的模式，如果终端判定为PC端，可以直接进行画布渲染；如果是移动端，则需要更进一步适配移动端的操作系统以及DPR值，并且在canvas元素中可以依据这些值进行等比例缩放。

在本发明实施例中，无论是PC端还是移动端，其显示样式均可以根据需要进行自定义设置，也可以选择默认样式。

S300、根据所要适配的显示终端以及每个可视化图形单元在该显示终端上的显示样式进行终端适配，完成可视化图形的适配显示。

在本发明实施例中，为了实现终端适配，具体可以包括：

根据所要适配的显示终端以及每个可视化图形单元在该显示终端上的显示样式分别进行布局适配和图形适配。

如图2所示，所述终端适配具体可以包括布局适配和图形适配。

进一步具体地，根据所要适配的显示终端以及每个可视化图形单元在该显示终端上的显示样式进行布局适配，包括：

确定所要适配的显示终端的显示边界，以使得所述父级包裹器位于所述显示边界范围内；

根据每个可视化图形单元在所述父级包裹器内的绝对位置以及可视化图形单元在所述父级包裹器内的相对位置确定每个可视化图形显示单元在该显示终端上的布局。

在本发明实施例中，确定所要适配的显示终端的显示边界，包括：

获取所要适配的显示终端的当前分辨率；

根据可视化图形单元在所述父级包裹器内的相对位置确定所要适配的显示终端在当前分辨率下的显示边界。

在本发明实施例中，布局适配中基于父级包裹器的概念，设计原件是存放于父级包裹器中的，在不同的终端设备下可以先进行父元素的边界判断，比如寻找到设备边界，并以此保证该父元素不会超出边界范围，同时，用户也可以自行划定安全边界，这一步可以看成是视图区域的安全限定。当保证了父级元素的位置后，子元素的位置是依赖于父元素的，即父元素本身也会有一个安全边界的概念，当子元素的相对位置发生变化时，父元素内部同样也会进行一次安全计算。

具体地，在边界计算时，在可视化图形的绘制过程中，实时记录了每个图形的相对位置，当设备分辨率有所调整的时候，可以将图形原有存储的相对位置信息提取出来作为相对于新屏幕尺寸的位置，由于父级包裹器的存在，避免了图形原件在适应不同分辨率时所发生的较大偏移，最大程度保证原有位置的一致性。

综上，本发明实施例提供的基于组态可视化产品的多端适配方法，通过将可视化图形进行分组可以得到多个可视化图形单元，然后建立媒体查询规则，并确定显示样式，最终实现终端适配，这种方式只需要使用一套可视化设计配置即可在PC端和移动端均呈现，解决了现有技术中需要跨端适配的问题。另外针对不同的使用场景，减少了大量重复性工作，提高了产品的灵活性，且通过快速生成所需工业场景中的可视化应用，能够提高针对各个业务场景的及时性。

如图2所示，为了对完成可视化图形的适配显示进行进一步优化，所述方法还包括：

对完成终端适配的可视化图形依次进行媒体查询处理、自适应布局处理和图形优选处理，获得优化后的可视化图形。

具体地，所述自适应布局处理具体可以理解为，能够根据当前的显示界面进行自适应布局，以提升显示效果。

应当理解的是，通过对完成终端适配的可视化图形进行媒体查询处理、自适应布局处理和图形优化处理后，能够获得更加优化的可视化图形。

在本发明实施例中，针对图形优选的具体实施过程，在不同设备下，所需要的图片规格是不同的，比如DPR值为1的设备，选用@3x图会造成资源浪费，对性能也会有一定影响。所以在设备更换后，需要读取当前的设备信息进行资源比对，动态调整所需的图片格式。当用户上传新图片时，会对图片文件进行重绘压缩处理，即通过将文件转为img对象，将宽高属性进行自定义等比缩放后通过canvas重新绘制，保存到服务器时直接将canvas转为文件对象进行存储，最大限度减少图片的资源占用。

综上，本发明实施例提供的基于组态可视化产品的多端适配方法，在完成可视化图形的适配显示后，能够有效提升界面模型在多个终端进行展示的兼容性。且为了进一步的实现展示效果，通过媒体查询、自适应布局以及图形优选处理，达到智能优选合适的可视化组件，增强产品的稳定性的效果。

可以理解的是，以上实施方式仅仅是为了说明本发明的原理而采用的示例性实施方式，然而本发明并不局限于此。对于本领域内的普通技术人员而言，在不脱离本发明的精神和实质的情况下，可以做出各种变型和改进，这些变型和改进也视为本发明的保护范围。

Claims (9)

1.一种基于组态可视化产品的多端适配方法，其特征在于，包括：

将可视化图形进行分组，得到多个可视化图形单元，并记录每个可视化图形单元的位置信息；

建立媒体查询规则，以确定可视化图形所要适配的显示终端以及每个可视化图形单元在该显示终端上的显示样式；

根据所要适配的显示终端以及每个可视化图形单元在该显示终端上的显示样式进行终端适配，完成可视化图形的适配显示；

其中，将可视化图形进行分组，得到多个可视化图形单元，并记录每个可视化图形单元的位置信息，包括：

设置父级包裹器；

将所述可视化图形在所述父级包裹器内进行分组，以使得分组后的每个可视化图形单元均位于所述父级包裹器内；

标记每个可视化图形单元在所述父级包裹器内的绝对位置以及可视化图形单元在所述父级包裹器内的相对位置；

所述可视化图形基于Canvas实现。

2.根据权利要求1所述的基于组态可视化产品的多端适配方法，根据所要适配的显示终端以及每个可视化图形单元在该显示终端上的显示样式进行终端适配，包括：

根据所要适配的显示终端以及每个可视化图形单元在该显示终端上的显示样式分别进行布局适配和图形适配。

3.根据权利要求2所述的基于组态可视化产品的多端适配方法，其特征在于，根据所要适配的显示终端以及每个可视化图形单元在该显示终端上的显示样式进行布局适配，包括：

确定所要适配的显示终端的显示边界，以使得所述父级包裹器位于所述显示边界范围内；

根据每个可视化图形单元在所述父级包裹器内的绝对位置以及可视化图形单元在所述父级包裹器内的相对位置确定每个可视化图形显示单元在该显示终端上的布局。

4.根据权利要求3所述的基于组态可视化产品的多端适配方法，其特征在于，确定所要适配的显示终端的显示边界，包括：

获取所要适配的显示终端的当前分辨率；

根据可视化图形单元在所述父级包裹器内的相对位置确定所要适配的显示终端在当前分辨率下的显示边界。

5.根据权利要求2所述的基于组态可视化产品的多端适配方法，其特征在于，根据所要适配的显示终端以及每个可视化图形单元在该显示终端上的显示样式进行图形适配，包括：

根据所要适配的显示终端以及每个可视化图形单元在该显示终端上的显示样式分别进行图形路径配置和图形压缩处理。

6.根据权利要求1所述的基于组态可视化产品的多端适配方法，其特征在于，建立媒体查询规则，以确定可视化图形所要适配的显示终端以及每个可视化图形单元在该显示终端上的显示样式，包括：

获取显示终端的机型设备型号；

根据所述机型设备型号确定显示终端的终端类型；

根据所述显示终端的终端类型确定对应的显示样式，其中所述显示终端的终端类型包括移动端和PC端。

7.根据权利要求6所述的基于组态可视化产品的多端适配方法，其特征在于，当所述显示终端的终端类型为移动端时，根据所述显示终端的终端类型确定对应的显示样式，包括：

确定移动端的DPR值以及操作系统类型；

根据移动端的DPR值以及操作系统类型对每个可视化图形单元进行缩放处理；

对缩放处理后的每个可视化图形单元确定显示样式，所述显示样式包括默认样式和自定义样式。

8.根据权利要求6所述的基于组态可视化产品的多端适配方法，其特征在于，当所述显示终端的终端类型为PC端时，根据所述显示终端的终端类型确定对应的显示样式，包括：

确定PC端的操作系统类型；

根据PC端的操作系统类型对每个可视化图形单元进行渲染处理；

对渲染处理后的每个可视化图形单元确定显示样式，所述显示样式包括默认样式和自定义样式。

9.根据权利要求1所述的基于组态可视化产品的多端适配方法，其特征在于，所述方法还包括在完成可视化图形的适配显示的步骤后进行的：

对完成终端适配的可视化图形依次进行媒体查询处理、自适应布局处理和图形优选处理，获得优化后的可视化图形。

Images