一种界面配置与功能展示分离实现的图表式交互方法

技术领域

本发明涉及的是通信领域，特别涉及一种界面配置与功能展示分离实现的图表式交互方法。

背景技术

随着网页技术的不断发展，目前市面上的各类软件产品的界面越来越多的融入了网页风格元素，倾向于提供自由度更高的人机交互界面以供用户使用。然而使用网页技术的图表显示交互界面在塞入了大量数据的情况下往往在流畅度和响应速度上仍存在很大的提升空间，于是使用传统的数据采集技术结合自由度更高，显示风格更加美观的图表界面进行数据交互的方法则可以在特定的工作场景中发挥自身优势，为用户带来更加良好的使用体验。

针对一些特殊的工作领域，如冶金制造领域，往往工程的前期配置工作和生产过程中的使用是有不同的工作人员在不同的设备上来完成的。使用同一套系统来进行前期的配置工作和后期的维护及使用其实对设备的性能存在一定程度上的浪费，而使用一种界面配置与功能展示分离实现的图表式交互方法则可以避免性能上的浪费。

发明内容

鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的一种界面配置与功能展示分离实现的图表式交互方法。

为了解决上述技术问题，本申请实施例公开了如下技术方案：

一种界面配置与功能展示分离实现的图表式交互方法,包括：

S100.在界面布局及配置系统中配置好布局及样式，并在用户交互系统内的时间设置区域设置好展示时数据所处的默认时间范围；

S200.用户交互系统通过对从数据采集接口采集到并进行本地存储的数据进行读取，并将其中包含的点位信息进行显示，从显示的点位中进行筛选，确定最终与交互有关的数据点位；

S300.通过拖拽点位树形分支项的方式在数值曲线展示区域展示相关数据的曲线图表；

S400.使用鼠标拖拽或滚轮缩放对数值曲线展示区域的曲线显示范围进行调整监测；

S500.使用曲线样式设置窗口对曲线的样式风格进行调整，调整至最符合观察的状态；

S600.将曲线导出成图片进行存储，并将曲线数值导出至文档中进行保存。

进一步地，界面布局及配置系统和用户交互系统均具有将目录下的配置文件进行读取的功能，并根据读取到的内容进行界面的绘制，并对界面的风格和布局根据文件设定进行调整。

进一步地，当不存在界面配置文件时，界面布局及配置系统生成一个空白的崭新界面，在界面上添加以图例形式展现的图表数据展示图元，图元通过调整大小以及摆放位置进行布局上的设定。

进一步地，针对配置好布局设定的界面和图元，通过修改其内部的展示区域的颜色、字体以及线条样式，对整体的默认风格进行调整。

进一步地，界面布局及配置系统和用户交互系统同时使用时，用户交互系统可直接使用界面布局及配置系统目录下保存的界面配置数据文件进行读取并生成交互界面，但当界面布局及配置系统和用户交互系统分离使用的工作情况时，则需要事先将界面配置数据文件放置在用户交互系统的工作目录下以供后者进行使用。

进一步地，用户交互系统在使用了界面配置数据文件生成交互界面后，可于交互界面上对由数据采集工具采集到并进行保存的各类数据进行筛选，产生一个由筛选后的数据点位组成的树形列表；通过使用树形列表中的点位进行关联显示，即可通过图表曲线化的方式观察到数据点位的数值变化情况。

进一步地，界面布局及配置系统工作方法为：

当打开界面布局及配置系统时，会检查自身工作目录下是否存在已有的界面配置文件，如果存在则进行加载，如果不存在则生成新的空白界面以供后续添加图元及编辑样式使用；

通过向界面中添加图例为在同一界面中加入多个图表展示区域，而各个图表展示区域的图例四周会自动产生八个分别位于图例四个顶角和四条边中点的锚点，锚点用来通过拖拽改变图例的大小，而通过拖拽图例中心则可移动图例的所在位置；

通过锚点的颜色可对当前编辑的图例与其余图例进行区分，当前选中的或是刚刚编辑过的图例的四周锚点会呈现较其他图例锚点更深的颜色，从而提醒使用者图例的位置及大小是否接受过修改；

通过界面中设置的图例的样式及布局进行精确修改的编辑栏，栏位中会以数值形式展示图例的实际位置及大小，通过输入数值的方式亦可对图例进行精确的编辑；

