收藏官网首页

机智云

机智云»社区首页 › 开源项目及赛事 › STM32 IoT开发 › ST+机智云DIY数字仪表 › 【官方】数字仪表GUI应用开发
返回列表 发新帖
查看: 8693|回复: 1

【官方】数字仪表GUI应用开发

admin

140

主题

418

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
12643
跳转到指定楼层
楼主
发表于 2020-2-7 11:25:31 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
校园创客福利
TouchGFX MVP通信架构

应用实现按照TouchGFX MVP架构来分层，使得结构清晰:



Backend/Control
F7子板读取G0传感器数据:
STM32CubeMX配置USART外设

根据原理图,STM32CubeMX配置G0通过USART2与F7子板通信外设:



串口接收G0子板传感器数据

sensor.cpp

  1. /**
  2.   ****************
  3.   * @file
  4.   * @author
  5.   * @version V2.0.0
  6.   * @date    07/13/2019
  7.   ****************
  8.   */
  9. #include "sensor.h"
  10. #include "usart.h"
  11. #include "stdio.h"
  12. #include "string.h"

  14. extern UART_HandleTypeDef huart4;

  16. uint8_t aTxBuffer[30]; //发送缓冲区
  17. uint8_t aRxBuffer[1];
  18. __IO ITStatus Tx_ready_UART4 = SET; //此处必须赋值SET
  19. __IO ITStatus Rx_ready_UART4 = RESET;
  20. uint8_t Rx_buff_UART4[30];
  21. uint8_t Rx_count_UART4=0; //UART4 接收计数器
  22. uint8_t Rx_num_UART4=0; //UART4 一条指令全部接收后的接收字节数
  23. extern ts_sensor_data s_sensor_data;


  26. //68 01 0E 01 19 01 B4 00 00 00 00 10 5C 6E
  27. #define FRM_START                0x68
  28. #define FRM_CMD_UPD_SENSOR       0x01
  29. #define FRM_FIXLEN               14
  30. #define FRM_END0                 0x5c
  31. #define FRM_END1                 0x6e

  33. #define FRM_POS_START            0
  34. #define FRM_POS_CMD              1
  35. #define FRM_POS_LEN              2
  36. #define FRM_POS_DATA             3
  37. #define FRM_POS_CRC              11
  38. #define FRM_POS_END0             12
  39. #define FRM_POS_END1             13

  41. uint8_t cal_crc(uint8_t *buf,uint8_t len)
  42. {
  43.        uint8_t t_crc = 0;
  44.        uint8_t r_crc = 0;
  45.         //check crc
  46.         for(int i=0; i<len ;i++)
  47.         {
  48.                 t_crc += buf;
  49.         }
  50.         r_crc = (uint8_t)t_crc;
  51.         return r_crc;
  52. }

  54. int8_t parse_sensor_package(void)
  55. {
  56.         uint8_t msg[4];
  57.         int rc = 0;
  58.         if(Rx_buff_UART4[FRM_POS_START]==FRM_START && Rx_buff_UART4[FRM_POS_CMD]==FRM_CMD_UPD_SENSOR
  59.            && Rx_buff_UART4[FRM_POS_CRC] == cal_crc(Rx_buff_UART4,FRM_FIXLEN-3))
  60.         {
  61.                 HAL_GPIO_TogglePin(GPIOD, GPIO_PIN_11);
  62.                 msg[0]=Rx_buff_UART4[FRM_POS_DATA];
  63.                 msg[1]=Rx_buff_UART4[FRM_POS_DATA+1];
  64.                 msg[2]=Rx_buff_UART4[FRM_POS_DATA+2];
  65.                 msg[3]=Rx_buff_UART4[FRM_POS_DATA+3];
  66.                 s_sensor_data.temperature[1] = (msg[0]*256+msg[1])/10;
  67.                 s_sensor_data.temperature[0] = (msg[0]*256+msg[1]);
  68.                 s_sensor_data.humidity = msg[2]*256+msg[3];
  69.         }else{
  70.                 rc = -1;
  71.         }
  72.         return rc;

  74. }


  77. void Start_Next_UART_Receive_IT(UART_HandleTypeDef *UartHandle)
  78. {
  79.         HAL_UART_Receive_IT(UartHandle,aRxBuffer,1); //开启下一次接收中断
  80. }

  82. void HAL_UART_RxCpltCallback(UART_HandleTypeDef *UartHandle)
  83. {
  84.         uint8_t i=0;
  85.         if(UartHandle->Instance == UART4)
  86.         {
  87.                 Rx_buff_UART4[Rx_count_UART4] = aRxBuffer[0];
  88.                 if(Rx_buff_UART4[Rx_count_UART4-1] == 0x5c && Rx_buff_UART4[Rx_count_UART4] == 0x6e || Rx_count_UART4 > FRM_FIXLEN)//\n
  89.                 {
  90.                         Rx_ready_UART4 = SET;
  91.                         Rx_num_UART4 = ++Rx_count_UART4;
  92.                         Start_Next_UART_Receive_IT(&huart4); //开启下一次接收中断
  93.                 }
  94.                 else
  95.                 {
  96.                         Rx_count_UART4++;
  97.                         Start_Next_UART_Receive_IT(&huart4); //开启下一次接收中断
  98.                 }

  100.         }
  101. }

  103. void sensor_read_init(void)
  104. {
  105.         Start_Next_UART_Receive_IT(&huart4); //开启下一次接收中断
  106. }

  108. int sensor_read_func(void)
  109. {
  110.         int rc = 0;
  111.         if(Rx_ready_UART4==SET)
  112.         {
  113.                 Rx_ready_UART4 = RESET;
  114.                 rc = parse_sensor_package();
  115.                 Rx_count_UART4=0;
  116.                 memset(Rx_buff_UART4,0,sizeof(Rx_buff_UART4));

  118.         }else{
  119.                 rc = -1;
  120.         }
  121.         return rc;
  122. }

  124. void sensor_read_start_next()
  125. {
  126.         Start_Next_UART_Receive_IT(&huart4); //开启下一次接收中断
  127. }
