人机交互试验任务书.pdf

人机交互人机交互人机交互人机交互 试验任务书试验任务书试验任务书试验任务书 郑郑郑郑州州州州华华华华信信信信学学学学院院院院 实验一实验一实验一实验一平面二维平面二维平面二维平面二维 GUIGUIGUIGUI 图形系统编程试验图形系统编程试验图形系统编程试验图形系统编程试验 一 实验目的及要求一 实验目的及要求 1 了解 GUI 图形系统如何编程 2 熟悉 GUI 图形系统平面绘图得方法 3 了解嵌入式应用程序操作硬件显示设备的基本原理 4 从人机交互的角度认识显示界面设计的原则和方法 5 进一步熟悉 C 程序逻辑的编辑 编译 连接和运行的过程 二 实验学时二 实验学时 8学时 三 实验任务三 实验任务 1 熟悉 VC 6 0 集成环境 并学会 GUI 图形系统模拟器的使用方法 2 根据 GUI 的操作方法 最后完成一个时钟界面的编程 四 试验步骤四 试验步骤 1 1 1 1 GUIGUIGUIGUI 图形系统原理图形系统原理 1 11 1 文件夹结构文件夹结构 在官方发布的UCGUI的源码包当中 附有很多的示例 源码与示例都打包成 一个VC工程 在这个工程中我们可以编译和运行UCGUI的示例 进行UCGUI的图 形编程 非常方便 这个工程结构下 Application UCGUI应用程序目录 Config UCGUI配制文件目录 GUI UCGUI源码文件 Simulation 模拟器库文件 模拟器头文件目录 主要有GUISim lib这个提供模 拟器的库文件 System 应用程序的接口调用主文件 即调用用户的MainTask函数的main函 数 在这个官方提供的包中 我们进行 UCGUI 的图形编程时 大多都是将要写的 程序源文件放加到 Application 目录中 其中应用程序中必不可少要提供的一个函 数是 MainTask 好奇的朋友会发觉 我们程序并没创建窗口 为什么一运行就 有窗口界面并有一个LCD显示屏显示出自己的UCGUI程序的运行效果出来 其实 这些我们看不到的代码都是写在GUISim lib这个库文件当中的 为了了解模拟器具 体做了些什么 我通过反编译 还原了官方模拟器的源码 下面详细介绍模拟器的 构成 以下均为官方模拟器采用的方法 1 21 2模拟器完成那些工作模拟器完成那些工作 GUISim lib主要完成以下几件事 具体的模块划分将在文中后面描述 创建模 拟器主窗口 这个窗体包括一些模拟器控制菜单 如打开LOG记录 打开调色板显示 窗体 新建LCD模拟器窗体 以及暂停 继续模拟器 创建一个LCD模拟显示窗口并初 始化其显示所需的各种数据结构 LCD窗口的大小由UCGUI中LCDConf h中配制时 指 定 LCD XSIZE LCD YSIZE 及 其 它 的 诸 如 每 个 象 素 占 用 多 少 位 LCD BITSPERPIXEL 首先分配一块足够大的显存 4M 并初始化这块数据为0 每 个象素占用不大于 8位时模拟显示屏幕需要用到8位图 还必须初始化要用到的调色 板 提供操作LCD模拟显示屏幕的几个基本图形函数 UCGUI是一个设计层次非常 清晰的图形系统 它将GUI的底层图形功能作为一层向上层提供最基本的图形功能 只有这一层才与具体的硬件相关 这一层包括基本的画点函数 矩形填充函数 调色板 初始化函数 颜色索引与RGB的转换函数 提供上层的LOG记录接口的实现 主要完成UCGUI中调试信息的输出 是 否输出调试信息可以由UCGUI中的一个开关设置 开启一个新的线程 在此线程中调用System Main c中的main 函数 此函 数中再调用MainTask 函数 这个函数即为我们在模拟器中编程必须提供的一个 函数 在单任务情形下UCGUI的程序均写在MainTask函数当中 供模拟器开启 的线程调用 这里必须分清楚 主线程创建模拟器主窗口及LCD模拟窗口 UCGUI图形应用程序以新开的另外一个线程运行 这个线程结束时则UCGUI图 形应用程序结束 从LCD模拟器窗口消息函数当中接收KEY消息及MOUSE消息 并通过 UCGUI中的KEY及MOUSE接口传送到UCGUI内部以驱动UCGUI事件消息 LOOP 1 31 3LCDLCD模拟显示器的实现原理模拟显示器的实现原理 1 上文中已经提到了UCGUI是一个设计层次分明的图形系统 具体的图 形功能分为一层 再细化图形层 还可细分为两层 层一是最底层的直接实现 基本的画点函数 矩形填充函数 调色板初始化函数 颜色索引与RGB的转换函 数 这一层与直接的硬件及调色板相关 由模拟器中的LCDSIM c文件实现 层二是 位于上述层一之上 提供更多更强图形功能的函数 如位图 1位 2位 4位 8位 16 位 显示函数 水平垂直画线函数 矩形填充函数 画点函数 这些功能在 LCDDriver LCDWin c中完成 这一层当中的画点函数均以宏的形式提供 具体 实现由上述更低的上述层一即模拟器的图形驱动来实现 在WIN环境下 实现这个模拟器比较简单 要做的就是将GUI的结果显示 给用户看 即做出一个LCD模拟显示器 将GUI画图的结果呈现在上面 GUI画图的结果在显存中 所以也就是将显存中的GUI画图数据用位图显示 出来 处理这个位图显示时 可以分两种情况 第一种情况是单个象素点占 8位及8位以下的情况 此时显示位图需要用到调色板 所以初始化时必须初 始化调色板 每个象素点简化处理为占用一个字节 8位以下实际情况下并 非如此 实际是几位就占几位 值表示的是该象素点在调色板中的颜色索引 此时将显存中的数据以8位位图来显示处理 第二种情况是单个象素点占用 8位以上的情况 这种情况下 每个象素点简化处理为占用4个字节 实际情 况占几位就是几位 其值表示的是实际的该点的RGB颜色值 此时将显存 中的数据以32位位图来显示处理 2 在LCD窗口中 将GUI画图的结果以上述位图形式画到LCD窗体当中并隔 一定时间刷新显示 虽然这样做不一定在速度上非常准确实时 但基本上可以 满足要求了 只要我们设定一个重画定时器 定时检测在显示中数据是否发生 变化 有变化则刷新一次LCD窗口中显示的内容 可以满足要求 3 在解决了模拟LCD显示的问题后 还有要弄清的问题是 要显示器的一 屏象素的存放位置 也即画图时所读写象素的内存 其实只需开一块足够大的 内存来存放一屏LCD的象素 读写象素均在此块内存中 我们可以称此块内存 为显存 如LCD宽XSize 高YSize 显存起始地址为pFix 单个象素点占用8 位或8位以下 此时一个象素占1字节 则象素点 x y 的在显存中的地址即为 x y YSize pFix 如果是单个象素点占8位以上 此时一个象素占四字节 则为 x y YSize 4 pFix 显存中象素是按行存放的 如果为了查看器 ucguiview 可以同样显示出独立运的模拟器程序的GUI画图结果 那么这个显存必须以内存 映象文件的方式来实现多个进程之间内存共享访问支持 4 关于一个象素用多少位来表示的问题 其实这个问题与几位位图是一个意思 位 图中 8位及8位以下的均会使用一个调色板 原因 用调色板 实际为一维组 表项 个数由位图位数决定 可以以颜色索引来表示出一个象素点的RGB颜色 调色板中每 一个表项存的是该表项索引对应的RGB颜色值 在位图存储时只须要将该位图对应 的调色板数组存起来 那么存单个象素点时仅须要存其对应索引而不需要存4个字节 的RGB颜色值 这样节约空间 位图中的数据为调色板中颜色的索引值 没有调色 板是无法解析显示此位图的 所以8位及位以下位图对应的BMP文件会多出一个调色 板内容 8位以上的位图 其位图数据即为RGB值或索引值 16位时 16位 24位 32 位 单象素分别占用2 3 4个字节 这里必须注意区别的是 我们这里所说的位图一个象 素所占用情况分析 是指位图存储为文件时的占用情况 其中也并没有提到具 体一个象素点中R G B分别占用多少位 特别对于16位的情况下 RGB占用情况 一般分5 6 5或5 5 5 此时R G B中可以表示的最大值索引值为64 此时无法表示 出0 x0 0 xff之间255种颜色 所以16位位图中的象素点数据还是直接的颜色索引 值 并非直接RGB颜色值 但此时并不须要用调色板来辅助转化此索引值为RGB 颜色值 而是通过一个转换算法 不过这样会对速度产生影响 没有使用调色 板快 不采用调色板是因为需要太多调色板表项 注意 关于位图文件 这时就不多介绍了 介绍大家下载这篇文章看一下 BMP 档案结构及平滑缩放 doc 也可以自己通过WIN下面自带的画板来分析不同位 数的位图 总之只要记住一点 要处理显示一个位图文件 必须知道位图文件 大小及单个象素占用位数 即位图位数 然后显示时就是取得每个象素点的RGB 值 这个RGB颜色值是根据调色板来取得或者由索引根据一定的转换算法取得 或者象素点数据本身就表示RGB值 5 LCD BITSPERPIXEL是UCGUI中定义的一个象素用多少位来表示的宏定义 则可 以表示的颜色总数为1L LCD BITSPERPIXEL种 但是RGB分别占多少位 则 其可表示的具体哪些颜色是不同的 模拟器中以LCD FIXEDPALETTE表示 R G B 正常情况下没有进行R B交换时 分别所占位数 主要有444 12 555 15 565 16 等 一个象素是由RGB三值来描述 RGB三值范围都是0 x00 0 xf 所以 除非每种颜色都用 r g b 8位表示 否则不可能把0 x00 0 xf的值均表示到 另外 对于每一种可显示的颜色模拟器中均以索引值来表示 最基本的画象素的 LCDSIM SetPixelIndex int x int y int Index 中用的是索引值 这个索引值可 以通过一种转换转为RGB值 6 颜色索引值到RGB值的转换 索引转换成RGB的基本原理 这里我们不讲含调色 板的情况 首先 对于RGB三值 由FixedPalette指定其每个位所占的位数 如为444则各4位 FixedPalette中指定能表示的RGB的范围分别为 R G B 1111 1111 1111 即16 R 16 G 16 B 则当索引值Index为444时 则是RGB各 值索引最大的时候 由此即可分析 R G B三值要表示的颜色范围是0 x00 0 xff 为了让有限的0 16的索引来表示0 x00 0 xff这些颜色值 那么当然只能是跳隔着 来表示 拿R来说 最好是取值为 17 0 17 1 17 2 17 3 17 15 248 如此的话 才能差不多在有限的16个索引值下将0 xff种颜色最大程度的涵盖到 比较平均 但实际你可以自己控制索引到RGB颜色值的转换算法 但一定要合 理 尽可能涵盖全面 同理 对于FixedPalette为555时 则R取值最好为 8 0 8 1 8 2 8 3 8 31 243 同理 对于FixedPalette为565时 则B取值最好为 4 0 4 1 4 2 4 3 4 63 252 知道这一点 则对于以下函数的理解就非常容易 7 在LCD BITSPERPIXEL小于等于8时 颜色索引值则无须通过运算来转换 因为它所能表示的颜色数不多于256种 此时我们就会用一个调色板来表示这不 多于256种的颜色 取用也非常方便 通过调色板数组就可以取得索引对应的 RGB值 对FixedPalette为111时 调色板中只有八种颜色 不须要256个选项 8 种 为 0 x000000 0 0 x0000ff 1 0 x00ff00 2 0 x00ffff 3 0 xff0000 4 0 xff00ff 5 0 xffff00 6 0 xffffff 7 即调色板索引为 0 7 其余对于FixedPalette 为111时并未用于 初始化调色板时 要先调用LCD L0 Index2Color i 将Index 转为RGB表示的颜色 再与黑白成比例综合 这样了就可适应所有实际使用调 色板为2项 4项 8项 16项 256项的所有用到调色板的情况 另外还要提到 的是在8位以下的灰度问题 灰度时 R G G三值相等 所以最多可以有256级灰 度 其中二级灰度 四级灰度 十六级等 都是间隔着取256级灰度中的颜色值 取的方法是平均涵盖 以上六点是LCD模拟显示器中用到的几点核心要点 要理解LCD模拟显示 器 就必然先理解以上几点 1 41 4实现实现LCDLCD功能的几个基本函数功能的几个基本函数 1 LCDSIM SetPixelIndex 画点 2 LCDSIM FillRect 矩形填充 3 Convert Index16IntoIndex32 转换象素位数大于8位时的颜色索引为RGB 颜色值 4 LCDSIM GetPixelColor 取点RGB颜色值 5 LCDSIM Index2Color 根据索引转换成RGB值 6 LCDSIM GetPixelIndex 获取指定屏幕坐标点的颜色索引 7 LCDSIM SetLUTEntry 设置调色板信息 在上面介如了模拟器的基本原理 差不多将核心的东西都说出来了 这时简要的说 明一下模拟器的几个构成模块 emWin c 创建UCGUISim模器主窗口及LCD显示窗口 处理KEY MOUSE 消息传送 开启 暂停UCGUI程序 输出LOG等 LCDSIM c 实现模拟LCD显示屏 Branding c 显示版权 GUI X SIM c 实现UCGUI的临界代码锁及实际的LOG输出及延时功能 具体可以能见源码 这里就不就代码作详细解说了 2 2 2 2 先练习 先练习 GUIGUIGUIGUI 图形系统模拟器的使用方法用 图形系统模拟器的使用方法用 V V V VC C C C 6 6 6 6 0 0 0 0 打开模拟器工程文件 打开模拟器工程文件 然后编译 把下面的程序编译完运行测试 看效果 然后编译 把下面的程序编译完运行测试 看效果 voidvoidvoidvoid MyTask void MyTask void MyTask void MyTask void intintintint CntCntCntCnt 0 0 0 0 intintintint i YPos i YPos i YPos i YPos intintintint LCDXSizeLCDXSizeLCDXSizeLCDXSize LCD GET XSIZE LCD GET XSIZE LCD GET XSIZE LCD GET XSIZE intintintint LCDYSizeLCDYSizeLCDYSizeLCDYSize LCD GET YSIZE LCD GET YSIZE LCD GET YSIZE LCD GET YSIZE const const const const GUI BITMAPGUI BITMAPGUI BITMAPGUI BITMAP pBitmap pBitmap pBitmap pBitmap GUI Init GUI Init GUI Init GUI Init do do do do GUI SetBkColor GUI RED GUI SetBkColor GUI RED GUI SetBkColor GUI RED GUI SetBkColor GUI RED GUI Clear GUI Clear GUI Clear GUI Clear GUI Delay 1000 GUI Delay 1000 GUI Delay 1000 GUI Delay 1000 GUI SetBkColor GUI BLUE GUI SetBkColor GUI BLUE GUI SetBkColor GUI BLUE GUI SetBkColor GUI BLUE GUI Clear GUI Clear GUI Clear GUI Clear GUI Delay 1000 GUI Delay 1000 GUI Delay 1000 GUI Delay 1000 GUI SetColor GUI WHITE GUI SetColor GUI WHITE GUI SetColor GUI WHITE GUI SetColor GUI WHITE forforforfor i 0 i 0 i 0 i 0 i 50 i 50 i 50 i 50 i 10 i 10 i 10 i 10 GUI DrawHLine i 0 100 GUI DrawHLine i 0 100 GUI DrawHLine i 0 100 GUI DrawHLine i 0 100 GUI DispStringAt LineGUI DispStringAt LineGUI DispStringAt LineGUI DispStringAt Line 0 i 0 i 0 i 0 i GUI DispDecMin i GUI DispDecMin i GUI DispDecMin i GUI DispDecMin i GUI Delay 1000 GUI Delay 1000 GUI Delay 1000 GUI Delay 1000 此部分程序可以屏蔽看效果此部分程序可以屏蔽看效果 GUI SetColor GUI GREEN GUI SetColor GUI GREEN GUI SetColor GUI GREEN GUI SetColor GUI GREEN GUI SetBkColor 0 xffffff GUI SetBkColor 0 xffffff GUI SetBkColor 0 xffffff GUI SetBkColor 0 xffffff forforforfor i 50 i 50 i 50 i 50 i 210 i 210 i 210 i 210 i i i i intintintint lenlenlenlen i 130 i 130 i 130 i 130 i 50i 50i 50i 50 210 i 210 i 210 i 210 i GUI DrawHLine i 20 len 20 GUI DrawHLine i 20 len 20 GUI DrawHLine i 20 len 20 GUI DrawHLine i 20 len 20 GUI Delay 1000 GUI Delay 1000 GUI Delay 1000 GUI Delay 1000 GUI Clear GUI Clear GUI Clear GUI Clear while 1 while 1 while 1 while 1 然后改变程序里面的部分参数设置或者屏蔽一部分程序 再看效果 把模拟器的效果看出来 2 2 2 2 根据试验任务的要求 本次试验重点用到的函数是文本显示 根据试验任务的要求 本次试验重点用到的函数是文本显示 2 2 2 2 维维 GUIGUIGUIGUI 图形库 以图形库 以及及 GUIGUIGUIGUI 的基本参数设置等函数 根据这些情况 下面分别测试相关函数 的基本参数设置等函数 根据这些情况 下面分别测试相关函数 在一固定位置显示一字符函数 GUI DispCharAt U16 cI16Px I16Py 此函数表示在屏幕的 x y 坐标显示 C 字符 GUI DispStringAt constcharGUI FAR s x y 此函数表示在屏幕的 x y 坐标显示 s 字符串 GUI DispDec