【Home Treasure】 esp32s2 lvgl running clock display

damiaa

【Home Treasure】 esp32s2 lvgl running clock display [Copy link]

 

【Home Treasure】 esp32s2 lvgl running clock display

There are several pages to display, so tabs are used:

    tabview = lv_tabview_create(lv_scr_act(), NULL);
    lv_tabview_set_btns_pos(tabview, LV_TABVIEW_TAB_POS_LEFT); 
    /*Add 3 tabs (the tabs are page (lv_page) and can be scrolled*/
    lv_obj_t *tab1 = lv_tabview_add_tab(tabview, "K");
    lv_obj_t *tab2 = lv_tabview_add_tab(tabview, "C");
    lv_obj_t *tab3 = lv_tabview_add_tab(tabview, "W");
    lv_obj_t *tab4 = lv_tabview_add_tab(tabview, "T");

analog(tab1); makes an alarm clock:

void analog( lv_obj_t *win)
{
    lv_obj_t* central = win; 
     
    lv_obj_set_size(central, LV_HOR_RES_MAX, LV_VER_RES_MAX);
    lv_obj_set_pos(central,  0, 0);
    //图像做钟表底图
    lv_obj_t * img = lv_img_create(central,NULL);
    lv_img_set_src(img, &clock2);
    lv_obj_set_size(img, 210, 210);
    lv_obj_set_auto_realign(img, true);
    lv_obj_align(img, central, LV_ALIGN_CENTER, 0, 0);
    //三根线条做时分秒
    static lv_style_t style_line_s;
    lv_style_init(&style_line_s);
    lv_style_set_line_width(&style_line_s, LV_STATE_DEFAULT, 2);
    lv_style_set_line_color(&style_line_s, LV_STATE_DEFAULT, LV_COLOR_CYAN);
    lv_style_set_line_rounded(&style_line_s, LV_STATE_DEFAULT, true);
    static lv_style_t style_line_m;
    lv_style_init(&style_line_m);
    lv_style_set_line_width(&style_line_m, LV_STATE_DEFAULT, 4);
    lv_style_set_line_color(&style_line_m, LV_STATE_DEFAULT, LV_COLOR_RED);
    lv_style_set_line_rounded(&style_line_m, LV_STATE_DEFAULT, true);
    static lv_style_t style_line_h;
    lv_style_init(&style_line_h);
    lv_style_set_line_width(&style_line_h, LV_STATE_DEFAULT, 6);
    lv_style_set_line_color(&style_line_h, LV_STATE_DEFAULT, LV_COLOR_GREEN);
    lv_style_set_line_rounded(&style_line_h, LV_STATE_DEFAULT, true);
    /*Create a line and apply the new style*/
            
    line_S = lv_line_create(central, NULL);
    Second_line_points[1].x=Second_line_points[0].x+60*cos((REDRESSS+Second*6)*PI/180);
    Second_line_points[1].y=Second_line_points[0].y+60*sin((REDRESSS+Second*6)*PI/180);
    lv_line_set_points(line_S, Second_line_points, 2);  
    lv_obj_add_style(line_S, LV_LINE_PART_MAIN, &style_line_s);     /*Set the points*/
          
    line_M = lv_line_create(central, NULL);
    Minute_line_points[1].x=Minute_line_points[0].x+60*cos((REDRESSM+Minute*6)*PI/180);
    Minute_line_points[1].y=Minute_line_points[0].y+60*sin((REDRESSM+Minute*6)*PI/180);
    lv_line_set_points(line_M, Minute_line_points, 2); 
           
    lv_obj_add_style(line_M, LV_LINE_PART_MAIN, &style_line_m);     /*Set the points*/
          
    line_H = lv_line_create(central, NULL);
    Hour_line_points[1].x=Hour_line_points[0].x+60*cos((REDRESSH+Hour*36)*PI/180);
    Hour_line_points[1].y=Hour_line_points[0].y+60*sin((REDRESSH+Hour*36)*PI/180);
    lv_line_set_points(line_H, Hour_line_points, 2); 
    lv_obj_add_style(line_H, LV_LINE_PART_MAIN, &style_line_h);     /*Set the points*/
    //创建更新时间和其他的事情的任务    
    lv_task_create(update_time, 1000, LV_TASK_PRIO_LOW, NULL);  // 1秒任务   
}

//时分秒的更新和页签更新
#define REDRESSH 265
 #define REDRESSM 275
 #define REDRESSS 265