复制代码

传感器读取任务StartsensorTask数据处理

STM32CubeMX配置


Main函数中创建StartsensorTask任务读取将串口收到的数据通过消息队列传给UI的Model层:

  1. ts_sensor_data s_sensor_data;

  3. /* USER CODE END Header_StartsensorTask */
  4. void StartsensorTask(void const * argument)
  5. {
  6.   /* USER CODE BEGIN StartsensorTask */
  7.    sensor_read_init();
  8.   /* Infinite loop */
  9.     for(;;)
  10.     {
  11.         if(sensor_read_func()==0)
  12.         {
  13.                 osMessagePut(sensor_msg_qHandle,(uint32_t)&s_sensor_data,200);
  14.         }
  15.         osDelay(500);
  16.     }

  18.   /* USER CODE END StartsensorTask */
  19. }
复制代码

Model层通过M->->V更新传感器值

主要代码:Model.cpp

  1. #include <gui/model/Model.hpp>
  2. #include <gui/model/ModelListener.hpp>
  3. #ifndef SIMULATOR
  4. #include "stm32f7xx_hal.h"
  5. #include "cmsis_os.h"

  7. extern osMessageQId gui_msg_qHandle;
  8. extern osMessageQId sensor_msg_qHandle;
  9. #endif
  10. Model::Model() : modelListener(0)
  11. {
  12. }
  13. #define MAX_P_SENSORBOARD_LOST_TIM       300     //
  14. static uint16_t s_p_sensorboard_lost_tcnt = 0;
  15. void Model::tick()
  16. {
  17. #ifndef SIMULATOR
  18.     osEvent retsensor;
  19.     retsensor.value.v = 0;
  20.     retsensor = o sMessageGet(sensor_msg_qHandle,1);
  21.     ts_sensor_data *p_sensor_data=NULL;
  22.     if(retsensor.value.v!=0)
  23.     {
  24.         p_sensor_data = (ts_sensor_data *)(retsensor.value.v|0x20000000);
  25.         modelListener->update_sensor_event(p_sensor_data);
  26.         s_p_sensorboard_lost_tcnt = 0;
  27.     }
  28.    
  29.     //check if the sensor board disconnected
  30.     if(s_p_sensorboard_lost_tcnt++>MAX_P_SENSORBOARD_LOST_TIM)
  31.     {
  32.          p_sensor_data->humidity=0;
  33.          p_sensor_data->temperature[0]=0;p_sensor_data->temperature[1]=0;
  34.          modelListener->update_sensor_event(p_sensor_data);      
  35.     }

  37. #endif
  38. }
复制代码

F7子板读取按键数据:

读取任务StartkeyTask数据处理

翻页按键
  1. void StartkeyTask(void const * argument)
  2. {
  3.   /* USER CODE BEGIN StartkeyTask */
  4.   /* Infinite loop */
  5.   HAL_GPIO_WritePin(KEY5_COM_GPIO_Port, KEY5_COM_Pin,GPIO_PIN_SET);
  6.   for(;;)
  7.   {
  8.         //FY ->NEXT PAGE
  9.         if(HAL_GPIO_ReadPin(GPIOA, KEY7_FY_Pin )==GPIO_PIN_SET)
  10.         {
  11.             osMessagePut(gui_msg_qHandle,0x08,200);
  12.             osDelay(1000);
  13.         }
  14.         osDelay(100);
  15.   }
  16.   /* USER CODE END StartkeyTask */
  17. }
复制代码


通过Model层通过M->->V更新按键操作

主要代码:

Model.cpp

  1. void Model::tick()
  2. {
  3. #ifndef SIMULATOR
  4.     osEvent retkey;
  5.     retkey.value.v = 0;
  6.     retkey = osMessageGet(gui_msg_qHandle,1);
  7.     if(retkey.value.v==0x08)
  8.     {
  9.         modelListener->key_event();     
  10.     }
  11. #endif
  12. }
复制代码

Screen1Prensenter.cpp(举例)

  1. void Screen1Presenter::key_event()
  2. {
  3.     view.handleKeyEvent(8);
  4. }
复制代码

