你的浏览器版本过低,可能导致网站不能正常访问!
为了你能正常使用网站功能,请使用这些浏览器。

BMP图片解码 STM32+FATS+模拟U盘+OLED12864

[复制链接]
不吃肉的羊 发布时间:2018-2-10 20:50

之前做UI设计,每次用到特殊的字符,就要我重新做字库。

后面有几次要我贴图,可想而知,太鸡巴折腾了,做过的朋友都知道,后面就想着能不能让单片机虚拟U盘,然后图片拖进去,就直接显示出来。

PS:其实想做视频解码来着,后面懒了,先做图片解码。

折腾了一两天,最终还是实现了。

硬件组成:

1.STM32F4

2.OLED12864

3.W25Q64

软件组成:

1.DMA做SPI数据传输,基本底层驱动,就不解释了

2.W25Q64上做FATS文件系统,版本是

; }0 I* h7 J! y: t% g+ h

3.将W25Q64虚拟成U盘

蛮久以前折腾的了

4.编码解码及屏幕显示

其实解码不难,难的是数据对应,解码我大概花了两三小时,数据对应显示花了将近一天。

因为是OLED12864,只能显示8位的数据,也就没有什么颜色好说的了。

简述一下使用步骤。

首先设备上电,看到我用单片机+W25Q64模拟的U盘

& w8 q1 a, u+ p# g0 U, i; j) G" {

然后,做张BMP图片,放到U盘里面


. a! q% L7 f# `" I% m# \$ `. a

