第八讲-嵌入式软件图形用户界面设计-嵌入式软件设计开发-教学课件.ppt

1、嵌入式软件设计开发嵌入式软件设计开发嵌入式软件设计开发嵌入式软件设计开发嵌入式软件设计开发嵌入式软件设计开发康一梅康一梅 第八讲嵌入式软件图形用户界面设计主要内容8.1 人机交互界面设计概述人机交互界面设计概述 8.2 图形用户界面概述图形用户界面概述 8.3 图形用户界面与嵌入式系统图形用户界面与嵌入式系统 8.4 MiniGUI 的安装和使用的安装和使用8.1 人机交互界面设计概述 8.1.1人机交互技术人机交互技术 人机交互 (human machine interaction)计算机环境人类一个设计实例8.1 人机交互界面设计概述 UI设计上的问题 从材料和加工工艺来看，属于廉价制品。

2、简单但不严格的水温控制。排水口很随意，说明主要不用在池中蓄水。香皂被水淋了之后，需要排残水。排水不干净。水龙头的位置很尴尬，不说洗手不方便，如果想用盆子接点水估计只能斜着接，也只能接到一点，接满了也拿不下来。若水压开的很大，更不用说溅的满身都是。商标在哪？8.1 人机交互界面设计概述 餐巾摆放的设计？8.1 人机交互界面设计概述 二十世纪最伟大的人机界面 扩音器 按键式电话 方向盘 磁卡 交通灯 遥控器 阴极射线管 液晶电视 鼠标/图形用户界面 条码扫描器8.1 人机交互界面设计概述 8.1 人机交互界面设计概述 8.1.1人机交互技术人机交互技术 1946年年2月月14日，美国宾夕法日，美国

3、宾夕法尼亚大学摩尔学院尼亚大学摩尔学院 莫契利和埃克特莫契利和埃克特共同研制成功了共同研制成功了ENIC计算机，一共计算机，一共安装了安装了17468只电子管，只电子管，7200个二极个二极管，管，70000多电阻器，多电阻器，10000多只电多只电容器和容器和6000只继电器，电路焊接点只继电器，电路焊接点50万个，安装在一排万个，安装在一排2.75米高的金米高的金属柜里，占地属柜里，占地170平方米，重达平方米，重达30吨，吨，运算速度每秒运算速度每秒5000次加法，可在次加法，可在3/1000秒内完成两个秒内完成两个10位数乘法。位数乘法。8.1 人机交互界面设计概述 8.1 人机交互界

4、面设计概述 年，美国贝尔实验室研年，美国贝尔实验室研制成功第一台使用晶体管线路的制成功第一台使用晶体管线路的计算机，取名计算机，取名“催迪克催迪克”（），装有个晶体），装有个晶体管。管。8.1 人机交互界面设计概述 1965年，美国数字设备公司年，美国数字设备公司（DEC)推出了世界上第一台真正推出了世界上第一台真正意义的使用集成电路的小型计算意义的使用集成电路的小型计算机机PDP-8,标志着小型机时代的到标志着小型机时代的到来。来。8.1 人机交互界面设计概述 1981年年8月月12日日，IBM公司发布公司发布第一台第一台IBM PC机，由此开创了机，由此开创了计算机历史的新篇章，在随后的计

5、算机历史的新篇章，在随后的日子里，信息文明获得了空前的日子里，信息文明获得了空前的加速度。加速度。输入设备输出设备输出区域输入旋钮8.1.1人机交互技术人机交互技术8.1 人机交互界面设计概述 输入设备：触摸式输出设备：图形化输入设备：软键盘8.1.1人机交互技术人机交互技术8.1 人机交互界面设计概述 8.1.1人机交互技术人机交互技术8.1 人机交互界面设计概述 围绕“自然人机交互”的研究方向：l 智能环境l 多通道用户界面及人类认知方面的研究l 可穿戴的计算l 信息设备l 移动计算基于视线跟踪、语音识别、手势输入、感觉反馈等新的交互技术，允许用户利用本身的内在感觉和认知技能，使用多个交互

6、通道，以并行、非精确方式与计算机系统进行交互，旨在提高人机交互的自然性和高效性。传感器：摄像头、语音采集、压力传感器、重力传感器等。钢铁侠的盔甲8.1.1人机交互技术人机交互技术8.1 人机交互界面设计概述 8.1.2用户界面设计原则用户界面设计原则斯奈德曼（Shneiderman）列出的几条重要原则：p用户熟悉p一致性p意外最小化p可恢复性p用户差异性曼德尔（Theo Mandel）创造了三条黄金规则：p置于用户控制之下p减少用户的记忆负担p保持界面一致性8.1 人机交互界面设计概述 8.1.2用户界面设计原则用户界面设计原则康斯坦丁（Constantine）提列出的设计原则：p结构原理p简

