14、Beaglebone外围电路设计第四周：数据采集界面的实现！

anananjjj

14、Beaglebone外围电路设计第四周：数据采集界面的实现！ [复制链接]

根据我需要的功能，我利用Stellaris Graphics Library实现了数据采集界面！（发在深夜，所以图片和视频的光线较为虚幻！）
一、图片展示：

主界面：这里的按钮的动作都是带声音的！可以在下面的视频中听到！通过Codec的功能实现！

说明界面：这里使用的是我自己做的包含中文和英文的字库！我加了大概2000多个常用汉字和符号！具体可参考我的另一篇M4的帖子：https://bbs.eeworld.com.cn/viewthread.php?tid=333915

加速度传感器测角度界面：表盘的绘制使用了sin，cos函数，所以要使用浮点功能，使能浮点功能的方法可以看我的帖子：https://bbs.eeworld.com.cn/viewthread.php?tid=356085

单轴的界面：




液位界面：


二、视频演示：背景的嘟嘟声是Codec按键音的效果！

三、程序说明：
1、首先我是基于官方的grlib_demo程序实现的此界面！
我在主界面上添加了电子工程世界和板子的Logo！
图片是利用GIMP 2软件编辑的，并将其转换成.pnm格式

这些便是我的图像素材！然后利用\tools\pnmtoc下的pnmtoc.exe逐一转换成图像数组：

然后就是调用函数进行显示了：
主函数中自然是对LCD，Codec等外设进行了初始化配置：
int main(void)
{
unsigned long i = 0;
    unsigned char *dest;
    unsigned char *src;
    int xdata;
    int ydata;

    MMUConfigAndEnable();

    CacheEnable(CACHE_ALL);

    SetupIntc();

    SetUpLCD();

    /* configuring the base ceiling */
    RasterDMAFBConfig(SOC_LCDC_0_REGS,
                      (unsigned int)(g_pucBuffer+PALETTE_OFFSET),
                      (unsigned int)((g_pucBuffer+PALETTE_OFFSET) +
                       sizeof(g_pucBuffer) - 2 - PALETTE_OFFSET),
                      FRAME_BUFFER_0);

    RasterDMAFBConfig(SOC_LCDC_0_REGS,
                      (unsigned int)(g_pucBuffer+PALETTE_OFFSET),
                      (unsigned int)((g_pucBuffer+PALETTE_OFFSET) +
                       sizeof(g_pucBuffer) - 2 - PALETTE_OFFSET),
                      FRAME_BUFFER_1);

    src = (unsigned char *) palette_32b;
    dest = (unsigned char *) (g_pucBuffer+PALETTE_OFFSET);

    /* Copy palette info into buffer */
    for( i = PALETTE_OFFSET; i < (PALETTE_SIZE+PALETTE_OFFSET); i++)
    {
         *dest++ = *src++;
    }

    GrOffScreen16BPPInit(&g_s35_480x272x24Display, g_pucBuffer, LCD_WIDTH,
                         LCD_HEIGHT);

    /* Initialize a drawing context.*/
    GrContextInit(&sContext, &g_s35_480x272x24Display);

    /* enable End of frame interrupt */
    RasterEndOfFrameIntEnable(SOC_LCDC_0_REGS);

    /* enable raster */
    RasterEnable(SOC_LCDC_0_REGS);


然后就是主界面的绘制：

tRectangle sRect;

    // Fill the top 24 rows of the screen with blue to create the banner.
    sRect.sXMin = 0;
    sRect.sYMin = 0;
    sRect.sXMax = GrContextDpyWidthGet(&sContext) - 1;
    sRect.sYMax = 35;
    GrContextForegroundSet(&sContext, ClrDarkBlue);
    GrRectFill(&sContext, &sRect);

    // Put a white box around the banner.
    GrContextForegroundSet(&sContext, ClrWhite);
    GrRectDraw(&sContext, &sRect);
    GrImageDraw(&sContext, g_logo30x34, 445, 0);//画BeagleBone logo
    GrImageDraw(&sContext, g_eeworldlogo, 0, 0); //画电子工程世界的logo
    // Put the application name in the middle of the banner.
    GrContextFontSet(&sContext, &g_sFontCH16);
    GrStringDraw(&sContext, "anananjjj的数据采集界面", -1,
                        210 , 15, 0);
    //此处使用的就是我自己做的16X16的汉字加英文字库：g_sFontCH16


    // Initialize the sound driver.



    // Add the first panel to the widget tree.
    g_ulPanel = 0;
    WidgetAdd(WIDGET_ROOT, (tWidget *)g_psPanels);
    CanvasTextSet(&g_sTitle, g_pcPanelNames[0]);//添加第一个界面


    // Issue the initial paint request to the widgets.
    WidgetMessageQueueAdd(WIDGET_ROOT, WIDGET_MSG_PAINT, 0, 0, 0, 0);

}
//Codec的嘟嘟声播放函数
void ClickPlay(void)
{
    I2CCodecIfInit(SOC_I2C_2_REGS, I2C_SLAVE_CODEC_AIC31);
    SoundClickPlay((unsigned char*)toneRaw, sizeof(toneRaw));
    delay(0x9FFFF);
}

对应的按钮控件：
//*****************************************************************************
//
//主屏幕包含5个功能按钮和6个数据显示框
//
//*****************************************************************************

//按键1：温度查看
RectangularButton(g_sTemperature, 0, 0, 0, &g_s35_480x272x24Display, 0,
                  70, 32,32, PB_STYLE_IMG | PB_STYLE_TEXT, ClrBlack,
                  ClrBlack, 0, ClrSilver, &g_sFontCm20, " ", g_Temperature32x32,
                  g_Temperature32x32, 0, 0, OnTemperature);
//按键2：液位查看
RectangularButton(g_sLiquid, 0, 0, 0, &g_s35_480x272x24Display, 0,
                  130, 32,32, PB_STYLE_IMG | PB_STYLE_TEXT, ClrBlack,
                  ClrBlack, 0, ClrSilver, &g_sFontCm20, " ", g_Liquid32x32,
                  g_Liquid32x32, 0, 0, OnLiquid);

