CN111064983B - 显示设备 - Google Patents
显示设备 Download PDFInfo
- Publication number
- CN111064983B CN111064983B CN201911317727.1A CN201911317727A CN111064983B CN 111064983 B CN111064983 B CN 111064983B CN 201911317727 A CN201911317727 A CN 201911317727A CN 111064983 B CN111064983 B CN 111064983B
- Authority
- CN
- China
- Prior art keywords
- picture
- display
- user interface
- column
- items
- 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
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/41—Structure of client; Structure of client peripherals
- H04N21/422—Input-only peripherals, i.e. input devices connected to specially adapted client devices, e.g. global positioning system [GPS]
- H04N21/42204—User interfaces specially adapted for controlling a client device through a remote control device; Remote control devices therefor
-
- 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
- H04N21/4314—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 for fitting data in a restricted space on the screen, e.g. EPG data in a rectangular grid
-
- 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/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
- H04N21/47—End-user applications
- H04N21/482—End-user interface for program selection
- H04N21/4821—End-user interface for program selection using a grid, e.g. sorted out by channel and broadcast time
-
- 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/47—End-user applications
- H04N21/485—End-user interface for client configuration
- H04N21/4858—End-user interface for client configuration for modifying screen layout parameters, e.g. fonts, size of the windows
Landscapes
- Engineering & Computer Science (AREA)
- Multimedia (AREA)
- Signal Processing (AREA)
- Human Computer Interaction (AREA)
- Controls And Circuits For Display Device (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明实施例涉及显示技术领域,尤其涉及一种显示设备,包括:显示器;用户接口,用于接收用户输入;控制器,用于执行:响应于用于指示显示多个项目的用户输入,控制显示器显示用户界面;其中,所述用户界面包括布局的多个项目,所述多个项目以等宽度且不等高度的排布方式进行布局;以及,所述用户界面包括指示所述项目被选择的选择器,所述选择器可通过用户输入而移动所述选择器在所述用户界面中的位置,以选择不同的项目。
Description
技术领域
本发明涉及显示技术领域,尤其涉及一种显示设备。
背景技术
智能电视操作***(Android,Linux等)中,视频、应用、图片等资源的使用日益增多。通常会将与资源相关的项目进行展示,以便于用户了解并选择相应的资源,进行进一步的播放或操作等。
目前的显示设备缺乏较好的页面布局方式来展示项目。
发明内容
本发明第一方面,提供一种显示设备,包括:
显示器;
用户接口,用于接收用户输入;
控制器,用于执行:
响应于用于指示显示多个项目的用户输入,控制显示器显示用户界面;
其中,所述用户界面包括布局多个项目,所述多个项目以等宽度且不等高度的排布方式进行布局;以及,所述用户界面包括指示所述项目被选择的选择器,所述选择器用于通过在所述用户界面中移动而选择不同的项目。
本发明第二方面,提供一种显示设备,包括:
显示器;
用户接口,用于接收用户输入;
控制器,用于执行:
响应于显示一类项目的用户输入,确定预设数量的列中各列项目的高度,以及将目标项目布局至所述各列项目的高度中高度最小的一列,以及控制显示器显示包括布局所述一类项目的用户界面;
其中,所述一类项目包括多个项目,所述多个项目包括至少一个所述目标项目。
本发明第三方面,提供显示设备,包括:
显示器;
用户接口,用于接收用户输入;
控制器,用于执行:
响应于显示一类项目的用户输入,将预设数量的列按照各列项目的高度从小到大进行排序,以及,将所述预设数量的目标项目按照高度从大到小的顺序进行排序,以及,基于两次排序结果,将排序后的预设数量的目标项目依次布局至排序后的各列中,以及控制显示器显示包括布局所述一类项目的用户界面;
其中,所述一类项目包括多个项目,所述多个项目包括至少一个所述目标项目。
在上述实施例中,用户界面中多个项目以等宽度且不等高度的排布方式进行布局,一方面,项目的宽度是相同的,可一定程度上保证用户的观感,另一方面,可以将获取的待显示项目进行缩放后排布在用户界面中进行显示,无需将项目进行裁剪,避免了显示的项目局部缺失的问题,为用户展示更加充分、真实、原始的信息,以便于用户进行正确的判断。
附图说明
为了更清楚地说明本发明实施例中的技术方案,下面将对实施例描述中所需要使用的附图作简要介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域的普通技术人员来讲,在不付出创造性劳动性的前提下,还可以根据这些附图获得其他的附图。
图1A中示例性示出了显示设备与控制装置之间操作场景的示意图;
图1B中示例性示出了图1A中控制装置100的配置框图;
图1C中示例性示出了图1A中显示设备200的配置框图;
图1D中示例性示出了显示设备200存储器中操作***的架构配置框图;
图2中示例性示出了显示设备200提供的一个GUI400的示意图;
图3中示例性示出了页面的第1行加载满图片的效果示意图;
图4中示例性示出了在图3的基础上加载另一个图片时的效果示意图;
图5A和图5B中分别示例性示出了选择器在用户界面中移动以选择不同图片的示意图。
具体实施方式
为了使本发明的目的、技术方案和优点更加清楚,下面将结合附图对本发明作进一步地详细描述,显然,所描述的实施例仅仅是本发明一部份实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例,都属于本发明保护的范围。
本发明中的术语“用户界面”,是应用程序或操作***与用户之间进行交互和信息交换的介质接口,它实现信息的内部形式与用户可以接受形式之间的转换。用户界面常用的表现形式是图形用户界面(graphicuserinterface,GUI),是指采用图形方式显示的与计算机操作相关的用户界面。它可以是在显示设备的显示屏中显示的一个图标、窗口、控件等界面元素,其中控件可以包括图标、按钮、菜单、选项卡、文本框、对话框、状态栏、导航栏、Widget等可视的界面元素。
图1A中示例性示出了显示设备与控制装置之间操作场景的示意图。如图1A所示,控制装置100和显示设备200之间可以有线或无线方式进行通信。
其中,控制装置100被配置为控制显示设备200,其可接收用户输入的操作指令,且将操作指令转换为显示设备200可识别和响应的指令,起着用户与显示设备200之间交互的中介作用。如:用户通过操作控制装置100上频道加减键,显示设备200响应频道加减的操作。
控制装置100可以是遥控器100A,包括红外协议通信或蓝牙协议通信,及其他短距离通信方式等,通过无线或其他有线方式来控制显示设备200。用户可以通过遥控器上按键、语音输入、控制面板输入等输入用户指令,来控制显示设备200。如:用户可以通过遥控器上音量加减键、频道控制键、上/下/左/右的移动按键、语音输入按键、菜单键、开关机按键等输入相应控制指令,来实现控制显示设备200的功能。
控制装置100也可以是智能设备,如移动终端100B、平板电脑、计算机、笔记本电脑等。例如,使用在智能设备上运行的应用程序控制显示设备200。该应用程序通过配置可以在与智能设备关联的屏幕上,通过直观的用户界面(UI)为用户提供各种控制。
示例性的,移动终端100B可与显示设备200安装软件应用,通过网络通信协议实现连接通信,实现一对一控制操作的和数据通信的目的。如:可以使移动终端100B与显示设备200建立控制指令协议,通过操作移动终端100B上提供的用户界面的各种功能键或虚拟按钮,来实现如遥控器100A布置的实体按键的功能。也可以将移动终端100B上显示的音视频内容传输到显示设备200上,实现同步显示功能。
显示设备200可提供广播接收功能和计算机支持功能的网络电视功能。显示设备可以实施为,数字电视、网络电视、互联网协议电视(IPTV)等。
显示设备200,可以是液晶显示器、有机发光显示器、投影设备。具体显示设备类型、尺寸大小和分辨率等不作限定。
显示设备200还与服务器300通过多种通信方式进行数据通信。这里可允许显示设备200通过局域网(LAN)、无线局域网(WLAN)和其他网络进行通信连接。服务器300可以向显示设备200提供各种内容和互动。示例的,显示设备200可以发送和接收信息,例如:接收电子节目指南(EPG)数据、接收软件程序更新、或访问远程储存的数字媒体库。服务器300可以一组,也可以多组,可以一类或多类服务器。通过服务器300提供视频点播和广告服务等其他网络服务内容。
图1B中示例性示出了控制装置100的配置框图。如图1B所示,控制装置100包括控制器110、存储器120、通信器130、用户输入接口140、输出接口150、供电电源160。
控制器110包括随机存取存储器(RAM)111、只读存储器(ROM)112、处理器113、通信接口以及通信总线。控制器110用于控制控制装置100的运行和操作,以及内部各部件之间的通信协作、外部和内部的数据处理功能。
示例性的,当检测到用户按压在遥控器100A上布置的按键的交互或触摸在遥控器100A上布置的触摸面板的交互时,控制器110可控制产生与检测到的交互相应的信号,并将该信号发送到显示设备200。
存储器120,用于在控制器110的控制下存储驱动和控制控制装置100的各种运行程序、数据和应用。存储器120,可以存储用户输入的各类控制信号指令。
通信器130在控制器110的控制下,实现与显示设备200之间控制信号和数据信号的通信。如:控制装置100经由通信器130将控制信号(例如触摸信号或按钮信号)发送至显示设备200上,控制装置100可经由通信器130接收由显示设备200发送的信号。通信器130可以包括红外信号接口131和射频信号接口132。例如:红外信号接口时,需要将用户输入指令按照红外控制协议转化为红外控制信号,经红外发送模块进行发送至显示设备200。再如:射频信号接口时,需将用户输入指令转化为数字信号,然后按照射频控制信号调制协议进行调制后,由射频发送端子发送至显示设备200。
用户输入接口140,可包括麦克风141、触摸板142、传感器143、按键144等中至少一者,从而用户可以通过语音、触摸、手势、按压等将关于控制显示设备200的用户指令输入到控制装置100。
输出接口150,通过将用户输入接口140接收的用户指令输出至显示设备200,或者,输出由显示设备200接收的图像或语音信号。这里,输出接口150可以包括LED接口151、产生振动的振动接口152、输出声音的声音输出接口153和输出图像的显示器154等。例如,遥控器100A可从输出接口150接收音频、视频或数据等输出信号,并且将输出信号在显示器154上显示为图像形式、在声音输出接口153输出为音频形式或在振动接口152输出为振动形式。
供电电源160,用于在控制器110的控制下为控制装置100各元件提供运行电力支持。形式可以为电池及相关控制电路。
图1C中示例性示出了显示设备200的硬件配置框图。如图1C所示,显示设备200中可以包括调谐解调器210、通信器220、检测器230、外部装置接口240、控制器250、存储器260、用户接口265、视频处理器270、显示器275、音频处理器280、音频输出接口285、供电电源290。
调谐解调器210,通过有线或无线方式接收广播电视信号,可以进行放大、混频和谐振等调制解调处理,用于从多个无线或有线广播电视信号中解调出用户所选择的电视频道的频率中所携带的音视频信号,以及附加信息(例如EPG数据)。
调谐解调器210,可根据用户选择,以及由控制器250控制,响应用户选择的电视频道的频率以及该频率所携带的电视信号。
调谐解调器210,根据电视信号的广播制式不同,可以接收信号的途径有很多种,诸如:地面广播、有线广播、卫星广播或互联网广播等;以及根据调制类型不同,可以数字调制方式或模拟调制方式;以及根据接收电视信号的种类不同,可以解调模拟信号和数字信号。
在其他一些示例性实施例中,调谐解调器210也可在外部设备中,如外部机顶盒等。这样,机顶盒通过调制解调后输出电视信号,经过外部装置接口240输入至显示设备200中。
通信器220,是用于根据各种通信协议类型与外部设备或外部服务器进行通信的组件。例如显示设备200可将内容数据发送至经由通信器220连接的外部设备,或者,从经由通信器220连接的外部设备浏览和下载内容数据。通信器220可以包括WIFI模块221、蓝牙通信协议模块222、有线以太网通信协议模块223等网络通信协议模块或近场通信协议模块,从而通信器220可根据控制器250的控制接收控制装置100的控制信号,并将控制信号实现为WIFI信号、蓝牙信号、射频信号等。
检测器230,是显示设备200用于采集外部环境或与外部交互的信号的组件。检测器230可以包括声音采集器231,如麦克风,可以用于接收用户的声音,如用户控制显示设备200的控制指令的语音信号;或者,可以采集用于识别环境场景类型的环境声音,实现显示设备200可以自适应环境噪声。
在其他一些示例性实施例中,检测器230,还可以包括图像采集器232,如相机、摄像头等,可以用于采集外部环境场景,以自适应变化显示设备200的显示参数;以及用于采集用户的属性或与用户交互手势,以实现显示设备与用户之间互动的功能。
在其他一些示例性实施例中,检测器230,还可以包括光接收器,用于采集环境光线强度,以自适应显示设备200的显示参数变化等。
在其他一些示例性实施例中,检测器230,还可以包括温度传感器,如通过感测环境温度,显示设备200可自适应调整图像的显示色温。示例性的,当温度偏高的环境时,可调整显示设备200显示图像色温偏冷色调;当温度偏低的环境时,可以调整显示设备200显示图像色温偏暖色调。
外部装置接口240,是提供控制器250控制显示设备200与外部设备间数据传输的组件。外部装置接口240可按照有线/无线方式与诸如机顶盒、游戏装置、笔记本电脑等外部设备连接,可接收外部设备的诸如视频信号(例如运动图像)、音频信号(例如音乐)、附加信息(例如EPG)等数据。
其中,外部装置接口240可以包括:高清多媒体接口(HDMI)端子241、复合视频消隐同步(CVBS)端子242、模拟或数字分量端子243、通用串行总线(USB)端子244、组件(Component)端子(图中未示出)、红绿蓝(RGB)端子(图中未示出)等任一个或多个。
控制器250,通过运行存储在存储器260上的各种软件控制程序(如操作***和各种应用程序),来控制显示设备200的工作和响应用户的操作。
如图1C所示,控制器250包括随机存取存储器(RAM)251、只读存储器(ROM)252、图形处理器253、CPU处理器254、通信接口255、以及通信总线256。其中,RAM251、ROM252以及图形处理器253、CPU处理器254通信接口255通过通信总线256相连接。
ROM252,用于存储各种***启动指令。如在接收到开机信号时,显示设备200电源开始启动,CPU处理器254运行ROM252中的***启动指令,将存储在存储器260的操作***拷贝至RAM251中,以开始运行启动操作***。当操作***启动完成后,CPU处理器254再将存储器260中各种应用程序拷贝至RAM251中,然后,开始运行启动各种应用程序。
图形处理器253,用于产生各种图形对象,如图标、操作菜单、以及用户输入指令显示图形等。图形处理器253可以包括运算器,用于通过接收用户输入各种交互指令进行运算,进而根据显示属性显示各种对象;以及包括渲染器,用于产生基于运算器得到的各种对象,将进行渲染的结果显示在显示器275上。
CPU处理器254,用于执行存储在存储器260中的操作***和应用程序指令。以及根据接收的用户输入指令,来执行各种应用程序、数据和内容的处理,以便最终显示和播放各种音视频内容。
在一些示例性实施例中,CPU处理器254,可以包括多个处理器。多个处理器可包括一个主处理器以及多个或一个子处理器。主处理器,用于在显示设备预加载模式中执行显示设备200的一些初始化操作,和/或,在正常模式下显示画面的操作。多个或一个子处理器,用于执行在显示设备待机模式等状态下的一种操作。
通信接口255,可包括第一接口到第n接口。这些接口可以是经由网络被连接到外部设备的网络接口。
控制器250可以控制显示设备200的整体操作。例如:响应于接收到用于选择在显示器275上显示的GUI对象的用户输入命令,控制器250便可以执行与由用户输入命令选择的对象有关的操作。
其中,该对象可以是可选对象中的任何一个,例如超链接或图标。该与所选择的对象有关的操作,例如显示连接到超链接页面、文档、图像等操作,或者执行与对象相对应的程序的操作。该用于选择GUI对象的用户输入命令,可以是通过连接到显示设备200的各种输入装置(例如,鼠标、键盘、触摸板等)输入命令或者与由用户说出语音相对应的语音命令。
存储器260,用于存储驱动和控制显示设备200运行的各种类型的数据、软件程序或应用程序。存储器260可以包括易失性和/或非易失性存储器。而术语“存储器”包括存储器260、控制器250的RAM251和ROM252、或显示设备200中的存储卡。
在一些实施例中,存储器260具体用于存储驱动显示设备200中控制器250的运行程序;存储显示设备200内置的和用户从外部设备下载的各种应用程序;存储用于配置由显示器275提供的各种GUI、与GUI相关的各种对象及用于选择GUI对象的选择器的视觉效果图像等数据。
在一些实施例中,存储器260具体用于存储调谐解调器210、通信器220、检测器230、外部装置接口240、视频处理器270、显示器275、音频处理器280等的驱动程序和相关数据,例如从外部装置接口接收的外部数据(例如音视频数据)或用户接口接收的用户数据(例如按键信息、语音信息、触摸信息等)。
在一些实施例中,存储器260具体存储用于表示操作***(OS)的软件和/或程序,这些软件和/或程序可包括,例如:内核、中间件、应用编程接口(API)和/或应用程序。示例性的,内核可控制或管理***资源,以及其它程序所实施的功能(如所述中间件、API或应用程序);同时,内核可以提供接口,以允许中间件、API或应用程序访问控制器,以实现控制或管理***资源。
图1D中示例性示出了显示设备200存储器中操作***的架构配置框图。该操作***架构从上到下依次是应用层、中间件层和内核层。
应用层,***内置的应用程序以及非***级的应用程序都是属于应用层。负责与用户进行直接交互。应用层可包括多个应用程序,如设置应用程序、电子帖应用程序、媒体中心应用程序等。这些应用程序可被实现为Web应用,其基于WebKit引擎来执行,具体可基于HTML5、层叠样式表(CSS)和JavaScript来开发并执行。
这里,HTML,全称为超文本标记语言(HyperText Markup Language),是一种用于创建网页的标准标记语言,通过标记标签来描述网页,HTML标签用以说明文字、图形、动画、声音、表格、链接等,浏览器会读取HTML文档,解释文档内标签的内容,并以网页的形式显示出来。
CSS,全称为层叠样式表(Cascading Style Sheets),是一种用来表现HTML文件样式的计算机语言,可以用来定义样式结构,如字体、颜色、位置等的语言。CSS样式可以直接存储与HTML网页或者单独的样式文件中,实现对网页中样式的控制。
JavaScript,是一种应用于Web网页编程的语言,可以***HTML页面并由浏览器解释执行。其中Web应用的交互逻辑都是通过JavaScript实现。JavaScript可以通过浏览器,封装JavaScript扩展接口,实现与内核层的通信,
中间件层,可以提供一些标准化的接口,以支持各种环境和***的操作。例如,中间件层可以实现为与数据广播相关的中间件的多媒体和超媒体信息编码专家组(MHEG),还可以实现为与外部设备通信相关的中间件的DLNA中间件,还可以实现为提供显示设备内各应用程序所运行的浏览器环境的中间件等。
内核层,提供核心***服务,例如:文件管理、内存管理、进程管理、网络管理、***安全权限管理等服务。内核层可以被实现为基于各种操作***的内核,例如,基于Linux操作***的内核。
内核层也同时提供***软件和硬件之间的通信,为各种硬件提供设备驱动服务,例如:为显示器提供显示驱动程序、为摄像头提供摄像头驱动程序、为遥控器提供按键驱动程序、为WIFI模块提供WiFi驱动程序、为音频输出接口提供音频驱动程序、为电源管理(PM)模块提供电源管理驱动等。
用户接口265,接收各种用户交互。具体的,用于将用户的输入信号发送给控制器250,或者,将从控制器250的输出信号传送给用户。示例性的,遥控器100A可将用户输入的诸如电源开关信号、频道选择信号、音量调节信号等输入信号发送至用户接口265,再由用户接口265转送至控制器250;或者,遥控器100A可接收经控制器250处理从用户接口265输出的音频、视频或数据等输出信号,并且显示接收的输出信号或将接收的输出信号输出为音频或振动形式。
在一些实施例中,用户可在显示器275上显示的图形用户界面(GUI)输入用户命令,则用户接口265通过GUI接收用户输入命令。确切的说,用户接口265可接收用于控制选择器在GUI中的位置以选择不同的对象或项目的用户输入命令。
或者,用户可通过输入特定的声音或手势进行输入用户命令,则用户接口265通过传感器识别出声音或手势,来接收用户输入命令。视频处理器270,用于接收外部的视频信号,根据输入信号的标准编解码协议,进行解压缩、解码、缩放、降噪、帧率转换、分辨率转换、图像合成等视频数据处理,可得到直接在显示器275上显示或播放的视频信号。
示例的,视频处理器270,包括解复用模块、视频解码模块、图像合成模块、帧率转换模块、显示格式化模块等。
其中,解复用模块,用于对输入音视频数据流进行解复用处理,如输入MPEG-2流(基于数字存储媒体运动图像和语音的压缩标准),则解复用模块将其进行解复用成视频信号和音频信号等。
视频解码模块,用于对解复用后的视频信号进行处理,包括解码和缩放处理等。
图像合成模块,如图像合成器,其用于将图形生成器根据用户输入或自身生成的GUI信号,与缩放处理后视频图像进行叠加混合处理,以生成可供显示的图像信号。
帧率转换模块,用于对输入视频的帧率进行转换,如将输入的60Hz视频的帧率转换为120Hz或240Hz的帧率,通常的格式采用如插帧方式实现。
显示格式化模块,用于将帧率转换模块输出的信号,改变为符合诸如显示器显示格式的信号,如将帧率转换模块输出的信号进行格式转换以输出RGB数据信号。
显示器275,用于接收源自视频处理器270输入的图像信号,进行显示视频内容、图像以及菜单操控界面。显示视频内容,可以来自调谐解调器210接收的广播信号中的视频内容,也可以来自通信器220或外部装置接口240输入的视频内容。显示器275,同时显示显示设备200中产生且用于控制显示设备200的用户操控界面UI。
以及,显示器275可以包括用于呈现画面的显示屏组件以及驱动图像显示的驱动组件。或者,倘若显示器275为一种投影显示器,还可以包括一种投影装置和投影屏幕。
音频处理器280,用于接收外部的音频信号,根据输入信号的标准编解码协议,进行解压缩和解码,以及降噪、数模转换、和放大处理等音频数据处理,得到可以在扬声器286中播放的音频信号。
示例性的,音频处理器280可以支持各种音频格式。例如MPEG-2、MPEG-4、高级音频编码(AAC)、高效AAC(HE-AAC)等格式。
音频输出接口285,用于在控制器250的控制下接收音频处理器280输出的音频信号,音频输出接口285可包括扬声器286,或输出至外接设备的发生装置的外接音响输出端子287,如耳机输出端子。
在其他一些示例性实施例中,视频处理器270可以包括一个或多个芯片组成。音频处理器280,也可以包括一个或多个芯片组成。
以及,在其他一些示例性实施例中,视频处理器270和音频处理器280,可以为单独的芯片,也可以与控制器250一起集成在一个或多个芯片中。
供电电源290,用于在控制器250的控制下,将外部电源输入的电力为显示设备200提供电源供电支持。供电电源290可以是安装在显示设备200内部的内置电源电路,也可以是安装在显示设备200外部的电源。
图2中示例性示出了显示设备200提供的一个用户界面GUI400的示意图。
如图2所示的GUI中,显示设备可向显示器提供GUI400,该GUI400中包括布置多个不同项目的第一GUI41(视图显示区),以及指示GUI400中任一项目被选择的选择器。例如图2示出的GUI中,包括布置项目411~426的第一GUI41,以及指示项目411被选择的选择器42。
需要说明的是,项目是指在显示设备200提供的GUI中显示以表示诸如图标、缩略图、链接等对应内容的视觉对象。如项目为电影或电视剧时,项目可显示为电影或电视剧的海报。如项目为音乐时,可显示音乐专辑的海报。如项目为应用程序时,可显示为应用程序的图标,或当应用程序被执行最近执行时捕捉到应用程序的内容截图。如项目为用户访问历史时,可显示为最近执行过程中内容截图。
项目的展示形式通常多样化。例如,项目可以包括文本内容和/或用于显示与文本内容相关的缩略图的图像。又如,项目可以是应用程序的文本和/或图标。
还需说明的是,选择器可通过用户操作控制装置的输入而移动选择器在GUI中的位置,以改变选择不同的项目。例如焦点对象,可根据用户通过控制装置的输入,控制显示设备中显示焦点对象的移动来选择或控制项目。如:用户可通过控制装置上方向键控制焦点对象在项目之间的移动来选择和控制项目。
选择器的标识形式通常多样化。例如,图2中通过将项目411边框放大来实现或标识焦点对象的位置。又如,还可通过项目边缘绘制粗线来实现或标识焦点对象的位置。此外,也可以通过改变聚焦项目的文本或图像的边框线、尺寸、颜色、透明度和轮廓和/或字体等标识焦点对象的位置。
如图2所示的GUI中,显示器上提供项目411~426,项目411~426分别对应设置、音乐、电视助手、视频、文件应用程序的图标和名称,这些项目可基于用户输入被激活,以显示其对应的内容详情信息。例如项目413对应的电视助手应用程序,可在选择器42移动至项目413位置时基于用户按压控制装置上的确认键而被激活,从而全屏显示电视助手应用程序的内容详情信息。
第一GUI41中多个项目可以按照列方式进行排布,其中,列的数量由显示器实际显示的页面宽度决定。第一GUI41中不同列的项目可以在沿项目的高度方向上存在交叉。第一GUI41中显示的项目可以通过对获取的待显示项目进行缩放得到。
在下面的实施例内容中,以项目为图片为例进行说明。
显示设备的用户界面中可以用来显示页面中加载的图片。当然,可以显示全部已加载的图片,或者可以显示部分已加载的图片,具体可视图片加载量、及用户界面的尺寸而定。
页面可通过滚动的方式将不同图片显示在用户界面的视图显示区中。页面中所有图片以等宽度且不等高度的排布方式进行布局。
如此,整个页面呈瀑布流布局,但页面布局中仍有“列”的概念,一定程度上保证了页面中图片排列的整洁性,同时,没有统一规定尺寸的约束,无需对原始图片进行裁剪,可避免图片局部缺失,为用户展示更加充分、真实、原始的图片信息,用户可以根据用户界面展示的图片进行正确的判断。
在一个应用场景中,视图显示区显示了一个应用的首页,当收到用于指示进入分类栏的用户输入时,可以进入分类栏页面,相应的,视图显示区会显示该分类栏页面的一部分,其中包含多个以等宽度且不等高度的排布方式布局的图片,当收到用于指示放大选择的分类栏页面中的图片时,可将选择器当前选择的图片进行全屏放大,以展示高清大图。
下面提供可实现视图显示区中多个图片以等宽度且不等高度的排布方式布局的两种方式。
第一种布局方式:
在将图片加载到页面中之前,可以先从页面服务器中请求资源数据,资源数据包含图片。由于智能电视资源日益丰富,一个页面服务器提供的资源数据可能有几百个几千个。但是用户每次观看的数量有限,没有必要加载页面服务器中的所有资源数据。
因此,在从页面服务器中请求资源数据时,可以分批请求。例如,每次从页面服务器请求30条资源数据(具体每次请求的数量,视情况而定)进行显示。当需要显示新的图片时,比如用户通过操作控制装置,让选择器移动到用户界面最底部时,去请求下一批资源数据。
每次请求得到的图片可以存储在一维数组originArray:[originItem0,originItem1,originItem2…]中,从而图片有一定的顺序,图片的数组下标即为图片在所有图片中的序号。当然,具体存储方式不限,可以根据需要确定。
将需图片加载到页面中时,可以从当前请求所得的图片中获取一个第一图片。比如,可以获取一维数组originArray中存储未被加载的所有图片中数组标号最小的第一图片。如果一维数组originArray中的图片均未被加载,则可以获取数组中的首个图片作为第一图片,如果一维数组originArray中的部分图片已被加载,则可以获取数组中最后被加载的图片之后的一个图片作为第一图片。
将获取的第一图片进行缩放,得到宽度为设定宽度的第二图片。由于每次在加载前都会进行图片缩放,所以加载至页面的图片的宽度均为设定宽度,如此,可以保证页面中的图片等宽度,也就保证了视图显示区中的图片等宽度。
页面服务器提供的图片尺寸一般都是参差不齐的。如果直接将这些图片加载到页面上,会导致页面变得杂乱无章,影响用户的观感。如果将这些图片裁剪成统一的尺寸再加载到页面上,会造成图片局部缺失。
为了既能一定程度上保证用户观感、又能避免图片局部缺失,本实施例中采用将图片进行缩放的方式,以统一页面加载的图片宽度,使得页面中的图片可以整齐地排成几列,同时,可避免图片中的局部场景缺失。
可以对第一图片进行等比例缩放,可以避免呈现图像中的场景变形的问题。比如,第一图片的尺寸为640×480,设定宽度为120,则将第一图片缩小成尺寸为160*120的图片,得到第二图片,其中,不仅宽度缩小了4倍,高度也缩小了4倍,第二图片的高度与宽度之比、与第一图像的高度与宽度之比相同。当然,缩放方式并不限于等比例缩放,也可以是非等比例缩放,只要能够保证需加载的第二图片的宽度为设定宽度即可。
得到第二图片后,需将第二图片加载至页面中,以将其显示在视图显示区中。在图片加载至页面的过程中,使用二维数组依次存储图片的详细信息,可以包括图片的URL、缩放后的宽度及高度、图片的位置信息。其中二维数组的第一个维度代表页面的列的次序,第二个维度代表每一列中加载的图片的详细信息,记二维数组名为allData:[[item1,item2,item3…],[item1,item2,item3…],[item1,item2,item3…]………],在需要时可以从该二维数组中获取相关信息。
图片的位置信息可以包括:图片在页面应用的坐标系中沿水平方向的X坐标、及沿竖直方向的Y坐标。
页面应用的坐标系可以以页面的左上角顶点为原点,以水平方向为X轴方向,以竖直方向为Y轴方向。结合图3和与4来说,页面P100的左上角顶点为坐标系的原点,页面100的上边界从原点开始往右的方向为X轴的正向,页面100的左边界从原点开始往下的方向为Y轴的正向。当然,页面应用的坐标系也不限于此,可以根据需要进行设置。
在将第二图片加载至页面中时,可以检查页面中已加载的图片数量是否达到页面中所有列的总列数,如果否,说明页面的第1行未加载满图片,如果是,则说明页面的第1行已加载满图片。
比如,总列数为4,页面一共可以放下4列,那么第1行可以放4个图片,但是如果页面未加载图片、或者仅加载了1个、2个或3个图片,那么第1行未加载满图片。
如果页面的第1行未加载满图片,则将第二图片放置到页面的第1行中。其中,如果第1行中未加载图片,则将第1列作为需加载第二图片的目标列;如果第1行中已经加载了N1个图片,N1大于0小于总列数,则将第N1+1列确定为需加载第二图片的目标列。
在此情况下,将目标列与页面的左边界之间的距离作为第二图片的X坐标,将设定Y坐标确定为第二图片的Y坐标。
目标列与页面的左边界之间的距离也可以预先设置,即预先设置好所有列与页面的左边界之间的距离,并设置好距离与列的对应关系,当确定出目标列时,从预设的距离中找出该第目标列对应的距离。
或者,也可以计算出目标列与页面的左边界之间的距离,比如,参看图4,目标列为第三个列时,距离为:I1到页面的左边界的距离+I1的宽度+I2的宽度+设定水平间距*2,设定水平间距为两个图片之间的间距,也是两个列之间的间距。
设定Y坐标比如可以为0,当然,如果需要在图片与页面之间的上边界之间留一些间距时,该设定Y坐标也可以设置为该间距。
确定了第二图片的X坐标和Y坐标后,就可以将第二图片加载到页面中,使得第二图片的左上角顶点位于页面中与X坐标和Y坐标对应的位置。
将目标列与页面的左边界之间的距离作为第二图片的X坐标,将设定Y坐标确定为第二图片的Y坐标之后,还可以将计算设定Y坐标、第二图片的高度及设定竖直间距之和,得到第一和值;并将第一和值记录为目标列对应的高度值。
比如,参看图4,假设N1为1,目标列为第2列,则将设定Y坐标+h2+verticalSpacing记录为第2列对应的高度值,h2为图片I2的高度,verticalSpacing为设定竖直间距,如此,在后续确定需加载在第2列中的图片的位置信息时,可以根据第2列对应的高度值直接确定出该图片的Y坐标,比如图4中图片I5的Y坐标。
可以理解,如果竖直方向上图片之间不需要间距时,该设定竖直间距可以为0;如果图片与页面的上边界之间,设定Y坐标也可以为0。
如果页面的第1行已加载满图片,则将第二图片放置到页面的非第1行的位置中,此时,可以从已记录的各列对应的高度值中确定出最小高度值,其中,高度值指示了对应列中已加载的所有图片的高度总和,将所述最小高度值对应的列确定为需加载第二图片的目标列。
为了平衡各列加载的图片之间的高度差,在页面的第1行已加载满图片时,从已记录的各列对应的高度值中确定出最小高度值,即找出已加载的所有图片的高度总和最小的列作为目标列,将第二图片加载至目标列,可以减小目标列中加载的图片与其他列加载的图片之间高度差。
参看图3和图4,页面P100一共有四个列,这四个列中分别显示了图片I1-I4,所以,页面100的第1行已加载满图片,此时,这四个列对应的高度值分别为:h1+verticalSpacing、h2+verticalSpacing、h3+verticalSpacing、h4+verticalSpacing,其中,verticalSpacing都是一样的,而h2是h1、h2、h3、h4中最小的,所以h2+verticalSpacing最小,将h2+verticalSpacing对应的第2列作为目标列。
高度值可以指示列中已加载的图片的高度总和。具体的,高度值可以为设定Y坐标+列中已加载的图片的高度总和+列中已加载的图片数量*verticalSpacing,当然,设定Y坐标可以为0,verticalSpacing也可以为0,具体可以根据需要设置。
可选的,将所述最小高度值对应的列确定为需加载第二图片的目标列之后,可以将目标列中已加载的任一图片的X坐标确定为第二图片的X坐标,并将所述最小高度值确定为第二图片的Y坐标。
同一列中所有加载的图片的X坐标都是相同的,所有可以将目标列中已加载的任一图片的X坐标确定为第二图片的X坐标。当然,也可以将目标列与页面的左边界之间的距离确定为第二图片的X坐标。
最小高度值是指示了目标列中已加载的图片的高度总和,具体可以是设定Y坐标+目标列中已加载的图片的高度总和+目标列中已加载的图片数量*verticalSpacing,因此,可以将最小高度值确定为第二图片的Y坐标。
参看图4,目标列为页面P100中的第二个列,I5为第二图片,allData[2][item1].left为图片I2的X坐标,由于图片I2处于第二个列中,所以将allData[2][item1].left作为目标第二图片I5的Y坐标;已记录的第二个列对应的高度值为设定Y坐标+h2+verticalSpacing,可以直接将该高度值作为第二图片I5的Y坐标。
确定了第二图片的X坐标和Y坐标后,就可以将第二图片加载到页面中,使得第二图片的左上角顶点位于页面中与X坐标和Y坐标对应的位置。
可选的,将所述最小高度值确定为第二图片的Y坐标之后,可以计算最小高度值、第二图片的高度及设定竖直间距之和,得到第二和值;将已记录的目标列对应的高度值修改为所述第二和值。
比如,参看图4,第2列为目标列,图片I5为第二图片,将已记录的allData[2][item1].left修改为:allData[2][item1].left+h5+verticalSpacing,其中,h5为图片I5的高度。如此,在后续确定需加载在第2列中的图片的位置信息时,可以根据对应的高度值直接确定出该图片的Y坐标;并且,还可以根据所有列对应的高度值确定下一个图片需加载至的列。
针对第一种方式,提供一个更具体的例子,控制器实现以等宽度且不等高度的排布方式布局图片的方式,包括以下步骤:
a1)获取1个第一图片;
a2)将该第一图片进行缩放,得到1个宽度为设定宽度的第二图片;
a3)检查页面中已加载的图片数量是否达到页面所有列的总列数,如果是,说明页面的第1行未加载满图片,执行步骤a4),否则,说明页面第1行已加载满图片,执行步骤a7);
a4)可以将页面中任一个未加载图片的列确定为目标列;
a5)将目标列与页面的左边界之间的距离确定为第二图片的X坐标,将设定Y坐标确定为第二图片的Y坐标,并将设定Y坐标、第二图片的高度及设定竖直间距之和记录为该目标列对应的高度值;
a6)将该第二图片加载到页面中与第二图片的X坐标和Y坐标对应的位置处,以在第二图片移动至显示设备的用户界面时显示;
a7)从已记录的所有列对应的高度值中确定出最小高度值,将最小高度值对应的列确定为目标列;
a8)将目标列中已加载的任一图片的X坐标确定为该第二图片的X坐标,将该目标列对应的高度值确定为第二图片的Y坐标,并将已记录的该目标列对应的高度值修改为该第二图片的Y坐标、第二图片的高度及设定竖直间距之和;
a9)将该第二图片加载到页面中与第二图片的X坐标和Y坐标对应的位置处,以在第二图片移动至显示设备的用户界面时显示。
将第二图片加载至页面中后,可以对图片进行渲染,后续在用户的控制下,页面会相对用户界面发生移动比如上移,从而已加载但未显示的图片会移动至显示设备的用户界面中进行显示。
由于显示设备的用户界面是有限的,页面的大小比用户界面更大,用户界面只能显示页面中部分被加载的图片,并且需要通过页面的移动来实现不同位置的图片的显示,参看图5A和5B示出的用户界面Z100,仅仅示出了页面的局部。
通常来说,用户界面会显示多个图片,用户通过操作控制装置,使得用户界面中的选择器在不同图片间移动,移动至某个图片时,用户进一步点击,以进一步查看该图片对应的资源,比如该图片对应的视频数据或高清图片等。
第二种布局方式:
从页面服务器中请求资源数据,并将图片存储在一维数组originArray:[originItem0,originItem1,originItem2…]中,具体方式可参看第一种布局方式中描述内容,相同之处在此不再赘述。
将需图片加载到页面中时,可以从当前请求所得的图片中获取N2个第一图片,N2为页面中所有列的总列数。比如,可以获取一维数组originArray中存储未被加载的所有图片中数组标号最小的N2个第一图片。
针对每一第一图片,将第一图片进行缩放,得到宽度为设定宽度的第二图片。加载至页面的图片的宽度统一为设定宽度,如此,可以保证页面中的图片等宽度,也就保证了视图显示区中的图片等宽度。
页面服务器提供的图片尺寸一般都是参差不齐的。如果直接将这些图片加载到页面上,会导致页面变得杂乱无章,影响用户的观感。如果将这些图片裁剪成统一的尺寸再加载到页面上,会造成图片局部缺失。
为了既能一定程度上保证用户观感、又能避免图片局部缺失,本实施例中采用将图片进行缩放的方式,以统一页面加载的图片宽度,使得页面中的图片可以整齐地排成几列,同时,可避免图片中的局部场景缺失。
得到N2个第二图片后,需将N2个第二图片加载至页面中,以将其显示在视图显示区中。在图片加载至页面的过程中,使用二维数组依次存储图片的详细信息,可以包括图片的URL、缩放后的宽度及高度、图片的位置信息。其中二维数组的第一个维度代表页面的列的次序,第二个维度代表每一列中加载的图片的详细信息,记二维数组名为allData:[[item1,item2,item3…],[item1,item2,item3…],[item1,item2,item3…]………],在需要时可以从该二维数组中获取相关信息。
图片的位置信息可以包括:图片在页面应用的坐标系中沿水平方向的X坐标、及沿竖直方向的Y坐标。
页面应用的坐标系可以以页面的左上角顶点为原点,以水平方向为X轴方向,以竖直方向为Y轴方向。结合图3和与4来说,页面P100的左上角顶点为坐标系的原点,页面100的上边界从原点开始往右的方向为X轴的正向,页面100的左边界从原点开始往下的方向为Y轴的正向。当然,页面应用的坐标系也不限于此,可以根据需要进行设置。
在将N2个第二图片加载至页面中时,可以检查页面是否已加载图片(本方式中每次加载N2个图片,所以在得到N2个第二图片时,要么第1行已经加载满图片,要么第1行未加载图片,所以检查页面是否已加载图片即可)。
如果页面未加载图片,可以将N2个第二图片依次放置到页面的第1行中。
如果页面已加载图片,将页面中所有列按照对应的高度值从小到大进行排序,高度值指示对应列中所有图片的高度总和,将N2个第二图片按照高度从大到小的顺序进行排序,并将排序后的N2个第二图片依次布局至排序后的各列中。
计算第二图片的位置信息、以及各列对应的高度值的方式与第一种布局方式中的类似,在此不再赘述。
针对第二种布局方式,提供一个更具体的例子,控制器实现以等宽度且不等高度的排布方式布局图片的方式,包括以下步骤:
b1)获取N2个第一图片;
b2)将N2个第一图片分别进行缩放,得到N2个宽度为设定宽度的第二图片;
b3)检查页面是否已加载图片,如果是,执行步骤b4),否则,执行步骤b5);
b4)将N2个第二图片依次放置到页面的第1行中;针对每一第二图片,将该第二图片所在的列与页面的左边界之间的距离确定为该第二图片的X坐标,将设定Y坐标确定为该第二图片的Y坐标,并将设定Y坐标、该第二图片的高度及设定竖直间距之和记录为该第二图片所在的列对应的高度值。
b5)将页面中所有列按照对应的高度值从小到大进行排序,高度值指示对应列中所有图片的高度总和,将N2个第二图片按照高度从大到小的顺序进行排序,并将排序后的N2个第二图片依次布局至排序后的各列中;针对每一第二图片,将该第二图片所在列中已加载的任一图片的X坐标确定为该第二图片的X坐标,将该第二图片所在列对应的高度值确定为该第二图片的Y坐标,并将已记录的该第二图片所在列对应的高度值修改为该第二图片的Y坐标、该第二图片的高度及设定竖直间距之和。
N2个第二图片加载完成之后,各列对应的高度值之间的差距会变小,避免出现某一列过低或者过高,有利于提升视觉效果。
比如,参看图5B,用户界面Z100中,第1行不同图片的高度差异较大,从而导致第1行与第二个行之间的分割线较为曲折。采用上述方式后,第2行与第3行之间的分割线明显平缓了很多,错位程度得到较大程度的改善。
基于前述的第一种布局方式、或第二种布局方式,在将所有第二图片加载至页面中后,可以继续从一维数组originArray中获取图片进行加载,直至一维数组originArray中当前存储的图片均被加载完成。
根据前述描述可知,页面布局方式呈瀑布流形式,尤其如第一种布局方式中得到的页面,没有了传统布局中“行”的概念,视图显示区中不同列的项目中,在沿项目的高度方向上存在交叉,选择器管理相对就变得复杂了许多。
对于显示设备而言,实现控制装置切换选择器是基础功能,必须确保选择器切换的有效性和正确性。为此,进一步提供一种选择器管理方式,明确瀑布流布局下左右选择器移动的方式。
为实现选择器管理方式,控制器还用于执行:响应于用于指示选择器移动的用户输入,控制选择器由当前所处的第一项目移动至第二项目;其中,所述第二项目与所述第一项目沿列的高度方向的区域重合比例最大。
下面结合前述实施例中的内容,继续以项目为图片为例,来说明一下提供的选择器管理方式:
在收到用于指示选择器移动的用户输入(以下简称第一用户输入)时,依据第一用户输入在页面中确定选择器当前所处的第三图片,并确定选择器需要移动至的列(简称A列)。
第一用户输入可以由控制装置触发,第一用户输入中可以携带有选择器当前所处的第三图片的图片标识或位置信息,根据该图片标识或位置信息可以确定第三图片。当然,第三图片的具体确定方式不限,比如还可以每次在选择器移动后保存选择器所在的图片的位置信息,如此,在收到第一用户输入时,根据保存的位置信息即可确定第三图片。
第一用户输入可以指示移动方向;根据移动方向可以确定选择器是否在第三图片所处的列中上下移动,还是需要水平移动。
在水平移动的情况下,第三图片所处的列与A列为不同列,A列通过以下方式确定,包括:
若所述移动方向为朝着所述第三图片的左侧方向,则所述A列为所述第三图片所处列的上一个列;
若所述移动方向为朝着所述第三图片的右侧方向,则所述A列为所述第三图片所处列的下一个列。
如果第三图片所处的列与A列为不同列,则在A列中查找出满足以下条件的图片:图片的Y坐标、或图片的Y坐标与图片的高度之和大于所述第三图片的Y坐标、但不大于所述第三图片的Y坐标与所述第三图片的高度之和。
可以通过遍历的方式在A列中找出满足上述条件的图片。遍历的方式可以是从上到下的顺序按序,遍历具体不限。比如,还可以采用二分法进行遍历,由于图片的高度是有大小的,所以从高度的角度来讲,按照高度大小排序,任意一个列中的图片都是有序的,使用二分法查找,可以很快定位出存在高度重合的起始图片。
根据上述条件,查找出的图片与第三图片在高度方向上至少存在部分的重合(此重合并非是图片重合在一起,而是指两个图片有部分或是高度一致的)。
比如,参看图5A,用户界面Z100中,选择器当前处于图片I10。当收到第一用户输入时,确定图片I10为第三图片,图片I10处于第2列中,第一用户输入指示的移动方向为朝向第三图片的右侧方向,那么确定A列为第3列,通过遍历查找出I11-I14这四个图片,这四个图片在高度方向上存在重合,通过图5A中示出的两根虚线可以看出重合的部分。
找出满足条件的所有图片后,可以根据预设选择策略从查找出的所有图片中选择一第四图片,并将所述选择器移动至所述第四图片处。
比如,如果查找出的图片数量为1个,则可以直接将该图片确定为第四图片;如果查找出的图片数量为多个,则可以从查找出的所有图片中确定出与第三图片在高度上重合部分最多的图片作为第四图片。
可以根据查找出的图片的Y坐标、图片的高度、第三图片的Y坐标和第三图片的高度,先计算出每个图片与第三图片的重合高度,然后从中找出重合高度最大的图片作为第四图片。
当然,上述预设选择策略仅是举例,实际还可以有其他的选择方式,比如可以从查找出的所有图片中选择Y坐标最小的图片作为第四图片。
本实施例中,选择器管理方式适应性强,可以满足各种尺寸图片的展示,尤其适用于第一种布局方式。
在上述第二种布局方式的基础上,如果N2个第二图片的高度中任意两个第二图片的高度差均小于设定高度,即每次的N2个第二图片的高度相差不大,那么,页面布局仍有“行”的概念,在这种情况下,还可以采用另一种更简单的选择器管理方式。
下面结合前述第二种布局方式中的内容,继续以项目为图片为例,来说明一下提供的另一种选择器管理方式:
当收到第一用户输入时,依据所述第一用户输入在所述页面中确定选择器当前所处的第三图片,并确定选择器需要移动至的A列。确定第三图片和A列的方式与前述实施例中的相同,在此不再赘述。
如果第三图片所处的列与A列为不同列,从A列中确定出与所述第三图片处于同一行的第五图片,并将所述选择器移动至所述第五图片处。选择器管理复杂度低,计算量小,易于实现。
比如,参看图5B,用户界面Z100中可以明显看出一行一行图片,选择器当前处于图片I20。当收到第一用户输入时,确定图片I20为第三图片,图片I20处于第2列中,第一用户输入指示的移动方向为朝向第三图片的右侧方向,那么确定第二列为第3列,第3列中图片I21与第2列中图片I20处于同一个行,所以该图片I21为第五图片,将选择器移动至该图片I21处。
当然,如果移动方向为朝着所述第三图片的上方,则将选择器移动至第三图片所处列中位于第三图片上方的图片;如果移动方向为朝着所述第三图片的下方,则将选择器移动至第三图片所处列中位于第三图片下方的图片。
在一个实施例中,控制器,还用于执行:
确定所述选择器尝试从所述用户界面内向所述用户界面之外的区域移动时,将所述用户界面之外的区域中的项目更新显示在显示器上的用户界面中,并控制所述选择器选择更新的项目。
进一步的,所述控制器确定所述选择器尝试从所述用户界面向所述用户界面之外的区域移动时,具体用于:
若基于用于指示选择器移动的用户输入,确定所述选择器当前位于所述用户界面中边界位置的项目上,且该用户输入指示所述选择器将选择在所述用户界面的边界之外的项目,则确定所述选择器尝试从所述用户界面内向所述用户界面之外的区域移动。
继续以项目为图片为例进行说明,换言之,当选择器移动至用户界面的边界位置的图片,并且尝试往用户界面之外的方向移动时,向页面服务器请求下一批资源数据。比如,参看图5B,当选择器移动至I20下方的图片并尝试继续往下移动时,向页面服务器请求下一批资源数据。
显示设备的用户界面大小是有限,所以,页面中没有必要加载所有已经请求的图片。假设当前页面相对于显示设备的偏移量为offsetHeight(偏移量为负值,且页面越往上移动偏移量越小),用户界面的高度为pageHeight,那么仅满足下面条件的图片需要显示:
allData[i][j].top+allData[i][j].height+offsetHeight>0&&allData[i][j].top+offsetHeight<pageHeight;
其中,allData[i][j].top为图片的Y坐标,allData[i][j].height为图片的高度。
满足该条件的图片才会处于用户界面中,从而可显示在用户界面中。页面可以仅加载满足该条件的图片。为了避免在选择器移动到顶部后继续上移、或者移动到底部后继续下移时,因加载图片耗时过长导致响应慢的问题,也可以先在页面中位于用户界面的上方及下方处加载一些图片。
在一个实施例中,显示设备可以包括:
显示器;
用户接口,用于接收用户输入;
控制器,用于执行:
响应于显示一类项目的用户输入,确定预设数量的列中各列项目的高度,以及将目标项目布局至所述各列项目的高度中高度最小的一列,以及控制显示器显示包括布局所述一类项目的用户界面;
其中,所述一类项目包括多个项目,所述多个项目包括至少一个所述目标项目。
关于本实施例控制器实现的内容与前述实施例中第一种布局方式对应,具体可以参看前述实施例中关于第一种布局方式的描述内容,在此不再赘述。
在一个实施例中,显示设备可以包括:
显示器;
用户接口,用于接收用户输入;
控制器,用于执行:
响应于显示一类项目的用户输入,将预设数量的列按照各列项目的高度从小到大进行排序,以及,将所述预设数量的目标项目按照高度从大到小的顺序进行排序,以及,基于两次排序结果,将排序后的预设数量的目标项目依次布局至排序后的各列中,以及控制显示器显示包括布局所述一类项目的用户界面;
其中,所述一类项目包括多个项目,所述多个项目包括至少一个所述目标项目。
关于本实施例控制器实现的内容与前述实施例中第二种布局方式对应,具体可以参看前述实施例中关于第二种布局方式的描述内容,在此不再赘述。
尽管已描述了本发明的优选实施例,但本领域内的技术人员一旦得知了基本创造性概念,则可对这些实施例作出另外的变更和修改。所以,所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。
显然,本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样,倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内,则本发明也意图包括这些改动和变型在内。
Claims (5)
1.一种显示设备,其特征在于,包括:
显示器;
用户接口,用于接收用户输入;
控制器,用于执行:
响应于用于指示显示多个项目的用户输入,控制显示器显示用户界面;
其中,所述用户界面包括布局的多个项目,所述多个项目以列方式进行布局,且具有相等宽度不等高度;以及,所述用户界面包括指示所述项目被选择的选择器,可通过用户输入而移动所述选择器在所述用户界面中的位置,以选择不同的项目;
响应于指示选择器移动的用户输入,控制选择器由当前项目移动至目标项目;其中,所述目标项目与所述当前项目沿列的高度方向的区域重合比例最大;
其中,通过如下方法实现多个项目以列方式进行布局,且具有相等宽度不等高度:
从当前指示显示的多个项目中获取一个待加载的项目;其中,当前指示显示的多个项目为对获取到的待显示项目进行缩放得到的等宽不等高的项目;
在用户界面中当前已加载的项目的数量未达到预设数量时,将用户界面中任一个未加载项目的列作为目标列,在用户界面中当前已加载的项目的数量达到预设数量时,将各个列中高度最小的列作为目标列;其中,所述预设数量为用户界面包含的列的数量;列的高度指该列中已加载的项目的高度之和;
将所述待加载的项目加载至所述目标列中;
重复执行获取一个待加载的项目的步骤,直至加载完当前指示显示的多个项目。
2.根据权利要求1所述的显示设备,其特征在于,所述预设数量由显示器实际显示的页面宽度决定。
3.如权利要求1所述的显示设备,其特征在于,所述控制器,还用于执行:
响应于用于指示激活被选择项目的用户输入,激活所述被选择项目。
4.如权利要求1所述的显示设备,其特征在于,控制器,用于执行:
确定所述选择器由显示器上所显示的所述用户界面向之外区域移动时,则将未在显示器上所显示的用户界面之外区域中的项目更新显示在显示器上的用户界面中,且使所述选择器移动至更新的项目。
5.根据权利要求3所述显示设备,其特征在于,确定所述选择器由显示器上所显示所述用户界面向之外区域移动时,具体包括:
基于用户输入,确定当前所述选择器位于所述用户界面中边界位置的项目上,且收到的所述用户输入指示所述选择器将移动选择在显示器所显示用户界面边界之外的所述项目。
Priority Applications (3)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201911317727.1A CN111064983B (zh) | 2019-12-19 | 2019-12-19 | 显示设备 |
PCT/CN2020/079178 WO2021120419A1 (zh) | 2019-12-19 | 2020-03-13 | 用户界面显示方法及设备 |
US17/455,266 US12022146B2 (en) | 2019-12-19 | 2021-11-17 | User interface display method and device |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201911317727.1A CN111064983B (zh) | 2019-12-19 | 2019-12-19 | 显示设备 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN111064983A CN111064983A (zh) | 2020-04-24 |
CN111064983B true CN111064983B (zh) | 2021-05-28 |
Family
ID=70302329
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201911317727.1A Active CN111064983B (zh) | 2019-12-19 | 2019-12-19 | 显示设备 |
Country Status (3)
Country | Link |
---|---|
US (1) | US12022146B2 (zh) |
CN (1) | CN111064983B (zh) |
WO (1) | WO2021120419A1 (zh) |
Families Citing this family (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
WO2021217345A1 (zh) * | 2020-04-27 | 2021-11-04 | 青岛海信传媒网络技术有限公司 | 内容显示方法及显示设备 |
CN111629245B (zh) * | 2020-05-29 | 2022-12-13 | 深圳Tcl数字技术有限公司 | 焦点控制方法、电视机及存储介质 |
Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
KR20120075002A (ko) * | 2010-12-28 | 2012-07-06 | 엘지전자 주식회사 | 애플리케이션 정보 표시 방법 및 그를 이용한 영상 표시 기기 |
CN108874257A (zh) * | 2017-05-08 | 2018-11-23 | 珠海金山办公软件有限公司 | 一种图片展示方法及装置 |
CN109743605A (zh) * | 2018-12-27 | 2019-05-10 | 百视通网络电视技术发展有限责任公司 | 一种基于机顶盒的高清电视界面交互方法、***及机顶盒 |
CN110187781A (zh) * | 2019-05-30 | 2019-08-30 | 携程旅游信息技术(上海)有限公司 | 以瀑布流方式显示图片的方法、***、设备和存储介质 |
Family Cites Families (19)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
GB0622823D0 (en) * | 2006-11-15 | 2006-12-27 | British Broadcasting Corp | Accessing content |
US20120102385A1 (en) * | 2010-10-25 | 2012-04-26 | Konica Minolta Systems Laboratory Inc. | Determining heights of table cells |
JP5156861B2 (ja) * | 2010-12-28 | 2013-03-06 | シャープ株式会社 | 表示制御装置、テレビジョン受像機、表示制御方法、表示制御プログラムおよび記録媒体 |
JP5831265B2 (ja) * | 2011-02-07 | 2015-12-09 | 株式会社Jvcケンウッド | 番組表作成装置、番組表作成方法、及び番組表作成プログラム |
US11847300B2 (en) * | 2012-03-12 | 2023-12-19 | Comcast Cable Communications, Llc | Electronic information hierarchy |
CN102662493B (zh) * | 2012-03-12 | 2016-08-10 | 深圳Tcl新技术有限公司 | 智能终端定位鼠标光标的方法及智能终端 |
CN105095200B (zh) * | 2014-04-16 | 2018-06-29 | 北大方正集团有限公司 | 以瀑布流方式显示图片的方法和设备 |
GB2526599A (en) * | 2014-05-29 | 2015-12-02 | Ibm | Arranging components in a two-dimensional area |
CN111782128B (zh) * | 2014-06-24 | 2023-12-08 | 苹果公司 | 用于在用户界面中导航的列界面 |
US10491960B2 (en) * | 2014-11-10 | 2019-11-26 | Sony Interactive Entertainment LLC | Customizable electronic program guide |
CN105871945A (zh) * | 2015-01-19 | 2016-08-17 | 阿里巴巴集团控股有限公司 | 图片信息发送方法和装置、瀑布流布局方法和装置 |
US10386994B2 (en) * | 2015-02-17 | 2019-08-20 | Microsoft Technology Licensing, Llc | Control of item arrangement in a user interface |
CN106341717A (zh) * | 2016-09-28 | 2017-01-18 | 天脉聚源(北京)传媒科技有限公司 | 一种光标移动方法及*** |
US9942615B1 (en) * | 2017-04-20 | 2018-04-10 | Rovi Guides, Inc. | Systems and methods for presenting targeted metadata in display constrained environments |
US10567829B2 (en) * | 2017-06-19 | 2020-02-18 | Google Llc | Dynamically adjustable electronic program guide |
CN110058909B (zh) * | 2019-02-26 | 2022-03-08 | 创新先进技术有限公司 | 控件的布局方法、布局装置、服务器及可读存储介质 |
CN109933323A (zh) * | 2019-03-15 | 2019-06-25 | 山东云缦智能科技有限公司 | 一种设置用户界面的方法及装置 |
US11449185B1 (en) * | 2019-10-23 | 2022-09-20 | Meta Platforms, Inc. | Systems and methods for providing content |
US11893210B2 (en) * | 2021-10-15 | 2024-02-06 | Sap Se | Control overlay for user interface elements |
-
2019
- 2019-12-19 CN CN201911317727.1A patent/CN111064983B/zh active Active
-
2020
- 2020-03-13 WO PCT/CN2020/079178 patent/WO2021120419A1/zh active Application Filing
-
2021
- 2021-11-17 US US17/455,266 patent/US12022146B2/en active Active
Patent Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
KR20120075002A (ko) * | 2010-12-28 | 2012-07-06 | 엘지전자 주식회사 | 애플리케이션 정보 표시 방법 및 그를 이용한 영상 표시 기기 |
CN108874257A (zh) * | 2017-05-08 | 2018-11-23 | 珠海金山办公软件有限公司 | 一种图片展示方法及装置 |
CN109743605A (zh) * | 2018-12-27 | 2019-05-10 | 百视通网络电视技术发展有限责任公司 | 一种基于机顶盒的高清电视界面交互方法、***及机顶盒 |
CN110187781A (zh) * | 2019-05-30 | 2019-08-30 | 携程旅游信息技术(上海)有限公司 | 以瀑布流方式显示图片的方法、***、设备和存储介质 |
Also Published As
Publication number | Publication date |
---|---|
US12022146B2 (en) | 2024-06-25 |
WO2021120419A1 (zh) | 2021-06-24 |
CN111064983A (zh) | 2020-04-24 |
US20220078505A1 (en) | 2022-03-10 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN111314789B (zh) | 显示设备和频道定位方法 | |
WO2021114529A1 (zh) | 用户界面展示方法及显示设备 | |
CN111182345B (zh) | 一种控件的显示方法及显示设备 | |
CN111654739A (zh) | 一种内容显示方法及显示设备 | |
WO2020207115A1 (zh) | 一种提供菜单项的图形用户界面方法及显示设备 | |
CN112463269B (zh) | 用户界面显示方法及显示设备 | |
CN109960556B (zh) | 一种显示设备 | |
CN111246309A (zh) | 在显示设备中显示频道列表的方法及显示设备 | |
CN111045557A (zh) | 焦点对象的移动方法及显示设备 | |
CN111726673B (zh) | 一种频道切换方法及显示设备 | |
CN111857502B (zh) | 一种图像显示方法及显示设备 | |
CN111104020A (zh) | 用户界面设置方法、存储介质及显示设备 | |
US12022146B2 (en) | User interface display method and device | |
CN111294633B (zh) | 一种epg用户界面的展示方法及显示设备 | |
CN111479155A (zh) | 显示设备及用户界面显示方法 | |
CN111277911B (zh) | 一种全景视频的图像处理方法、显示设备及服务器 | |
CN112004126A (zh) | 搜索结果显示方法及显示设备 | |
CN111726674B (zh) | 一种HbbTV应用启动方法及显示设备 | |
WO2021212667A1 (zh) | 一种多媒资数据显示方法及显示设备 | |
CN113115092B (zh) | 一种显示设备及详情页展示方法 | |
CN111857363A (zh) | 一种输入法交互方法及显示设备 | |
CN111757154A (zh) | 一种遥控器控制网页光标的方法及显示设备 | |
CN113115081B (zh) | 显示设备、服务器及媒资推荐方法 | |
CN113115093B (zh) | 一种显示设备及详情页展示方法 | |
WO2022076940A1 (en) | Viewport display method and display apparatus |
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 | ||
GR01 | Patent grant | ||
GR01 | Patent grant |