TouchGFX 设计”+graph波形绘制2

邵少少

TouchGFX 设计”+graph波形绘制2 [复制链接]

目前demo是基于PC平台模拟，由于自己开发板内存太小，只进行了基础移植。
Screen1,是借鉴简书那位大神搭建的类似于旋转拨号的功能，增加了按键入口，根据不同的图标进入响应的界面

Clock和screen2页都是直接移植的官方例程，目的是实现Screen1的切页功能

EasingEquation页是自己从官方demo移植出来的graph功能，并进行修改，增加了接口

对graph功能进行了改写，实现了实时刷新的效果，应用于医疗心电的试用，增加了数据和图标的及时显示

这个graph是一个container,可以移植到任意界面上，由于采用的MVP架构，所以需要增加响应的接口函数，开始不适应，适应后发现真的很方便，container在调用前还需要分配内存，开始没注意，后来解决了。





代码上传至百度云，需要的自己下载，这里只贴出部分：

链接：https://pan.baidu.com/s/1sVr8gSDbjf_WuR4ij5JCnA
提取码：elsj


视频链接：



void EasingEquationView::setupScreen()
{


    EasingEquationViewBase::setupScreen();



        statisticsContainer.setXY(200, 100);
        statisticsContainer.setVisible(true);
        add(statisticsContainer);

        statisticsContainer.setup();
        statisticsContainer.invalidate();

        
}
void EasingEquationView::icon021_Blink(uint8_t alpha)
{


        //icon021.setAlpha(255*alpha/127);
        if (alpha == 255)
                alpha_value = 255;

        alpha_value= alpha_value-2;


                icon021.setAlpha(alpha_value);

        icon021.invalidate();
}
void EasingEquationView::tearDownScreen()
{
    EasingEquationViewBase::tearDownScreen();
}


void EasingEquationView::handleTickEvent()
{

        tick++;

        icon021_Blink(statisticsContainer.get_demo_value());

        if(tick%60==0)
        spo2_value = 99;
        if (tick % 121 == 0)
                spo2_value = 98;

        Unicode::snprintf(textspo2Buffer, TEXTSPO2_SIZE, "%02d", spo2_value);
        textspo2.invalidate();



}





int demo[] = {
        0x80,0x80,0x80,0x80,0x80,0x80,0x80,0x80,
        0x80,0x80,0x80,0x80,0x80,0x80,0x80,0x80,
        0x80,0x80,0x80,0x80,0x80,0x80,0x80,0x80,
        0x80,0x80,0x80,0x80,0x80,0x80,0x80,0x80,
        0x80,0x80,0x80,0x80,0x80,0x80,0x80,0x80,
        0x80,0x80,0x80,0x80,0x80,0x80,0x80,0x80,
        0x80,0x80,0x80,0x80,0x80,0x80,0x80,0x80,
        0x80,0x80,0x80,0x80,0x80,0x80,0x80,0x80,
        0x80,0x80,0x80,0x80,0x80,0x81,0x81,0x81,
        0x81,0x81,0x82,0x83,0x84,0x86,0x86,0x87,
        0x87,0x88,0x88,0x89,0x89,0x89,0x89,0x89,
        0x88,0x88,0x87,0x87,0x87,0x87,0x87,0x88,
        0x88,0x88,0x87,0x86,0x85,0x84,0x84,0x83,
        0x82,0x81,0x80,0x80,0x80,0x80,0x80,0x7f,
        0x7f,0x7f,0x7f,0x7f,0x7f,0x7f,0x7f,0x7f,
        0x7f,0x7f,0x7f,0x7f,0x7f,0x7f,0x7e,0x7e,
        0x7e,0x7e,0x7f,0x7f,0x7f,0x7f,0x7f,0x7f,
        0x7f,0x7f,0x7f,0x7f,0x7f,0x7f,0x7f,0x7f,
        0x7f,0x7f,0x7f,0x7f,0x7f,0x7f,0x7f,0x7f,
        0x7f,0x7f,0x7f,0x80,0x7f,0x80,0x80,0x80,
        0x81,0x82,0x83,0x85,0x87,0x89,0x8b,0x8e,
        0x90,0x91,0x92,0x92,0x90,0x8d,0x88,0x83,
        0x7d,0x76,0x6e,0x67,0x61,0x5a,0x55,0x51,
        0x4f,0x4f,0x52,0x56,0x5c,0x63,0x6b,0x72,
        0x78,0x7e,0x81,0x83,0x84,0x83,0x83,0x82,
        0x81,0x80,0x80,0x80,0x80,0x80,0x81,0x81,
        0x81,0x81,0x81,0x80,0x81,0x80,0x81,0x81,
        0x81,0x81,0x81,0x81,0x80,0x80,0x80,0x80,
        0x80,0x80,0x80,0x81,0x81,0x81,0x80,0x80,
        0x80,0x80,0x80,0x80,0x80,0x81,0x80,0x80,
        0x80,0x80,0x80,0x80,0x80,0x80,0x80,0x80,
        0x80,0x80,0x80,0x80,0x80,0x80,0x80,0x80 };