void update_time(lv_task_t *task)
{
    if( xValMQTTtoLvgl != NULL )
    {
            xSemaphoreTake( xValMQTTtoLvgl, portMAX_DELAY ); 
            { 
               if(Dev.setflag&0x20)
               { 
                    Hour =Dev.hour; 
                    Dev.setflag&=~0x20;
                    printf("Hour =Dev.hour=%d\n",Hour);
                    Hour_line_points[1].x=Hour_line_points[0].x+60*cos((REDRESSH +Hour*36)*PI/180);
                    Hour_line_points[1].y=Hour_line_points[0].y+60*sin((REDRESSH +Hour*36)*PI/180);
                    lv_line_set_points(line_H, Hour_line_points, 2); 
               }
               if(Dev.setflag&0x40)
               {
                    Minute =Dev.minutes;
                    Dev.setflag&=~0x40;
                    printf("Minute =Dev.minutes=%d\n",Minute);
                    Minute_line_points[1].x=Minute_line_points[0].x+60*cos((REDRESSM+Minute*6)*PI/180);
                    Minute_line_points[1].y=Minute_line_points[0].y+60*sin((REDRESSM+Minute*6)*PI/180);
                    lv_line_set_points(line_M, Minute_line_points, 2);  
               }
               if(Dev.setflag&0x80)
               {
                    Second=Dev.second;
                    Dev.setflag&=~0x80;
                    printf("Second=Dev.second=%d\n",Second);
               }
               if(Dev.setflag&0x02)
               { 
                    switch(Dev.page)
                    {
                        case 0:
                            lv_tabview_set_tab_act(tabview, 0, LV_ANIM_ON);
                            break;
                        case 1:
                            lv_tabview_set_tab_act(tabview, 1, LV_ANIM_ON);
                         //   lv_label_set_text(label2, "Now day is :\n\n"
                         //   "2022-09-27\n"
                         //   "Now time is \n"
                         //   "12:46:00\n"
                         //   );
                            break;
                        case 2:
                            lv_tabview_set_tab_act(tabview, 2, LV_ANIM_ON);
                             //lv_calendar_date_t today;
                            
                            today.year = Dev.year;
                            today.month = Dev.month;
                            today.day = Dev.day;

                            lv_calendar_set_today_date(calendar, &today);
                            lv_calendar_set_showed_date(calendar, &today);

                           /*Highlight a few days*/
                           static lv_calendar_date_t highlighted_days[3];       /*Only its pointer will be saved so should be static*/
                           highlighted_days[0].year = Dev.year;
                           highlighted_days[0].month = Dev.month;
                           highlighted_days[0].day = 6;

                          highlighted_days[1].year = Dev.year;
                          highlighted_days[1].month = Dev.month;
                          highlighted_days[1].day = 11;

                          highlighted_days[2].year = Dev.year;
                          highlighted_days[2].month = Dev.month;
                          highlighted_days[2].day = 22;

                          lv_calendar_set_highlighted_dates(calendar, highlighted_days, 3);

                            break;
                        case 3:
                            lv_tabview_set_tab_act(tabview, 3, LV_ANIM_ON);
                            break;
                        default:break;         
                }
                Dev.setflag&=~0x02;
               }
            } 
            xSemaphoreGive( xValMQTTtoLvgl ); /* 互斥量必须归还! */ 
    }
    //printf("h %d m %d s %d\n", Hour, Minute, Second);
    if (++Second >= 60)
    {
        Second = 0;
        if (++Minute >= 60)
        {
            Minute = 0;
            if (++Hour >= 12) Hour = 0;
            Hour_line_points[1].x=Hour_line_points[0].x+60*cos((REDRESSH +Hour*36)*PI/180);
            Hour_line_points[1].y=Hour_line_points[0].y+60*sin((REDRESSH +Hour*36)*PI/180);
            lv_line_set_points(line_H, Hour_line_points, 2);  
           
        }
        Minute_line_points[1].x=Minute_line_points[0].x+60*cos((REDRESSM+Minute*6)*PI/180);
        Minute_line_points[1].y=Minute_line_points[0].y+60*sin((REDRESSM+Minute*6)*PI/180);
        lv_line_set_points(line_M, Minute_line_points, 2);   
    }
    Second_line_points[1].x=Second_line_points[0].x+60*cos((REDRESSS+Second*6)*PI/180);
    Second_line_points[1].y=Second_line_points[0].y+60*sin((REDRESSS+Second*6)*PI/180);
    lv_line_set_points(line_S, Second_line_points, 2);  
    char str[60]; 
    sprintf(str," %02d\n",Second );
    lv_label_set_text(label2, str);    
    sprintf(str," %02d : %02d\n",Hour,Minute );
     lv_label_set_text(label2_2, str);  
}

Thanks.

秦天qintian0303

The OP can take a video to see the effect, it is more intuitive, it is quite convenient to upload videos on our forum

Honghuzaitian

Qintianqintian0303 posted on 2022-10-2 22:38 The OP can take a video to see the effect, it is more intuitive, it is quite convenient to upload videos on our forum

I think so too. After all, pure numbers don’t look that good.

damiaa

Thanks for the reminder

damiaa

Finally it looks like this