| 本帖最后由 纪国圣 于 2022-9-4 10:45 编辑 
 
 优化了一下界面,让其效果更好一些。
 简单的讲一下四线效果:
 1.开机动画:
 首先从百度下载一份GIF动图,然后通过网站其他图像文件转换至JPG文件将GIF文件转换成一组JPG图片,然后再跟换图片格式为PNG:
 
   之后新建一个Screen,命名为Hello,并添加一个AnimatedImage。按照下图顺序设置AnimatedImage:
 
   为了实现开机动画效果,即GIF播放完毕后实现界面切换,还需一下设置:
 
   注意点:在对图片标号时,一开始我的标号顺序是a1~a9,a10~a19,a20~a29。以为播放顺序与标号顺序一致,但实际上其播放顺序为a1-a10-a11-......a19-a2-a20-a21-a23-......,所以在标号时a1~a9的编号为a01~a09才能正确的按顺序播放。
 建议:官方能否在TouchGFX中添加一个GIF转换为PNG的小工具,或者直接让AnimatedImage支持GIF格式的图片,这样AnimatedImage得使用会更加方便。
 2.MainWindow简介:
 界面效果如下:
 
   这里介绍一下scrollwheel的使用。
 首先点击Containers,然后添加一个Container并命名为ImageWheel。再其基础上添加Image控件。然后按照下图设置srcollwheel:
   回到MainWindow界面,添加之前创建的container:
 
   注意:MainWindow中的Scroll与Comtainer中的属性值必须一致。
 打开TouchGFX\gui\include\gui\container\ImageWheel.hpp,添加红色的代码:
 
 打开TouchGFX\gui\include\gui\mainwindow_screen\MainWindowView.hpp,添加红色的代码:#include <gui_generated/containers/ImageWheelBase.hpp>
<font color="#ff0000">#include <BitmapDatabase.hpp></font>
class ImageWheel : public ImageWheelBase
{
public:
    ImageWheel();
    virtual ~ImageWheel() {}
    virtual void initialize();
        
<font color="#ff0000">        void setIcon(int16_t itemIndex)
        {
                switch (itemIndex)
                {
                case 0:icon.setBitmap(Bitmap(BITMAP_ICON1_ID));
                        break;
                case 1:icon.setBitmap(Bitmap(BITMAP_ICON2_ID));
                        break;
                case 2:icon.setBitmap(Bitmap(BITMAP_ICON3_ID));
                        break;
                case 3:icon.setBitmap(Bitmap(BITMAP_ICON4_ID));
                        break;
                case 4:icon.setBitmap(Bitmap(BITMAP_ICON5_ID));
                        break;
                }
        }</font>
protected:
};
scrollwheel的设置就算完成了。通过拨动scroollwhell可以实现背景图片的切换。#include <gui_generated/mainwindow_screen/MainWindowViewBase.hpp>
<font color="#ff0000">#include <gui/mainwindow_screen/MainWindowPresenter.hpp>
</font>
class MainWindowView : public MainWindowViewBase
{
public:
    MainWindowView();
    virtual ~MainWindowView() {}
    virtual void setupScreen();
    virtual void tearDownScreen();
<font color="#ff0000">        virtual void scrollWheel1UpdateItem(ImageWheel& item, int16_t itemIndex)
        {
                item.setIcon(itemIndex);
                
                image1.setXY(0,0);
                switch (itemIndex)
                {
                case 0:image1.setBitmap(touchgfx::Bitmap(BITMAP_BACKGROUND3_ID));
                        break;
                case 1:image1.setBitmap(touchgfx::Bitmap(BITMAP_BACKGROUND4_ID));
                        break;
                case 2:image1.setBitmap(touchgfx::Bitmap(BITMAP_BACKGROUND5_ID));
                        break;
                case 3:image1.setBitmap(touchgfx::Bitmap(BITMAP_BACKGROUND6_ID));
                        break;
                case 4:image1.setBitmap(touchgfx::Bitmap(BITMAP_BACKGROUND_ID));
                        break;
                }
                
                image1.invalidate();</font>
                
        }
protected:
};
3.ClockWindow与SetTimeWindow简介:
 界面效果如下:
   
   这里简单的说明一下Clock控件的使用。
 界面中包含了AnalogClock和DigtalClock,而提供时钟数据的是STM32H750的RTC。首先编写RTC的初始化、设置与读取函数:
 
 之后按下图所示顺序在Interactions添加Tick触发函数,调用之前编写的RTC控制函数以实现周期性的读取RTC的值:
unsigned char hour;
unsigned char minutes;
unsigned char second;
void RTC_Set(unsigned char hour,unsigned char minutes,unsigned char second)
{
#ifdef SIMULATOR
#else
  RTC_DateTypeDef  sdatestructure;
  RTC_TimeTypeDef  stimestructure;
  /*##-1- Configure the Date #################################################*/
  /* Set Date: Tuesday September 4th 2018 */
  sdatestructure.Year = 0x18;
  sdatestructure.Month = RTC_MONTH_SEPTEMBER;
  sdatestructure.Date = 0x4;
  sdatestructure.WeekDay = RTC_WEEKDAY_TUESDAY;
  if(HAL_RTC_SetDate(&hrtc,&sdatestructure,RTC_FORMAT_BCD) != HAL_OK)
  {
    /* Initialization Error */
    Error_Handler();
  }
  /*##-2- Configure the Time #################################################*/
  /* Set Time: 16:30:00 */
  stimestructure.Hours = hour;
  stimestructure.Minutes = minutes;
  stimestructure.Seconds = second;
  stimestructure.TimeFormat = RTC_HOURFORMAT_24;
  stimestructure.DayLightSaving = RTC_DAYLIGHTSAVING_NONE ;
  stimestructure.StoreOperation = RTC_STOREOPERATION_RESET;
  if(HAL_RTC_SetTime(&hrtc,&stimestructure,RTC_FORMAT_BCD) != HAL_OK)
  {
    /* Initialization Error */
    Error_Handler();
  }
 #endif 
}
/**
  * [url=home.php?mod=space&uid=247401]@brief[/url]  Display the current time.
  * @param  showtime : pointer to buffer
  * @retval None
  */
