CN111079045A - 一种定制化页面的全屏显示方法及储存介质、系统 - Google Patents

Abstract

本发明公开了一种定制化页面的全屏显示方法及储存介质、系统,运行以下步骤：采集页面平面设计图，所述页面平面设计图上包括背景图像以及若干个设备图像；切割分离页面平面设计图，将若干个设备图像从背景图像上分离以形成若干个预留窗口；获取设备的位置信息；将与设备对应的设备状态元素按照位置信息设置于与设备对应的预留窗口上，并且调整设备状态元素的比例以适配于预留窗口以形成整合布局页面；监听外部可视窗口的变化，根据可视窗口的变化并且基于自适应屏幕算法调整整合布局页面以全屏渲染显示；本设计控制便捷，处理成整合布局页面后才自适应变化，实现灵活变化，处理程序简单，对硬件配置要求低。

Description

一种定制化页面的全屏显示方法及储存介质、系统

技术领域

本发明涉及物联网可视化显示领域，特别是一种定制化页面的全屏显示方法及储存介质、系统。

背景技术

近年来社会不断进步，移动互联网快速发展，以及云计算、5G移动通信等技术日趋成熟，推动了物联网、智慧城市、智能家居等的迅速发展，智能设备在人们日常生活中无处不在。随着智能设备在人类生活中的普及，人们对智能设备状态的监测与控制就显得越来越重要，同时，越来越多的公共设施都装配了智能设备，为了更好的为管理人员提供对智能设备状态的查看与监控，并且能够更精确的定位故障源，就需要根据不同的现场环境以及不同的智能设备定制个性化的监控视图，并且通过显示屏幕进行显示；

一般来讲，显示屏幕上展示的监控视图中包括固定不动的背景图像以及根据设备的运行状态需要相应改变的设备状态元素，由于每个现场环境的格局不同，也就意味着每个现场环境都对应着不同的背景图像，同时，设备的安装位置的不同，也意味着设备在背景图像上的相对位置也不同，设计者一般只会提供对应该现场环境的页面平面设计图，页面平面设计图上包括背景图像以及若干个设备图像，能够从页面平面设计图上看出现场环境的格局以及设备的安放位置，但是页面平面设计图仅仅是以图片格式提供，系统无法通过对其上的设备图像进行简单的处理即可改变设备图像的呈现方式，从而反映设备的状态；同时，用于显示的屏幕规格也不尽相同，为了能够兼容不同的设备屏幕，就需要开发多套应用程序，那么自动化构建定制化页面与最大化自适应屏幕就愈发的重要。

目前，传统的全设备屏幕适应方法有以下几种：

一、Media Queries(媒体查询)方式进行适应，具体的在head(HTML文档的头部)中添加一段Media Queries(媒体查询)的style(样式)代码，判断不同的设备设置不同的布局和像素。该方式的本质是针对不同的屏幕尺寸写多套布局，这种方式可以做到像素比的判断，方法简单，当屏幕宽度发生变化时可响应式展示。但是其代码量比较重，维护起来也不方便，同时也会损失一些PC端和移动端各自特有的交互方式。

二、Flex弹性盒布局，通过固定viewport(可视区域)的高度，利用flex的栅格布局特性来自适应屏幕的宽度。这种方式的布局精简不需要额外引入第三方库来支持栅格布局，但是这种方式无法做到全屏自适应，并且兼容性上也没有那么好。

三、通过CSS3(第三代层叠样式表标准)中的rem(根元素的字体大小)单位配合全局的font-size(字体大小)属性进行各设备的屏幕适应，具体的通过屏幕的宽度来设定根元素的font-size，在需要适配的元素使用rem来设置宽高，这种方式只能模糊适配，同样无法做到全屏自适应。

四、通过第三代层叠样式表标准中的vw(可视区域的宽度百分比)与vh(可视区域的高度百分比)单位进行适配。本质就是相对可视窗口的大小来设置元素的大小，从而实现适配。此方式直观，利于维护，但是如果只考虑其中一个单位进行适配就无法做到全屏自适应，如果同时使用vw和vh进行设置容易导致页面图片的压缩变形，其次，兼容性上也不理想。

以上方式都不能很好的做到根据现场的环境定制化显示不同的页面，容易出现精度不够图像偏差等问题，并且也很难做到以最佳全屏适应方式进行适配不同的设备屏幕。

