请选择 进入手机版 | 继续访问电脑版

迪文科技论坛

 找回密码
 立即注册
搜索
热搜: T5L 视频屏 DGUS OS
查看: 1452|回复: 11

【开源】在迪文屏上定制一个柱状图控件

[复制链接]

12

主题

81

帖子

1352

积分

金牌会员

Rank: 6Rank: 6

积分
1352
发表于 2021-6-24 22:29:19 | 显示全部楼层 |阅读模式
本帖最后由 熊家余 于 2021-6-24 22:30 编辑

首先说一下,为啥要定制一个柱状图控件呢?这是因为DGUS Tool中没有这样的现成控件,然后大家肯定会有这样的需求,因此我定制了一个柱状图控件,并开源给大家!
注意:此实现原理不是采用简单的切图方式,切图方式是有局限性的,而且又麻烦
视频演示效果:https://www.bilibili.com/video/BV18M4y1u7V1?share_source=copy_web

.前言
1.    本实验平台为迪文的EK043开发板,当然了,只需要稍微修改一下GUI工程中的背景图片尺寸,也可以用于其他的T5L迪文屏
2.    本项目是基于T5L迪文屏,采用C51开发方式
3.    定制的柱状图控件源代码被封装成了column_chart.c和column_chart.h文件,放在了FUNC_HANDLER文件夹下面,如果你没有定制的需求,请不要改动column_chart.c和.h文件中的任何代码,直接使用即可
4.    此柱状图的实现原理是通过一个基础图形控件来实现的,而非多个,支持的柱状图列数不受限制,每一列的颜色可单独设定
5.    柱状图控件代码已经高度封装,目的是为了尽量简化使用难度
6.    以后若还有空闲时间和机会,凡是我开源的迪文项目,都会以教程的方式开源给大家,宗旨是让大家可以在其中能够学到一个或者多个实用功能,而不是把代码写得过于复杂庞大,导致大家花费大量的时间去研究

本帖子中包含更多资源

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

x
回复

使用道具 举报

12

主题

81

帖子

1352

积分

金牌会员

Rank: 6Rank: 6

积分
1352
 楼主| 发表于 2021-6-24 22:33:10 | 显示全部楼层

二. 如何快速上手使用
2.1 GUI工程
就只有一个界面,如下图所示:

此界面上有1个基础图形控件和5个按钮,作用分别如下:
基础图形控件: 用来显示柱状图的
动画: 点击时可让柱状图产生一个动画效果
样式: 给柱状图换样式,有直线和抛物线俩种样式,点击可来回切换
颜色: 点击之后,可以不断得更换柱状图中每一列的颜色
减号: 让柱状图中每一列的高度都降低1个像素
加号: 让柱状图中每一列的高度都增加1个像素


2.2 C51代码
1.    首先定义一个柱状图控件对象,如下代码所示:
COLUMN_CHART chart; //定义一个柱状图控件
2.    然后写一个函数来初始化柱状图控件的参数,如下代码所示:
void column_chart_init()
{
         u8 i;
        
         chart.vp = START_WIN_CHART_VP;//基础图形控件的VP地址
         chart.start_x = 70;//柱状图中第一列的左下角x坐标
         chart.start_y = 204;//柱状图中第一列的左下角y坐标
         chart.x_offset = 42;//柱状图中每一列之间的x轴间隔
         chart.column_width = 26;//柱状图中每一列的宽度
         chart.column_num = 9;//共9列,即一,二,三,....,九
         for(i=0;i<chart.column_num;i++)//模拟柱状图的数据
         {
                  chart.columns.height = i*60+10;//每一列的高度
                  chart.columns.color = 0xF800+i*200;//每一列的颜色
         }
         column_chart_draw(&chart);//开始绘制到迪文屏幕上

}
只要在main函数中调用column_chart_init此函数,即可以在迪文屏上看到一个多彩的柱状图

更多的细节请看附件中的源代码


本帖子中包含更多资源

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

x
回复

使用道具 举报

12

主题

81

帖子

1352

积分

金牌会员

Rank: 6Rank: 6

积分
1352
 楼主| 发表于 2021-6-24 22:41:12 | 显示全部楼层
教程文档:
源码:

本帖子中包含更多资源

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

x
回复

使用道具 举报

2

主题

357

帖子

2750

积分

金牌会员

Rank: 6Rank: 6

积分
2750
发表于 2021-6-25 08:33:30 | 显示全部楼层
插眼,yyds
回复

使用道具 举报

22

主题

239

帖子

1271

积分

金牌会员

Rank: 6Rank: 6

积分
1271
QQ
发表于 2021-6-25 08:53:44 | 显示全部楼层
看着很牛逼呀
运动,编程,热爱生活
回复

使用道具 举报

0

主题

7

帖子

401

积分

中级会员

Rank: 3Rank: 3

积分
401
发表于 2021-6-25 10:12:21 | 显示全部楼层
厉害呀,支持开源新控件
回复

使用道具 举报

6

主题

84

帖子

707

积分

高级会员

Rank: 4

积分
707
QQ
发表于 2021-6-25 10:55:11 | 显示全部楼层
酷,支持。
回复

使用道具 举报

12

主题

81

帖子

1352

积分

金牌会员

Rank: 6Rank: 6

积分
1352
 楼主| 发表于 2021-6-25 11:12:39 | 显示全部楼层
大家有什么更好的想法,请留下你的宝贵意见
回复

使用道具 举报

6

主题

84

帖子

707

积分

高级会员

Rank: 4

积分
707
QQ
发表于 2021-6-25 14:43:30 | 显示全部楼层
熊家余 发表于 2021-6-25 11:12
大家有什么更好的想法,请留下你的宝贵意见

能在柱状图显示出具体数值就完美了
回复

使用道具 举报

12

主题

81

帖子

1352

积分

金牌会员

Rank: 6Rank: 6

积分
1352
 楼主| 发表于 2021-6-25 22:50:57 | 显示全部楼层
wolfgd 发表于 2021-6-25 14:43
能在柱状图显示出具体数值就完美了

好主意喔
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2022-5-20 22:32 , Processed in 0.142004 second(s), 27 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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