教你快速复刻ESP8266太空人小电视（基于LVGL、GUI-Guider以及亮牛LN882H WIFI-BLE芯片）--持续更新

于 2023-12-24 17:40:13 发布
阅读量1.5k 收藏 29
点赞数 26
分类专栏： GUI 文章标签： LVGL GUI-Guider LN882H
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xue745146527/article/details/135180547
版权

目录

前言

一、GUI设计

二、获取天气和时间信息

三、硬件连接

四、软件编写

前言

        之前有在哔哩哔哩上面看到基于ESP8266做的太空人小电视，感觉很有意思，一直想复刻一个，所以正好趁着最近有时间，用手上的亮牛半导体的WIFI芯片LN882H复刻了一个。

        在开始之前先看看我的成果：

12月24日

一、GUI设计

        正如标题里面提到的，我们是使用LVGL进行UI设计，LVGL有一个用户界面开发工具——GUI Guider，这个工具支持拖放的所见即所得UI设计，非常方便。GUI-Guider下载

        安装好软件之后创建工程：

        然后我们就可以参考网络上的太空人小电视来设计UI了，下图是我在网上随便找的，下面就开始根据这个来进行设计。

                                

        首先，先放置一些标签（label），这些标签用来显示基本的文字信息，例如时间，地点，天气，温湿度等等。

放好之后就像下图这样：

        然后开始放置图片和我们的太空人GIF，GUI-Guider会自动将GIF转成图片，但是图片太多了需要删除 一部分，并且编译然后看下结果，有乱码是因为字体不支持中文，这个可以后面解决。（因为是第一次编译，所以比较慢）

继续添加图片和温湿度的进度条：

然后再添加一个循环播放的标签就大功告成了：

至此，UI设计就结束了，点击右上角播放按钮可以自动生成LVGL的UI代码，同时运行虚拟机。

上文中的坐标可以参考下面生成的代码。一些图片资源可以在这里下载：图片资源

/*
* Copyright 2023 NXP
* NXP Confidential and Proprietary. This software is owned or controlled by NXP and may only be used strictly in
* accordance with the applicable license terms. By expressly accepting such terms or by downloading, installing,
* activating and/or otherwise using the software, you are agreeing that you have read, and that you agree to
* comply with and are bound by, such license terms.  If you do not agree to be bound by the applicable license
* terms, then you may not retain, install, activate or otherwise use the software.
*/

#include "lvgl.h"
#include <stdio.h>
#include "gui_guider.h"
#include "events_init.h"
#include "widgets_init.h"

