基于WEB的拼接大屏幕显示布局处理方法技术

技术编号:23161389 阅读:37 留言:0更新日期:2020-01-21 21:55
本发明专利技术公开了一种基于WEB的拼接大屏幕显示布局处理方法,所述方法包括如下步骤:S1、布局虚拟显示屏,构成虚拟显示墙;S2、用鼠标在所述虚拟显示屏中拖入输出端中的输出硬件,形成屏幕分割单元;S3、用鼠标在所述屏幕分割单元中依次拖入输入端中的输入信号。本发明专利技术的基于WEB的拼接大屏幕显示布局处理方法无需安装任何软件,可在WEB端实现,实现不同平台、不同操作系统、多场景及远程指挥查看等应用,且无需加载任何预设的文件,而且能自定义屏幕的布局,并且web上的虚拟显示屏显示的内容与实体显示屏显示的画面一致,所见所得。

Layout processing method of splicing large screen display based on Web

【技术实现步骤摘要】
基于WEB的拼接大屏幕显示布局处理方法
本专利技术涉及一种基于WEB的拼接大屏幕显示布局处理,尤其涉及一种基于WEB的拼接大屏幕显示布局处理方法。
技术介绍
随着全领域智能化建设步伐的加快,由多个显示屏幕拼接而成的大型拼接屏或超屏已广泛应用于军队、公安、武警、司法、海关、电力、灾防等诸多领域,其为各领域的指挥、控制、调度中心以及政府、企事业单位、酒店的会议室集群,为智慧安防、智慧城市、智慧交通、智慧检务、智慧教育、智慧医疗等提供可视化的综合解决方案。现有的大型拼接屏或超屏的屏幕布局处理方式大多以软件形式提供方案,这样就需要特定的操作系统、特定的软件等,这对用户来说,带来诸多等不便。
技术实现思路
针对现有技术中存在的问题,本专利技术提供了一种基于WEB的拼接大屏幕显示布局处理方法,本专利技术的基于WEB的拼接大屏幕显示布局处理方法无需安装任何软件,可在WEB端实现,实现不同平台、不同操作系统、多场景及远程指挥查看等应用,且无需加载任何预设的文件,而且能自定义屏幕的布局,并且web上的虚拟显示屏显示的内容与实体显示屏显示的画面一致,所见所得。为了实现上述目的,本专利技术实施例提供了一种基于WEB的拼接大屏幕显示布局处理方法,所述方法主要包括如下步骤。S1、布局虚拟显示屏,构成虚拟显示墙。S2、用鼠标在所述虚拟显示屏中拖入输出端中的输出硬件,形成屏幕分割单元。S3、用鼠标在所述屏幕分割单元中依次拖入输入端中的输入信号。进一步的,S2步骤的具体实现方法为:用鼠标拖动所述输出端中的输出硬件,当所述输出硬件拖入到所述虚拟显示屏时,所述虚拟显示屏的UI会捕捉所述鼠标的位置并判断其在哪一个所述虚拟显示屏中,并以此记录所述鼠标拖动的所述输出硬件在所述虚拟显示墙的位置。进一步的,可对屏幕分割单元进行二次布局。当需要合并所述屏幕分割单元时,按下合并单元,所述虚拟显示屏记录需要合并的所述输出硬件,之后组成一个超屏。单个屏幕分割单元还可以分割成多个子显示屏,分割层UI将根据用户设置的比例和所述屏幕分割单元UI层的像素,计算出分割层的实际像素,并覆盖所述屏幕分割单元的UI层,造成分割的效果,并储存到服务器后端的数据库。S3步骤的具体实现方法为:当用鼠标在所述屏幕分割单元中拖入输入端中的输入信号时,所述屏幕分割单元会捕捉到所述鼠标的信号,此时,所述输入信号会占满鼠标信号所在的屏幕分割单元,并且开始计算所述输入信号所在的所述屏幕分割单元的起始地址和长宽的百分比、实际像素等数据,并把所述数据发送到服务器后端,所述服务器后端会将所述数据转发给相应的输出硬件。进一步的,所述输出硬件收到所述数据后,会根据所述输入信号的唯一ID向所述输出硬件申请视频流,并根据所述输出硬件的起始地址和长宽的百分比,计算出跨屏的位置,然后进行像素剪裁或排列,并且同步显示到对应的实体输出硬件中。进一步的,所述实体输出硬件为实体显示墙中的实体显示屏。进一步的,所述虚拟显示屏或子显示屏的数量及位置由用户自定义布局。进一步的,所述输出硬件和所述输入信号有多个。本专利技术的有益技术效果是:无需安装任何软件,可在WEB端实现,实现不同平台、不同操作系统、多场景及远程指挥查看等应用,且无需加载任何预设的文件,而且能自定义屏幕的布局,并且web上的虚拟显示屏显示的内容与实体显示屏显示的画面一致,所见所得。附图说明图1是本专利技术实施例基于WEB的拼接大屏幕显示布局处理方法的流程图。图2是本专利技术实施例基于WEB的拼接大屏幕显示布局处理方法的虚拟显示墙的示意图。图3是本专利技术实施例基于WEB的拼接大屏幕显示布局处理方法的输出端输出硬件布局的示意图。图4是本专利技术实施例基于WEB的拼接大屏幕显示布局处理方法的屏幕分割单元二次布局的示意图。图5是本专利技术实施例基于WEB的拼接大屏幕显示布局处理方法的输入端输入信号拖入后的示意图。图6是本专利技术实施例基于WEB的拼接大屏幕显示布局处理方法的实体显示墙的示意图。具体实施方式下面将结合本专利技术实施例中的附图,对本专利技术实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅是本专利技术一部分实施例,而不是全部的实施例。基于本专利技术中的实施例,本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例,都属于本专利技术保护的范围。如图1所示为本专利技术实施例基于WEB的拼接大屏幕显示布局处理方法的流程图,本方法包括如下步骤:S1、布局虚拟显示屏,构成虚拟显示墙;S2、用鼠标在所述虚拟显示屏中拖入输出端中的输出硬件,形成屏幕分割单元;S3、用鼠标在所述屏幕分割单元中依次拖入输入端中的输入信号。如图2是本专利技术实施例基于WEB的拼接大屏幕显示布局处理方法的虚拟显示墙的示意图。图2中,布局了2*2个(4个)虚拟显示屏,分别为虚拟显示屏1、虚拟显示屏2、虚拟显示屏3和虚拟显示屏4,这4个虚拟显示屏共同构成了虚拟显示墙。当然,根据实际展示场景的需求及美观等要求,可由用户自定义布局虚拟显示屏成任意的形式。S2步骤的具体实现方法为:用鼠标拖动所述输出端中的输出硬件,当所述输出硬件拖入到所述虚拟显示屏时,所述虚拟显示屏的UI会捕捉所述鼠标的位置并判断其在哪一个所述虚拟显示屏中,并以此记录所述鼠标拖动的所述输出硬件在所述虚拟显示墙的位置。图3是本专利技术实施例基于WEB的拼接大屏幕显示布局处理方法的输出端输出硬件布局的示意图。图3中,用鼠标拖动输出端3中的输出硬件1,当输出硬件3拖入到虚拟显示屏1时,虚拟显示屏的UI会捕捉鼠标的位置并判断其在哪一个所述虚拟显示屏中,本实施例中,虚拟显示屏的UI捕捉到鼠标的位置在虚拟显示屏1,并且最终判断鼠标在虚拟显示屏1中,并以此记录目前鼠标所拖动的输出硬件1在虚拟显示墙的虚拟显示屏1的位置。此时,松开鼠标,输出硬件1将会覆盖虚拟显示屏1,如图3所示。用此方法,分别将输出硬件2、输出硬件3和输出硬件4分别拖入虚拟显示屏2、虚拟显示屏3和虚拟显示屏4中。输出硬件1覆盖虚拟屏幕1形成屏幕分割单元1、输出硬件2覆盖虚拟屏幕2形成屏幕分割单元2、输出硬件3覆盖虚拟屏幕3形成屏幕分割单元3,输出硬件4覆盖虚拟屏幕4形成屏幕分割单元4,如图3所示。还可对屏幕分割单元进行二次布局。图4是本专利技术实施例基于WEB的拼接大屏幕显示布局处理方法的屏幕分割单元二次布局的示意图。当需要合并所述屏幕分割单元时,按下合并单元,所述虚拟显示屏记录需要合并的所述输出硬件,之后组成一个超屏。本实施例中,将屏幕分割单元1和屏幕分割单元2合并,组成一个超屏。单个屏幕分割单元还可以分割成多个子显示屏,分割层UI将根据用户设置的比例和所述屏幕分割单元UI层的像素,计算出分割层的实际像素,并覆盖所述屏幕分割单元的UI层,造成分割的效果,并储存到服务器后端的数据库。本实施例中,将屏幕分割单元3分割成2个子显示屏,即子显示屏1和子显示屏2,如图4所示。本实施例中本文档来自技高网...