发明内容

本发明的目的在于至少解决现有技术中存在的技术问题之一，提供一种定制化页面的全屏显示方法及储存介质、系统，能够灵活的变换，自动适应屏幕大小以全屏渲染。

本发明采用的技术方案是：

一种定制化页面的全屏显示方法，包括以下步骤：采集页面平面设计图，所述页面平面设计图上包括背景图像以及若干个设备图像；切割分离页面平面设计图，将若干个设备图像从背景图像上分离以形成若干个预留窗口；获取设备的位置信息；将与设备对应的设备状态元素按照位置信息设置于与设备对应的预留窗口上，并且调整设备状态元素的比例以适配于预留窗口以形成整合布局页面；监听外部可视窗口的变化，根据可视窗口的变化并且基于自适应屏幕算法调整整合布局页面以全屏渲染显示。

所述设备状态元素包括多个设备状态图标，将与设备对应的任一设备状态图标按照位置关系信息设置于对应的预留窗口上。

检测设备的运行状态信息，根据设备的运行状态信息选取不同的设备状态图标设置于与该设备对应的预留窗口上。

在切割分离页面平面设计图时，分离出来的设备图像作为设备状态元素中的其一设备状态图标。

在切割分离页面平面设计图时，对分离出来的设备图像进行与背景图像匹配的等比例处理。

在切割分离页面平面设计图时，提取其中一种设备图像，再在页面平面设计图中抽取与先提取的设备图像相同的设备图像。

给定设备的ID编号，并且设备的ID编号与对应的设备的位置信息以及设备状态元素配对并形成配置文件。

通过JavaScript的BOM和DOM应用程序接口监听外部可视窗口的变化，并且设置事件节流方式以修饰回调，并采用异步编程方式来调用自适应屏幕算法调整整合布局页面。

根据本发明实施例的一种定制化页面的全屏显示方法，至少具有如下有益效果：

本发明将采集的页面平面设计图上的背景图像以及若干个设备图像分离，并且在背景图像中留下若干个预留窗口，根据与分离的设备图像对应的设备的位置信息，将对应该设备的设备状态元素添加到对应的预留窗口处，调整适配于预留窗口的大小，从而形成整合布局页面，并且在后续的使用过程中，由于背景图像是不变的，变化的是设备状态元素，只需要更换设备状态元素即可，然后此时整合布局页面的中设备状态元素以及背景图像已经相互匹配，只需要根据外部可视窗口的变化，采用自适应屏幕算法将整合布局页面渲染到外部可视窗口，本设计控制便捷，处理成整合布局页面后才自适应变化，实现灵活变化，处理程序简单，对硬件配置要求低。

本发明还公开了一种储存介质，储存有上述实施例中公开的任一所述一种定制化页面的全屏显示方法的程序。

根据本发明实施例的一种储存介质，至少具有如下有益效果：

本发明储存介质，能够被计算机读取内部的程序并且运行，从而对获取的页面平面设计图进行处理，根据外部设备的情况灵活变换设备状态元素，并且通过简单的程序处理，即可完成自适应的全屏渲染，对硬件配置要求低，计算机能够流畅运行。

本发明还公开了一种系统，包括监控模块以及与监控模块连接的显示模块，所述监控模块能够按照上述任一实施例公开的一种定制化页面的全屏显示方法控制显示模块全屏渲染显示定制化页面。

根据本发明实施例的一种系统，至少具有如下有益效果：

本发明通过监控模块与外部的若干个设备连接，并且检测外部的若干个设备的运行状态，监控模块获取页面平面设计图，并且将其上的背景图像以及若干个设备图像分离，并且在背景图像中留下若干个预留窗口，然后根据设备的位置信息，一一配对地将设备动态元素添加到对应的预留窗口处，并且根据外部设备的运行状态来变换设备动态元素，然后调整设备动态元素使其适配于预留窗口的大小，从而形成整合布局页面，采用自适应屏幕算法将整合布局页面渲染到外部可视窗口，本设计控制便捷，处理成整合布局页面后才自适应变化，实现灵活变化，处理程序简单，对硬件配置要求低。

附图说明

下面结合附图对本发明的具体实施方式做进一步的说明。

图1是本发明定制化页面的全屏显示方法的处理流程图。

