CN112235621B - 一种可视区域的显示方法及显示设备 - Google Patents

一种可视区域的显示方法及显示设备 Download PDF

Info

Publication number
CN112235621B
CN112235621B CN202011077578.9A CN202011077578A CN112235621B CN 112235621 B CN112235621 B CN 112235621B CN 202011077578 A CN202011077578 A CN 202011077578A CN 112235621 B CN112235621 B CN 112235621B
Authority
CN
China
Prior art keywords
selector
virtual list
numbers
serial number
sequence number
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
CN202011077578.9A
Other languages
English (en)
Other versions
CN112235621A (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.)
Vidaa Netherlands International Holdings BV
Vidaa USA Inc
Original Assignee
Vidaa Netherlands International Holdings BV
Vidaa USA Inc
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 Vidaa Netherlands International Holdings BV, Vidaa USA Inc filed Critical Vidaa Netherlands International Holdings BV
Priority to CN202011077578.9A priority Critical patent/CN112235621B/zh
Publication of CN112235621A publication Critical patent/CN112235621A/zh
Priority to PCT/US2021/054422 priority patent/WO2022076940A1/en
Application granted granted Critical
Publication of CN112235621B publication Critical patent/CN112235621B/zh
Priority to US18/065,948 priority patent/US20230110323A1/en
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
    • 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/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
    • G06F3/0482—Interaction with lists of selectable items, e.g. menus
    • 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
    • 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/4318—Generation of visual interfaces for content selection or interaction; Content or additional data rendering by altering the content in the rendering process, e.g. blanking, blurring or masking an image region
    • 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/442—Monitoring of processes or resources, e.g. detecting the failure of a recording device, monitoring the downstream bandwidth, the number of times a movie has been viewed, the storage space available from the internal hard disk
    • H04N21/44213—Monitoring of end-user related data
    • H04N21/44222—Analytics of user selections, e.g. selection of programs or purchase activity
    • 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/443—OS processes, e.g. booting an STB, implementing a Java virtual machine in an STB or power management in an STB
    • H04N21/4438—Window management, e.g. event handling following interaction with the user interface

Abstract

本申请公开了一种可视区域的显示方法及显示设备，以提升用户的使用感受。该方法包括：接收选择器位于可视区域的边界元素上，继续向可视区域外移动的用户操作；根据接收到的用户操作，确定边界元素所在虚拟列表中的元素对应的第一元素序号；根据第一元素序号和选择器向可视区域外移动的方向，确定虚拟列表上待显示的元素对应的第二元素序号；将第二元素序号排序，以使排序后的第二元素序号通过在第一元素序号的基础上替换最少的元素序号个数得到；利用排序后的第二元素序号，更新由第一元素序号对应的元素渲染的虚拟列表；控制更新后的虚拟列表中的元素全部显示在可视区域中。

Description

