在我们的设备中为了查看数据的变化,趋势,一般习惯使用个图形曲线进行表示,这节我们结合官方的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(int value)函数主要就是滑轮上下拖动,来放大缩小曲线的。
更为高级的操作可以查看官方的API手册,进行实验。