//按键3：备用查看
RectangularButton(g_sNone, 0, 0, 0, &g_s35_480x272x24Display, 0,
                  190, 32,32, PB_STYLE_IMG | PB_STYLE_TEXT, ClrBlack,
                  ClrBlack, 0, ClrSilver, &g_sFontCm20, " ", g_None32x32,
                  g_None32x32, 0, 0, OnNone);

//按键4：加速度查看
RectangularButton(g_sAcceleration, 0, 0, 0, &g_s35_480x272x24Display, 240,
                  130, 32,32, PB_STYLE_IMG | PB_STYLE_TEXT, ClrBlack,
                  ClrBlack, 0, ClrSilver, &g_sFontCm20, " ", g_Acceleration32x32,
                  g_Acceleration32x32, 0, 0, OnAcceleration);

//按键5：说明查看
RectangularButton(g_sIllustration, 0, 0, 0, &g_s35_480x272x24Display, 0,
                  232, 60,40, PB_STYLE_IMG | PB_STYLE_TEXT, ClrBlack,
                  ClrBlack, 0, ClrSilver, &g_sFontCm20, " ", g_Illustration60x40,
                  g_Illustration60x40, 0, 0, OnIllustration);

//按键6：X轴查看
RectangularButton(g_sXaxis, 0, 0, 0, &g_s35_480x272x24Display, 80,
                  240, 32,32, PB_STYLE_IMG | PB_STYLE_TEXT, ClrBlack,
                  ClrBlack, 0, ClrSilver, &g_sFontCm20, " ", g_Xaxis32x32,
                  g_Xaxis32x32, 0, 0, OnXaxis);

//按键7：Y轴查看
RectangularButton(g_sYaxis, 0, 0, 0, &g_s35_480x272x24Display, 180,
                  240, 32,32, PB_STYLE_IMG | PB_STYLE_TEXT, ClrBlack,
                  ClrBlack, 0, ClrSilver, &g_sFontCm20, " ", g_Yaxis32x32,
                  g_Yaxis32x32, 0, 0, OnYaxis);

//按键8：Y轴查看
RectangularButton(g_sZaxis, 0, 0, 0, &g_s35_480x272x24Display, 280,
                  240, 32,32, PB_STYLE_IMG | PB_STYLE_TEXT, ClrBlack,
                  ClrBlack, 0, ClrSilver, &g_sFontCm20, " ", g_Zaxis32x32,
                  g_Zaxis32x32, 0, 0, OnZaxis);

//按键9:主界面查看
RectangularButton(g_sMain, 0, 0, 0, &g_s35_480x272x24Display, 410,
                  240, 60,40, PB_STYLE_IMG | PB_STYLE_TEXT, ClrBlack,
                  ClrBlack, 0, ClrSilver, &g_sFontCm20, " ", g_Main60x40,
                  g_Main60x40, 0, 0, OnMain);


//按键10:返回查看
RectangularButton(g_sBack, 0, 0, 0, &g_s35_480x272x24Display, 350,
                  240, 32,32, PB_STYLE_IMG | PB_STYLE_TEXT, ClrBlack,
                  ClrBlack, 0, ClrSilver, &g_sFontCm20, " ", g_Back32x32,
                  g_Back32x32, 0, 0, OnBack);


Canvas(g_sTitle, 0, 0, 0, &g_s35_480x272x24Display, 50+X_OFFSET, 30,
       200, 50, CANVAS_STYLE_TEXT | CANVAS_STYLE_TEXT_OPAQUE , 0, 0, ClrSilver,
       &g_sFontCH16, 0, 0, 0);//标题画布让其显示在画布上端


其相应的调用函数：
void OnTemperature(tWidget *pWidget)
{
  if(g_ulPanel == 0)//只有在主界面的时候案件响应
    {
    //
    // Remove the current panel.
    //
    WidgetRemove((tWidget *)(g_psPanels + g_ulPanel));
     //
    // Increment the panel index.
    //
    g_ulPanel=6;

    //
    // Add and draw the new panel.
    //
    WidgetAdd(WIDGET_ROOT, (tWidget *)(g_psPanels + g_ulPanel));
    WidgetPaint((tWidget *)(g_psPanels + g_ulPanel));

    //
    // Set the title of this panel.
    //
    CanvasTextSet(&g_sTitle, g_pcPanelNames[g_ulPanel]);
    WidgetPaint((tWidget *)&g_sTitle);

      //
     // Clear the  button from the display since the last panel is being
     // displayed.
     //
    PushButtonImageOff(&g_sTemperature);
    PushButtonTextOff(&g_sTemperature);
   // PushButtonFillOn(&g_sTemperature);
    WidgetPaint((tWidget *)&g_sTemperature);

          //
     // Clear the  button from the display since the last panel is being
     // displayed.
     //
    PushButtonImageOff(&g_sLiquid);
    PushButtonTextOff(&g_sLiquid);
   // PushButtonFillOn(&g_sLiquid);
    WidgetPaint((tWidget *)&g_sLiquid);

          //
     // Clear the  button from the display since the last panel is being
     // displayed.
     //
    PushButtonImageOff(&g_sNone);
    PushButtonTextOff(&g_sNone);
    //PushButtonFillOn(&g_sNone);
    WidgetPaint((tWidget *)&g_sNone);

          //
     // Clear the  button from the display since the last panel is being
     // displayed.
     //
    PushButtonImageOff(&g_sAcceleration);
    PushButtonTextOff(&g_sAcceleration);
   // PushButtonFillOn(&g_sAcceleration);
    WidgetPaint((tWidget *)&g_sAcceleration);

         // Clear the  button from the display since the last panel is being
     // displayed.
     //
    PushButtonImageOff(&g_sXaxis);
    PushButtonTextOff(&g_sXaxis);
   // PushButtonFillOn(&g_sXaxis);
    WidgetPaint((tWidget *)&g_sXaxis);

         // Clear the  button from the display since the last panel is being
     // displayed.
     //
    PushButtonImageOff(&g_sYaxis);
    PushButtonTextOff(&g_sYaxis);
    //PushButtonFillOn(&g_sYaxis);
    WidgetPaint((tWidget *)&g_sYaxis);

         // Clear the  button from the display since the last panel is being
     // displayed.
     //
    PushButtonImageOff(&g_sZaxis);
    PushButtonTextOff(&g_sZaxis);
    //PushButtonFillOn(&g_sZaxis);
    WidgetPaint((tWidget *)&g_sZaxis);


    // Clear the  button from the display since the last panel is being
     // displayed.
     //
    PushButtonImageOff(&g_sIllustration);
    PushButtonTextOff(&g_sIllustration);
    //PushButtonFillOn(&g_sIllustration);
    WidgetPaint((tWidget *)&g_sIllustration);


        //
    // Display the main button.
    //
    PushButtonImageOff(&g_sMain);
    PushButtonTextOff(&g_sMain);
    //PushButtonFillON(&g_sMain);
    WidgetPaint((tWidget *)&g_sMain);


    //
    // Display the back button.
    //
    PushButtonImageOn(&g_sBack);
    PushButtonTextOn(&g_sBack);
    PushButtonFillOff(&g_sBack);
    WidgetPaint((tWidget *)&g_sBack);

    //
    // Play the key click sound.
    //
    ClickPlay();
    }
   else//其他情况案件不响应
    {
          return;
    }
}
其他的处理方法大同小异，这里不再赘述！