图2是本发明定制化页面的全屏显示方法的应用系统的结构原理图。

具体实施方式

本部分将详细描述本发明的具体实施例，本发明之较佳实施例在附图中示出，附图的作用在于用图形补充说明书文字部分的描述，使人能够直观地、形象地理解本发明的每个技术特征和整体技术方案，但其不能理解为对本发明保护范围的限制。

在本发明的描述中，若干的含义是一个或者多个，多个的含义是两个以上，大于、小于、超过等理解为不包括本数，以上、以下、以内等理解为包括本数。如果有描述到第一、第二只是用于区分技术特征为目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量或者隐含指明所指示的技术特征的先后关系。

本发明的描述中，除非另有明确的限定，设置、安装、连接等词语应做广义理解，所属技术领域技术人员可以结合技术方案的具体内容合理确定上述词语在本发明中的具体含义。

如图1所示，一种定制化页面的全屏显示方法，包括以下步骤：

采集页面平面设计图，页面平面设计图上包括背景图像以及若干个设备图像；切割分离页面平面设计图，将若干个设备图像从背景图像上分离以形成若干个预留窗口；获取设备的位置信息；将与设备对应的设备状态元素按照位置信息设置于与设备对应的预留窗口上，并且调整设备状态元素的比例以适配于预留窗口以形成整合布局页面；监听外部可视窗口的变化，根据可视窗口的变化并且基于自适应屏幕算法调整整合布局页面以全屏渲染显示。

其中，设计者可以根据现场的实际环境和地理建筑环境，设计并绘制出需要定制化显示的页面平面设计图，以图片的格式输入或者直接在UI中设计生成后输入到本设计的环节中。

在某些实施例中，设备的位置信息可以是预设的，设计者在设计页面平面设计图时也可以给定设备的位置信息，例如，还可以包括步骤：给定设备的ID编号，并且设备的ID编号与对应的设备的位置信息以及设备状态元素配对并形成配置文件，在设计时，可以利用设定的设备的ID编号，将每个设备的工作状态数据、每个设备的位置信息、对应每个设备的预留窗口以及每个设备的设备状态元素都相互关联，在处理过程中，便于将以上数据相互配对。

本发明将采集的页面平面设计图上的背景图像以及若干个设备图像分离，并且在背景图像中留下若干个预留窗口，根据与分离的设备图像对应的设备的位置信息，将对应该设备的设备状态元素添加到对应的预留窗口处，调整适配于预留窗口的大小，从而形成整合布局页面，并且在后续的使用过程中，由于背景图像是不变的，变化的是设备状态元素，只需要更换设备状态元素即可，然后此时整合布局页面的中设备状态元素以及背景图像已经相互匹配，只需要根据外部可视窗口的变化，采用自适应屏幕算法将整合布局页面渲染到外部可视窗口，本设计控制便捷，处理成整合布局页面后才自适应变化，实现灵活变化，处理程序简单，对硬件配置要求低。

在某些实施例中，通过JavaScript的BOM和DOM应用程序接口监听外部可视窗口的变化，并且设置事件节流方式以修饰回调，并采用异步编程方式来调用自适应屏幕算法调整整合布局页面，实现视图的最大化自适应屏幕，并使用闭包进行封装，遵循ES Module规范对外提供调用的接口。

设置事件节流方式以修饰回调，并采用异步编程方式来调用自适应屏幕算法，可以防止误触发，并且具备防抖功能，使得屏幕显示更加稳定。

其中，可以通过BOM和DOM应用程序接口获取窗口大小记为winInfo，通过winInfo以及原始layout定义的宽高比进来获取当前屏幕的宽高比与原始屏幕(整合布局页面)宽高比，然后，自适应屏幕算法可以是计算出宽度缩放比与高度缩放比，最后通过比较当前屏幕的宽高比与原始屏幕宽高比来统一缩放比，具体的，若当前屏幕的宽高比大于原始屏幕宽高比则采用宽适应，即占满宽度，垂直居中；若当前屏幕的宽高比小于原始屏幕宽高比则采用高适应，即占满高度，水平居中；若两者比例相等，取任意一种适应即可。

在某些实施例中，设备状态元素包括多个设备状态图标，将与设备对应的任一设备状态图标按照位置关系信息设置于对应的预留窗口上。

