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

熊家余

首先说一下,为啥要定制一个柱状图控件呢?这是因为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.    以后若还有空闲时间和机会,凡是我开源的迪文项目,都会以教程的方式开源给大家,宗旨是让大家可以在其中能够学到一个或者多个实用功能,而不是把代码写得过于复杂庞大,导致大家花费大量的时间去研究

熊家余

二. 如何快速上手使用
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此函数,即可以在迪文屏上看到一个多彩的柱状图

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

熊家余

教程文档:
源码:

Bensenl

插眼，yyds

dingyu000111

看着很牛逼呀

zashel

厉害呀，支持开源新控件

wolfgd

酷，支持。

熊家余

大家有什么更好的想法,请留下你的宝贵意见

wolfgd

熊家余 发表于 2021-6-25 11:12
大家有什么更好的想法,请留下你的宝贵意见

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

熊家余

wolfgd 发表于 2021-6-25 14:43
能在柱状图显示出具体数值就完美了

好主意喔