CN106162302B - 一种Launcher主界面的编排方法、装置及智能电视 - Google Patents

一种Launcher主界面的编排方法、装置及智能电视 Download PDF

Info

Publication number
CN106162302B
CN106162302B CN201510194244.2A CN201510194244A CN106162302B CN 106162302 B CN106162302 B CN 106162302B CN 201510194244 A CN201510194244 A CN 201510194244A CN 106162302 B CN106162302 B CN 106162302B
Authority
CN
China
Prior art keywords
block
mouse
main interface
tab
blocks
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.)
Active
Application number
CN201510194244.2A
Other languages
English (en)
Other versions
CN106162302A (zh
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.)
TCL Technology Group Co Ltd
Original Assignee
TCL Technology Group 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 TCL Technology Group Co Ltd filed Critical TCL Technology Group Co Ltd
Priority to CN201510194244.2A priority Critical patent/CN106162302B/zh
Publication of CN106162302A publication Critical patent/CN106162302A/zh
Application granted granted Critical
Publication of CN106162302B publication Critical patent/CN106162302B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
    • H04N21/431—Generation of visual interfaces for content selection or interaction; Content or additional data rendering
    • H04N21/4312—Generation of visual interfaces for content selection or interaction; Content or additional data rendering involving specific graphical features, e.g. screen layout, special fonts or colors, blinking icons, highlights or animations
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/80—Generation or processing of content or additional data by content creator independently of the distribution process; Content per se
    • H04N21/81—Monomedia components thereof
    • H04N21/8146—Monomedia components thereof involving graphical data, e.g. 3D object, 2D graphics
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/80—Generation or processing of content or additional data by content creator independently of the distribution process; Content per se
    • H04N21/81—Monomedia components thereof
    • H04N21/8166—Monomedia components thereof involving executable data, e.g. software
    • H04N21/8186—Monomedia components thereof involving executable data, e.g. software specially adapted to be executed by a peripheral of the client device, e.g. by a reprogrammable remote control

