LVGL_V8.3入门四---圆形表盘UI设计(字体、图片、时间显示设计)

系列文章目录

LVGL_V8.3入门一
LVGL_V8.3入门二—实时时钟(模仿华为watch-UI)
LVGL_V8.3入门三—圆形表盘UI设计(圆弧)

前言

在现代界面设计中,用户体验至关重要。表盘是一种直观而有效的方式,通过图形化的形式向用户传达信息。为了创造出令人印象深刻的用户界面,我选择使用LVGL(LittlevGL)库,这是一个功能强大而灵活的开源图形库。在这篇博客中,我将分享我的经验,介绍如何使用LVGL创建一个引人注目的圆形表盘UI。


一、实验效果

在这里插入图片描述

二、日期字体设置

在这里插入图片描述
设置字体颜色
在这里插入图片描述
利用取色器进行取色比较方便
在这里插入图片描述

三、图片设置

在阿里云矢量图官网可以下载一些图标https://www.iconfont.cn/
在这里插入图片描述
png下载
在这里插入图片描述
但是直接下载的图片可能会太大,可以利用美图秀秀进行更改
在这里插入图片描述
最终效果图
在这里插入图片描述

四、导出代码

将导出的代码加入已经有的LVGL框架,下面是生成的代码
在这里插入图片描述
但使用SquareLine工具导出代码时,图片颜色会有偏差并且有的图片会乱码。解决方法是:利用下面的官方转换工具进行转换,将转换后的.c文件复制到相对应的目录。
https://lvgl.io/tools/imageconverter

time_refresh()函数用于更新时间

// This file was generated by SquareLine Studio
// SquareLine Studio version: SquareLine Studio 1.3.2
// LVGL version: 8.3.6
// Project name: cirspj

#include "ui.h"
#include <stdio.h>
#include "stm32f7xx_hal.h"
#include "ui_CirWatchUi.h"

lv_obj_t *ui_Screen2;
lv_obj_t *ui_Arc1;
lv_obj_t *ui_Arc2;
lv_obj_t *ui_Arc3;
lv_obj_t *ui_Label1;
lv_obj_t *ui_Label2;
lv_obj_t *ui_Label3;
lv_obj_t *ui_Label4;
lv_obj_t *ui_Image1;
lv_obj_t *ui_Image2;
lv_obj_t *ui_Label5;
lv_obj_t *ui_Image3;
lv_obj_t *ui_Label6;
lv_obj_t *ui_Image5;
lv_obj_t *ui_Label7;
lv_obj_t *ui____initial_actions0;

RTC_DateTypeDef GetData;  //获取日期结构�?

RTC_TimeTypeDef GetTime;   //获取时间结构�?

RTC_HandleTypeDef hrtc;

static void time_refresh(lv_event_t* event) {

	uint8_t timeStr[10];
	uint8_t dataStr[10];

	 /* Get the RTC current Time */
	HAL_RTC_GetTime(&hrtc, &GetTime, RTC_FORMAT_BIN);
    /* Get the RTC current Date */
    HAL_RTC_GetDate(&hrtc, &GetData, RTC_FORMAT_BIN);

    sprintf(timeStr, "%02d:%02d:%02d", GetTime.Hours, GetTime.Minutes, GetTime.Seconds);
    lv_label_set_text(ui_Label1,timeStr);

    sprintf(dataStr, "%02d/%02d", GetData.Month, GetData.Date);
    lv_label_set_text(ui_Label1,timeStr);






//    lv_img_set_angle(ui_Image5, GetTime.Seconds * 60);//s秒表
//    lv_img_set_angle(ui_Image4, GetTime.Minutes * 60);//m分钟
//    lv_img_set_angle(ui_Image3, GetTime.Hours * 300);//h时
//    lv_refr_now(NULL);
}

static void send_event(void){
    lv_event_send(ui_Screen2,LV_EVENT_REFRESH,NULL);
}

