[RVB2601 Creative Application Development] 3 Light up the screen to display the letter A

cybertovsky

[RVB2601 Creative Application Development] 3 Light up the screen to display the letter A [Copy link]

 

There are actually many examples of displaying text on the screen.

Because RVB2601 supports lvgl, I found a conversion tool

https://lvgl.io/tools/fontconverter

The converted code is as follows:

/*******************************************************************************
 * Size: 60 px
 * Bpp: 1
 * Opts: 
 ******************************************************************************/

#ifdef LV_LVGL_H_INCLUDE_SIMPLE
#include "lvgl.h"
#else
#include "lvgl/lvgl.h"
#endif

#ifndef A
#define A 1
#endif

#if A

/*-----------------
 *    BITMAPS
 *----------------*/

/*Store the image of the glyphs*/
static LV_ATTRIBUTE_LARGE_CONST const uint8_t glyph_bitmap[] = {
    /* U+F287 "" */
    0x0, 0x0, 0x0, 0x0, 0x0, 0x7c, 0x0, 0x0,
    0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x1f, 0xe0,
    0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x7,
    0xfe, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0,
    0x1, 0xff, 0xc0, 0x0, 0x0, 0x0, 0x0, 0x0,
    0x0, 0xf, 0xff, 0xfc, 0x0, 0x0, 0x0, 0x0,
    0x0, 0x0, 0x7, 0xff, 0xff, 0x80, 0x0, 0x0,
    0x0, 0x0, 0x0, 0x1, 0xff, 0xff, 0xf0, 0x0,
    0x0, 0x0, 0x0, 0x0, 0x0, 0x7f, 0xff, 0xfe,
    0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0xf, 0x83,
    0xff, 0x80, 0x0, 0x0, 0x0, 0x0, 0x0, 0x3,
    0xe0, 0x3f, 0xf0, 0x0, 0x0, 0x0, 0x0, 0x0,
    0x0, 0x78, 0x3, 0xfc, 0x0, 0x0, 0x0, 0x0,
    0x0, 0x0, 0x1f, 0x0, 0x3e, 0x0, 0x0, 0x0,
    0x0, 0x0, 0x0, 0x3, 0xc0, 0x0, 0x0, 0x0,
    0x0, 0x0, 0x0, 0x0, 0x0, 0xf8, 0x0, 0x0,
    0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x1e, 0x0,
    0x0, 0x0, 0x0, 0x0, 0x0, 0x3f, 0x0, 0x7,
    0xc0, 0x0, 0x0, 0x0, 0x0, 0x0, 0xf, 0xf8,
    0x0, 0xf0, 0x0, 0x0, 0x0, 0x3, 0x80, 0x7,
    0xff, 0x80, 0x3e, 0x0, 0x0, 0x0, 0x0, 0x7c,
    0x1, 0xff, 0xf8, 0x7, 0xc0, 0x0, 0x0, 0x0,
    0xf, 0xc0, 0x3f, 0xff, 0x81, 0xf0, 0x0, 0x0,
    0x0, 0x1, 0xfe, 0xf, 0xff, 0xf0, 0x7e, 0x0,
    0x0, 0x0, 0x0, 0x3f, 0xe1, 0xff, 0xff, 0xff,
    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x3f, 0xff,
    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
    0xff, 0xff, 0x9f, 0xff, 0xe0, 0x0, 0xfc, 0x0,
    0x0, 0x0, 0x7f, 0xe1, 0xff, 0xfc, 0x0, 0x7,
    0x80, 0x0, 0x0, 0xf, 0xf0, 0x3f, 0xff, 0x0,
    0x0, 0xf8, 0x0, 0x0, 0x1, 0xf8, 0x3, 0xff,
    0xc0, 0x0, 0xf, 0x0, 0x0, 0x0, 0x3e, 0x0,
    0x3f, 0xf0, 0x0, 0x1, 0xf0, 0x0, 0x0, 0x7,
    0x0, 0x1, 0xf8, 0x0, 0x0, 0x1e, 0x0, 0x0,
    0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x3, 0xe0,
    0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0,
    0x3c, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0,
    0x0, 0x7, 0xc0, 0x7f, 0xf8, 0x0, 0x0, 0x0,
    0x0, 0x0, 0x0, 0x78, 0xf, 0xff, 0x0, 0x0,
    0x0, 0x0, 0x0, 0x0, 0xf, 0x81, 0xff, 0xe0,
    0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0xf8, 0x3f,
    0xfc, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0xf,
    0xff, 0xff, 0x80, 0x0, 0x0, 0x0, 0x0, 0x0,
    0x1, 0xff, 0xff, 0xf0, 0x0, 0x0, 0x0, 0x0,
    0x0, 0x0, 0x1f, 0xff, 0xfe, 0x0, 0x0, 0x0,
    0x0, 0x0, 0x0, 0x0, 0xff, 0xff, 0xc0, 0x0,
    0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x7f, 0xf8,
    0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0xf,
    0xff, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0,
    0x1, 0xff, 0xe0, 0x0, 0x0, 0x0, 0x0, 0x0,
    0x0, 0x0, 0x3f, 0xfc, 0x0, 0x0
};