Landscapes

  • Engineering & Computer Science (AREA)
  • Multimedia (AREA)
  • Signal Processing (AREA)
  • General Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Computer Graphics (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明适用于智能电视技术领域，提供了一种Launcher主界面的编排方法、装置及智能电视，所述方法包括：获取Tab信息，并根据所述Tab信息将Launcher主界面的编辑区划分为多个Tab；为每个Tab创建Tab页；在创建的Tab页上添加Block、删除Block、通过鼠标拖拽和移动的方式调整Block的大小或调整Block的位置；编辑Block的内容；保存创建的Launcher主界面信息并发布。本发明，可以使运营人员采用拖拽和移动的方式来编排Block的大小和位置，大大提升了用户体验，提升了运营人员编排智能电视Launcher工作效率。

Description

一种Launcher主界面的编排方法、装置及智能电视
技术领域
本发明属于智能电视技术领域，尤其涉及一种Launcher主界面的编排方法、装置及智能电视。
背景技术
传统的智能电视的Launcher主界面通常是出厂时就设置好的，无法动态变化。有些智能电视可以动态改变Launcher主界面的内容，但无法改变Launcher主界面的布局，如果要改变Launcher主界面的布局只有通过安卓Android***版本的升级来完成Launcher主界面的变更。
随着“智能硬件互联网化”，智能电视互联网运营已经是一种趋势。传统的智能电视的Launcher主界面的更新速度已经无法满足用户的需求。Launcher主界面运营人员要根据市场的变化随时调整Launcher主界面。
目前市场上存在的基于WEB的Launcher主界面的编排***大多数还是配置化的方式，这种编排方式通常需要智能电视终端配合显示才能看到编排的效果，很不直观，无法做到所见即所得。
发明内容
本发明实施例提供了一种Launcher主界面的编排方法、***，旨在解决现有技术提供的Launcher主界面的编排方法，需要智能电视终端配合显示才能看到编排的效果，很不直观，无法做到所见即所得的问题。
一方面，提供一种Launcher主界面的编排方法，所述方法包括：
获取Tab信息，并根据所述Tab信息将Launcher主界面的编辑区划分为多个Tab；
为每个Tab创建Tab页；
在创建的Tab页上添加Block、删除Block、通过鼠标拖拽和移动的方式调整Block的大小或调整Block的位置；
编辑Block的内容；
保存创建的Launcher主界面信息并发布。
进一步地，所述创建的Launcher主界面信息是JS对象，在所述保存创建的Launcher主界面信息之前，还包括：
将JS对象转化成数据交换json格式的数据。
进一步地，在所述保存创建的Launcher主界面信息并发布之后，所述方法还包括：
获取所述创建的Launcher主界面信息的数据交换json格式的数据；
将所述创建好的Launcher主界面信息的json格式的数据转化成JS对象；
对所述JS对象进行编辑。
进一步地，所述对所述JS对象进行编辑具体为：在Launcher主界面的编辑区添加Tab页、删除Tab页或者编辑Tab页，所述编辑Tab页包括：在Tab页上添加Block、删除Block、通过鼠标拖拽和移动的方式调整Block的大小或调整Block的位置。
进一步地，所述在在创建的Tab页上通过鼠标拖拽和移动的方式调整Block的大小，包括：
绑定鼠标事件；
在鼠标事件为mousedown时，记录鼠标的起始位置；
在鼠标事件为mousemove时，实时获取鼠标的新位置并更新所述Block的width和height属性的值；
在鼠标事件为mouseup时，重置所述Block右边和下边的Block的位置。
进一步地，所述在创建的Tab页上通过鼠标拖拽和移动的方式调整Block的位置，包括：
绑定鼠标事件；
在鼠标事件为mousedown时，记录鼠标的起始位置；
在鼠标事件为mousemove时，实时获取鼠标的新位置并更新所述Block的left和top属性的值；
在鼠标事件为mouseup时，重置所述Block右边和下边的Block的位置。
进一步地，所述在创建的Tab页上删除Block，包括：
将设定的标签与鼠标的点击事件绑定；
通过所述设定的标签监听鼠标的点击事件；
当监听到用户通过鼠标点击所述设定的标签后，删除所述设定的标签所在的Block。
另一方面，提供一种Launcher主界面的编排装置，所述装置包括：
Tab划分单元，用于获取Tab信息，并根据所述Tab信息将Launcher主界面的编辑区划分为多个Tab；
Tab页创建单元，用于为每个Tab创建Tab页；
Block操作单元，用于在创建的Tab页上添加Block、删除Block、通过鼠标拖拽和移动的方式调整Block的大小或调整Block的位置；
Block编辑单元，用于编辑Block的内容；
发布单元，用于保存创建的Launcher主界面信息并发布。
进一步地，所述创建的Launcher主界面信息是JS对象，所述装置还包括：
第一转换单元，用于将JS对象转化成数据交换json格式的数据。
进一步地，所述装置还包括：
数据获取单元，用于获取所述创建的Launcher主界面信息的数据交换json格式的数据；
第二转换单元，用于将所述创建好的Launcher主界面信息的json格式的数据转化成JS对象；
JS对象编辑单元，用于对所述JS对象进行编辑。
进一步地，所述JS对象编辑单元在Launcher主界面的编辑区添加Tab页、删除Tab页或者编辑Tab页，所述编辑Tab页包括：在Tab页上添加Block、删除Block、通过鼠标拖拽和移动的方式调整Block的大小或调整Block的位置。
进一步地，所述Block操作单元包括：
第一事件绑定模块，用于绑定鼠标事件；
第一位置记录模块，用于在鼠标事件为mousedown时，记录鼠标的起始位置；
第一属性设置模块，用于在鼠标事件为mousemove时，实时获取鼠标的新位置并更新所述Block的width和height属性的值；
第一位置重置模块，用于在鼠标事件为mouseup时，重置所述Block右边和下边的Block的位置。
进一步地，所述Block操作单元还包括：
第二事件绑定模块，用于绑定鼠标事件；
第二位置记录模块，用于在鼠标事件为mousedown时，记录鼠标的起始位置；
第二属性设置模块，用于在鼠标事件为mousemove时，实时获取鼠标的新位置并更新所述Block的width和height属性的值；
第二位置重置模块，用于在鼠标事件为mouseup时，重置所述Block右边和下边的Block的位置。
进一步地，所述Block操作单元还包括：
第三事件绑定模块，用于将设定的标签与鼠标的点击事件绑定；
监听模块，用于通过所述设定的标签监听鼠标的点击事件；
删除模块，用于当监听到用户通过鼠标点击所述设定的标签后，删除所述设定的标签所在的Block。
又一方面，提供一种智能电视，所述智能电视包括如上所述的Launcher主界面的编排装置。
在本发明实施例，可以使运营人员采用拖拽和移动的方式来编排Block的大小和位置，这种图形化可视化的编排方法大大提升了用户体验，提升了运营人员编排智能电视Launcher工作效率，并且基于互联网通过浏览器随时随地访问编排***进行智能电视Launcher的编排，所见即所得，另外，也提升了智能电视终端Launcher主界面的更新速度：WEB端编排完Launcher主界面后可以及时发布，智能电视终端开机即时更新。相比现有技术提供的Launcher主界面的编排方法，需要智能电视终端配合显示才能看到编排的效果，很不直观，无法做到所见即所得的问题。
附图说明
图1是本发明实施例一提供的Launcher主界面的编排方法的实现流程图；
图2是本发明实施例一提供的Launcher主界面的编排方法的界面示意图；
图3是本发明实施例一提供的Launcher主界面的编排方法的实际效果示意图；
图4、图5和图6分别是本发明实施例一提供的Launcher主界面的编排方法中调整Block的位置时，调整位置的Block和其它Block重叠时的示意图；
图7是本发明实施例二提供的Launcher主界面的编排装置的结构框图。
具体实施方式
为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
在本发明实施例中，获取Tab信息并根据所述Tab信息将Launcher主界面的编辑区划分为多个Tab后为每个Tab创建Tab页，再在创建的Tab页上添加Block、删除Block、通过鼠标拖拽和移动的方式调整Block的大小或调整Block的位置，然后编辑Block的内容，最后保存创建的Launcher主界面信息并发布，可以使运营人员采用拖拽和移动的方式来编排Block的大小和位置。
以下结合具体实施例对本发明的实现进行详细描述：
实施例一
图1示出了本发明实施例一提供的Launcher主界面的编排方法的实现流程，本方法采用JavaScript语言并基于JQuery框架支持跨浏览器编排，详述如下：
在步骤S101中，获取Tab信息，并根据所述Tab信息将Launcher主界面编辑区划分为多个Tab。
在本发明实施例中，Tab信息包括Tab名称、次序和至少一个Tab属性信息。如图2所示，Tab信息显示在Tab列表中，Tab信息包括Tab名称、次序、属性1、属性2和属性3。
具体的，Tab属性信息可以包括标识id、样式、终端可编辑、终端可显示、布局固定、内容固定等，如图3所示。
获取到Tab信息后，可点击图2中的创建按钮，触发创建Launcher主界面的事件，开始创建Launcher主界面。
点击图2中的添加Tab按钮后，Launcher主界面的编排***自动获取Tab信息，并根据所述Tab信息将Launcher主界面的编辑区划分为多个Tab。
具体的，点击图2中的添加Tab按钮后，触发弹出添加Tab窗口的事件，用户在添加Tab窗口中录入Tab的相关属性信息并保存。图2所示的Tab列表会增加一行新添加的Tab信息。在图2中还显示一个Tab列表，该Tab列表中显示Tab信息。其中，用鼠标点击次序中的向上或者向下可以改变Launcher主界面中各个Tab的排列顺序。
根据图3上半部分所示的Tab信息，Launcher主界面的编排***将Launcher主界面编辑区划分为7个Tab，分别为推荐、影视、电视、专区、教育、游戏和应用。每个Tab对应一个Tab页，每个Tab页是一个画布，如图3的下半部分所示，可以根据需要添加、删除和编辑画布。
在步骤S102中，为每个Tab创建Tab页。
在本发明实施例中，选定一个Tab，为该Tab创建Tab页，每个Tab页是一个画布，默认创建的Tab页中的Block数为0。
将HTML标签中的第一块元素div作为画布，画布的高和宽在初始化时定义。将画布划分为若干个单元格，单元格的高和宽在画布初始化时定义。将HTML标签中的第二块元素div作为画布内的块Block，画布由Block组成，Block的间隔大小在画布初始化时定义，画布内的Block为矩形，占据一个或多个单元格。
为每个Tab创建画布时，首先需要创建画布对象并设置画布的主要属性：
widget_tag：Block标签元素
widget_margins：Block的间隔距离
widget_base_dimensions单元格的高和宽
background:#BBB规定了画布的背景颜色
backgroud：#DDD规定了Block的背景颜色
cursor:pointer规定了鼠标指针移动到标签元素上面变成手型，将CSS文件中的样式加载到画布中。
其次，需要构造方法function Canvas()获取画布html标签对象并赋值，加载页面时，将画布的html输出到浏览器中，创建Block数组对象用来存放添加的Block对象，创建样式标签对象存放画布样式对象。初始化init()将上面画布的属性赋值给画布对象对应的属性。
在步骤S103中，在创建的Tab页上添加Block、删除Block、通过鼠标拖拽和移动的方式调整Block的大小或调整Block的位置。
在本发明实施例中，图2所示的1*1、2*1、1*2和2*2为设置的4个添加Block的按钮。1*1表示添加的Block高占据1个单元格并且宽占据1个单元格(如图2中的Block1和Block2)，2*1表示添加的Block高占据2个单元格并且宽占据1个单元格(如图2中的Block3)，1*2表示添加的Block高占据1个单元格并且宽占据2个单元格(如图2中的Block6和Block7)，2*2表示添加的Block高占据1个单元格并且宽占据2个单元格(如图2中的Block4)，添加Block的按钮还可以根据用户需求进行扩展。
如果画布中Block已经存在，则设置参数(col,row,x_size,y_size)，并调用添加Block方法将Block添加到画布中；如果画布中的Block不存在，需要点击添加Block按钮进行添加。
添加Block的过程如下：
创建Block对象并设置计算出Block的坐标：
col:Block占据几列单元格
row:Block占据几行单元格
x_size:Block左上角的x轴坐标
y_size:Block左上角的y轴坐标
如果是点击按钮添加Block，根据添加的按钮的规格来计算Block的(col,row,x_size,y_size)参数，默认添加顺序为从左到右。
例如：规格为1*2的参数计算如下：
col＝2 row＝1 x_size＝画布的x轴坐标 y_size＝0
通过以上4个参数可以计算出Block的右下角的坐标和Block的高和宽
Block的右下角的坐标(x,y)
x＝x_size+col*单元格的宽 y＝y_size+row*单元格的高
Block的高和宽(height,width)
height＝row*单元格的高 width＝col*单元格的宽
组装Block的html片段：
Figure BDA0000703934140000081
Figure BDA0000703934140000091
标签<div class＝"block_content">用来存放Block编辑的内容
标签<i>用来监听鼠标的点击事件，用户点击此标签后删除此标签所在的Block
将上面设置的属性转化成属性添加到中BlockHtml中，同时向画布对象Block数组中添加Block对象：
Figure BDA0000703934140000092
向画布所在的div中添加Block的html片段并调用fadeIn()方法将添加的Block以淡入的方式显示。
删除Block是将Block对应的div移除，将设定的标签与鼠标的点击事件绑定后，通过所述设定的标签监听鼠标的点击事件，当监听到用户通过鼠标点击所述设定的标签后，删除所述设定的标签所在的Block，删除Block的过程如下：
将上面的标签<i>绑定点击事件，鼠标点击该标签，将该标签所在的Block对应的html片段从画布中删除，调用fadeOut()方法将删除的Block以淡出的方式显示。
将鼠标移动到Block的右下角时，鼠标形状变为双向箭头，点击鼠标后可以调整Block的大小，Block的高和宽只能调整为单元格高和宽的整数倍。调整大小后，画布重新计算该Block下面和右面所有的Block的坐标，并改变它们的xy轴坐标。通过鼠标拖拽和移动的方式调整Block的大小的过程如下：
首先为Block对应的div标签绑定鼠标的mousedown、mousemove、mouseup事件；
在mousedown时，记录鼠标的初始位置信息x轴坐标y轴坐标；
在mousemove时，不断的获取鼠标的新位置，实时计算鼠标偏移量，根据鼠标偏移量、单元格的宽高、偏移位置算法实时计算Block样式的width和height属性的值并更新；
在mouseup时，结束调整大小，并重置所述Block右边和下边的Block的位置。如果调整的Block变大，则将调整的Block右边和下边的Block向下移动，如果调整的Block变小，则将调整的Block右边和下边的Block向上移动。
例如：将图2中Block1(1*1)调整至Block1(2*2)，Block2向下移动1个单元格，Block3向下移动1个单元格。
偏移位置算法：
a)、横向移动距离
如果(鼠标横向偏移量％单元格宽)>＝0.5*单元格宽
Block的横向偏移量＝(鼠标横向偏移量％单元格宽+1)*单元格宽
Block样式的width属性值＝Block初始样式width属性值±Block的横向偏移量
如果(鼠标横向偏移量％单元格宽)<0.5*单元格宽
Block的横向偏移量＝(鼠标横向偏移量％单元格宽)*单元格宽
Block样式的width属性值＝Block初始样式width属性值±Block的横向偏移量
b)、纵向移动距离
如果(鼠标纵向偏移量％单元格高)>＝0.5*单元格高
Block的纵向偏移量＝(鼠标纵向偏移量/单元格宽+1)*单元格高
Block样式的heigth属性值＝Block初始样式heigth属性值±Block的纵向偏移量
如果(鼠标纵向偏移量％单元格高)<0.5*单元格高
Block的横向偏移量＝(鼠标纵向偏移量/单元格高)*单元格高
Block样式的heigth属性值＝Block初始样式heigth属性值±Block的纵向偏移量
将鼠标移动到Block对应的区域时，鼠标形状变为手型，点击鼠标后可以调整Block的位置，Block只能移动单元格的高和宽的整数倍。通过鼠标拖拽和移动的方式调整Block的位置，具体过程如下：
首先为Block对应的div标签绑定鼠标的mousedown、mousemove、mouseup事件；
在mousedown时，记录鼠标的初始位置信息x轴坐标y轴坐标；
在mousemove时，不断的获取鼠标的新位置，实时计算鼠标偏移量，根据偏移量和偏移位置算法，实时更新Block样式中的left和top属性的值；
在mouseup时，重置所述Block右边和下边的Block的位置。
优选地，在mouseup时，可以采用判断是否重叠算法检查该Block是否与其他Block重叠，如果重叠，此次移动无效。
判断是否重叠算法：Block的左上角的坐标为(x1,y1)，右下角的坐标为(x2,y2)
如果Block a的左上角的坐标和右下角的坐标与Block b的左上角的坐标和右下角的坐标之间满足以下关系，则表示Block a与Block b重叠。
关系1：(b.x1>＝a.x1&&b.x1<＝a.x2)||(b.y1>＝a.y1&&b.y1<＝a.y2)，如图4所示；
关系2：(b.x2>＝a.x1&&b.x2<＝a.x2)||b.y2>＝a.y1&&b.y2<＝a.y2)，如图5所示；
关系3：(a.x1>＝b.x1&&a.x2<＝b.x2)||(a.y1>＝b.y1&&a.y2<＝b.y2)，如图6所示。
在步骤S104中，编辑Block的内容。
在本发明实施例中，给Block的标签绑定双击事件，鼠标双击弹出选择内容的窗口，选择内容保存后将生成的html片段***到上面的<divclass＝"block_content">标签中。
在步骤S105中，保存创建的Launcher主界面信息并发布。
在本发明实施例中，保存创建的Launcher主界面信息时，将JS对象转化成数据交换json格式的数据后保存至后台。
优选地，在本发明实施例中，还可以对创建的Launcher主界面进行编辑，进行编辑时，首先获取创建的Launcher主界面信息的数据交换json格式的数据，再将所述创建好的Launcher主界面信息的json格式的数据转化成JS对象，然后对所述JS对象进行编辑。
具体的，对所述JS对象进行的编辑具体包括：在Launcher主界面的编辑区添加Tab页、删除Tab页或者编辑Tab页，所述编辑Tab页包括：在Tab页上添加Block、删除Block、调整Block的大小或调整Block的位置。
优选地，在本发明实施例中，可以根据Block的所在的行数或列数对画布中的Block重新排列，为用户提供以下几种Block的排列方式：
sort_by_row_asc()根据Block所在的行升序排列Block；
sort_by_row_desc()根据Block所在的行降序排列Block；
sort_by_col_asc()根据Block所在的列升序排列Block；
sort_by_col_desc()根据Block所在的列降序排列Block。
本实施例，通过基于WEB的智能电视Launcher主界面编排方法可以使运营人员采用通过鼠标拖拽和移动的方式来编排Block的大小和位置，这种图形化可视化的编排方法大大提升了用户体验，提升了运营人员编排智能电视Launcher工作效率，并且基于互联网通过浏览器随时随地访问编排***进行智能电视Launcher的编排，所见即所得，另外，也提升了智能电视终端Launcher主界面的更新速度。WEB端编排完Launcher主界面后可以及时发布，智能电视终端开机即时更新，甚至让用户自行编辑只能电视的Launcher主界面，提供更智能更个性化的界面设置功能。相比现有技术提供的Launcher主界面的编排方法，需要智能电视终端配合显示才能看到编排的效果，很不直观，无法做到所见即所得的问题。
另外，本发明实施例提供的Launcher主界面编排方法，采用JavaScript语言并基于JQuery框架支持跨浏览器编排，由于前端JavaScript代码量小，浏览器加载速度快，使得编排操作流畅，使得编排效率得到大大提升。
本领域普通技术人员可以理解实现上述各实施例方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，相应的程序可以存储于一计算机可读取存储介质中，所述的存储介质，如ROM/RAM、磁盘或光盘等。
实施例二
图7示出了本发明实施例二提供的Launcher主界面的编排装置的具体结构框图，为了便于说明，仅示出了与本发明实施例相关的部分。该Launcher主界面的编排装置可以是内置于智能电视中的软件单元、硬件单元或者软硬件结合的单元，该Launcher主界面的编排装置7包括：Tab划分单元71、Tab页创建单元72、Block操作单元73、Block编辑单元74和发布单元75。
其中，Tab划分单元71，用于获取Tab信息，并根据所述Tab信息将Launcher主界面的编辑区划分为多个Tab；
Tab页创建单元72，用于为每个Tab创建Tab页；
Block操作单元73，用于在创建的Tab页上添加Block、删除Block、通过鼠标拖拽和移动的方式调整Block的大小或调整Block的位置；
Block编辑单元74，用于编辑Block的内容；
发布单元75，用于保存创建的Launcher主界面信息并发布。
进一步地，所述创建的Launcher主界面信息是JS对象，所述装置7还包括：
第一转换单元，用于将JS对象转化成数据交换json格式的数据。
进一步地，所述装置7还包括：
数据获取单元，用于获取所述创建的Launcher主界面信息的数据交换json格式的数据；
第二转换单元，用于将所述创建好的Launcher主界面信息的json格式的数据转化成JS对象；
JS对象编辑单元，用于对所述JS对象进行编辑。
进一步地，所述JS对象编辑单元在Launcher主界面的编辑区添加Tab页、删除Tab页或者编辑Tab页，所述编辑Tab页包括：在Tab页上添加Block、删除Block、通过鼠标拖拽和移动的方式调整Block的大小或调整Block的位置。
进一步地，所述Block操作单元73包括：
第一事件绑定模块，用于绑定鼠标事件；
第一位置记录模块，用于在鼠标事件为mousedown时，记录鼠标的起始位置；
第一属性设置模块，用于在鼠标事件为mousemove时，实时获取鼠标的新位置并更新所述Block的width和height属性的值；
第一位置重置模块，用于在鼠标事件为mouseup时，重置所述Block右边和下边的Block的位置。
进一步地，所述Block操作单元73还包括：
第二事件绑定模块，用于绑定鼠标事件；
第二位置记录模块，用于在鼠标事件为mousedown时，记录鼠标的起始位置；
第二属性设置模块，用于在鼠标事件为mousemove时，实时获取鼠标的新位置并更新所述Block的width和height属性的值；
第二位置重置模块，用于在鼠标事件为mouseup时，重置所述Block右边和下边的Block的位置。
进一步地，所述Block操作单元73还包括：
第三事件绑定模块，用于将设定的标签与鼠标的点击事件绑定；
监听模块，用于通过所述设定的标签监听鼠标的点击事件；
删除模块，用于当监听到用户通过鼠标点击所述设定的标签后，删除所述设定的标签所在的Block。
本发明实施例提供的Launcher主界面的编排装置可以应用在前述对应的方法实施例一中，详情参见上述实施例一的描述，在此不再赘述。
值得注意的是，上述装置实施例中，所包括的各个单元只是按照功能逻辑进行划分的，但并不局限于上述的划分，只要能够实现相应的功能即可；另外，各功能单元的具体名称也只是为了便于相互区分，并不用于限制本发明的保护范围。
以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本发明的保护范围之内。

