CN110347392B - 数据可视化大屏展示页面自适应排版和刷新的方法及装置 - Google Patents

Abstract

数据可视化大屏展示页面自适应排版和刷新的装置涉及信息技术领域。本发明采取页面展示元素自适应浏览器的可视化区间的大小的自适应方法，重新排版的触发方式采用页面刷新的方式，通过浏览器类型检测器，浏览器状态检测器，大屏参数检测器采集的信息由浏览器状态判断器判断出浏览器状态，在根据浏览器的不同状态采取不同的页面刷新方式，有效的控制了页面的刷新频率，杜绝了由于浏览器状态切换使大屏展示信息丢失或用户输入信息丢失现象。

Description

数据可视化大屏展示页面自适应排版和刷新的方法及装置

技术领域

本发明涉及信息技术领域，尤其是软件开发领域。

背景技术

数据可视化页面有一个重要的分支即专门在一些专业设备上展示的页面，业内称之为大屏展示页面简称大屏页面。这类大屏页面展示的环境往往是高清的投影仪，或者是LED屏幕，或者是类似影院的巨幕环境下。

这种大屏页面在设计和开发中有着自身独有的特点，这些特点总结如下：

相关定义：浏览器的可视区间即浏览器展示内容的区间，可视区间不包含浏览器的地址栏、工具栏和滚动条这些元素。

特点1：浏览器展示大屏页面，大屏的内容往往会占满整个浏览器的可视区间，大屏页面不能出现垂直和水平的滚动条；

特点2：大屏页面需要自适应屏幕的功能，这样能保证大屏页面不同类型的展示介质下都能保证正确并且美观的展示效果。

由以上两个特点，大屏的技术实现上会有如下技术要求，具体如下：

要求1：大屏页面要禁止滚动条的出现

要求2：大屏页面需要获取浏览器可视区间的宽度和高度，大屏的内容展示都以此可视区间的大小来进行排版布局以及相关内容展示的编排；

要求3：需要动态监测浏览器可视化区间宽高的方法，当发现浏览器可视化区间大小发生变化后，页面执行重排页面的方法，让页面的展示内容根据实际可视化区间的宽度和高度进行重新布局。

在业界解决浏览器固定可视化区间的方法基本都是统一的，即使用css技术对于页面的body元素进行样式控制；Overflow属性值为hidden，让body元素在水平和垂直方向都禁止使用滚动条。有些场景下页面还会在body元素上设置width和height都为100%，这样就使得浏览器的可视区间进一步限制宽度和高度。

关于页面自适应页面可视化区间的技术手段，页面一般都是使用页面window下的onresize事件，onresize事件在浏览器的宽度和高度发生1px的变化都会被成功触发。

页面监测到浏览器宽度和高度变化后，页面就需要调用onresize的回调函数将页面的展示元素进行重新排版布局，页面重新排版技术是页面整个自适应的技术难点所在，本发明人收集业界的处理方法汇总下来大致有两种方案，具体如下：

方案1：当页面被通知要执行页面重新布局操作后，开发人员会将页面每一个需要重排的元素都进行重新的排版布局操作。该方案功能实现起来特别的繁琐和复杂，研发人员需要非常细致的梳理出页面每个需要重新排版布局的元素，大到页面里比较显眼的用于排版布局的容器，小到一个标题甚至一个小图标都要进行重新的排版布局，如果碰到页面使用不同类型的排版布局技术，那么页面重排还需要兼容排版布局的差异性，采用此方案会让页面里存在大量专门用于页面自适应的代码，这也导致整个页面的代码变得臃肿，代码的健壮性和可维护性都大大的降低。因此在实际生产应用中，该方案基本都是做有限的大屏自适应操作即保证重要的排版布局进行重排，细微的展示元素往往会被忽略。不过该方案有一个优势，这个优势就是页面的重新排版布局操作不需要重新刷新页面，这也是该方案虽然繁琐，但是任然被广泛使用的一个重要原因。

方案2：页面展示元素的排版布局跟浏览器的可视化区间的大小密切相关，页面展示元素自适应浏览器的可视化区间的大小在业界一般有两种实现方案，第一种方案是页面展示元素的宽高以及位置通过比率来进行定位，例如：CSS的盒子模型里width或者height使用百分比，css的flex布局使用flex元素设置元素在可视化区间里的比例。第二种方案就是页面可视化元素都采用相对于body元素的绝对定位，在一个参考的可视化区间下动态计算展示元素的宽度、高度以及top和left的值。方案2触发页面展示元素重排的方法就是让页面重新刷新。

