CN108132786B - 一种基于osd的gui设计方法 - Google Patents

一种基于osd的gui设计方法 Download PDF

Info

Publication number
CN108132786B
CN108132786B CN201711397206.2A CN201711397206A CN108132786B CN 108132786 B CN108132786 B CN 108132786B CN 201711397206 A CN201711397206 A CN 201711397206A CN 108132786 B CN108132786 B CN 108132786B
Authority
CN
China
Prior art keywords
class
osd
gui
picture
page
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201711397206.2A
Other languages
English (en)
Other versions
CN108132786A (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.)
Guangzhou Lupai Liuma Technology Co ltd
Original Assignee
Guangzhou Roadpassion Electronic 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 Guangzhou Roadpassion Electronic Technology Co ltd filed Critical Guangzhou Roadpassion Electronic Technology Co ltd
Priority to CN201711397206.2A priority Critical patent/CN108132786B/zh
Priority to PCT/CN2017/117939 priority patent/WO2019119401A1/zh
Publication of CN108132786A publication Critical patent/CN108132786A/zh
Application granted granted Critical
Publication of CN108132786B publication Critical patent/CN108132786B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces

Abstract

本发明涉及一种基于OSD的GUI设计方法，通过OSD来实现图片叠加，包括图片叠加过程和OSD窗口叠加过程，图片叠加过程包括：将一幅按钮图片叠加在背景图片的相应位置上，组成一幅图片叠加效果类型的图片。本发明提供的基于OSD的GUI设计方法，能够应用于不提供视频缓冲的嵌入式系统中，能满足不同的系统使用场合要求，可以很好地满足实际应用的需要。

Description

