' O4 Y6 @9 i3 t
7 b# j. W6 \1 P4 H2 Q; A

特别说明：完整STemWin的1-60期教程和配套实例下载地址：链接

第12章      JEPG图片显示

    本期主要讲emWin支持的JPEG图片的显示，官方支持的主要有两种显示方法，一种是从外部存储器读取数据到内部存储器后，再显示图片，这种的显示速度要快些。另一种方法是直接从外部存储器读取数据并显示，这种办法的好处就是不要大的RAM需求，每次读取一些数据显示一次，坏处就是显示速度比较的慢。

    由于官方提供的JPEG的显示方法比较耗RAM，这里将2MB的外部SRAM做为emWin的动态内存。

    12. 1  JPEG图片支持

    12. 2 绘制已经加载到存储器的JPEG图片

    12. 3 绘制无须加载到存储器的JPEG图片

    12. 4 实验总结

12.1  JPEG图片支持

    JPEG（读音为 “jay-peg”）是全彩和灰度图像的标准压缩方法。JPEG用于压缩 “真实世界”的景象、线条画、卡通，其他非现实图像并不是其强项。JPEG会有损耗，意指输出图像与输入图像并不完全相同。因此，如果您必须达到完全相同的输出位，则不能使用JPEG。不过，对于常见的照片图像，可以得到非常好的压缩级别，看不出变化。并且如果您能容忍低质量的图像，则可以实现相当高的压缩级别。

    这里有一点要特别的注意：出于法律原因，不得分发JPEG算术编码变体的代码。JPEG规范的算术编码选项似乎属于归IBM、AT&T和Mitsubishi所有的专利。因此，从法律上讲，如未获得一个或多个许可，则不能使用算术编码。因此，尚未包含对算术编码的支持。（由于算术编码相对于未获专利的Huffman模式仅具有限界收益，因此不太可能有太多实施支持它。）JPEG文件支持不包含提供标准中定义的层次式或无损流程。

12.1.1      JPEG格式图标转换

    某些情况下，将JPEG文件作为C文件添加到项目中非常有用。这时，首先需要将JPEG文件转换为C文件。使用emWin随附的工具Bin2C.exe可完成此任务。这个Bin2C.exe工具在STemWin软件包里面没有，需要到MDK安装目录里面找。下面我们下图JPEG格式的图片转换成C文件。

                               

l  打开软件加载上面的图片

l  加载后点击Convert即可，点击后没有任何现象，直接去图片所在的文件夹找即可

    实际运行代码如下（图片数据就不贴出来了，看本期教程配套的例子）

1. void MainTask(void)
   
2. {   
   
3.    GUI_Init();
   . e- d8 o2 {% G: y  v* g
4.    GUI_JPEG_Draw(_ac11, sizeof(_ac11), 0, 0);
   
5.     while(1)
   4 q  h1 C' Q! X# l3 O
6.     {
   
7.        GUI_Delay(100);
   & [$ i+ ]: _& }; P% N) e% u
8.     }
   7 y: v4 V, @0 k" Q& P  v4 ~
9. }

复制代码

    实际显示效果如下：

4 S8 z% l+ V4 O9 U12.1.2      JPEG存储器方式显示

    为了区分上面将图片转换为C文件进行显示，这里将JPEG图片存入到外部SD卡等存储器中进行加载显示。

    首先要注意JPEG需要的动态内存大小，一般图片显示不出来往往是因为动态内存不够造成的。JPEG解压缩大约需要33 Kb RAM用于与图像大小无关的解压缩和依赖大小的字节量。RAM要求可按以下方式计算：

        App.大约RAM要求=图像的X大小* 80字节+ 33千字节

    依赖于X大小的量取决于JPEG文件的压缩类型。下表显示了部分示例：

    解压缩所需的存储器由emWin存储器管理系统动态分配。绘制JPEG图像后，将释放整个RAM。为了形象说明，下面举一个例子：比如要显示800*480的jpeg大约需要800*80 + 33k = 97k的内存，鉴于这种情况，这里把外部的2MB的SRAM做为动态内存， 使用前记得初始化SRAM，然后就是在GUIconf.c文件里面初始化一下。

    STemWin支持的JPEG函数如下：

# Z+ e  L3 q; s) b9 x$ N  A8 Y

12.2  绘制已经加载到存储器的JPEG图片

    将图片加载到存储器后进行显示比较的耗内存，所以这里就使用开发板外置的2MB SRAM做STemWin的动态内存空间，并通过相应的API函数申请动态内存来加载SD卡等外部存储器中的JPEG图片。申请和释放STemWin动态内存的方法如下：

