迪文科技论坛

 找回密码
 立即注册
搜索
查看: 4739|回复: 19

【开源】开源一套为开发迪文屏而设计的图形UI库

[复制链接]

3

主题

41

回帖

554

积分

高级会员

Rank: 4

积分
554
发表于 2022-12-20 14:45:19 | 显示全部楼层 |阅读模式
大家有任何问题都可以问我,我会一一解答,如果有想法和我一起完善这套UI库的可以私聊。
,这套UI库的用法可以自行发挥 ,可以创造很多种应用场景。由于时间紧迫,可能有些细节上并没有做到最好,希望大家多多包涵,有什么地方写的不对还请指正。
后续会为大家继续更新,也希望大家能够跟我一起完善它,丰富它


本套图形UI库的优点:
(1)、能够减少迪文DGUSII上位机的编辑
(2)、所有的控件都由UI库中的函数控制,包括坐标、以及属性的更改
(3)、支持文本单词截断、自动换行、超宽省略并返回超宽标记,文本多页显示,文本安照对齐方式自动对齐
(4)、可以解决串口屏无法像裸屏一样实现多形态,动态的复杂界面的切换,以及动态变换
(5)、灵活度高,可以组成任意想要的界面

工程:
(1)MCU工程:

(2)DWIN_SET:

  (3)DGUS上位机工程:


上位机配置:

1、上位机配置相当简单,只要把需要的控件放进去,然后给一个描述地址就行,记得分配好描述地址的大小(一般为0x10)
2、变量地址不用管,本套UI库将会自动分配变量地址
3、将每个页面中的描述地址按照相同类型放到UI库的的描述地址管理存储器中 例如:

typedef struct {
        uint16_t desctibeAddr;
        bool desctibeStatus;
}manageDesctibe_t;


const uint16_t g_TextDesctibeAddr[DGUS_PAGE_NUM][DGUS_PAGE_TEXT_DESCTIBE_ADDR_NUM];

manageDesctibe_t g_ManageTextDesctibeAddr[DGUS_PAGE_NUM][DGUS_PAGE_TEXT_DESCTIBE_ADDR_NUM];
这是一个管理Icon控件描述地址的管理存储器,详细内容请下载源码自行查看

公司中项目实战演示视频链接: https://b23.tv/xJGTDhR

本套UI库使用Demo演示视频链接: https://b23.tv/igmXZlQ

1、当前支持的功能:
(1)描述地址可以由程序随机分配并管理(已完成)
(2)隐藏和删除的方式可以采用分配专用地址,将专用地址提前写入隐藏和删除的数据,然后改写描述地址数据中数据指针的地址已实现隐藏和删除(已完成)
(3)数据地址做管理(已完成)
(4)文本显示支持普通显示(超过显示内容就打省略号)和多页模式(超过显示内容就多页显示,将内容显示完)(已完成)
(5)title 和 button 的添加text、icon 能返回添加的指针地址,方便直接操作,也方面直接删除单个的icon和text(已完成)
(6)title 支持各个参数的动态设置并改变显示效果,如显示坐标,语言类型,字体颜色、字体大小、是否隐藏,删除title,也可以删除title 中任意一个 text和icon(已完成)
(7)button 支持各个参数的动态设置并改变显示效果,如显示坐标,语言类型,字体颜色、字体大小、是否隐藏,删除button ,也可以删除button 中任意一个 text和icon(已完成)
(8)button 还可以支持 text 、icon聚焦并改变聚焦后的显示效果(已完成)
(9)List 列模式,即光标已列为单位移动,List非列模式,即列表已行为单位光标移动(已完成)
(10)List支持行和列单独参数的设置与获取,行和列都可以动态单独设置参数并改变显示效果(已完成)
(11)List可以单独隐藏行和列,也可以单独删除行和列(已完成)