例如，在设备状态元素中包括两个设备状态图标，可以选用两个设备状态图标中任意一个按照位置关系信息设置于对应的预留窗口上，在需要更换设备状态元素时，则可以选用另外的设备状态图标，再整合与背景图像上形成整合布局页面。

检测设备的运行状态信息，根据设备的运行状态信息选取不同的设备状态图标设置于与该设备对应的预留窗口上。

例如，设备状态元素中包括两个设备状态图标，分别是表示正常运行状态的启动设备状态图标和表示故障或停运状态的停止设备状态图标，检测设备的运行状态信息，当设备正常，则采用启动设备状态图标安置于与该设备对应的预留窗口上，再生成整合布局页面。

在某些实施例中，设备状态元素可以是开发程序时设定的代表不同设备以及状态的样本，可供选用；

或者，在切割分离页面平面设计图时，分离出来的设备图像作为设备状态元素中的其一设备状态图标，由于在部分情况下，页面平面设计图上的设备图像在样本中未必存在，则可以直接选用分离出来的设备图像，然后通过改变设备图像的颜色等方式来形成设备状态图标，以供选用。

由于需要利用分离出来的设备图像，在切割分离页面平面设计图时，部分软件在分离切割时会感变了原来的设备图像，因此需要对分离出来的设备图像进行与背景图像匹配的等比例处理，使得使用的设备图像与背景图像的大小比例相同。

在某些实施例中，设备的位置信息等数据可以采用轻量级且具有较好兼容性的json格式作为配置格式，再将设备状态图标通过Ajax异步加载技术动态加载入页面平面设计图中，该格式文件能与前端无缝相接；在布局时，考虑到设备状态元素的位置是相对于页面平面设计图来定位，故可以采用position定位布局方式中的相对布局和绝对布局配合实现，例如，先定义父组件的背景为页面平面设计图的背景元素，并设置布局为相对布局，此时所有的子组件即可以通过绝对布局的特点方便的相对于父组件来布局，当页面大小更改的时候，只需要计算出父组件的变化就可以适用于所有的子组件。

在切割分离页面平面设计图时，由于页面平面设计图中的设备图像都是采用比较规则的样本来添加在背景上设计的，并且相同的设备的样式基本一致，因此可以通过特征图像识别的方法提取其中的设备图像信息，并且进行切割分离，并且再在页面平面设计图中抽取与先提取的设备图像相同的设备图像，利用提取的设备图像与页面平面设计图中相同的图像匹配，使得精准度更高，匹配也更加迅速。

本发明的实施例还公开了一种储存介质，储存有上述实施例中公开的任一一种定制化页面的全屏显示方法的程序。

本发明的储存介质，能够被计算机读取内部的程序并且运行，从而对获取的页面平面设计图进行处理，根据外部设备的情况灵活变换设备状态元素，并且通过简单的程序处理，即可完成自适应的全屏渲染，对硬件配置要求低，计算机能够流畅运行。

本发明的实施例还公开了还公开了一种系统，如图2所示，包括监控模块1以及与监控模块1连接的显示模块2，监控模块1能够按照上述任一实施例公开的一种定制化页面的全屏显示方法控制显示模块2全屏渲染显示定制化页面。

在某些实施例中，本设计可应用于监控系统中，监控模块1可以是常规的智能设备信息采集卡，显示模块2可以是客户端的屏幕，通过智能设备信息采集卡对各个智能设备4的状态和行为数据进行采集,将数据加密后通过MQTT协议推送至云平台3,云平台3将数据进行解析过滤后通过WebSocket协议推送至客户端,客户端可以是Web端、Android移动端和iOS移动端等，此处不进行限定，客户端可根据不同现场环境的设计图纸来进行处理，定制化页面，并通过自适应屏幕算法全屏显示在屏幕上。

在某些实施例中，本方法可以通过webpack编译打包，并且在编译打包过程中，通过自定义plugin插件和loader源码编译加载器来定制程序打包的配置信息，最终生成适用于多浏览器甚至跨平台的可执行程序，同时，可利用happypack打包插件将打包与压缩并行化，优化打包速度，从而能够将满足ES Module方式的前端工程化代码进行生产环境下的编译、混淆、打包与压缩，便于与前端设备构建联系，合理运行。

