注：本人已购买韦东山老师第三期项目视频，内容来源《数码相框项目视频》，只用于学习记录，如有侵权，请联系删除。

1.数码相框需求框架

数码相框项目需求的框架如下图所示：

• ① 开发板上电后，进入主界面（Main page），在主界面中有 3 个触摸按钮：浏览模式、连播模式、设置。
• ② 点击浏览模式，进入到浏览界面（Explore page），浏览界面分成两部分：菜单、图标（文件或者文件夹）。其中菜单，向上：当我们进入了某个文件夹里，想要退出来，点击向上即可退出；选择：当我选中了某个图片之后，点击选择即可显示该图片；下页：可能文件夹非常多，在一个屏幕上显示不完，点击下页即可显示下一页的文件夹；上页：同理下页；功能就相当于一个文件浏览器了。
• ③ 点击 ② 中的文件图标，就进入到浏览界面（Browse page），在浏览界面中最上面的菜单用于返回上一浏览界面（Explore page）、缩小/放大图片、显示上一幅/下一幅图片、连续播放图片。
• ④ 点击连播模式，会进入到 Auto page 界面，显示某个目录下的第一张图片；在该界面中，每隔一定的时间就会显示下一幅图片；在显示的过程中，点击当前图片，则进入 Browse page，可以放大缩小当前图片。
• ⑤ 点击设置，进入设置界面（Setting page），在该界面有有两个触摸按钮：选择目录、设置间隔；点击选择目录则进入Explore page界面，让我们选择某一个文件夹用于连播模式的图片播放；点击设置间隔，会进入 Interval page 界面，点击该界面的上下两个三角形，可设置间隔时间的加减。

2.数码相框程序框架

为了更加容易实现数码相框的功能需求，我们采取由上而下的方法设计程序框架，程序框架如下图所示：

• ① 在数码相框的项目需求中有很多界面，为了更好的管理这些界面，我们需要以面向对象的思想抽象出一页的结构体（PageAction），并使用 page_manager.c 来管理这些结构体；该结构体的成员如下，后面会再一步一步的完善该结构体：

  PageAction {.run() /* 涉及显示文字和图片 */.GetInputEvent()  /* 获取输入事件 */.Prepare() /* 预先准备好下一个可能的操作对应的图片 */
  };
  

• ② 上层的 main.c 调用某个 Page(“main”) 中的 Run()函数， Run()函数就会就会取到 main_page.c 这个文件抽象出来的 PageAction 结构体，调用里面的 Run()函数，就会显示出 Main page 界面，就会调用底层的 render.c，根据上层的要求，调用 freetype 库函数（显示文字）或者调用 libjpeg 库函数（显示图片）来得到位图，怎么显示呢？调用底层的 disp_manager.c 在 framebuffer 上显示；
• ③ 怎么获得输入呢？调用 PageAction 结构里的 GetInputEvent() 函数，最终访问到硬件，即调用 input_manager.c 来根据上层要求，touchscreen.c（触摸屏输入）来获取输入事件。