一种可视区域的显示方法及显示设备
技术领域
本申请涉及显示技术领域，尤其涉及一种可视区域的显示方法及显示设备。
背景技术
在显示设备上经常使用大规模图片和视频等资源集中展示的场景，利用列表的形式将资源展示在显示器上。但是用户经常发现在查看列表中的资源时，界面中的资源显示较慢，影响用户的使用感受。
发明内容
本申请实施例提供一种可视区域的显示方法及显示设备，以提升用户的使用感受。
第一方面，提供一种显示设备，包括：
显示器，用于显示用户界面，以及在用户界面中用以指示元素被选择的选择器，其中，所述用户界面上包括可视区域，可视区域中显示至少一个虚拟列表；
用户接口，用于接收输入信号；
分别与显示器和用户接口连接的控制器，用于执行：
接收选择器位于所述可视区域的边界元素上，继续向可视区域外移动的用户操作；根据接收到的所述用户操作，确定所述边界元素所在虚拟列表中的元素对应的第一元素序号；
根据所述第一元素序号和选择器向可视区域外移动的方向，确定虚拟列表上待显示的元素对应的第二元素序号；将所述第二元素序号排序，以使排序后的第二元素序号通过在第一元素序号的基础上替换最少的元素序号个数得到；
利用排序后的第二元素序号，更新由第一元素序号对应的元素渲染的虚拟列表，其中更新虚拟列表时只渲染排序后的第二元素序号中与第一元素序号不同的元素序号对应的元素；控制更新后的虚拟列表中的元素全部显示在所述可视区域中。
第二方面，提供一种显示设备，包括：
显示器，用于显示用户界面，以及在用户界面中用以指示元素被选择的选择器，其中，所述用户界面上包括可视区域，可视区域中显示至少一个虚拟列表；
用户接口，用于接收输入信号；
分别与显示器和用户接口连接的控制器，用于执行：
接收选择器位于所述可视区域的边界元素上，继续向可视区域外移动的用户操作；根据接收到的所述用户操作，确定所述边界元素所在虚拟列表中的元素对应的第一元素序号；
根据所述第一元素序号和选择器向可视区域外移动的方向，确定第一元素序号中被替换的元素序号和新添的元素序号；将第一元素序号中被替换的元素序号，替换为新添的元素序号，形成第三元素序号；
利用第三元素序号，更新由第一元素序号对应的元素渲染的虚拟列表，其中更新虚拟列表时只渲染排序后的第三元素序号中新添的元素序号；控制更新后的虚拟列表中的元素全部显示在所述可视区域中。
第三方面，提供一种可视区域的显示方法，所述方法包括：
接收选择器位于所述可视区域的边界元素上，继续向可视区域外移动的用户操作；根据接收到的所述用户操作，确定所述边界元素所在虚拟列表中的元素对应的第一元素序号；
根据所述第一元素序号和选择器向可视区域外移动的方向，确定虚拟列表上待显示的元素对应的第二元素序号；将所述第二元素序号排序，以使排序后的第二元素序号通过在第一元素序号的基础上替换最少的元素序号个数得到；
利用排序后的第二元素序号，更新由第一元素序号对应的元素渲染的虚拟列表，其中更新虚拟列表时只渲染排序后的第二元素序号中与第一元素序号不同的元素序号对应的元素；控制更新后的虚拟列表中的元素全部显示在所述可视区域中。
第四方面，提供一种可视区域的显示方法，所述方法包括：
接收选择器位于所述可视区域的边界元素上，继续向可视区域外移动的用户操作；根据接收到的所述用户操作，确定所述边界元素所在虚拟列表中的元素对应的第一元素序号；
根据所述第一元素序号和选择器向可视区域外移动的方向，确定第一元素序号中被替换的元素序号和新添的元素序号；将第一元素序号中被替换的元素序号，替换为新添的元素序号，形成第三元素序号；
利用第三元素序号，更新由第一元素序号对应的元素渲染的虚拟列表，其中更新虚拟列表时只渲染排序后的第三元素序号中新添的元素序号；控制更新后的虚拟列表中的元素全部显示在所述可视区域中。
在上述实施例中，一种可视区域的显示方法及显示设备，以提升用户的使用感受。该方法包括：接收选择器位于所述可视区域的边界元素上，继续向可视区域外移动的用户操作；根据接收到的所述用户操作，确定所述边界元素所在虚拟列表中的元素对应的第一元素序号；根据所述第一元素序号和选择器向可视区域外移动的方向，确定虚拟列表上待显示的元素对应的第二元素序号；将所述第二元素序号排序，以使排序后的第二元素序号通过在第一元素序号的基础上替换最少的元素序号个数得到；利用排序后的第二元素序号，更新由第一元素序号对应的元素渲染的虚拟列表，其中更新虚拟列表时只渲染排序后的第二元素序号中与第一元素序号不同的元素序号对应的元素；控制更新后的虚拟列表中的元素全部显示在所述可视区域中。
附图说明
图1中示例性示出了根据一些实施例的显示设备与控制装置之间操作场景的示意图；
图2中示例性示出了根据一些实施例的显示设备200的硬件配置框图；
图3中示例性示出了根据一些实施例的控制设备100的硬件配置框图；
图4中示例性示出了根据一些实施例的显示设备200中软件配置示意图；
图5中示例性示出了根据一些实施例的显示设备200中应用程序的图标控件界面显示示意图；
图6中示例性示出了根据一些实施例的一种用户界面示意图；
图7中示例性示出了根据一些实施例的另一种用户界面示意图；
图8中示例性示出了根据一些实施例的不同元素数量对页面启动时间的影响的示意图；
图9中示例性示出了根据一些实施例的又一种用户界面示意图；
图10中示例性示出了根据一些实施例的又一种用户界面示意图；
图11中示例性示出了根据一些实施例的又一种用户界面示意图；
图12中示例性示出了根据一些实施例的又一种用户界面示意图；
图13中示例性示出了根据一些实施例的又一种用户界面示意图；
图14中示例性示出了根据一些实施例的又一种用户界面示意图；
图15中示例性示出了根据一些实施例的又一种用户界面示意图。
具体实施方式
为使本申请的目的、实施方式和优点更加清楚，下面将结合本申请示例性实施例中的附图，对本申请示例性实施方式进行清楚、完整地描述，显然，所描述的示例性实施例仅是本申请一部分实施例，而不是全部的实施例。
基于本申请描述的示例性实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请所附权利要求保护的范围。此外，虽然本申请中公开内容按照示范性一个或几个实例来介绍，但应理解，可以就这些公开内容的各个方面也可以单独构成一个完整实施方式。
需要说明的是，本申请中对于术语的简要说明，仅是为了方便理解接下来描述的实施方式，而不是意图限定本申请的实施方式。除非另有说明，这些术语应当按照其普通和通常的含义理解。
本申请中说明书和权利要求书及上述附图中的术语″第一″、″第二″、″第三″等是用于区别类似或同类的对象或实体，而不必然意味着限定特定的顺序或先后次序，除非另外注明(Unless otherwise indicated)。应该理解这样使用的用语在适当情况下可以互换，例如能够根据本申请实施例图示或描述中给出那些以外的顺序实施。
此外，术语″包括″和″具有″以及他们的任何变形，意图在于覆盖但不排他的包含，例如，包含了一系列组件的产品或设备不必限于清楚地列出的那些组件，而是可包括没有清楚地列出的或对于这些产品或设备固有的其它组件。
本申请中使用的术语″模块″，是指任何已知或后来开发的硬件、软件、固件、人工智能、模糊逻辑或硬件或/和软件代码的组合，能够执行与该元件相关的功能。
本申请中使用的术语″遥控器″，是指电子设备(如本申请中公开的显示设备)的一个组件，通常可在较短的距离范围内无线控制电子设备。一般使用红外线和/或射频(RF)信号和/或蓝牙与电子设备连接，也可以包括WiFi、无线USB、蓝牙、动作传感器等功能模块。例如：手持式触摸遥控器，是以触摸屏中用户界面取代一般遥控装置中的大部分物理内置硬键。
本申请中使用的术语″手势″，是指用户通过一种手型的变化或手部运动等动作，用于表达预期想法、动作、目的/或结果的用户行为。
图1中示例性示出了根据实施例中显示设备与控制装置之间操作场景的示意图。如图1中示出，用户可通过移动终端300和控制装置100操作显示设备200。
在一些实施例中，控制装置100可以是遥控器，遥控器和显示设备的通信包括红外协议通信或蓝牙协议通信，及其他短距离通信方式等，通过无线或其他有线方式来控制显示设备200。用户可以通过遥控器上按键，语音输入、控制面板输入等输入用户指令，来控制显示设备200。如：用户可以通过遥控器上音量加减键、频道控制键、上/下/左/右的移动按键、语音输入按键、菜单键、开关机按键等输入相应控制指令，来实现控制显示设备200的功能。
在一些实施例中，也可以使用移动终端、平板电脑、计算机、笔记本电脑、和其他智能设备以控制显示设备200。例如，使用在智能设备上运行的应用程序控制显示设备200。该应用程序通过配置可以在与智能设备关联的屏幕上，在直观的用户界面(UI)中为用户提供各种控制。
在一些实施例中，移动终端300可与显示设备200安装软件应用，通过网络通信协议实现连接通信，实现一对一控制操作的和数据通信的目的。如：可以实现用移动终端300与显示设备200建立控制指令协议，将遥控控制键盘同步到移动终端300上，通过控制移动终端300上用户界面，实现控制显示设备200的功能。也可以将移动终端300上显示音视频内容传输到显示设备200上，实现同步显示功能。
如图1中还示出，显示设备200还与服务器400通过多种通信方式进行数据通信。可允许显示设备200通过局域网(LAN)、无线局域网(WLAN)和其他网络进行通信连接。服务器400可以向显示设备200提供各种内容和互动。示例的，显示设备200通过发送和接收信息，以及电子节目指南(EPG)互动，接收软件程序更新，或访问远程储存的数字媒体库。服务器400可以是一个集群，也可以是多个集群，可以包括一类或多类服务器。通过服务器400提供视频点播和广告服务等其他网络服务内容。
显示设备200，可以液晶显示器、OLED显示器、投影显示设备。具体显示设备类型，尺寸大小和分辨率等不作限定，本领技术人员可以理解的是，显示设备200可以根据需要做性能和配置上一些改变。
显示设备200除了提供广播接收电视功能之外，还可以附加提供计算机支持功能的智能网络电视功能，包括但不限于，网络电视、智能电视、互联网协议电视(IPTV)等。
图2中示例性示出了根据示例性实施例中显示设备200的硬件配置框图。
在一些实施例中，显示设备200中包括控制器250、调谐解调器210、通信器220、检测器230、输入/输出接口255、显示器275，音频输出接口285、存储器260、供电电源290、用户接口265、外部装置接口240中的至少一种。
在一些实施例中，显示器275，用于接收源自第一处理器输出的图像信号，进行显示视频内容和图像以及菜单操控界面的组件。
在一些实施例中，显示器275，包括用于呈现画面的显示屏组件，以及驱动图像显示的驱动组件。
在一些实施例中，显示视频内容，可以来自广播电视内容，也可以是说，可通过有线或无线通信协议接收的各种广播信号。或者，可显示来自网络通信协议接收来自网络服务器端发送的各种图像内容。
在一些实施例中，显示器275用于呈现显示设备200中产生且用于控制显示设备200的用户操控UI界面。
在一些实施例中，根据显示器275类型不同，还包括用于驱动显示的驱动组件。
在一些实施例中，显示器275为一种投影显示器，还可以包括一种投影装置和投影屏幕。
在一些实施例中，通信器220是用于根据各种通信协议类型与外部设备或外部服务器进行通信的组件。例如：通信器可以包括Wifi芯片，蓝牙通信协议芯片，有线以太网通信协议芯片等其他网络通信协议芯片或近场通信协议芯片，以及红外接收器中的至少一种。
在一些实施例中，显示设备200可以通过通信器220与外部控制设备100或内容提供设备之间建立控制信号和数据信号发送和接收。
在一些实施例中，用户接口265，可用于接收控制装置100(如：红外遥控器等)红外控制信号。
在一些实施例中，检测器230是显示设备200用于采集外部环境或与外部交互的信号。
在一些实施例中，检测器230包括光接收器，用于采集环境光线强度的传感器，可以通过采集环境光可以自适应性显示参数变化等。
在一些实施例中，检测器230还可以包括图像采集器，如相机、摄像头等，可以用于采集外部环境场景，以及用于采集用户的属性或与用户交互手势，可以自适应变化显示参数，也可以识别用户手势，以实现与用户之间互动的功能。
在一些实施例中，检测器230还可以包括温度传感器等，如通过感测环境温度。
在一些实施例中，显示设备200可自适应调整图像的显示色温。如当温度偏高的环境时，可调整显示设备200显示图像色温偏冷色调，或当温度偏低的环境时，可以调整显示设备200显示图像偏暖色调。
在一些实施例中，检测器230还可声音采集器等，如麦克风，可以用于接收用户的声音。示例性的，包括用户控制显示设备200的控制指令的语音信号，或采集环境声音，用于识别环境场景类型，使得显示设备200可以自适应适应环境噪声。
在一些实施例中，如图2所示，输入/输出接口255被配置为，可进行控制器250与外部其他设备或其他控制器250之间的数据传输。如接收外部设备的视频信号数据和音频信号数据、或命令指令数据等。
在一些实施例中，外部装置接口240可以包括，但不限于如下：可以高清多媒体接口HDMI接口、模拟或数据高清分量输入接口、复合视频输入接口、USB输入接口、RGB端口等任一个或多个接口。也可以是上述多个接口形成复合性的输入/输出接口。
在一些实施例中，如图2所示，调谐解调器210被配置为，通过有线或无线接收方式接收广播电视信号，可以进行放大、混频和谐振等调制解调处理，从多多个无线或有线广播电视信号中解调出音视频信号，该音视频信号可以包括用户所选择电视频道频率中所携带的电视音视频信号，以及EPG数据信号。
在一些实施例中，调谐解调器210解调的频点受到控制器250的控制，控制器250可根据用户选择发出控制信号，以使的调制解调器响应用户选择的电视信号频率以及调制解调该频率所携带的电视信号。
在一些实施例中，广播电视信号可根据电视信号广播制式不同区分为地面广播信号、有线广播信号、卫星广播信号或互联网广播信号等。或者根据调制类型不同可以区分为数字调制信号，模拟调制信号等。或者根据信号种类不同区分为数字信号、模拟信号等。
在一些实施例中，控制器250和调谐解调器210可以位于不同的分体设备中，即调谐解调器210也可在控制器250所在的主体设备的外置设备中，如外置机顶盒等。这样，机顶盒将接收到的广播电视信号调制解调后的电视音视频信号输出给主体设备，主体设备经过第一输入/输出接口接收音视频信号。
在一些实施例中，控制器250，通过存储在存储器上中各种软件控制程序，来控制显示设备的工作和响应用户的操作。控制器250可以控制显示设备200的整体操作。例如：响应于接收到用于选择在显示器275上显示UI对象的用户命令，控制器250便可以执行与由用户命令选择的对象有关的操作。
在一些实施例中，所述对象可以是可选对象中的任何一个，例如超链接或图标。与所选择的对象有关操作，例如：显示连接到超链接页面、文档、图像等操作，或者执行与所述图标相对应程序的操作。用于选择UI对象用户命令，可以是通过连接到显示设备200的各种输入装置(例如，鼠标、键盘、触摸板等)输入命令或者与由用户说出语音相对应的语音命令。
如图2所示，控制器250包括随机存取存储器251(Random Access Memory，RAM)、只读存储器252(Read-Only Memory，ROM)、视频处理器270、音频处理器280、其他处理器253(例如：图形处理器(Graphics Processing Unit，GPU)、中央处理器254(CentralProcessing Unit，CPU)、通信接口(Communication Interface)，以及通信总线256(Bus)中的至少一种。其中，通信总线连接各个部件。
在一些实施例中，RAM 251用于存储操作系统或其他正在运行中的程序的临时数据
在一些实施例中，ROM 252用于存储各种系统启动的指令。
在一些实施例中，ROM 252用于存储一个基本输入输出系统，称为基本输入输出系统(Basic Input Output System，BIOS)。用于完成对系统的加电自检、系统中各功能模块的初始化、系统的基本输入/输出的驱动程序及引导操作系统。
在一些实施例中在收到开机信号时，显示设备200电源开始启动，CPU运行ROM252中系统启动指令，将存储在存储器的操作系统的临时数据拷贝至RAM 251中，以便于启动或运行操作系统。当操作系统启动完成后，CPU再将存储器中各种应用程序的临时数据拷贝至RAM 251中，然后，以便于启动或运行各种应用程序。
在一些实施例中，CPU处理器254，用于执行存储在存储器中操作系统和应用程序指令。以及根据接收外部输入的各种交互指令，来执行各种应用程序、数据和内容，以便最终显示和播放各种音视频内容。
在一些示例性实施例中，CPU处理器254，可以包括多个处理器。多个处理器可包括一个主处理器以及一个或多个子处理器。主处理器，用于在预加电模式中执行显示设备200一些操作，和/或在正常模式下显示画面的操作。一个或多个子处理器，用于在待机模式等状态下一种操作。
在一些实施例中，图形处理器253，用于产生各种图形对象，如：图标、操作菜单、以及用户输入指令显示图形等。包括运算器，通过接收用户输入各种交互指令进行运算，根据显示属性显示各种对象。以及包括渲染器，对基于运算器得到的各种对象，进行渲染，上述渲染后的对象用于显示在显示器上。
在一些实施例中，视频处理器270被配置为将接收外部视频信号，根据输入信号的标准编解码协议，进行解压缩、解码、缩放、降噪、帧率转换、分辨率转换、图像合成等等视频处理，可得到直接可显示设备200上显示或播放的信号。
在一些实施例中，视频处理器270，包括解复用模块、视频解码模块、图像合成模块、帧率转换模块、显示格式化模块等。
其中，解复用模块，用于对输入音视频数据流进行解复用处理，如输入MPEG-2，则解复用模块进行解复用成视频信号和音频信号等。
视频解码模块，则用于对解复用后的视频信号进行处理，包括解码和缩放处理等。
图像合成模块，如图像合成器，其用于将图形生成器根据用户输入或自身生成的GUI信号，与缩放处理后视频图像进行叠加混合处理，以生成可供显示的图像信号。
帧率转换模块，用于对转换输入视频帧率，如将60Hz帧率转换为120Hz帧率或240Hz帧率，通常的格式采用如插帧方式实现。
显示格式化模块，则用于将接收帧率转换后视频输出信号，改变信号以符合显示格式的信号，如输出RGB数据信号。
在一些实施例中，图形处理器253可以和视频处理器可以集成设置，也可以分开设置，集成设置的时候可以执行输出给显示器的图形信号的处理，分离设置的时候可以分别执行不同的功能，例如GPU+FRC(Frame Rate Conversion))架构。
在一些实施例中，音频处理器280，用于接收外部的音频信号，根据输入信号的标准编解码协议，进行解压缩和解码，以及降噪、数模转换、和放大处理等处理，得到可以在扬声器中播放的声音信号。
在一些实施例中，视频处理器270可以包括一颗或多颗芯片组成。音频处理器，也可以包括一颗或多颗芯片组成。
在一些实施例中，视频处理器270和音频处理器280，可以单独的芯片，也可以于控制器一起集成在一颗或多颗芯片中。
在一些实施例中，音频输出，在控制器250的控制下接收音频处理器280输出的声音信号，如：扬声器286，以及除了显示设备200自身携带的扬声器之外，可以输出至外接设备的发生装置的外接音响输出端子，如：外接音响接口或耳机接口等，还可以包括通信接口中的近距离通信模块，例如：用于进行蓝牙扬声器声音输出的蓝牙模块。
供电电源290，在控制器250控制下，将外部电源输入的电力为显示设备200提供电源供电支持。供电电源290可以包括安装显示设备200内部的内置电源电路，也可以是安装在显示设备200外部电源，在显示设备200中提供外接电源的电源接口。
用户接口265，用于接收用户的输入信号，然后，将接收用户输入信号发送给控制器250。用户输入信号可以是通过红外接收器接收的遥控器信号，可以通过网络通信模块接收各种用户控制信号。
在一些实施例中，用户通过控制装置100或移动终端300输入用户命令，用户输入接口则根据用户的输入，显示设备200则通过控制器250响应用户的输入。
在一些实施例中，用户可在显示器275上显示的图形用户界面(GUI)输入用户命令，则用户输入接口通过图形用户界面(GUI)接收用户输入命令。或者，用户可通过输入特定的声音或手势进行输入用户命令，则用户输入接口通过传感器识别出声音或手势，来接收用户输入命令。
在一些实施例中，″用户界面″，是应用程序或操作系统与用户之间进行交互和信息交换的介质接口，它实现信息的内部形式与用户可以接受形式之间的转换。用户界面常用的表现形式是图形用户界面(Graphic User Interface，GUI)，是指采用图形方式显示的与计算机操作相关的用户界面。它可以是在电子设备的显示屏中显示的一个图标、窗口、控件等界面元素，其中控件可以包括图标、按钮、菜单、选项卡、文本框、对话框、状态栏、导航栏、Widget等可视的界面元素。
存储器260，包括存储用于驱动显示设备200的各种软件模块。如：第一存储器中存储的各种软件模块，包括：基础模块、检测模块、通信模块、显示控制模块、浏览器模块、和各种服务模块等中的至少一种。
基础模块用于显示设备200中各个硬件之间信号通信、并向上层模块发送处理和控制信号的底层软件模块。检测模块用于从各种传感器或用户输入接口中收集各种信息，并进行数模转换以及分析管理的管理模块。
例如，语音识别模块中包括语音解析模块和语音指令数据库模块。显示控制模块用于控制显示器进行显示图像内容的模块，可以用于播放多媒体图像内容和UI界面等信息。通信模块，用于与外部设备之间进行控制和数据通信的模块。浏览器模块，用于执行浏览服务器之间数据通信的模块。服务模块，用于提供各种服务以及各类应用程序在内的模块。同时，存储器260还用存储接收外部数据和用户数据、各种用户界面中各个项目的图像以及焦点对象的视觉效果图等。
图3示例性示出了根据示例性实施例中控制设备100的配置框图。如图3所示，控制设备100包括控制器110、通信接口130、用户输入/输出接口、存储器、供电电源。
控制设备100被配置为控制显示设备200，以及可接收用户的输入操作指令，且将操作指令转换为显示设备200可识别和响应的指令，起用用户与显示设备200之间交互中介作用。如：用户通过操作控制设备100上频道加减键，显示设备200响应频道加减的操作。
在一些实施例中，控制设备100可是一种智能设备。如：控制设备100可根据用户需求安装控制显示设备200的各种应用。
在一些实施例中，如图1所示，移动终端300或其他智能电子设备，可在安装操控显示设备200的应用之后，可以起到控制设备100类似功能。如：用户可以通过安装应用，在移动终端300或其他智能电子设备上可提供的图形用户界面的各种功能键或虚拟按钮，以实现控制设备100实体按键的功能。
控制器110包括处理器112和RAM 113和ROM 114、通信接口130以及通信总线。控制器用于控制控制设备100的运行和操作，以及内部各部件之间通信协作以及外部和内部的数据处理功能。
通信接口130在控制器110的控制下，实现与显示设备200之间控制信号和数据信号的通信。如：将接收到的用户输入信号发送至显示设备200上。通信接口130可包括WiFi芯片131、蓝牙模块132、NFC模块133等其他近场通信模块中至少之一种。
用户输入/输出接口140，其中，输入接口包括麦克风141、触摸板142、传感器143、按键144等其他输入接口中至少一者。如：用户可以通过语音、触摸、手势、按压等动作实现用户指令输入功能，输入接口通过将接收的模拟信号转换为数字信号，以及数字信号转换为相应指令信号，发送至显示设备200。
输出接口包括将接收的用户指令发送至显示设备200的接口。在一些实施例中，可以红外接口，也可以是射频接口。如：红外信号接口时，需要将用户输入指令按照红外控制协议转化为红外控制信号，经红外发送模块进行发送至显示设备200。再如：射频信号接口时，需将用户输入指令转化为数字信号，然后按照射频控制信号调制协议进行调制后，由射频发送端子发送至显示设备200。
在一些实施例中，控制设备100包括通信接口130和输入输出接口140中至少一者。控制设备100中配置通信接口130，如：WiFi、蓝牙、NFC等模块，可将用户输入指令通过WiFi协议、或蓝牙协议、或NFC协议编码，发送至显示设备200.
存储器190，用于在控制器的控制下存储驱动和控制控制设备200的各种运行程序、数据和应用。存储器190，可以存储用户输入的各类控制信号指令。
供电电源180，用于在控制器的控制下为控制设备100各元件提供运行电力支持。可以电池及相关控制电路。
在一些实施例中，系统可以包括内核(Kernel)、命令解析器(shell)、文件系统和应用程序。内核、shell和文件系统一起组成了基本的操作系统结构，它们让用户可以管理文件、运行程序并使用系统。上电后，内核启动，激活内核空间，抽象硬件、初始化硬件参数等，运行并维护虚拟内存、调度器、信号及进程间通信(IPC)。内核启动后，再加载Shell和用户应用程序。应用程序在启动后被编译成机器码，形成一个进程。
参见图4，在一些实施例中，将系统分为四层，从上至下分别为应用程序(Applications)层(简称″应用层″)，应用程序框架(Application Framework)层(简称″框架层″)，安卓运行时(Android runtime)和系统库层(简称″系统运行库层″)，以及内核层。
在一些实施例中，应用程序层中运行有至少一个应用程序，这些应用程序可以是操作系统自带的窗口(Window)程序、系统设置程序、时钟程序、相机应用等；也可以是第三方开发者所开发的应用程序，比如嗨见程序、K歌程序、魔镜程序等。在具体实施时，应用程序层中的应用程序包不限于以上举例，实际还可以包括其它应用程序包，本申请实施例对此不做限制。
框架层为应用程序层的应用程序提供应用编程接口(application programminginterface，API)和编程框架。应用程序框架层包括一些预先定义的函数。应用程序框架层相当于一个处理中心，这个中心决定让应用层中的应用程序做出动作。应用程序通过API接口，可在执行中访问系统中的资源和取得系统的服务
如图4所示，本申请实施例中应用程序框架层包括管理器(Managers)，内容提供者(Content Provider)等，其中管理器包括以下模块中的至少一个：活动管理器(ActivityManager)用与和系统中正在运行的所有活动进行交互；位置管理器(Location Manager)用于给系统服务或应用提供了系统位置服务的访问；文件包管理器(Package Manager)用于检索当前安装在设备上的应用程序包相关的各种信息；通知管理器(NotificationManager)用于控制通知消息的显示和清除；窗口管理器(Window Manager)用于管理用户界面上的括图标、窗口、工具栏、壁纸和桌面部件。
在一些实施例中，活动管理器用于：管理各个应用程序的生命周期以及通常的导航回退功能，比如控制应用程序的退出(包括将显示窗口中当前显示的用户界面切换到系统桌面)、打开、后退(包括将显示窗口中当前显示的用户界面切换到当前显示的用户界面的上一级用户界面)等。
在一些实施例中，窗口管理器用于管理所有的窗口程序，比如获取显示屏大小，判断是否有状态栏，锁定屏幕，截取屏幕，控制显示窗口变化(例如将显示窗口缩小显示、抖动显示、扭曲变形显示等)等。
在一些实施例中，系统运行库层为上层即框架层提供支撑，当框架层被使用时，安卓操作系统会运行系统运行库层中包含的C/C++库以实现框架层要实现的功能。
在一些实施例中，内核层是硬件和软件之间的层。如图4所示，内核层至少包含以下驱动中的至少一种：音频驱动、显示驱动、蓝牙驱动、摄像头驱动、WIFI驱动、USB驱动、HDMI驱动、传感器驱动(如指纹传感器，温度传感器，触摸传感器、压力传感器等)等。
在一些实施例中，内核层还包括用于进行电源管理的电源驱动模块。
在一些实施例中，图4中的软件架构对应的软件程序和/或模块存储在图2或图3所示的第一存储器或第二存储器中。
在一些实施例中，以魔镜应用(拍照应用)为例，当遥控接收装置接收到遥控器输入操作，相应的硬件中断被发给内核层。内核层将输入操作加工成原始输入事件(包括输入操作的值，输入操作的时间戳等信息)。原始输入事件被存储在内核层。应用程序框架层从内核层获取原始输入事件，根据焦点当前的位置识别该输入事件所对应的控件以及以该输入操作是确认操作，该确认操作所对应的控件为魔镜应用图标的控件，魔镜应用调用应用框架层的接口，启动魔镜应用，进而通过调用内核层启动摄像头驱动，实现通过摄像头捕获静态图像或视频。
在一些实施例中，对于具备触控功能的显示设备，以分屏操作为例，显示设备接收用户作用于显示屏上的输入操作(如分屏操作)，内核层可以根据输入操作产生相应的输入事件，并向应用程序框架层上报该事件。由应用程序框架层的活动管理器设置与该输入操作对应的窗口模式(如多窗口模式)以及窗口位置和大小等。应用程序框架层的窗口管理根据活动管理器的设置绘制窗口，然后将绘制的窗口数据发送给内核层的显示驱动，由显示驱动在显示屏的不同显示区域显示与之对应的应用界面。
在一些实施例中，如图5中所示，应用程序层包含至少一个应用程序可以在显示器中显示对应的图标控件，如：直播电视应用程序图标控件、视频点播应用程序图标控件、媒体中心应用程序图标控件、应用程序中心图标控件、游戏应用图标控件等。
在一些实施例中，直播电视应用程序，可以通过不同的信号源提供直播电视。例如，直播电视应用程可以使用来自有线电视、无线广播、卫星服务或其他类型的直播电视服务的输入提供电视信号。以及，直播电视应用程序可在显示设备200上显示直播电视信号的视频。
在一些实施例中，视频点播应用程序，可以提供来自不同存储源的视频。不同于直播电视应用程序，视频点播提供来自某些存储源的视频显示。例如，视频点播可以来自云存储的服务器端、来自包含已存视频节目的本地硬盘储存器。
在一些实施例中，媒体中心应用程序，可以提供各种多媒体内容播放的应用程序。例如，媒体中心，可以为不同于直播电视或视频点播，用户可通过媒体中心应用程序访问各种图像或音频所提供服务。
在一些实施例中，应用程序中心，可以提供储存各种应用程序。应用程序可以是一种游戏、应用程序，或某些和计算机系统或其他设备相关但可以在智能电视中运行的其他应用程序。应用程序中心可从不同来源获得这些应用程序，将它们储存在本地储存器中，然后在显示设备200上可运行。
在显示设备上经常使用大规模图片和视频等资源集中展示的场景，利用列表的形式将资源展示在显示器上。但是用户经常发现在查看列表中的资源时，界面中的资源显示较慢，影响用户的使用感受。
经过发明人深入的研究发现，出现上述问题的原因主要是，如图6所示，界面400包括可视区域500，所述可视区域是具有固定大小的区域，列表600均在可视区域内显示，用户只能看到列表在可视区域内部分的内容。列表中的元素较多，列表组件ListView对所有元素一次性全量渲染，如图7所示，记所有元素为Item1～ItemN。在组件创建的时候，无论可视区域内还是可视区域外，所有元素均全部创建。由于界面的面积有限，所以显示的只有元素ItemO-Item5，但是列表中的所有元素Item0-ItemN被创建，这样就会影响显示设备的性能。因为元素数量较多，所以生成的DOM树(元素树)占用内存较大，同时遍历DOM树上元素耗时也比较长，导致元素占用内存及监听事件占用的内存也过大，最终当内存占用到一定程度时，就出现了卡顿，最终影响显示设备的整体性能和列表操作的用户体验。
如图8所示，展示了DOM树中存在不同元素数量对页面启动时间的影响，发现元素数量过多，页面启动时间越长。综上所述，元素的创建和渲染需要的时间成本很高，在元素的数量大的情况下，完整列表中的全部元素的渲染需要的时间会很长，影响用户的使用感受。为了后续比较多种方案的渲染结果，方便起见，称上述方案为第一种方案。
由于第一种方案中渲染列表所需要的时间过长，所以在一些实施例中，提出了利用虚拟列表改进上述列表实现方式的方法，称之为第二种方案。
一些实施例中，在虚拟列表中只渲染显示在可视区域上的元素，虚拟列表可以很大程度上的减少元素的创建和渲染需要的时间。虚拟列表是一种根据滚动容器元素的可视区域(viewport)来渲染长列表中某一个部分节点的技术。
采用按需加载的思想，不必渲染所有元素，只是渲染可视区域内的一部分元素的技术。由于虚拟列表在任何情况下只对可视区域进行渲染，减少了渲染的元素数量，可以提高渲染性能和减少元素的内存占用。
一些实施例中，当列表中有成千上万个元素的时候，如果采用虚拟列表的方案，如图9所示，就需要只渲染可视区域内的item8到item13，6个元素。当选择器移动向右移动超出可视区域范围时，需要显示item9到item14，如图10所示，此时只需要更新渲染的6个元素，这样就可以达到在虚拟列表中可以快速渲染元素的目的。但是，虚拟列表虽然减少了列表创建时元素渲染的数量，但是当选择器移动超出可视区域时，会造成已渲染元素全部重新渲染，同样非常影响显示设备性能。
一些实施例中，实现虚拟列表就是处理选择器移动(或滚动条滚动)后的可视区域的变更，其中具体步骤如下：(1)计算当前可见区域起始数据的startIndex(开始序号)；(2)计算当前可见区域结束数据的endIndex(结束序号)；(3)计算当前可视区域的元素，并渲染到虚拟列表中。再次参阅图9，可视区域范围内可以显示6个元素，当选择器位于Item13时，通过按照控制装置上的右键，控制虚拟列表中元素右移，这时需要更换可视区域内的元素。Item8更换为Item9，Item9变更为Item10，以此类推。通过图9和图10对比，可以看出当选择器移动超出可视区域范围时，虽然用户只希望变化1个元素，但是实际上可视区域内的元素都会发生变化，造成已渲染的元素全部重新渲染，一方面是对性能消耗较大，另一方面元素的变化，会给用户带来显示界面闪烁的感觉，严重影响用户体验。
一些实施例中，所述元素指以表示诸如图标、缩略图、视频剪辑、链接等对应内容的视觉对象，这些元素为由内容制造商设置的各种应用和服务内容。
还需说明的是，选择器用于指示其中任一元素被选择，如焦点对象。可根据用户通过控制装置的输入，控制显示设备中显示焦点对象的移动来选择或控制元素。如：用户可通过控制装置上方向键控制焦点对象在元素之间的移动来选择和控制元素。
选择器的标识形式通常多样化。示例的，如图6中选择器41通过改变聚焦项目的文本或图像的边框线、尺寸、颜色、透明度和轮廓和/或字体等标识焦点对象的位置，还可以通过放大项目来实现或标识焦点对象的位置，也可以通过设置项目背景色来实现或标识焦点对象的位置。
本申请实施例提供了一种可视区域的显示方法，称之为第三种方案，在详细描述该方法之前，介绍一下列表渲染过程：1、解析HTML(超文本标记语言)生成DOM树，具体的，渲染引擎首先解析HTML文档，生成DOM树；2、构建Render树(渲染树)，具体的，不管是内联式，外联式还是嵌入式引入的CSS样式(层叠样式表)会被解析生成CSSOM树(CSS对象模型)，根据DOM树与CSSOM树生成另外一棵用于渲染的渲染树；3、布局Render树，具体的对渲染树的每个元素进行布局处理，确定其在可视区域上的显示位置；4、绘制Render树，最后遍历渲染树并用UI(用户界面)后端层将每一个元素绘制出来。
通过对上述渲染过程的说明，可知元素顺序和显示位置顺序是两个概念，DOM树是根据HTML解析得到的，通过DOM树确定元素顺序，而元素显示位置顺序则取决于关联的CSS样式。本申请实施例的方法即是基于元素顺序和显示位置顺序的无关性的特点，从而达到可视区域显示的高效性，进一步提升性能表现。
一些实施例中，用户在查看大规模图片和视频等资源时，可以通过按压控制装置上的HOME键，打开主页应用，利用控制装置将选择器向主页的下方移动显示可视区域，示例性的，界面如图11所示，可视区域中显示多行虚拟列表。
接收选择器位于所述可视区域的边界元素上，继续向可视区域外移动的用户操作。示例性的，如图6所示，可视区域包括一个虚拟列表，当选择器位于Item5上时，接收到用户利用控制装置继续移动选择器向右移动。需要说明的是，所述边界元素是指所述虚拟列表的在可视区域范围内的边缘元素，且选择器位于该边缘元素后可以继续向可视区域外移动，示例性的，如图6所示，边界元素包括Item5，Item0虽然也是位于可视区域范围内的边缘元素，但是在控制器在Item0上，并不能继续向可视区域外(向左)移动。如图9所示，边界元素包括Item8和Item13。
根据接收到的所述用户操作，确定所述边界元素所在虚拟列表中的元素对应的第一元素序号。本申请实施例中虚拟列表不是将全部元素都渲染，只是渲染显示在可视区域内的元素，所以边界元素所在虚拟列表中元素对应的第一元素序号，即为显示在可视区域上元素的元素序号。示例性的，当虚拟列表在可视区域显示的元素数量为6个，本申请实施例中，边界元素所在虚拟列表中的元素对应的第一元素序号即为6个。
示例性的，如图6所示，当边界元素为Item5时，Item5所在虚拟列表中的元素即为ItemO-Item5，此时确定Item0-Item5对应的第一元素序号，一些实施例中，所述第一元素序号可以为0-5。如图12所示，当边界元素为Item6时，Item6所在虚拟列表中元素即为Item1-Item6，此时Item1-Item6对应的第一元素序号，所述第一元素序号可以为6、1、2、3、4、5，值得注意的是，所述第一元素序号并不是1、2、3、4、5、6，这是因为第一元素序号和其显示顺序没有任何关系。
本申请实施例中，所述虚拟列表的方向可以为横向，也可以为纵向，示例性的，如图13中的虚拟列表为纵向虚拟列表。
一些实施例中，根据所述第一元素序号和选择器向可视区域外移动的方向，确定虚拟列表上待显示的元素对应的第二元素序号的步骤包括：
所述虚拟列表为横向虚拟列表，选择器移动的次数为m次；
如果选择器未位于虚拟列表对应的资源中最后m个元素上，且选择器向可视区域外移动的方向为向右，则将第一元素序号加m。所述虚拟列表对应的资源是指可以在该虚拟列表中渲染的全部元素，所述虚拟列表对应的资源可以根据DOM树确定，所述资源可以包括多个元素。示例性的，m为1，如果选择器位于虚拟列表对应的资源中最后一个，虚拟列表对应的资源一共包括19个元素，当选择器位于Item19上时，无法将选择器继续向右移动，此时虚拟列表显示在可视区域的元素保持不变。
当虚拟列表中对应的资源有50个元素，第一元素序号为0-5，选择器位于边界元素上，且向可视区域外移动的方向为向右，选择器移动1次，m＝1，则第一元素序号中的每一个元素序号都加1，第二元素序号为1-6。一些实施例中，用户控制选择器在边界元素上，且控制选择器向可视区域外同一方向上短时间内连续移动多次，示例性的，用户连续按压控制装置上的″左键″、″右键″、″上键″和″下键″。当第一元素序号为0-5，选择器向可视区域外移动的方向为向右，选择器移动2次，m＝2，则第一元素序号中的每一个元素序号都加2，第二元素序号为2-7。当第一元素序号为0-5，虚拟列表中对应的资源一共有6个元素，选择器位于边界元素上，且向可视区域外移动的方向为向右，选择器移动2次，m＝2，则第一元素序号由于加2后的最高值已经超出了6，则此时在确定第二元素序号时，不再加2，而是加1，即第二元素序号为1-6。
选择器移动的次数为m次，如果选择器未位于虚拟列表对应的资源中前m个元素上，且选择器向可视区域外移动的方向为向左，；则将第一元素序号减m。示例性的，当第一元素序号为6、1、2、3、4、5，选择器向可视区域外移动的方向为向左，选择器移动1次，m＝1，则第二元素序号为5、0、1、2、3、4。本申请实施例中，选择器向可视区域外移动的方向为向左和向右，在第一元素序号的基础上确定第二元素序号的原理大致相同，所以在此不再赘述。
一些实施例中，所述根据所述第一元素序号和选择器向可视区域外移动的方向，确定虚拟列表上待显示的元素对应的第二元素序号的步骤包括：
所述虚拟列表为纵向虚拟列表，如图13所示，选择器移动的次数为w次；如果选择器未位于虚拟列表对应的资源中最后w个元素上，且选择器向可视区域外移动的方向为向下，则将第一元素序号加w；如果当选择器未位于虚拟列表对应的资源中前w个元素上，且选择器向显示框外移动的方向为向上，则将第一元素序号减w。本申请实施例中，纵向虚拟列表中确定第二元素序号的过程和横向虚拟列表中确定第二元素序号的过程相同，在此不再赘述。
将所述第二元素序号排序，以使排序后的第二元素序号通过在第一元素序号的基础上替换最少的元素序号个数得到。本申请实施例中，所述将第二元素序号排序，可以理解为将第二元素序号的位置进行调整，但是不会出现新的元素序号，也不会删减元素序号。示例性的，当第一元素序号为0、1、2、3、4、5，第二元素序号为1、2、3、4、5、6，为了使排序后的第二元素序号可以在第一元素序号的基础上替换最少的元素序号个数得到，排序后的第二元素序号为6、1、2、3、4、5。
当第一元素序号为6、1、2、3、4、5，第二元素序号为5、0、1、2、3、4，则排序后的第二元素序号为0、1、2、3、4、5。
在一些实施例中，将所述第二元素序号排序的步骤包括：根据所述第二元素序号的个数，对所述第二元素序号取余，按照余数排列所述第二元素序号，得到排序后的第二元素序号。示例性的，所述第一元素序号为0、1、2、3、4、5，第二元素序号为1、2、3、4、5、6，第二元素序号的个数为6个，将第二元素序号全部除以6，则第二元素序号对应的余数为1、2、3、4、5、0，第二元素序号按照对应的余数的大小将第二元素序号排序，则余数最小的元素序号6，排在首位，其余元素序号也是按照此规则排序，则最终排序后的第二元素序号为6、1、2、3、4、5，排序后的第二元素序号在第一元素序号的基础上只改变了一个的元素序号。
示例性的，所述第一元素序号为6、1、2、3、4、5，第二元素序号为5、0、1、2、3、4，第二元素序号的个数为6个，则第二元素序号对应的余数为5、0、1、2、3、4，按照余数的大小排列后，最终排序后的第二元素序号为0、1、2、3、4、5，可以看出排序后的第二元素序号在第一元素序号的基础上只改变了一个元素序号。
示例性的，所述第一元素序号为0、1、2、3、4、5，第二元素序号为2、3、4、5、6、7，第二元素序号的个数为6个，则第二元素序号对应的余数为2、3、4、5、0、1，按照余数的大小排列后，最终排序后的第二元素序号为6、7、2、3、4、5，可以看出排序后的第二元素序号在第一元素序号的基础上只改变了两个元素序号。
一些实施例中，将所述第二元素序号排序的步骤包括：利用所述第二元素序号的个数，对第二元素序号中任意两个的元素序号取余，计算任意两个的元素序号的余数差值，当差值大于0，则余数较大的元素序号排在另一个元素序号的后面，余数较小的元素序号排在另一个元素序号的前面。示例性，第二元素序号为1、2、3、4、5、6，可以选择1和2，2和3，3和4，4和5，5和6，6和1，6组数据，分别取余数差值，所述1和2的余数差值为1-2＝-1，将1排列在2的前面；2和3的余数差值为2-3＝-1，将2排列在3的前面；3和4的余数差值为3-4＝-1，将3排列在4的前面；4和5的余数差值为4-5＝-1，将4排列在5的前面；5和6的余数差值为5-0＝5，将6排列在5的前面；6和1的余数差值为0-1＝-1，将6排列在1的前面，最终排序后的第二元素序号为6、1、2、3、4、5。
利用排序后的第二元素序号，更新由第一元素序号对应的元素渲染的虚拟列表，其中更新虚拟列表时只渲染排序后的第二元素序号中与第一元素序号不同的元素序号对应的元素。
本申请实施例中，更新虚拟列表时，只渲染排序后的第二元素序号中与第一元素序号不同的元素序号对应的元素，对于与第一元素序号相同的元素序号对应的元素不再重新渲染，这样就可以只在虚拟列表中替换一个元素序号对应的元素，减少了渲染次数，以及提高了显示效率。
控制更新后的虚拟列表中的元素全部显示在所述可视区域中。一些实施例中，所述控制更新后的虚拟列表中的元素全部显示在所述可视区域中，通过修改外层元素样式完成。示例性的，修改后的第二元素序号为6、1、2、3、4、5，更改第一元素序号对应的元素渲染的虚拟列表后，如图15所示，修改外层元素样式，最终显示为图12显示的界面。
本申请减少元素更新可以提高性能，主要是因为：1、浏览器的JavaScript引擎与DOM引擎共享一个主线程。任何DOM API调用都要先将JavaScript数据结构转为DOM数据结构，再挂起JavaScript引擎并启动DOM引擎，执行过后再把可能的返回值反转数据结构，重启JavaScript引擎继续执行。这种上下文切换很耗性能。2、多DOM API的读写都涉及页面布局的″重新计算″，以确保返回值的准确，涉及样式、结构的还会触发页面″重新绘制″，更耗性能。
本申请实施例中，既可以只渲染可视范围内的元素，又保证了选择器移动时不需要销毁原有DOM元素和创建DOM元素，只需要更新原有元素即可实现选择器移动时所需的展示效果，从而大大的提高了在较多元素下在选择器移动过程中的界面更新效率，保证了显示设备在较差的硬件水平下也可以获得很好的性能表现。
一些实施例中，所述可视区域上的虚拟列表个数为多个，示例性，如图14所示。当选择器位于可视区域显示的最下方的虚拟列表的控件上，且选择器继续向可视区域外移动的方向为向下，可视区域上多个虚拟列表不全部重新渲染，只是将资源中选择器所在虚拟列表中的下一个虚拟列表中的元素序号重新渲染，其余与当前虚拟列表相同的虚拟列表中的元素不渲染。该方案的实现方法与选择器在虚拟列表中左右移动的渲染方法相同，在此不再赘述。
下面为三种方案的对比结果，如表1所示，可以看出第三种方案中，渲染的元素数量最少。
假定可视区域每行列表最多25个元素，纵向共有30个列表。可视区域内横向可以显示6个元素，纵向可以显示4行列表。
表1
Figure BDA0002717249630000201
在第三种方案中，还有另一种实现渲染虚拟列表的方法，所述方法包括：
接收选择器位于所述可视区域的边界元素上，继续向可视区域外移动的用户操作；根据接收到的所述用户操作，确定所述边界元素所在虚拟列表中的元素对应的第一元素序号。该步骤与第三种方案中的首个方案的过程相同，不再赘述。
根据所述第一元素序号和选择器向可视区域外移动的方向，确定第一元素序号中被替换的元素序号和新添的元素序号。
一些实施例中，根据所述第一元素序号和选择器向可视区域外移动的方向，确定第一元素序号中被替换的元素序号和新添的元素序号的步骤包括：
所述虚拟列表为横向虚拟列表，且所述选择器向可视区域外移动的方向为向右；
确定选择器向可视区域外移动方向移动的次数，所述移动的次数可以根据用户按压控制装置上的按键确定。
将所述第一元素序号的元素序号按照由大到小排序，将位于排序在后的元素序号作为被替换的元素序号，所述被替换的元素序号的个数等于选择器移动的次数。示例性的，第一元素序号为0-5，则按照由大到小排序，如果选择器向右移动的次数为一次，则将排序在最后一位的0，作为被替换的元素序号。如果第一元素序号为6、1、2、3、4、5，按照由大到小排列，选择器向右移动的次数为一次，则将排序在最后一位的1，作为被替换的元素序号。如果第一元素序号为6、1、2、3、4、5，按照由大到小排列，选择器移动的次数为2次，则将排序在最后两位的1、2，作为被替换的元素序号。
将第一元素序号中最大的元素序号与预设数字加和，得到新添的元素序号，其中所述预设数字为小于等于n的全部自然数，n大于0，新添的元素序号的个数等于选择器移动的次数。示例性的，第一元素序号为0-5，第一元素序号中最大的元素序号为5，选择器移动的次数为1，则新添的元素序号为6。第一元素序号为0-5，第一元素序号中最大的元素序号为5，选择器移动的次数为2，则新添的元素序号为5+1，5+2，即新添的元素为6和7。当然，本申请实施例中的第一元素序号也可以由小到大排序，后续的过程，与由大到小排序的方法大致相同，在此不再赘述。
一些实施例中，根据所述第一元素序号和选择器向可视区域外移动的方向，确定第一元素序号中被替换的元素序号和新添的元素序号：
所述虚拟列表为横向虚拟列表，且所述选择器向可视区域外移动的方向为向左；确定选择器向可视区域外移动方向移动的次数；
将所述第一元素序号的元素序号按照由大到小排序，将位于排序在前的元素序号作为被替换的元素序号，所述被替换的元素序号的个数等于选择器向左移动的次数。示例性的，第一元素序号为6、1、2、3、4、5。按照由大到小排列，选择器移动的次数为一次，则将排序在第一个的6，作为被替换的元素序号。如果第一元素序号为6、7、2、3、4、5，按照由大到小排列，选择器移动的次数为2次，则将排序在最前两位的6和7，作为被替换的元素序号。
将第一元素序号中最小的元素序号与预设数字相减，得到新添的元素序号，其中所述预设数字为小于等于n的全部自然数，n大于0，新添的元素序号的个数等于选择器移动的次数。示例性的，第一元素序号为6、1、2、3、4、5，第一元素序号中最小的元素序号为1，选择器移动的次数为1次，则新添的元素序号为0。第一元素序号为6、7、2、3、4、5，第一元素序号中最小的元素序号为2，选择器移动的次数为2，则新添的元素序号为2-1，2-2，新添的元素为1和0。
将第一元素序号中被替换的元素序号，替换为新添的元素序号，形成第三元素序号。示例性的，第一元素序号为0-5，被替换的元素序号为0，新添的元素序号为6，则第三元素序号为6、1、2、3、4、5。第一元素序号为6、7、2、3、4、5，被替换的元素为6和7，新添的元素为1和0，则第三元素序号为0、1、2、3、4、5。
利用第三元素序号，更新由第一元素序号对应的元素渲染的虚拟列表，其中更新虚拟列表时只渲染排序后的第三元素序号中新添的元素序号；控制更新后的虚拟列表中的元素全部显示在所述可视区域中。
在上述实施例中，一种可视区域的显示方法及显示设备，以提升用户的使用感受。该方法包括：接收选择器位于所述可视区域的边界元素上，继续向可视区域外移动的用户操作；根据接收到的所述用户操作，确定所述边界元素所在虚拟列表中的元素对应的第一元素序号；根据所述第一元素序号和选择器向可视区域外移动的方向，确定虚拟列表上待显示的元素对应的第二元素序号；将所述第二元素序号排序，以使排序后的第二元素序号通过在第一元素序号的基础上替换最少的元素序号个数得到；利用排序后的第二元素序号，更新由第一元素序号对应的元素渲染的虚拟列表，其中更新虚拟列表时只渲染排序后的第二元素序号中与第一元素序号不同的元素序号对应的元素；控制更新后的虚拟列表中的元素全部显示在所述可视区域中。
最后应说明的是：以上各实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述各实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的范围。
为了方便解释，已经结合具体的实施方式进行了上述说明。但是，上述示例性的讨论不是意图穷尽或者将实施方式限定到上述公开的具体形式。根据上述的教导，可以得到多种修改和变形。上述实施方式的选择和描述是为了更好的解释原理以及实际的应用，从而使得本领域技术人员更好的使用所述实施方式以及适于具体使用考虑的各种不同的变形的实施方式。