一种基于OSD的GUI设计方法
技术领域
本发明属于GUI设计方法技术领域，具体涉及一种基于OSD的GUI设计方法。
背景技术
图形用户界面(Graphical User Interface，简称GUI，又称图形用户接口)是一种人与计算机通信的界面显示格式，允许用户使用鼠标等输入设备操纵屏幕上的图标或菜单选项，以选择命令、启动程序或执行其它一些日常任务。
纵观国际相关产业在图形化用户界面设计方面的发展现状，许多国际知名公司早已意识到GUI在产品方面产生的强大增值功能，以及带动的巨大市场价值。随着中国IT产业，移动通讯产业，家电产业的迅猛发展，在产品的人机交互界面设计水平发展上日显滞后，这对于提高产业综合素质，提升与国际同等业者的竞争能力等等方面无疑起了制约的作用。
GUI的广泛应用是当今计算机发展的重大成就之一，它极大地方便了非专业用户的使用。人们从此不再需要死记硬背大量的命令，取而代之的是可以通过窗口、菜单、按键等方式来方便地进行操作。而嵌入式GUI具有下面几个方面的基本要求：轻型、占用资源少、高性能、高可靠性、便于移植、可配置等特点。
目前主流的应用于嵌入式的GUI的方案主要有以下几种：1、GtkFB；2、Qtembedded；3、miniGUI；4、Microwindows；5、ST GUI；6、uC/GUI。
其中上述1至4项的GUI系统方案要求有嵌入式操作系统运行支持。上述5、6项的GUI系统没有操作系统的运行支持的限制，但和1至4项的GUI方案一样是直接操作视频缓冲区的。上述GUI不能应用于没有提供视频缓冲的嵌入式系统中，比如目前车载后装市场比较流行的“单片机与TW88s系列芯片组”组成的系统，是一种不提供视频缓冲，只提供OSD屏幕菜单限制的嵌入式系统。
如图1所示为目前流行的单片机与TW88s系列芯片组组成的系统的硬件框架示意图。图1中“MCU”为单片机，负责逻辑控制、对TW88s系列芯片组的操作控制和对Flash芯片的更新。“TW88s”为TW88s芯片组，在该系统中主要负责在图像数据上叠加上OSD(on-screendisplay的简称即屏幕菜单)再输出到LCD显示屏上。“Flash”为SPI_Flash，储存着TW88s芯片组所要用到的图像数据。“LCD”为带有触摸屏的显示屏，接收TW88s芯片组的图像数据，和将采集到的触摸屏的触摸数据反馈给TW88s芯片组。图1中的“CAM”,“DVD”，“Others”表示为TW88s芯片组的视频输入源。在整个系统中不向开发者提供对Framebuffer操作的接口，只允许开发者通过TW88s芯片组的OSD功能在视频输入源的基础上叠加储存在SPI_Flash上的图片数据(将图片数据加载到OSD窗口上)，组合成新的视频数据输出LCD上。现有技术的GUI不能应用于该系统中。
发明内容
针对上述现有技术中存在的问题，本发明的目的在于提供一种可避免出现上述技术缺陷的基于OSD的GUI设计方法。
为了实现上述发明目的，本发明提供的技术方案如下：
一种基于OSD的GUI设计方法，通过OSD来实现图片叠加。
进一步地，通过OSD来实现图片叠加包括：图片叠加过程和OSD窗口叠加过程。
进一步地，图片叠加过程包括：将一幅按钮图片叠加在背景图片的相应位置上，组成一幅图片叠加效果类型的图片。
进一步地，OSD窗口叠加过程包括：取OSD_WIN_0和OSD_WIN_1两个OSD窗口，使OSD_WIN_0加载背景图片并设置好相应的显示大小和位置；OSD_WIN_1在需要的时候加载不同的按钮图片并设置好大小，根据按钮图片与背景图片的位置对应关系设置好相应的位置叠加到OSD_WIN_0上。
进一步地，所述方法包括：
创建Page类；创建GuiPage类；创建GUI类；创建Drawable类；创建PushButton类；创建OSD类。
进一步地，用Page类的成员函数Page::show()和Page类的成员函数Page::hide()来实现状态栏的显示和隐藏操作。
进一步地，GuiPage类继承Page类并重构Page类的成员函数Page::show()和Page类的成员函数Page::hide()，并加入GuiPage类的成员函数GuiPage::setPosition()。
进一步地，通过GUI类的成员函数GUI::addGuiPage()将操作栏注册到GUI类的实例的操作栏列表上；运行过程中GUI类的实例通过GUI类的成员函数GUI::getTouchEvent()读取触摸信息并通过触摸信息判断出用户的操作意图，如果判断出用户的操作意图为简单的点击操作，则该类GUI的实例会把相应的触摸信息推送到操作栏列表上的各个操作栏中去。
进一步地，Drawable类将一幅图片与一个OSD窗口进行绑定并管理OSD窗口的显示状态。
进一步地，OSD类负责动态申请和释放OSD窗口。
本发明提供的基于OSD的GUI设计方法，能够应用于不提供视频缓冲的嵌入式系统中，能满足不同的系统使用场合要求，可以很好地满足实际应用的需要。
附图说明
图1为现有技术的单片机与TW88s系列芯片组组成的系统的硬件框架示意图；
图2为基本图片叠加原理的示意图；
图3为Page类、Drawable类、GUI类、Drawable类和OSD类的类UML图；
图4为显示流程图；
图5为隐藏流程图；
图6为触摸事件传输流程图。
具体实施方式
为了使本发明的目的、技术方案及优点更加清楚明白，下面结合附图和具体实施例对本发明做进一步说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
一种基于OSD的GUI设计方法，基于基本图片叠加原理实现，即通过OSD来实现图片叠加。OSD是on-screen display的简称，即屏幕菜单式调节方式。
基本图片叠加原理即通过OSD来实现图片叠加的过程描述如下：
如图2所示，原始图片，包括1幅背景图片和4幅按钮图片；背景图片由所有按钮图片拼接并取了一种较原始按钮图片暗的颜色作为主色的图片组成；
图片叠加过程：将其中一幅按钮图片叠加在背景图片的相应位置上，组成一幅图片叠加效果类型的图片；较单背景图，叠加后的图片看起来像其中一个按钮被选中的效果图；不同时刻把不同的按钮图片叠加到背景图片的相应位置上面，会形成不同按钮被选中的效果图片；若仅仅显示背景图片的话，就形成没有任何按钮图片被选中的效果图片；
OSD窗口叠加过程：取两个OSD窗口——OSD_WIN_0和OSD_WIN_1，使OSD_WIN_0加载背景图片并设置好相应的显示大小和位置；OSD_WIN_1在需要的时候加载不同的按钮图片并设置好大小，根据按钮图片与背景图片的位置对应关系设置好相应的位置叠加到OSD_WIN_0上，就会形成和图片叠加一样的效果；通过OSD叠加可以实现仅利用芯片OSD功能实现按钮被选中与不被选中的动画效果；结合图1的硬件系统，通过读取触摸屏的触摸信息，判断用户的使用意图，选择相应的按钮图片叠加到背景图上去。
本发明的基于OSD的GUI设计方法，包括：
创建Page类，本发明的GUI同时支持多种操作界面，各种操作界面由多个操作栏组合而成，在本发明中把各个操作栏用Page类封装起来；每个状态栏都有两个基本的操作：显示和隐藏；用Page类的成员函数Page::show()和Page类的成员函数Page::hide()来实现状态栏的显示和隐藏操作；
创建GuiPage类，GuiPage类继承于Page类并重构Page类的成员函数Page::show()和Page类的成员函数Page::hide()，并加入GuiPage类的成员函数GuiPage::setPosition()，方便动态设置操作栏的显示位置；各个操作栏使用了图2中所示的基本图片叠加原理，包含一个背景图(GuiPage类的成员变量GuiPage::backgroundPic)和一个保存着多个按钮信息的按钮列表(GuiPage类的成员变量GuiPage::buttonList)；每个GuiPage类的实例都管理着GuiPage类的成员变量GuiPage::backgoundPic和GuiPage类的成员变量GuiPage::buttonList上的所有元素，包括控制它们的显示和隐藏、位置信息等，同时还向它们传输外界给该类GuiPage的实例传入的触摸信息；
创建GUI类，GUI类负责集中管理各个不同的操作界面的工作；一个应用程序先通过GUI类的成员函数GUI::addGuiPage()将该应用程序所要用到的操作栏(GuiPage类的实例)注册到GUI类的实例的操作栏列表(GUI类的成员变量GUI::pages)上；运行过程中GUI类的实例通过GUI类的成员函数GUI::getTouchEvent()读取系统触摸信息并通过触摸信息判断出用户的操作意图，如果判断出用户的操作意图为简单的点击操作，则该类GUI的实例会把相应的触摸信息推送到操作栏列表(GUI类的类成员变量GUI::pages)上的各个操作栏(GUI类的成员变量GUI::pages的各个元素)中去；GUI类还通过实例化Timer类来获得相应的定时能力，更可实现在不同场合下定时显示或隐藏操作栏的功能；
创建Drawable类，Drawable类负责将一幅图片与一个OSD窗口进行绑定并管理OSD窗口的显示状态，如显示(通过Drawable类的成员函数Drawable::show()实现)、隐藏(通过Drawable类的成员函数Drawabel::hide()实现)和动态设置显示位置(通过Drawable类的成员函数Drawable::setPosition()实现)；
创建PushButton类，PushButton类继承于Drawable类，重构了Drawable类的成员函数Drawable::show()；PushButton类的成员函数PushButton::show()不将PushButton类的实例所绑定的图片直接显示；PushButton类的实例会根据GuiPage类的实例调用PushButton类的成员函数
PushButton::handleTouchEvent()时传入的触摸信息，判断触摸的位置是否在该实例的坐标范围内，如果在的话则把PushButton类的实例所绑定的图片给显示出来，并将触摸事件告知该操作界面所对应的应用进程；
创建OSD类，OSD类负责动态申请和释放OSD窗口。
如图3所示为Page类、Drawable类、GUI类、Drawable类和OSD类的类UML图。
如图4所示，显示流程由GUI类的成员函数GUI::show()发起，GUI类的实例将GUI类的成员变量GUI::pages的显示函数轮询地运行一遍，而各个GUI类的成员变量GUI::pages为GuiPage类的实例，所以上述GUI类的成员变量GUI::pages的显示函数实际执行的为GuiPage类的成员函数GuiPage::show()。GuiPage类的成员函数GuiPage::show()中只执行了GuiPage类的成员变量GuiPage::backgroundPic的显示函数，同样，GuiPage类的成员变量GuiPage::backgroundPic为Drawable类的一个实例，所以显示函数最终执行的为Drawabel类的成员函数Drawable::show()。Drawabel类的成员函数Drawable::show()中调用OSD类的实例的申请窗口的方法来申请一窗口绑定一幅图片显示出来。
如图5所示，隐藏流程由GUI类的成员函数GUI::hide()发起，基本流程和显示流程一致，只是调用的各个实现方法不一样。隐藏流程分别调用的是GUI类的成员函数GUI::hide()、GuiPage类的成员函数GUIPage::hide()、Drawable类的成员函数Drawable::hide()和OSD类释放OSD窗口的方法。隐藏流程与显示流程不同的是，隐藏流程中GuiPage类的实例的隐藏函数(GuiPage类的成员函数GuiPage::hide())会直接调用PushButton类的隐藏函数(PushButton类的成员函数PushButton::hide())，而显示流程中GuiPage类的实例的显示函数(GuiPage类的成员函数GuiPage::show())不会直接调用PushButton类的显示函数(PushButton类的员函数PushButton::show())。
如图6所示，触摸事件传输流程由GUI类的成员函数GUI::getTouchEvent()发起，然后传输到GuiPage类的成员函数GuiPage::handleTouchEvent()最后传输到PushButton类的成员函数PushButton::handleTouchEvent()，在PushButton类的成员函数PushButton::handleTouchEvent()中先判断触摸信号是否在当前PushButton类的实例的坐标范围内，如果是的话，则调用其相应的函数通知调用改GUI的进程，最后调用PushButton类的成员函数PushButton::show()使该PushButton类的实例所绑定的图片显示出来。PushButton类将触摸事件通知调用该GUI的进程。
五个基类Page类、Drawable类、GUI类、Drawable类和OSD类以及两个派生类GuiPage类和PushButton类能使功能独立化，方便系统维护；在Drawable类和GuiPage类中使用了列表的方式来储存含有相同特性的成员变量，简化了程序实现的难度；PushButton类的显示方式与其父类Drawble有所不同，使该模块的功能更多样性。
本发明提供的基于OSD的GUI设计方法，能够应用于不提供视频缓冲的嵌入式系统中，能满足不同的系统使用场合要求，可以很好地满足实际应用的需要。
以上所述实施例仅表达了本发明的实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (7)