2、接下来是每个界面画布的函数处理：
首先是添加界面的标题数组：
const char *g_pcPanelNames[] =
{
    "主界面",
    "说明",
    "加速度",
    "X轴",
    "Y轴",
    "Z轴",
    "温度",
    "液位",
    "保留",   
};

这里实在相应的按钮调用函数里来切换标题的。
然后是每个界面的主画布的添加：

//*****************************************************************************
//
// 第一个，主界面画布
//
//
//*****************************************************************************
Canvas(g_sMaininterface, g_psPanels, 0, 0, &g_s35_480x272x24Display,
       0, 40, 480, 232, CANVAS_STYLE_APP_DRAWN, 0, 0, 0, 0, 0,
       0, OnMaininterfacePaint);


//*****************************************************************************
//
//第二个，说明界面画布
//
//*****************************************************************************
Canvas(g_sIntroduction, g_psPanels+1, 0, 0, &g_s35_480x272x24Display, 0,
       40, 480, 232, CANVAS_STYLE_APP_DRAWN, 0, 0, 0, 0, 0, 0,
       OnIntroPaint);

//*****************************************************************************
//
// 第三个。整体加速度测角的界面画布，这里定义了CANVAS_STYLE_IMG,需要用于显示表盘图片！
//
//*****************************************************************************
Canvas(g_sAcc, g_psPanels + 2, 0, 0, &g_s35_480x272x24Display, 0,
       40, 480, 232, CANVAS_STYLE_APP_DRAWN | CANVAS_STYLE_IMG, 0,
       ClrGray, 0, 0, 0, g_Acceleration, OnAccPaint);



//*****************************************************************************
//
// 第四个，X轴表盘
//
//*****************************************************************************
Canvas(g_sXaxis1, g_psPanels + 3, 0, 0, &g_s35_480x272x24Display, 0,
       40, 480, 232, CANVAS_STYLE_APP_DRAWN | CANVAS_STYLE_IMG, 0,
       ClrGray, 0, 0, 0, g_Accsingle, OnXaxisPaint);

//*****************************************************************************
//
// 第五个。Y轴表盘
//
//*****************************************************************************
Canvas(g_sYaxis1, g_psPanels + 4, 0, 0, &g_s35_480x272x24Display, 0,
       40, 480, 232, CANVAS_STYLE_APP_DRAWN | CANVAS_STYLE_IMG, 0,
       ClrGray, 0, 0, 0, g_Accsingle, OnYaxisPaint);

//*****************************************************************************
//
// 的六个，Z轴表盘
//
//*****************************************************************************
Canvas(g_sZaxis1, g_psPanels + 5, 0, 0, &g_s35_480x272x24Display, 0,
       40, 480, 232, CANVAS_STYLE_APP_DRAWN | CANVAS_STYLE_IMG, 0,
       ClrGray, 0, 0, 0, g_Accsingle, OnZaxisPaint);


//*****************************************************************************
//
//第七个，温度界面，加进度条！
//
//*****************************************************************************
Canvas(g_sTemValueCanvas, g_psPanels + 6, 0, 0,
       &g_s35_480x272x24Display, 210+X_OFFSET, 30+Y_OFFSET, 60, 40,
       CANVAS_STYLE_TEXT | CANVAS_STYLE_TEXT_OPAQUE, ClrBlack, 0, ClrSilver,
       &g_sFontCm24, "50%",
       0, 0);