void setup_scr_screen_time(lv_ui *ui)
{
	//Write codes screen_time
	ui->screen_time = lv_obj_create(NULL);
	lv_obj_set_size(ui->screen_time, 240, 240);

	//Write style for screen_time, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
	lv_obj_set_style_bg_opa(ui->screen_time, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_color(ui->screen_time, lv_color_hex(0x000000), LV_PART_MAIN|LV_STATE_DEFAULT);

	//Write codes screen_time_label_point
	ui->screen_time_label_point = lv_label_create(ui->screen_time);
	lv_label_set_text(ui->screen_time_label_point, ":");
	lv_label_set_long_mode(ui->screen_time_label_point, LV_LABEL_LONG_WRAP);
	lv_obj_set_pos(ui->screen_time_label_point, 61, 53);
	lv_obj_set_size(ui->screen_time_label_point, 83, 66);

	//Write style for screen_time_label_point, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
	lv_obj_set_style_border_width(ui->screen_time_label_point, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_radius(ui->screen_time_label_point, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_color(ui->screen_time_label_point, lv_color_hex(0xbecdff), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_font(ui->screen_time_label_point, &lv_font_Acme_Regular_64, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_letter_space(ui->screen_time_label_point, 2, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_line_space(ui->screen_time_label_point, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_align(ui->screen_time_label_point, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_opa(ui->screen_time_label_point, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_top(ui->screen_time_label_point, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_right(ui->screen_time_label_point, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_bottom(ui->screen_time_label_point, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_left(ui->screen_time_label_point, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_shadow_width(ui->screen_time_label_point, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

	//Write codes screen_time_hum_img
	ui->screen_time_hum_img = lv_img_create(ui->screen_time);
	lv_obj_add_flag(ui->screen_time_hum_img, LV_OBJ_FLAG_CLICKABLE);
	lv_img_set_src(ui->screen_time_hum_img, &_hum_alpha_15x15);
	lv_img_set_pivot(ui->screen_time_hum_img, 50,50);
	lv_img_set_angle(ui->screen_time_hum_img, 10);
	lv_obj_set_pos(ui->screen_time_hum_img, 7, 208);
	lv_obj_set_size(ui->screen_time_hum_img, 15, 15);

	//Write style for screen_time_hum_img, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
	lv_obj_set_style_img_opa(ui->screen_time_hum_img, 255, LV_PART_MAIN|LV_STATE_DEFAULT);

	//Write codes screen_time_tem_img
	ui->screen_time_tem_img = lv_img_create(ui->screen_time);
	lv_obj_add_flag(ui->screen_time_tem_img, LV_OBJ_FLAG_CLICKABLE);
	lv_img_set_src(ui->screen_time_tem_img, &_tem_alpha_20x20);
	lv_img_set_pivot(ui->screen_time_tem_img, 50,50);
	lv_img_set_angle(ui->screen_time_tem_img, 0);
	lv_obj_set_pos(ui->screen_time_tem_img, 7, 172);
	lv_obj_set_size(ui->screen_time_tem_img, 20, 20);

	//Write style for screen_time_tem_img, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
	lv_obj_set_style_img_opa(ui->screen_time_tem_img, 255, LV_PART_MAIN|LV_STATE_DEFAULT);

	//Write codes screen_time_animimg_1
	ui->screen_time_animimg_1 = lv_animimg_create(ui->screen_time);
	lv_animimg_set_src(ui->screen_time_animimg_1, (const void **) screen_time_animimg_1_imgs, 6, false);
	lv_animimg_set_duration(ui->screen_time_animimg_1, 60*6);
	lv_animimg_set_repeat_count(ui->screen_time_animimg_1, LV_ANIM_REPEAT_INFINITE);
	lv_animimg_start(ui->screen_time_animimg_1);
	lv_obj_set_pos(ui->screen_time_animimg_1, 150, 150);
	lv_obj_set_size(ui->screen_time_animimg_1, 90, 90);

	//Write codes screen_time_hum_label
	ui->screen_time_hum_label = lv_label_create(ui->screen_time);
	lv_label_set_text(ui->screen_time_hum_label, "-26℃");
	lv_label_set_long_mode(ui->screen_time_hum_label, LV_LABEL_LONG_WRAP);
	lv_obj_set_pos(ui->screen_time_hum_label, 95, 207);
	lv_obj_set_size(ui->screen_time_hum_label, 65, 20);

	//Write style for screen_time_hum_label, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
	lv_obj_set_style_border_width(ui->screen_time_hum_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_radius(ui->screen_time_hum_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_color(ui->screen_time_hum_label, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_font(ui->screen_time_hum_label, &my_chinese_font_16, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_letter_space(ui->screen_time_hum_label, 2, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_line_space(ui->screen_time_hum_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_align(ui->screen_time_hum_label, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_opa(ui->screen_time_hum_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_top(ui->screen_time_hum_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_right(ui->screen_time_hum_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_bottom(ui->screen_time_hum_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_left(ui->screen_time_hum_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_shadow_width(ui->screen_time_hum_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

	//Write codes screen_time_tem_label
	ui->screen_time_tem_label = lv_label_create(ui->screen_time);
	lv_label_set_text(ui->screen_time_tem_label, "100%");
	lv_label_set_long_mode(ui->screen_time_tem_label, LV_LABEL_LONG_WRAP);
	lv_obj_set_pos(ui->screen_time_tem_label, 95, 175);
	lv_obj_set_size(ui->screen_time_tem_label, 65, 20);

	//Write style for screen_time_tem_label, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
	lv_obj_set_style_border_width(ui->screen_time_tem_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_radius(ui->screen_time_tem_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_color(ui->screen_time_tem_label, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_font(ui->screen_time_tem_label, &my_chinese_font_16, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_letter_space(ui->screen_time_tem_label, 2, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_line_space(ui->screen_time_tem_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_align(ui->screen_time_tem_label, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_opa(ui->screen_time_tem_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_top(ui->screen_time_tem_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_right(ui->screen_time_tem_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_bottom(ui->screen_time_tem_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_left(ui->screen_time_tem_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_shadow_width(ui->screen_time_tem_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

	//Write codes screen_time_hum_bar
	ui->screen_time_hum_bar = lv_bar_create(ui->screen_time);
	lv_obj_set_style_anim_time(ui->screen_time_hum_bar, 1000, 0);
	lv_bar_set_mode(ui->screen_time_hum_bar, LV_BAR_MODE_NORMAL);
	lv_bar_set_value(ui->screen_time_hum_bar, 50, LV_ANIM_OFF);
	lv_obj_set_pos(ui->screen_time_hum_bar, 28, 212);
	lv_obj_set_size(ui->screen_time_hum_bar, 71, 8);

	//Write style for screen_time_hum_bar, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
	lv_obj_set_style_bg_opa(ui->screen_time_hum_bar, 60, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_color(ui->screen_time_hum_bar, lv_color_hex(0x2195f6), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_radius(ui->screen_time_hum_bar, 10, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_shadow_width(ui->screen_time_hum_bar, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

	//Write style for screen_time_hum_bar, Part: LV_PART_INDICATOR, State: LV_STATE_DEFAULT.
	lv_obj_set_style_bg_opa(ui->screen_time_hum_bar, 255, LV_PART_INDICATOR|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_color(ui->screen_time_hum_bar, lv_color_hex(0xa8c3ff), LV_PART_INDICATOR|LV_STATE_DEFAULT);
	lv_obj_set_style_radius(ui->screen_time_hum_bar, 10, LV_PART_INDICATOR|LV_STATE_DEFAULT);

	//Write codes screen_time_tem_bar
	ui->screen_time_tem_bar = lv_bar_create(ui->screen_time);
	lv_obj_set_style_anim_time(ui->screen_time_tem_bar, 1000, 0);
	lv_bar_set_mode(ui->screen_time_tem_bar, LV_BAR_MODE_NORMAL);
	lv_bar_set_value(ui->screen_time_tem_bar, 50, LV_ANIM_OFF);
	lv_obj_set_pos(ui->screen_time_tem_bar, 28, 180);
	lv_obj_set_size(ui->screen_time_tem_bar, 71, 8);

	//Write style for screen_time_tem_bar, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
	lv_obj_set_style_bg_opa(ui->screen_time_tem_bar, 60, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_color(ui->screen_time_tem_bar, lv_color_hex(0x2195f6), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_radius(ui->screen_time_tem_bar, 10, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_shadow_width(ui->screen_time_tem_bar, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

	//Write style for screen_time_tem_bar, Part: LV_PART_INDICATOR, State: LV_STATE_DEFAULT.
	lv_obj_set_style_bg_opa(ui->screen_time_tem_bar, 255, LV_PART_INDICATOR|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_color(ui->screen_time_tem_bar, lv_color_hex(0xffe4ae), LV_PART_INDICATOR|LV_STATE_DEFAULT);
	lv_obj_set_style_radius(ui->screen_time_tem_bar, 10, LV_PART_INDICATOR|LV_STATE_DEFAULT);

	//Write codes screen_time_second_label
	ui->screen_time_second_label = lv_label_create(ui->screen_time);
	lv_label_set_text(ui->screen_time_second_label, "55\n");
	lv_label_set_long_mode(ui->screen_time_second_label, LV_LABEL_LONG_WRAP);
	lv_obj_set_pos(ui->screen_time_second_label, 175, 84);
	lv_obj_set_size(ui->screen_time_second_label, 57, 28);

	//Write style for screen_time_second_label, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
	lv_obj_set_style_border_width(ui->screen_time_second_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_radius(ui->screen_time_second_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_color(ui->screen_time_second_label, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_font(ui->screen_time_second_label, &lv_font_Acme_Regular_32, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_letter_space(ui->screen_time_second_label, 2, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_line_space(ui->screen_time_second_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_align(ui->screen_time_second_label, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_opa(ui->screen_time_second_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_top(ui->screen_time_second_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_right(ui->screen_time_second_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_bottom(ui->screen_time_second_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_left(ui->screen_time_second_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_shadow_width(ui->screen_time_second_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

	//Write codes screen_time_weather_img
	ui->screen_time_weather_img = lv_img_create(ui->screen_time);
	//lv_obj_add_flag(ui->screen_time_weather_img, LV_OBJ_FLAG_CLICKABLE);
    lv_img_set_src(ui->screen_time_weather_img, &w0);
	lv_img_set_pivot(ui->screen_time_weather_img, 48,48);
	lv_img_set_size_mode(ui->screen_time_weather_img, LV_IMG_SIZE_MODE_VIRTUAL);
	
	// lv_img_set_angle(ui->screen_time_weather_img, 0);
	lv_obj_set_pos(ui->screen_time_weather_img, 182, 0);
	lv_obj_set_size(ui->screen_time_weather_img, 48, 48);

	//Write style for screen_time_weather_img, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
	lv_obj_set_style_img_opa(ui->screen_time_weather_img, 255, LV_PART_MAIN|LV_STATE_DEFAULT);

	//Write codes screen_time_weather_label
	ui->screen_time_weather_label = lv_label_create(ui->screen_time);
	lv_label_set_text(ui->screen_time_weather_label, "暴风雨");
	lv_label_set_long_mode(ui->screen_time_weather_label, LV_LABEL_LONG_WRAP);
	lv_obj_set_pos(ui->screen_time_weather_label, 100, 7);
	lv_obj_set_size(ui->screen_time_weather_label, 90, 18);

	//Write style for screen_time_weather_label, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
	lv_obj_set_style_border_width(ui->screen_time_weather_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_radius(ui->screen_time_weather_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_color(ui->screen_time_weather_label, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_font(ui->screen_time_weather_label, &my_chinese_font_16, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_letter_space(ui->screen_time_weather_label, 2, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_line_space(ui->screen_time_weather_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_align(ui->screen_time_weather_label, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_opa(ui->screen_time_weather_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_top(ui->screen_time_weather_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_right(ui->screen_time_weather_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_bottom(ui->screen_time_weather_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_left(ui->screen_time_weather_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_shadow_width(ui->screen_time_weather_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

	//Write codes screen_time_label_5
	ui->screen_time_label_5 = lv_label_create(ui->screen_time);
	lv_label_set_text(ui->screen_time_label_5, "室外温度：25℃，室外湿度30%");
	lv_label_set_long_mode(ui->screen_time_label_5, LV_LABEL_LONG_SCROLL_CIRCULAR);
	lv_obj_set_pos(ui->screen_time_label_5, 19, 32);
	lv_obj_set_size(ui->screen_time_label_5, 150, 18);

	//Write style for screen_time_label_5, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
	lv_obj_set_style_border_width(ui->screen_time_label_5, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_radius(ui->screen_time_label_5, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_color(ui->screen_time_label_5, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_font(ui->screen_time_label_5, &my_chinese_font_16, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_letter_space(ui->screen_time_label_5, 2, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_line_space(ui->screen_time_label_5, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_align(ui->screen_time_label_5, LV_TEXT_ALIGN_RIGHT, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_opa(ui->screen_time_label_5, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_top(ui->screen_time_label_5, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_right(ui->screen_time_label_5, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_bottom(ui->screen_time_label_5, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_left(ui->screen_time_label_5, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_shadow_width(ui->screen_time_label_5, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

	//Write codes screen_time_minute_label
	ui->screen_time_minute_label = lv_label_create(ui->screen_time);
	lv_label_set_text(ui->screen_time_minute_label, "24");
	lv_label_set_long_mode(ui->screen_time_minute_label, LV_LABEL_LONG_WRAP);
	lv_obj_set_pos(ui->screen_time_minute_label, 107, 59);
	lv_obj_set_size(ui->screen_time_minute_label, 83, 66);

	//Write style for screen_time_minute_label, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
	lv_obj_set_style_border_width(ui->screen_time_minute_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_radius(ui->screen_time_minute_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_color(ui->screen_time_minute_label, lv_color_hex(0xff9711), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_font(ui->screen_time_minute_label, &lv_font_Acme_Regular_64, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_letter_space(ui->screen_time_minute_label, 2, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_line_space(ui->screen_time_minute_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_align(ui->screen_time_minute_label, LV_TEXT_ALIGN_LEFT, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_opa(ui->screen_time_minute_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_top(ui->screen_time_minute_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_right(ui->screen_time_minute_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_bottom(ui->screen_time_minute_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_left(ui->screen_time_minute_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_shadow_width(ui->screen_time_minute_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

	//Write codes screen_time_hour_label
	ui->screen_time_hour_label = lv_label_create(ui->screen_time);
	lv_label_set_text(ui->screen_time_hour_label, "24");
	lv_label_set_long_mode(ui->screen_time_hour_label, LV_LABEL_LONG_WRAP);
	lv_obj_set_pos(ui->screen_time_hour_label, 14, 59);
	lv_obj_set_size(ui->screen_time_hour_label, 83, 66);

	//Write style for screen_time_hour_label, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
	lv_obj_set_style_border_width(ui->screen_time_hour_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_radius(ui->screen_time_hour_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_color(ui->screen_time_hour_label, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_font(ui->screen_time_hour_label, &lv_font_Acme_Regular_64, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_letter_space(ui->screen_time_hour_label, 2, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_line_space(ui->screen_time_hour_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_align(ui->screen_time_hour_label, LV_TEXT_ALIGN_RIGHT, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_opa(ui->screen_time_hour_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_top(ui->screen_time_hour_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_right(ui->screen_time_hour_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_bottom(ui->screen_time_hour_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_left(ui->screen_time_hour_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_shadow_width(ui->screen_time_hour_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

	//Write codes screen_time_position_label
	ui->screen_time_position_label = lv_label_create(ui->screen_time);
	lv_label_set_text(ui->screen_time_position_label, "上海");
	lv_label_set_long_mode(ui->screen_time_position_label, LV_LABEL_LONG_WRAP);
	lv_obj_set_pos(ui->screen_time_position_label, 6, 7);
	lv_obj_set_size(ui->screen_time_position_label, 100, 18);

	//Write style for screen_time_position_label, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
	lv_obj_set_style_border_width(ui->screen_time_position_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_radius(ui->screen_time_position_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_color(ui->screen_time_position_label, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_font(ui->screen_time_position_label, &my_chinese_font_16, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_letter_space(ui->screen_time_position_label, 2, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_line_space(ui->screen_time_position_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_align(ui->screen_time_position_label, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_opa(ui->screen_time_position_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_top(ui->screen_time_position_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_right(ui->screen_time_position_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_bottom(ui->screen_time_position_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_left(ui->screen_time_position_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_shadow_width(ui->screen_time_position_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

	//Write codes screen_time_day_label
	ui->screen_time_day_label = lv_label_create(ui->screen_time);
	lv_label_set_text(ui->screen_time_day_label, "2023年24月24日  周二");
	lv_label_set_long_mode(ui->screen_time_day_label, LV_LABEL_LONG_WRAP);
	lv_obj_set_pos(ui->screen_time_day_label, 0, 131);
	lv_obj_set_size(ui->screen_time_day_label, 240, 16);

	//Write style for screen_time_day_label, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
	lv_obj_set_style_border_width(ui->screen_time_day_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_radius(ui->screen_time_day_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_color(ui->screen_time_day_label, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_font(ui->screen_time_day_label, &my_chinese_font_16, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_letter_space(ui->screen_time_day_label, 2, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_line_space(ui->screen_time_day_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_align(ui->screen_time_day_label, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_opa(ui->screen_time_day_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_top(ui->screen_time_day_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_right(ui->screen_time_day_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_bottom(ui->screen_time_day_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_left(ui->screen_time_day_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_shadow_width(ui->screen_time_day_label, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

	//Update current screen layout.
	lv_obj_update_layout(ui->screen_time);

	
}

二、获取天气和时间信息

对于如何获取天气信息和时间信息可以参考我的这篇博客：获取天气和时间信息

三、硬件连接

        1. 我的主控芯片是亮牛半导体的新一代WIFI-BLE芯片——LN882H，使用了Coretex M4F，160M主频，内置296KByte RAM，8/16Mbit Flash，具备了SPI、UART、I2C、SDIO、PWM等多种外设。

        

        2. 屏幕使用240*240分辨率的TFT屏幕，LCD驱动IC为st7789

四、软件编写

后续继续更新。

Snow_2018
关注
  • 26
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
ESP8266+1.3“ or 0.96“ OLED两个太空人动画(胖子和瘦子)
perseverance51博客
08-20 1458
ESP8266+1.3" or 0.96" OLED两个太空人动画(胖子和瘦子) 本实例程序，包含胖子和瘦子动画两个对象，目的是为了使用者方便移植。去除其他的显示元素，保留必要的显示函数的。 所使用的库： #include "SH1106Wire.h" //1.3寸用这个 //#include "SSD1306Wire.h" //0.96寸用这个 #include "OLEDDisplayUi.h" 选择的是：Nodemcu1.0 支持库版本：2.7.4 程序实例 /****包含胖子和
用esp8266做的手机投屏设备
qq_55013357的博客
01-30 1041
用esp8266做的手机投屏设备
教你快速复刻ESP8266太空人小电视（基于LVGL、GUI-Guider以及亮牛LN882H WIFI-BLE芯片）图片资源
12-24
教你快速复刻ESP8266太空人小电视（基于LVGL、GUI-Guider以及亮牛LN882H WIFI-BLE芯片）图片资源
在ESP8266上移植了lvgl库，并且有一个时钟界面显示，支持GPIO模拟的SPI屏幕
03-17
在ESP8266上移植了lvgl库，并且有一个时钟界面显示，支持GPIO模拟的SPI屏幕，用的是ili9341
基于ESP8266的太空人智能时钟
weixin_62080953的博客
12-14 4983
基于ESP8266WIFI的太空人智能时钟
单片机---ESP8266移植lvgl（一）
小人物的编程
03-17 2977
在ESP8266上移植了lvgl，并且提供了一个时钟demo ，屏幕为ili9341，GPIO模拟spi
太空人Wifi天气电子时钟（ESP8266+oled 8针0.96寸）
xw245184020的专栏
11-10 5654
太空人Wifi天气电子时钟（ESP8266+oled 8针0.96寸）
用esp8266做太空人表盘，arduinoIDE编辑
阿蛋的博客
05-03 8331
代码欢迎修改传播，但请不要用于商业目的。 功能简介：根据当前IP获取城市代码得到当地天气信息。天气数据从中国天气官网获取的，是否能长期稳定不能确定，时间数据是来自阿里云NTP服务器。 效果图： 所需硬件：nodemcu+LCD显示屏(分辨率240240,接口SPI,驱动:ST7789，我使用的是中景园的1.54寸清晰度还可以，理论上九线TFT240240都可以 )+杜邦线 程序需要几个库可以自行在arduino中安装，也可以直接使用压缩包里的libraries。 具体操作方法： 把文件夹libraries
esp8266 NodeMcu硬件环境下使用lvgl
weixin_45259896的博客
10-20 3759
前言 本文，介绍如何在esp8266 Node MCU的硬件上部署LVGL项目。使用的屏幕使用型号是ST7735 TFT 128x128屏幕。 （一）arduinoIDE esp8266环境配置 自行参考这篇博文，添加esp8266 在arduinoIDE开发环境。 （二）配置lvgl在arduino的开发环境 LVGL的官方已经将LVGL项目移植到了arduinoIDE，我们可以直接在arduinoIDE的库管理器添加lvgl图形库在arduino上发布的第三方库lv_arduino. （1）安装TFT_
STM32移植LVGL源码工程 stm32移植GUI-Guider源码 LVGL移植源码
最新发布
05-22
STM32移植LVGL源码工程是将流行的开源图形库LVGL（LittlevGL）应用于STM32微控制器上的过程。STM32是一款基于ARM Cortex-M内核的微控制器，广泛用于嵌入式系统设计。LVGL是一个轻量级、高效的图形用户界面库，适合...
esp8266太空人网络天气时间源码（白色款）.zip
04-11
esp8266太空人网络天气时间源码（白色款），免费学习下载，其他串口驱动，开发工具找主页
NXP gui-guider-1.4.1安装包
11-29
NXP的gui-guider-1.4.1安装包是一个专为LVGL（LittleV Graphics Library）设计的用户界面（UI）开发工具。LVGL是一个开源的图形库，广泛应用于嵌入式设备，尤其是那些资源有限的微控制器平台。gui-guider的最新版在...
LVGL NXP GUI-Guider 软件
08-10
LVGL NXP GUI-Guider 软件 ，用于lvgl 的可视化编程，可以配合esp32 lvgl实现
GUI-Guider-1.3.1-GA
01-30
1.GUI Guider是恩智浦提供的用户友好型图形用户界面开发工具，可通过开源LVGL图形库快速开发高品质的显示。GUI Guider的拖放编辑器可以轻松利用LVGL的众多特性，如小部件、动画和样式来创建GUI，而只需少量代码或...
esp8266开源小电视制作记录
weixin_43304758的博客
05-14 3149
mini开源小电视焊接、制作记录笔记
bilibili小电视桌面天气站（esp8266+微信小程序控制）超详细，看这一篇就够了
qq_56711871的博客
09-07 5220
bilibili小电视天气站，资料超全！
详解ESP-8266小电视复刻过程
qq_58384332的博客
04-13 861
注：参考了B站各位大佬的视频并引入相关资料 本代码适用于ESP8266 NodeMCU + OLED显示屏 7pin SPI引脚，正面看，从左到右依次为GND、VCC、D0、D1、RES、DC、CS ESP8266 --- OLED 3V --- VCC G --- GND D7 --- D1 D5 --- D0 D2orD8--- CS D1 --- DC RST ...
【ESP82266】温湿度小电视
Akiiiira的博客
06-23 657
最终效果图展示散件套装中有一块未焊接的主板和几个部件，现在进行分部的介绍。图中标注了每个部件的名称，分别是主控板ESP8266，它搭载了一颗小型的处理器，具有运算处理的能力，接下来是一块分辨率为128*64的单色oled屏幕，用于显示信息。知道后就是本次实验比较关键的温湿度传感器和液体检测传感器。下图是将每个模块拆下后的展示：但是电路板上是没有这些接口的，需要自行焊接。三、处理开发环境。
【ESP32S3学习笔记】LVGL开发之导入GUI-GUIDER工程
lunzilx的博客
10-14 4513
利用GUI-GUIDER 方便的进行LVGL UI的开发
gui-guider 1.4.1下载
01-17
gui-guider 1.4.1是一个用于制作GUI界面的工具软件。你可以在官方网站或者其他软件下载网站上找到它，并进行下载安装。 首先，你可以在搜索引擎中输入“gui-guider 1.4.1下载”进行搜索，然后找到官方网站或者其他可靠的软件下载网站。在官方网站上，你可以直接在首页或者下载页面找到gui-guider 1.4.1的下载链接。点击链接后，系统会自动开始下载软件安装包。 如果是在其他软件下载网站上找到gui-guider 1.4.1，你也可以点击下载链接开始下载。但是请务必注意，选择可靠的网站以确保下载的软件安全无害。 下载完成后，你可以双击安装包进行安装。根据安装向导的提示，选择安装位置和其他设置，完成安装过程。 安装完成后，你就可以开始使用gui-guider 1.4.1来制作GUI界面了。该软件功能强大，操作简单，适合初学者和有一定经验的开发者使用。 总的来说，下载gui-guider 1.4.1只需要在官方网站或可靠的软件下载网站找到它，并进行下载安装。希望以上回答能够帮助到您。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Snow_2018

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值