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

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

Info

Publication number
WO2019119401A1
WO2019119401A1 PCT/CN2017/117939 CN2017117939W WO2019119401A1 WO 2019119401 A1 WO2019119401 A1 WO 2019119401A1 CN 2017117939 W CN2017117939 W CN 2017117939W WO 2019119401 A1 WO2019119401 A1 WO 2019119401A1
Authority
WO
WIPO (PCT)
Prior art keywords
class
osd
gui
design method
page
Prior art date
Application number
PCT/CN2017/117939
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 WO2019119401A1 publication Critical patent/WO2019119401A1/zh

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

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)

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、Qt embedded；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-screen display的简称即屏幕菜单)再输出到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 (10)

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

Applications Claiming Priority (2)

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

Publications (1)

Publication Number Publication Date
WO2019119401A1 true WO2019119401A1 (zh) 2019-06-27

Family

ID=62391223

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2017/117939 WO2019119401A1 (zh) 2017-12-21 2017-12-22 一种基于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
WO2021134397A1 (zh) * 2019-12-31 2021-07-08 上海飞来信息科技有限公司 用于无线传输图像的方法及装置、存储介质及电子设备

Citations (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产生和显示方法
US20100073564A1 (en) * 2008-09-22 2010-03-25 Sony Corporation Image display apparatus and image display method
CN101707677A (zh) * 2009-12-11 2010-05-12 华亚微电子（上海）有限公司 Osd控制器
CN203511449U (zh) * 2013-07-26 2014-04-02 深圳市航盛电子股份有限公司 支持车载音响高速图像信息的tft显示系统
CN106357998A (zh) * 2015-11-18 2017-01-25 深圳艾科创新微电子有限公司 一种osd图形显示处理装置
CN107168715A (zh) * 2017-05-25 2017-09-15 深圳市视维科技股份有限公司 一种智能终端菜单主题gui引擎实现方法

Family Cites Families (3)

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

Patent Citations (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产生和显示方法
US20100073564A1 (en) * 2008-09-22 2010-03-25 Sony Corporation Image display apparatus and image display method
CN101707677A (zh) * 2009-12-11 2010-05-12 华亚微电子（上海）有限公司 Osd控制器
CN203511449U (zh) * 2013-07-26 2014-04-02 深圳市航盛电子股份有限公司 支持车载音响高速图像信息的tft显示系统
CN106357998A (zh) * 2015-11-18 2017-01-25 深圳艾科创新微电子有限公司 一种osd图形显示处理装置
CN107168715A (zh) * 2017-05-25 2017-09-15 深圳市视维科技股份有限公司 一种智能终端菜单主题gui引擎实现方法

Also Published As

Publication number Publication date
CN108132786A (zh) 2018-06-08
CN108132786B (zh) 2021-03-30

Similar Documents

Publication Publication Date Title
US10133396B2 (en) Virtual input device using second touch-enabled display
TWI528266B (zh) 電子裝置及螢幕內容分享方法
JP6273354B2 (ja) 複数のディスプレイ用のユーザインタフェース要素
CN107636595B (zh) 用于在电子设备中使用第一应用图标启动第二应用的方法
US20120216146A1 (en) Method, apparatus and computer program product for integrated application and task manager display
US9665381B2 (en) Combining interfaces of shell applications and sub-applications
CN101727315B (zh) 实现按钮类面板控件操作显示的方法
US20130057572A1 (en) Multiple Display Device Taskbars
WO2011116601A1 (zh) 实现移动终端横竖屏切换的装置及方法
US20150301730A1 (en) Object Suspension Realizing Method and Device
CN101493750A (zh) 一种基于触摸屏输入的应用程序控件输入方法及装置
CN103324436A (zh) 一种任务处理方法及装置
CN104063128A (zh) 一种信息处理方法及电子设备
WO2015184736A1 (zh) 一种触屏设备背景图变换的方法及终端
WO2022111397A1 (zh) 控制方法、装置和电子设备
JP5345998B2 (ja) コンピュータ・システムの制御方法およびコンピュータ
WO2019119401A1 (zh) 一种基于osd的gui设计方法
KR20140028383A (ko) 사용자 단말 장치 및 그 제어 방법
TW201506787A (zh) 電子裝置及其輸入操作管理方法
US9417780B2 (en) Information processing apparatus
CN104820489B (zh) 管理低延时的直接控制反馈的系统和方法
CN111327761A (zh) 一种在安卓手机上操作虚拟安卓系统的方法
CN108132785B (zh) 一种基于osd的嵌套式列表框设计方法
US9582158B2 (en) Efficient usage of screen real estate on an electronic device
WO2019051687A1 (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: 17935710

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 22.10.2020)

122 Ep: pct application non-entry in european phase

Ref document number: 17935710

Country of ref document: EP

Kind code of ref document: A1