tSliderWidget g_sTem[] =
{
    SliderStruct(g_psPanels + 6, g_sTem + 1, 0,
                 &g_s35_480x272x24Display, 5+X_OFFSET, 115+Y_OFFSET, 220, 30,
                 0, 100, 25, (SL_STYLE_FILL | SL_STYLE_BACKG_FILL |
                 SL_STYLE_OUTLINE | SL_STYLE_TEXT | SL_STYLE_BACKG_TEXT),
                 ClrGray, ClrBlack, ClrSilver, ClrWhite, ClrWhite,
                 &g_sFontCm20, "25%", 0, 0, OnTemChange),
    SliderStruct(g_psPanels + 6, g_sTem + 2, 0,
                 &g_s35_480x272x24Display, 5+X_OFFSET, 155+Y_OFFSET, 220, 25,
                 0, 100, 25, (SL_STYLE_FILL | SL_STYLE_BACKG_FILL |
                 SL_STYLE_OUTLINE | SL_STYLE_TEXT),
                 ClrWhite, ClrBlueViolet, ClrSilver, ClrBlack, 0,
                 &g_sFontCm18, "Foreground Text Only", 0, 0, OnTemChange),
    SliderStruct(g_psPanels + 6, g_sTem + 3, 0,
                 &g_s35_480x272x24Display, 240+X_OFFSET, 70+Y_OFFSET, 26, 110,
                 0, 100, 50, (SL_STYLE_FILL | SL_STYLE_BACKG_FILL |
                 SL_STYLE_VERTICAL | SL_STYLE_OUTLINE | SL_STYLE_LOCKED),
                 ClrDarkGreen, ClrDarkRed, ClrSilver, 0, 0, 0, 0, 0, 0, 0),
    SliderStruct(g_psPanels + 6, g_sTem + 4, 0,
                 &g_s35_480x272x24Display, 280+X_OFFSET, 30+Y_OFFSET, 30, 150,
                 0, 100, 75, (SL_STYLE_IMG | SL_STYLE_BACKG_IMG |
                 SL_STYLE_VERTICAL | SL_STYLE_OUTLINE), 0, ClrBlack, ClrSilver,
                 0, 0, 0, 0, g_pucGettingHotter28x148,
                 g_pucGettingHotter28x148Mono, OnTemChange),
    SliderStruct(g_psPanels + 6, g_sTem + 5, 0,
                 &g_s35_480x272x24Display, 5+X_OFFSET, 30+Y_OFFSET, 195, 37, 0,
                 100, 50, SL_STYLE_IMG | SL_STYLE_BACKG_IMG, 0, 0, 0, 0, 0, 0,
                 0, g_pucGreenSlider195x37, g_pucRedSlider195x37,
                 OnTemChange),
    SliderStruct(g_psPanels + 6, &g_sTemValueCanvas, 0,
                 &g_s35_480x272x24Display, 5+X_OFFSET, 80+Y_OFFSET, 220, 25, 0,
                 100, 50, (SL_STYLE_FILL | SL_STYLE_BACKG_FILL | SL_STYLE_TEXT |
                 SL_STYLE_BACKG_TEXT | SL_STYLE_TEXT_OPAQUE |
                 SL_STYLE_BACKG_TEXT_OPAQUE), ClrBlue, ClrYellow, ClrSilver,
                 ClrYellow, ClrBlue, &g_sFontCm18, "Text in both areas", 0, 0,
                 OnTemChange),
};

//*****************************************************************************
//
// 第八个，液位界面，加进度条
//
//*****************************************************************************
Canvas(g_sLiqValueCanvas, g_psPanels + 7, 0, 0,
       &g_s35_480x272x24Display, 210+X_OFFSET, 30+Y_OFFSET, 60, 40,
       CANVAS_STYLE_TEXT | CANVAS_STYLE_TEXT_OPAQUE, ClrBlack, 0, ClrSilver,
       &g_sFontCm24, "50%",
       0, 0);

tSliderWidget g_sLiq[] =
{
    SliderStruct(g_psPanels + 7, g_sLiq + 1, 0,
                 &g_s35_480x272x24Display, 5+X_OFFSET, 115+Y_OFFSET, 220, 30,
                 0, 100, 25, (SL_STYLE_FILL | SL_STYLE_BACKG_FILL |
                 SL_STYLE_OUTLINE | SL_STYLE_TEXT | SL_STYLE_BACKG_TEXT),
                 ClrGray, ClrBlack, ClrSilver, ClrWhite, ClrWhite,
                 &g_sFontCm20, "25%", 0, 0, OnLiqChange),
    SliderStruct(g_psPanels + 7, g_sLiq + 2, 0,
                 &g_s35_480x272x24Display, 5+X_OFFSET, 155+Y_OFFSET, 220, 25,
                 0, 100, 25, (SL_STYLE_FILL | SL_STYLE_BACKG_FILL |
                 SL_STYLE_OUTLINE | SL_STYLE_TEXT),
                 ClrWhite, ClrBlueViolet, ClrSilver, ClrBlack, 0,
                 &g_sFontCm18, "Foreground Text Only", 0, 0, OnLiqChange),
    SliderStruct(g_psPanels + 7, g_sLiq + 3, 0,
                 &g_s35_480x272x24Display, 240+X_OFFSET, 70+Y_OFFSET, 26, 110,
                 0, 100, 50, (SL_STYLE_FILL | SL_STYLE_BACKG_FILL |
                 SL_STYLE_VERTICAL | SL_STYLE_OUTLINE | SL_STYLE_LOCKED),
                 ClrDarkGreen, ClrDarkRed, ClrSilver, 0, 0, 0, 0, 0, 0, 0),
    SliderStruct(g_psPanels + 7, g_sLiq + 4, 0,
                 &g_s35_480x272x24Display, 280+X_OFFSET, 30+Y_OFFSET, 30, 150,
                 0, 100, 75, (SL_STYLE_IMG | SL_STYLE_BACKG_IMG |
                 SL_STYLE_VERTICAL | SL_STYLE_OUTLINE), 0, ClrBlack, ClrSilver,
                 0, 0, 0, 0, g_pucGettingHotter28x148,
                 g_pucGettingHotter28x148Mono, OnLiqChange),
    SliderStruct(g_psPanels + 7, g_sLiq + 5, 0,
                 &g_s35_480x272x24Display, 5+X_OFFSET, 30+Y_OFFSET, 195, 37, 0,
                 100, 50, SL_STYLE_IMG | SL_STYLE_BACKG_IMG, 0, 0, 0, 0, 0, 0,
                 0, g_pucGreenSlider195x37, g_pucRedSlider195x37,
                 OnLiqChange),
    SliderStruct(g_psPanels + 7, &g_sLiqValueCanvas, 0,
                 &g_s35_480x272x24Display, 5+X_OFFSET, 80+Y_OFFSET, 220, 25, 0,
                 100, 50, (SL_STYLE_FILL | SL_STYLE_BACKG_FILL | SL_STYLE_TEXT |
                 SL_STYLE_BACKG_TEXT | SL_STYLE_TEXT_OPAQUE |
                 SL_STYLE_BACKG_TEXT_OPAQUE), ClrBlue, ClrYellow, ClrSilver,
                 ClrYellow, ClrBlue, &g_sFontCm18, "Text in both areas", 0, 0,
                 OnLiqChange),
};