方案2操作简单，代码也很容易在不同大屏页面里进行复用，因此它是比方案1更加常见和通用的展示元素自适应解决方案，但是该方案有个问题，那就是浏览器只要可视化区间大小变化都会导致页面刷新，这就产生了如下的问题：

问题1：如果大屏页面上有一定的操作步骤，当页面操作步骤还没有操作完毕，如果此时触发了页面自适应功能页面自动刷新，这就让前面所做的操作步骤都无效。本发明碰到最常见的场景就是浏览器本来以全屏方式展示页面，由于操作的要求，需要将页面退出全屏，这时候因为浏览器可视化区间大小发生了变化，这就触发了页面的重新刷新。

问题2：大屏页面展示的数据往往要请求相应的服务端，因此页面初始化时候页面完全加载都是需要一定的时间，如果页面请求响应的时间过长，这就会影响页面的用户体验，从而影响到页面最终的展示效果，因此在演示过程中适当的减少页面整体刷新是保证演示质量的一个重要手段。

本发明的数据可视化大屏展示页面自适应排版和刷新的方法及装置采取页面展示元素自适应浏览器的可视化区间的大小的自适应方法，重新排版的触发方式采用页面刷新的方式，通过浏览器类型检测器，浏览器状态检测器，大屏参数检测器采集的信息由浏览器状态判断器判断出浏览器状态，在根据浏览器的不同状态采取不同的页面刷新方式，有效的控制了页面的刷新频率，杜绝了由于浏览器状态切换使大屏展示信息丢失或用户输入信息丢失现象。

现有相关技术描述

本发明将大屏展示的模式分为主要展示模式和次要展示模式；主要展示模式指浏览器的全屏模式和浏览器的最大化模式；次要展示模式：指浏览器非最大化模式；一般而言，大屏页面的作用主要是演示系统的业务功能，因此在正规的演示场景下，浏览器都是处于主要展示模式下，因此主要展示模式是大屏演示的核心模式。而次要场景往往只是在页面开发和调试阶段才会有作用。

因此本发明的技术方案首先要解决的一个技术问题就是如何辨别浏览器可视化区间大小是处在主要展示模式还是处在次要展示模式下，更加具体的方案就是如何让页面能辨别出浏览器是在全屏模式、最大化模式还是非最大化模式下。

浏览器没有提供统一的API来判断出浏览器是处在全屏、最大化和非最大化。当然部分浏览器有方法可以判别浏览器是不是全屏化，但是这样的方法不是时下全部不同浏览器都实现的功能，因此无法做到浏览器的兼容性问题。

浏览器自身没有提供专门的API让研发人员知晓浏览器是处于那种，我们可使用浏览器自身的宽度和高度与电脑的自身屏幕的宽度和高度对比的方式计算出浏览器所处的当前模式，因此我们首先要了解下浏览器如何确定自身宽高的相关知识：

window对象代表浏览器，screen对象代表电脑的屏幕，body对象代表浏览器内容展示的区间。当浏览器全屏显示的时候，也就是隐藏了操作系统的任务栏和浏览器自身的工具栏，并将操作系统任务栏和浏览器的工具栏自身的高度加到了浏览器可视化区间里即加到body的高度上。

浏览器会对每个页面定义一个window对象，几乎所有类型的浏览器都实现了window的outerWidth、outerHeight、innerWidth和innerHeight共4个属性以及获取电脑屏幕信息的screen属性，screen属性包括屏幕高度availHeight、屏幕宽度availWidth；outerWidth和outerHeight代表浏览器自身的宽高（包含了浏览器工具栏的高度），innerWidth和innerHeight这是代表浏览器的可视化区间的宽度和高度，因为大屏页面基本都不太准许有垂直和水平的滚动条，所以在这个情况下不管宽度和高度都不会包含浏览器滚动条的宽度和高度。

发明内容