Screen1ViewBase.cpp(举例)

  1. //Handles when a key is pressed
  2. void Screen1ViewBase::handleKeyEvent(uint8_t key)
  3. {
  4.     if(8 == key)
  5.     {
  6.         //Interaction1
  7.         //When hardware button 8 clicked change screen to Screen2
  8.         //Go to Screen2 with screen transition towards East
  9.         application().gotoScreen2ScreenSlideTransitionEast();
  10.     }
  11. }
复制代码

配网按键
  1. void StartkeyTask(void const * argument)
  2. {
  3.   /* USER CODE BEGIN StartkeyTask */
  4.   /* Infinite loop */
  5.   HAL_GPIO_WritePin(KEY5_COM_GPIO_Port, KEY5_COM_Pin,GPIO_PIN_SET);
  6.   for(;;)
  7.   {
  8.         //PW -> WIFI CONF
  9.         if(HAL_GPIO_ReadPin(GPIOA, KEY6_PW_Pin )==GPIO_PIN_SET)
  10.         {
  11.                 HAL_GPIO_WritePin(M_CTRL_GPIO_Port, M_CTRL_Pin,GPIO_PIN_SET);
  12.                 osDelay(200);
  13.                 HAL_GPIO_WritePin(M_CTRL_GPIO_Port, M_CTRL_Pin,GPIO_PIN_RESET);
  14.         }
  15.         osDelay(100);
  16.   }
  17.   /* USER CODE END StartkeyTask */
  18. }
复制代码

UI界面实现
资源准备UI界面所需要的图片库
images.7z

TouchGFX设计需要的中文字体
fonts.7z

将解压后的文件，添加到STM32CubeMX生成的Project目录下的C：~\TouchGFX\assets\fonts的fonts文件夹里，然后重新启动TouchGFX。




UI界面制作演示

Video
数字仪表GUI应用开发


说明：

1.视频不含有Screen0的配网图标以及Screen5界面的制作（原理是和里面其他的类似）。

2.我们将Screen0的圆环动画的起点设为-40度（视频演示是0度），初始化温度的UI显示为-20度（视频演示是0度）。

3.在这个部分添加红框的内容，UI显示的通配符。



期望实现的界面屏幕切换效果

基本操作步骤
1.导入资源


2.TouchGFX designer实现界面Screen0实现

                                   

设置与更新传感器值以及按键操作：

  1. void Screen0View::update_sensor_value(ts_sensor_data *p_sensor_data)
  2. {
  3.     Unicode::snprintf(temperTextBuffer1, TEMPERTEXTBUFFER1_SIZE, "%d", p_sensor_data->temperature[1]);
  4.     temperText.invalidate();
  5.     Unicode::snprintf(temperTextBuffer2, TEMPERTEXTBUFFER1_SIZE, "%d", p_sensor_data->temperature[0]);
  6.     temperText.invalidate();
  7.     circleProgress1.setValue(p_sensor_data->temperature[1] * 10 + p_sensor_data->temperature[0]);
  8.     circleProgress1.invalidate();
  9. }
  10. void Screen0View::set_sensor_value(ts_sensor_data *p_sensor_data)
  11. {
  12.     v_sensor_data.temperature[0] = p_sensor_data->temperature[0];
  13.     v_sensor_data.temperature[1] = p_sensor_data->temperature[1];
  14.     v_sensor_data.humidity = p_sensor_data->humidity;
  15. }
  16. void Screen0View::handleTickEvent()
  17. {
  18.     wait++;
  19.     if (wait>500)
  20.     {
  21.         ///add test by andy.du 20190710
  22.         application().gotoScreen4ScreenSlideTransitionSouth();
  23.     }
  24. }
复制代码
  1. void Screen0Presenter::key_event()
  2. {
  3.     view.handleKeyEvent(8);
  4. }

  6. void Screen0Presenter::update_sensor_event(ts_sensor_data *p_sensor_data)
  7. {
  8.     view.update_sensor_value(p_sensor_data);
  9. }
复制代码

Screen1实现


温度仪表盘显示以及按键操作主要代码：

  1. void Screen1View::setupScreen()
  2. {
  3.     wait = 0;
  4.     circleProgress2.setXY(79, 74-10);
  5.     circleProgress2.setProgressIndicatorPosition(0, 0, 171, 130);
  6.     circleProgress2.setRange(-134, 134);
  7.     circleProgress2.setCenter(85, 85);
  8.     circleProgress2.setRadius(85-98/2);
  9.     circleProgress2.setLineWidth(98);
  10.     circleProgress2.setStartEndAngle(-134, 134);
  11.     circleProgress2.setCapPrecision(180);  
  12.     circleProgress2Painter.setBitmap(Bitmap(BITMAP_A001_002_ID));
  13.     circleProgress2.setPainter(circleProgress2Painter);
  14.     circleProgress2.setValue(z);
  15.     image2.setXY(86, 80-10);
  16.     image2.setBitmap(Bitmap(BITMAP_A001_004_ID));
  17.         
  18.     textureMapperImage2D.setBitmap(Bitmap(BITMAP_A001_001_ID));
  19.     textureMapperImage2D.setWidth(240);
  20.     textureMapperImage2D.setHeight(240);
  21.     textureMapperImage2D.setXY(0, 0);
  22.     textureMapperImage2D.setBitmapPosition(165-3, 80-10);
  23.     textureMapperImage2D.setCameraDistance(300.0f);
  24.     textureMapperImage2D.setOrigo(165, 92+51+28-20, textureMapperImage2D.getCameraDistance());
  25.     textureMapperImage2D.setCamera(textureMapperImage2D.getOrigoX(), textureMapperImage2D.getOrigoY());
  26.     textureMapperImage2D.setRenderingAlgorithm(TextureMapper::NEAREST_NEI**OR);
  27.     textureMapperImage2D.setVisible(true);
  28.         
  29.     add(textureMapperImage2D);
  30.     add(circleProgress2);
  31.     add(image2);
  32.     textureMapperImage2D.updateZAngle(PI *(-120) / 180.0f);
  33. }