7、单性原理p可见性原理p反馈原理p宽容原理p重用原则8.1 人机交互界面设计概述 8.1.3 界面设计活动界面设计活动界面设计活动的步骤：建立任务的目标和意图；为每个目标或意图制定特定的动作序列；按界面上执行的方式对动作序列进行规约；指明系统状态；定义控制机制；指明控制机制如何影响系统状态；指明用户如何通过界面的信息解释系统状态。8.1 人机交互界面设计概述 8.1.4 界面评定界面评定可用性检查的几个方面：l可学习性 多长的时间熟练使用？l操作速度 系统响应与用户工作情况是否匹配？l可恢复性 如何在用户错误操作中的恢复能力？l适应性 系统与单一工作模式是否结合紧密？GUI的发展史 图形用户界面

8、这一概念是70年代由施乐公司帕洛阿尔托研究中心提出。我们现在据说的普遍意义上的GUI便是由此产生的。1973年 施乐公司帕洛阿尔托研究中心施乐研究机构工作小组最先建构了WIMP(也就是视窗，图标，菜单和点选器/下拉菜单)的范例，并率先在施乐一台实验性的计算机上使用。1983年 Visi On，此图形用户界面最开始是一家公司为电子制表软件而设计的，这软件就是具有传奇色彩的VisiCalc.其“视窗”和鼠标的概念，其先于“微软视窗”的出现，但VisiOn并没有成功研制。1984年 苹果的Lisa与Macintosh，是首例成功使用GUI并用于商业用途的产品。1985年 Amiga Intuitio

9、n，Amiga计算机公司研究的一款运用GUI的电脑。Amiga GUI在当时独一无二，在那时候GUI还不能提供足够的控制功能，AMIga已经能使用弹出式的命令行界面了。1986年 GEM，基于IBM电脑系统发明的一种可选择性视窗系统，可在MS-Dos或者CPM-86上运行。1987年 Apple Macintosh II,是第一台有颜色的MAC苹果机.1988年 RISC OS，RISC OS是一种彩色GUI操作系统，使用三键鼠标、任务栏及一个文件导航器。1988年 GEOS，GEOS是另外一个非常早期的图形桌面系统。1990年 Microsoft Windows 3.0。Window 1.0

10、是基于MS-DOS操作的GUI，是基于MAC OS的GUI设计，Windows 2.0是后续版本。后来的一系列GUI视窗版本都类似于windows 3.0的界面。1992年起，Amiga Workbench 3Windows NTQNXrWindows 95IBM Releases OS/2 Warp 4Mac OS 8Windows 98APPLE Mac OS XAPPLE AQUAWindows XPWindows Server 20038.2 图形用户界面概述 UIUI的本意是用户界面，是英文User和Interface的缩写。从字面上看是用户与界面2个组成部分，但实际上还包括用户与界

11、面之间的交互关系。可分为3个方向：p用户研究p交互设计p界面设计 8.2 图形用户界面概述 GUI的目的和定义目的：减少用户的认知负担满足不同目标用户的创意需求建立界面与用户的互动交流定义：GUIGraphical User Interface一种结合计算机科学、美学、心理学、行为学，及各商业领域需求分析等学科的人机系统工程，强调人机环境三者作为一个系统进行总体设计。人机交互图形化用户界面，经常读做“goo-ee”，准确来说GUI就是屏幕产品的视觉体验和互动操作部分。8.2 图形用户界面概述 8.2 图形用户界面概述 8.2.1 图形用户界面的基本特征图形用户界面的基本特征特性描述窗口多窗口允

12、许不同的信息被同时显示在用户屏幕上图标图标代表不同类型信息菜单命令是通过菜单选择指点通过指点设备（如触摸屏）从菜单中选择感兴趣项目图形在同一个显示中，可以既有图形也有文字8.2 图形用户界面概述 8.2.1 图形用户界面的基本特征图形用户界面的基本特征图形用户界面具有以下优点：l易于用户操作l自由定制界面l开发工具及控件的多样化8.2 图形用户界面概述 GUI的设计一般包括：硬件设计 驱动程序设计 移植嵌入式GUI 系统 用户界面程序设计 软件构件间的接口 模块和其他非人的信息 生产者和消费者的接口 人和系统间的界面8.2 图形用户界面概述 8.2.2 图形用户界面的结构模型图形用户界面的结构