1.一种基于OSD的GUI设计方法，其特征在于，通过OSD来实现图片叠加；
通过OSD来实现图片叠加包括：图片叠加过程和OSD窗口叠加过程；
图片叠加过程包括：将一幅按钮图片叠加在背景图片的相应位置上，组成一幅图片叠加效果类型的图片；
OSD窗口叠加过程包括：取OSD_WIN_0和OSD_WIN_1两个OSD窗口，使OSD_WIN_0加载背景图片并设置好相应的显示大小和位置；OSD_WIN_1在需要的时候加载不同的按钮图片并设置好大小，根据按钮图片与背景图片的位置对应关系设置好相应的位置叠加到OSD_WIN_0上。
2.根据权利要求1所述的GUI设计方法，其特征在于，所述方法包括：
创建Page类；创建GuiPage类；创建GUI类；创建Drawable类；创建PushButton类；创建OSD类。
3.根据权利要求2所述的GUI设计方法，其特征在于，用Page类的成员函数Page::show()和Page类的成员函数Page::hide()来实现状态栏的显示和隐藏操作。
4.根据权利要求2所述的GUI设计方法，其特征在于，GuiPage类继承Page类并重构Page类的成员函数Page::show()和Page类的成员函数Page::hide()，并加入GuiPage类的成员函数GuiPage::setPosition()。
5.根据权利要求2所述的GUI设计方法，其特征在于，通过GUI类的成员函数GUI::addGuiPage()将操作栏注册到GUI类的实例的操作栏列表上；运行过程中GUI类的实例通过GUI类的成员函数GUI::getTouchEvent()读取触摸信息并通过触摸信息判断出用户的操作意图，如果判断出用户的操作意图为简单的点击操作，则该GUI类的实例会把相应的触摸信息推送到操作栏列表上的各个操作栏中去。
6.根据权利要求2所述的GUI设计方法，其特征在于，Drawable类将一幅图片与一个OSD窗口进行绑定并管理OSD窗口的显示状态。
7.根据权利要求2所述的GUI设计方法，其特征在于，OSD类负责动态申请和释放OSD窗口。
CN201711397206.2A 2017-12-21 2017-12-21 一种基于osd的gui设计方法 Active CN108132786B (zh)