Claims (15)

1.一种Launcher主界面的编排方法，其特征在于，所述方法包括：
获取Tab信息，并根据所述Tab信息将Launcher主界面的编辑区划分为多个Tab；
为每个Tab创建Tab页；
在创建的Tab页上添加Block、删除Block、通过鼠标拖拽和移动的方式调整Block的大小或调整Block的位置；其中，在通过鼠标拖拽和移动的方式调整Block的位置的过程中，当触发mouseup事件时，通过重叠算法检查所述Block是否与其他Block重叠，如果所述Block与所述其他Block重叠，则所述Block的当次移动无效；
编辑Block的内容；
通过WEB端编排后保存创建的Launcher主界面信息并发布，以指示智能电视终端根据所述Launcher主界面信息更新Launcher主界面；
通过重叠算法检查所述Block是否与其他Block重叠，包括：
判断所述Block的坐标与所述其他Block的坐标是否满足预设坐标关系；
当所述Block的坐标与所述其他Block的坐标满足所述预设坐标关系，所述Block与所述其他Block重叠；
当所述Block的坐标与所述其他Block的坐标不满足所述预设坐标关系，所述Block与所述其他Block不重叠。
2.如权利要求1所述的方法，其特征在于，所述创建的Launcher主界面信
息是JS对象，在所述保存创建的Launcher主界面信息之前，还包括：
将JS对象转化成数据交换json格式的数据。
3.如权利要求2所述的方法，其特征在于，在所述保存创建的Launcher
主界面信息并发布之后，所述方法还包括：
获取所述创建的Launcher主界面信息的数据交换json格式的数据；
将所述创建好的Launcher主界面信息的json格式的数据转化成JS对象；
对所述JS对象进行编辑。
4.如权利要求3所述的方法，其特征在于，所述对所述JS对象进行编辑具
体为：在Launcher主界面的编辑区添加Tab页、删除Tab页或者编辑Tab页，所述编辑Tab页包括：在Tab页上添加Block、删除Block、通过鼠标拖拽和移动的方式调整Block的大小或调整Block的位置。
5.如权利要求1所述的方法，其特征在于，所述在创建的Tab页上通过
鼠标拖拽和移动的方式调整Block的大小，包括：
绑定鼠标事件；
在鼠标事件为mousedown时，记录鼠标的起始位置；
在鼠标事件为mousemove时，实时获取鼠标的新位置并更新所述Block的width和height属性的值；
在鼠标事件为mouseup时，重置所述Block右边和下边的Block的位置。
6.如权利要求1所述的方法，其特征在于，所述在创建的Tab页上通过鼠
标拖拽和移动的方式调整Block的位置，包括：
绑定鼠标事件；
在鼠标事件为mousedown时，记录鼠标的起始位置；
在鼠标事件为mousemove时，实时获取鼠标的新位置并更新所述Block的left和 top属性的值；
在鼠标事件为mouseup时，重置所述Block右边和下边的Block的位置。
7.如权利要求1所述的方法，其特征在于，所述在创建的Tab页上删除
Block，包括：
将设定的标签与鼠标的点击事件绑定；
通过所述设定的标签监听鼠标的点击事件；
当监听到用户通过鼠标点击所述设定的标签后，删除所述设定的标签所在的Block。
8.一种Launcher主界面的编排装置，其特征在于，所述装置包括：
Tab划分单元，用于获取Tab信息，并根据所述Tab信息将Launcher主界面的编辑区划分为多个Tab；
Tab页创建单元，用于为每个Tab创建Tab页；
Block操作单元，用于在创建的Tab页上添加Block、删除Block、通过鼠标拖拽和移动的方式调整Block的大小或调整Block的位置；其中，在通过鼠标拖拽和移动的方式调整Block的位置的过程中，当触发mouseup事件时，通过重叠算法检查所述Block是否与其他Block重叠，如果所述Block与所述其他Block重叠，则所述Block的当次移动无效；
Block编辑单元，用于编辑Block的内容；
发布单元，用于通过WEB端编排后保存创建的Launcher主界面信息并发布，以指示智能电视终端根据所述Launcher主界面信息更新Launcher主界面；
所述Block操作单元具体用于：
判断所述Block的坐标与所述其他Block的坐标是否满足预设坐标关系；
当所述Block的坐标与所述其他Block的坐标满足所述预设坐标关系，所述Block与所述其他Block重叠；
当所述Block的坐标与所述其他Block的坐标不满足所述预设坐标关系，所述Block与所述其他Block不重叠。
9.如权利要求8所述的装置，其特征在于，所述创建的Launcher主界面信
息是JS对象，所述装置还包括：
第一转换单元，用于将JS对象转化成数据交换json格式的数据。
10.如权利要求9所述的装置，其特征在于，所述装置还包括：
数据获取单元，用于获取所述创建的Launcher主界面信息的数据交换json格式的数据；
第二转换单元，用于将所述创建好的Launcher主界面信息的json格式的数据转化成JS对象；
JS对象编辑单元，用于对所述JS对象进行编辑。
11.如权利要求10所述的装置，其特征在于，所述JS对象编辑单元在
Launcher主界面的编辑区添加Tab页、删除Tab页或者编辑Tab页，所述编辑Tab页包括：在Tab页上添加Block、删除Block、通过鼠标拖拽和移动的方式调整Block的大小或调整Block的位置。
12.如权利要求8所述的装置，其特征在于，所述Block操作单元包括：
第一事件绑定模块，用于绑定鼠标事件；
第一位置记录模块，用于在鼠标事件为mousedown时，记录鼠标的起始位置；
第一属性设置模块，用于在鼠标事件为mousemove时，实时获取鼠标的新位置并更新所述Block的width和 height属性的值；
第一位置重置模块，用于在鼠标事件为mouseup时，重置所述Block右边和下边的Block的位置。
13.如权利要求8所述的装置，其特征在于，所述Block操作单元还包括：
第二事件绑定模块，用于绑定鼠标事件；
第二位置记录模块，用于在鼠标事件为mousedown时，记录鼠标的起始位置；
第二属性设置模块，用于在鼠标事件为mousemove时，实时获取鼠标的新位置并更新所述Block的left和 top属性的值；
第二位置重置模块，用于在鼠标事件为mouseup时，重置所述Block右边和下边的Block的位置。
14.如权利要求8所述的装置，其特征在于，所述Block操作单元还包括：
第三事件绑定模块，用于将设定的标签与鼠标的点击事件绑定；
监听模块，用于通过所述设定的标签监听鼠标的点击事件；
删除模块，用于当监听到用户通过鼠标点击所述设定的标签后，删除所述设定的标签所在的Block。
15.一种智能电视，其特征在于，所述智能电视包括如权利要求8至14
任一项所述的Launcher主界面的编排装置。
CN201510194244.2A 2015-04-22 2015-04-22 一种Launcher主界面的编排方法、装置及智能电视 Active CN106162302B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201510194244.2A CN106162302B (zh) 2015-04-22 2015-04-22 一种Launcher主界面的编排方法、装置及智能电视

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201510194244.2A CN106162302B (zh) 2015-04-22 2015-04-22 一种Launcher主界面的编排方法、装置及智能电视