13、模型图形用户界面的结构模型有三个层次：l显示模型：决定了图形在屏幕上的显示方式l窗口模型：描述在屏幕上如何现实应用程序界面的形象l用户模型：包含了显示和交互的主要特征，有时能代表图形用户界面。8.2 图形用户界面概述 8.2.2 图形用户界面的结构模型图形用户界面的结构模型桌面管理系统应用程序接口API用户模型窗口模型显示模型操作系统硬件平台GUI设计原则 用户至上的原则 交互界面要友好 合理性：配色方案、位置、隐含顺序 协调性：初始化大小、控件摆放 保证可用性：可理解、可达到、可控制 保证一致性：设计目标、外观、行为 简单易用就是好 8.2 图形用户界面概述 GUI设计禁忌 同一页面包含功能

14、重复的控件、将复选框用作单选按钮、在非开/关设置中使用复选框、无初始值的多选一设置、单选按钮之间间隔太大 显示对用户无意义的错误提示、不同的类型页面窗口显示相同的标题、窗口的标题和调用的命令不一致、相似的功能却有不一致的用户操作界面、无效的控件不置灰 取消按钮无法真正取消操作、返回按钮不能达到预期的目的、不考虑用户可能的人为错误输入 功能选项过多过复杂、使用无提示或引导的隐性功能、需要向下滚动才能看到重要信息 无意义的虚假进度条、执行长时间的任务时鼠标指针不显示成忙状态 认为好的UI就是漂亮的UI 盲目的使用页面模块化设计8.2 图形用户界面概述 GUI的设计步骤 需求3W1H，对使用者、使用

15、环境、使用原因、使用方式的需求分析。分析设计建立用户定位的“品质-形象”、“美观-逻辑”等坐标。调研验证利用已生成的基本风格模版设计用户调查问卷。方案改进 用户验证反馈 需求分析初步设计原型界面用户评估结果评估完成设计修改设计修改原型界面8.2 图形用户界面概述 GUI中的元素 窗口：组织、颜色、布局、形式等。元素：界面上可有的元素，按钮、图片、文字等。排版：界面元素的位置以及元素间位置的关系。样式：元素的大小、颜色等装饰性的特性。文化：多国语言、语言间差异性的处理等。文件模型：将界面通过一个模型来展现，通过文件模型与UI脚本可以动态地定义界面。UI脚本：用来控制文件模型好实现一些动态效果，如

16、动画、限制、隐性帮助等。8.2 图形用户界面概述 界面元素的设计 符合操作系统 界面准则 确定界面元素的位置 界面元素的一致性 界面元素的表现风格 美化界面和界面元素布局、色彩、形状、提示、文字、图片、复杂性8.2 图形用户界面概述 窗口设计 界面要具有一致性 常用操作要有捷径 提供简单的错误处理 提供信息反馈 操作的可逆性 设计良好的联机帮助8.2 图形用户界面概述 菜单的设计 按照系统的功能来组织菜单 广而浅，而不是窄而深 根据含义分组，并按一定的规则排序 注意为常用选项设置快捷键 弹出式菜单(PopupMenuMethod)的应用8.2 图形用户界面概述 重视交互设计 系统易用性 交互流

17、程简便 盲点测试 出错、异常提示和处理 利用用户环境测试人机交互设计遵循的认知原则：一致性原则兼容性适应性指导性结构性经济性8.2 图形用户界面概述 GUI设计的十大法则 减少显示器的视觉密度 提供使用者搜寻工具及指引 设计合理的文字区规划 增加视觉平衡感 避免多色彩之应用 选用清楚大方的字型 使用组织化分类说明 使用简明扼要的词句 精简图像(Icon)避免界面设计之不一致性 8.2 图形用户界面概述 8.2 图形用户界面概述 8.2.3 图形用户界面实现图形用户界面实现1.图标的使用卡尔汉Callahan将图标分为三大类：1.指示性符号2.象征性符号3.相似性符号8.2 图形用户界面概述 8

18、.2.3 图形用户界面实现图形用户界面实现2.界面创新Windows 95Windows 98Windows MEWindows 2kWindows XPVista8.2 图形用户界面概述 8.2.3 图形用户界面实现图形用户界面实现2.界面创新8.2 图形用户界面概述 8.2.3 图形用户界面实现图形用户界面实现3.编程实现（1）原型和原型建造（2）模型间的映射一个例子一个例子 对比同一界面的以下两种不同设计，然后说出哪种要好一些？我们的进度，在这里良好的设计原则良好的设计原则1、关注用户及其任务，而不是技术2、首先考虑功能，其次才是表现3、与用户对任务的看法保持一致4、设计要符合常见情况5

