CN113094144A - 显示屏界面控制方法及电子设备 - Google Patents

显示屏界面控制方法及电子设备 Download PDF

Info

Publication number
CN113094144A
CN113094144A CN202110477627.6A CN202110477627A CN113094144A CN 113094144 A CN113094144 A CN 113094144A CN 202110477627 A CN202110477627 A CN 202110477627A CN 113094144 A CN113094144 A CN 113094144A
Authority
CN
China
Prior art keywords
layer
target
operation instruction
display screen
layers
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202110477627.6A
Other languages
English (en)
Inventor
强树树
周晶晶
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Xian Novastar Electronic Technology Co Ltd
Original Assignee
Xian Novastar Electronic Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Xian Novastar Electronic Technology Co Ltd filed Critical Xian Novastar Electronic Technology Co Ltd
Priority to CN202110477627.6A priority Critical patent/CN113094144A/zh
Publication of CN113094144A publication Critical patent/CN113094144A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0486—Drag-and-drop
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/455—Emulation; Interpretation; Software simulation, e.g. virtualisation or emulation of application or operating system execution engines
    • G06F9/45504—Abstract machines for programme code execution, e.g. Java virtual machine [JVM], interpreters, emulators
    • G06F9/45529—Embedded in an application, e.g. JavaScript in a Web browser
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F2203/00—Indexing scheme relating to G06F3/00 - G06F3/048
    • G06F2203/048—Indexing scheme relating to G06F3/048
    • G06F2203/04806—Zoom, i.e. interaction techniques or interactors for controlling the zooming operation

Abstract

本申请公开了一种显示屏界面控制方法及电子设备。其中，该方法包括：确定与显示屏连接的多个信号源在交互界面中对应的多个图层，图层用于控制显示屏内显示的窗口视图，其中，图层与窗口视图是一一对应的；接收目标对象在交互界面中的操作指令；调用与操作指令对应的业务组件，对图层执行与操作指令对应的操作，其中，交互界面中包括多种业务组件；响应于对图层执行的操作，更新显示屏内显示的窗口视图。本申请实现了对显示屏界面控制中的多种图层控制业务的组件化处理，能更好地支撑不同应用中的相同业务，降低了人员和维护成本。

Description

