本发明涉及一种ui布局方法,尤其是涉及一种视频终端布局的动态配置方法。
背景技术:
随着视频行业的快速发展,视频终端的布局方式变得多种多样的同时,视频终端布局的多样性和可变性的要求也变得更高起来;此外对于相关从业人员而言,工作内容也变得更重:在后台进行布局排版后,需要在视频终端上检查布局的最终效果,如果结果不对,还需要多次重复操作的上述动作的痛点;还限制了编辑人员只能在有视频终端的前提下进行确认工作。
技术实现要素:
本发明的目的就是为了克服上述现有技术存在的缺陷而提供一种视频终端布局的动态配置方法,使视频编辑布局人员在后台管理系统中即可完成编辑后的视频终端布局预览动作。
本发明的目的可以通过以下技术方案来实现:
一种视频终端布局的动态配置方法,包括以下流程:
后台管理服务器配置ui的布局模板;
编辑ui中的单元块,包括合并、删除、拆分操作;
在单元块中赋予配置的节目信息;
通过html技术在网页中生成ui预览图,同时后台管理服务器将ui布局信息发送给视频终端。
所述的单元块初始为二维方阵布局。
所述的节目信息包括名称、海报、视频源。
所述的后台管理服务器发送给视频终端的ui布局信息包括:单元块的坐标、宽度和高度,以及单元块中的节目信息。
所述的后台管理服务器以固定的刷新频率将ui布局信息发送给视频终端。
所述的单元块合并或拆分后呈长方形。
与现有技术相比,本发明具有以下优点:
(1)通过html技术在网页中生成ui预览图,不依靠视频终端进行预览ui和布局,可实现动态配置,便捷性强,配置效率高;
(2)后台管理服务器以固定的刷新频率将ui布局信息发送给视频终端,视频终端可及时获取当前布局信息;
(3)扩展性高,由于模板可以动态配置,可以根据实际情况调整模板布局情况;
(4)实现成本低,一次开发,支持动态配置布局ui。
附图说明
图1为本发明的软件流程图。
具体实施方式
下面结合附图和具体实施例对本发明进行详细说明。本实施例以本发明技术方案为前提进行实施,给出了详细的实施方式和具体的操作过程,但本发明的保护范围不限于下述的实施例。
实施例
如图1所示,一种视频终端布局的动态配置方法,包括以下流程:
1)后台管理服务器配置ui的布局模板;
2)编辑ui中的单元块,包括合并、删除、拆分操作,单元块初始为二维方阵布局,单元块合并或拆分后呈长方形;
3)在单元块中赋予配置的节目信息,节目信息包括名称、海报、视频源;
4)通过html技术在网页中生成ui预览图,同时后台管理服务器将ui布局信息发送给视频终端,ui布局信息包括:单元块的坐标、宽度和高度,以及单元块中的节目信息;后台管理服务器以固定的刷新频率将ui布局信息发送给视频终端。
具体的,编辑人员动态配置ui布局模板,可以动态的对最小单元块进行合并,以及合并后分离单元块,包括如下操作:
1.首先初始化模板的大小,例如设置模板为3行7列,配置完成后,系统会根据配置的行和列在右侧生成最小单元格的方块(1x1);
2.合并操作:编辑人员点击单元格时,单元格右上角会有选中标记,当且仅当选中的单元格数量大于2,且选中的单元格最终形状为长方形时才可以合并成功。选中后,右键点击单元格区域会出现合并、分离两个操作;
3.分离操作:编辑人员先选中单元格,右键点击后出现合并、分离操作,点击分离即可将单元格分离成(m行*n*列)个最小的单元格(1x1),当且仅当单元格大于1行1列才可以进行分离操作;
4.删除操作,支持删除部分单元格,以方便模板支持各种形状。
5.编辑人员在后台管理系统中,给模板中的每个单元块中设置对应的节目信息(名称、海报、视频源等信息)。编辑人员点击预览,系统根据上述模板和配置的节目信息,通过html技术,生成跟视频终端布局一致的ui,方便编辑人员确认布局编辑情况,而无需去视频终端上进行编辑确认工作。
用户终端开机或者终端触发刷新操作时,用户终端使用ajax向后端发送请求,获取当前布局的信息,按照获取到的ui布局信息,获取整个终端ui的最大高度和宽度,计算出基础单元格的高度和宽度大小,按照各个单元格的大小进行最终布局的绘制。