复制代码
  1. void Screen1View::handleTickEvent()
  2. {
  3.     tickCounter++;
  4.         
  5.     if (tickCounter > 100)
  6.     {      
  7.         tickCounter = 0;
  8.         
  9.         Unicode::snprintf(temperTextBuffer1, TEMPERTEXTBUFFER1_SIZE, "%d", From_Presenter_temperature);
  10.         Unicode::snprintf(temperTextBuffer2, TEMPERTEXTBUFFER2_SIZE, "%d", From_Presenter_temperature_z);
  11.         
  12.         if(From_Presenter_temperature>=0&&From_Presenter_temperature<10)
  13.         {
  14.           From_Presenter_temperature=(From_Presenter_temperature-120)+((From_Presenter_temperature-0)*5);
  15.         }
  16.         else if(From_Presenter_temperature>=10&&From_Presenter_temperature<20)
  17.         {
  18.           From_Presenter_temperature=(From_Presenter_temperature-70)+((From_Presenter_temperature-10)*5);
  19.         }
  20.         else if(From_Presenter_temperature>=20&&From_Presenter_temperature<30)
  21.         {
  22.           From_Presenter_temperature=(From_Presenter_temperature-20)+(((From_Presenter_temperature-20)*5)-2);
  23.         }
  24.         else if(From_Presenter_temperature>=30&&From_Presenter_temperature<40)
  25.         {
  26.           From_Presenter_temperature=(From_Presenter_temperature+30)+(((From_Presenter_temperature-30)*5)-2);
  27.         }
  28.         
  29.         circleProgress2.setValue(From_Presenter_temperature+From_Presenter_temperature_z-2);   
  30.         textureMapperImage2D.setupAnimation(AnimationTextureMapper::Z_ROTATION,(PI *(From_Presenter_temperature+From_Presenter_temperature_z-2) / 180.0f),50,0,EasingEquations::expoEaseInOut);
  31.         textureMapperImage2D.startAnimation();
  32.         circleProgress2.invalidate();
  33.         temperText.invalidate();
  34.     }
  35. }
复制代码

Screen1View.hpp
  1. void Screen1Presenter::key_event()
  2. {
  3.     view.handleKeyEvent(8);
  4. }

  6. void Screen1Presenter::update_sensor_event(ts_sensor_data *p_sensor_data)
  7. {
  8.     view.update_sensor_value(p_sensor_data);
  9. }
复制代码
  1. #include "sensor.h"
  2. #include <touchgfx/widgets/Image.hpp>
  3. #include <touchgfx/widgets/TextureMapper.hpp>
  4. #include <touchgfx/widgets/AnimationTextureMapper.hpp>
  5. #include <touchgfx/widgets/Box.hpp>
  6. #include <touchgfx/widgets/Image.hpp>
  7. #include <touchgfx/widgets/TextAreaWithWildcard.hpp>
  8. #include <touchgfx/widgets/TextArea.hpp>
  9. #include <touchgfx/containers/progress_indicators/CircleProgress.hpp>
  10. #include <touchgfx/widgets/canvas/PainterRGB565Bitmap.hpp>
  11. #include <touchgfx/widgets/AnimatedImage.hpp>

  13. public:
  14. virtual void update_sensor_value(ts_sensor_data *p_sensor_data);
  15. virtual void handleTickEvent();

  17. protected:
  18.                const float PI = 3.1415926f;
  19.                int tickCounter;
  20.                float z;
  21.                uint16_t wait;
  22.                int From_Presenter_temperature;
  23.                 uint16_t From_Presenter_temperature_z;
  24.                 touchgfx::Image image2;
  25.                 touchgfx::CircleProgress circleProgress2;
  26.                 touchgfx::AnimationTextureMapper textureMapperImage2D;
  27.            // touchgfx::TextureMapper textureMapperImage2D;
  28.                touchgfx::PainterRGB565Bitmap circleProgress2Painter;   
  29.   
  30.               private:  
  31.              static const uint16_t CANVAS_BUFFER_SIZE = 4800;
  32.              uint8_t canvasBuffer[CANVAS_BUFFER_SIZE];
  33.              ts_sensor_data v_sensor_data;
复制代码


Screen2实现