通过编辑栏中设置有编辑界面及图例的背景色、字体以及线条等基础属性的功能，通过使用RGB数值或调色盘可对颜色参数进行修改，字体及线条则可通过在预先设置好的各类样式中进行选择；编辑栏内也预设了数个用于快速配置整体样式的风格设置功能，每一种风格都会对图例的颜色、字体及线条等样式进行统一修改，可用于对界面风格统一性及美观性要求较高的场合；

将界面分成界面部分和图例部分两块进行存储，针对每一部分又将对其中的位置坐标、大小参数、颜色、字体、线条及风格等设置进行数据化并进行记录。

进一步地，界面布局及配置系统采用固定的界面配置保存格式，在不使用界面配置系统的情况下，直接手动编写一份界面配置文件，并保持格式符合系统的读取格式要求，为界面配置系统和用户交互系统创建界面样式及布局。

进一步地，用户交互系统包含四块区域，这四块主要区域分别包括：

数据点位配置区域，用于将存储的数据按照数据点位列表进行区分，并对列表点位进行筛选，将最终选择的点位构建成为树形图进行显示；

时间设置区域，用于对默认的图表时间显示范围进行修改，通过使用日历菜单对时间修改后获得相应的时间间隔，用于图表关联时的时间轴范围配置；

数值曲线展示区域，对关联上的数据点位数值进行图像化转换，以曲线的形式展示出来，使用者可通过拖拽进行展示范围的调整；

数值曲线交互区域，设置有方便图表曲线快速缩放及还原的功能按钮，同时也设置有让曲线以图片形式导出或将曲线数值记录至文档文件内的相应功能。

进一步地,对数据点位配置区域的点位筛选之后，通过拖拽点位树形图内的相应分支至数值曲线展示区域进行数值曲线的添加操作；数值曲线交互区域设置有对曲线的颜色、粗细以及类型进行设置的相关设置窗口，方便使用者在进行交互操作时应对不同的工作环境。

本发明实施例提供的上述技术方案的有益效果至少包括：

本发明公开的一种界面配置与功能展示分离实现的图表式交互方法，包括：在界面布局及配置系统中配置好布局及样式，并在用户交互系统内的时间设置区域设置好展示时数据所处的默认时间范围；通过用户交互系统通过对从数据采集接口采集到并进行本地存储的数据进行读取，并将其中包含的点位信息进行显示，从显示的点位中进行筛选，确定最终与交互有关的数据点位；通过拖拽点位树形分支项的方式在数值曲线展示区域展示相关数据的曲线图表；使用鼠标拖拽或滚轮缩放对数值曲线展示区域的曲线显示范围进行调整监测；使用曲线样式设置窗口对曲线的样式风格进行调整，调整至最符合观察的状态；将曲线导出成图片进行存储，并将曲线数值导出至文档中进行保存。本发明通过应用该方法可在处理类似工业生产、智能制造以及集中控制等领域，将界面及布局配置工作与图表式用户数据交互进行分离，为实现整体数据的监控与处理提供更灵活自由的实现方式。

下面通过附图和实施例，对本发明的技术方案做进一步的详细描述。

附图说明

附图用来提供对本发明的进一步理解，并且构成说明书的一部分，与本发明的实施例一起用于解释本发明，并不构成对本发明的限制。在附图中：

图1为本发明实施例1中，一种界面配置与功能展示分离实现的图表式交互方法的流程图；

图2为本发明实施例1中，界面布局及配置与功能展示系统分离的结构示意图；

图3为本发明实施例2中，界面布局及配置保存及读取的功能原理图；

图4为本发明实施例2中，用户数据交互系统的各个功能区域结构示意图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

为了解决现有技术中存在的问题，本发明实施例提供一种界面配置与功能展示分离实现的图表式交互方法。

实施例1

本实施例公开了一种界面配置与功能展示分离实现的图表式交互方法,如图1，包括：

S100.在界面布局及配置系统中配置好布局及样式，并在用户交互系统内的时间设置区域设置好展示时数据所处的默认时间范围；

S200.通过用户交互系统通过对从数据采集接口采集到并进行本地存储的数据进行读取，并将其中包含的点位信息进行显示，从显示的点位中进行筛选，确定最终与交互有关的数据点位；

S300.通过拖拽点位树形分支项的方式在数值曲线展示区域展示相关数据的曲线图表；

S400.使用鼠标拖拽或滚轮缩放对数值曲线展示区域的曲线显示范围进行调整监测；

