学习主题：STM32自编GUI探讨
小组宣言：建立自己的GUI帝国！

学习计划：本周——资料下载和分享

                  第二周——建立GUI的技术分析、互动问答

                  第三周——学习笔记发表和分享

                  第四周——新品项目计划、DIY创意分享

 

小组现有成员：xiaodc88  5186

队员在招人数：5人

招募条件——有STM32F系列使用基础,最好是有视窗开发经验的优先，有一年以上项目开发经验。

请问xiaodc88，
我想报名这个小组，怎么报名啊

欢迎加入。共同学习哈，资料整理中，整理好了再上传哈
有时间大家多交流交流，有些商用GUI的界面是比较死板的
我这里只提出做GUI的简单思路，大家可自由发挥，做出不同效果的GUI
例如可以用这GUI做个计算器啦，做个MP3的触摸啦什么的。。。
 

好啊，组长，这个活动有学习板子吗？

我加入，最近正在为gui头痛

我想加入，对GUI开发很感兴趣哦！

我也申请加入！！！！！！！！！！！！！！！！！

汗，有什么最新消息。建一个QQ群吧。我建也可以啊      我的QQ：13988372  。大家都踊跃啊

好，那我开始抛砖了，大家踊跃丢玉啊，我好回收
先说明下，大家最好有火牛或者神洲的STM32开发板及例程，因为是在开发板的例程基础上二次开发而来的。
下面的砖都是在火牛开发板的例程基础上搭建的。我们知道按键都是有一定形状的，而最经常看到的形状就是矩形。说到这，大家就容易看清楚实质了，我们只要能判断某次触摸的点在某个按键的矩形区域内，那么就可以认为点中了此按键，从而触发按键事件，调用相关函数进行处理。
我们知道火牛触摸例程中有个重要的函数：
getDisplayPoint(&display, Read_Ads7846(), &matrix ) ; //得到触摸的点
有了这个函数得到了触摸的点，那么剩下来的事情就好办了，说明一下，调用这个函数得到的点保存在display结构体中哦，动用display.x和display.y就能得到X，Y坐标哦。根据这个坐标计算下是不是在你指定的按键内应该是件很容易的事情了吧。
当然，按键一般是动态创建的，而且创建的数目也不一定，我们知道，单片机的内存是相当有限的，因此，内存管理就显得相当重要，这个砖明天再抛。
好了，今天暂时抛这个砖，大家丢玉，我在楼下接

再发个内存管理程序，大家先玩玩，有问题大家讨论

对这个有兴趣，但是手上的板子没有触屏

为了响应阿呆版主的号召，更新下进程哈，上次上传了内存管理的文件，今天我们就来具体的创建按钮，先发一个创建按钮的函数，这个函数是我自己写的哈，欢迎大家拍砖完善：
//按钮结构体
 typedef   struct  BOTTON   //
{
   uint16_t x;    //按钮左上X
   uint16_t y;    //按钮左上Y
   uint8_t xsize;   //按钮宽
   uint8_t ysize;   //按钮高   
   uint16_t TextColor;  //按钮文字颜色
   uint16_t TextBKColor; //按钮文字背景颜色
   uint16_t PenColor;  //按钮画笔色
   uint16_t BrushColor;  //按钮画刷色
   uint16_t* BKBmp;          //按钮位图背景 
   uint8_t TextAlign;       //文本对齐方式
   uint8_t*  id;      //按钮ID  id作标识用，不显示  这个兼作Text用
//   uint8_t*  Text;     //按钮文字  Text用于在按钮上显示文本（支持中英文混显）  这个暂时没启用
}  Button;
 