19、、不要分散用户对他们目标的注意力6、促进学习，从外(用户)到里(设计人员)思考，而不是相反。7、传递信息，而不仅仅是数据8、设计应满足响应需求9、通过用户试用发现错误，然后修复它最好的程序界面就是用户无需去阅读操作手册最好的程序界面就是用户无需去阅读操作手册就知道该如何使用的界面。就知道该如何使用的界面。关注用户及其任务，而不是技术关注用户及其任务，而不是技术 对人的理解对人的理解 程序必须反映用户的视角和行为。要充分理解用户开发者首先要理解人。人类通过辨别比通过记忆学习起来更容易。要经常试着提供一个要经常试着提供一个数据列表给用户，而非让用户凭记忆自己输入数据列表给用户，而非让用户凭记忆自己

20、输入数据数据。普通人能记住2000到3000单词，但却可以认出50000单词。从用户的视角看问题，使用用户的词汇进行描述，保持一致性，引导用户的使用习惯 清楚一致的设计清楚一致的设计 很多GUI程序对最终用户常常不够清楚。一个增强程序清楚表述能力的有效方法是使用列表中的保留字保留字进行开发。用户中最常见的抱怨是某个术语表述的不清楚或不一致。在软件开发中经常出现的情况是，在程序发布之后，一个屏幕上可能写着“项目”，而下一屏却写着“产品”，而第三屏又变成了“货物”，可是其实这三个术语是指的同一个东西。这种一致性的缺乏导致用户非常迷惑并产生操作失误。保留字列表保留字列表文本文本 含义和行为含义和行为

21、 是否出现是否出现在按在按钮上钮上 是否出现在是否出现在菜单上菜单上 MnemonicMnemonicKeystroKeystrokes kes 热键？热键？ShortcutShortcutKeystroKeystrokes kes 快捷键？快捷键？OK 接受输入的数据或显示的响应信息，关掉窗口 Yes No None or Cancel 不接受输入的信息，关掉窗口 Yes No None Esc Close 结束当前的任务，让程序继续进行；关掉数据窗口 Yes Yes Alt+C None Exit 推出程序 No Yes Alt+X Alt+F4 Help 调出程序的帮助信息 Yes Ye

22、s Alt+H Fl Save 保存数据，停留在当前窗口 Yes Yes Alt+S Shift+Fl2 Save As 用新名字保存数据 No Yes Alt+A F12 Undo 撤销前一个动作 No Yes Alt+U Ctrl+Z Cut 剪切高亮字符 No Yes Alt+T Ctrl+X Copy 拷贝高亮的文本 No Yes Alt+C Ctrl+C Paste 在插入点粘贴被拷贝或剪切的文本 No Yes Alt+P Ctrl+V 利用保留字表使得系统词汇保持一致利用保留字表使得系统词汇保持一致 提供可视反馈提供可视反馈 如果你曾有过傻傻的瞪着自己电脑上显示的沙漏等着一个操作结

23、束的时候，就会明白没有可视化的反馈信息有多糟糕。用户非常希望知道一个操作会花费多长的时间以便准备好足够的耐心。作为最一般的规则，当一个操作超过710秒的时候，大多数用户希望看到一个带有进度条的消息对话框。时间的长短要根据用户类型和应用程序的特点来调整。使常用的用户任务简单化，不要让用户解决额外的问题GUI设计案例赏析 常用菜单要有命令快捷方式。完成相同或相近功能的菜单用横线隔开放在同一位置。菜单前的图标能直观的代表要完成的操作。GoodGood如果用户不能理解对话框里的内容，这就意味着是这个对话框设计者的失败。通常情况下，就像标准保存对话框或打开文件对话框那样，所有对话框都应该含有一个用来提问

24、或警告的消息（图标），另外还含有一段附加的描述性文字来提供额外提示譬如“这个操作不可恢复”这个问题对话框的标题与所提示的信息不符，更糟糕的这个问题对话框的标题与所提示的信息不符，更糟糕的是没有任何信息告诉用户究竟要是没有任何信息告诉用户究竟要“确信确信”啥（对话框显啥（对话框显示示“您确信吗？您确信吗？”的问题，而窗口标题却是的问题，而窗口标题却是“错误错误”）BadBad 使用彩色用户界面元素时，要考虑紧接这个界面元素的相邻界面元素是什么。特别是要注意文本所在的背景底色。提高对比度才看的清楚。BadBad 第一个例子不会让用户知道这个对话框是何用途。没有对话框里面文字的提示，用户不可能知道下