2、往后的目标:
(1)将会把迪文屏中的所有控件集成进来,并进行函数封装
(2)实现一套自己的内存管理系统(方便支持内存更小的嵌入式设备中)
(3)实现分时任务系统
(4)支持触摸
(5)实现各个板块的模块化,以及结合迪文串口屏的相关控件部署相关代码
(6)最终版采用LVGL创建对象的方式实现整套专门服务于迪文T5L DGUSII串口屏显示的UI系统(开发周期可能比较长),最终要达到方便移植到任何带有串口和定时器的嵌入式系统设备中
3、目前遇到的阻碍:
(1)迪文屏内部有没有主动下发触摸坐标的功能,只知道当前的触摸控件不支持代码配置触摸区域,因此无法支持触摸功能(希望迪文官方能够支持以下,这样能让这套UI更加不受局限性)
(2)发现迪文屏基本图形无法叠加显示(希望迪文官方能够支持以下,这样能让这套UI更加不受局限性)
4、移植:
(1)系统中只需要一个串口和一个1ms的定时器即可
5、建议:
(1)大家使用的时候用迪文官方的上位机软件配置两个页面,并且每个页面的控件相同类型的数量最好一致,
        这样可以实现换页时不会出现刷新滞后导致上一个页面在数据传送时乱码和闪烁。最好是在换页之前先调用UI 中的SHOW,
        然后在用命令设置跳转show_JumpPage(),这样可以很好的避免数据传输需要一定时间产生的滞后导致上一个页面在数据传送时乱码和闪烁

6、使用Demo:(由于内容太多,这里不详细写了,写不下,有兴趣的请下载源码了解)
(1)创建一个支持多页的文本显示
        createTextShow_t createText;

        createText.IsHide = false;
        createText.alignType = ALIGN_LEFT;
        createText.fontSize = FONT32X40;
        createText.textColor = RGB888toRGB565(0x00, 0x00, 0x00);
        createText.langType = LANGUAGE_EN;
        createText.textDesctibeAddr = get_PageTextDesctibeAddr();
        createText.textVariableSize = 1024;
        createText.sx = 0;
        createText.sy = 60;
        createText.ex = 799;
        createText.ey = 419;
        createText.CurrPage = 0;
        createText.isFillBg = true;
        createText.isFirstRowBlank = true;
        createText.pTextStr = (char*)"YYDS";
        createText.textBgFillColor = RGB888toRGB565(0xFF, 0xFF, 0xFF);
        createText.textPageIndicateColor = 0x001F;
        createText.textPageIndicateBgColor = 0xDF1B;
        createText.textFillDesctibeAddr = get_PageBasicGraphDesctibeAddr();
        createText.textPageIndicateDesctibeAddr = get_PageBasicGraphDesctibeAddr();
        createText.textShowMode = TEXT_MULIT_PAGE_MODE;//多页多页模式
        textShow_t* pTextShow = create_TextShow(&createText);


       show_Text(pTextShow);
(2)创建一个Title显示,并添加两个文本和一个图标
           titleArea_t TitleArea;
        addTitleText_t AddTitleText1;
        addTitleText_t AddTitleText2;
        addTitleIcon_t AddTitleIcon1;

        TitleArea.sx = 0;
        TitleArea.ex = 799;
        TitleArea.sy = 0;
        TitleArea.ey = 60;
        titleShow_t* pTitleShow = creage_TitleShow(&TitleArea, get_PageBasicGraphDesctibeAddr(), get_PageBasicGraphDesctibeAddr(), RGB888toRGB565(0xFF, 0x00, 0x00), RGB888toRGB565(0x00, 0x88, 0x50));
               AddTitleText1.IsHide = false;
        AddTitleText1.alignType = ALIGN_LEFT;
        AddTitleText1.fontSize = FONT32X40;
        AddTitleText1.textColor = RGB888toRGB565(0x00, 0x00, 0x00);
        AddTitleText1.langType = LANGUAGE_EN;
        AddTitleText1.textDesctibeAddr = get_PageTextDesctibeAddr();
        AddTitleText1.textVariableSize = 256;
        AddTitleText1.sx = TitleArea.sx + 10;
        AddTitleText1.sy = TitleArea.sy + 10;
        AddTitleText1.ex = 200;
        AddTitleText1.ey = TitleArea.ey - 10;

        add_TextToTitle(pTitleShow, &AddTitleText1, "AAAAAA");

        AddTitleIcon1.IsHide = false;
        AddTitleIcon1.iconDesctibeAddr = get_PageIconDesctibeAddr();
        AddTitleIcon1.iconId = 1;
        AddTitleIcon1.iconLib = 1;
        AddTitleIcon1.sx = 500;
        AddTitleIcon1.sy = 10;

        add_IconToTitle(pTitleShow, &AddTitleIcon1);

        AddTitleText2.IsHide = false;
        AddTitleText2.alignType = ALIGN_LEFT;
        AddTitleText2.fontSize = FONT24X32;
        AddTitleText2.textColor = RGB888toRGB565(0x00, 0xFF, 0x00);
        AddTitleText2.langType = LANGUAGE_EN;
        AddTitleText2.textDesctibeAddr = get_PageTextDesctibeAddr();
        AddTitleText2.textVariableSize = 256;
        AddTitleText2.sx = AddTitleText1.ex + 10;
        AddTitleText2.sy = AddTitleText1.sy;
        AddTitleText2.ex = AddTitleText1.ex + 200;
        AddTitleText2.ey = AddTitleText1.ey;
        add_TextToTitle(pTitleShow, &AddTitleText2, "AAACCC");

        show_Title(pTitleShow);