1. /* 申请一块内存空间 并且将其清零 */
     S( w0 B% d( N6 [- }1 C, Z: }" @
2. hMem = GUI_ALLOC_AllocZero(100000);
   
3. /* 将申请到内存的句柄转换成指针类型 */
   # T+ m) Y* B/ V/ z! X( x8 x
4. _acBuffer2 = GUI_ALLOC_h2p(hMem);
   
5. /* 释放申请的动态内存  */
   
6. GUI_ALLOC_Free(hMem);

复制代码

    比如我们要显示下面的JPEG格式的图片（800*480分辨率）：

    就可以把这个图片放到SD卡中，然后通过程序把这个图片数据全部的加载到SRAM中，最后在屏上进行显示。这个工程的实现主要分为如下三个部分：

Ø  SRAM和SD卡及其文件系统的初始化

Ø  图片的加载以及显示函数

Ø  主函数

    下面把这三部分详细的讲解下：

l  SRAM和SD卡及其文件系统的初始化，这部分函数与上面第11章的11.2小节一样。

l  图片的加载以及显示函数

1. /*
   $ C. ^3 Y8 d! s: W
2. *********************************************************************************************************
   8 U/ |- q! _7 f8 j
3. *    函 数 名: _ShowJPG
   5 K2 t6 d0 q  T, q! Q1 r
4. *    功能说明: 显示JPEG图片
   + `% P5 V: u$ f
5. *    形    参：sFilename 要显示的图片名字
   
6. *    返 回 值: 无
   
7. *********************************************************************************************************
   
8. */
     x$ ]: {7 ^: {/ }) P0 ]
9. static void _ShowJPG(const char * sFilename)
   # B9 S8 h: }% n2 f+ s% y. p; Q; G6 Z
10. {
    
11.      GUI_HMEM hMem;
    
12.      char *_acBuffer2;
    ! h; ^( D/ `6 X4 Q
13. 
    
14.      /* 申请一块内存空间 并且将其清零 */                                                               (1)
    & v" s9 Q9 [; ?( v' q/ D2 A
15.     hMem = GUI_ALLOC_AllocZero(1024*512);
    , |# a" L- L- c
16.      /* 将申请到内存的句柄转换成指针类型 */
    ; K6 d6 Y! k8 `
17.      _acBuffer2 = GUI_ALLOC_h2p(hMem);
    ) q8 l- u6 ^2 }, d
18. 
    ' E6 A$ K: ~3 S, J, {