显示屏界面控制方法及电子设备
技术领域
本申请涉及显示屏控制技术领域，具体而言，涉及一种显示屏界面控制方法及电子设备。
背景技术
随着社会的进步和科技发展，多方面的信息数据量不断增加，人们对于数据可视化的需求越来越高，通常，人们需要将所需的信息进行统一集中显示控制，从而有效地辅助做出决策。
由于室内综合大屏被广泛应用于各种企业、事业单位中，因此，用户对于室内综合大屏的显示控制的需求也越来越强烈，当前需要一种解决方案，以使用户可以在控制端完成对获取的信号源图层的视频控制操作，例如对图层的创建、移动、缩放、吸附对齐等，以最终实现对大屏的显示控制，完成对系统多设备多场景的视频控制处理，从而有效满足上述的用户需求。
针对上述的问题，目前尚未提出有效的解决方案。
发明内容
本申请实施例提供了一种显示屏界面控制方法及电子设备，实现了对显示屏界面控制中的多种图层控制业务的组件化处理，能更好地支撑不同应用中的相同业务，降低了人员和维护成本。
根据本申请实施例的一个方面，提供了一种显示屏界面控制方法，包括：确定与显示屏连接的多个信号源在交互界面中对应的多个图层，所述图层用于控制所述显示屏内显示的窗口视图，其中，所述图层与所述窗口视图是一一对应的；接收目标对象在所述交互界面中的操作指令；调用与所述操作指令对应的业务组件，对所述图层执行与所述操作指令对应的操作，其中，所述交互界面中包括多种所述业务组件；响应于对所述图层执行的操作，更新所述显示屏内显示的窗口视图。
可选地，获取所述多个信号源提供的所述多个图层的数据，其中，所述信号源与所述图层是一一对应的；将所述多个图层的数据存放于多个文档对象模型节点中；依据所述多个文档对象模型节点中的所述多个图层的数据，在所述交互界面中生成所述多个图层。
可选地，检测所述目标对象在所述交互界面中进行的操作事件；当所述操作事件为所述目标对象选中所述多个图层中的其中一个图层时，将所述其中一个图层作为第一目标图层；当所述操作事件为所述目标对象选中并拖动所述第一目标图层时，确定所述操作指令为用于指示对所述第一目标图层进行拖拽的第一操作指令；当所述操作事件为所述目标对象选中并拖动所述第一目标图层中的缩放块时，确定所述操作指令为用于指示对所述第一目标图层进行缩放的第二操作指令，其中，所述第一目标图层的大小随所述缩放块的移动而改变。
可选地，在接收到所述第一操作指令时，调用用于对图层进行拖拽的第一业务组件，对所述第一目标图层的位置进行调整；在接收到所述第二操作指令时，调用用于对图层进行缩放的第二业务组件，对所述第一目标图层的大小及位置进行调整。
可选地，响应于所述第一操作指令，通过所述第一业务组件获取拖动开始时所述第一目标图层的第一位置坐标及拖动结束时所述第一目标图层的第二位置坐标；计算所述第一位置坐标和所述第二位置坐标间的第一位置差；依据所述第一位置差，使用层叠样式表中的转换样式属性，改变所述第一目标图层的位置。
可选地，响应于所述第二操作指令，通过所述第二业务组件获取拖动开始时所述第一目标图层的第三位置坐标及拖动结束时所述第一目标图层的第四位置坐标；计算所述第三位置坐标和所述第四位置坐标间的第二位置差；依据所述第二位置差，使用层叠样式表中的转换样式属性，改变所述第一目标图层的大小及位置。
可选地，响应于所述第二操作指令，通过所述第二业务组件获取拖动开始时所述第一目标图层的第三位置坐标及拖动结束时所述第一目标图层的第四位置坐标；依据所述第三位置坐标和所述第四位置坐标确定所述第一目标图层缩放前后的缩放比例关系；依据所述缩放比例关系，使用层叠样式表中的转换样式属性，改变所述第一目标图层的大小及位置。
可选地，在接收到所述第一操作指令或所述第二操作指令时，调用用于将图层进行吸附的第三业务组件；遍历所述第一目标图层的边界和第二目标图层边界之间的第一距离，以及所述第一目标图层的边界和所述交互界面的边界之间的第二距离，其中，所述第二目标图层为所述多个图层中除所述第一目标图层外的任意一个图层；在所述第一距离小于预设阈值时，将所述第一目标图层移动吸附至所述第二目标图层，使所述第一目标图层和所述第二目标图层中距离小于所述预设阈值的两条边界重合；在所述第二距离小于预设阈值时，将所述第一目标图层移动吸附至所述交互界面，使所述第一目标图层和所述交互界面中距离小于所述预设阈值的两条边界重合。
可选地，在对所述图层执行操作时，依据所述图层在所述交互界面中的第一位置数据，确定所述图层对应的窗口视图在所述显示屏中的第二位置数据；将所述第二位置数据通过后端服务转发至所述显示屏，依据所述第二位置数据更新所述显示屏内显示的窗口视图。
可选地，所述业务组件均是通过JavaScript中的react框架定制的。
根据本申请实施例的另一方面，还提供了一种显示屏界面控制装置，包括：确定模块，用于确定与显示屏连接的多个信号源在交互界面中对应的多个图层，所述图层用于控制所述显示屏内显示的窗口视图，其中，所述图层与所述窗口视图是一一对应的；接收模块，用于接收目标对象在所述交互界面中的操作指令；执行模块，用于调用与所述操作指令对应的业务组件，对所述图层执行与所述操作指令对应的操作，其中，所述交互界面中包括多种所述业务组件；更新模块，用于响应于对所述图层执行的操作，更新所述显示屏内显示的窗口视图。
根据本申请实施例的另一方面，还提供了一种显示屏界面控制系统，包括：控制端设备，所述控制端设备包括交互界面，用于确定与显示屏连接的多个信号源在所述交互界面中对应的多个图层，其中，所述图层用于控制所述显示屏内显示的窗口视图，所述图层与所述窗口视图是一一对应的，接收目标对象在所述交互界面中的操作指令，调用与所述操作指令对应的业务组件，对所述图层执行与所述操作指令对应的操作，其中，所述交互界面中包括多种所述业务组件；显示屏，用于显示所述多个图层对应的多个窗口视图；响应于目标对象对目标图层执行的操作，更新与所述目标图层对应的窗口视图。
根据本申请实施例的另一方面，还提供了一种非易失性存储介质，所述非易失性存储介质包括存储的程序，其中，在所述程序运行时控制所述非易失性存储介质所在设备执行上述的显示屏界面控制方法。
根据本申请实施例的另一方面，还提供了一种电子设备，包括：存储器以及处理器，所述处理器用于运行所述存储器中存储的程序，所述程序运行时执行上述的显示屏界面控制方法。
在本申请实施例中，通过确定与显示屏连接的多个信号源在交互界面中对应的多个图层，由图层控制显示屏内显示的窗口视图；在接收到目标对象在交互界面中的操作指令后，调用与操作指令对应的业务组件，并对图层执行与操作指令对应的操作；最终，响应于对图层执行的操作，更新显示屏内显示的窗口视图。其中，通过JavaScript中的react框架实现在交互界面中将图层拖拽、图层缩放、图层吸附功能等多种业务组件进行封装，在用户进行操作时调用相应的业务组件，从而实现对显示屏界面的控制；同时，由于react的实现全部通过JavaScript完成，对于定制化业务的实现更加灵活，其页面的性能和技术扩展性具有很明显的优势，本申请实现了对显示屏界面控制中的多种图层控制业务的组件化处理，能更好地支撑不同应用中的相同业务，降低了人员和维护成本。
附图说明
此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：
图1是根据本申请实施例的一种大屏控制业务组件的结构示意图；
图2a是根据本申请实施例的一种图层拖拽业务的流程示意图；
图2b是根据本申请实施例的一种图层缩放业务的流程示意图；
图2c是根据本申请实施例的一种图层吸附业务的流程示意图；
图3是根据本申请实施例的一种显示屏界面控制方法的流程示意图；
图4是根据本申请实施例的一种进行图层拖拽过程的示意图；
图5是根据本申请实施例的一种进行图层缩放过程的示意图；
图6是根据本申请实施例的一种进行图层缩放过程的示意图；
图7a是根据本申请实施例的一种进行图层吸附过程的示意图；
图7b是根据本申请实施例的一种进行图层吸附过程的示意图；
图8是根据本申请实施例的一种显示屏界面控制装置的结构示意图；
图9是根据本申请实施例的一种显示屏界面控制系统的结构示意图。
具体实施方式
为了使本技术领域的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分的实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。
需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及它们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
为了更好地理解本申请实施例，对本申请实施例进行描述的过程中出现的部分名词或术语翻译解释如下：
1、vue：是一种用于构建用户界面的渐进式JavaScript框架，与其它大型框架不同的是，vue被设计为可以自底向上逐层应用。vue自身并非一个全能框架，其核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。
2、react：也是一种用于构建用户界面的JavaScript框架，react一般被用来作为MVC(Model-View-Controller，业务模型-用户界面-控制器)中的V层，其不依赖其他任何的库，因此在开发中可以与任何其他的库集成使用。它可以在浏览器端运行，也可以通过nodejs在服务端渲染。react的思想非常独特，其性能出众，可以写出重复代码少，且逻辑清晰的前端代码。
3、文档对象模型(Document Object Model，简称DOM)：是一种处理可扩展置标语言的标准编程接口，它是一种与平台和语言无关的应用程序接口(ApplicationProgramming Interface，简称API)，其可以动态地访问程序和脚本，更新其内容、结构和www文档的风格，文档可以进一步被处理，处理的结果可以加入到当前的页面。
DOM提供了对整个文档的访问模型，将文档作为一个树形结构，树的每个结点表示了一个HTML标签或标签内的文本项，DOM树结构精确地描述了HTML文档中标签间的相互关联性。将HTML或XML文档转化为DOM树的过程称为解析(parse)，HTML文档被解析后，转化为DOM树，因此对HTML文档的处理可以通过对DOM树的操作实现。DOM模型不仅描述了文档的结构，还定义了结点对象的行为，利用对象的方法和属性，可以方便地访问、修改、添加和删除DOM树的结点和内容。DOM树结点的属性包括标记名(node name)、结点类型(node type)、结点内容(data)、父结点对象集合(parent node)、子结点对象集合(firstChild，lastChild)、兄弟结点对象集合(previous Sibling，nextSibling)等。
4、css：(cascading style sheets，层叠样式表)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。css不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化，其能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
实施例1
通过JavaScript中的vue框架，可以在Web端上完成对获取的信号源图层的视频控制操作，例如对图层的创建、移动、缩放、吸附对齐等，从而实现对大屏的控制。但是，vue作为第三方的JavaScript库，当前存在主版本大范围改动的问题，其后期维护成本可能大幅增加；同时，由于vue的核心实现还是依赖html模板，其对于定制化业务的实现也不够灵活。
基于上述问题，本申请实施例提出了基于JavaScript中的react框架在Web端将图层拖拽、图层缩放及图层吸附等与图层操作相关的功能业务组件进行封装，从而实现对大屏的控制。react与vue的区别在于：react完全依赖JavaScript库实现在Web端对大屏进行控制操作，更友好地支撑业务的抽象和组件化地实现，通过将各种功能业务组件封装成公共组件，使其后续具有更好的灵活性和扩展性，能够高效支撑不同产品相同业务的实现。该组件具有如下特点：
(1)封装性，整个组件对外只预留接口，使用者只需要传递必要的参数；
(2)通用性，针对于相同的业务，直接使用该组件，按照组件的API进行使用，完成功能开发。
(3)易用性，同类型的业务，开发者只需要配置组件相关的对外接口，就可以完成对应功能开发。
图1示出了一种可选的大屏控制业务组件的结构示意图，其中，大屏控制业务组件主要为图层操作业务组件，包括：图层拖拽业务组件，图层缩放业务组件和图层吸附业务组件。
在本申请一些可选的实施例中，可以通过以下方式定制图层拖拽业务：交互界面(通常为Web端)中的图层用于控制LED大屏内显示的窗口视图，当图层移动的时候，确定图层相对于Web端中虚拟大屏的位置坐标等相关数据，将这些数据下发到后端服务，后端服务再将数据转发至LED大屏，完成窗口视图的移动。其流程图如图2a所示，其中：
1)鼠标点击选中图层；
2)拖拽鼠标，图层的位置随鼠标的坐标改变而改变；
3)Web端调用后端接口，将相关数据发送至后端服务；
4)后端服务下发命令给LED大屏，使其响应更新窗口视图。
在本申请一些可选的实施例中，可以通过以下方式定制图层缩放业务：Web端的图层用于控制LED大屏内显示的窗口视图，当对图层大小进行缩放时，确定图层相对于Web端中虚拟大屏的位置坐标及宽高等相关数据，将这些数据下发到后端服务，后端服务再将数据转发至LED大屏，完成窗口视图的缩放。其流程图如图2b所示，其中：
1)鼠标点击选中图层，图层边界出现8个用于缩放的小方块；
2)鼠标拖拽任一小方块，图层的大小随鼠标的坐标改变而改变；
3)Web端调用后端接口，将相关数据发送至后端服务；
4)后端服务下发命令给LED大屏，使其响应更新窗口视图。
在本申请一些可选的实施例中，可以通过以下方式定制图层缩放业务：Web端的图层用于控制LED大屏内显示的窗口视图，在图层移动的过程中，当两个图层之间的位置差小于预设的位置差值时，将移动中的图层主动贴合到另一个图层上，确定图层相对于Web端中虚拟大屏的位置坐标及宽高等相关数据，将这些数据下发到后端服务，后端服务再将数据转发至LED大屏，完成窗口视图的吸附。其流程图如图2c所示，其中：
1)鼠标点击选中图层；
2)拖拽图层时，当两个图层之间的距离小于预设阈值，会自动贴近另一图层；
3)Web端调用后端接口，将相关位置数据发送至后端服务；
4)后端服务下发命令给物理设备，使其响应更新窗口视图。
在上述基础上，本申请实施例提供了一种显示屏界面控制方法的实施例，需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。
图3是根据本申请实施例的一种显示屏界面控制方法的流程示意图，如图1所示，该方法包括如下步骤：
步骤S302，确定与显示屏连接的多个信号源在交互界面中对应的多个图层，图层用于控制显示屏内显示的窗口视图，其中，图层与窗口视图是一一对应的。
在本申请一些可选的实施例中，显示屏可以为拼接屏，如常见的室内综合大屏，其可以将来自多个信号源的数据进行多窗口视图统一集中显示，该数据可以是视频、图像、文档等。交互界面作为控制端设备的一部分，其将来自每个信号源的数据显示为一个图层，每个图层对应于显示屏内显示的一个窗口视图，通过对图层的拖拽、缩放等操作，实现对显示屏内显示的窗口视图完成相应的动作，通常以Web浏览器作为交互界面。
具体地，在交互界面中显示图层时，首先获取多个信号源提供的多个图层的数据，其中，信号源与图层是一一对应的；将多个图层的数据存放于多个文档对象模型节点中；依据多个文档对象模型节点中的多个图层的数据，在交互界面中生成多个图层。
需要说明的是，在vue框架中，若需要进行两个图层之间的操作，如图层吸附处理，那这两个图层元素必须放在DOM树的同一父节点下，而react框架则不存在这种限制，因为其可以通过getParent指令来指定图层元素的父元素，所以两个图层元素可以放在DOM树的不同节点下。因此，在本申请实施例中，上述多个图层的数据既可以存放于DOM树的同一节点下，也可以存放于不同DOM节点中。
步骤S304，接收目标对象在交互界面中的操作指令。
在本申请一些可选的实施例中，首先检测目标对象在交互界面中进行的操作事件；当操作事件为目标对象选中多个图层中的其中一个图层时，将其中一个图层作为第一目标图层；当操作事件为目标对象选中并拖动第一目标图层时，确定操作指令为用于指示对第一目标图层进行拖拽的第一操作指令；当操作事件为目标对象选中并拖动第一目标图层中的缩放块时，确定操作指令为用于指示对第一目标图层进行缩放的第二操作指令，其中，第一目标图层的大小随缩放块的移动而改变。
具体地，可以检测用户在Web浏览器内用鼠标、触摸屏等进行的操作。例如，当用户点击并选中其中一个图层时，该图层即为需要进行操作的第一目标图层，此时该图层边界处会出现8个用于调节图层大小的缩放块；当用户点击该图层并拖动鼠标，即发出对该图层进行拖拽的第一操作指令；当用户点击该图层边界上的其中一个缩放块并进行拖动时，即发出对该图层进行缩放的第二操作指令，此时图层的大小会随鼠标的拖动而改变。
步骤S306，调用与操作指令对应的业务组件，对图层执行与操作指令对应的操作，其中，交互界面中包括多种业务组件。
在本申请一些可选的实施例中，所有的业务组件均是通过JavaScript中的react框架定制的。在实现拖拽和缩放功能时，通过对react社区进行预研，采用社区提供的第三方拖拽插件rnd作为底层逻辑业务实现，完成图层拖拽和缩放操作的定制开发。
在本申请一些可选的实施例中，在接收到第一操作指令时，通过调用用于对图层进行拖拽的第一业务组件，对第一目标图层的位置进行调整。具体地，响应于第一操作指令，通过第一业务组件获取拖动开始时第一目标图层的第一位置坐标及拖动结束时第一目标图层的第二位置坐标；计算第一位置坐标和第二位置坐标间的第一位置差；依据第一位置差，使用层叠样式表中的转换样式属性，改变第一目标图层的位置。
其中，获取第一目标图层的第一位置坐标和第二位置坐标可以是获取拖动开始时图层中所有点的第一位置坐标及拖动结束时图层中所有点的第二位置坐标；也可以仅获取拖动开始时点击处的第一位置坐标及拖动结束时松开点击处的第二位置坐标，因为拖动过程中图层整体大小不变，图层中所有点的位移是相同的。例如，当用户点击选中图层，在按下鼠标时会记录当前的鼠标的第一位置坐标，移动过程中rnd插件会将图层元素跟随鼠标移动，在鼠标松开的时候再次获取鼠标的第二位置坐标，计算按下和松开鼠标时的位置坐标间的第一位置差，使用css3中的transform样式属性，改变图层的位置。示意图如图4所示，其中，41代表交互界面(Web浏览器)，42为拖拽前的图层，43为通过调用图层拖拽业务组件得到的拖拽后的图层。
在本申请一些可选的实施例中，在接收到第二操作指令时，通过调用用于对图层进行缩放的第二业务组件，对第一目标图层的大小及位置进行调整。具体地，响应于第二操作指令，通过第二业务组件获取拖动开始时第一目标图层的第三位置坐标及拖动结束时第一目标图层的第四位置坐标；计算第三位置坐标和第四位置坐标间的第二位置差；依据第二位置差，使用层叠样式表中的转换样式属性，改变第一目标图层的大小及位置。可选地，也可以响应于第二操作指令，通过第二业务组件获取拖动开始时第一目标图层的第三位置坐标及拖动结束时第一目标图层的第四位置坐标；依据第三位置坐标和第四位置坐标确定第一目标图层缩放前后的缩放比例关系；依据缩放比例关系，使用层叠样式表中的转换样式属性，改变第一目标图层的大小及位置。
图5为图层缩放过程的示意图，其中，51代表交互界面，52为缩放前的图层，53为通过调用图层缩放业务组件得到的放大后的图层，54为通过调用图层缩放业务组件得到的缩小后的图层。其中，当拖动图层右上角的缩放块时，图层左下角顶点位置是不变的(拖动图层边界中间的缩放块时，与该边界相对的另一边界位置不变)，将左下角顶点作为基准点，则图层中任一点到该基准点的距离的缩放比例是相同的。因此，获取第一目标图层的第三位置坐标和第四位置坐标可以是获取拖动开始时图层中所有点的第三位置坐标及拖动结束时图层中所有点的第四位置坐标；也可以仅获取拖动开始时拖动的缩放块的第三位置坐标及拖动结束时拖动的缩放块的第四位置坐标，通过缩放比例即可确定图层中所有点的位置坐标，从而确定缩放后第一目标图层的大小及位置。
例如，当用户点击选中图层，图层边界处会出现8个用于缩放图层的缩放块，当鼠标点击拖拽缩放块的时候，rnd插件会将图层元素跟随鼠标移动和缩放，记录按下鼠标时鼠标的第三位置坐标及松开鼠标时鼠标的第四位置坐标，计算按下和松开鼠标时的位置坐标间的第二位置差，使用css3中的transform样式属性，改变图层的大小和位置。在使用css3中的transform样式属性改变图层的大小和位置时，一种可选的实现方式为基于css中transform的2D scale()，通过设置sx和sy参数在不同比例下调整水平和垂直尺寸，从而处理真实的图层位置，如图6为设置scale(2，2)时图层缩放的示意图。
在本申请一些可选的实施例中，在接收到第一操作指令或第二操作指令时，还可以调用用于将图层进行吸附的第三业务组件。具体地，遍历第一目标图层的边界和第二目标图层边界之间的第一距离，以及第一目标图层的边界和交互界面的边界之间的第二距离，其中，第二目标图层为多个图层中除第一目标图层外的任意一个图层；在第一距离小于预设阈值时，将第一目标图层移动吸附至第二目标图层，使第一目标图层和第二目标图层中距离小于预设阈值的两条边界重合；在第二距离小于预设阈值时，将第一目标图层移动吸附至交互界面，使第一目标图层和交互界面中距离小于预设阈值的两条边界重合。
以图7a为例，其中，71代表交互界面，72为交互界面内多个图层中的其中一个图层，73为拖拽前的图层，在将73逐渐向左拖拽的过程中，遍历73和72之间边界的距离，当将73拖拽至74时，检测到74的左侧边界与72的右侧边界的距离L小于预设阈值，此时，主动将74向左移动吸附在72上，得到如图7b中的结果，其中，75吸附在72上，75的左侧边界与72的右侧边界重合。同理，该过程也适用于在图层拖拽过程中将图层与交互界面的边界进行吸附。
步骤S308，响应于对图层执行的操作，更新显示屏内显示的窗口视图。
在本申请一些可选的实施例中，在对图层执行操作时，依据图层在交互界面中的第一位置数据，确定图层对应的窗口视图在显示屏中的第二位置数据；将第二位置数据通过后端服务转发至显示屏，依据第二位置数据更新显示屏内显示的窗口视图。
在本申请实施例中，通过确定与显示屏连接的多个信号源在交互界面中对应的多个图层，由图层控制显示屏内显示的窗口视图；在接收到目标对象在交互界面中的操作指令后，调用与操作指令对应的业务组件，并对图层执行与操作指令对应的操作；最终，响应于对图层执行的操作，更新显示屏内显示的窗口视图。其中，通过JavaScript中的react框架实现在交互界面中将图层拖拽、图层缩放、图层吸附功能等多种业务组件进行封装，在用户进行操作时调用相应的业务组件，从而实现对显示屏界面的控制；同时，由于react的实现全部通过JavaScript完成，对于定制化业务的实现更加灵活，其页面的性能和技术扩展性具有很明显的优势，本申请实现了对显示屏界面控制中的多种图层控制业务的组件化处理，能更好地支撑不同应用中的相同业务，降低了人员和维护成本。
实施例2
根据本申请实施例，还提供了一种用于实现上述显示屏界面控制方法的显示屏界面控制装置，如图8所示，该装置包括确定模块80，接受模块82，执行模块84和更新模块86，其中：
确定模块80，用于确定与显示屏连接的多个信号源在交互界面中对应的多个图层，图层用于控制显示屏内显示的窗口视图，其中，图层与窗口视图是一一对应的；
在本申请一些可选的实施例中，显示屏通常为拼接屏，其可以接收来自多个信号源的视频图像等数据，将其进行多窗口视图统一集中显示；交互界面作为控制端设备的一部分，其将来自每个信号源的视频图像显示为一个图层，每个图层对应于显示屏内显示的一个窗口视图，通过对图层的拖拽、缩放等操作，实现对显示屏内显示的窗口视图完成相应的动作，通常以Web浏览器作为交互界面。
接收模块82，用于接收目标对象在交互界面中的操作指令；
在本申请一些可选的实施例中，检测目标对象在交互界面中进行的操作事件，确定目标对象点击选中的图层作为第一目标图层，以及用于指示对第一目标图层进行拖拽的第一操作指令和用于指示对第一目标图层进行缩放的第二操作指令。
执行模块84，用于调用与操作指令对应的业务组件，对图层执行与操作指令对应的操作，其中，交互界面中包括多种业务组件；
在本申请一些可选的实施例中，在接收到第一操作指令时，通过调用用于对图层进行拖拽的第一业务组件，对第一目标图层的位置进行调整；在接收到第二操作指令时，通过调用用于对图层进行缩放的第二业务组件，对第一目标图层的大小及位置进行调整；可选地，在接收到第一操作指令或第二操作指令时，还可以调用用于将图层进行吸附的第三业务组件。
更新模块86，用于响应于对图层执行的操作，更新显示屏内显示的窗口视图。
在本申请一些可选的实施例中，在对图层执行操作时，依据图层在交互界面中的第一位置数据，确定图层对应的窗口视图在显示屏中的第二位置数据；将第二位置数据通过后端服务转发至显示屏，依据第二位置数据更新显示屏内显示的窗口视图。
需要说明的是，本申请实施例中的显示屏界面控制装置中的各模块与实施例1中的显示屏界面控制方法实施步骤一一对应，由于实施例1中已经进行了详尽的描述，本实施例中部分未体现的细节可以参考实施例1，在此不再过多赘述。
实施例3
根据本申请实施例，还提供了一种显示屏界面控制系统，如图9所示，该系统中至少包括控制端设备90和显示屏92，其中：
控制端设备90中至少包括交互界面900，用于确定与显示屏92连接的多个信号源在交互界面中对应的多个图层，其中，图层用于控制显示屏92内显示的窗口视图，图层与窗口视图是一一对应的，通常将Web浏览器作为交互界面；控制端设备90接收目标对象在交互界面900中的操作指令，调用与操作指令对应的业务组件，对图层执行与操作指令对应的操作，其中，交互界面900中包括多种业务组件，如图层拖拽、图层缩放、图层吸附等相关组件。
可选地，控制端设备90中还可以包括键鼠设备902，用于对交互界面900中的图层执行相关操作。
显示屏92，用于显示交互界面900中多个图层对应的多个窗口视图；响应于目标对象对目标图层执行的操作，更新与目标图层对应的窗口视图。
其中，显示屏可以为拼接屏，如常见的室内综合大屏，其可以将来自多个信号源的数据进行多窗口视图统一集中显示，该数据可以是视频、图像、文档等。
需要说明的是，本申请实施例中的显示屏界面控制系统中各模块所执行的功能可以参考实施例1中的显示屏界面控制方法的实施步骤，由于实施例1中已经进行了详尽的描述，在此不再过多赘述。
实施例4
根据本申请实施例，还提供了一种非易失性存储介质，该非易失性存储介质包括存储的程序，其中，在程序运行时控制非易失性存储介质所在设备执行上述的显示屏界面控制方法。
根据本申请实施例，还提供了一种电子设备，该电子设备包括存储器以及处理器，处理器用于运行存储器中存储的程序，当程序运行时执行上述的显示屏界面控制方法。
可选地，在程序运行时控制非易失性存储介质所在设备执行实现以下步骤：确定与显示屏连接的多个信号源在交互界面中对应的多个图层，图层用于控制显示屏内显示的窗口视图，其中，图层与窗口视图是一一对应的；接收目标对象在交互界面中的操作指令；调用与操作指令对应的业务组件，对图层执行与操作指令对应的操作，其中，交互界面中包括多种业务组件；响应于对图层执行的操作，更新显示屏内显示的窗口视图。
上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。
在本申请的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。
在本申请所提供的几个实施例中，应该理解到，所揭露的技术内容，可通过其它的方式实现。其中，以上所描述的装置实施例仅仅是示意性的，例如单元的划分，可以为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，单元或模块的间接耦合或通信连接，可以是电性或其它的形式。
作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可为个人计算机、服务器或者网络设备等)执行本申请各个实施例方法的全部或部分步骤。而前述的存储介质包括：U盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。
以上仅是本申请的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本申请的保护范围。