int StatisticsContainer::yScale = 5;

StatisticsContainer::StatisticsContainer()
    : numValues(0), statState(STAT_STATE_NONE)
{
    setTouchable(true);

    setWidth(HAL::DISPLAY_WIDTH);
    setHeight(HAL::DISPLAY_HEIGHT - 80);


    bgPainter.setColor(Color::getColorFrom24BitRGB(7, 35, 45));


        painter[3].setBitmap(Bitmap(BITMAP_STATISTICS_GRADIENT_RED_LINE_ID));
        graph[3].setPosition(5, 23, 690, 194);
        graph[3].setup(painter[3], bgPainter);
        graph[3].setRange(-10 * yScale, 110 * yScale);
        add(graph[3]);



    Application::getInstance()->registerTimerWidget(this);
}

StatisticsContainer::~StatisticsContainer()
{
}

void StatisticsContainer::setup()
{
    statState = STAT_STATE_INIT;
    numValues = 0;


        graph[3].clear();
}




void StatisticsContainer::handleTickEvent()
{
#ifdef SIMULATOR
    (void)Utils::randomNumberBetween(0, 1);
#endif

        int temp;
        //if ((tick_cnt++)%2 ==0)
        {

                temp = demo[tick_value * 5];
                graph[3].addValue(tick_step, (int)(300-temp/3 * yScale + 0.5f));

                set_demo_value((int)(255*temp/0x92));
                Rect updatedRect1(tick_step + 2, 0, 8, graph[3].getHeight());//绘制区域
                invalidateRect(updatedRect1);

                //iconclass.icon021_Blink((uint8_t)(demo[tick_value * 5]/0x92*255));

                if (tick_step++ > graph[4].get_NUMBER_OF_POINTS())
                        tick_step = 0;

                if (tick_value++ > sizeof(demo)/sizeof(int)/5)
                        tick_value = 0;
        }
        

}

void StatisticsContainer::handleClickEvent(const ClickEvent& evt)
{
    if (statState == STAT_STATE_READY && evt.getY() <= upper.getRect().bottom())
    {
     //   update(evt.getX());
    }
}

void StatisticsContainer::handleDragEvent(const DragEvent& evt)
{
    if (statState == STAT_STATE_READY && evt.getNewY() <= upper.getRect().bottom())
    {
      //  update(evt.getNewX());
    }
}

void StatisticsContainer::update(int x)
{
    x &= ~1;

    x = MAX(x, graph[0].getX());
    x = MIN(x, graph[0].getRect().right());
    verticalBar.invalidate();
    verticalBar.setX(x - 1);
    verticalBar.invalidate();

    x -= graph[0].getX();
    for (int i = 0; i < 3; i++)
    {
        graph.setSelectedX(x);

        int y = graph.getValue(x) / yScale;
        if (y >= 0 && y <= 100)
        {
            circle.updateArcEnd(348 * y / 100 + 6);
            Unicode::snprintf(buffer, 4, "%d", y);
            pctValue.invalidate();
        }
    }
}


int StatisticsContainer:: get_demo_value()
{
        return demo_value;
}

void StatisticsContainer::set_demo_value( int value)
{


        demo_value =( 255-value);
}

邵少少

那些年的

邵少少 发表于 2019-4-26 11:53

这很炫，波形是怎么实现的？TouchGFX是有波形这个控件的么？