void ui_CirWatchUi_screen_Iinit(void)
{
	ui_Screen2 = lv_obj_create(NULL);
	lv_obj_clear_flag( ui_Screen2, LV_OBJ_FLAG_SCROLLABLE );    /// Flags

	ui_Arc1 = lv_arc_create(ui_Screen2);
	lv_obj_set_width( ui_Arc1, 210);
	lv_obj_set_height( ui_Arc1, 210);
	lv_obj_set_align( ui_Arc1, LV_ALIGN_CENTER );
	lv_arc_set_value(ui_Arc1, 68);
	lv_arc_set_bg_angles(ui_Arc1,90,270);
	lv_obj_set_style_arc_color(ui_Arc1, lv_color_hex(0x8680F9), LV_PART_MAIN | LV_STATE_DEFAULT );
	lv_obj_set_style_arc_opa(ui_Arc1, 150, LV_PART_MAIN| LV_STATE_DEFAULT);
	lv_obj_set_style_arc_width(ui_Arc1, 15, LV_PART_MAIN| LV_STATE_DEFAULT);

	lv_obj_set_style_arc_color(ui_Arc1, lv_color_hex(0x8680F9), LV_PART_INDICATOR | LV_STATE_DEFAULT );
	lv_obj_set_style_arc_opa(ui_Arc1, 255, LV_PART_INDICATOR| LV_STATE_DEFAULT);
	lv_obj_set_style_arc_width(ui_Arc1, 15, LV_PART_INDICATOR| LV_STATE_DEFAULT);

	lv_obj_set_style_bg_color(ui_Arc1, lv_color_hex(0xFFFFFF), LV_PART_KNOB | LV_STATE_DEFAULT );
	lv_obj_set_style_bg_opa(ui_Arc1, 0, LV_PART_KNOB| LV_STATE_DEFAULT);

	ui_Arc2 = lv_arc_create(ui_Screen2);
	lv_obj_set_width( ui_Arc2, 156);
	lv_obj_set_height( ui_Arc2, 210);
	lv_obj_set_x( ui_Arc2, 1 );
	lv_obj_set_y( ui_Arc2, 29 );
	lv_obj_set_align( ui_Arc2, LV_ALIGN_CENTER );
	lv_arc_set_value(ui_Arc2, 68);
	lv_arc_set_bg_angles(ui_Arc2,90,270);
	lv_obj_set_style_arc_color(ui_Arc2, lv_color_hex(0x5DDBE5), LV_PART_MAIN | LV_STATE_DEFAULT );
	lv_obj_set_style_arc_opa(ui_Arc2, 150, LV_PART_MAIN| LV_STATE_DEFAULT);
	lv_obj_set_style_arc_width(ui_Arc2, 15, LV_PART_MAIN| LV_STATE_DEFAULT);

	lv_obj_set_style_arc_color(ui_Arc2, lv_color_hex(0x46DEF0), LV_PART_INDICATOR | LV_STATE_DEFAULT );
	lv_obj_set_style_arc_opa(ui_Arc2, 255, LV_PART_INDICATOR| LV_STATE_DEFAULT);
	lv_obj_set_style_arc_width(ui_Arc2, 15, LV_PART_INDICATOR| LV_STATE_DEFAULT);

	lv_obj_set_style_bg_color(ui_Arc2, lv_color_hex(0xFFFFFF), LV_PART_KNOB | LV_STATE_DEFAULT );
	lv_obj_set_style_bg_opa(ui_Arc2, 0, LV_PART_KNOB| LV_STATE_DEFAULT);

	ui_Arc3 = lv_arc_create(ui_Screen2);
	lv_obj_set_width( ui_Arc3, 100);
	lv_obj_set_height( ui_Arc3, 210);
	lv_obj_set_x( ui_Arc3, 1 );
	lv_obj_set_y( ui_Arc3, 58 );
	lv_obj_set_align( ui_Arc3, LV_ALIGN_CENTER );
	lv_arc_set_value(ui_Arc3, 68);
	lv_arc_set_bg_angles(ui_Arc3,90,270);
	lv_obj_set_style_arc_color(ui_Arc3, lv_color_hex(0xF4AE4B), LV_PART_MAIN | LV_STATE_DEFAULT );
	lv_obj_set_style_arc_opa(ui_Arc3, 150, LV_PART_MAIN| LV_STATE_DEFAULT);
	lv_obj_set_style_arc_width(ui_Arc3, 15, LV_PART_MAIN| LV_STATE_DEFAULT);

	lv_obj_set_style_arc_color(ui_Arc3, lv_color_hex(0xF4AE4B), LV_PART_INDICATOR | LV_STATE_DEFAULT );
	lv_obj_set_style_arc_opa(ui_Arc3, 255, LV_PART_INDICATOR| LV_STATE_DEFAULT);
	lv_obj_set_style_arc_width(ui_Arc3, 15, LV_PART_INDICATOR| LV_STATE_DEFAULT);

	lv_obj_set_style_bg_color(ui_Arc3, lv_color_hex(0xFFFFFF), LV_PART_KNOB | LV_STATE_DEFAULT );
	lv_obj_set_style_bg_opa(ui_Arc3, 0, LV_PART_KNOB| LV_STATE_DEFAULT);

	ui_Label1 = lv_label_create(ui_Screen2);
	lv_obj_set_width( ui_Label1, LV_SIZE_CONTENT);  /// 1
	lv_obj_set_height( ui_Label1, LV_SIZE_CONTENT);   /// 1
	lv_obj_set_x( ui_Label1, 21 );
	lv_obj_set_y( ui_Label1, 1 );
	lv_obj_set_align( ui_Label1, LV_ALIGN_CENTER );
	lv_label_set_text(ui_Label1,"11:10");
	lv_obj_set_style_text_font(ui_Label1, &lv_font_montserrat_26, LV_PART_MAIN| LV_STATE_DEFAULT);

	ui_Label2 = lv_label_create(ui_Screen2);
	lv_obj_set_width( ui_Label2, LV_SIZE_CONTENT);  /// 1
	lv_obj_set_height( ui_Label2, LV_SIZE_CONTENT);   /// 1
	lv_obj_set_x( ui_Label2, 30 );
	lv_obj_set_y( ui_Label2, -69 );
	lv_obj_set_align( ui_Label2, LV_ALIGN_CENTER );
	lv_label_set_text(ui_Label2,"6570");
	lv_obj_set_style_text_color(ui_Label2, lv_color_hex(0x6AC2CD), LV_PART_MAIN | LV_STATE_DEFAULT );
	lv_obj_set_style_text_opa(ui_Label2, 255, LV_PART_MAIN| LV_STATE_DEFAULT);

	ui_Label3 = lv_label_create(ui_Screen2);
	lv_obj_set_width( ui_Label3, LV_SIZE_CONTENT);  /// 1
	lv_obj_set_height( ui_Label3, LV_SIZE_CONTENT);   /// 1
	lv_obj_set_x( ui_Label3, 29 );
	lv_obj_set_y( ui_Label3, -97 );
	lv_obj_set_align( ui_Label3, LV_ALIGN_CENTER );
	lv_label_set_text(ui_Label3,"68%");
	lv_obj_set_style_text_color(ui_Label3, lv_color_hex(0xB4AEEE), LV_PART_MAIN | LV_STATE_DEFAULT );
	lv_obj_set_style_text_opa(ui_Label3, 255, LV_PART_MAIN| LV_STATE_DEFAULT);
	lv_obj_set_style_text_font(ui_Label3, &lv_font_montserrat_14, LV_PART_MAIN| LV_STATE_DEFAULT);

	ui_Label4 = lv_label_create(ui_Screen2);
	lv_obj_set_width( ui_Label4, LV_SIZE_CONTENT);  /// 1
	lv_obj_set_height( ui_Label4, LV_SIZE_CONTENT);   /// 1
	lv_obj_set_x( ui_Label4, 27 );
	lv_obj_set_y( ui_Label4, -39 );
	lv_obj_set_align( ui_Label4, LV_ALIGN_CENTER );
	lv_label_set_text(ui_Label4,"426");
	lv_obj_set_style_text_color(ui_Label4, lv_color_hex(0xFFAE8B), LV_PART_MAIN | LV_STATE_DEFAULT );
	lv_obj_set_style_text_opa(ui_Label4, 255, LV_PART_MAIN| LV_STATE_DEFAULT);
	lv_obj_set_style_text_font(ui_Label4, &lv_font_montserrat_14, LV_PART_MAIN| LV_STATE_DEFAULT);

	ui_Image1 = lv_img_create(ui_Screen2);
	lv_img_set_src(ui_Image1, &ui_img_step_png);
	lv_obj_set_width( ui_Image1, LV_SIZE_CONTENT);  /// 1
	lv_obj_set_height( ui_Image1, LV_SIZE_CONTENT);   /// 1
	lv_obj_set_x( ui_Image1, 30 );
	lv_obj_set_y( ui_Image1, 74 );
	lv_obj_set_align( ui_Image1, LV_ALIGN_CENTER );
	lv_obj_add_flag( ui_Image1, LV_OBJ_FLAG_ADV_HITTEST );   /// Flags
	lv_obj_clear_flag( ui_Image1, LV_OBJ_FLAG_SCROLLABLE );    /// Flags

	ui_Image2 = lv_img_create(ui_Screen2);
	lv_img_set_src(ui_Image2, &ui_img_power_png);
	lv_obj_set_width( ui_Image2, LV_SIZE_CONTENT);  /// 1
	lv_obj_set_height( ui_Image2, LV_SIZE_CONTENT);   /// 1
	lv_obj_set_x( ui_Image2, 26 );
	lv_obj_set_y( ui_Image2, 103 );
	lv_obj_set_align( ui_Image2, LV_ALIGN_CENTER );
	lv_obj_add_flag( ui_Image2, LV_OBJ_FLAG_ADV_HITTEST );   /// Flags
	lv_obj_clear_flag( ui_Image2, LV_OBJ_FLAG_SCROLLABLE );    /// Flags

	ui_Label5 = lv_label_create(ui_Screen2);
	lv_obj_set_width( ui_Label5, LV_SIZE_CONTENT);  /// 1
	lv_obj_set_height( ui_Label5, LV_SIZE_CONTENT);   /// 1
	lv_obj_set_x( ui_Label5, 31 );
	lv_obj_set_y( ui_Label5, 44 );
	lv_obj_set_align( ui_Label5, LV_ALIGN_CENTER );
	lv_label_set_text(ui_Label5,"PAI");
	lv_obj_set_style_text_color(ui_Label5, lv_color_hex(0xF6AE4A), LV_PART_MAIN | LV_STATE_DEFAULT );
	lv_obj_set_style_text_opa(ui_Label5, 255, LV_PART_MAIN| LV_STATE_DEFAULT);
	lv_obj_set_style_text_font(ui_Label5, &lv_font_montserrat_14, LV_PART_MAIN| LV_STATE_DEFAULT);

	ui_Image3 = lv_img_create(ui_Screen2);
	lv_img_set_src(ui_Image3, &ui_img_rate_png);
	lv_obj_set_width( ui_Image3, LV_SIZE_CONTENT);  /// 1
	lv_obj_set_height( ui_Image3, LV_SIZE_CONTENT);   /// 1
	lv_obj_set_x( ui_Image3, 84 );
	lv_obj_set_y( ui_Image3, 26 );
	lv_obj_set_align( ui_Image3, LV_ALIGN_CENTER );
	lv_obj_add_flag( ui_Image3, LV_OBJ_FLAG_ADV_HITTEST );   /// Flags
	lv_obj_clear_flag( ui_Image3, LV_OBJ_FLAG_SCROLLABLE );    /// Flags

	ui_Label6 = lv_label_create(ui_Screen2);
	lv_obj_set_width( ui_Label6, LV_SIZE_CONTENT);  /// 1
	lv_obj_set_height( ui_Label6, LV_SIZE_CONTENT);   /// 1
	lv_obj_set_x( ui_Label6, 82 );
	lv_obj_set_y( ui_Label6, 44 );
	lv_obj_set_align( ui_Label6, LV_ALIGN_CENTER );
	lv_label_set_text(ui_Label6,"98");

	ui_Image5 = lv_img_create(ui_Screen2);
	lv_img_set_src(ui_Image5, &ui_img_weather_png);
	lv_obj_set_width( ui_Image5, LV_SIZE_CONTENT);  /// 1
	lv_obj_set_height( ui_Image5, LV_SIZE_CONTENT);   /// 1
	lv_obj_set_x( ui_Image5, 81 );
	lv_obj_set_y( ui_Image5, -43 );
	lv_obj_set_align( ui_Image5, LV_ALIGN_CENTER );
	lv_obj_add_flag( ui_Image5, LV_OBJ_FLAG_ADV_HITTEST );   /// Flags
	lv_obj_clear_flag( ui_Image5, LV_OBJ_FLAG_SCROLLABLE );    /// Flags

	ui_Label7 = lv_label_create(ui_Screen2);
	lv_obj_set_width( ui_Label7, LV_SIZE_CONTENT);  /// 1
	lv_obj_set_height( ui_Label7, LV_SIZE_CONTENT);   /// 1
	lv_obj_set_x( ui_Label7, 68 );
	lv_obj_set_y( ui_Label7, -70 );
	lv_obj_set_align( ui_Label7, LV_ALIGN_CENTER );
	lv_label_set_text(ui_Label7,"12/11");

/**< 设置LV_EVENT_REFRESH事件的回调 */
	 lv_obj_add_event_cb(ui_Screen2, time_refresh,LV_EVENT_REFRESH ,NULL);

	  /**<每个1秒发一次LV_EVENT_REFRESH事件*/
	 lv_timer_create((void*)send_event, 1000, NULL);

}

总结

通过这篇博客,你将学到如何使用LVGL创建一个引人注目的圆形表盘UI。LVGL提供了丰富的功能和灵活性,使得用户界面的设计变得轻而易举。我希望这篇博客能够帮助你更好地理解LVGL的使用方法,并在你的项目中创造出独特而美观的用户体验。

  • 33
    点赞
  • 40
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值