温度记录显示以及按键操作主要代码：

  1. void Screen2View::setupScreen()
  2. {
  3.     wait = 0;
  4.     Screen2ViewBase::setupScreen();
  5.    
  6.     CanvasWidgetRenderer::setupBuffer(canvasBuffer, CANVAS_BUFFER_SIZE);
  7.     graphT.setXY(40, 0);
  8.     graphT.setup(240,200,Color::getColorFrom24BitRGB(255,0,0),Color::getColorFrom24BitRGB(0,0,0));
  9.     graphT.set_Draw_Range(0, 240, 200, 0);
  10.     graphT.setLineWidth(2);
  11.     graphT.setLineVisible(true);
  12.     graphT.setAreaVisible(true);
  13.     graphT.setDotsVisible(false);
  14.     graphT.setDotsBackgroundVisible(false);
  15.    
  16.     graph_Base.setXY(0, 0);
  17.     graph_Base.setup(320,240,Color::getColorFrom24BitRGB(176,196,222),Color::getColorFrom24BitRGB(0,0,0));
  18.     graph_Base.set_Draw_Range(0, 320, 240, 0);
  19.     graph_Base.setLineWidth(1);
  20.     graph_Base.setLineVisible(true);
  21.     graph_Base.setAreaVisible(false);
  22.     graph_Base.setDotsVisible(false);
  23.     graph_Base.setDotsBackgroundVisible(false);
  24.    
  25.    
  26.    
  27.     graph_avg.setXY(40, 0);
  28.     graph_avg.setup(240,200,Color::getColorFrom24BitRGB(176,196,222),Color::getColorFrom24BitRGB(0,0,0));
  29.     graph_avg.set_Draw_Range(0, 240, 200, 0);
  30.     graph_avg.setLineWidth(1);
  31.     graph_avg.setLineVisible(true);
  32.     graph_avg.setAreaVisible(false);
  33.     graph_avg.setDotsVisible(false);
  34.     graph_avg.setDotsBackgroundVisible(false);
  35.    
  36.    
  37.     add(graphT);
  38.     add(graph_Base);
  39.     add(graph_avg);
  40.    
  41.     graph_Base.addValue(20,40);
  42.     graph_Base.addValue(300,40);
  43.    
  44.     graphT.invalidate();
  45.     graph_Base.invalidate();
  46. }
复制代码
  1. void Screen2View::handleTickEvent()
  2. {
  3.     g_tick++;
  4.     if(g_tick==30)
  5.     {
  6.       g_tick=0;
  7.       From_Presenter_temperature= v_sensor_data.temperature[1];
  8.       From_Presenter_temperature_z=v_sensor_data.temperature[0];
  9.       g_y++;
  10.       
  11.       real_temperature=((From_Presenter_temperature+((float)From_Presenter_temperature_z/10))*10)/10;
  12.       
  13.       avg_all=real_temperature;
  14.       if (real_temperature >= max_sim)
  15.       {
  16.           max_sim = real_temperature;
  17.           max_w=From_Presenter_temperature;
  18.           max_z=From_Presenter_temperature_z;
  19.       }
  20.       
  21.       Unicode::snprintf(textArea3Buffer1, 10, "%d", max_w);
  22.       Unicode::snprintf(textArea3Buffer2, 10, "%d", max_z);
  23.       Unicode::snprintf(textArea3_2Buffer1, 10, "%d", From_Presenter_temperature);
  24.       Unicode::snprintf(textArea3_2Buffer2, 10, "%d", From_Presenter_temperature_z);
  25.       graphT.addValue(g_y,(From_Presenter_temperature*3));

  27.       if(avg_flag>=1)
  28.       {
  29.          avg=avg_all+avg;
  30.          avg_r=avg/avg_flag;
  31.          avg_r_w=(uint8_t)avg_r;
  32.          avg_r_z=(uint16_t)(avg_r*10)0;
  33.            
  34.          Unicode::snprintf(textArea3_1Buffer1, 10, "%d", avg_r_w);        
  35.          Unicode::snprintf(textArea3_1Buffer2, 10, "%d", avg_r_z);   
  36.          
  37.          graph_avg.clear();
  38.          graph_avg.addValue(0,(avg_r_w*3));
  39.          graph_avg.addValue(240,(avg_r_w*3));
  40.          textArea3_1.invalidate();
  41.          graph_avg.invalidate();
  42.       }
  43.       avg_flag++;  
  44.       if(avg_flag==240)
  45.       {
  46.         avg_flag=0;
  47.         avg=0;
  48.       }
  49.       textArea3.invalidate();
  50.       textArea3_2.invalidate();
  51.       graphT.invalidate();
  52.      }
  53.     if(g_y==240)
  54.     {
  55.       g_y=0;
  56.       graphT.clear();
  57.       time_base_add();
  58.     }
  59. }
复制代码
  1. void Screen2Presenter::key_event()
  2. {
  3.     view.handleKeyEvent(8);
  4. }

  6. void Screen2Presenter::update_sensor_event(ts_sensor_data *p_sensor_data)
  7. {
  8.     //view.update_sensor_value(p_sensor_data);
  9.     view.set_sensor_value(p_sensor_data);   
  10. }
复制代码