(3)创建一个Button 显示,并添加一个文本和一个图标
        buttonArea_t ButtonArea;
        addButtonText_t AddButtonText1;
        addButtonIcon_t AddButtonIcon1;


               ButtonArea.sx = 0;
        ButtonArea.ex = 799;
        ButtonArea.sy = 420;
        ButtonArea.ey = 479;
        buttonShow_t* pButtonShow = creage_ButtonShow(&ButtonArea, get_PageBasicGraphDesctibeAddr(), get_PageBasicGraphDesctibeAddr(), RGB888toRGB565(0xFF, 0x00, 0x00), RGB888toRGB565(0x20, 0x55, 0x60));

        AddButtonText1.alignType = ALIGN_LEFT;
        AddButtonText1.isSelect = false;
        AddButtonText1.IsHide = false;
        AddButtonText1.fontSize = FONT32X40;
        AddButtonText1.textSelColor = RGB888toRGB565(0x00, 0x00, 0x00);
        AddButtonText1.textNoSelColor = RGB888toRGB565(0x00, 0x00, 0x00);
        AddButtonText1.langType = LANGUAGE_EN;
        AddButtonText1.textDesctibeAddr = get_PageTextDesctibeAddr();
        AddButtonText1.textVariableSize = 256;
        AddButtonText1.area.sx = ButtonArea.sx + 10;
        AddButtonText1.area.sy = ButtonArea.sy + 10;
        AddButtonText1.area.ex = 200;
        AddButtonText1.area.ey = ButtonArea.ey - 10;
        add_TextToButton(pButtonShow, &AddButtonText1, "AAAAAA");

        AddButtonIcon1.iconDesctibeAddr = get_PageIconDesctibeAddr();
        AddButtonIcon1.IsHide = false;
        AddButtonIcon1.iconLib = 1;
        AddButtonIcon1.isSelect = false;
        AddButtonIcon1.area.sx = 500;
        AddButtonIcon1.area.sy = 420;
        AddButtonIcon1.area.ex = 550;
        AddButtonIcon1.area.ey = 479;
        AddButtonIcon1.iconHigh = 28;
        AddButtonIcon1.iconWidth = 14;
        AddButtonIcon1.iconSelId = 1;
        AddButtonIcon1.iconNoSelId = 1;
        add_IconToButton(pButtonShow, &AddButtonIcon1);

        show_Button(pButtonShow);