S500.使用曲线样式设置窗口对曲线的样式风格进行调整，调整至最符合观察的状态；

S600.将曲线导出成图片进行存储，并将曲线数值导出至文档中进行保存。

具体的，在本实施例中，如图2，界面布局及配置系统和用户交互系统均具有将目录下的配置文件进行读取的功能，并根据读取到的内容进行界面的绘制，并对界面的风格和布局根据文件设定进行调整。

当不存在界面配置文件时，界面布局及配置系统生成一个空白的崭新界面，在界面上添加以图例形式展现的图表数据展示图元，图元通过调整大小以及摆放位置进行布局上的设定。

在一些优选实施例中，针对配置好布局设定的界面和图元，通过修改其内部的展示区域的颜色、字体以及线条样式，对整体的默认风格进行调整，防止后期出现因风格与实际工作场景不匹配造成的使用困难或操作不便等情况。在设置完布局及样式后，使用系统内的配置保存功能，可将修改过的界面数据以数据记录文件的形式储存在目录当中。

在本实施例中，界面布局及配置系统和用户交互系统同时使用时，用户交互系统可直接使用界面布局及配置系统目录下保存的界面配置数据文件进行读取并生成交互界面，但当界面布局及配置系统和用户交互系统分离使用的工作情况时，则需要事先将界面配置数据文件放置在用户交互系统的工作目录下以供后者进行使用。

具体的，用户交互系统在使用了界面配置数据文件生成交互界面后，可于交互界面上对由数据采集工具采集到并进行保存的各类数据进行筛选，产生一个由筛选后的数据点位组成的树形列表；通过使用树形列表中的点位进行关联显示，即可通过图表曲线化的方式观察到数据点位的数值变化情况。

在本实施例中，如图3，界面布局及配置系统工作方法为：

当打开界面布局及配置系统时，会检查自身工作目录下是否存在已有的界面配置文件，如果存在则进行加载，如果不存在则生成新的空白界面以供后续添加图元及编辑样式使用；

通过向界面中添加图例为在同一界面中加入多个图表展示区域，而各个图表展示区域的图例四周会自动产生八个分别位于图例四个顶角和四条边中点的锚点，锚点用来通过拖拽改变图例的大小，而通过拖拽图例中心则可移动图例的所在位置；

通过锚点的颜色可对当前编辑的图例与其余图例进行区分，当前选中的或是刚刚编辑过的图例的四周锚点会呈现较其他图例锚点更深的颜色，从而提醒使用者图例的位置及大小是否接受过修改；

通过界面中设置的图例的样式及布局进行精确修改的编辑栏，栏位中会以数值形式展示图例的实际位置及大小，通过输入数值的方式亦可对图例进行精确的编辑；

通过编辑栏中设置有编辑界面及图例的背景色、字体以及线条等基础属性的功能，通过使用RGB数值或调色盘可对颜色参数进行修改，字体及线条则可通过在预先设置好的各类样式中进行选择；编辑栏内也预设了数个用于快速配置整体样式的风格设置功能，每一种风格都会对图例的颜色、字体及线条等样式进行统一修改，可用于对界面风格统一性及美观性要求较高的场合；

将界面分成界面部分和图例部分两块进行存储，针对每一部分又将对其中的位置坐标、大小参数、颜色、字体、线条及风格等设置进行数据化并进行记录。

在本实施例中，由于采用了固定的界面配置保存格式，在不使用界面配置系统的情况下，直接手动编写一份界面配置文件，并保持格式符合系统的读取格式要求，也可以为界面配置系统和用户交互系统创建界面样式及布局。

在本实施例中，如图4，用户交互系统包含四块区域，这四块,区域分别包括：

数据点位配置区域，用于将存储的数据按照数据点位列表进行区分，并对列表点位进行筛选，将最终选择的点位构建成为树形图进行显示；

时间设置区域，用于对默认的图表时间显示范围进行修改，通过使用日历菜单对时间修改后获得相应的时间间隔，用于图表关联时的时间轴范围配置；

数值曲线展示区域，对关联上的数据点位数值进行图像化转换，以曲线的形式展示出来，使用者可通过拖拽进行展示范围的调整；

数值曲线交互区域，设置有方便图表曲线快速缩放及还原的功能按钮，同时也设置有让曲线以图片形式导出或将曲线数值记录至文档文件内的相应功能。