Screen2View.hpp

  1. #include "Graph.hpp"
  2.     virtual void update_sensor_value(ts_sensor_data *p_sensor_data);
  3.     virtual void set_sensor_value(ts_sensor_data *p_sensor_data);   
  4.     virtual void handleTickEvent();
  5.    
  6. void time_base_add();

  8. private:
  9.        uint16_t wait;
  10.        uint16_t g_tick;
  11.        float max_sim;
  12.        uint8_t max_z;
  13.        uint8_t max_w;
  14.        uint16_t From_Presenter_temperature;
  15.        uint16_t From_Presenter_temperature_z;
  16.        float real_temperature;
  17.       
  18.        Graph graphT;
  19.        Graph graph_Base;
  20.        Graph graph_avg;
  21.       
  22.        uint8_t Time_base;
  23.        uint8_t Time_baseg;
  24.        uint8_t Time_baseS;
  25.        float avg;
  26.        uint16_t avg_flag;
  27.        float avg_all;
  28.        float avg_r;
  29.        uint8_t avg_r_w;
  30.        uint8_t avg_r_z;


  33. protected:
  34.       static const uint16_t CANVAS_BUFFER_SIZE = 4800;
  35.       uint8_t canvasBuffer[CANVAS_BUFFER_SIZE];
  36.       uint16_t g_y;
  37.       ts_sensor_data v_sensor_data;
复制代码


Screen3实现

湿度记录显示以及按键操作主要代码：

  1. void Screen3View::setupScreen()
  2. {
  3.     wait = 0;
  4.     Screen3ViewBase::setupScreen();
  5.    
  6.     CanvasWidgetRenderer::setupBuffer(canvasBuffer, CANVAS_BUFFER_SIZE);
  7.     graphT.setXY(40, 0);
  8.     graphT.setup(240,200,Color::getColorFrom24BitRGB(255,0,0),Color::getColorFrom24BitRGB(0,0,0));
  9.     graphT.set_Draw_Range(0, 240, 200, 0);
  10.     graphT.setLineWidth(2);
  11.     graphT.setLineVisible(true);
  12.     graphT.setAreaVisible(true);
  13.     graphT.setDotsVisible(false);
  14.     graphT.setDotsBackgroundVisible(false);
  15.    
  16.     graph_Base.setXY(0, 0);
  17.     graph_Base.setup(320,240,Color::getColorFrom24BitRGB(176,196,222),Color::getColorFrom24BitRGB(0,0,0));
  18.     graph_Base.set_Draw_Range(0, 320, 240, 0);
  19.     graph_Base.setLineWidth(1);
  20.     graph_Base.setLineVisible(true);
  21.     graph_Base.setAreaVisible(false);
  22.     graph_Base.setDotsVisible(false);
  23.     graph_Base.setDotsBackgroundVisible(false);

  25.     graph_avg.setXY(40, 0);
  26.     graph_avg.setup(240,200,Color::getColorFrom24BitRGB(176,196,222),Color::getColorFrom24BitRGB(0,0,0));
  27.     graph_avg.set_Draw_Range(0, 240, 200, 0);
  28.     graph_avg.setLineWidth(1);
  29.     graph_avg.setLineVisible(true);
  30.     graph_avg.setAreaVisible(false);
  31.     graph_avg.setDotsVisible(false);
  32.     graph_avg.setDotsBackgroundVisible(false);
  33.    
  34.    
  35.     add(graphT);
  36.     add(graph_Base);
  37.     add(graph_avg);
  38.     graph_Base.addValue(20,40);
  39.     graph_Base.addValue(300,40);      
  40.     graphT.invalidate();
  41.     graph_Base.invalidate();
  42. }
复制代码
  1. void Screen3View::handleTickEvent()
  2. {
  3.     g_tick++;
  4.     if(g_tick==30)
  5.     {
  6.       g_tick=0;
  7.       From_Presenter_humidity= v_sensor_data.humidity;
  8.       g_y++;
  9.       
  10.       real_humidity=10000*(From_Presenter_humidity/exp2_16);
  11.       
  12.       avg_all=real_humidity;
  13.       if (real_humidity >= max_sim)
  14.           max_sim = real_humidity;
  15.          
  16.       Unicode::snprintf(textArea3Buffer, 10, "%d", max_sim);
  17.       Unicode::snprintf(textArea3_2Buffer, 10, "%d", real_humidity);
  18.       
  19.       graphT.addValue(g_y,real_humidity);
  20.       
  21.      
  22.       if(avg_flag>=1)
  23.       {
  24.          avg=avg_all+avg;
  25.          avg_r=avg/avg_flag;
  26.          Unicode::snprintf(textArea3_1Buffer, 10, "%d", avg_r);        
  27.       
  28.          graph_avg.clear();
  29.         
  30.          graph_avg.addValue(0,avg_r);
  31.          graph_avg.addValue(240,avg_r);
  32.      
  33.          textArea3_1.invalidate();
  34.          graph_avg.invalidate();
  35.       }
  36.      
  37.       avg_flag++;  
  38.       if(avg_flag==240)
  39.       {
  40.         avg_flag=0;
  41.         avg=0;
  42.       }
  43.       
  44.       textArea3.invalidate();
  45.       textArea3_2.invalidate();
  46.       graphT.invalidate();
  47.      }
  48.     if(g_y==240)
  49.     {
  50.       g_y=0;
  51.       graphT.clear();
  52.       time_base_add();
  53.     }

  55. }