数据可视化大屏展示页面自适应排版和刷新的装置，由展示模式监测引擎和屏幕展示策略配置器组成；展示模式监测引擎由浏览器类型检测器，浏览器状态检测器，大屏参数检测器和浏览器状态判断器组成；屏幕展示策略配置器由主要展示模式定义模块和次要展示模式定义模块组成；主要展示模式定义模块由排版布局定义器，浏览器状态记录器，页面刷新定义器组成；

浏览器类型检测器负责通过所有浏览器都具备的navigator对象检测浏览器的类型并将浏览器的类型发送给浏览器状态判断器；

浏览器状态检测器负责读取浏览器当前的浏览器自身宽度outerWidth、浏览器自身高度outerHeight、浏览器的可视化区间的宽度innerWidth和浏览器的可视化区间的高度innerHeight生成浏览器当前状态，并将浏览器当前状态发送给浏览器状态判断器；

大屏参数检测器负责通过所有浏览器都具备的screen对象检测屏幕高度availHeight、屏幕宽度availWidth，并将屏幕高度availHeight、屏幕宽度availWidth传送给浏览器状态判断器；

浏览器状态判断器负责判断浏览器当前处于何种展示模式，展示模式包括：全屏模式，最大化模式，非全屏非最大化模式；

当屏幕宽度availWidth等于浏览器的可视化区间的宽度innerWidth，并且屏幕高度availHeight等于浏览器的可视化区间的高度innerHeight时，浏览器当前处于全屏模式；

当屏幕宽度availWidth等于浏览器的可视化区间的宽度innerWidth，并且屏幕高度availHeight大于浏览器的可视化区间的高度innerHeight一个像素时，且屏幕高度availHeight等于浏览器自身高度outerHeight时，浏览器当前处于全屏模式；

当浏览器类型为chrome和Opera中的一种时，屏幕宽度availWidth等于浏览器自身宽度outerWidth，并且屏幕高度availHeight等于浏览器自身高度outerHeight时，浏览器当前处于最大化模式；

当浏览器类型为ie、firefox和Safari中的一种时，屏幕宽度availWidth等于浏览器的可视化区间的宽度innerWidth，且屏幕高度availHeight位于浏览器自身高度outerHeight和浏览器的可视化区间的高度innerHeight之间时，浏览器处于最大化模式；

当屏幕宽度availWidth大于浏览器的可视化区间的宽度innerWidth，且屏幕宽度availWidth大于浏览器的可视化区间的宽度innerWidth时，浏览器当前处于非全屏非最大化模式；

当浏览器当前处于全屏模式和最大化模式时，浏览器状态判断器将浏览器当前处于的状态发送给主要展示模式定义模块；当浏览器当前处于非全屏非最大化模式时，浏览器状态判断器将浏览器当前处于的状态发送给次要展示模式定义模块；

由浏览器状态记录器记录浏览器当前处于的状态，并与记录中的前一次浏览器处于的状态比较，如果状态发生改变，断定浏览器发生了全屏模式和最大化模式的切换；

由排版布局定义器定义主要展示模式的优先策略，优先策略包括：

全屏优先策略，当浏览器当前处于全屏模式和浏览器当前处于最大化模式都以浏览器全屏模式的排版布局为主，排版布局定义器向研发人员已经设定的排版布局预设框架读取浏览器全屏模式的排版布局；

最大化优先策略，当浏览器当前处于全屏模式和浏览器当前处于最大化模式都以浏览器最大化模式的排版布局为主，排版布局定义器向研发人员已经设定的排版布局预设框架读取浏览器最大化模式的排版布局；

由页面刷新定义器负责当由浏览器状态记录器断定浏览器发生了全屏模式和最大化模式的切换时，弹出选择是否刷新页面的交互信息；

由次要展示模式定义模块监测浏览器展示区间的高度和宽度变化，当浏览器展示区间的高度和宽度变化时，弹出选择是否刷新的页面。

有益效果

大屏页面是数据可视化页面里一个特例，大屏页面使用场景一般都是在一些大型屏幕上进行内容演示，大屏页面面向的对象往往都是一些重要的客户或者领导，因此大屏页面对于展示的效果，展示操作的流畅性和人性化要求都特别高。

而传统的页面自适应方法要不就过于繁琐和复杂，实现成本高难度，还会导致页面代码的健壮性变差，代码的复杂度变高，要不页面自适应的方法简单粗暴，一些特别的细节场景无法精细的控制例如演示人员不希望页面刷新的时候页面被刷新的，而这些问题往往都显而易见，都会直接反馈到研发人员进行修改，因此这些看似细小的问题都是研发人员无法回避的问题。