//创建按钮
Button* BUTTON_Create(uint16_t x,uint16_t y,uint8_t xsize,uint8_t ysize,uint8_t * id/*,uint8_t * text*/)//创建按钮,参数：左上点X,左上点Y，宽，高，按钮ID
{
  Button* btt;//按钮对象指针
  uint16_t n=1;//id的字节数
  uint8_t* ID;//ID指针
//  uint8_t* TEXT;//Text指针
  uint8_t* str;
  //开辟内存
  btt=(Button*)mem_malloc(sizeof(Button));  //动态申请内存 会初始化为0   返回值就是申请成功的内存首地址   注意free(btt);
 
 //为各元素赋值 
 (btt->x)=x;
 (btt->y)=y;
 (btt->xsize)=xsize;
 (btt->ysize)=ysize;
 (btt->TextColor)=Black;
 (btt->TextBKColor)=Grey;
 (btt-&gtenColor)=Grey;
 (btt->BrushColor)=Grey;
 (btt->BKBmp)=NULL;
 (btt->TextAlign)=Align_XCenter | Align_YCenter;
  //=====================================================
  //循环求出ID的字节数，以确定为id开辟多少字节内存
  str=id;
  do
  {
  n++;//ID的字节数加1
  str++;//ID的地址加1 
  }
  while(*str!=0);
 //为id另外开辟内存  期内存起始地址为ID
 ID=(uint8_t*)mem_malloc(sizeof(uint8_t)*n);  //动态申请内存 会初始化为0   注意将id free(id) 释放
 if(ID==NULL)
 {
   GUI_Text(0,100,"calloc err!",Red,Black);
   return NULL;
 }
 else
 {
  str=ID; 
  do
  {
  *str=*id;
  str++;
  id++; 
  }
  while(*id!=0);
  str++;
  *str=0;
 
  //将新开辟的内存首地址保存到Button->id中
  (btt->id)=ID; 
 }
/*
 //================================================================
  //循环求出TEXT的字节数，以确定为Text开辟多少字节内存   TEXT
  n=1;
  str=text;
  do
  {
  n++;//ID的字节数加1
  str++;//ID的地址加1 
  }
  while(*str!=0);
 //为id另外开辟内存  期内存起始地址为ID
 TEXT=(uint8_t*)calloc(n,sizeof(uint8_t));  //动态申请内存 会初始化为0   注意将Text free(Text) 释放
 if(TEXT==NULL)
 {
   GUI_Text(0,0,"calloc err!",Red,Black);
   return NULL; 
 }
 else
 {
  str=TEXT; 
  do
  {
  *str=*text;
  str++;
  text++; 
  }
  while(*text!=0);
  str++;
  *str=0;
 
  //将新开辟的内存首地址保存到Button->Text中
  (btt->Text)=TEXT;
 
 }
*/
 return btt;//返回创建的按钮指针
}
 
这个函数的参数含义上面都列出来了，注意，按钮ID其实就是显示在按钮上面的文字！
 
 
 
 

创建了按钮当然还要显示出来，怎么办呢，调用下面这个函数，按钮就能在指定的位置显示出来：
//显示按钮
void BUTTON_Show(Button* bt)//显示按钮
{
if(bt->BKBmp)
LCD_DrawBMP(bt->x, bt->y,bt->xsize,bt->ysize,bt->BKBmp);
else
LCD_FillRect(bt->x, bt->y, bt->xsize, bt->ysize,bt-&gtenColor,bt->BrushColor);//画填充矩形，参数：左上点X坐标，左上点Y坐标，宽，高，画笔色，画刷色
DispStringInRect(bt->x, bt->y, bt->xsize, bt->ysize,(bt->id),bt->TextColor,bt->TextBKColor,bt->TextAlign); //在矩形中显示字符串 (不显示矩形) 参数：左上X，左上Y，宽，高，字符串，前景色，背景色，对齐方式（可或运算）
}
 

按钮是用来触控的，光创建、显示出来有什么用，当然关键得知道点中的是哪个按钮，这就得判断点中的点是在按钮内，你调用如下这个函数就OK了：
////点在按钮内
uint8_t TP_PointInButton(Button* btt,uint16_t x,uint16_t y)//点在按钮内  参数：按钮指针，点X坐标，点Y坐标  返回值为1：点在按钮内； 0：点不在按钮内
{
if((x>=(btt->x)) && xx)+(btt->xsize)) && (y>=btt->y) && (yy)+(btt->ysize))))
{
return 1;
}
else
return 0;
}
 
注意哈，这个函数返回1，表示点中了此按钮，返回0表示没有点中此按钮，循环查询创建的所有按钮就知道点中了哪个按钮了不。
 

最后总结陈词，学到这里，一个简单但功能完备的GUI其实就已经完成了，由于相机坏了，我暂时就没拍图了，如有需要，等相机修好后补个图。
其实大家仔细看看就会发现，这个GUI是支持图片按钮的，也就是说像智能机上那种漂亮的图片按钮，你用这个GUI也能做出来，而且效果超好。由于创建按钮使用了动态内存管理，因此你可以创建无数版面的N多个按钮，只要一页显示的按钮数不要太多，总数随便多少都没有关系，不会消耗完你的系统资源的。
当然，你有可能想动态的改变某个按钮的文字或图片，这一切也能轻松做的，有基础的人应该一看就知道如何实现。
再次说明下，这个GUI是很简单的，但功能是完备的，效果是值得肯定的，性能是可靠的。祝大家学习愉快！有问题继续讨论！