【MCU实战经验】+stm32f407+华丽MP3界面初探

wangsei111 提问时间：2014-4-7 12:30 /

先看一下效果，初学者之作，如有雷同，纯属巧合，高手勿喷，

照片不是很清晰，实际效果要好，这里没有加入频谱与歌词显示，频谱觉得没必要，歌词显示还没来得及加，现在分享一下做的步骤，有改进或者错误的地方还请高手指正。
准备工作：
1，硬件：触摸屏+stm32f4 +SD+flash，SD卡用来存储歌曲以及图片，图标等，flash用来存储字。
2，软件：FATFS+图片解码+音频解码+各类驱动函数，无操作系统。由于这里主要是界面初探，这些东西就不介绍了。
步骤：
1，设计思路：我们所看到的界面不过是像素堆积而成，所以我这里只通过画图函数和解码图片就能显示出精美的界面，触摸动作通过这两种方式改变显示的内容就行了，说到这里大家是不是觉得这个界面也没什么复杂的。
2，图标以及图片的来源：（1）截图；（2）自己画；（3）用现成的；把图片放到相应文件夹下，用以区别。有了图片和图标之后，只需要给予她们坐标，然后通过图片解码函数就能显示出来了，当然图片的质量越高效果越好，那如何知道合适的坐标呢？我这里是先将这些图标命名，用以区别，然后通过图片处理软件在电脑上先将界面合成，坐标就有了。这是一个比较细致的活，特别是当触摸动作的时候如果要改变图标，那么两个图标的像素大小以及位置比例都必须一样，否则看起来就不像那么一回事了。
3，进度条以及音量条，是通过画图函数实现的，由四部分组成，一部分是整体部分，这部分长度固定，颜色可以选择浅灰色或者白色，随意，看着怎么舒服怎么来；第二部分是进度部分，这部分长度变化，这里选择一秒刷新一次，刷新时可以选择刷新整个进度长度或者之增减，没有什么区别；第三部分是进度条头部部分，宽度与颜色都随意，随着进度条变化，最后就是数字显示的部分了，我这里选择显示在右下角。
4，歌曲信息显示，只要明白怎么操作文件就知道这些信息是怎么来的了，显示的话就是通过在不同的坐标下显示字符串，很简单。
5，主要功能实现，这里就通过函数来实现了，首先要将各个函数与对应的动作对应起来，新建一个头文件，将对应位置和图标的动作封装起来，当然要用到触摸检测函数，然后在相应的文件里编写函数就行，有一点就是要记录上一次的动作，比如暂停按钮，才能知道这一次的动作。除此之外最重要的就是MP3文件的处理以及控制了，这里就不介绍了，网上有大量的资料。
结语：
其实只要精通了那些基本的东西，做一个界面其实是很简单的事情，当初困扰自己的就是想法，自己在这里主要只是分享一下想法以及实现步骤，希望能给别人一些建议。
由于是基于f4discovery做的，所以当初做的时候增加了一个单击控制播放与暂停，双击控制退出的功能，当然实现起来也比较简单，主要是通过板载的lis302加速度计的双击与单击识别来实现的，自己感觉比较酷，也分享一下。