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技術，直接操作顯存，是以無記憶體需求，且運作速度快
二、位圖顯示技術比較
WPF支援标準BMP，JPG，GIF圖檔顯示，從使用角度來看非常友善，但是由于嵌入式LCD大都為16bit顯示（RGB565格式），無論是BMP還是JPG和GIF都需要進行顔色轉換，此外後者還需要進行格式轉換處理。以上操作，不僅導緻運作速度慢，還需要一定的記憶體進行圖形緩存。
TinyGUI的位圖顯示采用轉換後的tinyBMP位圖格式，其格式和LCD顯存格式保持一緻，由于圖形轉換工作通過程式（如下）預先完成，是以在嵌入式系統上直接向顯存拷貝即可完成位圖顯示，是以運作速度極快。
（注：其實Net Micro Framework的字型就是采用類似技術，官方提供轉換程式和tinyFont字型庫）
核心代碼其實很簡單，就是把32位位圖轉換為指定RGB（或BGR）格式的16位位圖。
byte[] bytBuff = new byte[picBar.Height * picBar.Width * 2 + 12];
BinaryWriter bw = new BinaryWriter(new MemoryStream(bytBuff));
bw.Write(new byte[] { 84, 105, 110, 121, 66, 77, 80, 0 }); //TinyBMP/0;
bw.Write((UInt16)picBar.Width);
bw.Write((UInt16)picBar.Height);
Bitmap bmp = new Bitmap(picBar.Image, picBar.Width, picBar.Height);
for (int y = 0; y < bmp.Height; y++)
{
tspBar.Value = y;
for (int x = 0; x < bmp.Width; x++)
{
bw.Write(Color_32_16(bmp.GetPixel(x, y)));
}
} 三、TinyGUI圖庫接口
namespace System.TinyGUI
{
public sealed class Graphics
{
public Graphics();
public static void Clear(uint color);
public static void DrawEllipse(int x, int y, int width, int height, uint color);
public static void DrawImage(int x, int y, byte[] bytData);
public static void DrawImageEx(int x, int y, byte[] bytData, uint MaskColor);
public static void DrawLine(int x1, int y1, int x2, int y2, uint color);
public static void DrawRectangle(int x, int y, int width, int height, uint color);
public static void DrawString(int x, int y, string s, uint color);
public static void FillEllipse(int x, int y, int width, int height, uint color);
public static void FillRectangle(int x, int y, int width, int height, uint color);
public static uint GetPixel(int x, int y);
public static void Print(string str);
public static void SetPixel(int x, int y, uint color);
}
} 四、TinyGUI測試程式
運作效果圖如下：
部分測試代碼如下：
static void DrawGraphics()
{
x = rnd.Next(239);
width = rnd.Next(240 - x);
y = rnd.Next(319);
height = rnd.Next(320 - y);
c = rnd.Next(colors.Length - 1);
switch (index++ % 3)
{
case 0:
if (rnd.Next(10) > 5)
Graphics.DrawRectangle(x, y, width, height, colors[c]);
else
Graphics.FillRectangle(x, y, width, height, colors[c]);
break;
case 1:
if (rnd.Next(10) > 5)
Graphics.DrawEllipse(x, y, width, height, colors[c]);
else
Graphics.FillEllipse(x, y, width, height, colors[c]);
break;
case 2:
Graphics.DrawLine(x, y, rnd.Next(239), rnd.Next(319), colors[c]);
break;
}
Graphics.FillRectangle(0, 300, 240, 20, Color.White);
#if STM3210E_EVAL
Graphics.DrawString(2, 303, "Key - Back", Color.Black);
#else
Graphics.DrawString(2, 303, "Select - Back", Color.Black);
#endif
}
static void DrawPicture()
{
if (++picIndex > 12) picIndex = 0;
AccessFlash.Read((uint)(0x002A0000 + picIndex * 0xEA6C), 0xEA6C, picData);
if(StateIndex!= SystemState.Main) Graphics.DrawImage(20, 70, picData);
} 其中圖檔從Flash中進行讀取，圖檔的下載下傳方法可以參考我以前的部落格文章《Flash遠端讀寫》，為了在C#代碼中讀取Flash上的内容，我重新封裝了一個AccessFlash類，可以直接讀寫Flash任意區域的資料，這部分内容我在後續文章中再進行介紹。
這篇文章僅僅介紹了TinyGUI應用層面的内容，下篇文章《為Cortex-M3打造輕量級TinyGUI（下）》将介紹TinyGUI是如何開發的，敬請關注。