电脑打开图片是这样的,图片是我随便截图来的


  _. T( [! d, |+ S

然后,设备重启上电,OLED上面就显示这张图片。


% ^2 B8 k% Z% e5 d  E

这样就意味着我之后想贴图就可以直接贴了,不要再搞来搞去的做字库。

首先是了解BMP的组成结构:


3 H4 z0 t8 U( v" u1:位图头文件数据结构,它包含BMP图像文件的类型、显示内容等信息;2 P0 {& m+ Z2 S
其结构定义如下:: w% W, ]  p$ G2 T5 n
[size=1em]
[size=1em]1
8 C7 i3 }6 b# i7 S( _- R% X
[size=1em]2

# J, p2 W4 H# k# v. o
[size=1em]3
! g- e" h. G" N, {
[size=1em]4

3 Z. ]8 `8 l' L, `* f4 [, `- E
[size=1em]5
+ m% x% Y8 p0 }9 a4 q) K
[size=1em]6

1 C& V1 w' O& A1 M7 h1 {% ~" Q
[size=1em]7
7 w/ R% l) _$ j% D0 [. ]
[size=1em]8
; _4 f' o4 ^7 ~2 K$ a. x  V
[size=1em]9
$ L/ W$ b0 ?% o; _0 u
[size=1em][size=1em]typedef struct tagBITMAPFILEHEADER. Q) w* D( o& e; i0 V% ]
[size=1em]{7 ^7 {, Z  l' Y; C' J% \" [
[size=1em]    WORD bfType;//位图文件的类型,必须为BM(1-2字节)
0 p* g7 x9 l8 n; K: g[size=1em]    DWORD bfSize;//位图文件的大小,以字节为单位(3-6字节,低位在前)9 q! @- t4 x6 d; |, ^9 _& [) y$ X
[size=1em]    WORD bfReserved1;//位图文件保留字,必须为0(7-8字节)' U. z6 j: Q; V* b) e
[size=1em]    WORD bfReserved2;//位图文件保留字,必须为0(9-10字节)8 [& O/ Z4 X( E1 t
[size=1em]    DWORD bfOffBits;//位图数据的起始位置,以相对于位图(11-14字节,低位在前)
' ]! D6 [% x2 y8 b[size=1em]    //文件头的偏移量表示,以字节为单位
1 u# s  h2 b/ P+ s/ h[size=1em]}__attribute__((packed)) BITMAPFILEHEADER;
1 M' e5 f, |9 e+ ?* w6 ?+ _1 j9 C( v
+ \- u9 ~% T/ w2 u: i
+ T& `: X  x0 n
) l1 I6 M  S4 ?2 a- g* k
2:位图信息数据结构,它包含有BMP图像的宽、高、压缩方法,以及定义颜色等信息;
; _. o5 o* h; j5 d4 F+ K0 A: fBMP位图信息头数据用于说明位图的尺寸等信息。
2 {) h  H  W1 g# [/ {[size=1em]
[size=1em]1

& @% C- K6 f  I3 z
[size=1em]2
: e* {* j; L- l( l6 I3 C" ~  v
[size=1em]3
' U8 G5 _  r* N! l! l
[size=1em]4
+ T3 J' ~- L, e/ [
[size=1em]5
& L! M1 g- d! U3 R0 Z  e, p1 A0 f
[size=1em]6
6 K" W+ c' V5 O2 r! B' Q9 R0 y/ j3 w' l, p
[size=1em]7
0 T" R; r/ ]3 [( M
[size=1em]8
4 {/ ]1 x! Y  f
[size=1em]9

& |( w2 r, b8 R( B0 g$ R5 P5 H
[size=1em]10

$ ]$ c3 P, h. A4 f) ?2 F( j& X
[size=1em]11
+ b: E5 p8 |  ~& N7 p# g
[size=1em]12
& p7 X9 D) V) [9 V7 ?
[size=1em]13

" E/ u. x/ h9 q
[size=1em]14

/ \1 p6 L- e0 G% b$ ?+ C1 @) S
[size=1em]15

2 x2 O  y$ J  F4 j: \
[size=1em][size=1em]typedef struct tagBITMAPINFOHEADER{
( X3 f9 r% ~4 o[size=1em]DWORD biSize;//本结构所占用字节数(15-18字节)
6 i- Q" [& o5 D7 a5 j[size=1em]LONG biWidth;//位图的宽度,以像素为单位(19-22字节)
" t! N/ i9 K  m8 g: Y$ ~- N[size=1em]LONG biHeight;//位图的高度,以像素为单位(23-26字节)
) B# y- ?# v, k. v- x0 D' p% Z[size=1em]WORD biPlanes;//目标设备的级别,必须为1(27-28字节)/ ]# m% C" _# G: L% V2 h- T
[size=1em]WORD biBitCount;//每个像素所需的位数,必须是1(双色),(29-30字节)
, e( O. e6 F0 q# b[size=1em]//4(16色),8(256色)16(高彩色)或24(真彩色)之一
* ]7 l: |$ j! j+ S. Q/ ]) g[size=1em]DWORD biCompression;//位图压缩类型,必须是0(不压缩),(31-34字节)2 _/ }0 |- `; Y' ?" x
[size=1em]//1(BI_RLE8压缩类型)或2(BI_RLE4压缩类型)之一* z7 R" V2 r, A, W4 f  h* `. e# m  D
[size=1em]DWORD biSizeImage;//位图的大小(其中包含了为了补齐行数是4的倍数而添加的空字节),以字节为单位(35-38字节)
9 p: O. A9 w' p, s. I5 n; }, @9 n[size=1em]LONG biXPelsPerMeter;//位图水平分辨率,每米像素数(39-42字节)$ R% v+ G( M; P/ T/ J3 g  F
[size=1em]LONG biYPelsPerMeter;//位图垂直分辨率,每米像素数(43-46字节)% W/ A) Q* Z# ?) n" W. p" G
[size=1em]DWORD biClrUsed;//位图实际使用的颜色表中的颜色数(47-50字节)7 F0 Q. T+ B5 r- Z" D0 M* X
[size=1em]DWORD biClrImportant;//位图显示过程中重要的颜色数(51-54字节)
$ ~& a5 O; F; ~$ m' {2 H[size=1em]}__attribute__((packed)) BITMAPINFOHEADER;' k, v8 w/ t. C! Y: S3 U8 u2 C

- o& Y, ~: i& V# N6 v$ {  O

6 g1 ~- s/ N+ |
! g5 H) F  ?7 O) d0 ]) X* u
2 z; [  }/ n* E' o  d2 A# k2 v
3:调色板,这个部分是可选的,有些位图需要调色板,有些位图,比如真彩色图(24位的BMP)就不需要调色板;
. y: _* u1 z9 C3 R颜色表用于说明位图中的颜色,它有若干个表项,每一个表项是一个RGBQUAD类型的结构,定义一种颜色。RGBQUAD结构的定义如下:
" l: c4 \/ n5 R/ g! U& K  D[size=1em]
[size=1em]1