Claims (10)

1.一种显示设备，其特征在于，包括：
显示器，用于显示用户界面，以及在用户界面中用以指示元素被选择的选择器，其中，所述用户界面上包括可视区域，可视区域中显示至少一个虚拟列表；
用户接口，用于接收输入信号；
分别与显示器和用户接口连接的控制器，用于执行：
接收选择器位于所述可视区域的边界元素上，继续向可视区域外移动的用户操作；根据接收到的所述用户操作，确定所述边界元素所在虚拟列表中的元素对应的第一元素序号；
根据所述第一元素序号和选择器向可视区域外移动的方向，确定虚拟列表上待显示的元素对应的第二元素序号；将所述第二元素序号排序，以使排序后的第二元素序号通过在第一元素序号的基础上替换最少的元素序号个数得到；
利用排序后的第二元素序号，更新由第一元素序号对应的元素渲染的虚拟列表，其中更新虚拟列表时只渲染排序后的第二元素序号中与第一元素序号不同的元素序号对应的元素；控制更新后的虚拟列表中的元素全部显示在所述可视区域中。
2.根据权利要求1所述的显示设备，其特征在于，所述控制器用于按照下述步骤执行根据所述第一元素序号和选择器向可视区域外移动的方向，确定虚拟列表上待显示的元素对应的第二元素序号：
所述虚拟列表为横向虚拟列表，选择器移动的次数为m次；
如果选择器未位于虚拟列表对应的资源中最后m个元素上，且选择器向可视区域外移动的方向为向右，则将第一元素序号加m；
如果选择器未位于虚拟列表对应的资源中前m个元素上，且选择器向可视区域外移动的方向为向左，则将第一元素序号减m。
3.根据权利要求1所述的显示设备，其特征在于，所述控制器用于按照下述步骤执行根据所述第一元素序号和选择器向可视区域外移动的方向，确定虚拟列表上待显示的元素对应的第二元素序号：
所述虚拟列表为纵向虚拟列表，选择器移动的次数为w次；
如果选择器未位于虚拟列表对应的资源中最后w个元素上，且选择器向可视区域外移动的方向为向下，则将第一元素序号加w；
如果当选择器未位于虚拟列表对应的资源中前w元素上，且选择器向可视区域外移动的方向为向上，则将第一元素序号减w。
4.根据权利要求1所述的显示设备，其特征在于，所述控制器用于按照下述步骤执行将所述第二元素序号排序：
根据所述第二元素序号的个数，对所述第二元素序号取余，按照余数排列所述第二元素序号，得到排序后的第二元素序号。
5.根据权利要求1所述的显示设备，其特征在于，所述控制更新后的虚拟列表中的元素全部显示在所述可视区域中，通过修改外层元素样式完成。
6.一种显示设备，其特征在于，包括：
显示器，用于显示用户界面，以及在用户界面中用以指示元素被选择的选择器，其中，所述用户界面上包括可视区域，可视区域中显示至少一个虚拟列表；
用户接口，用于接收输入信号；
分别与显示器和用户接口连接的控制器，用于执行：
接收选择器位于所述可视区域的边界元素上，继续向可视区域外移动的用户操作；根据接收到的所述用户操作，确定所述边界元素所在虚拟列表中的元素对应的第一元素序号；
根据所述第一元素序号和选择器向可视区域外移动的方向，确定第一元素序号中被替换的元素序号和新添的元素序号；将第一元素序号中被替换的元素序号，替换为新添的元素序号，形成第三元素序号；
利用第三元素序号，更新由第一元素序号对应的元素渲染的虚拟列表，其中更新虚拟列表时只渲染第三元素序号中新添的元素序号；控制更新后的虚拟列表中的元素全部显示在所述可视区域中。
7.根据权利要求6所述的显示设备，其特征在于，所述控制器按照下述步骤执行根据所述第一元素序号和选择器向可视区域外移动的方向，确定第一元素序号中被替换的元素序号和新添的元素序号：
所述虚拟列表为横向虚拟列表，且所述选择器向可视区域外移动的方向为向右；
确定选择器向可视区域外移动方向移动的次数；
将所述第一元素序号的元素序号按照由大到小排序，将位于排序在后的元素序号作为被替换的元素序号，所述被替换的元素序号的个数等于选择器移动的次数；
将第一元素序号中最大的元素序号与预设数字加和，得到新添的元素序号，其中所述预设数字为小于等于选择器移动的次数的全部自然数，新添的元素序号的个数等于选择器移动的次数。
8.根据权利要求6所述的显示设备，其特征在于，所述控制器按照下述步骤执行根据所述第一元素序号和选择器向可视区域外移动的方向，确定第一元素序号中被替换的元素序号和新添的元素序号：
所述虚拟列表为横向虚拟列表，且所述选择器向可视区域外移动的方向为向左；
确定选择器向可视区域外移动方向移动的次数；
将所述第一元素序号的元素序号按照由大到小排序，将位于排序在前的元素序号作为被替换的元素序号，所述被替换的元素序号的个数等于选择器移动的次数；
将第一元素序号中最小的元素序号与预设数字相减，得到新添的元素序号，其中所述预设数字为小于等于选择器移动的次数的全部自然数，新添的元素序号的个数等于选择器移动的次数。
9.一种可视区域的显示方法，其特征在于，所述方法包括：
接收选择器位于所述可视区域的边界元素上，继续向可视区域外移动的用户操作；根据接收到的所述用户操作，确定所述边界元素所在虚拟列表中的元素对应的第一元素序号；
根据所述第一元素序号和选择器向可视区域外移动的方向，确定虚拟列表上待显示的元素对应的第二元素序号；将所述第二元素序号排序，以使排序后的第二元素序号通过在第一元素序号的基础上替换最少的元素序号个数得到；
利用排序后的第二元素序号，更新由第一元素序号对应的元素渲染的虚拟列表，其中更新虚拟列表时只渲染排序后的第二元素序号中与第一元素序号不同的元素序号对应的元素；控制更新后的虚拟列表中的元素全部显示在所述可视区域中。
10.一种可视区域的显示方法，其特征在于，所述方法包括：
接收选择器位于所述可视区域的边界元素上，继续向可视区域外移动的用户操作；根据接收到的所述用户操作，确定所述边界元素所在虚拟列表中的元素对应的第一元素序号；
根据所述第一元素序号和选择器向可视区域外移动的方向，确定第一元素序号中被替换的元素序号和新添的元素序号；将第一元素序号中被替换的元素序号，替换为新添的元素序号，形成第三元素序号；
利用第三元素序号，更新由第一元素序号对应的元素渲染的虚拟列表，其中更新虚拟列表时只渲染第三元素序号中新添的元素序号；控制更新后的虚拟列表中的元素全部显示在所述可视区域中。
CN202011077578.9A 2020-10-10 2020-10-10 一种可视区域的显示方法及显示设备 Active CN112235621B (zh)