25、一步该怎么办。相反，第二个例子用意则非常的明显以致于不需要解释文字用户也知道该怎么做。BadBadGoodGood第一个例子完全没有使用空白，按钮之间的距离都是一样的，尽管我们知道这三个按钮点下去造成的后果大不相同。有意思的是，这个会造成数据损失的按钮竟然相当不方便的放在中间。所以，这就造成一种被错误选择的可能性：如果你要点“是（Yes）”的右部，或者“取消（Cancel)”的左边，可手不小心一抖错过了几个象素就点到“否”按钮上了！数据因此而丢失。而下面的这组按钮就有效的利用了空白。既然对话框中的提示是“您想在关闭文档前保存内容吗？”，所以这些按钮的动作结果和上面的一组一样：“取消”使关闭文档

26、的命令取消；“保存”将保存文档并且关闭；因此“不要保存”按钮是唯一可以造成未保存数据丢失的按钮，所以它和其它两个按钮“取消”和“保存”（它们都不会未保存数据丢失）之间有一个很大的空白。这样的分布保证了让用户偶然错误选择“不要保存”的可能性非常小。利用空白分割利用空白分割BadBadGoodGood 选择合适的控件。上图中，yes和no只能二选一，所以不应该使用checkbox，而是radiobuttonBadBadGUI图形用户界面设计过程设计原型用户试用和评估修改原型评估8.3 图形用户界面与嵌入式系统 8.3.1 嵌入式图形用户界面的特点嵌入式图形用户界面的特点系统体积小、显示屏幕小、内存

27、小对于用户：GUI易于使用，可靠，具有内存意识对于二次开发者：GUI具有友好的开发环境，无需艰苦 的学习就能适应开发过程8.3 图形用户界面与嵌入式系统 8.3.2 嵌入式图形用户界面的特点嵌入式图形用户界面的特点常用的嵌入式图形界面开发方法：1.针对特定图形输出设备，自行开发图形函数 应用产品：电子字典 缺点：不便调试，代码重复，可移植性差，维护成本高2.购买特定图形中间件软件包 例如：uC/OS-II上的uC/GUI，Nucleus上的GRAFIX，VxWorks上的WindML 优点：GUI直接可用，与操作系统配合好 缺点：功能简单，价格昂贵，后续开发中 更换操作系统可能性小8.3 图形

28、用户界面与嵌入式系统 8.3.2 嵌入式图形用户界面的特点嵌入式图形用户界面的特点常用的图形界面开发方法：3.采用开源嵌入式GUI 例如：Linux下的MicroWindows、OpenGUI 和PicoGUI 优点：资源丰富，免费授权使用 缺点：缺少商业支持，可能存在软件缺陷，缺少技术支持，存在开发风险4.使用开发商提供的嵌入式GUI MiniGUI-中、低端产品，具有跨操作系统特 性，小巧高效 Qt/Embedded-高端产品，只支持Linux 缺点：商业使用收取软件许可费用8.3 图形用户界面与嵌入式系统 8.3.3 嵌入式嵌入式GUI的体系结构层次的体系结构层次GUI在嵌入式体系结构中

29、的层次图可移植性可移植性可配置性可配置性可裁剪性可裁剪性可扩展性可扩展性8.3 图形用户界面与嵌入式系统 8.3.3 嵌入式嵌入式GUI的体系结构层次的体系结构层次可移植嵌入式GUI的基本实现结构GAL Graphic Abstract Layer图像输出抽象层IAL Input Abstract Layer输入设备抽象层8.3 图形用户界面与嵌入式系统 8.3.3 嵌入式嵌入式GUI的体系结构层次的体系结构层次几种常见的底层支持系统：VGA lib：应用于DOS，是直接针对标准VGA 卡的底层图形库。SVGA lib：应用于Linux，属于较老的底层图形 库，包括vga和vgagl两部分。L

30、ibGGI：应用于Linux，支持X Window。Framebuffer：应用于Linux，支持帧缓冲。X Window：广泛应用于UNIX/Linux，采用 Server/Client结构，可移植性强。自身庞大，效率低。8.3 图形用户界面与嵌入式系统 8.3.4 嵌入式嵌入式GUI主要技术分析主要技术分析8.3.4.1 消息机制和时间驱动1.消息机制的体系结构8.3 图形用户界面与嵌入式系统 8.3.4 嵌入式嵌入式GUI主要技术分析主要技术分析8.3.4.1 消息机制和时间驱动1.消息机制的体系结构消息机制的具有以下特征：1）消息反映的是系统硬件事件的发生，具有“突发”性 2）消息在到