//进度条相关定义

#define SLIDER_TEXT_VAL_INDEX         (0)
#define SLIDER_LOCKED_INDEX           (2)
#define SLIDER_CANVAS_VAL_INDEX       (4)

#define NUM_SLIDERS                   (sizeof(g_psSliders) /  \
                                       sizeof(g_psSliders[0]))

//*****************************************************************************
//
//第九个，保留界面，随便加的东西
//
//*****************************************************************************
tCanvasWidget g_psCheckBoxIndicators[] =
{
    CanvasStruct(g_psPanels + 8, g_psCheckBoxIndicators + 1, 0,
                 &g_s35_480x272x24Display, 230+X_OFFSET, 30+Y_OFFSET, 50, 42,
                 CANVAS_STYLE_IMG, 0, 0, 0, 0, 0, g_ledOFF, 0),
    CanvasStruct(g_psPanels + 8, g_psCheckBoxIndicators + 2, 0,
                 &g_s35_480x272x24Display, 230+X_OFFSET, 82+Y_OFFSET, 50, 48,
                 CANVAS_STYLE_IMG, 0, 0, 0, 0, 0, g_ledOFF, 0),
    CanvasStruct(g_psPanels + 8, 0, 0,
                 &g_s35_480x272x24Display, 230+X_OFFSET, 134+Y_OFFSET, 50, 42,
                 CANVAS_STYLE_IMG, 0, 0, 0, 0, 0, g_ledOFF, 0)
};
tCheckBoxWidget g_psCheckBoxes[] =
{
    CheckBoxStruct(g_psPanels + 8, g_psCheckBoxes + 1, 0,
                   &g_s35_480x272x24Display, 40+X_OFFSET, 30+Y_OFFSET, 185, 42,
                   CB_STYLE_OUTLINE | CB_STYLE_FILL | CB_STYLE_TEXT, 16,
                   ClrMidnightBlue, ClrGray, ClrSilver, &g_sFontCm22, "Select",
                   0, OnCheckChange),
    CheckBoxStruct(g_psPanels + 8, g_psCheckBoxes + 2, 0,
                   &g_s35_480x272x24Display, 40+X_OFFSET, 82+Y_OFFSET, 185, 48,
                   CB_STYLE_IMG, 16, 0, ClrGray, 0, 0, 0,
                   g_TILogo, OnCheckChange),
    CheckBoxStruct(g_psPanels + 8, g_psCheckBoxIndicators, 0,
                   &g_s35_480x272x24Display, 40+X_OFFSET, 134+Y_OFFSET, 189, 42,
                   CB_STYLE_OUTLINE | CB_STYLE_TEXT, 16,
                   0, ClrGray, ClrGreen, &g_sFontCm20, "Select",
                   0, OnCheckChange),
};

3、以上画布函数都有相应的调用函数：
//*****************************************************************************
//
// //说明界面，使用自己的文字库显示信息
//
//*****************************************************************************
void OnIntroPaint(tWidget *pWidget, tContext *pContext)
{
    //
    // Display the introduction text in the canvas.
    //
    GrContextFontSet(pContext, &g_sFontCH16);
    GrContextForegroundSet(pContext, ClrSilver);

    GrStringDraw(pContext, "    此显示界面是由郑立安 (anananjjj)", -1, 0+X_OFFSET,
                 50+Y_OFFSET, 0);
    GrStringDraw(pContext, "设计开发的,用于显示由zigbee模块接收到", -1,
                 0+X_OFFSET,68+Y_OFFSET, 0);
    GrStringDraw(pContext, "的温度,液位,倾角等数据。此显示系统的", -1,
                 0+X_OFFSET, 86+Y_OFFSET, 0);
    GrStringDraw(pContext, "硬件是基于BeagleBone开发板扩展而成的,", -1,
                 0+X_OFFSET, 104+Y_OFFSET, 0);
    GrStringDraw(pContext, "具有无线,Codec,LCD显示等扩展功能。非常", -1,
                 0+X_OFFSET, 122+Y_OFFSET, 0);
    GrStringDraw(pContext, "感谢电子工程世界论坛(eeworld.com.cn)能", -1,
                 0+X_OFFSET, 140+Y_OFFSET, 0);
    GrStringDraw(pContext, "够提供“我与BeagleBone有个约会”这个活动!", -1,
                 0+X_OFFSET, 158+Y_OFFSET, 0);
    GrStringDraw(pContext, "anananjjj:Zigbee网络主控制台测试版。", -1,
                 0+X_OFFSET, 176+Y_OFFSET, 0);
  WidgetAdd(WIDGET_ROOT, (tWidget *)&g_sBack); //增加返回按钮
  WidgetRemove((tWidget *)&g_sTemperature); //温度按钮
  WidgetRemove((tWidget *)&g_sLiquid);      //液位按钮
  WidgetRemove((tWidget *)&g_sNone);        //备用按钮
  WidgetRemove((tWidget *)&g_sAcceleration);//加速度按钮
  WidgetRemove((tWidget *)&g_sMain);           //删除主界面按钮（不执行的话会在其他界面显示）
  WidgetRemove((tWidget *)&g_sIllustration); //说明按钮
  WidgetRemove((tWidget *)&g_sXaxis); //增加X轴按钮
  WidgetRemove((tWidget *)&g_sYaxis); //增加Y轴按钮
  WidgetRemove((tWidget *)&g_sZaxis); //增加Z轴按钮

}