Priority Applications (2)

Application Number Priority Date Filing Date Title
CN201711397206.2A CN108132786B (zh) 2017-12-21 2017-12-21 一种基于osd的gui设计方法
PCT/CN2017/117939 WO2019119401A1 (zh) 2017-12-21 2017-12-22 一种基于osd的gui设计方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201711397206.2A CN108132786B (zh) 2017-12-21 2017-12-21 一种基于osd的gui设计方法

Publications (2)

Publication Number Publication Date
CN108132786A CN108132786A (zh) 2018-06-08
CN108132786B true CN108132786B (zh) 2021-03-30

Family

ID=62391223

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201711397206.2A Active CN108132786B (zh) 2017-12-21 2017-12-21 一种基于osd的gui设计方法

Country Status (2)

Country Link
CN (1) CN108132786B (zh)
WO (1) WO2019119401A1 (zh)

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113728622A (zh) * 2019-12-31 2021-11-30 上海飞来信息科技有限公司 用于无线传输图像的方法及装置、存储介质及电子设备

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1758726A (zh) * 2005-08-09 2006-04-12 深圳市同洲电子股份有限公司 动态演示机顶盒操作指导的装置和方法
CN1964442A (zh) * 2005-11-09 2007-05-16 上海奇码数字信息有限公司 屏幕显示控制系统
KR101293459B1 (ko) * 2011-06-10 2013-08-06 팅크웨어(주) 조작계 중심의 문자 입력 시스템 및 그 방법