其中，webpack是一个JavaScript应用程序的静态模块打包器，当webpack处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle(项目工程包)。同时，Webpack周边具有丰富的loader(源码加载器)和plugin(插件)供开发者灵活的配置应用，并且，也支持自定义的loader和plugins来实现高度可配置。webpack的目标是将前端静态代码工程化，很大程度上的改善了传统的前端开发模式，让开发者能够更方便、自动化地构建和优化前端项目。

LiveServer是一款NodeJS管理工具，为项目提供一个微型的Web服务，并且自动全局监听文件修改，通过websocket进行实时更新。该工具可通过自定义plugin的方式融入进webpack中，具有更轻量级，启动更快，并且能够自动刷新页面。

本发明通过监控模块与外部的若干个设备连接，并且检测外部的若干个设备的运行状态，监控模块获取页面平面设计图，并且将其上的背景图像以及若干个设备图像分离，并且在背景图像中留下若干个预留窗口，然后根据设备的位置信息，一一配对地将设备动态元素添加到对应的预留窗口处，并且根据外部设备的运行状态来变换设备动态元素，然后调整设备动态元素使其适配于预留窗口的大小，从而形成整合布局页面，采用自适应屏幕算法将整合布局页面渲染到外部可视窗口，本设计控制便捷，处理成整合布局页面后才自适应变化，实现灵活变化，处理程序简单，对硬件配置要求低。

本领域的技术人员容易理解的是，在不冲突的前提下，上述优选方式可以自由地组合和叠加。

上面结合附图对本发明实施例作了详细说明，但是本发明不限于上述实施例，在所述技术领域普通技术人员所具备的知识范围内，还可以在不脱离本发明宗旨的前提下作出各种变化。

Claims (10)

1.一种定制化页面的全屏显示方法，其特征在于，包括以下步骤：采集页面平面设计图，所述页面平面设计图上包括背景图像以及若干个设备图像；

切割分离页面平面设计图，将若干个设备图像从背景图像上分离以形成若干个预留窗口；

获取设备的位置信息；

将与设备对应的设备状态元素按照位置信息设置于与设备对应的预留窗口上，并且调整设备状态元素的比例以适配于预留窗口以形成整合布局页面；

监听外部可视窗口的变化，根据可视窗口的变化并且基于自适应屏幕算法调整整合布局页面以全屏渲染显示。

2.根据权利要求1所述的一种定制化页面的全屏显示方法，其特征在于：所述设备状态元素包括多个设备状态图标，将与设备对应的任一设备状态图标按照位置关系信息设置于对应的预留窗口上。

3.根据权利要求1所述的一种定制化页面的全屏显示方法，其特征在于：检测设备的运行状态信息，根据设备的运行状态信息选取不同的设备状态图标设置于与该设备对应的预留窗口上。

4.根据权利要求2所述的一种定制化页面的全屏显示方法，其特征在于：在切割分离页面平面设计图时，分离出来的设备图像作为设备状态元素中的其一设备状态图标。

5.根据权利要求4所述的一种定制化页面的全屏显示方法，其特征在于：在切割分离页面平面设计图时，对分离出来的设备图像进行与背景图像匹配的等比例处理。

6.根据权利要求1所述的一种定制化页面的全屏显示方法，其特征在于：在切割分离页面平面设计图时，提取其中一种设备图像，再在页面平面设计图中抽取与先提取的设备图像相同的设备图像。

7.根据权利要求1所述的一种定制化页面的全屏显示方法，其特征在于：给定设备的ID编号，并且设备的ID编号与对应的设备的位置信息以及设备状态元素配对并形成配置文件。

8.根据权利要求1所述的一种定制化页面的全屏显示方法，其特征在于：通过JavaScript的BOM和DOM应用程序接口监听外部可视窗口的变化，并且设置事件节流方式以修饰回调，并采用异步编程方式来调用自适应屏幕算法调整整合布局页面。

9.一种储存介质，其特征在于，储存有如权利要求1-权利要求8任一项所述一种定制化页面的全屏显示方法的程序。

10.一种系统，其特征在于，包括监控模块以及与监控模块连接的显示模块，所述监控模块能够按照如权利要求1-权利要求8任一项所述一种定制化页面的全屏显示方法控制显示模块全屏渲染显示定制化页面。

Images