void RTC_TimeShow(void)
{
#ifdef SIMULATOR
#else
  RTC_DateTypeDef sdatestructureget;
  RTC_TimeTypeDef stimestructureget;
  /* Get the RTC current Time */
  HAL_RTC_GetTime(&hrtc, &stimestructureget, RTC_FORMAT_BIN);
  /* Get the RTC current Date */
  HAL_RTC_GetDate(&hrtc, &sdatestructureget, RTC_FORMAT_BIN);
  /* Display time Format : hh:mm:ss */
  hour = stimestructureget.Hours;
  minutes = stimestructureget.Minutes;
  second = stimestructureget.Seconds;
 #endif
}
unsigned char Get_Hour(void)
{
        return hour;
}
unsigned char Get_Minutes(void)
{
        return minutes;
}
unsigned char Get_Second(void)
{
        return second;
}
   同理,对RTC的设置,按照下图顺序设置即可:
 
   4.OSCWindow界面简介
 界面效果如下:
 
   其实现效果为滑动Slider改变正弦波的频率,同时将不同频率的正弦波相乘并显示在DynamicGraph。
 Slider滑动效果设置如下:
 
   使用Tick周期获取正弦数值:
 
   关于DynamicGraph的设置如下:
 
   
   图14中的1是为了给YLabel让出空间,图15中的2-5为YLabel的设置。
 图14中的3、4设置曲线显示范围。
 图15中的1为曲线种类设置。
 至此DynamicGraph的设置完成。
 5.AboutWindow界面简介
 界面效果如下:
 
   与OSCWindow类似,通过周期调用编写好的ADC控制函数读取D值并显示在Graph中:
 
   ADC函数如下:
 
 背光控制是通过如下设置实现:
unsigned short Get_ADC(void)
{
        unsigned short uwConvertedValue = 0;
#ifdef SIMULATOR
#else        
        /* Start ADC conversion */
        if (HAL_ADC_Start(&hadc3) != HAL_OK)
        {
        Error_Handler();
        }  
        if (HAL_ADC_PollForConversion(&hadc3, 10) != HAL_OK)
        {
          Error_Handler();
        }
        /* Read the converted value */
        uwConvertedValue = HAL_ADC_GetValue(&hadc3);
        
        HAL_ADC_Stop(&hadc3);
#endif        
        return uwConvertedValue;
}
float Get_Vint(void)
{
#ifdef SIMULATOR
        return 0;
#else        
  ADC_ChannelConfTypeDef sConfig = {0};
  /** Configure Regular Channel
  */
  sConfig.Channel = ADC_CHANNEL_VREFINT;
  sConfig.Rank = ADC_REGULAR_RANK_1;
  sConfig.SamplingTime = ADC_SAMPLETIME_1CYCLE_5;
  sConfig.SingleDiff = ADC_SINGLE_ENDED;
  sConfig.OffsetNumber = ADC_OFFSET_NONE;
  sConfig.Offset = 0;
  sConfig.OffsetSignedSaturation = DISABLE;
  if (HAL_ADC_ConfigChannel(&hadc3, &sConfig) != HAL_OK)
  {
    Error_Handler();
  }
  
  return (*(__IO uint32_t *)0x1FF1E860)*3.3f/Get_ADC();
#endif        
}
float Get_Temp(void)
{
#ifdef SIMULATOR
        return 0;
#else        
  const unsigned short t1 = *(__IO uint32_t *)0x1FF1E820;
  const unsigned short t2 = *(__IO uint32_t *)0x1FF1E840;
  
  ADC_ChannelConfTypeDef sConfig = {0};
  /** Configure Regular Channel
  */
  sConfig.Channel = ADC_CHANNEL_TEMPSENSOR;
  sConfig.Rank = ADC_REGULAR_RANK_1;
  sConfig.SamplingTime = ADC_SAMPLETIME_1CYCLE_5;
  sConfig.SingleDiff = ADC_SINGLE_ENDED;
  sConfig.OffsetNumber = ADC_OFFSET_NONE;
  sConfig.Offset = 0;
  sConfig.OffsetSignedSaturation = DISABLE;
  if (HAL_ADC_ConfigChannel(&hadc3, &sConfig) != HAL_OK)
  {
    Error_Handler();
  }
  
  return 100.0f/(t2 - t1)*(Get_ADC() - t1) + 30.0f;
#endif        
}
   
 
void Toggle_BL(void)
{
#ifdef SIMULATOR
#else
        HAL_GPIO_TogglePin(LCD_BL_CTRL_GPIO_Port, LCD_BL_CTRL_Pin);
#endif
}
 
 
 
 |