//*****************************************************************************
//
// 主界面的显示
//
//*****************************************************************************
void OnMaininterfacePaint(tWidget *pWidget, tContext *pContext)
{


    tRectangle sRectT;
    tRectangle sRectL;
    tRectangle sRectN;
    tRectangle sRectX;
    tRectangle sRectY;
    tRectangle sRectZ;

    // Fill the top 24 rows of the screen with blue to create the banner.
    sRectT.sXMin = 40;
    sRectT.sYMin = 70;
    sRectT.sXMax = 200;
    sRectT.sYMax = 110;

    sRectL.sXMin = 40;
    sRectL.sYMin = 130;
    sRectL.sXMax = 200;
    sRectL.sYMax = 170;

    sRectN.sXMin = 40;
    sRectN.sYMin = 190;
    sRectN.sXMax = 200;
    sRectN.sYMax = 230;

    sRectX.sXMin = 280;
    sRectX.sYMin = 80;
    sRectX.sXMax = 440;
    sRectX.sYMax = 120;

    sRectY.sXMin = 280;
    sRectY.sYMin = 130;
    sRectY.sXMax = 440;
    sRectY.sYMax = 170;

    sRectZ.sXMin = 280;
    sRectZ.sYMin = 180;
    sRectZ.sXMax = 440;
    sRectZ.sYMax = 220;


    GrContextForegroundSet(&sContext, ClrWhite);
    GrRectFill(&sContext, &sRectT);
    GrRectFill(&sContext, &sRectL);
    GrRectFill(&sContext, &sRectN);
    GrRectFill(&sContext, &sRectX);
    GrRectFill(&sContext, &sRectY);
    GrRectFill(&sContext, &sRectZ);
    // Put a white box around the banner.
    GrContextForegroundSet(&sContext, ClrBlue);
    GrRectDraw(&sContext, &sRectT);
    GrRectDraw(&sContext, &sRectL);
    GrRectDraw(&sContext, &sRectN);
    GrRectDraw(&sContext, &sRectX);
    GrRectDraw(&sContext, &sRectY);
    GrRectDraw(&sContext, &sRectZ);
    GrContextForegroundSet(&sContext, ClrBlack);
    // Put the application name in the middle of the banner.
    GrContextFontSet(&sContext, &g_sFontCH16);
    GrStringDraw(&sContext, "温度:          ℃", -1,
                         45, 80, 0);
    GrStringDraw(&sContext, "液位:         cm", -1,
                         45, 140, 0);
    GrStringDraw(&sContext, "保留:           ", -1,
                         45, 200, 0);
    GrStringDraw(&sContext, "X轴:   ℃;X:   g", -1,
                         285, 90, 0);
    GrStringDraw(&sContext, "Y轴:   ℃;Y:   g", -1,
                         285, 140, 0);
    GrStringDraw(&sContext, "Z轴:   ℃;X:   g", -1,
                         285, 190, 0);

       // Add the title block and the previous and next buttons to the widget tree.
    WidgetAdd(WIDGET_ROOT, (tWidget *)&g_sTemperature); //温度按钮
    WidgetAdd(WIDGET_ROOT, (tWidget *)&g_sLiquid);      //液位按钮
    WidgetAdd(WIDGET_ROOT, (tWidget *)&g_sNone);        //备用按钮
    WidgetAdd(WIDGET_ROOT, (tWidget *)&g_sAcceleration);//加速度按钮
    WidgetAdd(WIDGET_ROOT, (tWidget *)&g_sIllustration); //说明按钮

    WidgetAdd(WIDGET_ROOT, (tWidget *)&g_sXaxis); //增加X轴按钮
    WidgetAdd(WIDGET_ROOT, (tWidget *)&g_sYaxis); //增加Y轴按钮
    WidgetAdd(WIDGET_ROOT, (tWidget *)&g_sZaxis); //增加Z轴按钮
    WidgetRemove((tWidget *)&g_sMain);           //删除主界面按钮（不执行的话会在其他界面显示）
    WidgetRemove((tWidget *)&g_sBack);           //删除返回按钮（不执行的话会在其他界面显示）
}

//*****************************************************************************
//
// 加速度界面显示(画线）//处理三个表盘的指
//
//*****************************************************************************
void OnAccPaint(tWidget *pWidget, tContext *pContext)
{
       int Xx,Xy,Yx,Yy,Zx,Zy;
         Xx=(int)(80*sin(2*(3.1415926)*XAngle/360));
         Xy=(int)(80*cos(2*(3.1415926)*XAngle/360));
         Yx=(int)(80*sin(2*(3.1415926)*YAngle/360));
         Yy=(int)(80*cos(2*(3.1415926)*YAngle/360));
         Zx=(int)(80*sin(2*(3.1415926)*ZAngle/360));
         Zy=(int)(80*cos(2*(3.1415926)*ZAngle/360));

  GrContextForegroundSet(pContext, ClrBlack);
  //画表盘指针

  GrLineDraw(pContext,80,182,80+Xx,182-Xy);
  GrLineDraw(pContext,240,182,240+Yx,182-Yy);
  GrLineDraw(pContext,400,182,400+Zx,182-Zy);

  WidgetAdd(WIDGET_ROOT, (tWidget *)&g_sBack); //增加返回按钮
  WidgetRemove((tWidget *)&g_sTemperature); //温度按钮
  WidgetRemove((tWidget *)&g_sLiquid);      //液位按钮
  WidgetRemove((tWidget *)&g_sNone);        //备用按钮
  WidgetRemove((tWidget *)&g_sAcceleration);//加速度按钮
  WidgetRemove((tWidget *)&g_sMain);           //删除主界面按钮（不执行的话会在其他界面显示）
  WidgetRemove((tWidget *)&g_sIllustration); //说明按钮
  WidgetAdd(WIDGET_ROOT, (tWidget *)&g_sXaxis); //X轴按钮
  WidgetAdd(WIDGET_ROOT, (tWidget *)&g_sYaxis); //Y轴按钮
  WidgetAdd(WIDGET_ROOT, (tWidget *)&g_sZaxis); //Z轴按钮



}