19.    
    1 [" J* Z5 g) v! g
20.      /* 打开文件 */        
    
21.      result = f_open(&file, sFilename, FA_OPEN_EXISTING | FA_READ | FA_OPEN_ALWAYS);
    
22.      if (result != FR_OK)
    
23.      {
    
24.          return;
    2 T3 q( U  v& b
25.      }
    
26. 
    6 m0 c/ I' |0 @/ R1 G
27.      result = f_read(&file, _acBuffer2, file.fsize, &bw);
    1 h& K& p; {: c! t* C2 `1 n4 T* X
28.      if (result != FR_OK)
    
29.      {
    1 i# K5 c3 \. e# f
30.          return;
    
31.      }
    7 b* T0 t: N5 T4 x
32. 
    2 D3 ^6 n) I2 y! h1 {
33.      GUI_JPEG_GetInfo(_acBuffer2, file.fsize, &JpegInfo);(2)
    ( y; c2 ~/ F, n; Q( }/ ~' a( ~
34.      GUI_JPEG_Draw(_acBuffer2, (3)
    $ w6 h( e& p  U3 Q8 Y
35.                      file.fsize,
    8 X% a* M2 R+ W- [* C
36.                     0,
    
37.                     0);
    : s( E+ P, w2 B
38. 
    
39.      GUI_ALLOC_Free(hMem);
    . `4 p1 h- E- [4 ]; i0 |! N
40.      f_close(&file);
    + M; Q- r+ q- J2 [, |' n+ R, S
41. }

复制代码

1.     申请一块动态内存，并将JPEG数据加载到动态内存中。

2.     利用已加载到存储器的jpeg文件的相关信息填充GUI_JPEG_INFO结构。

3.     将JPEG图片显示到屏上。

l  主函数

1. /*
   ( u5 [/ s! U9 W- N1 v& f
2. *********************************************************************************************************
   
3. *    函 数 名: MainTask
   + }& M2 D7 E' L. Y* c! h, z* x
4. *    功能说明: GUI主函数
   $ o! |5 D( K  i9 C9 @
5. *    形    参：无
   # ^/ w; R0 p, ~+ k
6. *    返 回 值: 无
   " i( Y$ a" O0 Q- e9 A4 o9 |" |
7. *********************************************************************************************************
   . H" Q' G( c8 A  }4 j# j
8. */
   # B: p4 B) _0 R$ z4 m
9. void MainTask(void)
   
10. {   
    9 s* T8 I, n1 s1 ]/ {6 K" c3 J
11.      GUI_Init();
    2 }$ d0 l! a8 |0 k
12. 
    
13.      /* 设置皮肤函数 */
    
14.      PROGBAR_SetDefaultSkin(PROGBAR_SKIN_FLEX);
    ' O) N5 m) ?' t" h+ L: Y' m
15.      FRAMEWIN_SetDefaultSkin(FRAMEWIN_SKIN_FLEX);
    
16.      PROGBAR_SetDefaultSkin(PROGBAR_SKIN_FLEX);
    
17.      BUTTON_SetDefaultSkin(BUTTON_SKIN_FLEX);
    5 V- {) R1 K* r& K
18.      CHECKBOX_SetDefaultSkin(CHECKBOX_SKIN_FLEX);
    
19.      DROPDOWN_SetDefaultSkin(DROPDOWN_SKIN_FLEX);
    
20.      SCROLLBAR_SetDefaultSkin(SCROLLBAR_SKIN_FLEX);
    
21.      SLIDER_SetDefaultSkin(SLIDER_SKIN_FLEX);
    . Y* G5 R1 C3 r) r5 O% S
22.      HEADER_SetDefaultSkin(HEADER_SKIN_FLEX);
    
23.      RADIO_SetDefaultSkin(RADIO_SKIN_FLEX);
    7 M- q* z3 o% P; o0 d
24. 
    * _$ X& J! _# I8 K+ r+ L' M
25.      while(1)
    $ ^, R- ^/ E0 B) b$ I
26.      {                 
    
27.          _ShowJPG("2.jpg");
    ( c  c9 V, a5 p/ X
28.      }
    $ N6 @; e6 z2 q! T& E4 \- R
29. 
    
30. }

复制代码

实际显示效果如下：

12.3  绘制无需加载到存储器的JPEG图片

    绘制无需加载到存储器的JPEG图片方式可以有效的解决内部动态内存不够的情况，不过缺点也很明显，图片的显示速度很慢。这种方式一般是每次读取一行像素的数据，然后进行显示。这个工程的实现主要分为如下三个部分：

Ø  使用芯片内部的SRAM作为动态内存

Ø  图片的加载以及显示函数

Ø  主函数

    下面把这三部分详细的讲解下：

l  使用芯片外部的SRAM作为动态内存，这部分函数与上面第11章的11.2小节一样，由于jpeg比较的消耗内存，这里和BMP不同也需要使用动态内存。

l  图片的加以及显示函数。

1. static char _acBuffer[0x2000];
   
2. GUI_JPEG_INFO JpegInfo;
   
3. 
   
4. /*
   
5. *********************************************************************************************************
   2 I% g3 c7 H* g" p$ R; q
6. *
   * Q9 z8 I" K. I  ]4 |' h  J  p
7. *       _GetData
   # |, U6 Y: Y1 ~# K/ g
8. *
   
9. * Purpose:
   & ^: l0 _$ [7 m* f
10. *   This routine is called by GUI_JPEG_DrawEx(). The routine is responsible
    , @, ~1 V0 v' {/ q( Z! Y
11. *   for setting the data pointer to a valid data location with at least
    ) D. {1 @1 `" h5 P" w# Z9 F/ Y" z
12. *   one valid byte.
    
13. *
    5 g) t9 n+ N: k9 s1 e& Z
14. * Parameters:
    / j( S8 C  U9 F+ u& |
15. *   p           - Pointer to application defined data.
    4 c2 G( W  X; ?" S( x
16. *   NumBytesReq - Number of bytes requested.
    
17. *   ppData      - Pointer to data pointer. This pointer should be set to
    5 A/ @% J; M5 k* ]& X
18. *                 a valid location.
    
19. *   StartOfFile - If this flag is 1, the data pointer should be set to the
    
20. *                 beginning of the data stream.
    
21. *
    
22. * Return value:
    
23. *   Number of data bytes available.
    
24. *********************************************************************************************************
    ) m8 M8 D' c4 y& e
25. */
    ! D/ M, m# S! K+ g1 t! m. U; u, |
26. static int _GetData(void * p, const U8 ** ppData, unsigned NumBytesReq, U32 Off)
    0 y& _# d6 |- T7 o
27. {
    3 U/ S$ e/ ?1 l& C! J: Q
28.      static int FileAddress = 0;
    
29.      UINT NumBytesRead;
    ; j$ n7 _6 x# @- z7 v1 i& n0 O
30.      FIL *PicFile;
    ! F) o# p+ E, F1 E
31. 
    ! I# I6 P8 I, q; J3 s
32.      PicFile = (FIL *)p;
    
33. 
    . M) F' A0 N* G- Z& i5 z5 o
34.      /*
    
35.      * Check buffer size
    
36.      */
    