(4)创建一个列表显示,添加7行,每一行4列(每行列数可以不相同)

        createListShow_t sCreateList;
        addListRow_t sAddLisrRow;
        addListCol_t sAddLisrCol;
        sCreateList.cursorIndex = 1;
        sCreateList.isColMode = false;
        sCreateList.isOnBgFill = true;
        sCreateList.isSelfAdaption = false;
        sCreateList.listArea.sx = 0;
        sCreateList.listArea.ex = 400;
        sCreateList.listArea.sy = 100;
        sCreateList.listArea.ey = 381;
        sCreateList.IsHide = false;
        sCreateList.listOutlineColor = RGB888toRGB565(0xFF, 0x00, 0x00);
        sCreateList.listOutlineDesctibeAddr = get_PageBasicGraphDesctibeAddr();
        sCreateList.rowHigh = 40;

        listShow_t* pListShow1 = create_ListShow(&sCreateList);


        for (int i = 0; i < 7; i++)
        {
                sAddLisrRow.isOnBgFillTab[0] = true;
                sAddLisrRow.isOnBgFillTab[1] = true;
                sAddLisrRow.isOnBgFillTab[2] = true;
                sAddLisrRow.isOnBgFillTab[3] = true;
                sAddLisrRow.rowColAlignType[0] = ALIGN_CENTER;
                sAddLisrRow.rowColAlignType[1] = ALIGN_CENTER;
                sAddLisrRow.rowColAlignType[2] = ALIGN_LEFT;
                sAddLisrRow.rowColAlignType[3] = ALIGN_LEFT;
                sAddLisrRow.rowItemType[0] = TEXT_TYPE;
                sAddLisrRow.rowItemType[1] = TEXT_TYPE;
                sAddLisrRow.rowItemType[2] = TEXT_TYPE;
                sAddLisrRow.rowItemType[3] = ICON_TYPE;
                sAddLisrRow.rowOutlineColor = RGB888toRGB565(0xFF, 0x00, 0x00);
                sAddLisrRow.rowOutlineDesctibeAddr = get_PageBasicGraphDesctibeAddr();
                sAddLisrRow.widthPer[0] = 30;
                sAddLisrRow.widthPer[1] = 30;
                sAddLisrRow.widthPer[2] = 30;
                sAddLisrRow.widthPer[3] = 10;
                listRow_t* pListRow = add_ListRowToList(pListShow1, &sAddLisrRow);

                sAddLisrCol.colText.IsHide = false;
                sAddLisrCol.colText.fontSize = FONT24X32;
                sAddLisrCol.colText.textColor = RGB888toRGB565(0x00, 0x00, 0x00);
                sAddLisrCol.colText.langType = LANGUAGE_EN;
                sAddLisrCol.colText.textDesctibeAddr = get_PageTextDesctibeAddr();
                sAddLisrCol.colText.textFillDesctibeAddr = get_PageBasicGraphDesctibeAddr();
                sAddLisrCol.colText.textVariableSize = 256;
                sAddLisrCol.colText.textNoSelBgFillColor = RGB888toRGB565(0x35, 0x45, 0x34);
                sAddLisrCol.colText.textSelBgFillColor = RGB888toRGB565(0x55, 0x80, 0x34);
                sAddLisrCol.colText.pTextStr = (char*)"Yes";
                listCol_t* pListCol = add_ListColToRow(pListRow, &sAddLisrCol);
                sAddLisrCol.colText.IsHide = false;
                sAddLisrCol.colText.fontSize = FONT24X32;
                sAddLisrCol.colText.textColor = RGB888toRGB565(0x00, 0x00, 0x00);
                sAddLisrCol.colText.langType = LANGUAGE_EN;
                sAddLisrCol.colText.textDesctibeAddr = get_PageTextDesctibeAddr();
                sAddLisrCol.colText.textFillDesctibeAddr = get_PageBasicGraphDesctibeAddr();
                sAddLisrCol.colText.textVariableSize = 256;
                sAddLisrCol.colText.textNoSelBgFillColor = RGB888toRGB565(0x35, 0x45, 0x34);
                sAddLisrCol.colText.textSelBgFillColor = RGB888toRGB565(0x55, 0x80, 0x34);
                sAddLisrCol.colText.pTextStr = (char*)"Yes";
                pListCol = add_ListColToRow(pListRow, &sAddLisrCol);
                sAddLisrCol.colText.IsHide = false;
                sAddLisrCol.colText.fontSize = FONT24X32;
                sAddLisrCol.colText.textColor = RGB888toRGB565(0x00, 0x00, 0x00);
                sAddLisrCol.colText.langType = LANGUAGE_EN;
                sAddLisrCol.colText.textDesctibeAddr = get_PageTextDesctibeAddr();
                sAddLisrCol.colText.textFillDesctibeAddr = get_PageBasicGraphDesctibeAddr();
                sAddLisrCol.colText.textVariableSize = 256;
                sAddLisrCol.colText.textNoSelBgFillColor = RGB888toRGB565(0x35, 0x45, 0x34);
                sAddLisrCol.colText.textSelBgFillColor = RGB888toRGB565(0x55, 0x80, 0x34);
                sAddLisrCol.colText.pTextStr = (char*)"Yes";
                pListCol = add_ListColToRow(pListRow, &sAddLisrCol);

                sAddLisrCol.colIcon.IsHide = false;
                sAddLisrCol.colIcon.iconDesctibeAddr = get_PageIconDesctibeAddr();
                sAddLisrCol.colIcon.iconId = 1;
                sAddLisrCol.colIcon.iconLib = 1;
                sAddLisrCol.colIcon.iconFillDesctibeAddr = get_PageBasicGraphDesctibeAddr();
                sAddLisrCol.colIcon.iconNoSelBgFillColor = RGB888toRGB565(0x35, 0x45, 0x34);
                sAddLisrCol.colIcon.iconSelBgFillColor = RGB888toRGB565(0x55, 0x80, 0x34);
                sAddLisrCol.colIcon.high = 28;
                sAddLisrCol.colIcon.width = 14;
                pListCol = add_ListColToRow(pListRow, &sAddLisrCol);
        }


        show_List(pListShow1);