本发明是综合了时下大屏页面的自适应的优点，摒弃了其缺点而制定的综合解决方案，再结合实际的生产经验精细化的控制页面自适应的问题，方法更加的简单而有效，在实际生产实践中用户很难感觉到页面自适应的功能，大大提升了大屏页面的展示效果，将自适应带来的不利问题降到最低。

附图说明

图1是本发明的系统架构图。

具体实施方式

参看图1实现本发明的数据可视化大屏展示页面自适应排版和刷新的装置，由展示模式监测引擎A和屏幕展示策略配置器B组成；展示模式监测引擎A由浏览器类型检测器1，浏览器状态检测器2，大屏参数检测器3和浏览器状态判断器4组成；屏幕展示策略配置器B由主要展示模式定义模块5和次要展示模式定义模块6组成；主要展示模式定义模块5由排版布局定义器50，浏览器状态记录器51，页面刷新定义器52组成；

浏览器类型检测器1负责通过所有浏览器都具备的navigator对象检测浏览器的类型并将浏览器的类型发送给浏览器状态判断器4；

浏览器状态检测器2负责读取浏览器当前的浏览器自身宽度outerWidth、浏览器自身高度outerHeight、浏览器的可视化区间的宽度innerWidth和浏览器的可视化区间的高度innerHeight生成浏览器当前状态，并将浏览器当前状态发送给浏览器状态判断器4；

大屏参数检测器3负责通过所有浏览器都具备的screen对象检测屏幕高度availHeight、屏幕宽度availWidth，并将屏幕高度availHeight、屏幕宽度availWidth传送给浏览器状态判断器4；

浏览器状态判断器4负责判断浏览器当前处于何种展示模式，展示模式包括：全屏模式，最大化模式，非全屏非最大化模式；

当屏幕宽度availWidth等于浏览器的可视化区间的宽度innerWidth，并且屏幕高度availHeight等于浏览器的可视化区间的高度innerHeight时，浏览器当前处于全屏模式；

当屏幕宽度availWidth等于浏览器的可视化区间的宽度innerWidth，并且屏幕高度availHeight大于浏览器的可视化区间的高度innerHeight一个像素时，且屏幕高度availHeight等于浏览器自身高度outerHeight时，浏览器当前处于全屏模式；

当浏览器类型为chrome和Opera中的一种时，屏幕宽度availWidth等于浏览器自身宽度outerWidth，并且屏幕高度availHeight等于浏览器自身高度outerHeight时，浏览器当前处于最大化模式；

当浏览器类型为ie、firefox和Safari中的一种时，屏幕宽度availWidth等于浏览器的可视化区间的宽度innerWidth，且屏幕高度availHeight位于浏览器自身高度outerHeight和浏览器的可视化区间的高度innerHeight之间时，浏览器处于最大化模式；

当屏幕宽度availWidth大于浏览器的可视化区间的宽度innerWidth，且屏幕宽度availWidth大于浏览器的可视化区间的宽度innerWidth时，浏览器当前处于非全屏非最大化模式；

当浏览器当前处于全屏模式和最大化模式时，浏览器状态判断器4将浏览器当前处于的状态发送给主要展示模式定义模块5；当浏览器当前处于非全屏非最大化模式时，浏览器状态判断器4将浏览器当前处于的状态发送给次要展示模式定义模块6；

由浏览器状态记录器51记录浏览器当前处于的状态，并与记录中的前一次浏览器处于的状态比较，如果状态发生改变，断定浏览器发生了全屏模式和最大化模式的切换；

由排版布局定义器50定义主要展示模式的优先策略，优先策略包括：

全屏优先策略，当浏览器当前处于全屏模式和浏览器当前处于最大化模式都以浏览器全屏模式的排版布局为主，排版布局定义器50向研发人员已经设定的排版布局预设框架C读取浏览器全屏模式的排版布局；

最大化优先策略，当浏览器当前处于全屏模式和浏览器当前处于最大化模式都以浏览器最大化模式的排版布局为主，排版布局定义器50向研发人员已经设定的排版布局预设框架C读取浏览器最大化模式的排版布局；

