且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)

更新时间:2022-09-15 10:08:20

Microsoft .Net Micro Framework 官方UI库为WPF,针对320*240的LCD而言,至少额外需要150K以上RAM才能基本运行。而市面上常见Cortex-M3开发板的RAM大多为128K,少数开发板即使具备512k的RAM,运行官方自带的示例SimpleWPFApplication,也会出现内存溢出问题。此外由于Cortex-M3内核CPU主频大都在72M左右,官方图形库运行速度较慢。
一、参数指标
名称
 代码大小
 内存需求
 运行性能
 
WPF
 120k(含Microsoft.SPOT.TinyCore.pe)
 >150k
 运行基准测试程序,TinyGUI运行速度大概是WPF的3~5倍
 
TinyGUI
 <2k
 无需求
 
注:TinyGUI采用类似DirectDraw技术,直接操作显存,所以无内存需求,且运行速度快
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)

二、位图显示技术比较
WPF支持标准BMP,JPG,GIF图片显示,从使用角度来看非常方便,但是由于嵌入式LCD大都为16bit显示(RGB565格式),无论是BMP还是JPG和GIF都需要进行颜色转换,此外后者还需要进行格式转换处理。以上操作,不仅导致运行速度慢,还需要一定的内存进行图形缓存。
TinyGUI的位图显示采用转换后的tinyBMP位图格式,其格式和LCD显存格式保持一致,由于图形转换工作通过程序(如下)预先完成,所以在嵌入式系统上直接向显存拷贝即可完成位图显示,所以运行速度极快。
 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)
(注:其实Net Micro Framework的字体就是采用类似技术,官方提供转换程序和tinyFont字体库)
核心代码其实很简单,就是把32位位图转换为指定RGB(或BGR)格式的16位位图。
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)byte[] bytBuff = new byte[picBar.Height * picBar.Width * 2 + 12]; 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)        BinaryWriter bw = new BinaryWriter(new MemoryStream(bytBuff)); 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)        bw.Write(new byte[] { 84, 105, 110, 121, 66, 77, 80, 0 }); //TinyBMP\0;    
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)        bw.Write((UInt16)picBar.Width); 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)        bw.Write((UInt16)picBar.Height); 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)        Bitmap bmp = new Bitmap(picBar.Image, picBar.Width, picBar.Height); 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)        for (int y = 0; y < bmp.Height; y++) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)        { 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                tspBar.Value = y; 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                for (int x = 0; x < bmp.Width; x++) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                { 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                        bw.Write(Color_32_16(bmp.GetPixel(x, y))); 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                } 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)        } 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
   三、TinyGUI图库接口
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)namespace System.TinyGUI 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)        public sealed class Graphics 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)        { 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                public Graphics(); 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)    
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                public static void Clear(uint color); 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                public static void DrawEllipse(int x, int y, int width, int height, uint color); 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                public static void DrawImage(int x, int y, byte[] bytData); 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                public static void DrawImageEx(int x, int y, byte[] bytData, uint MaskColor); 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                public static void DrawLine(int x1, int y1, int x2, int y2, uint color); 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                public static void DrawRectangle(int x, int y, int width, int height, uint color); 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                public static void DrawString(int x, int y, string s, uint color); 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                public static void FillEllipse(int x, int y, int width, int height, uint color); 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                public static void FillRectangle(int x, int y, int width, int height, uint color); 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                public static uint GetPixel(int x, int y); 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                public static void Print(string str); 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                public static void SetPixel(int x, int y, uint color); 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)        } 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
  四、TinyGUI测试程序
    运行效果图如下:

    【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)

 

部分测试代码如下:
   
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)static void DrawGraphics() 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)        { 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                x = rnd.Next(239); 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                width = rnd.Next(240 - x); 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                y = rnd.Next(319); 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                height = rnd.Next(320 - y); 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                c = rnd.Next(colors.Length - 1); 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                switch (index++ % 3) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                { 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                        case 0: 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                                if (rnd.Next(10) > 5) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                                        Graphics.DrawRectangle(x, y, width, height, colors[c]); 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                                else 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                                        Graphics.FillRectangle(x, y, width, height, colors[c]); 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                                break
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                        case 1: 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                                if (rnd.Next(10) > 5) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                                        Graphics.DrawEllipse(x, y, width, height, colors[c]); 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                                else 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                                        Graphics.FillEllipse(x, y, width, height, colors[c]); 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                                break
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                        case 2: 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                                Graphics.DrawLine(x, y, rnd.Next(239), rnd.Next(319), colors[c]); 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                                break
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                } 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)    
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                Graphics.FillRectangle(0, 300, 240, 20, Color.White); 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)#if        STM3210E_EVAL 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                Graphics.DrawString(2, 303, "Key - Back", Color.Black); 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)#else 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                Graphics.DrawString(2, 303, "Select - Back", Color.Black); 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)#endif 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)        } 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)    
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)        static void DrawPicture() 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)        { 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                if (++picIndex > 12) picIndex = 0;    
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                AccessFlash.Read((uint)(0x002A0000 + picIndex * 0xEA6C), 0xEA6C, picData); 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)                if(StateIndex!= SystemState.Main)    Graphics.DrawImage(20, 70, picData); 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上)
【玩转.Net MF – 06】为Cortex-M3打造轻量级TinyGUI(上) 
其中图片从Flash中进行读取,图片的下载方法可以参考我以前的博客文章《Flash远程读写》,为了在C#代码中读取Flash上的内容,我重新封装了一个AccessFlash类,可以直接读写Flash任意区域的数据,这部分内容我在后续文章中再进行介绍。
这篇文章仅仅介绍了TinyGUI应用层面的内容,下篇文章《为Cortex-M3打造轻量级TinyGUI(下)》将介绍TinyGUI是如何开发的,敬请关注。








本文转自yefanqiu51CTO博客,原文链接:http://blog.51cto.com/yfsoft/321203,如需转载请自行联系原作者