本帖子中包含更多资源

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

x
回复

使用道具 举报

0

主题

752

回帖

4681

积分

论坛元老

Rank: 8Rank: 8

积分
4681
发表于 2022-12-20 14:52:36 | 显示全部楼层
前排顶一下
只会hellowrold
回复

使用道具 举报

3

主题

41

回帖

554

积分

高级会员

Rank: 4

积分
554
 楼主| 发表于 2022-12-20 15:01:59 | 显示全部楼层

感谢支持
回复

使用道具 举报

0

主题

3

回帖

1829

积分

金牌会员

Rank: 6Rank: 6

积分
1829
发表于 2022-12-21 16:21:13 | 显示全部楼层
奈斯
回复

使用道具 举报

2

主题

29

回帖

530

积分

高级会员

Rank: 4

积分
530
发表于 2022-12-24 16:59:57 | 显示全部楼层
nice 大神 新作 必须支持, 迪文单靠图片很难适用一些特定数据变化比较的场合,有了这个套ui 方便灵活多了
回复

使用道具 举报

3

主题

41

回帖

554

积分

高级会员

Rank: 4

积分
554
 楼主| 发表于 2022-12-24 19:02:29 | 显示全部楼层
ailex 发表于 2022-12-24 16:59
nice 大神 新作 必须支持, 迪文单靠图片很难适用一些特定数据变化比较的场合,有了这个套ui 方便 ...

感谢支持
回复

使用道具 举报

23

主题

291

回帖

1968

积分

金牌会员

Rank: 6Rank: 6

积分
1968
QQ
发表于 2022-12-26 08:56:51 | 显示全部楼层
感觉非常棒,,期待再一次升级
运动,编程,热爱生活
回复

使用道具 举报

3

主题

41

回帖

554

积分

高级会员

Rank: 4

积分
554
 楼主| 发表于 2022-12-26 10:09:39 | 显示全部楼层
dingyu000111 发表于 2022-12-26 08:56
感觉非常棒,,期待再一次升级

感谢支持,后续会继续更新的
回复

使用道具 举报

567

主题

167

回帖

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
11976
发表于 2023-2-8 11:57:06 | 显示全部楼层
您好,关于您在项目开发中遇到的阻碍,请参考如下解决方法:
1.第一个阻碍:迪文屏内部有没有主动下发触摸坐标的功能,只知道当前的触摸控件不支持代码配置触摸区域,因此无法支持触摸功能(希望迪文官方能够支持以下,这样能让这套UI更加不受局限性)
  解决方法:请参考《DGUSII开发指南》,如下图,我们的控件可以实现设置触摸区域和触摸位置的功能


2.第二个阻碍:发现迪文屏基本图形无法叠加显示(希望迪文官方能够支持以下,这样能让这套UI更加不受局限性)
  解决方法:设置3个变量图标控件。1、3显示相同图标但VP地址不同;2与1、3错开,显示不同图标且VP地址与1、3也不同。初始显示1、2,通过状态返回或者指令的方式隐藏1、显示3/隐藏3、显示1,可以实现交叉图层切换的效果。
  演示效果链接:https://www.bilibili.com/video/BV1kR4y1q7m6/









本帖子中包含更多资源

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

x
回复

使用道具 举报

3

主题

41

回帖

554

积分

高级会员

Rank: 4

积分
554
 楼主| 发表于 2023-2-10 10:44:50 | 显示全部楼层
dwinForumAdmin 发表于 2023-2-8 11:57
您好,关于您在项目开发中遇到的阻碍,请参考如下解决方法:
1.第一个阻碍:迪文屏内部有没有主动下发触摸 ...

谢谢官方的支持
回复

使用道具 举报

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

本版积分规则

QQ|Archiver|手机版|小黑屋|迪文科技论坛 ( 京ICP备05033781号-1 )

GMT+8, 2024-11-24 08:22 , Processed in 0.064010 second(s), 23 queries .

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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