技術標籤：# RT-threadTouchGFx 溫度曲線art-pi

在我們的裝置中為了檢視資料的變化，趨勢，一般習慣使用個圖形曲線進行表示，這節我們結合官方的demo來實現下模擬溫度曲線功能的實現。

注：控制元件的新增過程不詳細說明，可以檢視之前的 TouchGFx的頁面佈局，文章有詳細說明

1.新增滑動控制元件的操作函式

2.設定曲線的相關引數

包括樣式，顏色，x,y的間隔，點數等，這個要和silder控制元件要對應好。

不然就會出現報錯。

3.新增程式碼

menu_1_1_View.cpp(根據實際的對應檔案來)

然後新增silder控制元件的回撥函式，和定時器定時刷新曲線資料，這裡用的是隨機數模擬資料，後期直接使用感測器的資料。

#include <gui/menu_1_1_screen/menu_1_1View.hpp>
#include <math.h>
#include <stdlib.h>

menu_1_1View::menu_1_1View()
{
    tickCounter = 0;
}

void menu_1_1View::setupScreen()
{
    menu_1_1ViewBase::setupScreen();
    // Initialize graph range with default slider value at start up
    sliderValueChanged(slider1.getValue());
}

void menu_1_1View::tearDownScreen()
{
    menu_1_1ViewBase::tearDownScreen();
}


void menu_1_1View::handleTickEvent()
{
    tickCounter++;

    // Insert each second tick
    if (tickCounter % 2 == 0)
    {
        float yMax = dynamicGraph1.getGraphRangeYMaxAsFloat();

        // Insert "random" points along a sine wave
        dynamicGraph1.addDataPoint((int)((sinf(tickCounter * .02f) + 1) * (yMax / 2.2f)) + rand() % (int)(yMax / 10.f));
    }
}

void menu_1_1View::sliderValueChanged(int value)
{
    // Adjust the Y-axis max value according to the slider value
    dynamicGraph1.setGraphRangeY(0, value);
    dynamicGraph1.invalidate();

    // Adjust the interval of the labels/grid lines on the Y-axis
    // to match the new range.
    if (value > 199)
    {
        dynamicGraph1MajorYAxisLabel.setInterval(50);
        dynamicGraph1MajorYAxisGrid.setInterval(50);
    }
    else if (value > 100)
    {
        dynamicGraph1MajorYAxisLabel.setInterval(20);
        dynamicGraph1MajorYAxisGrid.setInterval(20);
    }
    else
    {
        dynamicGraph1MajorYAxisLabel.setInterval(10);
        dynamicGraph1MajorYAxisGrid.setInterval(10);
    }

    dynamicGraph1MajorYAxisLabel.invalidate();
    dynamicGraph1MajorYAxisGrid.invalidate();
}
 

簡單的分析下程式碼，可以清楚的看出，handleTickEvent()為週期定時，隨機產生計數，並新增到曲線上，後期將新增的計數，改為自己探測器實際採集的計數。

sliderValueChanged(intvalue)函式主要就是滑輪上下拖動，來放大縮小曲線的。

更為高階的操作可以檢視官方的API手冊，進行實驗。