TouchGFX Design" + graph waveform drawing 2

邵少少

TouchGFX Design" + graph waveform drawing 2 [Copy link]

Currently, the demo is simulated based on the PC platform. Since the memory of the development board is too small, only the basic transplantation is performed. Screen1 is a function similar to the rotary dial built by the great writer of Jianshu. It adds a key entry and enters the corresponding interface according to different icons. The Clock and screen2 pages are directly transplanted official routines, the purpose is to realize the page switching function of Screen1. The EasingEquation page is the graph function transplanted from the official demo, and modified, and the interface is added. The graph function is rewritten to achieve the effect of real-time refresh, which is applied to the trial of medical electrocardiogram and adds the timely display of data and icons. This graph is a container, which can be transplanted to any interface. Due to the MVP architecture adopted, it is necessary to add the corresponding interface function. I was not used to it at first, but I found it was really convenient after adapting. The container also needs to allocate memory before calling. I didn’t pay attention to it at first, but it was solved later. The code has been uploaded to Baidu Cloud. You can download it yourself if you need it. Only part of it is posted here: Link: https://pan.baidu.com/s/1sVr8gSDbjf_WuR4ij5JCnA Extraction code: elsj Video link: 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()); ick%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,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());//Drawing area 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); }

邵少少

那些年的

Shao Shaoshao posted on 2019-4-26 11:53

This is very cool. How is the waveform implemented? Does TouchGFX have a waveform control?