//*****************************************************************************
//
// X轴加速度界面显示(画线)
//
//*****************************************************************************
void OnXaxisPaint(tWidget *pWidget, tContext *pContext)
{
     int Xx,Xy;
     Xx=(int)(160*sin(2*(3.1415926)*XAngle/360));
     Xy=(int)(160*cos(2*(3.1415926)*XAngle/360));

   GrContextForegroundSet(pContext, ClrBlack);
  //画表盘指针

  GrLineDraw(pContext,239,236,239+Xx,236-Xy);

  WidgetAdd(WIDGET_ROOT, (tWidget *)&g_sBack); //增加返回按钮
  WidgetAdd(WIDGET_ROOT, (tWidget *)&g_sMain); //增加主界面按钮

  WidgetAdd(WIDGET_ROOT, (tWidget *)&g_sYaxis); //增加Y轴按钮
  WidgetAdd(WIDGET_ROOT, (tWidget *)&g_sZaxis); //增加Z轴按钮

    WidgetRemove((tWidget *)&g_sTemperature); //温度按钮
  WidgetRemove((tWidget *)&g_sLiquid);      //液位按钮
  WidgetRemove((tWidget *)&g_sNone);        //备用按钮
  WidgetRemove((tWidget *)&g_sAcceleration);//加速度按钮
  WidgetRemove((tWidget *)&g_sIllustration); //说明按钮
  WidgetAdd(WIDGET_ROOT, (tWidget *)&g_sXaxis); //X轴按钮

}


//*****************************************************************************
//
// Y轴加速度界面显示(画线)
//
//*****************************************************************************
void OnYaxisPaint(tWidget *pWidget, tContext *pContext)
{

     int Yx,Yy;
     Yx=(int)(160*sin(2*(3.1415926)*YAngle/360));
     Yy=(int)(160*cos(2*(3.1415926)*YAngle/360));

   GrContextForegroundSet(pContext, ClrBlack);
  //画表盘指针

  GrLineDraw(pContext,239,236,239+Yx,236-Yy);


  WidgetAdd(WIDGET_ROOT, (tWidget *)&g_sBack); //增加返回按钮
  WidgetAdd(WIDGET_ROOT, (tWidget *)&g_sMain); //增加主界面按钮
  WidgetAdd(WIDGET_ROOT, (tWidget *)&g_sXaxis); //增加X轴按钮

  WidgetAdd(WIDGET_ROOT, (tWidget *)&g_sZaxis); //增加Z轴按钮

  WidgetRemove((tWidget *)&g_sTemperature); //温度按钮
  WidgetRemove((tWidget *)&g_sLiquid);      //液位按钮
  WidgetRemove((tWidget *)&g_sNone);        //备用按钮
  WidgetRemove((tWidget *)&g_sAcceleration);//加速度按钮
  WidgetRemove((tWidget *)&g_sIllustration); //说明按钮
  WidgetAdd(WIDGET_ROOT, (tWidget *)&g_sYaxis); //Y轴按钮

}

//*****************************************************************************
//
// Z轴加速度界面显示(画线)
//
//*****************************************************************************
void OnZaxisPaint(tWidget *pWidget, tContext *pContext)
{

    int Zx,Zy;
     Zx=(int)(160*sin(2*(3.1415926)*ZAngle/360));
     Zy=(int)(160*cos(2*(3.1415926)*ZAngle/360));

   GrContextForegroundSet(pContext, ClrBlack);
  //画表盘指针

  GrLineDraw(pContext,239,236,239+Zx,236-Zy);

  WidgetAdd(WIDGET_ROOT, (tWidget *)&g_sBack); //增加返回按钮
  WidgetAdd(WIDGET_ROOT, (tWidget *)&g_sMain); //增加主界面按钮
  WidgetAdd(WIDGET_ROOT, (tWidget *)&g_sXaxis); //增加X轴按钮
  WidgetAdd(WIDGET_ROOT, (tWidget *)&g_sYaxis); //增加Y轴按钮

  WidgetRemove((tWidget *)&g_sTemperature); //温度按钮
  WidgetRemove((tWidget *)&g_sLiquid);      //液位按钮
  WidgetRemove((tWidget *)&g_sNone);        //备用按钮
  WidgetRemove((tWidget *)&g_sAcceleration);//加速度按钮
  WidgetRemove((tWidget *)&g_sIllustration); //说明按钮
  WidgetAdd(WIDGET_ROOT, (tWidget *)&g_sZaxis); //Z轴按钮
}




//*****************************************************************************
//
// 保留界面.
//
//*****************************************************************************
void OnCheckChange(tWidget *pWidget, unsigned int bSelected)
{
   WidgetAdd(WIDGET_ROOT, (tWidget *)&g_sBack); //增加返回按钮
  WidgetRemove((tWidget *)&g_sTemperature); //温度按钮
  WidgetRemove((tWidget *)&g_sLiquid);      //液位按钮
  WidgetRemove((tWidget *)&g_sNone);        //备用按钮
  WidgetRemove((tWidget *)&g_sAcceleration);//加速度按钮
  WidgetRemove((tWidget *)&g_sMain);           //删除主界面按钮（不执行的话会在其他界面显示）
  WidgetRemove((tWidget *)&g_sIllustration); //说明按钮
  WidgetAdd(WIDGET_ROOT, (tWidget *)&g_sXaxis); //X轴按钮
  WidgetAdd(WIDGET_ROOT, (tWidget *)&g_sYaxis); //Y轴按钮
  WidgetAdd(WIDGET_ROOT, (tWidget *)&g_sZaxis); //Z轴按钮
    unsigned long ulIdx;

    //
    // Find the index of this check box.
    //
    for(ulIdx = 0; ulIdx < NUM_CHECK_BOXES; ulIdx++)
    {
        if(pWidget == (tWidget *)(g_psCheckBoxes + ulIdx))
        {
            break;
        }
    }

    //
    // Return if the check box could not be found.
    //
    if(ulIdx == NUM_CHECK_BOXES)
    {
        return;
    }

    //
    // Set the matching indicator based on the selected state of the check box.
    //
    CanvasImageSet(g_psCheckBoxIndicators + ulIdx,
                   bSelected ? g_ledON : g_ledOFF);
    WidgetPaint((tWidget *)(g_psCheckBoxIndicators + ulIdx));

    //
    // Play the key click sound.
    //
    ClickPlay();
}