* h3 F1 w" o5 f+ B) q5 a. x
[size=1em]2
2 g# H9 L9 N7 @5 F6 R
[size=1em]3

% m0 ^+ A2 t6 u4 V( e) Q
[size=1em]4

* y0 t8 X$ k4 L/ f  J( x
[size=1em]5

% \5 Z# V, L0 ?2 p6 v) T, J
[size=1em]6
! F, z! Y7 a  a0 K; |! ^
[size=1em][size=1em]typedef struct tagRGBQUAD{
' K' x9 F8 }) @. m* |) W[size=1em]BYTE rgbBlue;//蓝色的亮度(值范围为0-255)' |3 r% ~% u  K5 K6 `7 t
[size=1em]BYTE rgbGreen;//绿色的亮度(值范围为0-255)) G- @# \6 j1 I1 c4 |
[size=1em]BYTE rgbRed;//红色的亮度(值范围为0-255)
. W* V5 T" L, y6 l' `[size=1em]BYTE rgbReserved;//保留,必须为0
& ~, X) @( Q- h4 I[size=1em]}__attribute__((packed)) RGBQUAD;
8 K) t6 k' O- I. u( @9 H& B1 ^4 p& U3 J+ n9 T; m0 L0 S! a6 i  \
6 `, G, R9 ?5 q" Y) N; L5 Q. S