31、达应用前进行过滤和排队等处理，降低实时性 3）应用程序对于消息的响应不是在中断服务程序中直接进行的，为设计创造条件，为抽象和分层提供了条件和可能。8.3 图形用户界面与嵌入式系统 8.3.4 嵌入式嵌入式GUI主要技术分析主要技术分析8.3.4.1 消息机制和时间驱动2.消息机制的工作过程消息机制包括产生、传递、管理、分派和处理等过程。由硬件、应用程序、其他系统和其它部件产生；可以采用点对点方式和广播方式传递；消息管理包括消息入队、消息缓存和消息分发；消息机制是一种异步机制；消息和消息响应之间完全通过消息建立松散的耦合关系；8.3 图形用户界面与嵌入式系统 8.3.4 嵌入式嵌入式GUI主要技

32、术分析主要技术分析8.3.4.1 消息机制和时间驱动3.消息机制的优点 增加了系统部件连接和集成的灵活性。对软件复用具有强有力的支持。系统更加容易维护，升级方便。4.消息机制的缺点 消息发生者无法预知和控制特定消息 响应速度慢，不能保障实时性8.3 图形用户界面与嵌入式系统 8.3.4 嵌入式嵌入式GUI主要技术分析主要技术分析8.3.4.2 屏幕管理技术单窗口 只需要处理窗口的切换。多窗口 显示丰富的信息，方便、快速的切换。1.坐标系统窗口单元的关系：位置关系、显示顺序关系、变化关系相对坐标系统相对坐标系统绝对坐标系统绝对坐标系统8.3 图形用户界面与嵌入式系统 8.3.4 嵌入式嵌入式GU

33、I主要技术分析主要技术分析8.3.4.2 屏幕管理技术2.窗口单元 Z 序窗口单元之间的Z序关系8.3 图形用户界面与嵌入式系统 8.3.4 嵌入式嵌入式GUI主要技术分析主要技术分析8.3.4.2 屏幕管理技术3.资源管理技术 屏幕资源主要包括：显示字体、图标Icon、位图资源Bitmap、输入法和码表，以及一些相关资源。X Window（不是X Windows）不是一个直接的图形操作环境，而是作为图形环境与UNIX系统内核沟通的中间桥梁，任何厂商都可以在X Window基础上开发出不同的GUI图形环境。MIT和DEC的目的只在于为UNIX系统设计一套简单的图形框架，以使UNIX工作站的屏幕

34、上可显示更多的命令，对于GUI的精美程度和易用程度并不讲究，毕竟那时候能够熟练操作UNIX的都是些习惯命令行的高手，根本不在乎GUI存在与否。1986 年，MIT正式发行X Window，此后它便成为UNIX的标准视窗环境。紧接着，全力负责发展该项目的X协会成立，X Window进入了新阶段。与此同步，许多UNIX厂商也在X Window原型上开发适合自己的UNIX GUI视窗环境，其中比较著名的有SUN与AT&T联手开发的“Open Look”、IBM主导下的OSF（Open Software Foundation，开放软件基金会）开发出的“Motif”。X Window 一些爱好者则成立了

35、非营利的XFree86组织，致力于在X86系统上开发X Window，这套免费且功能完整的X Window很快就进入了商用UNIX系统中，且被移植到多种硬件平台上，后来的Linux也直接从该项目中获益。当然，这些早期的X Window环境都设计得很简单，许多GUI元素模仿于微软的Windows，但X Window拥有一个小小的创新：当鼠标指针移动到某个窗口时，该窗口会被自动激活，用户无需点击便能够直接输入，简化了用户操作这个特性在后来的 KDE和Gnome中也都得到完整的继承。X Window 由于必须以UNIX系统作为基础，X Window注定只能成为UNIX上的一个应用，而不可能与操作系统

36、内核高度整合，这就使得基于X Window的图形环境不可能有很高的运行效率，但它的优点在于拥有很强的设计灵活性和可移植性。X Window从逻辑上分为三层：最底层的X Server（X服务器）主要处理输入/输出信息并维护相关资源，它接受来自键盘、鼠标的操作并将它交给X Client（X客户端）作出反馈，而由X Client传来的输出信息也由它来负责输出；最外层的X Client则提供一个完整的GUI界面，负责与用户的直接交互（KDE、Gnome都是一个X Client），而衔接X Server与X Client的就是“X Protocol(X通讯协议)”、它的任务是充当这两者的沟通管道。尽管U