复制代码
  1. void Screen3Presenter::key_event()
  2. {
  3.     view.handleKeyEvent(8);
  4. }

  6. void Screen3Presenter::update_sensor_event(ts_sensor_data *p_sensor_data)
  7. {
  8.     //view.update_sensor_value(p_sensor_data);
  9.     view.set_sensor_value(p_sensor_data);   
  10. }
复制代码

Screen3View.hpp

  1. #include "Graph.hpp"

  3.     virtual void update_sensor_value(ts_sensor_data *p_sensor_data);  
  4.     virtual void set_sensor_value(ts_sensor_data *p_sensor_data);     
  5.     virtual void handleTickEvent();
  6.    
  7. void time_base_add();

  9. private:
  10.        uint16_t wait;
  11.        uint16_t g_tick;
  12.        uint8_t max_sim;
  13.        float From_Presenter_humidity;
  14.        Graph graphT;
  15.        Graph graph_Base;
  16.        Graph graph_avg;
  17.       
  18.        uint8_t Time_base;
  19.        uint8_t Time_baseg;
  20.        uint8_t Time_baseS;
  21.        uint16_t avg;
  22.        uint16_t avg_flag;
  23.        uint16_t avg_all;
  24.        uint16_t avg_r;
  25.        uint16_t dis_graph_humidity;
  26.        uint16_t dis_graph_humidity_av;
  27.        uint16_t real_humidity;
  28.        uint16_t exp2_16;

  30. protected:
  31.                         static const uint16_t CANVAS_BUFFER_SIZE = 4800;
  32.       uint8_t canvasBuffer[CANVAS_BUFFER_SIZE];
  33.       uint16_t g_y;
  34.       ts_sensor_data v_sensor_data;
复制代码

Screen4实现


保护界面显示以及按键操作主要代码：

  1. void Screen4View::setupScreen()
  2. {
  3.     Screen4ViewBase::setupScreen();

  5.     CanvasWidgetRenderer::setupBuffer(canvasBuffer, CANVAS_BUFFER_SIZE);

  7.     circle1.setPosition(257, 177, 80, 80);
  8.     circle1.setCenter(40, 40);
  9.     circle1.setRadius(17);
  10.     circle1.setLineWidth(2);
  11.     circle1.setArc(0, 0);
  12.     circle1.setCapPrecision(10);
  13.     circle1Painter.setColor(touchgfx::Color::getColorFrom24BitRGB(8, 129, 255));
  14.     circle1.setPainter(circle1Painter);

  16.     add(circle1);
  17.    
  18.     particleEffect.setPosition(0, 0, HAL::DISPLAY_WIDTH, HAL::DISPLAY_HEIGHT);
  19.     particleEffect.setSnapToOrigin(true);
  20.     particleEffect.setNumberOfParticles(180);
  21.     particleEffect.setOrigin(particleEffect.getWidth() / 2, particleEffect.getHeight() / 2);
  22.     particleEffect.setCenter(particleEffect.getWidth() / 2, particleEffect.getHeight() / 2);

  24.     // Insert particleEffect jut on top of the background (z-order)
  25.     container.insert(&bg_pcb5, particleEffect);

  27.     particleEffect.setNumberOfParticles(150);

  29. }
复制代码
  1. void Screen4View::handleTickEvent()
  2. {
  3.     tick++;
  4.     itick++;
  5.     if(tick==1)
  6.     {
  7.       tick=0;
  8.       if(c_value==360)
  9.       {
  10.          c_value=0;
  11.       }
  12.       c_value++;
  13.       o_x = rand() % 200 + 20;
  14.       o_y=  rand() % 200 + 20;
  15.      circle1.setArc(c_value, (c_value+100));
  16.      if (itick == 20)
  17.      {
  18.          itick = 0;
  19.          particleEffect.setCenter(o_x, o_y);
  20.          particleEffect.invalidate();
  21.      }
  22.      circle1.invalidate();
  23.     }
  24. }
复制代码
  1. void Screen4Presenter::key_event()
  2. {
  3.     view.handleKeyEvent(8);
  4. }
复制代码


Screen4View.hpp

  1. #include <BitmapDatabase.hpp>
  2. #include <touchgfx/widgets/AnimationTextureMapper.hpp>
  3. #include <touchgfx/widgets/canvas/Circle.hpp>
  4. #include <touchgfx/widgets/canvas/PainterRGB565.hpp>

  6. #include <stdlib.h>
  7. #include <gui/common/ParticleEffect.hpp>
  8.                virtual void handleTickEvent();

  10. protected:
  11.       touchgfx::Circle circle1;
  12.       touchgfx::PainterRGB565 circle1Painter;
  13.       ParticleEffect particleEffect;
  14.       int o_x;
  15.       int o_y;
  16.       int itick;
  17. private:
  18.     uint16_t c_value;
  19.     uint8_t tick;
  20.     AnimationTextureMapper textureMapperImage;

  22. Callback<Screen4View, const AnimationTextureMapper&> animationEndedCallback;      
  23. void animationEndedHandler(const AnimationTextureMapper& src);

  25. void setupAndStartAnimation();
  26.    
  27. static const uint16_t CANVAS_BUFFER_SIZE = 4800;
  28. uint8_t canvasBuffer[CANVAS_BUFFER_SIZE];