由页面刷新定义器52负责当由浏览器状态记录器51断定浏览器发生了全屏模式和最大化模式的切换时，弹出选择是否刷新页面的交互信息；

由次要展示模式定义模块6监测浏览器展示区间的高度和宽度变化，当浏览器展示区间的高度和宽度变化时，弹出选择是否刷新的页面。

Claims (1)

1.数据可视化大屏展示页面自适应排版和刷新的装置，其特征在于由展示模式监测引擎和屏幕展示策略配置器组成；展示模式监测引擎由浏览器类型检测器，浏览器状态检测器，大屏参数检测器和浏览器状态判断器组成；屏幕展示策略配置器由主要展示模式定义模块和次要展示模式定义模块组成；主要展示模式定义模块由排版布局定义器，浏览器状态记录器，页面刷新定义器组成；

浏览器类型检测器负责通过所有浏览器都具备的navigator对象检测浏览器的类型并将浏览器的类型发送给浏览器状态判断器；

浏览器状态检测器负责读取浏览器当前的浏览器自身宽度outerWidth、浏览器自身高度outerHeight、浏览器的可视化区间的宽度innerWidth和浏览器的可视化区间的高度innerHeight生成浏览器当前状态，并将浏览器当前状态发送给浏览器状态判断器；

大屏参数检测器负责通过所有浏览器都具备的screen对象检测屏幕高度availHeight、屏幕宽度availWidth，并将屏幕高度availHeight、屏幕宽度availWidth传送给浏览器状态判断器；

浏览器状态判断器负责判断浏览器当前处于何种展示模式，展示模式包括：全屏模式，最大化模式，非全屏非最大化模式；

当屏幕宽度availWidth等于浏览器的可视化区间的宽度innerWidth，并且屏幕高度availHeight等于浏览器的可视化区间的高度innerHeight时，浏览器当前处于全屏模式；

当屏幕宽度availWidth等于浏览器的可视化区间的宽度innerWidth，并且屏幕高度availHeight大于浏览器的可视化区间的高度innerHeight一个像素时，且屏幕高度availHeight等于浏览器自身高度outerHeight时，浏览器当前处于全屏模式；

当浏览器类型为chrome和Opera中的一种时，屏幕宽度availWidth等于浏览器自身宽度outerWidth，并且屏幕高度availHeight等于浏览器自身高度outerHeight时，浏览器当前处于最大化模式；

当浏览器类型为ie、firefox和Safari中的一种时，屏幕宽度availWidth等于浏览器的可视化区间的宽度innerWidth，且屏幕高度availHeight位于浏览器自身高度outerHeight和浏览器的可视化区间的高度innerHeight之间时，浏览器处于最大化模式；

当屏幕宽度availWidth大于浏览器的可视化区间的宽度innerWidth，且屏幕宽度availWidth大于浏览器的可视化区间的宽度innerWidth时，浏览器当前处于非全屏非最大化模式；

当浏览器当前处于全屏模式和最大化模式时，浏览器状态判断器将浏览器当前处于的状态发送给主要展示模式定义模块；当浏览器当前处于非全屏非最大化模式时，浏览器状态判断器将浏览器当前处于的状态发送给次要展示模式定义模块；

由浏览器状态记录器记录浏览器当前处于的状态，并与记录中的前一次浏览器处于的状态比较，如果状态发生改变，断定浏览器发生了全屏模式和最大化模式的切换；

由排版布局定义器定义主要展示模式的优先策略，优先策略包括：

全屏优先策略，当浏览器当前处于全屏模式和浏览器当前处于最大化模式都以浏览器全屏模式的排版布局为主，排版布局定义器向研发人员已经设定的排版布局预设框架读取浏览器全屏模式的排版布局；

最大化优先策略，当浏览器当前处于全屏模式和浏览器当前处于最大化模式都以浏览器最大化模式的排版布局为主，排版布局定义器向研发人员已经设定的排版布局预设框架读取浏览器最大化模式的排版布局；

由页面刷新定义器负责当由浏览器状态记录器断定浏览器发生了全屏模式和最大化模式的切换时，弹出选择是否刷新页面的交互信息；

由次要展示模式定义模块监测浏览器展示区间的高度和宽度变化，当浏览器展示区间的高度和宽度变化时，弹出选择是否刷新的页面。

Images