Priority Applications (3)

Application Number Priority Date Filing Date Title
CN202011077578.9A CN112235621B (zh) 2020-10-10 2020-10-10 一种可视区域的显示方法及显示设备
PCT/US2021/054422 WO2022076940A1 (en) 2020-10-10 2021-10-11 Viewport display method and display apparatus
US18/065,948 US20230110323A1 (en) 2020-10-10 2022-12-14 Viewport display method and display apparatus

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202011077578.9A CN112235621B (zh) 2020-10-10 2020-10-10 一种可视区域的显示方法及显示设备

Publications (2)

Publication Number Publication Date
CN112235621A CN112235621A (zh) 2021-01-15
CN112235621B true CN112235621B (zh) 2022-08-26

Family

ID=74111772

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202011077578.9A Active CN112235621B (zh) 2020-10-10 2020-10-10 一种可视区域的显示方法及显示设备

Country Status (1)

Country Link
CN (1) CN112235621B (zh)

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114296809B (zh) * 2021-12-24 2023-05-05 深圳航天科技创新研究院 一种基于操作系统的对象模型构建方法及其系统调用接口

Family Cites Families (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105630902B (zh) * 2015-12-21 2019-03-26 明博教育科技股份有限公司 一种渲染和增量更新网页的方法
US10452758B1 (en) * 2017-04-26 2019-10-22 Amazon Technologies, Inc. Optimizing online content rendering
CN109828802B (zh) * 2017-11-23 2023-03-21 腾讯科技（武汉）有限公司 列表视图显示方法、装置及可读介质
CN110134308A (zh) * 2019-05-17 2019-08-16 深圳前海微众银行股份有限公司 数据展示方法、装置、设备及计算机可读存储介质
CN110609729A (zh) * 2019-09-26 2019-12-24 浪潮软件股份有限公司 一种基于cmspweb的页面监听滚动渲染方法

Also Published As

Publication number Publication date
CN112235621A (zh) 2021-01-15

Similar Documents

Publication Publication Date Title
CN109618206B (zh) 呈现用户界面的方法和显示设备
CN112422365B (zh) 显示设备及自动监测网络状态的方法
CN111897478A (zh) 一种页面显示方法及显示设备
CN112165641A (zh) 一种显示设备
CN111970549A (zh) 菜单显示方法和显示设备
CN111954059A (zh) 屏保的展示方法及显示设备
CN111899175A (zh) 图像转换方法及显示设备
CN112087671B (zh) 一种输入法控件的操控提示信息的显示方法及显示设备
CN112399217B (zh) 显示设备及与功放设备建立通信连接的方法
CN112272331B (zh) 一种节目频道列表快速展示的方法及显示设备
CN112073787B (zh) 显示设备及首页显示方法
CN111954043B (zh) 一种信息栏显示方法及显示设备
CN111984167B (zh) 一种快捷命名的方法及显示设备
CN112235621B (zh) 一种可视区域的显示方法及显示设备
CN112118400A (zh) 显示设备上图像的显示方法及显示设备
CN111988646B (zh) 一种应用程序的用户界面显示方法和显示设备
CN111935530B (zh) 一种显示设备
CN112199560A (zh) 一种设置项的搜索方法及显示设备
CN115185392A (zh) 显示设备、图像处理方法及装置
CN112367550A (zh) 一种媒资列表多标题动态展示的实现方法及显示设备
CN112328553A (zh) 一种缩略图的抓取方法及显示设备
CN111949179A (zh) 一种控件放大方法及显示设备
CN111988649A (zh) 一种控件分离放大方法及显示设备
CN114079827A (zh) 菜单显示方法和显示设备
CN111931692A (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
GR01 Patent grant
GR01 Patent grant