复制代码


Screen5实现


配网界面显示以及操作的主要代码：

Screen5ViewBase.cpp

  1. /******************************************************/
  2. /******* THIS FILE IS GENERATED BY TOUCHGFX DESIGNER, DO NOT MODIFY ********/
  3. /******************************************************/
  4. #include <gui_generated/screen5_screen/Screen5ViewBase.hpp>
  5. #include "BitmapDatabase.hpp"
  6. #include <texts/TextKeysAndLanguages.hpp>
  7. #include <touchgfx/Color.hpp>

  9. Screen5ViewBase::Screen5ViewBase() :
  10.     buttonCallback(this, &Screen5ViewBase::buttonCallbackHandler)
  11. {
  12.     bg_320x2401.setXY(0, 0);
  13.     bg_320x2401.setBitmap(Bitmap(BITMAP_BG_320X240_ID));

  15.     textArea2_1_1.setXY(98, 0);
  16.     textArea2_1_1.setColor(touchgfx::Color::getColorFrom24BitRGB(253, 252, 252));
  17.     textArea2_1_1.setLinespacing(0);
  18.     textArea2_1_1.setTypedText(TypedText(T_SINGLEUSEID123));

  20.     wifi_on_off.setXY(98, 56);
  21.     wifi_on_off.setBitmap(Bitmap(BITMAP_WIFI_OFF_128_ID));

  23.     textArea2.setPosition(0, 215, 320, 25);
  24.     textArea2.setColor(touchgfx::Color::getColorFrom24BitRGB(208, 197, 197));
  25.     textArea2.setLinespacing(0);
  26.     textArea2.setTypedText(TypedText(T_RESOURCEID4));

  28.     button1.setXY(278, 92);
  29.     button1.setBitmaps(Bitmap(BITMAP_NEXT_BUTTON_ID), Bitmap(BITMAP_NEXT_BUTTON_PRESSED_ID));
  30.     button1.setAction(buttonCallback);

  32.     add(bg_320x2401);
  33.     add(textArea2_1_1);
  34.     add(wifi_on_off);
  35.     add(textArea2);
  36.     add(button1);
  37. }

  39. void Screen5ViewBase::setupScreen()
  40. {

  42. }

  44. void Screen5ViewBase::buttonCallbackHandler(const touchgfx::AbstractButton& src)
  45. {
  46.     if (&src == &button1)
  47.     {
  48.         //Interaction1
  49.         //When button1 clicked change screen to Screen0
  50.         //Go to Screen0 with screen transition towards East
  51.         application().gotoScreen0ScreenSlideTransitionEast();
  52.     }
  53. }
复制代码


Screen5View.cpp

  1. #include <gui/screen5_screen/Screen5View.hpp>
  2. #include "BitmapDatabase.hpp"
  3. #include <texts/TextKeysAndLanguages.hpp>

  5. Screen5View::Screen5View()
  6. {

  8. }

  10. void Screen5View::setupScreen()
  11. {
  12.     Screen5ViewBase::setupScreen();
  13. }

  15. void Screen5View::tearDownScreen()
  16. {
  17.     Screen5ViewBase::tearDownScreen();
  18. }

  20. void Screen5View::update_sensor_value(ts_sensor_data *p_sensor_data)
  21. {
  22.     if(p_sensor_data->wifi_status==FRM_CMD_UPD_RESTWIFI)
  23.     {
  24.         textArea2.setTypedText(TypedText(T_RESOURCEID1));
  25.         textArea2.invalidate();
  26.     }else if(p_sensor_data->wifi_status==FRM_CMD_UPD_AIRLINK)
  27.     {
  28.         textArea2.setTypedText(TypedText(T_RESOURCEID2));
  29.         textArea2.invalidate();
  30.     }else if(p_sensor_data->wifi_status==FRM_CMD_UPD_CONFIGEND)
  31.     {
  32.         textArea2.setTypedText(TypedText(T_RESOURCEID3));
  33.         textArea2.invalidate();
  34.     }
  35.     else if(p_sensor_data->wifi_status==FRM_CMD_UPD_INITSTAT)
  36.     {
  37.         textArea2.setTypedText(TypedText(T_RESOURCEID4));
  38.         textArea2.invalidate();
  39.     }

  41.     if(p_sensor_data->wifi_status==FRM_CMD_UPD_CONFIGEND)
  42.     {
  43.         wifi_on_off.setBitmap(Bitmap(BITMAP_WIFI_ON_128_ID));
  44.         wifi_on_off.invalidate();
  45.     }else{
  46.         wifi_on_off.setBitmap(Bitmap(BITMAP_WIFI_OFF_128_ID));
  47.         wifi_on_off.invalidate();
  48.     }
  49. }
复制代码


回复

使用道具 举报

眯着眼

0

主题

1

帖子

25

积分

新手上路

Rank: 1

积分
25
沙发
发表于 2020-6-20 19:48:45 | 只看该作者
牛逼 学习了
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

加入Q群 返回顶部

版权与免责声明 © 2006-2024 Gizwits IoT Technology Co., Ltd. ( 粤ICP备11090211号 )

快速回复 返回顶部 返回列表