CN112533021A - 一种显示方法及显示设备 - Google Patents

一种显示方法及显示设备 Download PDF

Info

Publication number
CN112533021A
CN112533021A CN201910885580.XA CN201910885580A CN112533021A CN 112533021 A CN112533021 A CN 112533021A CN 201910885580 A CN201910885580 A CN 201910885580A CN 112533021 A CN112533021 A CN 112533021A
Authority
CN
China
Prior art keywords
thumbnail
display
picture
media object
layer
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN201910885580.XA
Other languages
English (en)
Other versions
CN112533021B (zh
Inventor
韩文博
刘兴瑞
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Vidaa Netherlands International Holdings BV
Original Assignee
Qingdao Hisense Media Network Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Qingdao Hisense Media Network Technology Co Ltd filed Critical Qingdao Hisense Media Network Technology Co Ltd
Priority to CN201910885580.XA priority Critical patent/CN112533021B/zh
Priority to PCT/CN2020/076697 priority patent/WO2021051745A1/zh
Publication of CN112533021A publication Critical patent/CN112533021A/zh
Priority to US17/484,123 priority patent/US11537280B2/en
Application granted granted Critical
Publication of CN112533021B publication Critical patent/CN112533021B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04NPICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/20Servers specifically adapted for the distribution of content, e.g. VOD servers; Operations thereof
    • H04N21/21Server components or server architectures
    • H04N21/222Secondary servers, e.g. proxy server, cable television Head-end
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06TIMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T3/00Geometric image transformation in the plane of the image
    • G06T3/40Scaling the whole image or part thereof
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06TIMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T3/00Geometric image transformation in the plane of the image
    • G06T3/60Rotation of a whole image or part thereof
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04NPICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/41Structure of client; Structure of client peripherals
    • H04N21/4104Peripherals receiving signals from specially adapted client devices
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04NPICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/41Structure of client; Structure of client peripherals
    • H04N21/422Input-only peripherals, i.e. input devices connected to specially adapted client devices, e.g. global positioning system [GPS]
    • H04N21/42204User interfaces specially adapted for controlling a client device through a remote control device; Remote control devices therefor
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04NPICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/43Processing 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/431Generation of visual interfaces for content selection or interaction; Content or additional data rendering
    • H04N21/4312Generation 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/4316Generation 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 displaying supplemental content in a region of the screen, e.g. an advertisement in a separate window
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04NPICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/43Processing 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/44Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream, rendering scenes according to MPEG-4 scene graphs
    • H04N21/4402Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream, rendering scenes according to MPEG-4 scene graphs involving reformatting operations of video signals for household redistribution, storage or real-time display
    • H04N21/440227Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream, rendering scenes according to MPEG-4 scene graphs involving reformatting operations of video signals for household redistribution, storage or real-time display by decomposing into layers, e.g. base layer and one or more enhancement layers
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04NPICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/43Processing 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/44Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream, rendering scenes according to MPEG-4 scene graphs
    • H04N21/4402Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream, rendering scenes according to MPEG-4 scene graphs involving reformatting operations of video signals for household redistribution, storage or real-time display
    • H04N21/440245Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream, rendering scenes according to MPEG-4 scene graphs involving reformatting operations of video signals for household redistribution, storage or real-time display the reformatting operation being performed only on part of the stream, e.g. a region of the image or a time segment
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04NPICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/43Processing 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/44Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream, rendering scenes according to MPEG-4 scene graphs
    • H04N21/4402Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream, rendering scenes according to MPEG-4 scene graphs involving reformatting operations of video signals for household redistribution, storage or real-time display
    • H04N21/440263Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream, rendering scenes according to MPEG-4 scene graphs involving reformatting operations of video signals for household redistribution, storage or real-time display by altering the spatial resolution, e.g. for displaying on a connected PDA
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04NPICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/43Processing 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/443OS processes, e.g. booting an STB, implementing a Java virtual machine in an STB or power management in an STB
    • H04N21/4438Window management, e.g. event handling following interaction with the user interface
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04NPICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/47End-user applications
    • H04N21/472End-user interface for requesting content, additional data or services; End-user interface for interacting with content, e.g. for content reservation or setting reminders, for requesting event notification, for manipulating displayed content
    • H04N21/4728End-user interface for requesting content, additional data or services; End-user interface for interacting with content, e.g. for content reservation or setting reminders, for requesting event notification, for manipulating displayed content for selecting a Region Of Interest [ROI], e.g. for requesting a higher resolution version of a selected region
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04NPICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/47End-user applications
    • H04N21/485End-user interface for client configuration
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04NPICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/80Generation or processing of content or additional data by content creator independently of the distribution process; Content per se
    • H04N21/85Assembly of content; Generation of multimedia applications
    • H04N21/858Linking data to content, e.g. by linking an URL to a video object, by creating a hotspot
    • H04N21/8586Linking data to content, e.g. by linking an URL to a video object, by creating a hotspot by using a URL
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F2203/00Indexing scheme relating to G06F3/00 - G06F3/048
    • G06F2203/048Indexing scheme relating to G06F3/048
    • G06F2203/04806Zoom, i.e. interaction techniques or interactors for controlling the zooming operation

Abstract

本申请公开了一种显示方法及显示设备。本申请中,响应于用于将所述媒体对象进行放大显示的用户输入,获取所述媒体对象的当前显示帧,并将所述媒体对象的当前显示帧的第一局部画面呈现在刷新后的用户界面上;刷新后的用户界面还包括缩略图展示窗口,其中,所述缩略图展示窗口浮于所述第一局部画面呈现,用于呈现所述媒体对象的当前显示帧的缩略图;所述缩略图的第一局部区域被标识,所述缩略图的第一局部区域在缩略图中的位置与所述媒体对象的当前显示帧的第一局部画面的位置相关联。

Description

一种显示方法及显示设备
技术领域
本申请涉及显示技术,尤其涉及一种显示方法及显示设备。
背景技术
当前,由于显示设备(比如智能电视)可以为用户提供诸如音频、视频、图片等的播放画面,受到用户的广泛关注。随着大数据与人工智能的发展,用户对显示设备的功能需求与日俱增。
为满足用户日益增长的需求,对于用户界面来说,目前采用HTML5等Web技术进行多媒体业务开发以更灵活的实现用户界面。
以智能电视为例,目前智能电视支持在播放图片时对图片进行放大的操作,并允许用户使用遥控器按键移动图片以显示其他放大区域的图片。
如何在对显示设备上显示的图片进行放大操作时提高用户感受,是目前需要解决的技术问题。
发明内容
本申请实施例提供一种显示方法及显示设备。
第一方面,提供一种显示设备,包括:
显示器,该显示器被配置为显示用户界面,其中,该用户界面用于呈现媒体对象;
与所述显示器通信的控制器,所述控制器被配置为执行呈现用户界面:
响应于用于将所述媒体对象进行放大显示的用户输入,获取所述媒体对象的当前显示帧,并将所述媒体对象的当前显示帧的第一局部画面呈现在刷新后的用户界面上;
刷新后的用户界面还包括缩略图展示窗口,其中,所述缩略图展示窗口浮于所述第一局部画面呈现,用于呈现所述媒体对象的当前显示帧的缩略图;所述缩略图的第一局部区域被标识,所述缩略图的第一局部区域在缩略图中的位置与所述媒体对象的当前显示帧的第一局部画面的位置相关联。
可选地,所述控制器还被配置为执行:响应于用于将所述媒体对象进行移动显示的用户输入,将所述媒体对象的当前显示帧的第二局部画面呈现在刷新后的用户界面上,其中,所述第二局部画面在所述当前显示帧上的位置,相比于所述第一局部画面在所述当前显示帧上的位置,在所述移动显示的方向上存在偏移;刷新后的用户界面上的所述缩略图展示窗口中,所述缩略图的第二局部区域被标识,所述缩略图的第二局部区域在缩略图中的位置与所述媒体对象的当前显示帧的第二局部画面的位置相关联。
可选地,所述控制器还被配置为执行:响应于用于将所述媒体对象进行旋转显示的用户输入,将所述媒体对象的当前显示帧的第三局部画面呈现在刷新后的用户界面上,其中,所述第三局部画面在所述当前显示帧上的位置,相比于所述第一局部画面在所述当前显示帧上的区域,在所述旋转显示的旋转方向上存在偏转;刷新后的用户界面上的所述缩略图展示窗口中,所述缩略图的第三局部区域被标识,所述缩略图的第三局部区域在缩略图中的位置与所述媒体对象的当前显示帧的第三局部画面的位置相关联。
可选地,所述缩略图展示窗口包括显示区域和被遮挡区域,所述显示区域用于显示所述缩略图的第一局部区域,所述被遮挡区域用于显示背景,所述背景为设定背景或被半透明遮挡的所述缩略图的其余区域。
可选地,所述缩略图展示窗口包括第一图层以及第二图层,所述第一图层被所述第二图层部分覆盖;所述第一图层显示所述媒体对象的缩略图,所述第一图层未被所述第二图层覆盖的区域对应于所述缩略图展示窗口中的被遮挡区域。
可选地,所述第二图层被设置为不透明或半透明。
可选地,所述控制器还被配置执行:响应于用于将所述媒体对象进行放大显示或移动显示的用户输入,确定执行所述用户输入后所述缩略图展示窗口中的显示区域的宽度、高度和位置中的至少一个;根据确定出的所述显示区域的宽度、高度和位置中的至少一个,更新所述第二图层的页面代码中用于描述所述显示区域的宽度、高度和位置的属性值中的至少一个;根据所述第二图层的页面代码,刷新显示所述缩略图展示窗口中的所述第二图层。
可选地,所述控制器还被配置执行:响应于用于将所述媒体对象进行旋转显示的用户输入,确定旋转后的缩略图的宽度和高度,使旋转后的缩略图的宽度适配所述缩略图展示窗口的高度;根据确定出的所述缩略图的宽度、高度,更新所述第一图层的页面代码中用于描述所述缩略图的宽度、高度的属性值;根据所述第一图层的页面代码,刷新显示所述缩略图展示窗口中的所述第一图层;所述确定执行所述指令后所述缩略图展示窗口中的显示区域的宽度、高度和位置中的至少一个,包括:确定旋转后的缩略图的宽度和高度,确定所述缩略图展示窗口中的显示区域的宽度和高度,使所述显示区域的宽度和高度的缩放比例等于所述缩略图的宽度和高度的缩放比例。
可选地,所述第二图层上还显示至少一个移动方向指示标识,所述至少一个移动方向指示标识用于指示所述媒体对象的可移动方向。
可选地,所述媒体对象为图片。
第二方面,提供一种显示方法,包括:
响应于用于将媒体对象进行放大显示的用户输入,获取所述媒体对象的当前显示帧,并将所述媒体对象的当前显示帧的第一局部画面呈现在刷新后的用户界面上;
刷新后的用户界面还包括缩略图展示窗口,其中,所述缩略图展示窗口浮于所述第一局部画面呈现,用于呈现所述媒体对象的当前显示帧的缩略图;所述缩略图的第一局部区域被标识,所述缩略图的第一局部区域在缩略图中的位置与所述媒体对象的当前显示帧的第一局部画面的位置相关联。
可选地,还包括:响应于用于将所述媒体对象进行移动显示的用户输入,将所述媒体对象的当前显示帧的第二局部画面呈现在刷新后的用户界面上,其中,所述第二局部画面在所述当前显示帧上的位置,相比于所述第一局部画面在所述当前显示帧上的位置,在所述移动显示的方向上存在偏移;刷新后的用户界面上的所述缩略图展示窗口中,所述缩略图的第二局部区域被标识,所述缩略图的第二局部区域在缩略图中的位置与所述媒体对象的当前显示帧的第二局部画面的位置相关联。
可选地,还包括:响应于用于将所述媒体对象进行旋转显示的用户输入,将所述媒体对象的当前显示帧的第三局部画面呈现在刷新后的用户界面上,其中,所述第三局部画面在所述当前显示帧上的位置,相比于所述第一局部画面在所述当前显示帧上的区域,在所述旋转显示的旋转方向上存在偏转;刷新后的用户界面上的所述缩略图展示窗口中,所述缩略图的第三局部区域被标识,所述缩略图的第三局部区域在缩略图中的位置与所述媒体对象的当前显示帧的第三局部画面的位置相关联。
可选地,所述缩略图展示窗口包括显示区域和被遮挡区域,所述显示区域用于显示所述缩略图的第一局部区域,所述被遮挡区域用于显示背景,所述背景为设定背景或被半透明遮挡的所述缩略图的其余区域。
可选地,所述缩略图展示窗口包括第一图层以及第二图层,所述第一图层被所述第二图层部分覆盖;所述第一图层显示所述媒体对象的缩略图,所述第一图层未被所述第二图层覆盖的区域对应于所述缩略图展示窗口中的被遮挡区域。
可选地,还包括:响应于用于将所述媒体对象进行放大显示或移动显示的用户输入,确定执行所述用户输入后所述缩略图展示窗口中的显示区域的宽度、高度和位置中的至少一个;根据确定出的所述显示区域的宽度、高度和位置中的至少一个,更新所述第二图层的页面代码中用于描述所述显示区域的宽度、高度和位置的属性值中的至少一个;根据所述第二图层的页面代码,刷新显示所述缩略图展示窗口中的所述第二图层。
可选地,还包括:响应于用于将所述媒体对象进行旋转显示的用户输入,确定旋转后的缩略图的宽度和高度,使旋转后的缩略图的宽度适配所述缩略图展示窗口的高度;根据确定出的所述缩略图的宽度、高度,更新所述第一图层的页面代码中用于描述所述缩略图的宽度、高度的属性值;根据所述第一图层的页面代码,刷新显示所述缩略图展示窗口中的所述第一图层;所述确定执行所述指令后所述缩略图展示窗口中的显示区域的宽度、高度和位置中的至少一个,包括:确定旋转后的缩略图的宽度和高度,确定所述缩略图展示窗口中的显示区域的宽度和高度,使所述显示区域的宽度和高度的缩放比例等于所述缩略图的宽度和高度的缩放比例。
第三方面,提供一种计算机可读的非易失性存储介质,其上存储有计算机指令,所述计算机指令被处理器执行时实现如上述第二方面中任一项所述的方法。
附图说明
为了更清楚地说明本申请实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍,显而易见地,下面描述中的附图是本申请的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动性的前提下,还可以根据这些附图获得其他的附图。
图1中示例性示出了根据实施例中显示设备与控制装置之间操作场景的示意图;
图2中示例性示出了根据实施例中控制装置100的硬件配置框图;
图3中示例性示出了根据实施例中显示设备200的硬件配置框图;
图4中示例性示出了根据实施例中的显示设备200的操作系统架构示意图;
图5中示例性示出了根据示例性实施例中显示设备的功能配置示意图;
图6示例性示出了根据示例性实施例中显示设备200中用户界面的示意图;
图7a示例性地示出了根据示例性实施例中用于对图片进行显示设置的菜单的示意图;
图7b示例性地示出了根据示例性实施例中对图片进行放大操作后的用户界面示意图;
图8a示例性地示出了根据示例性实施例中缩略图展示窗口包含的两个区域的示意图;
图8b示例性地示出了根据示例性实施例中缩略图展示窗口的两个图层的示意图;
图9示例性示出了根据本申请实施例的获取缩略图的流程;
图10示例性地示出了根据示例性实施例中缩略图展示窗口中的移动方向指示标识的示意图;
图11、图12示例性地示出了根据示例性实施例中一种图片放大显示的流程示意图;
图13示例性地示出了根据示例性实施例中对图片进行旋转操作后的用户界面示意图;
图14示例性地示出了根据示例性实施例中一种图片旋转显示的流程示意图。
具体实施方式
为使本申请示例性实施例的目的、技术方案和优点更加清楚,下面将结合本申请示例性实施例中的附图,对本申请示例性实施例中的技术方案进行清楚、完整地描述,显然,所描述的示例性实施例仅是本申请一部分实施例,而不是全部的实施例。
目前智能电视支持在播放图片时对图片进行放大的功能,并允许用户使用遥控器按键移动图片以显示其他放大区域的图片的功能,但图片放大后会超出显示屏的显示区域,导致用户无法看到整张图片以及当前显示屏展示的放大区域在整张图片中的具体位置。
为克服上述缺陷,本申请公开了一种显示方法及显示设备,用以在显示设备对媒体对象(比如图片)进行放大显示时,在显示屏上显示被放大的媒体对象的部分区域的同时,通过缩略图展示窗口,以缩略图的形式显示当前显示的放大区域在媒体对象的整个区域中的具体位置。
其中,所述媒体对象可以是图片、视频或动画,本申请对此不做限制。
下面首先结合附图对本申请所涉及的概念进行说明。在此需要指出的是,以下对各个概念的说明,仅为了使本申请的内容更加容易理解,并不表示对本申请保护范围的限定。
本申请各实施例中使用的术语“模块”,可以是指任何已知或后来开发的硬件、软件、固件、人工智能、模糊逻辑或硬件或/和软件代码的组合,能够执行与该元件相关的功能。
本申请各实施例中使用的术语“遥控器”,是指电子设备(如本申请中公开的显示设备)的一个组件,该组件通常可在较短的距离范围内无线控制电子设备。该组件一般可以使用红外线、射频(radio frequency,RF)信号、蓝牙等通信方式中的至少一种与电子设备连接,也可以包括WiFi、无线通用串行总线(universal serial bus,USB)、蓝牙、动作传感器等功能模块。例如:手持式触摸遥控器,是以触摸屏中用户界面取代一般遥控装置中的大部分物理内置硬键。
本申请各实施例中使用的术语“手势”,是指用户通过一种手型的变化或手部运动等动作,用于表达预期想法、动作、目的或结果的用户行为。
本申请各实施例中使用的术语“硬件系统”,可以是指由集成电路(integratedcircuit,IC)、印刷电路板(printed circuit board,PCB)等机械、光、电、磁器件构成的具有计算、控制、存储、输入和输出功能的实体部件。在本申请各个实施例中,硬件系统通常也会被称为主板(motherboard)或芯片。
HTML技术全称为超文本标记语言(HyperText Markup Language),是一种用于创建网页的标准标记语言,通过标记标签来描述网页,HTML标签是由<>包围的关键词构成,以说明文字、图形、动画、声音、表格、链接等,Web浏览器会读取HTML文档,解释文档内标签的内容,并以网页的形式显示出来。
CSS技术全称为层叠样式表(Cascading Style Sheets),是一种用来表现HTML文件样式的计算机语言,可以用来定义样式结构如字体、颜色、位置等的语言。CSS样式可以直接存储与HTML网页或者单独的样式文件中,实现对网页中样式的控制。
JavaScript是一种应用于Web网页编程的语言,可以插入HTML页面并由浏览器解释执行,其中网页或者基于Web技术的应用等的交互逻辑都是通过JavaScript实现。JavaScript可以通过浏览器业务支撑层,封装JavaScript扩展接口,实现与底层操作系统平台的通信,调用底层播放器,实现用户播放媒体文件的功能。
Vue框架是一种用于构建用户界面的Web应用框架,基于HTML、CSS、JavaScript等技术实现更加轻量和快速的业务开发,可以容易地搭建网页应用,并具备更加丰富的功能,如可以监测页面数据变化,并根据页面数据变化动态地改变页面显示。通过Vue框架的使用可以满足显示设备UI业务更加复杂的需求和功能。
图1示例性示出了根据实施例中显示设备与控制装置之间操作场景的示意图。如图1所示,用户可通过控制装置(100A,100B)来操作显示设备200。
其中,控制装置可以是遥控器100A,其可与显示设备200之间通过红外协议通信、蓝牙协议通信、紫蜂(ZigBee)协议通信或其他短距离通信方式进行通信,用于通过无线或其他有线方式来控制显示设备200。用户可以通过遥控器上的按键、语音输入、控制面板输入等输入用户指令,来控制显示设备200。如:用户可以通过遥控器上的音量加减键、频道控制键、上/下/左/右的移动按键、语音输入按键、菜单键、开关机按键等输入相应控制指令,来实现控制显示设备200的功能。
控制装置也可以是智能设备,如移动终端100B、平板电脑、计算机、笔记本电脑等,其可以通过本地网(local area network,LAN)、广域网(wide area network,WAN)、无线局域网(wireless local area network,WLAN)或其他网络与显示设备200之间通信,并通过与显示设备200相应的应用程序实现对显示设备200的控制。例如,使用在智能设备上运行的应用程序控制显示设备200。该应用程序可以在与智能设备关联的屏幕上通过直观的用户界面(user interface,UI)为用户提供各种控制。
示例的,移动终端100B与显示设备200均可安装软件应用,从而可通过网络通信协议实现二者之间的连接通信,进而实现一对一控制操作的和数据通信的目的。如:可以使移动终端100B与显示设备200建立控制指令协议,将遥控控制键盘同步到移动终端100B上,通过控制移动终端100B上的用户界面,实现控制显示设备200的功能;也可以将移动终端100B上显示的音视频内容传输到显示设备200上,实现同步显示功能。
如图1所示,显示设备200还可与服务器300通过多种通信方式进行数据通信。在本申请各个实施例中,可允许显示设备200通过局域网、无线局域网或其他网络与服务器300进行通信连接。服务器300可以向显示设备200提供各种内容和互动。
示例的,显示设备200通过发送和接收信息,以及电子节目指南(electronicprogram guide,EPG)互动,接收软件程序更新,或访问远程储存的数字媒体库。服务器300可以是一组,也可以是多组,可以是一类或多类服务器。通过服务器300提供视频点播和广告服务等其他网络服务内容。
显示设备200,可以是液晶显示器、有机发光二极管(organic light emittingdiode,OLED)显示器、投影显示设备、智能电视。具体显示设备类型,尺寸大小和分辨率等不作限定,本领技术人员可以理解的是,显示设备200可以根据需要做性能和配置上的一些改变。在一些实施例中,显示设备可以不具备广播接收电视功能。
显示设备200还可以附加提供计算机支持功能的智能网络电视功能。示例的包括:网络电视、智能电视、互联网协议电视(IPTV)等。
图2中示例性示出了根据示例性实施例中控制装置100的配置框图,该控制装置100可以是遥控器100A或移动终端100B。如图2所示,控制装置100包括控制器110、通信器130、用户输入/输出接口140、存储器190、供电电源180。
控制装置100被配置为可控制显示设备200,以及可接收用户的输入操作指令,且将操作指令转换为显示设备200可识别和响应的指令,起到用户与显示设备200之间交互中介作用。如:用户通过操作控制装置100上频道加减键,显示设备200响应频道加减的操作。
在一些实施例中,控制装置100可是一种智能设备。如:控制装置100可根据用户需求安装控制显示设备200的各种应用。
在一些实施例中,如图1所示,移动终端100B或其他智能电子设备,可在安装操控显示设备200的应用之后,起到控制装置100类似功能。如:用户可以通过安装应用,在移动终端100B或其他智能电子设备上可提供的图形用户界面的各种功能键或虚拟按钮,以实现控制装置100实体按键的功能。
控制器110包括处理器112、RAM113和ROM114、通信接口以及通信总线。控制器110用于控制控制装置100的运行和操作,以及内部各部件之间通信协作以及外部和内部的数据处理功能。
通信器130在控制器110的控制下,实现与显示设备200之间控制信号和数据信号的通信。如:将接收到的用户输入信号发送至显示设备200上。通信器130可包括WiFi模块131、蓝牙模块132、近场通信(near field communication,NFC)模块133等通信模块中至少一种。
用户输入/输出接口140,其中,输入接口包括麦克风141、触摸板142、传感器143、按键144等输入接口中至少一者。如:用户可以通过语音、触摸、手势、按压等动作实现用户指令输入功能,输入接口通过将接收的模拟信号转换为数字信号,以及数字信号转换为相应指令信号,发送至显示设备200。
输出接口包括将接收的用户指令发送至显示设备200的接口。在一些实施例中,可以是红外接口,也可以是射频接口。如:红外信号接口时,需要将用户输入指令按照红外控制协议转化为红外控制信号,经红外发送模块进行发送至显示设备200。再如:射频信号接口时,需将用户输入指令转化为数字信号,然后按照射频控制信号调制协议进行调制后,由射频发送端子发送至显示设备200。
在一些实施例中,控制装置100包括通信器130和输出接口中至少一者。控制装置100中配置通信器130,如:WiFi、蓝牙、NFC等模块,可将用户输入指令通过WiFi协议、或蓝牙协议、或NFC协议编码,发送至显示设备200。
存储器190,用于在控制器110的控制下存储驱动和控制该控制装置100的各种运行程序、数据和应用。存储器190,可以存储用户输入的各类控制信号指令。
供电电源180,用于在控制器110的控制下为控制装置100各元件提供运行电力支持。可以电池及相关控制电路。
图3示例性示出了根据示例性实施例中显示设备200中硬件系统的硬件配置框图,该硬件配置框图以单硬件系统架构为例描述。
需要说明的是图4仅仅是对本申请单硬件系统架构的一个示例性说明,并不表示对本申请的限定。在实际应用中,单件系统均可根据需要包含更多或更少的硬件或接口。
如图3所示,显示设备200的硬件系统可以包括N芯片,以及通过各类接口与N芯片相连接的模块。
N芯片可以包括调谐解调器220、通信器230、外部装置接口250、控制器210、存储器290、用户输入接口、视频处理器260-1、音频处理器260-2、显示器280、音频输出接口272、供电电源。在其他实施例中N芯片也可以包括更多或更少的模块。
其中,调谐解调器220,用于通过有线或无线方式接收广播电视信号,进行放大、混频和谐振等调制解调处理,从而从多个无线或有线广播电视信号中解调出用户所选择电视频道的频率中所携带的音视频信号,以及附加信息(例如EPG数据信号)。根据电视信号广播制式不同,调谐解调器220的信号来源途径可以有很多种,诸如:地面广播、有线广播、卫星广播或互联网广播等;以及根据调制类型不同,所述信号的调制方式可以数字调制方式,也可以模拟调制方式;以及根据接收电视信号种类不同,调谐解调器220可以解调模拟信号和/或数字信号。
调谐解调器220,还用于根据用户的选择,以及由控制器210的控制,响应用户选择的电视频道频率以及该频率所携带的电视信号。
在其他一些示例性实施例中,调谐解调器220也可在外置设备中,如外置机顶盒等。这样,机顶盒通过调制解调后输出电视音视频信号,经过外置装置接口250输入至显示设备200中。
通信器230是用于根据各种通信协议类型与外部设备或外部服务器进行通信的组件。例如:通信器230可以包括WiFi模块231,蓝牙通信协议模块232,有线以太网通信协议模块233,及红外通信协议模块等其他网络通信协议模块或近场通信协议模块。
显示设备200可以通过通信器230与外部控制设备或内容提供设备之间建立控制信号和数据信号的连接。例如,通信器230可根据控制器的控制接收遥控器100的控制信号。
外部装置接口250,是提供N芯片控制器210和A芯片及外部其他设备间数据传输的组件。外部装置接口可按照有线和/或无线方式与诸如机顶盒、游戏装置、笔记本电脑等的外部设备连接,可接收外部设备的诸如视频信号(例如运动图像)、音频信号(例如音乐)、附加信息(例如EPG)等数据。
其中,外部装置接口250可以包括:高清多媒体接口(HDMI)端子251、复合视频消隐同步(CVBS)端子252、模拟或数字分量端子253、通用串行总线(USB)端子254、红绿蓝(RGB)端子(图中未示出)等任一个或多个。本申请不对外部装置接口的数量和类型进行限制。
控制器210,通过运行存储在存储器290上的各种软件控制程序(如操作系统和/或各种应用程序),来控制显示设备200的工作和响应用户的操作。
如图3所示,控制器210包括只读存储器ROM213、随机存取存储器RAM214、图形处理器216、CPU处理器212、通信接口(218-1,218-2,……,218-n)、以及通信总线。其中,RAM213和ROM214以及图形处理器216、CPU处理器212、通信接口218通过总线相连接。
ROM213,用于存储各种系统启动的指令。如在收到开机信号时,显示设备200电源开始启动,CPU处理器212运行ROM中系统启动指令,将存储在存储器290的操作系统拷贝至RAM214中,以开始运行启动操作系统。当操作系统启动完成后,CPU处理器212再将存储器290中各种应用程序拷贝至RAM214中,然后开始运行启动各种应用程序。
图形处理器216,用于产生各种图形对象,如:图标、操作菜单、以及用户输入指令显示图形等。包括运算器,通过接收用户输入各种交互指令进行运算,根据显示属性显示各种对象。以及包括渲染器,产生基于运算器得到的各种对象,进行渲染的结果显示在显示器280上。
CPU处理器212,用于执行存储在存储器290中操作系统和应用程序指令。以及根据接收外部输入的各种交互指令,来执行各种应用程序、数据和内容,以便最终显示和播放各种音视频内容。
在一些示例性实施例中,CPU处理器212,可以包括多个处理器。所述多个处理器中可包括一个主处理器以及多个或一个子处理器。主处理器,用于在预加电模式中执行显示设备200一些操作,和/或在正常模式下显示画面的操作。多个或一个子处理器,用于执行在待机模式等状态下的一种操作。
通信接口,可包括第一接口218-1到第n接口218-n。这些接口可以是经由网络被连接到外部设备的网络接口。
控制器210可以控制显示设备200的整体操作。例如:响应于接收到用于选择在显示器280上显示UI对象的用户命令,控制器210便可以执行与由用户命令选择的对象有关的操作。
其中,所述对象可以是可选对象中的任何一个,例如超链接或图标。与所选择的对象有关操作,例如:显示连接到超链接页面、文档、图像等操作,或者执行与图标相对应程序的操作。用于选择UI对象的用户命令,可以是通过连接到显示设备200的各种输入装置(例如,鼠标、键盘、触摸板等)输入命令或者与由用户说出语音相对应的语音命令。
存储器290,包括存储用于驱动和控制显示设备200的各种软件模块。如:存储器290中存储的各种软件模块,包括:基础模块、检测模块、通信模块、显示控制模块、浏览器模块和各种服务模块等。
其中,基础模块是用于显示设备200中各个硬件之间信号通信、并向上层模块发送处理和控制信号的底层软件模块。检测模块是用于从各种传感器或用户输入接口中收集各种信息,并进行数模转换以及分析管理的管理模块。
例如:语音识别模块中包括语音解析模块和语音指令数据库模块。显示控制模块是用于控制显示器280进行显示图像内容的模块,可以用于播放多媒体图像内容和UI界面等信息。通信模块,是用于与外部设备之间进行控制和数据通信的模块。浏览器模块,是用于执行浏览服务器之间数据通信的模块。服务模块,是用于提供各种服务以及各类应用程序在内的模块。
同时,存储器290还用于存储接收外部数据和用户数据、各种用户界面中各个项目的图像以及焦点对象的视觉效果图等。
用户输入接口,用于将用户的输入信号发送给控制器210,或者,将从控制器输出的信号传送给用户。示例性的,控制装置(例如移动终端或遥控器)可将用户输入的诸如电源开关信号、频道选择信号、音量调节信号等输入信号发送至用户输入接口,再由用户输入接口转送至控制器;或者,控制装置可接收经控制器处理从用户输入接口输出的音频、视频或数据等输出信号,并且显示接收的输出信号或将接收的输出信号输出为音频或振动形式。
在一些实施例中,用户可在显示器280上显示的图形用户界面(GUI)输入用户命令,则用户输入接口通过图形用户界面(GUI)接收用户输入命令。或者,用户可通过输入特定的声音或手势进行输入用户命令,则用户输入接口通过传感器识别出声音或手势,来接收用户输入命令。
视频处理器260-1,用于接收视频信号,根据输入信号的标准编解码协议,进行解压缩、解码、缩放、降噪、帧率转换、分辨率转换、图像合成等视频数据处理,可得到直接在显示器280上显示或播放的视频信号。
示例的,视频处理器260-1,包括解复用模块、视频解码模块、图像合成模块、帧率转换模块、显示格式化模块等。
其中,解复用模块,用于对输入音视频数据流进行解复用处理,如输入MPEG-2格式信号,则解复用模块进行解复用成视频信号和音频信号等。
视频解码模块,用于对解复用后的视频信号进行处理,包括解码和缩放处理等。
图像合成模块,如图像合成器,其用于将图形生成器根据用户输入或自身生成的GUI信号,与缩放处理后视频图像进行叠加混合处理,以生成可供显示的图像信号。
帧率转换模块,用于对输入视频的帧率进行转换,如将输入的24Hz、25Hz、30Hz、60Hz视频的帧率转换为60Hz、120Hz或240Hz的帧率,其中,输入帧率可以与源视频流有关,输出帧率可以与显示器的更新率有关。输入有通常的格式采用如插帧方式实现。
显示格式化模块,用于将帧率转换模块输出的信号,改变为符合诸如显示器显示格式的信号,如将帧率转换模块输出的信号进行格式转换以输出RGB数据信号。
显示器280,用于接收源自视频处理器260-1输入的图像信号,进行显示视频内容和图像以及菜单操控界面。显示器280包括用于呈现画面的显示器组件以及驱动图像显示的驱动组件。显示视频内容,可以来自调谐解调器220接收的广播信号中的视频,也可以来自通信器或外部设备接口输入的视频内容。显示器280,同时显示显示设备200中产生且用于控制显示设备200的用户操控界面UI。
以及,根据显示器280类型不同,还包括用于驱动显示的驱动组件。或者,倘若显示器280为一种投影显示器,还可以包括一种投影装置和投影屏幕。
音频处理器260-2,用于接收音频信号,根据输入信号的标准编解码协议,进行解压缩和解码,以及降噪、数模转换和放大处理等音频数据处理,得到可以在扬声器272中播放的音频信号。
音频输出接口270,用于在控制器210的控制下接收音频处理器260-2输出的音频信号,音频输出接口可包括扬声器272,或输出至外接设备的发生装置的外接音响输出端子274,如:外接音响端子或耳机输出端子等。
在其他一些示例性实施例中,视频处理器260-1可以包括一个或多个芯片组成。音频处理器260-2,也可以包括一个或多个芯片组成。
以及,在其他一些示例性实施例中,视频处理器260-1和音频处理器260-2,可以为单独的芯片,也可以与控制器210一起集成在一个或多个芯片中。
供电电源,用于在控制器210控制下,将外部电源输入的电力为显示设备200提供电源供电支持。供电电源可以包括安装于显示设备200内部的内置电源电路,也可以是安装在显示设备200外部的电源,如在显示设备200中提供外接电源的电源接口。
需要说明的是,上述图3所示的显示设备200的硬件系统架构,是以单硬件系统架构为例来描述的,本申请实施例也可以应用于具有多个硬件系统的显示设备。
图4中示例性示出了根据实施例中的显示设备200的操作系统架构示意图。
如图4所示,以Android系统为例,显示设备200的操作系统架构主要分为三个层级,从底层到上层分别为平台层、业务支撑层和应用层。平台层主要为Linux内核以及各种硬件驱动;业务支撑层主要包括中间件,用于基于Linux内核和硬件驱动对上层业务进行支撑与维护,提供用户界面(user interface,UI)运行的浏览器环境,显示设备启动后会启动浏览器进程,并通过图形引擎等渲染UI页面;UI位于应用层,负责业务功能的展现,通过浏览器支持的Web技术等进行图形的绘制以及功能的实现。
图5中示例性示出了根据示例性实施例中显示设备的功能配置示意图。
如图5所示,存储器290用于存储操作系统、应用程序、内容和用户数据等,在控制器210的控制下执行驱动显示设备200的系统运行以及响应用户的各种操作。存储器290可以包括易失性和/或非易失性存储器。
存储器290,具体用于存储驱动显示设备200中控制器210的运行程序,以及存储显示设备200内置各种应用程序,以及用户从外部设备下载的各种应用程序、以及与应用程序相关的各种图形用户界面,以及与图形用户界面相关的各种对象,用户数据信息,以及各种支持应用程序的内部数据。存储器290用于存储操作系统(OS)内核、中间件和应用等系统软件,以及存储输入的视频数据和音频数据、及其他用户数据。
存储器290,具体用于存储视频处理器260-1和音频处理器260-2、显示器280、通信接口230、调谐解调器220、输入/输出接口等驱动程序和相关数据。
在一些实施例中,存储器290可以存储软件和/或程序,用于表示操作系统(OS)的软件程序包括,例如:内核、中间件、应用编程接口(API)和/或应用程序。示例性的,内核可控制或管理系统资源,或其它程序所实施的功能(如所述中间件、API或应用程序),以及内核可以提供接口,以允许中间件和API,或应用访问控制器,以实现控制或管理系统资源。
示例的,存储器290,包括广播接收模块2901、频道控制模块2902、音量控制模块2903、图像控制模块2904、显示控制模块2905、音频控制模块2906、外部指令识别模块2907(包括语音识别模块2907-2,按键指令识别模块2907-3)、通信控制模块2908、光接收模块、电力控制模块2910、操作系统2911、以及其他应用程序2912、浏览器模块等等。控制器210通过运行存储器290中各种软件程序,来执行诸如:广播电视信号接收解调功能、电视频道选择控制功能、音量选择控制功能、图像控制功能、显示控制功能、音频控制功能、外部指令识别功能、通信控制功能、光信号接收功能、电力控制功能、支持各种功能的软件操控平台、以及浏览器功能等各类功能。
外部指令识别模块2907可识别不同的指令。外部指令识别模块2907可包括语音识别模块2907-2,图形识别模块2907-2内存储有语音数据库,语音接收设备等接收到外界的语音指令或时,与语音数据库中的指令进行对应关系,以对显示设备作出指令控制。同样的,遥控器等控制装置100与显示设备200中的芯片连接,由显示设备200中的按键指令识别模块与控制装置100进行指令交互。
图6中示例性示出了根据示例性实施例中显示设备200中用户界面的示意图。如图6所示,用户界面包括多个视图显示区,示例的,第一视图显示区201和播放画面202,其中,播放画面包括布局一个或多个不同项目。以及用户界面中还包括指示项目被选择的选择器,可通过用户输入而移动选择器的位置,以改变选择不同的项目。
需要说明的是,多个视图显示区可以呈现不同层级的显示画面。如,第一视图显示区可呈现媒体对象的缩略图,第二视图显示区可呈现媒体对象(如,图片、视频等)。
可选的,不同视图显示区的呈现存在优先级区别,优先级不同的视图显示区之间,视图显示区的显示优先级不同。如,系统层的优先级高于应用层的优先级,当用户在应用层使用获取选择器和画面切换时,不遮挡系统层的视图显示区的画面展示;以及,根据用户的选择使应用层的视图显示区的大小和位置发生变化时,系统层的视图显示区的大小和位置不受影响。
也可以呈现相同层级的显示画面,此时,选择器可以在第一视图显示区和第二视图显示区之间做切换,以及当第一视图显示区的大小和位置发生变化时,第二视图显示区的大小和位置可随及发生改变。
以媒体对象为图片作为例子,本申请实施例中,显示设备的显示屏显示有图片,当用户通过遥控器等控制装置或通过其他用户输入方式(比如声控方式或手势方式)发送对该图片进行显示设置的指令后,作为响应,显示设备根据该指令将该图片进行相应设置后显示,由于图片放大后的尺寸超出显示屏中图片显示区域的尺寸,因此显示屏中只能显示被放大后的图片的局部画面,此种情况下,可在显示屏中显示缩略图展示窗口,该缩略图展示窗口的尺寸较小,可以将整张图片以及显示屏的图片显示区域中显示的局部画面以缩略图的方式展现给用户,能够使用户清楚地看到当前显示屏上显示的该图片的局部画面在整张图片中位置。
其中,所述进行显示设置的指令可以是对图片进行放大显示的指令,也可以是对放大后的图片进行移动的指令,或者还可以是对放大后的图片进行旋转的指令,本申请实施例对此不做限制。
以媒体对象为图片作为例子,在一些实施例中,用户可通过遥控器调出用于对图片进行显示设置的菜单,根据该菜单提供的图片显示设置功能,对图片进行放大等显示控制。
需要说明的是,用于触发对媒体对象(如图片)进行放大显示的用户输入,具体可以是用户通过遥控器发送的指令,也可以是采用其他方式发送的指令,比如声控方式,本申请实施例对此不做限制。
图7a示例性地示出了用于对图片进行显示设置的菜单的示意图。
当前显示设备的显示屏的图片显示区域400中有一张图片410。其中,图片显示区域可以是显示设备的整个屏幕显示区域,也可能小于整个屏幕显示区域。比如,当允许用户采用不同宽高比例进行显示时,根据用户选择的宽高比例,该图片显示区域的宽度可能窄于整个屏幕显示区域的宽度。本实施例中,以图片显示区域的大小与显示设备的屏幕显示区域相等为例描述。
用户按下遥控器上的“菜单键”后,在该显示屏上出现菜单41。
菜单41中包括以下功能选项:
放大411,该功能选项用于实现对图片进行放大显示的功能;
旋转412,该功能选项用于实现对图片进行旋转显示的功能。
可选地,除上述功能选项以外,还可以进一步包括其他功能选项,比如可包括用于实现幻灯片显示效果的功能选项,该功能选项用于实现以幻灯片方式播放图片的功能。
当用户通过遥控器选择“放大411”功能选项后,弹出该功能选项的二级菜单42,该二级菜单42中包括以下功能选项:
适配显示421,该功能选项用于实现以图片的大小来适配显示屏的图片显示区域的大小的效果,当用户选择该功能选项后,整张图片可被显示于图片显示区域;
原图显示422,该功能选项用于实现以图片的实际分辨率来显示该图片;
200%放大423,该功能选项用于实现将图片放大200%进行显示的功能;
300%放大424,该功能选项用于实现将图片放大300%进行显示的功能;
400%放大425,该功能选项用于实现将图片放大400%进行显示的功能。
当用户通过遥控器选择“旋转412”功能选项后,弹出该功能选项的二级菜单(未在图中示出),该二级菜单中包括以下功能选项:
向右旋转90度:该功能选项用于实现将图片向右旋转90度进行显示的功能;
向左旋转90度:该功能选项用于实现将图片向左旋转90度进行显示的功能。
需要说明的是,上述菜单中的功能选项的数量、实现的功能等仅为举例,实际应用中可不受上述所列举的功能选项的限制。
还需要说明的是,通过菜单的方式向显示设备发送对图片进行显示设置的指令仅为一种示例,在实际应用中,还可以通过其他方式向显示设备发送用于实现对显示屏中的图片进行显示设置的指令,比如,在一些实施例中,用户可以通过相应的手势向显示设备发送对图片进行显示设置的指令,在另一些实施例中,用户可发出语音指令,显示设备通过语音识别可获得对图片进行显示设置的指令,在此不再一一列举。
当用户通过遥控器选择“200%放大423”功能选项后,响应于该用于将图片进行放大显示的用户输入,获取该图片的当前显示帧,并将该图片的当前显示帧的第一局部画面呈现在刷新后的用户界面上。刷新后的用户界面中还包括缩略图展示窗口,其中,所述缩略图展示窗口浮于第一局部画面呈现,用于呈现该图片的当前显示帧的缩略图;所述缩略图的第一局部区域被标识,所述缩略图的第一局部区域在缩略图中的位置与该图片的当前显示帧的第一局部画面的位置相关联。
具体地,显示设备的显示屏可如图7b所示。
如图7b所示,当用户选择“200%放大423”功能选项后,图片410被放大,由于被放大后的图片的尺寸超出图片显示区域400,则在图片显示区域400显示被放大后的图片的局部画面420(即第一局部画面),并且缩略图展示窗口500被显示在显示屏中。
可选地,缩略图展示窗口可覆盖图片显示区域的部分区域,比如如图7b所示,缩略图展示窗口500与图片显示区域400重叠且位于图片显示区域的右下角。在其他一些实施例中,图片显示区域的尺寸小于显示屏显示区域的尺寸,这样,显示屏显示区域可包括图片显示区域以及用于显示其他信息的区域,这种情况下,缩略图展示窗口可位于该用于显示其他信息的区域内,即与图片显示区域不重叠。
可选地,缩略图展示窗口的尺寸较小,这样,当缩略图展示窗口与图片显示区域重叠布局时,可以减小缩略图展示窗口对图片显示区域中显示的图片的影响。
如图7b所示,缩略图展示窗口500中显示图片410的缩略图430,该缩略图的局部区域440(即第一局部区域)被标识。缩略图的局部区域440(第一局部区域)在缩略图中的位置与该图片的局部画面420(第一局部画面)的位置相关联。具体地,该局部区域440相对于缩略图430的大小和位置,对应于图片410被放大后的局部画面420相对于图片410被放大后的整个画面的大小和位置。其中,图片410的缩略图430可以是对图片410进行等比例缩小得到的。
缩略图展示窗口500中包括两个区域:显示区域501和被遮挡区域502,如图8a所示。显示区域501用于显示图片410的缩略图的局部区域440,被遮挡区域502显示背景色或背景图片,该背景色或背景图片可以被设置为不透明或半透明。如果该背景色被设置为半透明,则被遮挡区域502显示图片410的缩略图430中除显示区域501以外的其余画面与该半透明的背景色合成的效果。
为实现缩略图展示窗口500的显示效果,本申请实施例中,如图8b所示,缩略图展示窗口500包括第一图层510以及第二图层520,即可通过第一图层510和第二图层520的叠加效果来呈现缩略图展示窗口500的呈现效果。第一图层510显示图片410的缩略图430,第二图层520为部分镂空的图层,该图层部分覆盖第一图层510,其中,未覆盖区域对应于缩略图展示窗口中的显示区域501,用于显示图片缩略图的局部区域440,覆盖区域对应于缩略图展示窗口中的被遮挡区域,用于显示背景色或背景图片。
可选地,所述背景可以是半透明的背景,从而实现如图8a所示的显示效果。在另一些实施例中,所述背景也可以是不透明的背景。
在本申请的一些实施例中,缩略图展示窗口500中的第一图层510可以通过HTML标签语言的<div>标签来实现,具体可在该标签中使用CSS的背景图片(background-image)属性来实现背景图片的显示。具体来说,通过闭合的<div></div>标签来实现缩略图展示窗口中的缩略图430的显示,通过style使用CSS属性来设置该缩略图的宽带、高度以及URL地址,在显示设备中,运行的浏览器读取到此标签后,可在UI层中解析该标签,并进行用户界面渲染,从而在缩略图展示窗口500中的第一图层510上显示图片缩略图。
本申请的一些实施例中,缩略图需要通过底层播放器获取,其具体的实现方式为:底层播放器封装JavaScipt扩展接口,该接口的作用是播放器和显示设备的UI层通过浏览器的消息分发模块进行通信,通过易于UI层使用并且符合浏览器Web技术的方式实现UI层和底层播放器的消息传递,其中主要包含UI层、浏览器通信层、播放器中间件、底层播放器。
图9示例性示出了根据本申请实施例的获取缩略图的流程。如图9所示,该流程可包括:
901:UI调用JavaScript扩展接口,以通过浏览器平台向底层播放器传递要获取缩略图的消息以及当前播放器播放的图片地址URL。
902:浏览器平台收到消息后,通过消息分发模块,将UI发送的消息传递给播放器中间件。
903:中间件收到消息后,从播放器图层上抓取等比例缩放的图片,同时在指定目录下生成缩略图文件,然后再通过浏览器向UI发送已经获取完成的事件。
904:UI通过HTML标准的事件监听机制获取到消息后,通过JavaScript扩展接口的返回值,得到生成的缩略图文件地址。
905:UI获取到图片缩略图文件URL地址后,修改缩略图展示窗口中第一图层的<div>标签,修改CSS的背景图像(background-image)属性,从而将缩略图引入并显示在缩略图展示窗口中的第一图层上。
可选地,为获得较好的显示效果以得到较好的用户体验。缩略图展示窗口500中缩略图的大小(或者说缩略图边框的尺寸)可根据显示设备的显示屏尺寸设置为16:9的宽高比例。由于不同图片的分辨率可能不同,则对于不同分辨率的图片进行等比例缩小后的缩略图的分辨率也不相同,因此需要根据缩略图的分辨率设置缩略图的宽高,以与缩略图展示窗口中缩略图边框的尺寸相适应,其中具体计算方式主要通过图片分辨率与16:9进行比较,计算方式如下:
首先,将图片进行等比例缩小,得到该图片的缩略图。
缩略图宽度的计算方法:若等比例缩小后的缩略图的宽高比例小于16:9,则将该缩略图的宽度调整为等于缩略图边框高度与图片分辨率的乘积;若等比例缩小后的缩略图的宽高比例大于或等于16:9,则将该缩略图的宽度调整为等于缩略图边框的宽度;
缩略图高度的计算方法:若等比例缩小后的缩略图的宽高比例大于16:9,则将该缩略图的宽度调整为等于缩略图边框宽度除以图片分辨率所得到的结果值;若等比例缩小后的缩略图的宽高比例小于或等于16:9,则将该缩略图的高度调整为等于缩略图边框的高度。
调整缩略图的宽度和高度后,将调整后的这两个值作为参数传入缩略图展示窗口中的第一图层510的<div>标签,修改该标签中CSS的width属性(宽度属性)值和height属性(高度属性)值。浏览器检查到该标签中的属性值发生变化,则根据更新后的标签中的属性值重新渲染图形,达到根据图片的分辨率不同而动态调整图片缩略图的宽高以匹配缩略图边框尺寸的目的。
在本申请的一些实施例中,缩略图展示窗口中的第二图层520可由HTML标签语言的<div>标签来实现,该标签可独立于用于实现第一图层510的HTML的<div>标签。在该标签中,可通过rem方式给显示区域的宽度、高度以及位置进行赋值,使得显示区域的宽度和高度是相对于缩略图边框的宽度和高度的相对值,显示区域上边界和左边界的位置是相对于缩略图边框的上边框和左边框位置的相对值。当用户对图片进行显示设置操作(比如放大或移动或旋转等操作)时,根据用户对图片的显示设置操作,修改该标签中显示区域的宽度、高度和位置的属性值中的至少一个。浏览器检查到该标签中的属性值发生变化,则根据更新后的标签中的属性值重新渲染图形,达到根据用户的显示设置操作实时通过缩略图展示窗口显示当前图片显示区域中显示的局部画面相对于图片整个画面的位置和大小的目的。
其中,显示区域的宽度是指为x轴(水平轴)方向的宽度值,高度是指y轴(垂直轴)方向的高度值,位置可以用横纵坐标(x,y)来表示。
可选地,在缩略图展示窗口500中,还可以显示移动方向指示标识(531~534),如图10所示。移动方向指示标识(531~534)用于指示图片的可移动方向。移动方向指示标识(531~534)可以是图10中所示的箭头形式,也可以采用其他形式,本申请实施例不作限制。可以将移动方向指示标识的透明度设置为0(即移动方向指示标识不透明),并将移动方向指示标识覆盖在第一图层510的上层,比如显示在第二图层520中。
可选地,当根据用户的移动图片的操作,放大的局部画面移动到图片的边缘或接近边缘的位置时,该边缘位置上的移动方向指示标识可不显示。比如用户通过遥控器的移动按键,向右移动图片的显示区域直到不能再移动为止,此时缩略图显示窗口中的显示区域的右边界与缩略图的右边界重叠,该侧的移动方向指示标识消失。
可选地,可使用HTML标签语言的<div>标签中的CSS border属性来实现显示区域的边框效果。
可选地,可使用HTML标签语言的<div>标签实现移动方向指示标识的显示。具体地,移动方向指示标识使用4个独立的<div>标签来实现,这4个标签被用于实现显示区域的标签<div></div>包裹其中,从而形成显示区域的子元素,因此这个4个标签设置的CSS属性会以父元素的位置为基准,从而实现移动方向指示标识的位置跟随显示区域的移动而移动,或者跟随显示区域的宽高变化而进行位置调整的显示效果。
根据上述一个实施例或多个实施例的组合,图11示例性示出了一种图片放大显示的流程。当用户使用遥控器调出用于控制图片显示的菜单,通过菜单中的放大选项选择放大倍数。并按下遥控器的“确认”键后,显示设备接收到该遥控器按键指令后进行响应,该响应过程可如图所示,包括:
在1101,显示设备的UI接收到该遥控器按键指令后,判断该按键指令对应的监控事件以及该按键的键值是否已经注册,若已经注册,则执行后续步骤,否则不响应该按键指令。
在1102,显示设备的UI根据放大倍数计算放大后的图片的尺寸,调用业务支撑层对图片显示区域进行刷新以显示放大后的图片。
在1103,显示设备的UI对缩略图展示窗口中的显示区域的宽高进行计算。
该步骤中,Vue组件的computed属性检测到图片的放大倍数变化,则触发对缩略图展示窗口第二图层中的显示区域的宽高进行计算。
此功能使用了Vue组件进行了实现,Vue组件是UI页面的一个组成部分,相当于计算机中的某一个元件(鼠标、键盘等),通过一些固定的规则去集成封装成独立的逻辑以及功能界面。同时Vue框架提供了许多API函数,可以实现不同的功能,使用时可以在HTML标签的基础上进行扩展,并引入CSS文件实现样式的控制和JavaScript文件实现功能交互逻辑的实现。具体地,可将缩略图展示窗口的两个图层的HTML标签以及JavaScript控制逻辑封装成为一个Vue组件,通过Vue框架提供的v-if功能,可以控制此功能组件是否渲染在浏览器页面中。当用户按下遥控器设置放大倍数后,显示设备UI就会将此组件的v-if值置为true,浏览器就会开始渲染这个组件,调出缩略图展示窗口的功能。
计算出新的宽度和高度以及键头坐标后,Vue组件会重新给缩略图展示窗口的第二图层<div>标签中用于描述显示区域的CSS属性赋值,然后浏览器根据标签的变化重新渲染显示设备UI页面。
具体地,当用户设置放大倍数变化后,放大倍数作为一个参数传入Vue组件,Vue组件使用计算属性computed,computed属性为Vue框架集成的功能,可以检测到数值的变化并执行相应的操作,当放大倍数函数发生变化后,触发重新计算缩略图展示窗口的显示区域的宽和高以及四个移动方向指示标识的位置坐标,由于播放器实现图片放大,是通过将图片宽高都乘上对应的放大倍数取平方根,即面积放大对应倍数。所以缩略图展示窗口的显示区域的宽高计算方式为:
显示区域的宽度=缩略图边框宽度/√放大倍数
显示区域的高度=缩略图边框高度/√放大倍数
以移动方向指示标识为箭头为例,显示区域周围的4个箭头的坐标的计算为:
上箭头:横坐标x=(显示区域宽度–箭头宽度)/2;
纵坐标y=箭头高度;
下箭头:横坐标x=(显示区域宽度–箭头宽度)/2;
纵坐标y=显示区域高度;
左箭头:横坐标x=–箭头宽度;
纵坐标y=(显示区域高度–箭头高度)/2;
右键头:横坐标x=显示区域宽度;
纵坐标y=(显示区域高度–箭头高度)/2
在1104,显示设备的UI调用业务支撑层的浏览器根据计算得到的缩略图展示窗口中的显示区域的宽高,对图缩略图展示窗口中的第二图层进行刷新。
该步骤中,UI根据计算结果修改第二图层对应的HTML标签语言的<dir>标签中的CSS属性值。浏览器被调用后解析更新后的第二图层的HTML标签语言,对缩略图展示窗口的第二图层进行渲染。
可选地,上述图11所示的流程中,若显示设备在接收到遥控器按键指令前,显示屏上未显示有缩略图展示窗口,则在接收到用于放大图片的遥控器按键指令后,需要在UI上显示缩略图展示窗口。
可选地,上述图11所示的流程中,步骤1101的执行过程可如图12所示,包括:
在1201,显示设备系统的底层驱动接收到遥控器按键指令并通知给中间支撑层。
在1202,中间支撑层收到该通知后通过浏览器将消息分发传递给UI。
在1203,显示图片的UI收到遥控器按键发送的消息后,判断按键状态是否已经在该UI中注册,即判断是否是按键被按下的事件。
本实施例中,当该UI打开后,会注册监听事件和遥控器按键的键值,本例子中,注册的键值为“确认”键的键值,注册的监听事件为按键被按下的事件。
在1204~1205,若判断按键状态已经注册,则该UI从系统底层获取遥控器按键的键值,并判断该键值是否已经注册。
在1206~1209,若该键值已经注册,则支撑层获得键名,生成相应的按键事件,并将该事件分发给UI,以便UI响应该按键事件。
上述流程利用显示设备系统架构的消息分发机制event bus,通过统一消息控制发送遥控器按键的通知,以便UI应用收到遥控器按键通知后进行相应的按键逻辑处理。
在其他一些实施例中,缩略图展示窗口中,缩略图的局部区域440被标识的方法还可以是:用实线框或虚线框将缩略图的局部区域440在图片缩略图430中的位置和大小标识出来。
本申请的一些实施例中,图片放大显示后,还可允许用户移动图片以查看图片的其他区域,相应地,缩略图展示窗口中的显示区域也进行对应的移动展示。
具体地,以前显示设备的显示屏幕上显示图片的第一局部画面,缩略图展示窗口中显示缩略图的第一局部区域为例,当用户通过遥控器的移动键发送移动指令(或通过其他方式的用户输入发送移动指令)后,响应于该用于将显示设备屏幕上显示的图片进行移动显示的用户输入,将该图片的第二局部画面呈现在刷新后的用户界面上,该第二局部画面为移动后的目标画面。其中,所述第二局部画面在该图片上的位置,相比于移动之前的第一局部画面在该图片上的位置,在所述移动显示的方向上存在偏移。刷新后的用户界面上的缩略图展示窗口中,所述缩略图的第二局部区域被标识,所述缩略图的第二局部区域在缩略图中的位置与该图片的第二局部画面的位置相关联,使得该第二局部区域相对于缩略图的大小和位置,对应于图片被移动后的第二局部画面相对于图片的整个画面的大小和位置。
以用户按遥控器上的向右移动方向键为例,显示设备响应于该按键指令,一方面将图片向左移动使得图片显示区域所显示的局部画面为向右移动第一步长后的画面,另一方面将缩略图展示窗口中的显示区域内显示的缩略图局部画面向右移动第二设定步长。
在播放器中,图片移动主要通过Javascript扩展接口实现。当用户通过遥控器上的方向键或者其他方式(比如手势方式)向显示设备发送对图片进行移动的指令后,UI收到该指令后,调用Javascript扩展接口从而向播放器发送移动命令;播放器收到移动命令后,按照第一步长控制播放器图层移动。使得UI中的图片显示区域所显示的图片区域相应移动。其中,所述第一步长的取值可由系统设置,比如可以等于20个像素。
移动图片时,每次移动第一步长,缩略图展示窗口中的显示区域所显示的缩略图局部区域也会按照相同方向移动相应的第二步长。第二步长的计算方式为:
第二步长=第一步长×(图片缩略图边框宽度/显示屏显示区域宽度)/√放大倍数
计算出第二步长后,可以根据第二步长计算缩略图展示窗口中的显示区域的位置,比如HTML标签中用于控制显示区域位置的CSS的top属性值和left属性值。以用户按遥控器上的向右移动的方向键为例,用于控制显示区域位置的CSS的top属性值保持不变,left属性值增加第二步长。具体实施时,可通过去调用Vue组件中的移动函数,对缩略图展示窗口中的显示区域的标签中的CSS的top属性值和left属性值进行重新计算。每次移动操作后,浏览器根据更新后的HTML标签重新渲染缩略图展示窗口。
可选地,还需要考虑图片移动到边界时的处理。播放器在图片移动到边界后会停止移动,因此对于缩略图展示窗口中的显示区域,计算边界值时可以以图片为边界。具体地,可以以图片缩略图实际宽高为边界条件,其中下边界值为图片缩略图高度减显示区域高度,下边界值为大于0,右边界值为小于缩略图宽度减去显示区域宽度,左边界值为大于0。
可选地,由于缩略图展示窗口中,在显示区域的周围可以用方向指示标识指示移动方向,还需要考虑图片移动到边界时方向指示标识的处理。若缩略图展示窗口中显示区域的某一边界与缩略图边框之间的距离小于展示一个方向指示标识的最小距离时,则该边界处的方向指示标识不再显示。
在本申请的一些实施例中,在图片放大后,还允许用户执行图片旋转操作。相应地,缩略图展示窗口中的缩略图也进行对应的旋转展示。
具体地,以前显示设备的显示屏幕上显示图片的第一局部画面,缩略图展示窗口中显示缩略图的第一局部区域为例,当用户通过遥控器的移动键发送旋转指令(或通过其他方式的用户输入发送该指令)后,响应于该用于将图片进行旋转显示的用户输入,将该图片的第三局部画面呈现在刷新后的用户界面上,该第三局部画面为旋转后的目标画面。其中,所述第三局部画面在该图片上的位置,相比于旋转前的第一局部画面在该图片上的区域,在所述旋转显示的旋转方向上存在偏转。刷新后的用户界面上的缩略图展示窗口中,所述缩略图的第三局部区域被标识,所述缩略图的第三局部区域在缩略图中的位置与该图片的第三局部画面的位置相关联,使得该第三局部区域相对于缩略图的大小和位置,对应于图片被旋转后的第三局部画面相对于图片的整个画面的大小和位置。
以用户按遥控器上的向右旋转90度为例,显示设备响应于该按键指令,一方面将图片以中心为原点向右旋转90度并刷新图片显示区域使得该区域展示旋转后的图片的局部画面,另一方面将缩略图展示窗口中的缩略图相应进行旋转。
在播放器中,图片旋转主要通过JavaScript扩展接口实现。当用户通过遥控器向显示设备发送对图片进行旋转的按键指令后,UI收到该指令后,调用Javascript扩展接口从而向播放器发送旋转命令;播放器收到旋转命令后,按照控制播放器图层旋转。使得UI中的图片显示区域所显示的图片区域相应旋转。
缩略图展示窗口中,缩略图的旋转通过该窗口的HTML标签中的CSS transform属性控制。以用户选择将图片向右旋转90度为例,UI根据用户对图片进行向右旋转的指令,记录当前的旋转角度,并作为参数将旋转角度值传入Vue组件;Vue组件中,computed属性自动监测旋转角度的变化,并修改缩略图展示窗口中第一图层的HTML标签中CSS的transform属性值并重新渲染,从而显示旋转后的图片缩略图。
可选地,对缩略图执行相应的旋转,再次触发边界条以及相应位置的计算。由于缩略图的宽度大于缩略图边框的高度,执行旋转后图片,图片的缩略图的宽度将超出缩略图边框的高度,因此需要按照缩略图边框的尺寸对旋转后缩略图进行压缩显示,即需要对旋转后的缩略图的宽度和高度重新计算,使缩略图的宽度与缩略图边框的高度相适应,并相应调整缩略图显示区域的宽度和高度。
旋转后的缩略图的宽度和高度的具体计算可以由Vue组件中computed属性监测触发,然后由浏览器根据计算后的参数对缩略图展示窗口重新渲染。旋转后的缩略图的宽度和高度的具体计算方式为:
旋转后的缩略图宽度的计算方法:若旋转前的图片缩略图的高和宽的比小于或等于16:9,则旋转后的缩略图的宽度等于缩略图边框高度;若旋转前的图片缩略图的高和宽的比大于或等于16:9,则旋转后的图片缩略图的宽度等于缩略图边框宽度/图片分辨率;
旋转或的缩略图高度的计算方法:若旋转前的图片缩略图的高和宽的比小于16:9,则旋转后的图片缩略图的高度等于缩略图边框高度与图片分辨率的乘积;若旋转前的图片缩略图的高和宽的比小于或等于16:9,则旋转后的图片缩略图的高度等于缩略图边框宽度。
可选地,由于对旋转后的缩略图的宽度和高度进行了调整,因此还可按照相同的压缩比例对缩略图展示窗口中的显示区域的宽度和高度进行调整。
图13示例性示出了对于图7a或图7b所示的用户界面中图片显示区域中图片进行旋转后的用户界面示意图,图14示例性示出了上述旋转的流程示意图。
对于图7a所示的用户界面,当用户使用遥控器调出用于控制图片显示的菜单,通过菜单中的放大选项选择向左旋转90的功能选项。并按下遥控器的“确认”键后,显示设备接收到该遥控器按键指令后进行响应,响应后的用户界面如图13所示。其中,图片显示区域400中显示被放大的图片再被向左旋转90度后的局部画面450;缩略图展示窗口500中显示被向左旋转90度的缩略图460,该缩略图的局部画面470被标识,该局部区域470相对于缩略图460的大小和位置,对应于图片410被放大和旋转后的局部画面450相对于图片410被放大和旋转后的整个画面的大小和位置。
该响应过程可如图14所示,包括:
在1401,显示设备的UI接收到该遥控器按键指令后,判断该按键指令对应的监控事件以及该按键的键值是否已经注册,若已经注册,则执行后续步骤,否则不响应该按键指令。
在1402,显示设备的UI根据旋转角度和旋转方向确定旋转后图片显示区域中显示的画面,调用业务支撑层对图片显示区域进行刷新以显示旋转后的图片。
在1403,显示设备的UI根据旋转角度和旋转方向,对缩略图展示窗口中的图片缩略图进行旋转,并根据缩略图展示窗口中缩略图边框的高度重新调整旋转后的缩略图的宽度和高度,以使旋转后的缩略图的宽度等于缩略图边框的高度,并相应调整图片缩略图的显示区域的宽度和高度。
该步骤中,Vue组件的computed属性检测到图片进行了旋转,则触发对缩略图展示窗口第一图层中的图片缩略图进行旋转以及对该缩略图的宽度和高度进行计算。
显示设备的UI根据计算得到的缩略图的宽度和高度,触发对缩略图展示窗口第二图层中的显示区域宽度和高度进行计算,以按照相同压缩比例对显示区域进行压缩。
此功能使用了Vue组件进行了实现。具体地,将缩略图展示窗口的两个图层的HTML标签以及JavaScript控制逻辑封装成为一个Vue组件,通过Vue框架提供的v-if功能,可以控制此功能组件是否渲染在浏览器页面中。当用户按下遥控器设置旋转方向和旋转角度后,显示设备UI就会将此组件的v-if值置为true,浏览器就会开始渲染这个组件,调出图片缩略图展示窗口的功能,以对缩略图展示窗口中的第一图层和第二图层的HTML中的相关属性值进行计算。
计算出新的宽和高后,Vue组件重新给缩略图展示窗口的第一图层的<div>标签的用于描述显示区域宽度和高度的CSS属性赋值,然后浏览器根据标签的变化重新渲染显示设备UI页面。
在1404,显示设备的UI调用业务支撑层的浏览器根据计算得到的缩略图展示窗口中的缩略图的宽度和高度以及旋转方向和旋转角度,以及显示区域的宽度和高度对该缩略图展示窗口进行刷新。
该步骤中,UI根据计算结果修改第一图层和第二图层对应的HTML标签语言的<dir>标签中的CSS属性值。浏览器被调用后解析更新后的第一图层和第二图层的HTML标签语言,对缩略图展示窗口的第一图层和第二图层进行渲染。
在本申请的一些实施例中,当图片显示区域所显示的图片为图片的整个画面而不再是局部画面时,可关闭缩略图展示窗口。比如,当用户对显示设备发送对图片进行缩小的指令并直到缩小到使图片的整个画面能被显示于图片显示窗口时,关闭缩略图显示窗口;再比如,用户可向显示设备发送对图片进行还原显示的指令(比如用户通过遥控器选择图7a中的菜单42中的“适配显示”功能选项),以使图片的整个画面能够显示于图片显示区域,这种情况下,显示设备响应于该指令,在所述显示屏上显示图片被还原后的整个区域,关闭所述缩略图展示窗口。
通过以上一个实施例或多个实施例的组合可以看出,在媒体对象的画面超出显示设备的显示屏中媒体对象显示区域的情况下,通过缩略图展示窗口展示媒体对象显示区域当前显示的局部画面在整个画面中的位置和所占大小,以便于用户的下一步操作,从而可以提高用户感受。
本申请另外的实施例还提供了一种计算机可读的非易失性存储介质,其上存储有计算机指令,所述计算机指令被处理器执行时实现如上述一个实施例或多个实施例组合所述的方法。
最后应说明的是:以上各实施例仅用以说明本申请的技术方案,而非对其限制;尽管参照前述各实施例对本申请进行了详细的说明,本领域的普通技术人员应当理解:其依然可以对前述各实施例所记载的技术方案进行修改,或者对其中部分或者全部技术特征进行等同替换;而这些修改或者替换,并不使相应技术方案的本质脱离本申请各实施例技术方案的范围。

Claims (18)

1.一种显示设备,其特征在于,包括:
显示器,该显示器被配置为显示用户界面,其中,该用户界面用于呈现媒体对象;
与所述显示器通信的控制器,所述控制器被配置为执行呈现用户界面:
响应于用于将所述媒体对象进行放大显示的用户输入,获取所述媒体对象的当前显示帧,并将所述媒体对象的当前显示帧的第一局部画面呈现在刷新后的用户界面上;
刷新后的用户界面还包括缩略图展示窗口,其中,所述缩略图展示窗口浮于所述第一局部画面呈现,用于呈现所述媒体对象的当前显示帧的缩略图;所述缩略图的第一局部区域被标识,所述缩略图的第一局部区域在缩略图中的位置与所述媒体对象的当前显示帧的第一局部画面的位置相关联。
2.如权利要求1所述的显示设备,其特征在于,所述控制器还被配置为执行:
响应于用于将所述媒体对象进行移动显示的用户输入,将所述媒体对象的当前显示帧的第二局部画面呈现在刷新后的用户界面上;其中,所述第二局部画面在所述当前显示帧上的位置,相比于所述第一局部画面在所述当前显示帧上的位置,在所述移动显示的方向上存在偏移;
刷新后的用户界面上的所述缩略图展示窗口中,所述缩略图的第二局部区域被标识,所述缩略图的第二局部区域在缩略图中的位置与所述媒体对象的当前显示帧的第二局部画面的位置相关联。
3.如权利要求1所述的显示设备,其特征在于,所述控制器还被配置为执行:
响应于用于将所述媒体对象进行旋转显示的用户输入,将所述媒体对象的当前显示帧的第三局部画面呈现在刷新后的用户界面上;其中,所述第三局部画面在所述当前显示帧上的位置,相比于所述第一局部画面在所述当前显示帧上的区域,在所述旋转显示的旋转方向上存在偏转;
刷新后的用户界面上的所述缩略图展示窗口中,所述缩略图的第三局部区域被标识,所述缩略图的第三局部区域在缩略图中的位置与所述媒体对象的当前显示帧的第三局部画面的位置相关联。
4.如权利要求1所述的显示设备,其特征在于,所述缩略图展示窗口包括显示区域和被遮挡区域,所述显示区域用于显示所述缩略图的第一局部区域,所述被遮挡区域用于显示背景,所述背景为设定背景或被半透明遮挡的所述缩略图的其余区域。
5.如权利要求4所述的显示设备,其特征在于,所述缩略图展示窗口包括第一图层以及第二图层,所述第一图层被所述第二图层部分覆盖;
所述第一图层显示所述媒体对象的缩略图,所述第一图层未被所述第二图层覆盖的区域对应于所述缩略图展示窗口中的被遮挡区域。
6.如权利要求5所述的显示设备,其特征在于,所述第二图层被设置为不透明或半透明。
7.如权利要求5所述的显示设备,其特征在于,所述控制器还被配置执行:
响应于用于将所述媒体对象进行放大显示或移动显示的用户输入,确定执行所述用户输入后所述缩略图展示窗口中的显示区域的宽度、高度和位置中的至少一个;
根据确定出的所述显示区域的宽度、高度和位置中的至少一个,更新所述第二图层的页面代码中用于描述所述显示区域的宽度、高度和位置的属性值中的至少一个;
根据所述第二图层的页面代码,刷新显示所述缩略图展示窗口中的所述第二图层。
8.如权利要求7所述的显示设备,其特征在于,所述控制器还被配置执行:
响应于用于将所述媒体对象进行旋转显示的用户输入,确定旋转后的缩略图的宽度和高度,使旋转后的缩略图的宽度适配所述缩略图展示窗口的高度;
根据确定出的所述缩略图的宽度、高度,更新所述第一图层的页面代码中用于描述所述缩略图的宽度、高度的属性值;
根据所述第一图层的页面代码,刷新显示所述缩略图展示窗口中的所述第一图层;
所述确定执行所述指令后所述缩略图展示窗口中的显示区域的宽度、高度和位置中的至少一个,包括:
确定旋转后的缩略图的宽度和高度,确定所述缩略图展示窗口中的显示区域的宽度和高度,使所述显示区域的宽度和高度的缩放比例等于所述缩略图的宽度和高度的缩放比例。
9.如权利要求5所述的显示设备,其特征在于,所述第二图层上还显示至少一个移动方向指示标识,所述至少一个移动方向指示标识用于指示所述媒体对象的可移动方向。
10.如权利要求1-9中任一项所述的显示设备,其特征在于,所述媒体对象为图片。
11.一种显示方法,其特征在于,包括:
响应于用于将媒体对象进行放大显示的用户输入,获取所述媒体对象的当前显示帧,并将所述媒体对象的当前显示帧的第一局部画面呈现在刷新后的用户界面上;
刷新后的用户界面还包括缩略图展示窗口,其中,所述缩略图展示窗口浮于所述第一局部画面呈现,用于呈现所述媒体对象的当前显示帧的缩略图;所述缩略图的第一局部区域被标识,所述缩略图的第一局部区域在缩略图中的位置与所述媒体对象的当前显示帧的第一局部画面的位置相关联。
12.如权利要求11所述的方法,其特征在于,还包括:
响应于用于将所述媒体对象进行移动显示的用户输入,将所述媒体对象的当前显示帧的第二局部画面呈现在刷新后的用户界面上;其中,所述第二局部画面在所述当前显示帧上的位置,相比于所述第一局部画面在所述当前显示帧上的位置,在所述移动显示的方向上存在偏移;
刷新后的用户界面上的所述缩略图展示窗口中,所述缩略图的第二局部区域被标识,所述缩略图的第二局部区域在缩略图中的位置与所述媒体对象的当前显示帧的第二局部画面的位置相关联。
13.如权利要求11所述的方法,其特征在于,还包括:
响应于用于将所述媒体对象进行旋转显示的用户输入,将所述媒体对象的当前显示帧的第三局部画面呈现在刷新后的用户界面上;其中,所述第三局部画面在所述当前显示帧上的位置,相比于所述第一局部画面在所述当前显示帧上的区域,在所述旋转显示的旋转方向上存在偏转;
刷新后的用户界面上的所述缩略图展示窗口中,所述缩略图的第三局部区域被标识,所述缩略图的第三局部区域在缩略图中的位置与所述媒体对象的当前显示帧的第三局部画面的位置相关联。
14.如权利要求11所述的方法,其特征在于,所述缩略图展示窗口包括显示区域和被遮挡区域,所述显示区域用于显示所述缩略图的第一局部区域,所述被遮挡区域用于显示背景,所述背景为设定背景或被半透明遮挡的所述缩略图的其余区域。
15.如权利要求14所述的方法,其特征在于,所述缩略图展示窗口包括第一图层以及第二图层,所述第一图层被所述第二图层部分覆盖;
所述第一图层显示所述媒体对象的缩略图,所述第一图层未被所述第二图层覆盖的区域对应于所述缩略图展示窗口中的被遮挡区域。
16.如权利要求15所述的方法,其特征在于,还包括:
响应于用于将所述媒体对象进行放大显示或移动显示的用户输入,确定执行所述用户输入后所述缩略图展示窗口中的显示区域的宽度、高度和位置中的至少一个;
根据确定出的所述显示区域的宽度、高度和位置中的至少一个,更新所述第二图层的页面代码中用于描述所述显示区域的宽度、高度和位置的属性值中的至少一个;
根据所述第二图层的页面代码,刷新显示所述缩略图展示窗口中的所述第二图层。
17.如权利要求16所述的方法,其特征在于,还包括:
响应于用于将所述媒体对象进行旋转显示的用户输入,确定旋转后的缩略图的宽度和高度,使旋转后的缩略图的宽度适配所述缩略图展示窗口的高度;
根据确定出的所述缩略图的宽度、高度,更新所述第一图层的页面代码中用于描述所述缩略图的宽度、高度的属性值;
根据所述第一图层的页面代码,刷新显示所述缩略图展示窗口中的所述第一图层;
所述确定执行所述指令后所述缩略图展示窗口中的显示区域的宽度、高度和位置中的至少一个,包括:
确定旋转后的缩略图的宽度和高度,确定所述缩略图展示窗口中的显示区域的宽度和高度,使所述显示区域的宽度和高度的缩放比例等于所述缩略图的宽度和高度的缩放比例。
18.一种计算机可读的非易失性存储介质,其特征在于,其上存储有计算机指令,所述计算机指令被处理器执行时实现权利要求11-17中任一项所述的方法。
CN201910885580.XA 2019-09-19 2019-09-19 一种显示方法及显示设备 Active CN112533021B (zh)

Priority Applications (3)

Application Number Priority Date Filing Date Title
CN201910885580.XA CN112533021B (zh) 2019-09-19 2019-09-19 一种显示方法及显示设备
PCT/CN2020/076697 WO2021051745A1 (zh) 2019-09-19 2020-02-26 一种显示方法及显示设备
US17/484,123 US11537280B2 (en) 2019-09-19 2021-09-24 Display method and display apparatus

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910885580.XA CN112533021B (zh) 2019-09-19 2019-09-19 一种显示方法及显示设备

Publications (2)

Publication Number Publication Date
CN112533021A true CN112533021A (zh) 2021-03-19
CN112533021B CN112533021B (zh) 2023-04-11

Family

ID=74883415

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910885580.XA Active CN112533021B (zh) 2019-09-19 2019-09-19 一种显示方法及显示设备

Country Status (3)

Country Link
US (1) US11537280B2 (zh)
CN (1) CN112533021B (zh)
WO (1) WO2021051745A1 (zh)

Cited By (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113190776A (zh) * 2021-05-11 2021-07-30 上海哔哩哔哩科技有限公司 弹窗展示方法与系统
CN113220201A (zh) * 2021-05-31 2021-08-06 上海御微半导体技术有限公司 一种图片的显示方法、装置、设备和存储介质
CN113689340A (zh) * 2021-09-15 2021-11-23 上海联影医疗科技股份有限公司 图像处理方法、装置、计算机设备和存储介质
CN114286138A (zh) * 2021-01-14 2022-04-05 海信视像科技股份有限公司 显示设备、外接设备及多视角比例显示方法
CN114416272A (zh) * 2022-02-07 2022-04-29 神策网络科技(北京)有限公司 图形组件显示方法、装置、存储介质及电子设备
CN115190351A (zh) * 2022-07-06 2022-10-14 Vidaa国际控股(荷兰)公司 显示设备及媒资缩放控制方法
WO2023035805A1 (zh) * 2021-09-07 2023-03-16 海信视像科技股份有限公司 一种显示设备及显示方法
US11669234B2 (en) 2021-10-18 2023-06-06 Beijing HiteVision Aixue Education Technology Co., Ltd. Method for processing aerial view, electronic device, and storage medium

Families Citing this family (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114153359A (zh) * 2021-11-17 2022-03-08 麒麟软件有限公司 一种自定义窗口布局下的高清缩放方法
US11644960B1 (en) * 2021-11-22 2023-05-09 Citrix Systems, Inc. Image data augmentation using user interface element attributes

Citations (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20060290688A1 (en) * 2005-06-28 2006-12-28 Chae Ho Y Flexible display device and method for changing display area
CN101778216A (zh) * 2009-01-08 2010-07-14 三星电子株式会社 放大和改变显示的图像的方法及使用该方法的摄像装置
US8347211B1 (en) * 2010-06-22 2013-01-01 Amazon Technologies, Inc. Immersive multimedia views for items
US20130016122A1 (en) * 2011-07-12 2013-01-17 Apple Inc. Multifunctional Environment for Image Cropping
CN104731480A (zh) * 2015-03-31 2015-06-24 努比亚技术有限公司 基于触摸屏的图像显示方法及装置
CN105512136A (zh) * 2014-09-25 2016-04-20 中兴通讯股份有限公司 一种基于图层的处理方法及装置
CN106055247A (zh) * 2016-05-25 2016-10-26 努比亚技术有限公司 一种图片显示装置、方法和移动终端
CN107567713A (zh) * 2015-03-11 2018-01-09 Lg 电子株式会社 显示设备及其控制方法
CN109937569A (zh) * 2016-10-05 2019-06-25 Lg电子株式会社 显示装置

Family Cites Families (15)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP3817312B2 (ja) * 1996-11-29 2006-09-06 キヤノン株式会社 制御方法及び装置と撮像システム及び表示操作装置とのその方法
JP4332231B2 (ja) * 1997-04-21 2009-09-16 ソニー株式会社 撮像装置コントローラおよび撮像システム
US20060196094A1 (en) * 2005-02-01 2006-09-07 Robin Sturmthal Decorative computer monitor frame
AU2005200888B2 (en) * 2005-02-28 2009-01-08 Canon Kabushiki Kaisha Visualising camera position in recorded video
JP2011205573A (ja) * 2010-03-26 2011-10-13 Sony Corp 制御装置、カメラシステム及びプログラム
US9041727B2 (en) * 2012-03-06 2015-05-26 Apple Inc. User interface tools for selectively applying effects to image
KR20140112918A (ko) * 2013-03-14 2014-09-24 삼성전자주식회사 온도 및 습도를 이용한 화면 표시 제어 장치 및 방법
KR20160029536A (ko) * 2014-09-05 2016-03-15 엘지전자 주식회사 이동 단말기 및 그것의 제어방법
KR102396036B1 (ko) * 2015-05-18 2022-05-10 엘지전자 주식회사 디스플레이 디바이스 및 그 제어 방법
JP6664490B2 (ja) * 2016-07-26 2020-03-13 富士フイルム株式会社 コンテンツ検索装置とその作動方法および作動プログラム、並びにコンテンツ検索システム
KR101983725B1 (ko) * 2017-08-03 2019-09-03 엘지전자 주식회사 전자 기기 및 전자 기기의 제어 방법
CN108427589B (zh) * 2018-02-01 2023-07-21 联想(北京)有限公司 一种数据处理方法及电子设备
US10929208B1 (en) * 2018-05-09 2021-02-23 Accusoft Corporation Methods and apparatus for copying a selected browser region to a clipboard as an image
US10705687B1 (en) * 2019-01-10 2020-07-07 Pearson Education, Inc. Visually indicating on a user interface lengths, types of content, structure and current user location within a corpus of electronic content
US10901589B1 (en) * 2019-08-21 2021-01-26 Adobe Inc. Automatic zoom-loupe creation, selection, layout, and rendering based on interaction with crop rectangle

Patent Citations (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20060290688A1 (en) * 2005-06-28 2006-12-28 Chae Ho Y Flexible display device and method for changing display area
US20170061579A1 (en) * 2005-06-28 2017-03-02 Pantech Inc. Flexible display device and method for changing display area
CN101778216A (zh) * 2009-01-08 2010-07-14 三星电子株式会社 放大和改变显示的图像的方法及使用该方法的摄像装置
US8347211B1 (en) * 2010-06-22 2013-01-01 Amazon Technologies, Inc. Immersive multimedia views for items
US20130016122A1 (en) * 2011-07-12 2013-01-17 Apple Inc. Multifunctional Environment for Image Cropping
CN105512136A (zh) * 2014-09-25 2016-04-20 中兴通讯股份有限公司 一种基于图层的处理方法及装置
CN107567713A (zh) * 2015-03-11 2018-01-09 Lg 电子株式会社 显示设备及其控制方法
CN104731480A (zh) * 2015-03-31 2015-06-24 努比亚技术有限公司 基于触摸屏的图像显示方法及装置
CN106055247A (zh) * 2016-05-25 2016-10-26 努比亚技术有限公司 一种图片显示装置、方法和移动终端
CN109937569A (zh) * 2016-10-05 2019-06-25 Lg电子株式会社 显示装置

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
赵腾飞;辛大欣;华瑾;: "改进SURF算法的特征提取与匹配方法研究" *

Cited By (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114286138A (zh) * 2021-01-14 2022-04-05 海信视像科技股份有限公司 显示设备、外接设备及多视角比例显示方法
CN113190776A (zh) * 2021-05-11 2021-07-30 上海哔哩哔哩科技有限公司 弹窗展示方法与系统
CN113220201A (zh) * 2021-05-31 2021-08-06 上海御微半导体技术有限公司 一种图片的显示方法、装置、设备和存储介质
WO2023035805A1 (zh) * 2021-09-07 2023-03-16 海信视像科技股份有限公司 一种显示设备及显示方法
CN113689340A (zh) * 2021-09-15 2021-11-23 上海联影医疗科技股份有限公司 图像处理方法、装置、计算机设备和存储介质
US11669234B2 (en) 2021-10-18 2023-06-06 Beijing HiteVision Aixue Education Technology Co., Ltd. Method for processing aerial view, electronic device, and storage medium
CN114416272A (zh) * 2022-02-07 2022-04-29 神策网络科技(北京)有限公司 图形组件显示方法、装置、存储介质及电子设备
CN114416272B (zh) * 2022-02-07 2024-04-05 神策网络科技(北京)有限公司 图形组件显示方法、装置、存储介质及电子设备
CN115190351A (zh) * 2022-07-06 2022-10-14 Vidaa国际控股(荷兰)公司 显示设备及媒资缩放控制方法
CN115190351B (zh) * 2022-07-06 2023-09-29 Vidaa国际控股(荷兰)公司 显示设备及媒资缩放控制方法

Also Published As

Publication number Publication date
CN112533021B (zh) 2023-04-11
US20220011929A1 (en) 2022-01-13
US11537280B2 (en) 2022-12-27
WO2021051745A1 (zh) 2021-03-25

Similar Documents

Publication Publication Date Title
CN112533021B (zh) 一种显示方法及显示设备
CN114827694A (zh) 一种显示设备及旋转时ui显示方法
CN113395558B (zh) 一种显示设备及显示画面旋转适配方法
CN112565839B (zh) 投屏图像的显示方法及显示设备
CN112165644B (zh) 一种显示设备及竖屏状态下视频播放方法
CN111787388B (zh) 一种显示设备
CN112463269B (zh) 用户界面显示方法及显示设备
CN112055256B (zh) 一种全景图像的图像处理方法及显示设备
CN111629249B (zh) 一种开机图片的播放方法及显示设备
CN113395562B (zh) 一种显示设备及开机动画显示方法
CN111176603A (zh) 一种用于显示设备的图像显示方法及显示设备
CN113556593B (zh) 一种显示设备及投屏方法
CN111064982B (zh) 一种显示控制方法、存储介质及显示设备
CN111277911B (zh) 一种全景视频的图像处理方法、显示设备及服务器
CN115836528A (zh) 一种显示设备及投屏方法
CN114430492A (zh) 显示设备、移动终端及图片同步缩放方法
CN111857502A (zh) 一种图像显示方法及显示设备
CN113395554A (zh) 显示设备
CN111078926A (zh) 一种人像缩略图像的确定方法及显示设备
CN113556590B (zh) 一种投屏视频流有效分辨率检测方法及显示设备
CN112235621B (zh) 一种可视区域的显示方法及显示设备
CN114501087A (zh) 一种显示设备
CN112286472B (zh) Ui显示方法及显示设备
CN113497965B (zh) 旋转动画的配置方法及显示设备
CN113542823A (zh) 一种显示设备及应用页面的展示方法

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
TA01 Transfer of patent application right

Effective date of registration: 20221019

Address after: 83 Intekte Street, Devon, Netherlands

Applicant after: VIDAA (Netherlands) International Holdings Ltd.

Address before: 266061 Songling Road, Laoshan District, Qingdao, Shandong Province, No. 399

Applicant before: QINGDAO HISENSE MEDIA NETWORKS Ltd.

TA01 Transfer of patent application right
GR01 Patent grant
GR01 Patent grant