Publications (2)

Publication Number Publication Date
CN106162302A CN106162302A (zh) 2016-11-23
CN106162302B true CN106162302B (zh) 2020-08-18

Family

ID=57346533

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201510194244.2A Active CN106162302B (zh) 2015-04-22 2015-04-22 一种Launcher主界面的编排方法、装置及智能电视

Country Status (1)

Country Link
CN (1) CN106162302B (zh)

Families Citing this family (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107483449B (zh) * 2017-08-24 2020-07-28 四川长虹电器股份有限公司 一种可通用的电视终端管理***和管理方法
CN109656669B (zh) * 2018-12-26 2021-11-16 深圳小湃科技有限公司 Launcher运营方法、装置、设备以及计算机可读存储介质
CN109783097B (zh) * 2018-12-29 2020-10-23 南京控维通信科技有限公司 绘制web频率图插件的实现方法
CN110704146A (zh) * 2019-08-30 2020-01-17 华为技术有限公司 一种应用于电子设备的焦点管理方法及电子设备
CN113242471B (zh) * 2021-05-25 2022-07-12 四川虹魔方网络科技有限公司 基于Vue实现电视Launcher***web端预览组件的方法
CN114816202B (zh) * 2022-05-09 2024-06-11 广州市易工品科技有限公司 tab组件里的图表跨界交互方法、装置、设备及介质

Citations (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102541426A (zh) * 2010-12-31 2012-07-04 联想(北京)有限公司 一种电子设备及其对象处理方法
CN102819401A (zh) * 2012-06-08 2012-12-12 中标软件有限公司 一种Android操作***及其桌面图标布置方法
CN103116452A (zh) * 2013-01-31 2013-05-22 华为终端有限公司 桌面组件创建方法、装置和终端设备
CN103246500A (zh) * 2012-02-06 2013-08-14 腾讯科技（深圳）有限公司 桌面图标展示方法和装置
CN103399750A (zh) * 2013-08-07 2013-11-20 北京奇虎科技有限公司 用户界面实现方法及装置
CN103577197A (zh) * 2013-11-18 2014-02-12 深圳市远行科技有限公司 一种安卓应用程序动态表单的实现方法
CN103605640A (zh) * 2013-12-03 2014-02-26 中国联合网络通信集团有限公司 表单适配方法和装置
CN104020924A (zh) * 2014-05-21 2014-09-03 小米科技有限责任公司 标签创建方法、装置及终端
CN104063134A (zh) * 2014-07-03 2014-09-24 上海斐讯数据通信技术有限公司 一种Android Launcher桌面管理的方法

Family Cites Families (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101083750A (zh) * 2006-05-31 2007-12-05 北京汉辰科技有限公司 个人电视门户的服务应用及其实现方法
CN101196818A (zh) * 2006-12-08 2008-06-11 上海全景数字技术有限公司 快速图形化开发***
CN101140516A (zh) * 2007-10-22 2008-03-12 金蝶软件（中国）有限公司 一种动态布局界面元素的方法和***
CN101207450B (zh) * 2007-12-14 2011-05-11 北大方正集团有限公司 一种专题模板制作方法及客户端和网络侧服务器
CN101504669B (zh) * 2009-03-06 2011-08-24 阿里巴巴集团控股有限公司 一种Web应用的模板发布方法、装置及***
CN101615121A (zh) * 2009-07-22 2009-12-30 福州星网视易信息***有限公司 Bs平台信息发布***的样式编辑器
CN101702126B (zh) * 2009-12-04 2012-11-28 金蝶软件（中国）有限公司 一种图形界面编辑方法及装置
CN102375664B (zh) * 2010-08-20 2013-09-04 ***通信集团公司 一种图标移动方法和装置
CN102654833A (zh) * 2012-02-01 2012-09-05 中兴通讯（香港）有限公司 一种手机应用开发方法和***
CN103970401A (zh) * 2013-02-05 2014-08-06 富泰华工业（深圳）有限公司 用于电子装置的用户界面
CN103618955A (zh) * 2013-11-08 2014-03-05 天津三星电子有限公司 电视机界面配置的实现方法及***
CN104090979B (zh) * 2014-07-23 2017-10-24 上海天脉聚源文化传媒有限公司 一种网页编辑方法及装置

Patent Citations (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102541426A (zh) * 2010-12-31 2012-07-04 联想(北京)有限公司 一种电子设备及其对象处理方法
CN103246500A (zh) * 2012-02-06 2013-08-14 腾讯科技（深圳）有限公司 桌面图标展示方法和装置
CN102819401A (zh) * 2012-06-08 2012-12-12 中标软件有限公司 一种Android操作***及其桌面图标布置方法
CN103116452A (zh) * 2013-01-31 2013-05-22 华为终端有限公司 桌面组件创建方法、装置和终端设备
CN103399750A (zh) * 2013-08-07 2013-11-20 北京奇虎科技有限公司 用户界面实现方法及装置
CN103577197A (zh) * 2013-11-18 2014-02-12 深圳市远行科技有限公司 一种安卓应用程序动态表单的实现方法
CN103605640A (zh) * 2013-12-03 2014-02-26 中国联合网络通信集团有限公司 表单适配方法和装置
CN104020924A (zh) * 2014-05-21 2014-09-03 小米科技有限责任公司 标签创建方法、装置及终端
CN104063134A (zh) * 2014-07-03 2014-09-24 上海斐讯数据通信技术有限公司 一种Android Launcher桌面管理的方法

Also Published As

Publication number Publication date
CN106162302A (zh) 2016-11-23

Similar Documents

Publication Publication Date Title
CN106162302B (zh) 一种Launcher主界面的编排方法、装置及智能电视
JP7354294B2 (ja) 階層流動コンポーネントおよび動的レイアウトを統合した応答編集および表示を提供するシステムおよび方法
US20220236866A1 (en) Method and system for section-based editing of a website page
US8438495B1 (en) Methods and systems for creating wireframes and managing containers
US10474317B2 (en) Dynamic node grouping in grid-based visualizations
CN109614424B (zh) 页面布局生成方法、装置、计算设备和介质
JP5792287B2 (ja) オプションを選択するためのスピンコントロールユーザインターフェース
US10049095B2 (en) In-context editing of output presentations via automatic pattern detection
CN104239305A (zh) 生成及展现电子文档的方法及装置
CN112083920A (zh) 一种前端页面设计方法、装置、存储介质及设备
CN103176954A (zh) 一种基于HTML5 canvas的数学公式显示方法及***
CN105528217A (zh) 一种基于显示列表的局部刷新方法及装置
CN110825382A (zh) 一种前端大数据树形结构展示方法
CN105096368A (zh) 三维对象处理方法和相关装置
CN113010162B (zh) 一种页面构建方法、装置及设备
WO2021098579A1 (zh) 图表绘制方法、装置、设备及存储介质
CN115982266A (zh) 基于自定义配置属性字段的页面动态渲染方法及***
CN111506306B (zh) 一种Ansible剧本编写方法、装置和电子设备
CA2983248A1 (en) Rendering graphical assets natively on multiple screens of electronic devices
KR101649822B1 (ko) 웹페이지 구축 장치 및 방법
CN104281575A (zh) 一种网页数据获取方法及模版引擎
CN111782309B (zh) 显示信息的方法、装置及计算机可读存储介质
CN104462101A (zh) 一种信息处理的方法及电子设备
CN115509665B (zh) 一种录制窗口中控件的方法、装置、介质及设备
CN112269960B (zh) 基于关联报表的网页更新方法、***、设备及存储介质

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
CB02 Change of applicant information

Address after: 516006 TCL technology building, No.17, Huifeng Third Road, Zhongkai high tech Zone, Huizhou City, Guangdong Province

Applicant after: TCL Technology Group Co.,Ltd.

Address before: 516006 Guangdong province Huizhou Zhongkai hi tech Development Zone No. nineteen District

Applicant before: TCL RESEARCH AMERICA Inc.

CB02 Change of applicant information
GR01 Patent grant
GR01 Patent grant