在对数据点位配置区域的点位筛选之后，通过拖拽点位树形图内的相应分支至数值曲线展示区域进行数值曲线的添加操作；数值曲线交互区域设置有对曲线的颜色、粗细以及类型进行设置的相关设置窗口，方便使用者在进行交互操作时应对不同的工作环境。

本实施例公开的本发明公开的一种界面配置与功能展示分离实现的图表式交互方法，在界面布局及配置系统中配置好布局及样式，并在用户交互系统内的时间设置区域设置好展示时数据所处的默认时间范围；通过用户交互系统通过对从数据采集接口采集到并进行本地存储的数据进行读取，并将其中包含的点位信息进行显示，从显示的点位中进行筛选，确定最终与交互有关的数据点位；通过拖拽点位树形分支项的方式在数值曲线展示区域展示相关数据的曲线图表；使用鼠标拖拽或滚轮缩放对数值曲线展示区域的曲线显示范围进行调整监测；使用曲线样式设置窗口对曲线的样式风格进行调整，调整至最符合观察的状态；将曲线导出成图片进行存储，并将曲线数值导出至文档中进行保存。本发明通过应用该方法可在处理类似工业生产、智能制造以及集中控制等领域，将界面及布局配置工作与图表式用户数据交互进行分离，为实现整体数据的监控与处理提供更灵活自由的实现方式。

应该明白，公开的过程中的步骤的特定顺序或层次是示例性方法的实例。基于设计偏好，应该理解，过程中的步骤的特定顺序或层次可以在不脱离本公开的保护范围的情况下得到重新安排。所附的方法权利要求以示例性的顺序给出了各种步骤的要素，并且不是要限于所述的特定顺序或层次。

在上述的详细描述中，各种特征一起组合在单个的实施方案中，以简化本公开。不应该将这种公开方法解释为反映了这样的意图，即，所要求保护的主题的实施方案需要清楚地在每个权利要求中所陈述的特征更多的特征。相反，如所附的权利要求书所反映的那样，本发明处于比所公开的单个实施方案的全部特征少的状态。因此，所附的权利要求书特此清楚地被并入详细描述中，其中每项权利要求独自作为本发明单独的优选实施方案。

本领域技术人员还应当理解，结合本文的实施例描述的各种说明性的逻辑框、模块、电路和算法步骤均可以实现成电子硬件、计算机软件或其组合。为了清楚地说明硬件和软件之间的可交换性，上面对各种说明性的部件、框、模块、电路和步骤均围绕其功能进行了一般地描述。至于这种功能是实现成硬件还是实现成软件，取决于特定的应用和对整个系统所施加的设计约束条件。熟练的技术人员可以针对每个特定应用，以变通的方式实现所描述的功能，但是，这种实现决策不应解释为背离本公开的保护范围。

结合本文的实施例所描述的方法或者算法的步骤可直接体现为硬件、由处理器执行的软件模块或其组合。软件模块可以位于RAM存储器、闪存、ROM存储器、EPROM存储器、EEPROM存储器、寄存器、硬盘、移动磁盘、CD-ROM或者本领域熟知的任何其它形式的存储介质中。一种示例性的存储介质连接至处理器，从而使处理器能够从该存储介质读取信息，且可向该存储介质写入信息。当然，存储介质也可以是处理器的组成部分。处理器和存储介质可以位于ASIC中。该ASIC可以位于用户终端中。当然，处理器和存储介质也可以作为分立组件存在于用户终端中。

对于软件实现，本申请中描述的技术可用执行本申请所述功能的模块(例如，过程、函数等)来实现。这些软件代码可以存储在存储器单元并由处理器执行。存储器单元可以实现在处理器内，也可以实现在处理器外，在后一种情况下，它经由各种手段以通信方式耦合到处理器，这些都是本领域中所公知的。

上文的描述包括一个或多个实施例的举例。当然，为了描述上述实施例而描述部件或方法的所有可能的结合是不可能的，但是本领域普通技术人员应该认识到，各个实施例可以做进一步的组合和排列。因此，本文中描述的实施例旨在涵盖落入所附权利要求书的保护范围内的所有这样的改变、修改和变型。此外，就说明书或权利要求书中使用的术语“包含”，该词的涵盖方式类似于术语“包括”，就如同“包括，”在权利要求中用作衔接词所解释的那样。此外，使用在权利要求书的说明书中的任何一个术语“或者”是要表示“非排它性的或者”。