基于qt的图片查看器设计.doc

基于嵌入式Linux统的Qt图片查看器的设计学院(系)： 机械与电子工程学院专业年级： 电子信息工程10级1班学生姓名： 学 号： 指导教师： 王东完成日期： 2013年7月08日目录1. 设计目的和方法12. 嵌入式Linux系统GUI设计分析22.1 图形用户界面概述22.2 GUI的组成22.3 Qt/Embedded分析33 QT技术63.1 QT的优势63.2 QT图形用户界面73.3 QT Creator的特点以及优势74图片查看器程序的移植过程84.1 移植QT86.1.1 QT源代码编译86.1.2 交叉编译94.2 程序开发104.2.1 主程序中创建类104.2.2 制定程序框架104.2.3 编辑调试程序104.3 图片查看器程序设计114.2.1 预期达到的界面模型114.2.1 源程序124.3 设计成果215结论44参考文献461设计的目的和方法经常使用电脑的同学都知道，windows系统自带的图片查看器查看图片的方式比较直接，包括放大缩小翻转等基本功能。为了使图片的查看方式灵活化，本项目预设计出一款功能多样的图片查看器。拟设计的一款图片查看器基于嵌入式Linux系统、利用Qt开发，其实现的功能在基础的图片查看器的功能如放大缩小之外另增加了图片的任意角度旋转、斜切、位移等功能。2 嵌入式Linux系统GUI设计分析嵌入式系统的图形用户界面GUI是嵌入式系统与人与计算机之间传递、交换信息的媒介和对话接口，是计算机的重要组成部分，用户界面的发展经历了命令语言界面、菜单界面、图形用户界面和直接操作界面等过程。2.1 图形用户界面概述所谓GUI（Graphics User Interface）就是图形用户界面，是指计算机与其使用者之间的对话接口，是计算机系统的重要组成部分。一个图形用户界面系统通常由三个基本层次组成，即显示模型、窗口模型和用户模型。用户模型包含了显示和交互的主要特征。图3-1给出了图形用户界面系统的结构。桌面管理系统用户模型窗口模型显示模型操作系统硬件平台图3-1 图形用户界面系统的结构当前嵌入式Linux系统迫切需要轻量级的GUI，幸运的是，不少厂家和开放源码组织已经提供了这样的GUI，如Qt/Embedded，Microwindows，MiniGUI等。尽管已具备了基本的轻量级GUI系统，但由于Flash磁盘空间、内存资源和功耗的限制，嵌入式Linux系统上的GUI应用软件设计很大程序上不同于桌面系统应用软件的开发。比如，应用程序的用户界面就需要精心定制，来方便用户在较小尺寸的屏幕上输入输出；又如，嵌入式系统上的应用程序一般不允许崩溃，所以必须采取安全有效的内存管理策略保证程序的可靠性。2.2 嵌入式系统的GUI简介嵌入式GUI就是在嵌入式系统中为特定的硬件设备或环境而设计的图形用户界面系统。所以嵌入式GUI不但要有GUI的特征，在实际应用中，嵌入式系统对它来说还有如下的基本要求：占用资源少，高性能，高可靠性，可配置下面，我们将简要介绍集中常见的嵌入式系统的GUI，并对他们的优缺点进行比较。1）OpenGUIOpenGUI基于一个用汇编实现的x86图形内核，提供了一个高层的C/C+图形/窗口接口。它和MiniGUI一样，也是使用LGPL许可证。OpenGUI提供了2维绘图原语，消息驱动的API、BMP文件格式支持。OpenGUI功能强大、使用方便。用户甚至可以实现Borland BGI风格的应用程序，或者是QT风格的窗口。OpenGUI支持鼠标和键盘的事件。在Linux上基于Framebuffer3或者SVGALib4实现绘图。Linux下OpenGUI也支持Mesa3D。颜色模型方面，OpenGUI已经支持8、16、32位模型。由于其基于汇编实现的内核并利用MMX指令进行了优化，OpenGUI运行速度非常快，可以用UltraFast形容，它支持32位的机器，能够在MS-DOS，QNX5和Linux下运行，主要用来在这些系统中开发图形应用程序和游戏。OpenGUI非常稳定，但可移植性因为其内核使用汇编语言实现会受到影响。2）MiniGUIMiniGUI 是 Linux 控制台上运行的，基于 SVGALib 和 LinuxThread6 库的多窗口图形用户界面支持系统。MiniGUI 采用了类 Win32 的 API 接口， 实现了简化的类 Windows 98 风格的图形用户界面。 MiniGUI也是一个窗口系统，他的主要组成元素是窗口，在这个基础上 MiniGUI 中的窗口可以基本分四类，分别为主窗口、对话框、控件和主窗口中的窗片。MiniGUI 中的主窗口和 Windows 应用程序的主窗口概念类似， MiniGUI 中的每个主窗口对应于一个单独的线程，通过函数调用可建立主窗 口以及对应的线程。每个线程有一个消息队列，主窗口从这一消息队列中获取消息并由窗口过程（回调函数）进行处理。 MiniGUI的目标是保持现有小巧的特点，在 Linux 控制台上提供一个小 的窗口系统支持，“小”是MiniGUI的特色。同时MiniGUI又将尽力与微软的 MSWindows API保持兼容。这么定位是希望MiniGUI可以在未来以Linux 为基础的应用平台上提供一个简单可行的 GUI 支持系统，让MiniGUI 可以 应用在 Windows CE 可以应用的任何场合。3）QT/EmbeddedQt是Trolltech 公司的一个产品，是一个多平台的C+图形用户界面应用程序框架。它提供给应用程序开发者建立艺术级的图形用户界面所需的所有功能。Qt是完全面向对象的很容易扩展，并且允许真正地组件编程。 自从1996年早些时候，Qt进入商业领域，它已经成为全世界范围内数千种成功的应用程序的基础。Qt也是流行的Linux桌面环境KDE 的基础，KDE是所有主要的Linux发行版的一个标准组件。 Qt/Embedded 是 Trolltech 公司的另一个产品，虽然走Open Source开发路线，采用GPL授权，但商业用的要付费。Qt/Embedded是Qt的嵌入式Linux端口，是完整的自包含C+GUI和基于Linux的嵌入式平台开发工具。大范围的Qt/Embedded API可用于多种开发项目。Qt/Embedded可以开发市场上多种类型的产品和设备，从消费电器（移动电话、联网板和set top盒）到工业控制设备（如医学成像设备、移动信息系统等）。这套环境提供的API和Qt/Windows 与Qt/X11相同，但不需要使用到X11，取而代之的提供从硬件接口、绘图程序库和完整的GUI工具。Qt/Embedded 对存储内存的需求约在800kB到3MB（Intel 下x86）。其另一个特点就是跨平台，用Qt API开发出来的应用程序，可以在不同的操作系统和视窗系统上执行，如图3-2所示。2.3 GUI的组成桌面：在启动时显示，也是界面中最底层，有时也指代包括窗口、文件浏览器在内的“桌面环境”。在桌面上由于可以重叠显示窗口，因此可以实现多任务化。一般的界面中，桌面上放有各种应用程序和数据的图标，用户可以依此开始工作。桌面与既存的文件夹构成里面相违背，所以要以特殊位置的文件夹的参照形式来定义内容。比如在微软公司的Windows XP系统中，各种用户的桌面内容实际保存在系统盘（默认为C盘）：Documents and Settings用户名桌面 文件夹里。 墙纸，即桌面背景。可以设置为各种图片和各种附件，成为视觉美观的重要因素之一。 视窗：应用程序为使用数据而在图形用户界面中设置的基本单元。应用程序和数据在窗口内实现一体化。在窗口中，用户可以在窗口中操作应用程序，进行数据的管理、生成和编辑。通常在窗口四周设有菜单、图标，数据放在中央。 在窗口中，根据各种数据/应用程序的内容设有标题栏，一般放在窗口的最上方，并在其中设有最大化、最小化（隐藏窗口，并非消除数据）、最前面、缩进（仅显示标题栏）等动作按钮，可以简单地对窗口进行操作。 单一文件界面：在窗口中，一个数据在一个窗口内完成的方式。在这种情况下，数据和显示窗口的数量是一样的。若要在其他应用程序的窗口使用数据，将相应生成新的窗口。因此窗口数量多，管理复杂。 多文件界面：在一个窗口之内进行多个数据管理的方式。这种情况下，窗口的管理简单化，但是操作变为双重管理。 标签：多文件界面的数据管理方式中使用的一种界面，将数据的标题在窗口中并排，通过选择标签标题显示必要的数据，这样使得接入数据方式变得更为便捷。 上述中，多文件界面主要是微软视窗系统采用。而在其他环境中，通常多是单文件界面，所以无所谓单一/多文件界面的称呼问题。 菜单：将系统可以执行的命令以阶层的方式显示出来的一个界面。一般置于画面的最上方或者最下方，应用程序能使用的所有命令几乎全部都能放入。重要程度一般是从左到右，越往右重要度越低。命定的层次根据应用程序的不同而不同，一般重视文件的操作、编辑功能，因此放在最左边，然后往右有各种设置等操作，最右边往往设有帮助。一般使用鼠标的第一按钮进行操作。 即时菜单（又称功能表）：与应用程序准备好的层次菜单不同，在菜单栏以外的地方，通过鼠标的第二按钮调出的菜单称为“即时菜单”。根据调出位置的不同，菜单内容即时变化，列出所指示的对象目前可以进行的操作。 图标：显示在管理数据的应用程序中的数据，或者显示应用程序本身。数据管理程序，即在文件夹中用户数据的管理、进行特定数据管理的程序的情况下，数据通过图标显示出来。通常情况下显示的是数据的内容或者与数据相关联的应用程序的图案。另外，点击数据的图标，一般可以之间完成启动相关应用程序以后再显示数据本身这两个步骤的工作。 应用程序的图标只能用于启动应用程序。按钮：菜单中，利用程度高的命令用图形表示出来，配置在应用程序中，成为按钮。应用程序中的按钮，通常可以代替菜单。一些使用程度高的命令，不必通过菜单一层层翻动才能调出，极大提高了工作效率。但是，各种用户使用的命令频率是不一样的，因此这种配置一般都是可以由用户自定义编辑。3 QT技术Qt是诺基亚开发的一个跨平台的C+图形用户界面应用程序框架。它提供给应用程序开发者建立艺术级的图形用户界面所需的所用功能。Qt是完全面向对象的，很容易扩展，并且允许真正地组件编程。自从1996年早些时候，Qt进入商业领域，它已经成为全世界范围内数千种成功的应用程序的基础。Qt也是流行的Linux桌面环境KDE 的基础。 基本上，Qt 同 X Window 上的 Motif，Openwin，GTK 等图形界 面库和 Windows 平台上的 MFC，OWL，VCL，ATL 是同类型的东西，但Qt具有优良的跨平台特性、面向对象 、丰富的API、大量的开发文档等优点。3.1 QT的优势面向对象 ：Qt 的良好封装机制使得 Qt 的模块化程度非常高，可重用性较好，对于用户开发来说是非常 方便的。 Qt 提供了一种称为 signals/slots 的安全类型来替代 callback，这使得各个元件 之间的协同工作变得十分简单。 丰富的 API：Qt包括多达 250 个以上的 C+ 类，还提供基于模板的 collections， serialization， file， I/Odevice， directory management， date/time 类。甚至还包括正则表达式的处理 功能。 支持 2D/3D 图形渲染，支持 OpenGL ，大量的开发文档 ，XML 支持 ，Webkit 引擎的集成，可以实现本地界面与Web内容的无缝集成 但是真正使得 Qt 在自由软件界的众多 Widgets (如 Lesstif，Gtk，EZWGL，Xforms，fltk 等等)中脱颖而出的还是基于 Qt 的重量级软件 KDE 。3.2 QT图形用户界面Qt的图形用户界面的基础是QWidget。Qt中所有类型的GUI组件如按钮、标签、工具栏等都派生自QWidget，而QWidget本身则为QObject的子类。Widget负责接收鼠标，键盘和来自窗口系统的其他事件，并描绘了自身显示在屏幕上。每一个GUI组件都是一个widget，widget还可以作为容器，在其内包含其他Widget。QWidget不是一个抽象类。并且可以被放置在一个已存在的用户界面中;若是Widget没有指定父Widget，当它显示时就是一个独立的视窗、或是一个顶层widget。QWidget显示能力包含了透明化及Double-Buffering。Qt提供一种托管机制，当Widget于创建时指定父对象，就可把自己的生命周期交给上层对象管理，当上层对象被释放时，自己也被释放。确保对象不再使用时都会被删除。3.3 QT Creator的特点以及优势Qt Creator是跨平台的 Qt IDE， Qt Creator 是 Qt 被 Nokia 收购后推出的一款新的轻量级集成开发环境（IDE）。此 IDE 能够跨平台运行，支持的系统包括 Linux（32 位及 64 位）、Mac OS X 以及 Windows。根据官方描述，Qt Creator 的设计目标是使开发人员能够利用 Qt 这个应用程序框架更加快速及轻易的完成开发任务。在功能方面，Qt Creator 包括项目生成向导、高级的 C+ 代码编辑器、浏览文件及类的工具、集成了 Qt Designer、Qt Assistant、Qt Linguist、图形化的 GDB 调试前端，集成 qmake 构建工具等。Qt Creator 主要是为了帮助新 Qt 用户更快速入门并运行项目，还可提高有经验的 Qt 开发人员的工作效率。 使用强大的 C+ 代码编辑器可快速编写代码 ，语法标识和代码完成功能输入时进行静态代码检验以及提示样式上下文相关的帮助代码折叠括号匹配和括号选择模式高级编辑功能。 使用浏览工具管理源代码，集成了领先的版本控制软件，包括 Git、Perforce 和 Subversion开放式文件，无须知晓确切的名称或位置搜索类和文件跨不同位置或文件沿用符号在头文件和源文件，或在声明和定义之间切换。 为 Qt跨平台开发人员的需求而量身定制 ，集成了特定于 Qt 的功能，如信号与槽 (Signals & Slots)图示调试器， 对 Qt 类结构可一目了然集成了 Qt Designer 可视化布局和格式构建器只需单击一下就可生成和运行 Qt 项目。4图片查看器程序的移植过程尽管已经图片查看器出现很多年，但是它对很多人来说还是个新鲜事物。图片查看器通过液晶的屏幕来显示数字相片，可以通过读卡器接口从SD卡获取数字相片信息，并可设置循环显示方式，比普通相框更加灵活多变，也给日益增多的数码相片提供一个新的展示空间。4.1 移植QTQT是一个跨平台的C+图形用户界面库，是专为小型设备提供丰富的窗口小部件（Widgets）支持串口部件的定制，可以为用户提供漂亮的图形界面。QT是开源的图形界面软件，也是最流行的图形界面之一。4.1.1 QT源代码编译第一步：在ftp：/第二步：编译qt-x11-free-3.3.7(1) tar zxvf qt-x11-free-3.3.7(2) cd qt-x11-free-3.3.7(3) ./configure(4) /user/bin/gmake4.1.2 交叉编译编译qt-embedded-free-3.3.7(1) tar zxvf qt-embedded-free-3.3.7(2) cp qt-x11-free-3.3.7/bin/uic qt-embedded-free-3.3.7/bin(3) cp qt-x11-free-3.3.7/bin/moc qt-embedded-free-3.3.7/bin(4) cd qt-embedded-free-3.3.7(5) ./configure shared thread embedded arm qvfb -freetype-depths4,8,16,24,32 qtgif qtlibpng qtlibmng qtlibjpeg sqlite no qvfb/usr/bin/gmake (6) 运行qt-embedded-free-3.3.7/example/hello/hello:#cd qt-embedded-free-3.3.7/example/hello./hello-qws如果屏幕显示hello，就说明移植成功。4.2 程序开发环境4.2.1 主程序中创建类在主程序中建一个mainwindows类，用来显示开机界面并接受开机界面上的点击事件。（1）主程序中建一个setting类，初始化为隐藏，用来配置设置图片格式。当显示开机界面时点击到配置图标，该类的对象显示，显示出配置界面。（2）主程序中建一个play类，初始化为隐藏。显示开机界面后，如果点击到播放按钮，开始载入图片。（3）设置完毕。 4.2.2 制定程序框架QT简单易用，功能强大，用它来实现该作品的功能，写在程序上省去了很多事。它提供对大多数目前流行图片格式的支持，如BMP,PNG,JPEG等，并且可以对图片进行加工。我们可以通过QT编程，实现图片的翻转，扭曲，缩放，重叠，以及播放幻灯片的各种切换效果。用触摸屏实现输入操作，进行界面切换。4.2.3 编辑调试程序程序用C+编写，在windows主机系统下用source insight软件编辑，通过文件共享，在虚拟机linux环境下编译，具体步骤如下：（1）在windows主机和linux虚拟机的共享目录下，打开source insight软件，建一个工程，然后在工程里新建图片查看器文件，这样，类成员会自动补齐。（2）编辑完毕，保存。（3）进入虚拟机的图片查看器工程路径，执行以下命令，进行编译。./bin/qmake-project./bin/qmakemake（4）挂载开发板，调试（用NFS）。进入开发板终端，执行相关命令，观看程序执行效果。（5）重复以上步骤，直至程序调试满意，然后把调试好的程序烧入板子的S3C2440L芯片中脱机运行。4.3 图片查看器程序设计4.3.1 预期达到的界面模型图4-1 预期成果4.3.2 源程序1) items.h#ifndef ITEMS_H#define ITEMS_H#include <QGraphicsItem>class QGraphicsSceneMouseEvent;class PixItem : public QGraphicsItem , public QObjectpublic: PixItem(QPixmap *pixmap); QRectF boundingRect() const; void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget); void timerEvent(QTimerEvent *); void mousePressEvent(QGraphicsSceneMouseEvent *); void mouseReleaseEvent(QGraphicsSceneMouseEvent *);private: QPixmap pix; QTimer *timer;#endif / ITEMS_H2) items.cpp#include "items.h"#include <QtGui>PixItem:PixItem(QPixmap *pixmap) pix = *pixmap;QRectFPixItem:boundingRect() const return QRectF(-2-pix.width()/2,-2-pix.height()/2,pix.width()+4,pix.height()+4);voidPixItem:paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget) painter->drawPixmap(-pix.width()/2,-pix.height()/2,pix);voidPixItem:timerEvent(QTimerEvent * ) update();voidPixItem:mousePressEvent(QGraphicsSceneMouseEvent * e) update(); QGraphicsItem:mousePressEvent(e);voidPixItem:mouseReleaseEvent(QGraphicsSceneMouseEvent * e) update(); QGraphicsItem:mouseReleaseEvent(e);3) main.cpp#include <QApplication>#include "mainwidget.h"int main(int argc, char * argv) QApplication app(argc,argv); MainWidget w; w.show(); return app.exec();4) mainwidget.cpp#include "mainwidget.h"#include <QtGui>#include <math.h>static const double PI = 3.14159265358979323846264338327950288419717;MainWidget:MainWidget(QWidget *parent) : QWidget(parent) angle = 0; scale = 5; shear = 5; translate = 50; QGraphicsScene *scene = new QGraphicsScene; scene->setSceneRect(-200,-200,400,400); QPixmap *pixmap = new QPixmap("images/rotate.png"); item = new PixItem(pixmap); scene->addItem(item); item->setPos(0,0); view = new QGraphicsView; view->setScene(scene); view->setMinimumSize(400,400); ctrlFrame = new QFrame; createControllFrame(); QHBoxLayout *mainLayout = new QHBoxLayout; mainLayout->setMargin(10); mainLayout->setSpacing(20); mainLayout->addWidget(view); mainLayout->addWidget(ctrlFrame); setLayout(mainLayout); setWindowTitle(tr("Graphics Item Transformation");voidMainWidget:createControllFrame() / Rotate Controll QGroupBox *rotateGroup = new QGroupBox(tr("Rotate"); QSlider *rotateSlider = new QSlider; rotateSlider->setOrientation(Qt:Horizontal); rotateSlider->setRange(0,360); connect(rotateSlider,SIGNAL(valueChanged(int),this,SLOT(slotRotate(int); QHBoxLayout *l1 = new QHBoxLayout; l1->addWidget(rotateSlider); rotateGroup->setLayout(l1); / Scale Controll QGroupBox *scaleGroup = new QGroupBox(tr("Scale"); QSlider *scaleSlider = new QSlider; scaleSlider->setOrientation(Qt:Horizontal); scaleSlider->setRange(1,10); scaleSlider->setValue(5); connect(scaleSlider,SIGNAL(valueChanged(int),this,SLOT(slotScale(int); QHBoxLayout *l2 = new QHBoxLayout; l2->addWidget(scaleSlider); scaleGroup->setLayout(l2); / Shear Controll QGroupBox *shearGroup = new QGroupBox(tr("Shear"); QSlider *shearSlider = new QSlider; shearSlider->setOrientation(Qt:Horizontal); shearSlider->setRange(0,9); shearSlider->setValue(5); connect(shearSlider,SIGNAL(valueChanged(int),this,SLOT(slotShear(int); QHBoxLayout *l3 = new QHBoxLayout; l3->addWidget(shearSlider); shearGroup->setLayout(l3); / Tranlate Controll QGroupBox *translateGroup = new QGroupBox(tr("Translate"); QSlider *translateSlider = new QSlider; translateSlider->setOrientation(Qt:Horizontal); translateSlider->setRange(0,100); translateSlider->setValue(50); connect(translateSlider,SIGNAL(valueChanged(int),this,SLOT(slotTranslate(int); QHBoxLayout *l4 = new QHBoxLayout; l4->addWidget(translateSlider); translateGroup->setLayout(l4); QVBoxLayout *ctrlLayout = new QVBoxLayout; ctrlLayout->addWidget(rotateGroup); ctrlLayout->addWidget(scaleGroup); ctrlLayout->addWidget(shearGroup); ctrlLayout->addWidget(translateGroup); ctrlLayout->addStretch(); ctrlFrame->setLayout(ctrlLayout);voidMainWidget:slotRotate(int value) item->rotate(value-angle); angle = value;voidMainWidget:slotScale(int value) qreal s; if (value>scale) s = pow(1.1,(value-scale); else s = pow(1/1.1,(scale-value); item->scale(s,s); scale = value;voidMainWidget:slotShear(int value) item->shear(value-shear)/10.0,0); shear = value;voidMainWidget:slotTranslate(int value) item->translate(value-translate,value-translate); translate = value;5) mainwidget.h#ifndef MAINWIDGET_H#define MAINWIDGET_H#include "items.h"#include <QWidget>class QGraphicsView;class QPixmap;class QFrame;class MainWidget : public QWidget Q_OBJECTpublic: MainWidget(QWidget *parent=0); void createControllFrame();public slots: void slotRotate(int); void slotScale(int); void slotShear(int); void slotTranslate(int);private: QGraphicsView *view; QFrame *ctrlFrame; PixItem *item; int angle; qreal scale; qreal shear; qreal translate;#endif / MAINWIDGET_H4.4 设计成果图4-2 linux上开发设计成品图4-3 Mini2440上开发的产品如图4-3所示，在输入命令运行以后，就可以看到如图所示的结果，由于触摸屏用起来不是很灵活，所以没有能过出现想电脑上面的效果。5结论本次设计是在Linux平台上，基于QT编译图片查看器。在设计的过程中，利用虚拟机创建一个系统，然后在red hat操作系统中搭建开发环境。熟悉嵌入式Linux系统的特点和结构，利用Mini2440开发板，进行软件程序的编写及烧写，最后实现简单的图片查看器功能。图片查看器要求简洁实用，界面美观，力求给人以精神上的享受。本设计围绕这一目标，突出界面的美化。该图片查看器功能简单，大体框架已具备。本设计基本实现了图片查看的功能，但其设计的硬件极其简单，由于成本，时间，技术等客观条件，无法实现较复杂的功能。本设计对嵌入式系统中很重要的一个部分，驱动程序的开发并未全部涉及。驱动程序开发是嵌入式系统中一个非常重要的环节，要开发一个图片查看器系统，需要编写大连设备的驱动程序代码。而且驱动程序也在不断的完善和发展中，最新型设备文件系统udev正在逐步取代老式的devfs。在将来条件允许的情况下，可以在此基础上进行很多修改和升级。参考文献1Fridenly Arm2440 开发手册2窦乔，孙建梅. 嵌入式系统开发基础，2010年:364-400