WO2021120419A1 - 用户界面显示方法及设备 - Google Patents

用户界面显示方法及设备 Download PDF

Info

Publication number
WO2021120419A1
WO2021120419A1 PCT/CN2020/079178 CN2020079178W WO2021120419A1 WO 2021120419 A1 WO2021120419 A1 WO 2021120419A1 CN 2020079178 W CN2020079178 W CN 2020079178W WO 2021120419 A1 WO2021120419 A1 WO 2021120419A1
Authority
WO
WIPO (PCT)
Prior art keywords
display
user interface
item
items
picture
Prior art date
Application number
PCT/CN2020/079178
Other languages
English (en)
French (fr)
Inventor
陈文柱
鲁亚凯
孙晨
Original Assignee
青岛海信传媒网络技术有限公司
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 青岛海信传媒网络技术有限公司 filed Critical 青岛海信传媒网络技术有限公司
Publication of WO2021120419A1 publication Critical patent/WO2021120419A1/zh
Priority to US17/455,266 priority Critical patent/US20220078505A1/en

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

Definitions

  • This application relates to the field of display technology, and in particular to a display device.
  • a display device including:
  • controlling the display to display a user interface In response to a user input for instructing to display multiple items, controlling the display to display a user interface
  • the user interface includes the layout of a plurality of items, and the plurality of items are laid out in an arrangement of equal width and unequal height; and, the user interface includes a selector indicating that the item is selected, and The selector is used to select different items by moving in the user interface.
  • the controller is further configured to execute: in response to a user input instructing the selector to move, control the selector to move from the current item to the target item; wherein the target item and the current item are aligned in the height direction of the column.
  • the area overlap ratio is the largest.
  • the number of the columns is determined by the actual width of the page displayed on the display.
  • the controller is further configured to execute: activating the selected item in response to a user input for instructing to activate the selected item.
  • the controller is further configured to execute: when it is determined that the selector moves from the user interface displayed on the display to the outside area, then the selector is not in the area outside the user interface displayed on the display.
  • the item update is displayed in the user interface on the display, and the selector is moved to the updated item.
  • the controller is further configured to execute: based on user input, it is determined that the selector is currently located on the item at the boundary position in the user interface, and the received user input indicates that the selector will move to select The items that are outside the boundaries of the user interface displayed on the display.
  • a display device including:
  • the one type of project includes multiple projects, and the multiple projects include at least one of the target projects.
  • the multiple items in the user interface are arranged in a column mode, not in a row mode; wherein the number of columns is determined by the width of the page actually displayed on the display.
  • the items in different columns in the user interface intersect in the height direction of the items.
  • the third aspect of this application provides display devices, including:
  • the one type of project includes multiple projects, and the multiple projects include at least one of the target projects.
  • the item displayed in the user interface is obtained by zooming the acquired target item.
  • FIG. 1A exemplarily shows a schematic diagram of an operation scene between a display device and a control device
  • FIG. 1B exemplarily shows a configuration block diagram of the control device 100 in FIG. 1A;
  • FIG. 1C exemplarily shows a configuration block diagram of the display device 200 in FIG. 1A;
  • FIG. 1D exemplarily shows a block diagram of the architecture configuration of the operating system in the memory of the display device 200
  • FIG. 2 exemplarily shows a schematic diagram of a GUI 400 provided by the display device 200
  • FIG. 3 exemplarily shows a schematic diagram of the effect that the first row of the page is full of pictures
  • FIG. 4 exemplarily shows a schematic diagram of the effect when another picture is loaded on the basis of FIG. 3;
  • 5A and 5B respectively illustrate schematic diagrams of the selector moving in the user interface to select different pictures.
  • user interface in this application refers to a medium interface for interaction and information exchange between an application or operating system and a user. It realizes the conversion between the internal form of information and the form acceptable to the user.
  • the commonly used form of user interface is a graphical user interface (graphic user interface, GUI), which refers to a user interface related to computer operations that is displayed in a graphical manner. It can be an icon, window, control and other interface elements displayed on the display of the display device.
  • the control can include icons, buttons, menus, tabs, text boxes, dialog boxes, status bars, navigation bars, Widgets, etc. Visual interface elements.
  • FIG. 1A exemplarily shows a schematic diagram of an operation scene between the display device and the control device.
  • the control device 100 and the display device 200 can communicate in a wired or wireless manner.
  • control device 100 is configured to control the display device 200, which can receive operation instructions input by the user, and convert the operation instructions into instructions that the display device 200 can recognize and respond to, and act as an intermediary for the interaction between the user and the display device 200 effect.
  • the user operates the channel addition and subtraction keys on the control device 100, and the display device 200 responds to the channel addition and subtraction operations.
  • the control device 100 may be a remote controller 100A, including infrared protocol communication or Bluetooth protocol communication, and other short-distance communication methods, etc., to control the display device 200 in a wireless or other wired manner.
  • the user can control the display device 200 by inputting user instructions through keys on the remote control, voice input, control panel input, etc.
  • the user can control the display device 200 by inputting corresponding control commands through the volume plus and minus keys, channel control keys, up/down/left/right movement keys, voice input keys, menu keys, and power on/off keys on the remote control. Function.
  • the control device 100 may also be a smart device, such as a mobile terminal 100B, a tablet computer, a computer, a notebook computer, and the like.
  • a smart device such as a mobile terminal 100B, a tablet computer, a computer, a notebook computer, and the like.
  • an application program running on a smart device is used to control the display device 200.
  • the application can be configured to provide users with various controls through an intuitive user interface (UI) on the screen associated with the smart device.
  • UI intuitive user interface
  • the mobile terminal 100B may install a software application with the display device 200, realize connection communication through a network communication protocol, and realize the purpose of one-to-one control operation and data communication.
  • the mobile terminal 100B can establish a control instruction protocol with the display device 200, and by operating various function keys or virtual buttons of the user interface provided on the mobile terminal 100B, the functions of the physical keys such as the remote control 100A can be realized.
  • the audio and video content displayed on the mobile terminal 100B can also be transmitted to the display device 200 to realize the synchronous display function.
  • the display device 200 may provide a broadcast receiving function and a network TV function of a computer support function.
  • the display device can be implemented as digital TV, Internet TV, Internet Protocol TV (IPTV), and so on.
  • the display device 200 may be a liquid crystal display, an organic light emitting display, or a projection device.
  • the specific display device type, size and resolution are not limited.
  • the display device 200 also performs data communication with the server 300 through a variety of communication methods.
  • the display device 200 may be allowed to communicate through a local area network (LAN), a wireless local area network (WLAN), and other networks.
  • the server 300 may provide various contents and interactions to the display device 200.
  • the display device 200 can send and receive information, such as receiving electronic program guide (EPG) data, receiving software program updates, or accessing a remotely stored digital media library.
  • EPG electronic program guide
  • the server 300 can be one group or multiple groups, and can be one type or multiple types of servers.
  • the server 300 provides other network service content such as video-on-demand and advertising services.
  • FIG. 1B exemplarily shows a configuration block diagram of the control device 100.
  • the control device 100 includes a controller 110, a memory 120, a communicator 130, a user input interface 140, an output interface 150, and a power supply 160.
  • the controller 110 includes a random access memory (RAM) 111, a read only memory (ROM) 112, a processor 113, a communication interface, and a communication bus.
  • RAM random access memory
  • ROM read only memory
  • the controller 110 is used to control the operation and operation of the control device 100, as well as the communication and cooperation between internal components, and external and internal data processing functions.
  • the controller 110 may control to generate a signal corresponding to the detected interaction, and This signal is sent to the display device 200.
  • the memory 120 is used to store various operating programs, data, and applications for driving and controlling the control device 100 under the control of the controller 110.
  • the memory 120 can store various control signal instructions input by the user.
  • the communicator 130 realizes the communication of control signals and data signals with the display device 200 under the control of the controller 110.
  • the control device 100 sends a control signal (such as a touch signal or a button signal) to the display device 200 via the communicator 130, and the control device 100 can receive the signal sent by the display device 200 via the communicator 130.
  • the communicator 130 may include an infrared signal interface 131 and a radio frequency signal interface 132.
  • the user input instruction needs to be converted into an infrared control signal according to the infrared control protocol, and sent to the display device 200 via the infrared sending module.
  • a radio frequency signal interface a user input instruction needs to be converted into a digital signal, which is then modulated according to the radio frequency control signal modulation protocol, and then sent to the display device 200 by the radio frequency sending terminal.
  • the user input interface 140 may include at least one of a microphone 141, a touch panel 142, a sensor 143, a button 144, etc., so that the user can input user instructions for controlling the display device 200 to the control device through voice, touch, gesture, pressing, etc. 100.
  • the output interface 150 outputs a user instruction received by the user input interface 140 to the display device 200, or outputs an image or voice signal received by the display device 200.
  • the output interface 150 may include an LED interface 151, a vibration interface 152 that generates vibration, a sound output interface 153 that outputs a sound, a display 154 that outputs an image, and the like.
  • the remote controller 100A can receive output signals such as audio, video, or data from the output interface 150, and display the output signals as images on the display 154, as audio on the sound output interface 153, or as vibration on the vibration interface 152. form.
  • the power supply 160 is used to provide operating power support for each element of the control device 100 under the control of the controller 110.
  • the form can be battery and related control circuit.
  • FIG. 1C exemplarily shows a block diagram of the hardware configuration of the display device 200.
  • the display device 200 may include a tuner and demodulator 210, a communicator 220, a detector 230, an external device interface 240, a controller 250, a memory 260, a user interface 265, a video processor 270, a display 275, Audio processor 280, audio output interface 285, and power supply 290.
  • the tuner and demodulator 210 which receives broadcast television signals through wired or wireless means, can perform modulation and demodulation processing such as amplification, mixing and resonance, and is used to demodulate the television selected by the user from multiple wireless or cable broadcast television signals
  • modulation and demodulation processing such as amplification, mixing and resonance
  • the audio and video signals carried in the frequency of the channel, as well as additional information (such as EPG data).
  • the tuner and demodulator 210 can be selected by the user and controlled by the controller 250 to respond to the frequency of the television channel selected by the user and the television signal carried by the frequency.
  • the tuner and demodulator 210 can receive signals in many ways according to different broadcasting formats of TV signals, such as terrestrial broadcasting, cable broadcasting, satellite broadcasting or Internet broadcasting; and according to different modulation types, it can be digital modulation or analog Modulation method; and according to different types of received TV signals, analog signals and digital signals can be demodulated.
  • different broadcasting formats of TV signals such as terrestrial broadcasting, cable broadcasting, satellite broadcasting or Internet broadcasting
  • modulation types it can be digital modulation or analog Modulation method
  • received TV signals, analog signals and digital signals can be demodulated.
  • the tuner demodulator 210 may also be in an external device, such as an external set-top box.
  • the set-top box outputs a TV signal after modulation and demodulation, and is input to the display device 200 through the external device interface 240.
  • the communicator 220 is a component used to communicate with external devices or external servers according to various types of communication protocols.
  • the display device 200 may transmit content data to an external device connected via the communicator 220, or browse and download content data from an external device connected via the communicator 220.
  • the communicator 220 may include a network communication protocol module such as a WIFI module 221, a Bluetooth communication protocol module 222, and a wired Ethernet communication protocol module 223 or a near field communication protocol module, so that the communicator 220 can receive the control device 100 according to the control of the controller 250 Control signals, and implement the control signals as WIFI signals, Bluetooth signals, radio frequency signals, etc.
  • the detector 230 is a component of the display device 200 for collecting signals from the external environment or interacting with the outside.
  • the detector 230 may include a sound collector 231, such as a microphone, which may be used to receive a user's voice, such as a voice signal of a control instruction for the user to control the display device 200; or, it may collect environmental sounds used to identify the type of environmental scene to realize display
  • the device 200 can adapt to environmental noise.
  • the detector 230 may also include an image collector 232, such as a camera, a camera, etc., which may be used to collect external environment scenes to adaptively change the display parameters of the display device 200; and to collect The attributes of the user or interactive gestures with the user to achieve the function of interaction between the display device and the user.
  • an image collector 232 such as a camera, a camera, etc., which may be used to collect external environment scenes to adaptively change the display parameters of the display device 200; and to collect The attributes of the user or interactive gestures with the user to achieve the function of interaction between the display device and the user.
  • the detector 230 may further include a light receiver, which is used to collect the ambient light intensity to adapt to changes in display parameters of the display device 200 and so on.
  • the detector 230 may also include a temperature sensor.
  • the display device 200 may adaptively adjust the display color temperature of the image. Exemplarily, when the temperature is relatively high, the color temperature of the display device 200 can be adjusted to be colder; when the temperature is relatively low, the color temperature of the display device 200 can be adjusted to be warmer.
  • the external device interface 240 is a component that provides the controller 250 to control data transmission between the display device 200 and external devices.
  • the external device interface 240 can be connected to external devices such as set-top boxes, game devices, notebook computers, etc. in a wired/wireless manner, and can receive external devices such as video signals (such as moving images), audio signals (such as music), and additional information (such as EPG). ) And other data.
  • the external device interface 240 may include: a high-definition multimedia interface (HDMI) terminal 241, a composite video blanking synchronization (CVBS) terminal 242, an analog or digital component terminal 243, a universal serial bus (USB) terminal 244, and a component (Component) Any one or more of terminals (not shown in the figure), red, green and blue (RGB) terminals (not shown in the figure), etc.
  • HDMI high-definition multimedia interface
  • CVBS composite video blanking synchronization
  • USB universal serial bus
  • Component Any one or more of terminals (not shown in the figure), red, green and blue (RGB) terminals (not shown in the figure), etc.
  • the controller 250 controls the work of the display device 200 and responds to user operations by running various software control programs (such as an operating system and various application programs) stored on the memory 260.
  • various software control programs such as an operating system and various application programs
  • the controller 250 includes a random access memory (RAM) 251, a read only memory (ROM) 252, a graphics processor 253, a CPU processor 254, a communication interface 255, and a communication bus 256.
  • RAM random access memory
  • ROM read only memory
  • CPU CPU processor
  • communication interface 255 a communication bus 256.
  • the RAM 251, the ROM 252, the graphics processor 253, and the CPU processor 254 communication interface 255 are connected via a communication bus 256.
  • ROM252 used to store various system startup instructions. For example, when the power-on signal is received, the power of the display device 200 starts to start, and the CPU processor 254 runs the system start-up instruction in the ROM 252 to copy the operating system stored in the memory 260 to the RAM 251 to start running the start-up operating system. After the operating system is started up, the CPU processor 254 copies various application programs in the memory 260 to the RAM 251, and then starts to run and start various application programs.
  • the graphics processor 253 is used to generate various graphics objects, such as icons, operation menus, and user input instructions to display graphics.
  • the graphics processor 253 may include an arithmetic unit, which is used to perform operations by receiving various interactive instructions input by the user, and then display various objects according to the display attributes; and includes a renderer, which is used to generate various objects obtained based on the arithmetic unit, and perform operations.
  • the rendered result is displayed on the display 275.
  • the CPU processor 254 is configured to execute operating system and application program instructions stored in the memory 260. And according to the received user input instructions, to execute various applications, data and content processing, so as to finally display and play various audio and video content.
  • the CPU processor 254 may include multiple processors.
  • the multiple processors may include a main processor and multiple or one sub-processors.
  • the main processor is used to perform some initialization operations of the display device 200 in the display device preloading mode, and/or, to display screen operations in the normal mode.
  • Multiple or one sub-processor used to perform an operation in the standby mode of the display device.
  • the communication interface 255 may include the first interface to the nth interface. These interfaces may be network interfaces connected to external devices via a network.
  • the controller 250 may control the overall operation of the display device 200. For example, in response to receiving a user input command for selecting a GUI object displayed on the display 275, the controller 250 may perform an operation related to the object selected by the user input command.
  • the object can be any one of the selectable objects, such as a hyperlink or an icon.
  • the operation related to the selected object for example, the operation of displaying the page, document, image, etc. connected to the hyperlink, or the operation of executing the program corresponding to the object.
  • the user input command for selecting the GUI object may be a command input through various input devices (for example, a mouse, a keyboard, a touch pad, etc.) connected to the display device 200 or a voice command corresponding to a voice spoken by the user.
  • the memory 260 is used to store various types of data, software programs or application programs for driving and controlling the operation of the display device 200.
  • the memory 260 may include volatile and/or non-volatile memory.
  • the term “memory” includes the memory 260, the RAM 251 and ROM 252 of the controller 250, or the memory card in the display device 200.
  • the memory 260 is specifically used to store the operating program that drives the controller 250 in the display device 200; to store various application programs built in the display device 200 and downloaded from external devices by the user; and to store the configuration provided by the display 275 Data such as various GUIs, various objects related to the GUI, and visual effect images of the selector used to select GUI objects.
  • the memory 260 is specifically used to store drivers and related data of the tuner and demodulator 210, the communicator 220, the detector 230, the external device interface 240, the video processor 270, the display 275, the audio processor 280, etc.
  • external data such as audio and video data
  • user data such as key information, voice information, touch information, etc.
  • the memory 260 specifically stores software and/or programs for representing an operating system (OS). These software and/or programs may include, for example, a kernel, middleware, application programming interface (API), and/or application.
  • OS operating system
  • these software and/or programs may include, for example, a kernel, middleware, application programming interface (API), and/or application.
  • the kernel can control or manage system resources and functions implemented by other programs (such as the middleware, API, or application program); at the same time, the kernel can provide interfaces to allow middleware, API, or application program access control To control or manage system resources.
  • FIG. 1D exemplarily shows a block diagram of the architecture configuration of the operating system in the memory of the display device 200.
  • the operating system architecture consists of the application layer, the middleware layer, and the kernel layer from top to bottom.
  • Application layer system built-in applications and non-system-level applications belong to the application layer. Responsible for direct interaction with users.
  • the application layer can include multiple applications, such as settings applications, e-post applications, media center applications, and so on. These applications can be implemented as web applications, which are executed based on the WebKit engine, and specifically can be developed and executed based on HTML5, Cascading Style Sheets (CSS) and JavaScript.
  • CSS Cascading Style Sheets
  • HTML HyperText Markup Language
  • HTML tags are used to describe text, graphics, animations, sounds, tables, For links, the browser will read the HTML document, explain the content of the tags in the document, and display it in the form of a web page.
  • CSS the full name of Cascading Style Sheets (Cascading Style Sheets), is a computer language used to express the style of HTML files, and can be used to define style structures, such as fonts, colors, and positions. CSS styles can be directly stored in HTML web pages or in separate style files to achieve control over styles in web pages.
  • JavaScript is a language used in web page programming, which can be inserted into HTML pages and interpreted and executed by the browser.
  • the interaction logic of the web application is implemented through JavaScript.
  • JavaScript can encapsulate the JavaScript extension interface through the browser to realize the communication with the kernel layer,
  • the middleware layer can provide some standardized interfaces to support the operation of various environments and systems.
  • the middleware layer can be implemented as the Multimedia and Hypermedia Information Coding Expert Group (MHEG) of middleware related to data broadcasting, and it can also be implemented as DLNA middleware of middleware related to external device communication, and it can also be implemented as providing Display the middleware of the browser environment in which each application in the device runs.
  • MHEG Multimedia and Hypermedia Information Coding Expert Group
  • the kernel layer provides core system services, such as file management, memory management, process management, network management, system security authority management and other services.
  • the kernel layer can be implemented as a kernel based on various operating systems, for example, a kernel based on the Linux operating system.
  • the kernel layer also provides communication between system software and hardware, and provides device driver services for various hardware, such as: providing display drivers for displays, camera drivers for cameras, button drivers for remote controls, and WIFI modules Provide WiFi driver, audio driver for audio output interface, power management driver for power management (PM) module, etc.
  • device driver services for various hardware, such as: providing display drivers for displays, camera drivers for cameras, button drivers for remote controls, and WIFI modules Provide WiFi driver, audio driver for audio output interface, power management driver for power management (PM) module, etc.
  • the user interface 265 receives various user interactions. Specifically, it is used to send the input signal of the user to the controller 250, or to transmit the output signal from the controller 250 to the user.
  • the remote control 100A may send input signals input by the user, such as a power switch signal, a channel selection signal, and a volume adjustment signal, to the user interface 265, and then the user interface 265 transfers to the controller 250; or the remote control 100A may Receive output signals such as audio, video, or data output from the user interface 265 after the controller 250 processes, and display the received output signal or output the received output signal as audio or vibration.
  • the user may input a user command on a graphical user interface (GUI) displayed on the display 275, and the user interface 265 receives the user input command through the GUI.
  • GUI graphical user interface
  • the user interface 265 may receive user input commands for controlling the position of the selector in the GUI to select different objects or items.
  • the user may input a user command by inputting a specific sound or gesture, and the user interface 265 recognizes the sound or gesture through the sensor to receive the user input command.
  • the video processor 270 is used to receive external video signals, and perform video data processing such as decompression, decoding, scaling, noise reduction, frame rate conversion, resolution conversion, and image synthesis according to the standard codec protocol of the input signal.
  • the video signal displayed or played directly on the display 275.
  • the video processor 270 includes a demultiplexing module, a video decoding module, an image synthesis module, a frame rate conversion module, a display formatting module, and the like.
  • the demultiplexing module is used to demultiplex the input audio and video data stream, such as the input MPEG-2 stream (based on the compression standard of digital storage media moving images and voice), then the demultiplexing module will demultiplex it Multiplexed into video signals and audio signals, etc.
  • the video decoding module is used to process the demultiplexed video signal, including decoding and scaling.
  • An image synthesis module such as an image synthesizer, is used to superimpose and mix the GUI signal generated by the graphics generator with the zoomed video image according to user input or itself to generate an image signal for display.
  • the frame rate conversion module is used to convert the frame rate of the input video, such as converting the frame rate of the input 60Hz video to a frame rate of 120Hz or 240Hz, and the usual format is realized by such as frame interpolation.
  • the display formatting module is used to change the signal output by the frame rate conversion module to a signal conforming to the display format such as a display, for example, format the signal output by the frame rate conversion module to output RGB data signals.
  • the display 275 is used to receive the image signal input from the video processor 270 to display video content, images, and a menu control interface.
  • the displayed video content can be from the video content in the broadcast signal received by the tuner and demodulator 210, or from the video content input by the communicator 220 or the external device interface 240.
  • the display 275 simultaneously displays a user manipulation interface UI generated in the display device 200 and used to control the display device 200.
  • the display 275 may include a display screen component for presenting a picture and a driving component for driving image display.
  • the display 275 may also include a projection device and a projection screen.
  • the audio processor 280 is used to receive external audio signals, and perform decompression and decoding according to the standard codec protocol of the input signal, as well as audio data processing such as noise reduction, digital-to-analog conversion, and amplification processing, so that the audio data can be processed in the speaker 286 The audio signal to be played.
  • the audio processor 280 may support various audio formats. Such as MPEG-2, MPEG-4, Advanced Audio Coding (AAC), High Efficiency AAC (HE-AAC) and other formats.
  • AAC Advanced Audio Coding
  • HE-AAC High Efficiency AAC
  • the audio output interface 285 is used to receive the audio signal output by the audio processor 280 under the control of the controller 250.
  • the audio output interface 285 may include a speaker 286, or output to an external audio output terminal 287 of a generator of an external device, such as a headset Output terminal.
  • the video processor 270 may include one or more chips.
  • the audio processor 280 may also include one or more chips.
  • the video processor 270 and the audio processor 280 may be separate chips, or may be integrated with the controller 250 in one or more chips.
  • the power supply 290 is used to provide power supply support for the display device 200 with power input from an external power supply under the control of the controller 250.
  • the power supply 290 may be a built-in power supply circuit installed inside the display device 200, or may be a power supply installed outside the display device 200.
  • FIG. 2 exemplarily shows a schematic diagram of a user interface GUI 400 provided by the display device 200.
  • the display device may provide a GUI 400 to the display.
  • the GUI 400 includes a first GUI 41 (view display area) in which a plurality of different items are arranged, and a selector indicating that any item in the GUI 400 is selected.
  • the GUI shown in FIG. 2 includes a first GUI 41 that arranges items 411 to 426, and a selector 42 that indicates that the item 411 is selected.
  • an item refers to a visual object displayed in the GUI provided by the display device 200 to represent corresponding content such as icons, thumbnails, and links.
  • the project can be displayed as a poster of the movie or TV series.
  • the item is music, the poster of the music album can be displayed.
  • the project when the project is an application, it can be displayed as an icon of the application, or a screenshot of the content of the application captured when the application was executed most recently.
  • the project is the user's access history, it can be displayed as a screenshot of the content during the most recent execution.
  • the presentation form of the project is usually diversified.
  • the item may include text content and/or an image for displaying thumbnails related to the text content.
  • the item can be the text and/or icon of the application.
  • the selector can move the position of the selector in the GUI through the input of the user operating the control device to change the selection of different items.
  • the focus object can be selected or controlled by controlling the movement of the focus object displayed in the display device according to the user's input through the control device.
  • the user can select and control items by controlling the movement of the focus object between items through the arrow keys on the control device.
  • the identification form of the selector is usually diversified.
  • the frame of the item 411 is enlarged to realize or identify the position of the focus object.
  • the position of the focused object can also be identified by changing the border line, size, color, transparency, outline, and/or font of the text or image of the focused item.
  • items 411 to 426 are provided on the display.
  • items 411 to 426 correspond to the icons and names of settings, music, TV assistant, video, and file applications.
  • items 411 to 426 respectively Corresponding to the thumbnails and names of some pictures. These items can be activated based on user input to display their corresponding content details.
  • the TV assistant application corresponding to item 413 can be activated when the selector 42 moves to the position of item 413 based on the user pressing the confirm key on the control device, so that the content details of the TV assistant application are displayed in full screen for the user to operate
  • This application for another example, item 413 corresponds to a thumbnail of a picture, which can be activated based on the user pressing the confirmation key on the control device when the selector 42 moves to the position of item 413, so that the picture content is displayed in full screen for the user Confirm whether the picture is set as a screen saver picture.
  • the multiple items in the first GUI 41 can be arranged in columns, where the number of columns is determined by the width of the page actually displayed on the display. Items in different columns in the first GUI 41 may cross in the height direction of the items. The items displayed in the first GUI 41 can be obtained by zooming the acquired items to be displayed.
  • the item is a picture as an example for description.
  • the user interface of the display device can be used to display the pictures loaded on the page.
  • all the loaded pictures can be displayed, or part of the loaded pictures can be displayed, depending on the amount of pictures loaded and the size of the user interface.
  • the page can display different pictures in the view display area of the user interface by scrolling. All pictures on the page are laid out in an arrangement of equal width and unequal height.
  • the view display area displays the home page of an application.
  • the view display area will display a part of the category bar page. , Which contains multiple pictures laid out in an arrangement of equal width and unequal height.
  • the picture currently selected by the selector can be enlarged in full screen to Show HD big picture.
  • the following provides two ways to realize the layout of multiple pictures in the view display area in an arrangement of equal width and unequal height.
  • the first layout method :
  • resource data from the page server when requesting resource data from the page server, it can be requested in batches. For example, 30 pieces of resource data are requested from the page server each time (the specific number of each request depends on the situation) for display.
  • a new picture needs to be displayed such as when the user moves the selector to the bottom of the user interface by operating the control device, request the next batch of resource data.
  • the pictures obtained by each request can be stored in a one-dimensional array originArray: [originItem0,originItem1,originItem27-8], so that the pictures have a certain order, and the subscript of the picture array is the serial number of the picture in all pictures.
  • the specific storage method is not limited and can be determined according to needs.
  • a first picture can be obtained from the pictures currently requested. For example, it is possible to obtain the first picture with the smallest array label among all pictures stored in the one-dimensional array originArray that have not been loaded. If none of the pictures in the one-dimensional array originArray has been loaded, the first picture in the array can be obtained as the first picture. If some pictures in the one-dimensional array originArray have been loaded, the last picture loaded in the array can be obtained The next picture is used as the first picture.
  • the obtained first picture is scaled to obtain a second picture whose width is the set width. Since the image is scaled before loading each time, the width of the image loaded on the page is the set width. In this way, the width of the image in the page can be guaranteed, and the width of the image in the view display area is also guaranteed.
  • the picture size provided by the page server is generally uneven. If you load these pictures directly on the page, it will cause the page to become messy and affect the user's look and feel. If these pictures are cropped to a uniform size and then loaded on the page, the pictures will be partially missing.
  • this embodiment adopts the method of zooming the pictures to unify the width of the pictures loaded on the page, so that the pictures on the page can be neatly arranged in several columns. At the same time, it can avoid the lack of partial scenes in the picture.
  • the first picture can be scaled in equal proportions, which can avoid the problem of scene distortion in the rendered image. For example, if the size of the first picture is 640 ⁇ 480, and the width is set to 120, the first picture is reduced to a picture with a size of 160*120, and the second picture is obtained, in which not only the width is reduced by 4 times, but the height is also reduced.
  • the ratio of height to width of the second image is the same as the ratio of height to width of the first image.
  • the zooming method is not limited to proportional zooming, and may also be non-proportional zooming, as long as it can ensure that the width of the second image to be loaded is the set width.
  • a two-dimensional array is used to sequentially store the detailed information of the image, which can include the URL of the image, the zoomed width and height, and the location information of the image.
  • the first dimension of the two-dimensional array represents the order of the columns of the page, and the second dimension represents the detailed information of the images loaded in each column.
  • the two-dimensional array is named allData:[[item1,item2,item3...],[ item1,item2,item3...],[item1,item2,item3...].........], relevant information can be obtained from the two-dimensional array when needed.
  • the position information of the picture may include: the X coordinate in the horizontal direction and the Y coordinate in the vertical direction of the picture in the coordinate system of the page application.
  • the coordinate system of the page application can take the top left corner of the page as the origin, the horizontal direction as the X-axis direction, and the vertical direction as the Y-axis direction.
  • the upper left vertex of page P100 is the origin of the coordinate system
  • the upper boundary of page 100 starts from the origin and goes to the right in the positive direction of the X axis
  • the left boundary of page 100 starts from the origin and goes down
  • the direction is the positive direction of the Y axis.
  • the coordinate system of the page application is not limited to this, and can be set as needed.
  • the page can fit a total of 4 columns, then the first row can put 4 pictures, but if the page does not load pictures, or only loaded 1, 2, or 3 pictures, then the first row The picture is not full.
  • the first row of the page is not full of pictures, place the second picture in the first row of the page.
  • the first column is used as the target column to load the second picture; if N1 pictures have been loaded in the first row, and N1 is greater than 0 and less than the total number of columns, then the N1 Column +1 is determined as the target column where the second image needs to be loaded.
  • the distance between the target column and the left border of the page is taken as the X coordinate of the second picture, and the set Y coordinate is determined as the Y coordinate of the second picture.
  • the distance between the target column and the left border of the page can also be set in advance, that is, the distance between all columns and the left border of the page is preset, and the corresponding relationship between the distance and the column is set.
  • the target column is determined, from Find the distance corresponding to the target row from the preset distance.
  • the distance is: the distance from I1 to the left border of the page + the width of I1 + I2
  • the width of + set horizontal spacing*2 set the horizontal spacing to be the spacing between two pictures and also the spacing between two columns.
  • the Y coordinate can be set to 0.
  • the Y coordinate can also be set to this space.
  • the second picture can be loaded into the page so that the top left corner of the second picture is located at the position corresponding to the X and Y coordinates on the page.
  • the distance between the target column and the left edge of the page is taken as the X coordinate of the second picture.
  • the Y coordinate is determined as the Y coordinate of the second picture
  • the Y coordinate, the height of the second picture and the height of the second picture can also be calculated. Set the sum of the vertical distances to obtain the first sum value; and record the first sum value as the height value corresponding to the target column.
  • the set vertical spacing can be 0; if there is between the picture and the upper boundary of the page, the set Y coordinate can also be 0.
  • the minimum height value can be determined from the height values corresponding to the recorded columns, where , The height value indicates the total height of all the pictures loaded in the corresponding column, and the column corresponding to the minimum height value is determined as the target column where the second picture needs to be loaded.
  • the minimum height value is determined from the recorded height values of each column, that is, all the pictures that have been loaded are found
  • the column with the smallest sum of heights is used as the target column, and the second picture is loaded into the target column to reduce the height difference between the pictures loaded in the target column and the pictures loaded in other columns.
  • the height value can indicate the total height of the loaded pictures in the column.
  • the height value can be the set Y coordinate + the total height of the loaded pictures in the column + the number of loaded pictures in the column * verticalSpacing.
  • the Y coordinate can be set to 0, and verticalSpacing can also be 0. Set as needed.
  • the X coordinate of any picture that has been loaded in the target column may be determined as the X coordinate of the second picture, and The minimum height value is determined as the Y coordinate of the second picture.
  • the X coordinates of all loaded pictures in the same column are the same, so the X coordinate of any picture loaded in the target column can be determined as the X coordinate of the second picture.
  • the distance between the target column and the left border of the page can also be determined as the X coordinate of the second picture.
  • the minimum height value indicates the total height of the loaded pictures in the target column. Specifically, it can be the set Y coordinate + the total height of the loaded pictures in the target column + the number of pictures loaded in the target column*verticalSpacing. Therefore, you can The minimum height value is determined as the Y coordinate of the second picture.
  • the target column is the second column in the page P100
  • I5 is the second picture
  • allData[2][item1].left is the X coordinate of the picture I2, because the picture I2 is in the second column, so allData[2][item1].left is used as the Y coordinate of the target second picture I5; the height value corresponding to the recorded second column is set to Y coordinate + h2+verticalSpacing, you can directly use the height value as the second picture The Y coordinate of I5.
  • the second picture can be loaded into the page so that the top left corner of the second picture is located at the position corresponding to the X and Y coordinates on the page.
  • the sum of the minimum height value, the height of the second picture, and the set vertical distance can be calculated to obtain the second sum value;
  • the height value corresponding to the target column of is modified to the second sum value.
  • the second column is the target column
  • the picture I5 is the second picture. Modify the recorded allData[2][item1].left to: allData[2][item1].left+h5+verticalSpacing, Among them, h5 is the height of picture I5.
  • the Y coordinate of the picture can be directly determined according to the corresponding height value; in addition, the next picture demand can also be determined according to the height values corresponding to all columns.
  • the controller realizes the layout of pictures in an arrangement of equal width and unequal height, including the following steps:
  • step a3) Check whether the number of images loaded on the page has reached the total number of columns in all the columns of the page. If yes, it means that the first row of the page is not full of images, and perform step a4); otherwise, it means that the first row of the page is full of images. , Execute step a7);
  • the image can be rendered.
  • the page will move relative to the user interface, such as up, so that the loaded but not displayed image will move to the user interface of the display device. In the display.
  • the user interface of the display device Since the user interface of the display device is limited, the size of the page is larger than the user interface, the user interface can only display part of the loaded pictures in the page, and the movement of the page is needed to realize the display of pictures in different positions, see Figure 5A
  • the user interface Z100 shown in and 5B only shows a part of the page.
  • the user interface will display multiple pictures.
  • the user manipulates the control device to make the selector in the user interface move between different pictures.
  • the user further clicks to view the resources corresponding to the picture. , Such as the video data or high-definition picture corresponding to the picture.
  • N2 first pictures can be obtained from the pictures obtained in the current request, where N2 is the total number of columns in all the columns on the page. For example, it is possible to obtain the N2 first pictures with the smallest array label among all pictures stored in the one-dimensional array originArray that have not been loaded.
  • the first picture is scaled to obtain a second picture whose width is the set width.
  • the width of the image loaded on the page is unified as the set width, so that the width of the image in the page can be guaranteed, and the width of the image in the view display area is also guaranteed.
  • the picture size provided by the page server is generally uneven. If you load these pictures directly on the page, it will cause the page to become messy and affect the user's look and feel. If these pictures are cropped to a uniform size and then loaded on the page, the pictures will be partially missing.
  • this embodiment adopts the method of zooming the pictures to unify the width of the pictures loaded on the page, so that the pictures on the page can be neatly arranged in several columns. At the same time, it can avoid the lack of partial scenes in the picture.
  • N2 second pictures need to be loaded into the page to display them in the view display area.
  • a two-dimensional array is used to sequentially store the detailed information of the image, which can include the URL of the image, the zoomed width and height, and the location information of the image.
  • the first dimension of the two-dimensional array represents the order of the columns of the page, and the second dimension represents the detailed information of the images loaded in each column.
  • the two-dimensional array is named allData:[[item1,item2,item3...],[ item1,item2,item3...],[item1,item2,item3...].........], relevant information can be obtained from the two-dimensional array when needed.
  • the position information of the picture may include: the X coordinate in the horizontal direction and the Y coordinate in the vertical direction of the picture in the coordinate system of the page application.
  • the coordinate system of the page application can take the top left corner of the page as the origin, the horizontal direction as the X-axis direction, and the vertical direction as the Y-axis direction.
  • the upper left vertex of page P100 is the origin of the coordinate system
  • the upper boundary of page 100 starts from the origin and goes to the right in the positive direction of the X axis
  • the left boundary of page 100 starts from the origin and goes down
  • the direction is the positive direction of the Y axis.
  • the coordinate system of the page application is not limited to this, and can be set as needed.
  • N2 pictures are loaded each time, so when you get N2 second pictures, either row 1 is full of pictures, Or the picture is not loaded in the first row, so check whether the picture has been loaded on the page).
  • the page has loaded pictures, sort all the columns in the page according to the corresponding height value from small to large, the height value indicates the total height of all pictures in the corresponding column, and sort the N2 second pictures in the order of height from large to small , And arrange the N2 second pictures sorted into the sorted columns in sequence.
  • the method of calculating the position information of the second picture and the height value corresponding to each column is similar to that in the first layout method, and will not be repeated here.
  • the controller realizes the layout of pictures in an arrangement of equal width and unequal height, including the following steps:
  • N2 first pictures are respectively scaled to obtain N2 second pictures whose width is the set width;
  • step b3) Check whether the page has loaded pictures, if yes, go to step b4), otherwise, go to step b5);
  • the gap between the corresponding height values of each column will become smaller, avoiding a column that is too low or too high, which is conducive to improving the visual effect.
  • the height difference of different pictures in the first row is relatively large, which causes the dividing line between the first row and the second row to be more tortuous.
  • the dividing line between the second row and the third row is obviously much smoother, and the degree of misalignment is greatly improved.
  • the page layout method is in the form of waterfall flow, especially the page obtained in the first layout method, without the concept of "row” in the traditional layout.
  • the page layout method is in the form of waterfall flow, especially the page obtained in the first layout method, without the concept of "row” in the traditional layout.
  • the items in different columns in the view display area There is a cross in the height direction, and selector management becomes relatively more complicated.
  • control device switching selector For display equipment, the realization of the control device switching selector is a basic function, and the validity and correctness of the selector switching must be ensured. To this end, a selector management method is further provided to clarify how the left and right selectors move in the waterfall flow layout.
  • the controller is also used to execute: in response to a user input for instructing the selector to move, control the selector to move from the first item currently located to the second item; wherein, the second item The overlap ratio of the area along the height direction of the column with the first item is the largest.
  • the third picture where the selector is currently located is determined on the page according to the first user input, and the column to which the selector needs to be moved is determined. (Referred to as column A).
  • the first user input may be triggered by the control device, and the first user input may carry the picture identification or location information of the third picture where the selector is currently located, and the third picture can be determined according to the picture identification or location information.
  • the specific method for determining the third picture is not limited.
  • the position information of the picture where the selector is located can be saved every time the selector is moved. In this way, when the first user input is received, the saved position information can be used. Determine the third picture.
  • the first user input can indicate the direction of movement; according to the direction of movement, it can be determined whether the selector moves up and down in the column where the third picture is located, or whether it needs to be moved horizontally.
  • column A is determined by the following methods, including:
  • the column A is the previous column of the column where the third picture is located
  • the A column is the next column of the third picture.
  • the column of the third picture is in a different column from column A, find the picture in column A that meets the following conditions: the Y coordinate of the picture, or the sum of the Y coordinate of the picture and the height of the picture is greater than the third picture The Y coordinate of, but not greater than the sum of the Y coordinate of the third picture and the height of the third picture.
  • the way of traversal can be in order from top to bottom, and the specific traversal is not limited.
  • the dichotomy can also be used to traverse. Since the height of the picture is of size, from the perspective of height, the pictures in any column are sorted according to the height size. The pictures in any column are ordered. Use the dichotomy to search. Quickly locate the starting picture with a high degree of overlap.
  • the selector is currently in the picture I10.
  • the picture I10 is the third picture
  • the picture I10 is in the second column
  • the movement direction indicated by the first user input is toward the right of the third picture
  • column A is the third picture.
  • the four pictures I11-I14 are found by traversal. These four pictures overlap in the height direction. The overlapped part can be seen through the two dashed lines shown in FIG. 5A.
  • a fourth picture can be selected from all the pictures found according to a preset selection strategy, and the selector is moved to the fourth picture.
  • the picture can be directly determined as the fourth picture; if the number of pictures found is more than one, it can be determined from all the pictures found to be in the third picture. The picture with the most overlap in height is regarded as the fourth picture.
  • the height of the picture, the Y coordinate of the third picture and the height of the third picture, the overlap height of each picture and the third picture can be calculated first, and then the picture with the largest overlap height can be found.
  • the fourth picture As the fourth picture.
  • the above-mentioned preset selection strategy is only an example, and in fact, there may be other selection methods.
  • the picture with the smallest Y coordinate may be selected as the fourth picture from all the pictures found.
  • the selector management method is highly adaptable and can satisfy the display of pictures of various sizes, and is especially suitable for the first layout method.
  • the third picture where the selector is currently located is determined on the page according to the first user input, and the column A to which the selector needs to be moved is determined.
  • the method of determining the third picture and column A is the same as in the foregoing embodiment, and will not be repeated here.
  • the selector management has a low complexity, a small amount of calculation, and is easy to implement.
  • the selector is currently in picture I20.
  • the picture I20 is the third picture
  • the picture I20 is in the second column
  • the movement direction indicated by the first user input is toward the right of the third picture
  • the second column is determined to be the third picture.
  • the picture I21 in the third column is in the same row as the picture I20 in the second column, so the picture I21 is the fifth picture, and the selector is moved to the picture I21.
  • the controller is also used to execute:
  • the selector When it is determined that the selector attempts to move from within the user interface to an area outside the user interface, update the items in the area outside the user interface to display in the user interface on the display, and control the selection The controller selects the updated item.
  • the controller determines that the selector attempts to move from the user interface to an area outside the user interface, it is specifically used to:
  • the selector moves to the picture at the boundary of the user interface and tries to move in a direction outside the user interface, it requests the next batch of resource data from the page server.
  • the selector moves to the picture below I20 and tries to move down, it requests the next batch of resource data from the page server.
  • the size of the user interface of the display device is limited, so there is no need to load all the requested images in the page. Assuming that the offset of the current page relative to the display device is offsetHeight (the offset is a negative value, and the offset is smaller as the page moves up), and the height of the user interface is pageHeight, then only pictures that meet the following conditions need to be displayed :
  • allData[i][j].top is the Y coordinate of the picture
  • allData[i][j].height is the height of the picture.

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