/*---------------------
 *  GLYPH DESCRIPTION
 *--------------------*/

static const lv_font_fmt_txt_glyph_dsc_t glyph_dsc[] = {
    {.bitmap_index = 0, .adv_w = 0, .box_w = 0, .box_h = 0, .ofs_x = 0, .ofs_y = 0} /* id = 0 reserved */,
    {.bitmap_index = 0, .adv_w = 1200, .box_w = 75, .box_h = 45, .ofs_x = 0, .ofs_y = 0}
};

/*---------------------
 *  CHARACTER MAPPING
 *--------------------*/



/*Collect the unicode lists and glyph_id offsets*/
static const lv_font_fmt_txt_cmap_t cmaps[] =
{
    {
        .range_start = 62087, .range_length = 1, .glyph_id_start = 1,
        .unicode_list = NULL, .glyph_id_ofs_list = NULL, .list_length = 0, .type = LV_FONT_FMT_TXT_CMAP_FORMAT0_TINY
    }
};



/*--------------------
 *  ALL CUSTOM DATA
 *--------------------*/

#if LV_VERSION_CHECK(8, 0, 0)
/*Store all the custom data of the font*/
static  lv_font_fmt_txt_glyph_cache_t cache;
static const lv_font_fmt_txt_dsc_t font_dsc = {
#else
static lv_font_fmt_txt_dsc_t font_dsc = {
#endif
    .glyph_bitmap = glyph_bitmap,
    .glyph_dsc = glyph_dsc,
    .cmaps = cmaps,
    .kern_dsc = NULL,
    .kern_scale = 0,
    .cmap_num = 1,
    .bpp = 1,
    .kern_classes = 0,
    .bitmap_format = 0,
#if LV_VERSION_CHECK(8, 0, 0)
    .cache = &cache
#endif
};


/*-----------------
 *  PUBLIC FONT
 *----------------*/

/*Initialize a public general font descriptor*/
#if LV_VERSION_CHECK(8, 0, 0)
const lv_font_t A = {
#else
lv_font_t A = {
#endif
    .get_glyph_dsc = lv_font_get_glyph_dsc_fmt_txt,    /*Function pointer to get glyph's data*/
    .get_glyph_bitmap = lv_font_get_bitmap_fmt_txt,    /*Function pointer to get glyph's bitmap*/
    .line_height = 45,          /*The maximum line height required by the font*/
    .base_line = 0,             /*Baseline measured from the bottom of the line*/
#if !(LVGL_VERSION_MAJOR == 6 && LVGL_VERSION_MINOR == 0)
    .subpx = LV_FONT_SUBPX_NONE,
#endif
#if LV_VERSION_CHECK(7, 4, 0) || LVGL_VERSION_MAJOR >= 8
    .underline_position = -21,
    .underline_thickness = 3,
#endif
    .dsc = &font_dsc           /*The custom font data. Will be accessed by `get_glyph_bitmap/dsc` */
};



#endif /*#if A*/

This is so painful and totally incomprehensible.

So, try another approach.

RVB2601 has an rtos example, which uses lvgl. You can display text by creating a label:

static void gui_label_create(void)
{
    lv_obj_t *p = lv_label_create(lv_scr_act(), NULL);
    lv_label_set_long_mode(p, LV_LABEL_LONG_BREAK);
    lv_label_set_align(p, LV_LABEL_ALIGN_CENTER);
    lv_obj_set_pos(p, 0, 0);
    lv_obj_set_size(p, 128, 64);
    lv_label_set_text(p, "A");
}

This displays A.

Since I can't find a way to make the letter bigger, I'll just center it for now:

static void gui_label_create(void)
{
    lv_obj_t *p = lv_label_create(lv_scr_act(), NULL);
    lv_label_set_long_mode(p, LV_LABEL_LONG_BREAK);
    lv_label_set_align(p, LV_LABEL_ALIGN_CENTER);
    lv_obj_set_pos(p, 0, 25);
    lv_obj_set_size(p, 128, 30);
    lv_label_set_text(p, "A");
} 

It looks much better when it is centered.

Next, let A fall from top to bottom. First, define several variables:

lv_obj_t *p;
int y=0;
int time_for_y=0;

In the creation method, you can see that the y coordinate of the label has been changed to the variable y

static void gui_label_create(void)
{
	p = lv_label_create(lv_scr_act(), NULL);
    lv_label_set_long_mode(p, LV_LABEL_LONG_BREAK);
    lv_label_set_align(p, LV_LABEL_ALIGN_CENTER);
    lv_obj_set_pos(p, 0, y);
    lv_obj_set_size(p, 128, 30);
    lv_label_set_text(p, "A");
} 

So, in the main loop:

time_for_y++;
if(time_for_y % 20==0){
	y++;
}

This realizes A falling from top to bottom.

All codes, including last week's:

/*
 * Copyright (C) 2015-2017 Alibaba Group Holding Limited
 */

/*********************
 *      INCLUDES
 *********************/
#define _DEFAULT_SOURCE /* needed for usleep() */
#include <stdio.h>
#include <stdlib.h>
#include <unistd.h>
#include <time.h>
#include <aos/aos.h>
#include "aos/cli.h"

#include "app_init.h"
#include "lvgl.h"
#include "lv_label.h"
#include "oled.h"

/*********************
 *      DEFINES
 *********************/
#define TAG "app"

/**********************
 *      TYPEDEFS
 **********************/

/**********************
 *  STATIC PROTOTYPES
 **********************/
// GUI
static void gui_lvgl_task(void *arg);

/**********************
 *  STATIC VARIABLES
 **********************/

/**********************
 *      MACROS
 **********************/

/**********************
 *   GLOBAL FUNCTIONS
 **********************/

volatile uint32_t g_debug   = 0;
volatile uint32_t g_debug_v = 0;

static void gui_lvgl_task(void *arg);

#include "csi_config.h"
#include "board_config.h"
#include "drv/gpio_pin.h"
#include <drv/pin.h>

static csi_gpio_pin_t key1;
static csi_gpio_pin_t key2;
int button1_pressed = 0;// button1 是否被按下
int button2_pressed = 0;// button2 是否被按下
int time_for_pressed=0;// 按下的时间计数

lv_obj_t *p;
int y=0;
int time_for_y=0;

#include "csi_core.h"
/**
 * main
 */
int main(void)
{
    board_yoc_init();

    aos_task_new("gui", gui_lvgl_task, NULL, 10 * 1024);
    return 0;
}

static void gui_label_create(void)
{
	p = lv_label_create(lv_scr_act(), NULL);
    lv_label_set_long_mode(p, LV_LABEL_LONG_BREAK);
    lv_label_set_align(p, LV_LABEL_ALIGN_CENTER);
    lv_obj_set_pos(p, 0, y);
    lv_obj_set_size(p, 128, 30);
    lv_label_set_text(p, "A");
} 

static void gui_lvgl_task(void *arg)
{
    lv_init();
    /*Initialize for LittlevGL*/
    oled_init();

    /*Select display 1*/
    // demo_create();
    gui_label_create();
	

    csi_pin_set_mux(PA11, PIN_FUNC_GPIO);
    csi_pin_set_mux(PA12, PIN_FUNC_GPIO);
	csi_gpio_pin_init(&key1, PA11);
    csi_gpio_pin_dir(&key1, GPIO_DIRECTION_INPUT);
    csi_gpio_pin_init(&key2, PA12);
    csi_gpio_pin_dir(&key2, GPIO_DIRECTION_INPUT);
	
    while (1) {
		time_for_y++;
		if(time_for_y % 20==0){
			y++;
		}
		
		lv_obj_set_pos(p, 0, y);
        /* Periodically call the lv_task handler.
         * It could be done in a timer interrupt or an OS task too.*/
        lv_task_handler();
		
		if(GPIO_PIN_LOW == csi_gpio_pin_read(&key1)) {
			//当低电平（按下时）
			if(button1_pressed==0){
				// 如果button1的状态没有被按下，则设为按下
				button1_pressed = 1;
			}
			if(button1_pressed==1){
				//如果button1的状态是按下，则计时
				time_for_pressed++;
			}
		}
		
		if(GPIO_PIN_HIGH == csi_gpio_pin_read(&key1)) {
			if(button1_pressed==1){
				
//				printf("%d",time_for_pressed);
				//通过判断time_for_pressed的大小，得出是长按还是短按
				if(time_for_pressed>20){
					//长按
					printf("-");
				}else{
					//短按
					printf(".");
				}
				time_for_pressed=0;//恢复计数
				button1_pressed = 0;
			}
		}
		
		if(GPIO_PIN_LOW == csi_gpio_pin_read(&key2)) {
			if(button2_pressed==0){
				button2_pressed=1;
			}
			
		}
		
		if(GPIO_PIN_HIGH == csi_gpio_pin_read(&key2)) {
			if(button2_pressed==1){
				printf("\n");
				button2_pressed=0;
			}
		}
		
        aos_msleep(5);
        lv_tick_inc(1);
    }
}

Finally put an effect:

nmg

Is this background automatically like that if you don't set it?

Looks like it's going to break down.

cybertovsky

nmg posted on 2022-4-2 09:57 This background, is it like that automatically if you don't set it? It looks like it's going to break

Are you talking about the flickering of the screen? It is normal to the naked eye, but it flickers after the phone is recorded.