第9章 嵌入式GUI

1、1嵌入式GUI陈文智 浙江大学计算机学院2012年11月浙江大学2提纲l1. 嵌入式GUI简介l2. X Windowsl3. Tiny-X体系结构l4. Tiny-X应用程序编写l实验一：用Glade编写一个简单的应用程序l实验二：Tiny-X下的Key/Led应用l实验三：GT/E移植 31. 嵌入式GUI简介l嵌入式GUI设计一般来说包括以下3个方面：l硬件设计，通过LCD控制器把LCD显示器和开发系统连接起来。l驱动程序设计，为输出输入设备如LCD设计驱动程序，使硬件能驱动起来l用户界面程序设计，使用嵌入式系统提供的函数库进行图形化程序设计 4l目前在嵌入式系统比较流行的图形用户界面G

2、UI ：lQt/Embedded lMicroWindows lOpenGUI lMiniGUI lTiny-X52. X Windows架构l采用客户端/服务器的设计概念 lX Windows由3部分组成：客户端、服务器和X协议 lX Windows是事件驱动，大部分时间处于一种等待事件发生的状态 6lX Windows的基本的API函数库 ：73. Tiny-X系统框架系统框架lTiny是标准X-windows系统的简化版 ，设计目标是为了在小容量内存的环境下运行，非常适合用作嵌入式linux的GUI系统 l采用标准的Client/Server体系结构 l在嵌入式系统中使用Tiny-X图形

3、用户界面开发产品，上层的应用程序的编写很方便 8lTiny-X系统架构：9lFrameBuffer 帧缓冲器lTinyX（Xfbdev）TinyX为Xwindows的微缩版，有经过精简的Xlib类库 lGlib包括一些基础数据类型和典型的C程序需要的功能 lGDK是建立在Xlib上的针对图形图像类封装的底层图形库 Tiny-X结构说明(1)10Tiny-X结构说明(2)lGTK是建立在Xlib和GDK上的高级面向对象的类库 l窗口管理器（QVWM）: 一种类似于window95风格的窗口管理器 lGlade：GTK的集成开发环境 11l Tiny-X库的调用关系： 124. Tiny-X应用程

4、序开发 l想在Xscale平台上编写基于Tiny-X的图形用户程序需要了解GTK+ lGTK+依赖于Glib并建立在GDK (GIMP Drawing Kit)的上层，基本上是将Xlib功能包装起来，它是对底层的X Windows系统库Xlib的简化 134.1 GTK+的基本概念 l信号、事件和对象 l构件 l容器 l消息及回调函数的概念 14GTK+编程应用实例 l初始化GTK+：写GTK+程序需要调用gtk_init函数对Gtk+库进行初始化 l构件的使用，一般进行如下操作步骤： l包含所调用构件的头文件 l声明构件 l 构件指针的初始化l安排构件的位置与层次关系 l编写事件处理函数 l

5、GTK+事件循环 154.2 图形界面生成器GladelGlade由主窗口、构件箱窗口、属性编辑器窗口、构件树窗口和剪贴板窗口组成 lGlade是传统界面设计工具GTK/GDK的扩展，能满足基于GTK+库的图形用户界面可视化开发的基本需求 16lGlade帮助开发者生成界面代码，基本过程如下：l让Glade设计出界面元素，设置界面元素属性，为构件的信号设置回调函数 l将其存为XML格式，观察并修改不符合要求的部分 l编写应用其它部分代码，并在应用中载入Glade文件，编译C代码生成执行文件 17实验：用Glade编写一个简单的GUI应用程序 l实验目的 熟悉GTK+编程 熟悉Glade的使用

6、学会如何交叉编译一个GUI程序 18l1在redhat9.0下安装Glade，选择系统/添加或删除软件包l选择管理工具中的”细节” ，添加Glade 19l2通过Glade创建GUI程序创建新的Project,并保存为guitest l创建一个按钮 ，选择option配置20l3. 设置参数生成ARM平台代码l在src目录下生成了ARM平台的目标程序guitest，下载到目标板，并修改其属性为可执行属性 # export CC=arm-linux-gcc# . /configure -host=arm -build=i686 -target=arm -with-gtk-exec-prefix=

7、/usr/local/XSBase-arm-linux-R1.1# make# cd src21l选择编译,生成代码 l程序在主机平台上运行 # /autogen.sh# make# cd /src# /guitest22实验二：实验二：Tiny-XTiny-X下的下的KeyPadKeyPad/LED/LED控制实验控制实验 l实验目的复习设备驱动的编写进一步熟悉Glade的使用通过GUI界面的控件事件来控制系统底层的硬件 在这个实验中分别使用Glade的8个buttuon控件来控制8个LED灯 23l1. 建一个Glade图形用户界面工程 l2. 建立相应的GUI界面结构 24l3. 增加B

8、utton的事件处理 25l4. 打开设备文件，在main.c中增如下代码，同时增加opendev.c以及opendev.h文件 #include interface.h#include support.h#include opendev.h /添加的代码window1 = create_window1 (); gtk_widget_show (window1); opendev(); /添加的代码 gtk_main (); return 0;26l5. 在button的click事件中添加控制函数，同时添加conled.c 以及conled.h实现文件 #include interface.

9、h#include support.h#include conled.hVoid on_button1_clicked ( GtkButton *button, gpointer user_data) conled( 1 );27l6. 修改src/Makefile文件 28l7. 配置Glade l8. 保存工程文件，进入终端进行交叉编译 #export CC=arm-linux-gcc#./configure host=arm build=i686 target=arm with-gtk-exec-prefix=/usr/local/arm-linux-gcc-R1.129实验三：实验三：

10、QT/EQT/E移植实验移植实验 l实验目的 了解QT图形用户界面 学会如何移植QT/E 移植QPE30l1. QT/Embedded 安装及环境设置 lQt/Embedded环境设置(host) lQt/Embedded配置，使用configure命令生成Makefile# .base_profileQTDIR=/qt-2.3.2LD_LIBRARY_PATH=/qt-2.3.2/libPATH=$PATH:$HOME/binExport QTDIR LD_LIBRARY_PATH31l执行configure的话会问到如下几个问题：l是否同意license？选择yes l 选择feature

11、 configuration。选择第5项Everything l选择colordepth时选择16 l是否支持Qt Virtual Framebuffer？在ARM上用，可以选择 nolQt/Embedded 编译：# ./configure -xplatform linux-ipaq-g+ -shared $ make32l2移植QT/E应用程序 l把主机平台编译好的qt-2.3.7文件夹mount到目标板的文件系统中 l在目标板上设置 l在目标板上执行QT下的例子 # portmap # mount t 192.168.0.50:/root/qt-2.3.7 /mnt_sharerootXsbase255 /$ export QTDIR=/nfs_share/qt-2.3.7rootXsbase255 /$ export LD_LIBRARY=/nfs_share/qt-2.3.7/lib:$LD_LIBRARY_PATHroo