用户界面显示方法及设备
本申请要求在2019年12月19日提交中国专利局、申请号为201911317727.1、发明名称为“显示设备”的中国专利申请的优先权，其全部内容通过引用结合在本申请中。
技术领域
本申请涉及显示技术领域，尤其涉及一种显示设备。
背景技术
智能电视操作系统(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分别对应设置、音乐、电视助手、视频、文件应用程序的图标和名称，又如，项目411～426分别对应一些图片的缩略图和名称。这些项目可基于用户输入被激活，以显示其对应的内容详情信息。例如项目413对应的电视助手应用程序，可在选择器42移动至项目413位置时基于用户按压控制装置上的确认键而被激活，从而全屏显示电视助手应用程序的内容详情信息，以供用户操作该应用程序；又如，项目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 (19)

  1. 一种显示设备，其特征在于，包括：
    显示器；
    用户接口，用于接收用户输入；
    控制器，用于执行：
    响应于用于指示显示多个项目的用户输入，控制显示器显示用户界面；
    其中，所述用户界面包括布局的多个项目，所述多个项目以列方式进行布局，且具有相等宽度不等高度；以及，所述用户界面包括指示所述项目被选择的选择器，可通过用户输入而移动所述选择器在所述用户界面中的位置，以选择不同的项目；
    响应于指示选择器移动的用户输入，控制选择器由当前项目移动至目标项目；其中，所述目标项目与所述当前项目沿列的高度方向的区域重合比例最大。
  2. 根据权利要求1所述的显示设备，其特征在于，所述列的数量由显示器实际显示的页面宽度决定。
  3. 根据权利要求1所述的显示设备，其特征在于，所述控制器，还用于执行：
    响应于用于指示激活被选择项目的用户输入，激活所述被选择项目。
  4. 根据权利要求1所述的显示设备，其特征在于，控制器，用于执行：
    确定所述选择器由显示器上所显示的所述用户界面向之外区域移动时，则将未在显示器上所显示的用户界面之外区域中的项目更新显示在显示器上的用户界面中，且使所述选择器移动至更新的项目。
  5. 根据权利要求4所述显示设备，其特征在于，确定所述选择器由显示器 上所显示所述用户界面向之外区域移动时，具体包括：
    基于用户输入，确定当前所述选择器位于所述用户界面中边界位置的项目上，且收到的所述用户输入指示所述选择器将移动选择在显示器所显示用户界面边界之外的所述项目。
  6. 一种显示设备，其特征在于，包括：
    显示器；
    用户接口，用于接收用户输入；
    控制器，用于执行：
    响应于显示一类项目的用户输入，确定预设数量的列中各列项目的高度，以及将获取的目标项目布局至所述各列项目的高度中高度最小的一列，以及控制显示器显示包括布局所述一类项目的用户界面；
    其中，所述一类项目包括多个项目，所述多个项目包括至少一个所述目标项目。
  7. 根据权利要求6所述显示设备，其特征在于，所述用户界面中多个项目按照列方式进行排布，不按照行方式进行排布；其中，列的数量由显示器实际显示的页面宽度决定。
  8. 根据权利要求6所述显示设备，其特征在于，所述用户界面中不同列的项目中，在沿项目的高度方向上存在交叉。
  9. 一种显示设备，其特征在于，包括：
    显示器；
    用户接口，用于接收用户输入；
    控制器，用于执行：
    响应于显示一类项目的用户输入，将预设数量的列按照各列项目的高度从小到大进行排序，以及，将获取的所述预设数量的目标项目按照高度从大到小的顺序进行排序，以及，基于两次排序结果，将排序后的预设数量的目标项目依次布局至排序后的各列中，以及控制显示器显示包括布局所述一类项目的用户界面；
    其中，所述一类项目包括多个项目，所述多个项目包括至少一个所述目标项目
  10. 根据权利要求9所述的显示设备，其特征在于，所述用户界面中显示的项目通过对获取的目标项目进行缩放得到。
  11. 一种用户界面显示方法，其特征在于，包括：
    响应于用于指示显示多个项目的用户输入，在显示器上显示用户界面；
    其中，所述用户界面包括布局的多个项目，所述多个项目以列方式进行布局，且具有相等宽度不等高度；以及，所述用户界面包括指示所述项目被选择的选择器，可通过用户输入而移动所述选择器在所述用户界面中的位置，以选择不同的项目；
    响应于指示选择器移动的用户输入，控制选择器由当前项目移动至目标项目；其中，所述目标项目与所述当前项目沿列的高度方向的区域重合比例最大。
  12. 根据权利要求11所述的方法，其特征在于，所述列的数量由显示器实际显示的页面宽度决定。
  13. 根据权利要求11所述的方法，其特征在于，还包括：
    确定所述选择器由显示器上所显示的所述用户界面向之外区域移动时，则将未在显示器上所显示的用户界面之外区域中的项目更新显示在显示器上的用 户界面中，且使所述选择器移动至更新的项目。
  14. 根据权利要求13所述的方法，其特征在于，确定所述选择器由显示器上所显示所述用户界面向之外区域移动时，具体包括：
    基于用户输入，确定当前所述选择器位于所述用户界面中边界位置的项目上，且收到的所述用户输入指示所述选择器将移动选择在显示器所显示用户界面边界之外的所述项目。
  15. 一种用户界面显示方法，其特征在于，包括：
    响应于显示一类项目的用户输入，确定预设数量的列中各列项目的高度，以及将获取的目标项目布局至所述各列项目的高度中高度最小的一列，以及控制显示器显示包括布局所述一类项目的用户界面；
    其中，所述一类项目包括多个项目，所述多个项目包括至少一个所述目标项目。
  16. 根据权利要求15所述的方法，其特征在于，所述用户界面中多个项目按照列方式进行排布，不按照行方式进行排布；其中，列的数量由显示器实际显示的页面宽度决定。
  17. 根据权利要求15所述的方法，其特征在于，所述用户界面中不同列的项目中，在沿项目的高度方向上存在交叉。
  18. 一种用户界面显示方法，其特征在于，包括：
    响应于显示一类项目的用户输入，将预设数量的列按照各列项目的高度从小到大进行排序，以及，将获取的所述预设数量的目标项目按照高度从大到小的顺序进行排序，以及，基于两次排序结果，将排序后的预设数量的目标项目依次布局至排序后的各列中，以及控制显示器显示包括布局所述一类项目的用 户界面；
    其中，所述一类项目包括多个项目，所述多个项目包括至少一个所述目标项目
  19. 根据权利要求18所述的方法，其特征在于，所述用户界面中显示的项目通过对获取的目标项目进行缩放得到。
PCT/CN2020/079178 2019-12-19 2020-03-13 用户界面显示方法及设备 WO2021120419A1 (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
US17/455,266 US20220078505A1 (en) 2019-12-19 2021-11-17 User interface display method and device

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201911317727.1 2019-12-19
CN201911317727.1A CN111064983B (zh) 2019-12-19 2019-12-19 显示设备

Related Child Applications (1)

Application Number Title Priority Date Filing Date
US17/455,266 Continuation US20220078505A1 (en) 2019-12-19 2021-11-17 User interface display method and device

Publications (1)

Publication Number Publication Date
WO2021120419A1 true WO2021120419A1 (zh) 2021-06-24

Family

ID=70302329

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2020/079178 WO2021120419A1 (zh) 2019-12-19 2020-03-13 用户界面显示方法及设备

Country Status (3)

Country Link
US (1) US20220078505A1 (zh)
CN (1) CN111064983B (zh)
WO (1) WO2021120419A1 (zh)

Families Citing this family (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111758114A (zh) * 2020-04-27 2020-10-09 青岛海信传媒网络技术有限公司 内容显示方法及显示设备
CN111629245B (zh) * 2020-05-29 2022-12-13 深圳Tcl数字技术有限公司 焦点控制方法、电视机及存储介质

Citations (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102662493A (zh) * 2012-03-12 2012-09-12 深圳Tcl新技术有限公司 智能终端定位鼠标光标的方法及智能终端
CN105095200A (zh) * 2014-04-16 2015-11-25 北大方正集团有限公司 以瀑布流方式显示图片的方法和设备
CN105871945A (zh) * 2015-01-19 2016-08-17 阿里巴巴集团控股有限公司 图片信息发送方法和装置、瀑布流布局方法和装置
CN106341717A (zh) * 2016-09-28 2017-01-18 天脉聚源(北京)传媒科技有限公司 一种光标移动方法及系统
CN109743605A (zh) * 2018-12-27 2019-05-10 百视通网络电视技术发展有限责任公司 一种基于机顶盒的高清电视界面交互方法、系统及机顶盒
CN109933323A (zh) * 2019-03-15 2019-06-25 山东云缦智能科技有限公司 一种设置用户界面的方法及装置
CN110058909A (zh) * 2019-02-26 2019-07-26 阿里巴巴集团控股有限公司 控件的布局方法、布局装置、服务器及可读存储介质
CN110187781A (zh) * 2019-05-30 2019-08-30 携程旅游信息技术（上海）有限公司 以瀑布流方式显示图片的方法、系统、设备和存储介质
US20190377465A1 (en) * 2015-02-17 2019-12-12 Microsoft Technology Licensing, Llc Control of Item Arrangement in a User Interface

Family Cites Families (14)

* Cited by examiner, † Cited by third party
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
KR20120075002A (ko) * 2010-12-28 2012-07-06 엘지전자 주식회사 애플리케이션 정보 표시 방법 및 그를 이용한 영상 표시 기기
JP5156861B2 (ja) * 2010-12-28 2013-03-06 シャープ株式会社 表示制御装置、テレビジョン受像機、表示制御方法、表示制御プログラムおよび記録媒体
JP5831265B2 (ja) * 2011-02-07 2015-12-09 株式会社Ｊｖｃケンウッド 番組表作成装置、番組表作成方法、及び番組表作成プログラム
US11847300B2 (en) * 2012-03-12 2023-12-19 Comcast Cable Communications, Llc Electronic information hierarchy
GB2526599A (en) * 2014-05-29 2015-12-02 Ibm Arranging components in a two-dimensional area
EP3126953A1 (en) * 2014-06-24 2017-02-08 Apple Inc. Column interface for navigating in a user interface
US10491960B2 (en) * 2014-11-10 2019-11-26 Sony Interactive Entertainment LLC Customizable electronic program guide
US9942615B1 (en) * 2017-04-20 2018-04-10 Rovi Guides, Inc. Systems and methods for presenting targeted metadata in display constrained environments
CN108874257B (zh) * 2017-05-08 2021-09-24 珠海金山办公软件有限公司 一种图片展示方法及装置
US10567829B2 (en) * 2017-06-19 2020-02-18 Google Llc Dynamically adjustable electronic program guide
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

Patent Citations (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102662493A (zh) * 2012-03-12 2012-09-12 深圳Tcl新技术有限公司 智能终端定位鼠标光标的方法及智能终端
CN105095200A (zh) * 2014-04-16 2015-11-25 北大方正集团有限公司 以瀑布流方式显示图片的方法和设备
CN105871945A (zh) * 2015-01-19 2016-08-17 阿里巴巴集团控股有限公司 图片信息发送方法和装置、瀑布流布局方法和装置
US20190377465A1 (en) * 2015-02-17 2019-12-12 Microsoft Technology Licensing, Llc Control of Item Arrangement in a User Interface
CN106341717A (zh) * 2016-09-28 2017-01-18 天脉聚源(北京)传媒科技有限公司 一种光标移动方法及系统
CN109743605A (zh) * 2018-12-27 2019-05-10 百视通网络电视技术发展有限责任公司 一种基于机顶盒的高清电视界面交互方法、系统及机顶盒
CN110058909A (zh) * 2019-02-26 2019-07-26 阿里巴巴集团控股有限公司 控件的布局方法、布局装置、服务器及可读存储介质
CN109933323A (zh) * 2019-03-15 2019-06-25 山东云缦智能科技有限公司 一种设置用户界面的方法及装置
CN110187781A (zh) * 2019-05-30 2019-08-30 携程旅游信息技术（上海）有限公司 以瀑布流方式显示图片的方法、系统、设备和存储介质

Also Published As

Publication number Publication date
CN111064983B (zh) 2021-05-28
US20220078505A1 (en) 2022-03-10
CN111064983A (zh) 2020-04-24

Similar Documents

Publication Publication Date Title
WO2021008127A1 (zh) 用户界面显示方法及显示设备
WO2021109434A1 (zh) 一种显示设备
WO2021114529A1 (zh) 用户界面展示方法及显示设备
WO2021147299A1 (zh) 一种内容显示方法及显示设备
WO2021051745A1 (zh) 一种显示方法及显示设备
WO2020207115A1 (zh) 一种提供菜单项的图形用户界面方法及显示设备
WO2021174663A1 (zh) 观看历史显示方法及显示设备
WO2021232506A1 (zh) 图像质量调节方法及显示设备
WO2021042680A1 (zh) 用户界面显示方法及显示设备
WO2020186863A1 (zh) 一种显示设备
WO2021212463A1 (zh) 一种显示设备及投屏方法
WO2021189712A1 (zh) 网页视频全屏播放切换小窗口播放的方法及显示设备
CN111726673B (zh) 一种频道切换方法及显示设备
CN111246309A (zh) 在显示设备中显示频道列表的方法及显示设备
WO2021134998A1 (zh) 功能设定方法及显示设备
US20220078505A1 (en) User interface display method and device
CN112565861A (zh) 一种显示设备
WO2021232914A1 (zh) 一种显示方法及显示设备
WO2021212667A1 (zh) 一种多媒资数据显示方法及显示设备
WO2021109450A1 (zh) Epg界面的展示方法及显示设备
CN113115088B (zh) 显示设备用户界面的控制方法及显示设备
WO2021174662A1 (zh) 显示设备以及操作指南的显示方法
WO2021109411A1 (zh) 文本类型转换方法及显示设备
CN111857502A (zh) 一种图像显示方法及显示设备
CN111596771A (zh) 显示设备和输入法中选择器的移动方法

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 20901343

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

32PN Ep: public notification in the ep bulletin as address of the adressee cannot be established

Free format text: NOTING OF LOSS OF RIGHTS PURSUANT TO RULE 112(1) EPC (EPO FORM 1205A DATED 04/11/2022)

122 Ep: pct application non-entry in european phase

Ref document number: 20901343

Country of ref document: EP

Kind code of ref document: A1