【STM32H750B-DK评测】光伏发电控制系统

只看该作者 · 2022-9-7 19:33

本帖最后由奇迹l 于 2022-9-7 19:30 编辑

@21小跑堂
一、项目简介
本次评测主要偏向TouchGFX GUI开发部分，设计了一个简单的光伏发电控制界面，主题设计思路以简单易用为主，共计分为三个界面，主页、配置、报警，主要为了体现TouchGFX快速开发，以及简单设置就能得到一个较好界面的功能。

二、GUI设计部分
1.动态图表
看了看网上的图片，计划设计一个类似下图的图表，但是线比这稍微暗淡一点，有y轴的坐标。

1.1 选择动态图表功能并放置

1.2 将放置的图表调整到合适大小，点击进行配置

1.3 设置显示模式为第二个（1.显示完一个屏幕后，全部清空，重新显示；2.显示完一个屏幕后，向前移动动态更新；3.显示完一个屏幕后，从头进行覆盖显示）

1.4 设置Y最大数值与分辨率（分辨率越高，能显示的精度就越高）

1.5 设置Y轴网格显示

1.6 设置界面内缩（优化显示，方便坐标轴数字显示）

1.7 设置Y轴坐标轴数字显示

1.8 配置图表填充，其中选择的图片为一张蓝到透明渐变，大小与整个图表相同的图片

1.9 进行其他调整

1.10 修改代码，在滴答事件中，加入波形生成与数字显示

复制

float random_number[] = { 15.72058f, 13.5207f, 11.89068f, 11.52808f, 12.79996f, 15.64194f, 19.5641f, 23.76272f, 27.31082f, 29.38111f, 29.44686f, 27.41166f, 23.63623f, 18.85561f, 14.0067f, 10.00822f, 7.54646f, 6.91894f, 7.9737f, 10.15872f, 12.66879f, 14.65338f, 15.43436f, 14.67961f, 12.49004f, 9.37813f, 6.14351f, 3.67557f, 2.7319f, 3.74666f, 6.71617f, 11.19009f, 16.37062f, 21.29599f, 25.06366f, 27.03928f, 27.00043f, 25.18074f, 22.20367f, 18.92286f, 16.20808f, 14.72967f, 14.79419f, 16.27155f, 18.63144f, 21.07988f, 22.76223f, 22.98262f, 21.38562f, 18.05532f, 13.50694f, 8.57267f, 4.20914f, 1.27323f, 0.32068f, 1.47657f, 4.40899f, 8.41221f, 12.57907f, 16.02009f, 18.07607f, 18.47218f, 17.37615f, 15.34661f, 13.18478f, 11.72615f, 11.62375f, 13.17641f, 16.24474f, 20.27564f, 24.42979f, 27.78132f, 29.54078f, 29.24728f, 26.88245f, 22.87856f, 18.01858f, 13.25226f, 9.47326f, 7.31119f, 6.98926f, 8.28185f, 10.58186f, 13.06097f, 14.88297f, 15.41768f, 14.40254f, 12.01216f, 8.81852f, 5.65146f, 3.39358f, 2.75987f, 4.11623f, 7.38144f, 12.03707f, 17.2432f, 22.03209f, 25.5329f, 27.17287f, 26.80623f };

void homeView::handleTickEvent()

{

    static uint8_t i = 0;

    dynamicGraph1.addDataPoint(random_number[i]);

    i++;

    if (i >= 100) i = 0;



    if (i % 20 == 0)

    {

        Unicode::snprintfFloat(power_textBuffer, POWER_TEXT_SIZE, "%.1f", random_number[i]);

        power_text.invalidate();

    }

}

1.11 最终效果

2.动态更新列表
设备运行时会产生许多条消息，这些消息我希望能实现类似智能手机的消息条机制，可以随意清除其中的某一条，然后后面的自动递补上

2.1 创建一个单个消息条的自定义控件，并给其中的按键设置一个点击事件，调用自定义函数 deleteAction

2.2 添加一个可滚动容器（让里面的元素可以滚动），一个列表布局（实现自动排列功能），并调整大小

2.3 将list拖到scrollCnt的下面

2.4 配置list 方向设置为上下布局

2.5 设置自定义组件函数 setupListElement设置里面显示的文字 setAction设置回调函数 deleteAction调用上一层的回调函数

复制

void CustomListElement::setupListElement(TEXTS iconTextID)

{

    text.setTypedText(TypedText(iconTextID));

    text.resizeToCurrentText();

    invalidate();

}



void CustomListElement::setAction(GenericCallback< CustomListElement& >& callback)

{

    viewCallback = &callback;

}



void CustomListElement::deleteAction()

{

    // Inform the view of the event

    if (viewCallback->isValid())

    {

        viewCallback->execute(*this);

    }

}

2.6 设置初始化，添加自定义控件元素到list下

复制

void alertView::setupScreen()

{

    alertViewBase::setupScreen();



    list.setHeight(0); //Compensates for the list height that is set to 200 by the designer



    listElements[0].setupListElement(T_LIST_ELEMENT_00);

    listElements[1].setupListElement(T_LIST_ELEMENT_01);

    listElements[2].setupListElement(T_LIST_ELEMENT_02);

    listElements[3].setupListElement(T_LIST_ELEMENT_03);

    listElements[4].setupListElement(T_LIST_ELEMENT_04);

    listElements[5].setupListElement(T_LIST_ELEMENT_05);

    listElements[6].setupListElement(T_LIST_ELEMENT_06);

    listElements[7].setupListElement(T_LIST_ELEMENT_07);

    listElements[8].setupListElement(T_LIST_ELEMENT_08);

    listElements[9].setupListElement(T_LIST_ELEMENT_09);

    listElements[10].setupListElement(T_LIST_ELEMENT_10);



    for (uint8_t i = 0; i < numberOfListElements; ++i)

    {

        listElements[i].setAction(listElementClickedCallback);

        list.add(listElements[i]);

    }



    scrollCnt.setX(480);

}

2.7 回调函数，删除list里面的一个子元素

复制

void alertView::listElementClicked(CustomListElement& element)

{

    // The button of the list element has been pressed

    // so it is removed from the list

    list.remove(element);

    scrollCnt.invalidate();

}

2.8最终效果

3.动画
TouchGFX提供了一套简单的做动画的机制，很简单就能实现动画效果

3.1 选中需要做动画组件控件，勾选MoveAnimator

3.2 设置屏幕转换结束回调

3.3 设置控件初始位置（函数被简化）

复制

void alertView::setupScreen()

{

    alertViewBase::setupScreen();

    scrollCnt.setX(480);

}

3.4 屏幕转换结束回调，设置动作动画

复制

void alertView::ScreenBegins_function()

{

    scrollCnt.setMoveAnimationDelay(0);

    scrollCnt.startMoveAnimation(80, scrollCnt.getY(), 15, EasingEquations::cubicEaseInOut);

}

3.5 最终效果