//*****************************************************************************
//
//温度界面
//
//*****************************************************************************
void OnTemChange(tWidget *pWidget, int lValue)
{
    WidgetAdd(WIDGET_ROOT, (tWidget *)&g_sBack); //增加返回按钮
  WidgetRemove((tWidget *)&g_sTemperature); //温度按钮
  WidgetRemove((tWidget *)&g_sLiquid);      //液位按钮
  WidgetRemove((tWidget *)&g_sNone);        //备用按钮
  WidgetRemove((tWidget *)&g_sAcceleration);//加速度按钮
  WidgetRemove((tWidget *)&g_sMain);           //删除主界面按钮（不执行的话会在其他界面显示）
  WidgetRemove((tWidget *)&g_sIllustration); //说明按钮
  WidgetAdd(WIDGET_ROOT, (tWidget *)&g_sXaxis); //X轴按钮
  WidgetAdd(WIDGET_ROOT, (tWidget *)&g_sYaxis); //Y轴按钮
  WidgetAdd(WIDGET_ROOT, (tWidget *)&g_sZaxis); //Z轴按钮
    static char pcCanvasText[5];
    static char pcSliderText[5];

    //
    // Is this the widget whose value we mirror in the canvas widget and the
    // locked slider?
    //
    if(pWidget == (tWidget *)&g_sTem[SLIDER_CANVAS_VAL_INDEX])
    {
        //
        // Yes - update the canvas to show the slider value.
        //
        usprintf(pcCanvasText, "%3d%%", lValue);
        CanvasTextSet(&g_sTemValueCanvas, pcCanvasText);
        WidgetPaint((tWidget *)&g_sTemValueCanvas);

        //
        // Also update the value of the locked slider to reflect this one.
        //
        SliderValueSet(&g_sTem[SLIDER_LOCKED_INDEX], lValue);
        WidgetPaint((tWidget *)&g_sTem[SLIDER_LOCKED_INDEX]);
    }

    if(pWidget == (tWidget *)&g_sTem[SLIDER_TEXT_VAL_INDEX])
    {
        //
        // Yes - update the canvas to show the slider value.
        //
        usprintf(pcSliderText, "%3d%%", lValue);
        SliderTextSet(&g_sTem[SLIDER_TEXT_VAL_INDEX], pcSliderText);
        WidgetPaint((tWidget *)&g_sTem[SLIDER_TEXT_VAL_INDEX]);
    }
}
//*****************************************************************************
//
//液位界面
//
//*****************************************************************************
void OnLiqChange(tWidget *pWidget, int lValue)
{
   WidgetAdd(WIDGET_ROOT, (tWidget *)&g_sBack); //增加返回按钮
  WidgetRemove((tWidget *)&g_sTemperature); //温度按钮
  WidgetRemove((tWidget *)&g_sLiquid);      //液位按钮
  WidgetRemove((tWidget *)&g_sNone);        //备用按钮
  WidgetRemove((tWidget *)&g_sAcceleration);//加速度按钮
  WidgetRemove((tWidget *)&g_sMain);           //删除主界面按钮（不执行的话会在其他界面显示）
  WidgetRemove((tWidget *)&g_sIllustration); //说明按钮
  WidgetAdd(WIDGET_ROOT, (tWidget *)&g_sXaxis); //X轴按钮
  WidgetAdd(WIDGET_ROOT, (tWidget *)&g_sYaxis); //Y轴按钮
  WidgetAdd(WIDGET_ROOT, (tWidget *)&g_sZaxis); //Z轴按钮
    static char pcCanvasText[5];
    static char pcSliderText[5];

    //
    // Is this the widget whose value we mirror in the canvas widget and the
    // locked slider?
    //
    if(pWidget == (tWidget *)&g_sTem[SLIDER_CANVAS_VAL_INDEX])
    {
        //
        // Yes - update the canvas to show the slider value.
        //
        usprintf(pcCanvasText, "%3d%%", lValue);
        CanvasTextSet(&g_sTemValueCanvas, pcCanvasText);
        WidgetPaint((tWidget *)&g_sTemValueCanvas);

        //
        // Also update the value of the locked slider to reflect this one.
        //
        SliderValueSet(&g_sTem[SLIDER_LOCKED_INDEX], lValue);
        WidgetPaint((tWidget *)&g_sTem[SLIDER_LOCKED_INDEX]);
    }

    if(pWidget == (tWidget *)&g_sTem[SLIDER_TEXT_VAL_INDEX])
    {
        //
        // Yes - update the canvas to show the slider value.
        //
        usprintf(pcSliderText, "%3d%%", lValue);
        SliderTextSet(&g_sTem[SLIDER_TEXT_VAL_INDEX], pcSliderText);
        WidgetPaint((tWidget *)&g_sTem[SLIDER_TEXT_VAL_INDEX]);
    }
}

好了函数大概就是这个过程！
四、总结：
此界面还有很多不足之处！会在接下来的几天里逐步完善，并同时将数据采集端的数据通过无线发送到此数据显示端，从而实现对数据的监测功能！

[ 本帖最后由 anananjjj 于 2012-10-29 01:19 编辑 ]

xu__changhua

hao
四个字？

shower.xu

果然不错，没买屏？用的友善的

anananjjj

买的那个出了点问题！先拿友善的凑活用一下！打算过段时间换个七寸的！

[ 本帖最后由 anananjjj 于 2012-10-29 10:06 编辑 ]

chenzhufly

  不错！

sblpp

TI的图形库 还是不错的

zhaojun_xf

看起来不错啊

gongjian32

请问中文显示是什么思路做的啊？