Family Cites Families (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101377922A (zh) * 2008-08-01 2009-03-04 青岛海信电器股份有限公司 Osd产生和显示方法
JP2010074772A (ja) * 2008-09-22 2010-04-02 Sony Corp 映像表示装置、及び映像表示方法
CN101707677B (zh) * 2009-12-11 2011-12-21 华亚微电子（上海）有限公司 Osd控制器
CN203511449U (zh) * 2013-07-26 2014-04-02 深圳市航盛电子股份有限公司 支持车载音响高速图像信息的tft显示系统
CN106357998B (zh) * 2015-11-18 2019-05-28 深圳开阳电子股份有限公司 一种osd图形显示处理装置
CN107168715B (zh) * 2017-05-25 2020-09-15 深圳市视维科技股份有限公司 一种智能终端菜单主题gui引擎实现方法

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1758726A (zh) * 2005-08-09 2006-04-12 深圳市同洲电子股份有限公司 动态演示机顶盒操作指导的装置和方法
CN1964442A (zh) * 2005-11-09 2007-05-16 上海奇码数字信息有限公司 屏幕显示控制系统
KR101293459B1 (ko) * 2011-06-10 2013-08-06 팅크웨어(주) 조작계 중심의 문자 입력 시스템 및 그 방법

Also Published As

Publication number Publication date
WO2019119401A1 (zh) 2019-06-27
CN108132786A (zh) 2018-06-08

Similar Documents

Publication Publication Date Title
CN106484396B (zh) 夜间模式切换方法、装置和终端设备
WO2020038168A1 (zh) 内容分享方法、装置、终端及存储介质
AU2013389985B2 (en) User interface elements for multiple displays
WO2020038169A1 (zh) 图标显示方法、装置、终端及存储介质
WO2022048506A1 (zh) 壁纸显示方法、装置和电子设备
CN103345405A (zh) 应用程序的启动方法、装置和客户端
CN105511728B (zh) 一种终端设备的桌面图标管理方法及装置
WO2011116601A1 (zh) 实现移动终端横竖屏切换的装置及方法
WO2013010143A2 (en) Foreground/background assortment of hidden windows
CN103530018A (zh) 安卓操作系统中微件界面的建立方法及移动终端
JP2016500175A (ja) フローティングオブジェクトの実現方法及び装置
CN101980155A (zh) 电视机用户界面的实现方法和系统、电视机
CN103914314A (zh) 一种调整显示屏幕亮度的方法和装置
WO2015184736A1 (zh) 一种触屏设备背景图变换的方法及终端
CN103677883B (zh) 显示停靠栏图标的方法及装置
EP3680765A1 (en) Navigation bar control method and device
US20200249965A1 (en) Display Device with Built-In Web Browser for Graphical User Interface in an Embedded System
GB2519124A (en) Controlling application launch
CN108132786B (zh) 一种基于osd的gui设计方法
CN103257788A (zh) 一种windows桌面动态图标形成方法
CN111324398A (zh) 最近内容的处理方法、装置、终端及存储介质
CN109800044B (zh) 一种html5双屏应用的方法、装置及电子设备
WO2017201655A1 (zh) 一种后台应用程序显示方法、装置、电子设备和计算机程序产品
CN105138230A (zh) 嵌入式图形用户界面框架系统及其程序管理方法
CN111045758A (zh) 视图处理方法、装置、电子设备及计算机存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant
TR01 Transfer of patent right

Effective date of registration: 20230714

Address after: Room 301, 3rd Floor, Building 6, No. 2 Tiantai 1st Road, Science City, Huangpu District, Guangzhou City, Guangdong Province, 510000

Patentee after: Guangzhou Lupai Liuma Technology Co.,Ltd.

Address before: 510663 room 602, building A1, 6th floor, No.19, Kehui 2nd Street, Kehui Jingu Park, No.99, middle Kexue Avenue, Luogang District, Guangzhou City, Guangdong Province

Patentee before: GUANGZHOU ROADPASSION ELECTRONIC TECHNOLOGY Co.,Ltd.

TR01 Transfer of patent right