37.      if (NumBytesReq > sizeof(_acBuffer)) {
    
38.      NumBytesReq = sizeof(_acBuffer);
    
39.      }
    % C8 s( }2 B4 D
40. 
    + \& G4 S4 C$ b6 ]+ B5 ]" D
41. 
    
42.      /*
    
43.      * Set file pointer to the required position
    
44.      */
    
45.      if(Off == 1) FileAddress = 0;
    ! R& f( ^+ j' @
46.      else FileAddress = Off;
    . k3 C& D! V4 D5 L( h% _' p
47.      result =f_lseek(PicFile, FileAddress);
    
48. 
    * _- _6 G! s# r) N! [/ O- P# A
49. 
    
50.      /*
    
51.      * Read data into buffer
    
52.      */
    7 ]# v1 w/ @: U
53.      result = f_read(PicFile, _acBuffer, NumBytesReq, &NumBytesRead);
    . d! U9 h# z7 u* M0 ?
54. 
    ; n; ?5 B1 B, c% ]. N: V
55.      /*
    % B$ N. m2 H: |7 e$ X8 o" e
56.      * Set data pointer to the beginning of the buffer
    
57.      */
    , X7 y( Z' N5 u" D! X; B0 b" |
58.      *ppData = (const U8 *)_acBuffer;
    
59. 
    & f8 F* w: Y! u# M
60.      /*
    
61.      * Return number of available bytes
    
62.      */
    
63.      return NumBytesRead;
    
64. }
    ; X6 }5 \2 T: p( @
65. 
    0 k# {" o2 l$ m) n4 {
66. /*
    
67. *********************************************************************************************************
    
68. *    函 数 名: _ShowBMPEx
    
69. *    功能说明: 显示BMP图片
    
70. *    形    参：sFilename 要显示图片的名字
    ) t  n& f2 D) q5 V6 t0 w: Z+ {" G% }
71. *    返 回 值: 无
    5 R4 j0 `9 l/ @( j
72. *********************************************************************************************************
    # O, E* e% o' @2 ~! N2 P5 z
73. */
    . j7 v/ I; m  C2 w" f4 q3 A. l
74. static void _ShowJPGEx(const char * sFilename)
    
75. {   
    " |9 F0 _: ]- R% z/ n
76.      OS_ERR err;
    
77.      uint16_t i;
    
78. 
    
79.      /* 打开文件 */        
    
80.      result = f_open(&file, sFilename, FA_OPEN_EXISTING | FA_READ | FA_OPEN_ALWAYS);
    
81.      if (result != FR_OK)
    
82.      {
    
83.          return;
    ; L; r$ L- \& ]9 ^
84.      }
    " D( |# B! b1 t7 D# Z  g3 t( M8 n
85.    
    
86.      GUI_JPEG_GetInfoEx(_GetData, &file, &JpegInfo);（1）
    
87.      while(1)
    
88.      {
    
89.          /**********必要的时候，可以加上调度锁，防止刷图片的时候死机*************/
    
90.          for(i = 100; i < 1000; i += 10)
    
91.          {
    * t; J, t" |  _3 k! s7 S5 ^
92.               OSSchedLock(&err);
    6 [, G% K- m- W) k
93.               GUI_JPEG_DrawScaledEx(_GetData, （2）
    
94.                                      &file,
    
95.                                        (LCD_GetXSize() - JpegInfo.XSize*i/100)/2,
    / \  V' i" m( Z: F! A5 _
96.                                        (LCD_GetYSize() - JpegInfo.YSize*i/100)/2,
    * P) \6 Y( A* k* [) N) R1 J
97.                                        i,
    * |* n* n0 p& }0 V/ k, L; n: F
98.                                        100);
    7 c+ r( T2 E& w4 S3 _
99.               OSSchedUnlock(&err);
    ! m; [% B1 @7 K; C6 A1 O- u% @! J; Q
100.               GUI_Delay(1000);  
     
101.          }
     
102. 
     ! f6 x) }/ m! ?6 n* N) @7 T
103.          GUI_Clear();
     1 Q2 V) p8 r! r7 @
104.          GUI_Delay(1);
     
105.      }
     
106. 
     6 b1 u& I. t/ o' m. d8 ^% N
107. //   f_close(&file);
       }' }# ]1 f! ~# T0 z
108. }

复制代码

1.     获取JPEG图片的信息

2.     绘制带放缩比例的JPEG图片。

    实际显示效果如下，这个是放大后的：

12.4  实验总结

    有兴趣的可以了解一下JPEG压缩方面的知识。如果只是API应用的话，这部分知识还是比较容易学会的。

7 Q& S' f# o$ U. R( m5 K7 |8 v

好详细。。学习了。。。

很不错，顶一个

/ g4 i8 n, X3 A) N% _2 \* C$ [9 ~谢谢楼主分享

资料好多啊，学习学习

貌似很给力的样子