37、NIX厂商采用相同的X Window，但由于终端的X Client并不相同，这就导致不同UNIX产品搭配的GUI界面看起来非常不一样。X Window8.3 图形用户界面与嵌入式系统 8.3.5 几种几种嵌入式嵌入式GUI简介简介1.Tiny-X 标准的 X Window的简化版，去掉了设备检测，无需设置显卡，扩展性好，可移植性好。适合小内存环境运行，尤其嵌入式Linux。SuSE赞助，开发人员是XFree86的核心成员Keith Packard帕卡德。TinyX是XFree86自带的编译模式之一，修改编译选项后，生成Tiny-X。8.3 图形用户界面与嵌入式系统 8.3.5 几种几种嵌入式嵌

38、入式GUI简介简介1.Tiny-X 作为XFree86 4的子集，具有很好的性能。对于一般的X Server都太过于庞大，Keith Packard以XFree86为基础，精简后得到Tiny X Server，仅有几百Kb。采用CS方式，运行的应用叫客户端，客户端不直接在屏幕上绘制或操纵任何图形，而与X服务器进行通信，由服务器完成绘图工作，并控制显示命令。8.3 图形用户界面与嵌入式系统 8.3.5 几种几种嵌入式嵌入式GUI简介简介1.Tiny-X （1）X服务程序，也称作显示管理器，是控制实际显示设备和输入设备的程序。（2）X客户程序，是使用系统窗口功能的应用程序。底层库之间的关系：Gli

39、b类库GDK类库 GTK类库 8.3 图形用户界面与嵌入式系统 8.3.5 几种几种嵌入式嵌入式GUI简介简介1.Tiny-XTinyx RTOS Tyni-x is a real-time kernel for embedded systems with reduced memory availability(without external memory).The project intends to be very small,portable for a large amount of platforms and easily configurable.8.3 图形用户界面与嵌入式系统

40、 8.3.5 几种几种嵌入式嵌入式GUI简介简介1.Tiny-X XPIT(Personal Information terminal)A unified open source software platform based on Linux for XPIT.like PDA,smart phone,ebook Reader,portable netpc.its base X Window(TinyX)and Gtk.It is a simple UI system for embedded linux.8.3 图形用户界面与嵌入式系统 8.3.5 几种几种嵌入式嵌入式GUI简介简介2.Q

41、T/Embedded QT是一个多平台的C+图形用户界面应用程序框架，完全面向对象，易扩展，允许组件编程。QT/Embedded是Trolltech公司发布的嵌入式系统的Qt版本，Open Source，商用需要需要付费。QT/Embedded是Qt的嵌入式Linux端口，包含完整的C+GUI，需要大约800kB到3MB（Intel x86下）。具有跨平台性，用 Qt API开发的应用，可以在不同的操作系统和视窗系统上执行。因为Qt是KDE等项目上使用的GUI支持库，所以许多基于Qt的X Window程序可以非常方便的移植到Qt/Embedded。8.3 图形用户界面与嵌入式系统 8.3.5

42、几种几种嵌入式嵌入式GUI简介简介基于Qt/Embedded和Qtopia的GUI设计实例 ApplicationQt/EmbeddedQtopiaArm linux kernel 2.4.20DriverFrameBufferYaffsUbootHardware Board系统平台软件结构图系统平台软件结构图 8.3 图形用户界面与嵌入式系统 8.3.5 几种几种嵌入式嵌入式GUI简介简介基于Qt/Embedded和Qtopia的GUI设计实例 Qt/Embedded应用程序QWSServer-图形事件服务Qt/EmbeddedFramebuffer输入设备驱动Linux操作系统底层硬件平台

43、Qt/Embedded实现结构实现结构 8.3 图形用户界面与嵌入式系统 8.3.5 几种几种嵌入式嵌入式GUI简介简介基于Qt/Embedded和Qtopia的GUI设计实例 Qtopia 是挪威的 Trolltech 公司为采用嵌入式Linux操作系统的消费电子设备开发的综合应用平台。包含完整的应用层、灵活的用户界面、窗口操作系统、应用程序启动程序以及开发框架。8.3 图形用户界面与嵌入式系统 8.3.5 几种几种嵌入式嵌入式GUI简介简介以下是Embedded QT 开发环境的建立步骤：1.准备与并安装编译器 arm-linux-gcc-3.4.1.tar.bz2 2.准备软件包软件：M