Claims (10)

1.一种显示屏界面控制方法，其特征在于，包括：
确定与显示屏连接的多个信号源在交互界面中对应的多个图层，所述图层用于控制所述显示屏内显示的窗口视图，其中，所述图层与所述窗口视图是一一对应的；
接收目标对象在所述交互界面中的操作指令；
调用与所述操作指令对应的业务组件，对所述图层执行与所述操作指令对应的操作，其中，所述交互界面中包括多种所述业务组件；
响应于对所述图层执行的操作，更新所述显示屏内显示的窗口视图。
2.根据权利要求1所述的方法，其特征在于，确定与显示屏连接的多个信号源在交互界面中对应的多个图层，包括：
获取所述多个信号源提供的所述多个图层的数据，其中，所述信号源与所述图层是一一对应的；
将所述多个图层的数据存放于多个文档对象模型节点中；
依据所述多个文档对象模型节点中的所述多个图层的数据，在所述交互界面中生成所述多个图层。
3.根据权利要求1所述的方法，其特征在于，接收目标对象在所述交互界面中的操作指令，包括：
检测所述目标对象在所述交互界面中进行的操作事件；
当所述操作事件为所述目标对象选中所述多个图层中的其中一个图层时，将所述其中一个图层作为第一目标图层；
当所述操作事件为所述目标对象选中并拖动所述第一目标图层时，确定所述操作指令为用于指示对所述第一目标图层进行拖拽的第一操作指令；
当所述操作事件为所述目标对象选中并拖动所述第一目标图层中的缩放块时，确定所述操作指令为用于指示对所述第一目标图层进行缩放的第二操作指令，其中，所述第一目标图层的大小随所述缩放块的移动而改变。
4.根据权利要求3所述的方法，其特征在于，调用与所述操作指令对应的业务组件，对所述图层执行与所述操作指令对应的操作，包括：
在接收到所述第一操作指令时，调用用于对图层进行拖拽的第一业务组件，对所述第一目标图层的位置进行调整；
在接收到所述第二操作指令时，调用用于对图层进行缩放的第二业务组件，对所述第一目标图层的大小及位置进行调整。
5.根据权利要求4所述的方法，其特征在于，在接收到所述第一操作指令时，调用用于对图层进行拖拽的第一业务组件，对所述第一目标图层的位置进行调整，包括：
响应于所述第一操作指令，通过所述第一业务组件获取拖动开始时所述第一目标图层的第一位置坐标及拖动结束时所述第一目标图层的第二位置坐标；
计算所述第一位置坐标和所述第二位置坐标间的第一位置差；
依据所述第一位置差，使用层叠样式表中的转换样式属性，改变所述第一目标图层的位置。
6.根据权利要求4所述的方法，其特征在于，在接收到所述第二操作指令时，调用用于对图层进行缩放的第二业务组件，对所述第一目标图层的大小及位置进行调整，包括：
响应于所述第二操作指令，通过所述第二业务组件获取拖动开始时所述第一目标图层的第三位置坐标及拖动结束时所述第一目标图层的第四位置坐标；
计算所述第三位置坐标和所述第四位置坐标间的第二位置差；
依据所述第二位置差，使用层叠样式表中的转换样式属性，改变所述第一目标图层的大小及位置。
7.根据权利要求4所述的方法，其特征在于，在接收到所述第二操作指令时，调用用于对图层进行缩放的第二业务组件，对所述第一目标图层的大小及位置进行调整，包括：
响应于所述第二操作指令，通过所述第二业务组件获取拖动开始时所述第一目标图层的第三位置坐标及拖动结束时所述第一目标图层的第四位置坐标；
依据所述第三位置坐标和所述第四位置坐标确定所述第一目标图层缩放前后的缩放比例关系；
依据所述缩放比例关系，使用层叠样式表中的转换样式属性，改变所述第一目标图层的大小及位置。
8.根据权利要求4所述的方法，其特征在于，所述方法还包括：
在接收到所述第一操作指令或所述第二操作指令时，调用用于将图层进行吸附的第三业务组件；
遍历所述第一目标图层的边界和第二目标图层边界之间的第一距离，以及所述第一目标图层的边界和所述交互界面的边界之间的第二距离，其中，所述第二目标图层为所述多个图层中除所述第一目标图层外的任意一个图层；
在所述第一距离小于预设阈值时，将所述第一目标图层移动吸附至所述第二目标图层，使所述第一目标图层和所述第二目标图层中距离小于所述预设阈值的两条边界重合；
在所述第二距离小于预设阈值时，将所述第一目标图层移动吸附至所述交互界面，使所述第一目标图层和所述交互界面中距离小于所述预设阈值的两条边界重合。
9.根据权利要求1至8中任意一项所述的方法，其特征在于，所述业务组件均是通过JavaScript中的react框架定制的。
10.一种电子设备，其特征在于，包括：存储器以及处理器，所述处理器用于运行所述存储器中存储的程序，所述程序运行时执行权利要求1至9中任意一项所述的显示屏界面控制方法。
CN202110477627.6A 2021-04-29 2021-04-29 显示屏界面控制方法及电子设备 Pending CN113094144A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110477627.6A CN113094144A (zh) 2021-04-29 2021-04-29 显示屏界面控制方法及电子设备

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110477627.6A CN113094144A (zh) 2021-04-29 2021-04-29 显示屏界面控制方法及电子设备

