查看: 538|回复: 8
收起左侧

【RISC-V GUI图形用户界面】uGUI移植到GD32 RISC-V

[复制链接]

  离线 

  • TA的每日心情
    拍拍
    2021-3-7 15:55
  • 签到天数: 15 天

    [LV.4]

    发表于 2020-6-23 09:07:38 | 显示全部楼层 |阅读模式

    成为RISC-V行业新人,是你正确的选择!

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    1.简述
    uGUI是一个小巧的应用于嵌入式系统的免费开源图形库。它与平台无关,而且可以很容易的移植到几乎任何一个基于微控制器的系统。整个图形库主要由两个文件组成:ugui.c和ugui.h。uGUI主要支持窗口、按键、文本框、图片这几个控件和任一触摸屏,对UI要求不复杂的应用系统可以考虑一下。
    uGUI的官网下载:
    GitHub源码下载:
    2.移植前准备
    实现uGUI的移植是基于
    【兆易创新RISC-V开发板评测】
    02.基于GD32 RISV-V串口实现SHELL调试》的工程上实现的。通过NucleiStudio IDE自动创建的工程自带gd32vf103v_lcd_eval.c和gd32vf103v_lcd_eval.h两个文件,但这两个文件内的驱动仅支持SSD1289驱动显示的屏幕。当前我们GD32VF103V-EVAL开发板上使用的液晶屏对应的驱动是ILI9320,所以我们需要对这两个文件进行更新。方便的是官方最新提供的《GD32VF103_Firmware_Library_V1.0.1》软件包里已经支持ILI9320,我们只需要下载下来,更新一下这两个文件即可,在初始化过程中添加如下代码,就可以看到液晶屏初始化成功,并将整个液晶屏显示为蓝色背景。
    void xInitLCD(void){ exmc_lcd_init();    lcd_init();    lcd_clear(LCD_COLOR_BLUE);}


    3.移植uGUI
    将下载的uGUI代码存放在工程路径:GD32_RISC-V\GD32VF103V-EVAL\Utilities\uGUI,我们需要移植的接口在ugui_port.c和ugui_port.h文件中,函数原型如下:
    EXTERN  void      uGUI_DriverDrawPoint(UG_S16 x, UG_S16 y, UG_COLOR color);EXTERN UG_RESULT uGUI_DriverDrawLine(UG_S16 x1, UG_S16 y1, UG_S16 x2, UG_S16 y2, UG_COLOR color);EXTERN UG_RESULT uGUI_DriverFillFrame(UG_S16 x1, UG_S16 y1, UG_S16 x2, UG_S16 y2, UG_COLOR color);
    最基础的是uGUI_DriverDrawPoint函数,uGUI通过这个函数实现画点的功能;uGUI_DriverDrawLine函数实现了uGUI画线的功能,uGUI_DriverFillFrame函数实现了uGUI填充的功能,uGUI_DriverDrawLine和uGUI_DriverFillFrame这两个函数实现是一个可选实现函数,实现与否并不影响uGUI的最终显示,只是对uGUI显示速度的优化。
    所以在我们实现了对uGUI底层画点的函数后,我们就可以对uGUI进行初始化了,初始化代码如下:
    static void uGUI_Init(void){    UG_Init(&uGUI, (void(*)(UG_S16,UG_S16,UG_COLOR))uGUI_DriverDrawPoint, 240, 320);
    #if 0    UG_DriverRegister(DRIVER_DRAW_LINE, (void *)uGUI_DriverDrawLine);    UG_DriverRegister(DRIVER_FILL_FRAME, (void *)uGUI_DriverFillFrame);    UG_DriverEnable(DRIVER_DRAW_LINE);    UG_DriverEnable(DRIVER_FILL_FRAME);#else    UG_DriverDisable(DRIVER_DRAW_LINE);    UG_DriverDisable(DRIVER_FILL_FRAME);#endif
        UG_DriverDisable(DRIVER_FILL_AREA);
        UG_FillScreen(C_BLUE);}

    通过调用uGUI_Init函数将接口函数进行注册、并将整个屏幕清除显示为蓝色(C_BLUE)。
    4.uGUI应用
    uGUI当前实现的控件并不是太多,所以仅仅适用于对UI应用不复杂的场合;下面的代码实现的是通过uGUI图形库创建一个窗口,设置窗口的一些属性,在窗口中显示图片、按键和文本框,代码如下所示:
    /* Window 4 */UG_WINDOW  window_4;UG_OBJECT  obj_buff_wnd_4[MAX_OBJECTS];UG_IMAGE   image4_1;UG_IMAGE   image4_2;UG_BUTTON  button4_1;UG_TEXTBOX txtbox4_1;
    void uGUI_Window4Demo(void){/* Create Window 4 */    UG_WindowCreate(&window_4, obj_buff_wnd_4, MAX_OBJECTS, window_4_callback);   UG_WindowSetStyle(&window_4, WND_STYLE_HIDE_TITLE);    UG_WindowSetBackColor(&window_4, C_WHITE);
    /* Create Image 1 */    UG_ImageCreate(&window_4, &image4_1, IMG_ID_0,   0, 0, 0, 0);    UG_ImageSetBMP(&window_4, IMG_ID_0, &mbb_logo);
    /* Create Image 2 */    UG_ImageCreate(&window_4, &image4_2, IMG_ID_1, 100, 0, 0, 0);    UG_ImageSetBMP(&window_4, IMG_ID_1, &gd32_logo);
    /* Create Button 1 */    UG_ButtonCreate(&window_4, &button4_1, BTN_ID_0,  10, 120, 120, 150);    UG_ButtonSetFont(&window_4, BTN_ID_0, &FONT_12X20);    UG_ButtonSetBackColor(&window_4, BTN_ID_0, C_LIME);    UG_ButtonSetText(&window_4, BTN_ID_0, "Welcome");
    /* Create Textbox 1 */    UG_TextboxCreate(&window_4, &txtbox4_1, TXB_ID_0, 5, 280, UG_WindowGetInnerWidth(&window_4)-5, UG_WindowGetInnerHeight(&window_4)-5);    UG_TextboxSetFont(&window_4, TXB_ID_0, &FONT_8X14);    UG_TextboxSetText(&window_4, TXB_ID_0, "uGUI v0.31 beta");    UG_TextboxSetAlignment(&window_4, TXB_ID_0, ALIGN_TOP_CENTER);}

    /**  * @brief    * @param  None  * @retval None  */void uGUI_Demo(void){    uGUI_Init();
    #if 0    uGUI_Window1Demo();
    uGUI_Window2Demo();    uGUI_Window3Demo();#endif
    uGUI_Window4Demo();
    /* Show Window */    UG_WindowShow(&window_4);
    UG_Update();}

    题主优质好文
    RISC-V单片机中文网-全球只专注于RISC-V单片机行业应用的中文网站
    回复

    使用道具 举报

      离线 

  • TA的每日心情
    拍拍
    2021-3-7 15:55
  • 签到天数: 15 天

    [LV.4]

     楼主| 发表于 2020-6-23 09:09:37 | 显示全部楼层
    实现的效果图如下所示:ANT32RV5610 单片机芯片-【RISC-V GUI图形用户界面】uGUI移植到GD32 RISC-Vrisc-v单片机中文社区(1)

    ANT32RV5610 单片机芯片-【RISC-V GUI图形用户界面】uGUI移植到GD32 RISC-Vrisc-v单片机中文社区(2)

    5.体会
    uGUI当前实现的控件功能虽然少,但它小巧精悍,在充分理解了uGUI设计思想和代码实现后,个人感觉uGUI还是挺不错的;当然在uGUI移植实现显示的时候,也碰到一些问题,不知道能不能算上BUG呢:在显示图片的时候最底层调用了UG_DrawBMP函数,它将所有的颜色又转换成了RGB888的格式显示了,但我们在实现驱动的时候实际上是RGB565,所以在这边做了更正,所有的图片颜色就显示正常了^^,其它的关于uGUI功能和显示应用实现,小伙伴们可以参考《Reference Guide》来设计你们的应用界面哈。
    6.工程 & 资料



    RISC-V单片机中文网-全球只专注于RISC-V单片机行业应用的中文网站
    回复 支持 反对

    使用道具 举报

      离线 

  • TA的每日心情
    拍拍
    2021-3-7 15:55
  • 签到天数: 15 天

    [LV.4]

     楼主| 发表于 2020-6-23 09:10:03 | 显示全部楼层
    RISC-V单片机中文网-全球只专注于RISC-V单片机行业应用的中文网站
    回复 支持 反对

    使用道具 举报

      离线 

  • TA的每日心情
    拍拍
    2021-3-7 15:55
  • 签到天数: 15 天

    [LV.4]

     楼主| 发表于 2020-6-23 09:24:06 | 显示全部楼层
    uGUI的官方网址http://embeddedlightning.com/ugui/
    uGUI GitHub源码下载地址为:https://github.com/achimdoebler/UGUI












    What is µGUI?
    µGUI is a free and open source graphic library for embedded systems. It is platform-independent and can be easily ported to almost any microcontroller system. As long as the display is capable of showing graphics, µGUI is not restricted to a certain display technology. Therefore, display technologies such as LCD, TFT, E-Paper, LED or OLED are supported. The whole module consists of three files: ugui.c, ugui.h and ugui_config.h.
    µGUI Features
    • µGUI supports any color, grayscale or monochrome display
    • µGUI supports any display resolution
    • µGUI supports multiple different displays
    • µGUI supports any touch screen technology (e.g. AR, PCAP)
    • µGUI supports windows and objects (e.g. button, textbox)
    • µGUI supports platform-specific hardware acceleration
    • 16 different fonts available
    • cyrillic fonts supported
    • TrueType font converter available (https://github.com/AriZuu)
    • integrated and free scalable system console
    • basic geometric functions (e.g. line, circle, frame etc.)
    • can be easily ported to almost any microcontroller system
    • no risky dynamic memory allocation required
    µGUI Requirements
    µGUI is platform-independent, so there is no need to use a certain embedded system. In order to use µGUI, only two requirements are necessary:
    • a C-function which is able to control pixels of the target display.
    • integer types for the target platform have to be adjusted in ugui_config.h.


    RISC-V单片机中文网-全球只专注于RISC-V单片机行业应用的中文网站
    回复 支持 反对

    使用道具 举报

      离线 

    该用户从未签到

    发表于 2020-6-23 09:26:31 | 显示全部楼层
    太复杂了,看的都眼花缭乱,这么多的代码,估计想玩起来,非常费劲吧,一般像这种需要图形配合的控制电路,咱直接编一个手机APP,由APP通过蓝牙信号或者wifi来给电路板传送数据,简单而且直接,代码通俗易懂,最关键的自主可控。楼主这个太高大上,咱玩不起来。
    RISC-V单片机中文网-全球只专注于RISC-V单片机行业应用的中文网站
    回复 支持 反对

    使用道具 举报

      离线 

    该用户从未签到

    发表于 2020-6-23 09:36:07 | 显示全部楼层
    相信大部分刚刚接触GD32VF103的朋友还处于对官方demo的实验阶段,譬如ADC实验,PWM实验,USB实验等等,而且相信在实验过程中遇到许许多多的不确定的问题,希望楼主在解决新手们遇到的问题方面多做贡献,高大上的东西还是先缓一缓吧。
    RISC-V单片机中文网-全球只专注于RISC-V单片机行业应用的中文网站
    回复 支持 反对

    使用道具 举报

      离线 

  • TA的每日心情
    拍拍
    2021-3-7 15:55
  • 签到天数: 15 天

    [LV.4]

     楼主| 发表于 2020-6-23 09:50:57 | 显示全部楼层
    Reference Guide  http://embeddedlightning.com/download/reference-guide/
    µGUI v0.3

    附件是官方的Example Projects可
    供参考移植:




    uGUI STM32F429 Discovery DISCOVERY_KIT.zip

    1.11 MB, 下载次数: 0

    官方的Example Projects

    RISC-V单片机中文网-全球只专注于RISC-V单片机行业应用的中文网站
    回复 支持 反对

    使用道具 举报

      离线 

  • TA的每日心情
    拍拍
    2021-3-7 15:55
  • 签到天数: 15 天

    [LV.4]

     楼主| 发表于 2020-6-23 09:54:24 | 显示全部楼层
    xdqfc 发表于 2020-6-23 09:36
    相信大部分刚刚接触GD32VF103的朋友还处于对官方demo的实验阶段,譬如ADC实验,PWM实验,USB实验等等,而且 ...

    哈哈,感谢回复啊,后期分享一些基础RISC-V教程。
    由于我们在用GD32V做产品,做的应用比较花哨,哈哈哈
    RISC-V单片机中文网-全球只专注于RISC-V单片机行业应用的中文网站
    回复 支持 反对

    使用道具 举报

      离线 

  • TA的每日心情
    拍拍
    2021-3-7 15:55
  • 签到天数: 15 天

    [LV.4]

     楼主| 发表于 2020-6-23 10:03:04 | 显示全部楼层
    RISC-V单片机中文网-全球只专注于RISC-V单片机行业应用的中文网站
    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    关闭

    RISC-V单片机中文网上一条 /2 下一条




    版权及免责声明|RISC-V单片机中文网 |网站地图

    GMT+8, 2021-5-8 14:47 , Processed in 1.242497 second(s), 58 queries .

    快速回复 返回顶部 返回列表