$ d* w- U: H3 b/ S# A8 Q颜色表中RGBQUAD结构数据的个数有biBitCount来确定:
, [3 e3 I# W5 r当biBitCount=1,4,8时,分别有2,16,256个表项;
3 g5 M9 J, a/ f# H* }; r当biBitCount=24时,没有颜色表项。5 K3 m' J. p* X+ e( }. n- ?! n1 U
位图信息头和颜色表组成位图信息,BITMAPINFO结构定义如下:
( p6 n/ |# ^- t[size=1em]
[size=1em]1
3 c( f& {( ^" U/ z7 c/ r
[size=1em]2
& U. U3 Z! j1 A
[size=1em]3
: L. f; P: W% A6 n9 w$ S6 a1 |
[size=1em]4

' w9 j# P; _0 m& I3 n4 n: k+ f+ q
[size=1em][size=1em]typedef struct tagBITMAPINFO{' U$ z2 {; ?5 U6 G) p1 ?! v
[size=1em]BITMAPINFOHEADER bmiHeader;//位图信息头
9 X/ c6 W1 a1 s, z: h* J' P[size=1em]RGBQUAD bmiColors[1];//颜色表* c7 r2 Q2 _0 }; N, L1 p
[size=1em]}__attribute__((packed)) BITMAPINFO;
8 P: U: \$ R; m! y2 K& C8 @8 T0 Z* e* K$ I  }! r) v

7 g2 g8 @( B+ U( T

& \' l/ W  v9 I+ Z1 ^# x
2 V( j* L( i) B. r) e7 `/ h1 t
( ?1 D5 N1 N9 N6 e9 X" }4:位图数据,这部分的内容根据BMP位图使用的位数不同而不同,在24位图中直接使用RGB,而其他的小于24位的使用调色板中颜色索引值。9 l0 L9 B" x3 h/ Q* t
位图数据记录了位图的每一个像素值,记录顺序是在扫描行内是从左到右,扫描行之间是从下到上。位图的一个像素值所占的字节数:* S. h$ l0 v# D+ E) q6 R- F
当biBitCount=1时,8个像素占1个字节;9 K' ]3 G! K* R4 ]/ V" R) C+ E9 \
当biBitCount=4时,2个像素占1个字节;- A* w* F) Q7 m! h1 L( q
当biBitCount=8时,1个像素占1个字节;. c& w5 w) {! J
当biBitCount=24时,1个像素占3个字节,按顺序分别为B,G,R;) ]! J3 `# t* H+ O* h  h2 M8 x
Windows规定一个扫描行所占的字节数必须是
8 }/ @; A2 P. x( K/ F' w7 M* ~4的倍数(即以long为单位),不足的以0填充,6 @# X. H; Y5 a) S. ~9 A: ^0 p# R$ S
biSizeImage = ((((bi.biWidth * bi.biBitCount) + 31) & ~31) / 8) * bi.biHeight;
/ U* Z9 o% Z, }: }9 v. h4 `

以上内容网上大同小异,都是一样的。

根据以上信息,首先我在程序里面做了一个结构体,存放除显示数据外的所有东西。


& _( t% k) V/ p8 `# {. V

我不需要调色板,也就没用结构体了。

计算上面的数据,一共是62个8位数据,用来存放BMP的定义信息。

程序很简单,首先是U盘读取数据

ret = f_open(&fp, "246.bmp", FA_OPEN_ALWAYS | FA_WRITE | FA_READ);5 \" z: ?7 F4 `  L4 w" `0 }6 T

                        ret = f_read(&fp, readbuff, picsize, &unt); //读取文件头信息

然后提取前62个数据保存到上面说的结构体

Getpicture(readbuff);
) t; @; Y( e( U0 y


, o6 k7 H) j8 Q' [: W" Q* O: E

仿真确认数据正确性

然后是提取图片信息


/ @% Y, L6 R8 K" c) f% N, t

一个简单的嵌套逻辑。


' Q) v8 u* e! D& |) m

最后是花了我将近一天的东西,数据显示对应

void Display_BMP_DOT(uint8_t bmp[64][16])- V, w5 K+ o' O: G
{- l( a& W' o( T. d1 K" l
        unsigned char x,y,z,n,m;
0 p1 h  ]& l, Q% w8 y& t, b) ]        uint8_t Oled_Draw_BMP_buff[128];3 U% l4 ]/ y/ r8 A0 ^

( O1 s4 ~3 l! H' d/ w4 E+ n9 C: N, K9 v0 n" t4 f
        for(m=0;m<64;m++)
# M, U$ l  |* G; J; E4 y" k        {) W. m0 F; u% }) w$ X
                for(n=0;n<16;n++)6 ?+ }$ Y+ f# q- i" [/ h
                {
# |/ x1 o  U: Y# r( ]8 g                        z = 0x80;
$ g/ {3 o" G. V8 `2 {8 R4 W: Q0 s                        for(x=0;x<8;x++)
; X4 [2 F* i: O/ F, k! d                        {        
! {( G+ h: i8 g9 z0 ~                                Oled_Dot(x+8*n-1,63-m,bmp[m][n]&(z>>x));       
8 T( T# B- O1 |- H                        }9 o7 F1 S! t2 F* M
                }
$ ^2 H% k% |% P* U3 z        }
/ c8 x: m# W/ s/ Z8 i2 o$ j0 ~        Display_Process(OLED_Display_Data);       
  Z  x: @# D6 }5 Y! T$ ^+ J

}

这一步的难度在

OLED12864支持的是页写,之前做驱动的时候,刷屏是从左至右从上到下,但是WINDOWS上面,图片提取是,从左至右,从下至上。


) v: Q8 C  z: Z+ R
收藏 1 评论3 发布时间:2018-2-10 20:50

举报

3个回答
hello_bug 回答时间:2018-2-11 09:15:10
这各厉害,解码速度如何,刷屏效果呢?
不吃肉的羊 回答时间:2018-2-11 12:36:03
12864总共才128*64个点,要不了多久,具体时间没测,效果跟做字库一样的
zero99 回答时间:2018-2-12 14:17:34
感谢分享,已汇总到2月技术原创  https://www.stmcu.org.cn/module/forum/thread-614799-1-1.html

所属标签

相似分享

关于意法半导体
我们是谁
投资者关系
意法半导体可持续发展举措
创新和工艺
招聘信息
联系我们
联系ST分支机构
寻找销售人员和分销渠道
社区
媒体中心
活动与培训
隐私策略
隐私策略
Cookies管理
行使您的权利
关注我们
st-img 微信公众号
st-img 手机版