【技术保护点】
1.一种基于WEB的拼接大屏幕显示布局处理方法,其特征在于,所述方法包括如下步骤:/nS1、布局虚拟显示屏,构成虚拟显示墙;/nS2、用鼠标在所述虚拟显示屏中拖入输出端中的输出硬件,形成屏幕分割单元;/nS3、用鼠标在所述屏幕分割单元中依次拖入输入端中的输入信号。/n

【技术特征摘要】
1.一种基于WEB的拼接大屏幕显示布局处理方法,其特征在于,所述方法包括如下步骤:
S1、布局虚拟显示屏,构成虚拟显示墙;
S2、用鼠标在所述虚拟显示屏中拖入输出端中的输出硬件,形成屏幕分割单元;
S3、用鼠标在所述屏幕分割单元中依次拖入输入端中的输入信号。


2.根据权利要求1所述的基于WEB的拼接大屏幕显示布局处理方法,其特征在于,所述S2步骤的具体实现方法为:用鼠标拖动所述输出端中的输出硬件,当所述输出硬件拖入到所述虚拟显示屏时,所述虚拟显示屏的UI会捕捉所述鼠标的位置并判断所述鼠标在哪一个所述虚拟显示屏中,并以此记录所述鼠标拖动的所述输出硬件在所述虚拟显示墙的位置。


3.根据权利要求2所述的基于WEB的拼接大屏幕显示布局处理方法,其特征在于,可对屏幕分割单元进行二次布局。


4.根据权利要求3所述的基于WEB的拼接大屏幕显示布局处理方法,其特征在于,当需要合并所述屏幕分割单元时,按下合并单元,所述虚拟显示屏记录需要合并的所述输出硬件,之后组成一个超屏。


5.根据权利要求3所述的基于WEB的拼接大屏幕显示布局处理方法,其特征在于,所述单个屏幕分割单元还可以分割成多个子显示屏,分割层UI将根据用户设置的比例和所述屏幕分割单元UI层的像素,计算出分割层的实际像素,并覆盖所述屏幕分割单元的UI层,造成...

【专利技术属性】
技术研发人员:方华
申请(专利权)人:广州魅视电子科技有限公司
类型:发明
国别省市:广东;44

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1