44、iniCom Arm-Linux 开发环境tmake-1.13.tar.gz qt-embedded-2.3.10-free.tar.gzqt-x11-2.3.2.tar.gz8.3 图形用户界面与嵌入式系统 8.3.5 几种几种嵌入式嵌入式GUI简介简介3.搭建Qt/Embedded平台：3.1 解压安装包并设置环境变量3.2 编译 Qt/Embedded 3.2.1 Build Qt2.3.23.2.2 Build Qvfb3.2.3 Build Qt/Embedded3.3 查看运行结果8.3 图形用户界面与嵌入式系统 8.3.5 几种几种嵌入式嵌入式GUI简介简介4.Qt/E 的交叉编

45、译4.1 Build Qt/Embedded4.2 修改tmake 配置文件4.3 生成可执行文件 5.建立本机Qtopia 虚拟平台 软件：Minicom Embeded Linux for 2410tmake-1.13.tar.gz qtopia-free-source-2.1.1.tar.bz2 qt-embedded-2.3.10-free.tar.gz qt-x11-2.3.2.tar.gz8.3 图形用户界面与嵌入式系统 8.3.5 几种几种嵌入式嵌入式GUI简介简介5.建立本机Qtopia 虚拟平台 5.1 解压缩安装文件：5.2 Build Qt/X11：5.3 Build Q

46、vfb：5.4 Build libqte：5.5 Build Qtopia：详见：详见：8.3 图形用户界面与嵌入式系统 8.3.5 几种几种嵌入式嵌入式GUI简介简介3.Micro Windows The Nano-X Window System is an project aimed at bringing the features of modern graphical windowing environments to devices and platforms.Nano-X allows applications to be built and tested on the,as we

47、ll as for the target device.8.3 图形用户界面与嵌入式系统 8.3.5 几种几种嵌入式嵌入式GUI简介简介3.Micro Windows Microwindows，是开源开源嵌入式GUI，基于典型的客客户户/服务器服务器体系结构。作为X Window 的替代品，使用更少的RAM和文件存储空间（100K-600K），目的是把图形视窗环境引入运行运行Linux 的小型设备和平台上。采用分层设计方法：，实现多种API 以适应不同的应用环境。，实现了一个可移植的图形引擎，支持行绘制，区域填充，剪切以及颜色模型等。，屏幕，鼠标/触摸屏以及键盘驱动程序提供了对物理设备访问的能

48、力。API硬件抽象接口驱动程序8.3 图形用户界面与嵌入式系统 8.3.5 几种几种嵌入式嵌入式GUI简介简介3.Micro Windows Microwindows可移植性好移植性好，主要基本C语言语言，仅有部分汇编代码汇编代码。支持Intel 16位、32 位CPU，MIPS R4000 及 ARM 芯片。其内部结构结构简单简单，可在RTOS和裸机上运 行，图形程序不需重写，不同工程间实现共享共享，甚 至运行在不同RTOS 的不 同对象上。提供了比较完善的图 形功能，如Alphq混合、三维支持、TrueType字体 的支持。8.3 图形用户界面与嵌入式系统 8.3.5 几种几种嵌入式嵌入式

49、GUI简介简介3.Micro Windows在ARM平台的移植步骤：替换fork()。ARM-Linux不同于标准Linux，移植中最主要的问题是ARM-Linux不提供不提供fork()系统调用，以vfork()调用取代。确定传递给显示屏驱动程序的参数。具体地说，就是需要在打开打开FrameBuffer设备/dev/fb0时将显示屏的基本参数传递给设备驱动程序。编译Microwindows。在Red Hat 9.0下建立ARM交叉编译环境，修改Makefile文件，将$(CC)编译参数指定为交叉编译环境安装目录下的arm-elf-gcc，重新编译代码，生成能够在ARM平台下运行的程序。8.3

50、 图形用户界面与嵌入式系统 8.3.5 几种几种嵌入式嵌入式GUI简介简介4.OpenGUI 最初名字叫做FastGLQT，目前支持MS-DOS，QNX等系统。完整GUI对象集（C+）图形绘制API快速图形引擎（汇编）OpenGUI分为:低层，由汇编语言编写的快速图形引擎；中层，提供了图形绘制API，包括线条、矩形、圆弧等，并且兼容Borland的BGIAPI；上层，用C+编写，提供了完整的GUI对象库。8.3 图形用户界面与嵌入式系统 8.3.5 几种几种嵌入式嵌入式GUI简介简介4.OpenGUI 由于内核基于汇编并利用MMX指令优化，OpenGUI运行速度快，支持32位机器。可以在MS-