Publications (1)

Publication Number Publication Date
CN113094144A true CN113094144A (zh) 2021-07-09

Family

ID=76680792

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110477627.6A Pending CN113094144A (zh) 2021-04-29 2021-04-29 显示屏界面控制方法及电子设备

Country Status (1)

Country Link
CN (1) CN113094144A (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113835704A (zh) * 2021-09-27 2021-12-24 中电金信软件有限公司 一种布局文件生成方法、装置、设备以及存储介质
CN113986170A (zh) * 2021-10-21 2022-01-28 威创集团股份有限公司 一种拼接墙显示控制方法、桌面显示控制器、拼接墙

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113835704A (zh) * 2021-09-27 2021-12-24 中电金信软件有限公司 一种布局文件生成方法、装置、设备以及存储介质
CN113835704B (zh) * 2021-09-27 2024-05-10 中电金信软件有限公司 一种布局文件生成方法、装置、设备以及存储介质
CN113986170A (zh) * 2021-10-21 2022-01-28 威创集团股份有限公司 一种拼接墙显示控制方法、桌面显示控制器、拼接墙

Similar Documents

Publication Publication Date Title
JP7354294B2 (ja) 階層流動コンポーネントおよび動的レイアウトを統合した応答編集および表示を提供するシステムおよび方法
CN110781423B (zh) 网页生成方法、装置及电子设备
CN104216691B (zh) 一种创建应用的方法及装置
US10984169B2 (en) Systems, methods, and computer-readable media for providing a dynamic loupe for displayed information
US8194075B2 (en) Method and system for generating and displaying an interactive dynamic list view of multiply connected objects
CN104978317B (zh) 网页生成方法及装置、网站生成方法及建站服务器
US10048854B2 (en) Drag and drop interaction between components of a web application
US8711147B2 (en) Method and system for generating and displaying an interactive dynamic graph view of multiply connected objects
CN110968944B (zh) 在Web前端展示并操作CAD图纸的方法
US9792268B2 (en) Zoomable web-based wall with natural user interface
CN102414682A (zh) 用于在图形用户接口中提供零碎网页的方法和设备
KR20140030299A (ko) 동적 콘텐츠를 이용하여 줌 인 및 줌 아웃하기 위한 기법
CN113094144A (zh) 显示屏界面控制方法及电子设备
US10410606B2 (en) Rendering graphical assets on electronic devices
CN114357345A (zh) 图片处理方法、装置、电子设备及计算机可读存储介质
CN103534698A (zh) 对在基于标记的文档中的数据进行所通知的分割
JP2019008668A (ja) クライアントデバイス、画像処理システム、画像の表示方法および、プログラム
CN113688341B (zh) 动态图片分解方法、装置、电子设备及可读存储介质
CN113536755A (zh) 用于生成海报的方法、装置、电子设备、存储介质及产品
US9501457B2 (en) Creating a communication editable in a browser independent of platform and operating system
CN103795799A (zh) 一种远程监控方法与系统
JP2017027319A (ja) 帳票文書データの表示・編集・保存方法、装置、処理プログラム
CN109960562B (zh) 一种信息展示方法、装置和计算机可读存储介质
CN114371838A (zh) 一种小程序画布渲染方法、装置、设备及存储介质
CN103412715B (zh) 一种电子出版物的阅读系统

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination