Lab - Parte 1

Background

Notem que a interface a ser recriada possui fundo preto, para atingirmos tal objetivo com o LVGL iremos modificar a configuração padrão do LVGL que está localizada em config/lv_conf.h. Neste arquivo procure pelo define LV_THEME_DEFAULT_DARK e modifique para 1.

Tamanho da fonte

Vocês notaram que a fonte padrão do LCD está meio pequena? Conseguimos ajustar isso no LVGL escolhendo uma fonte maior. O LVGL disponibiliza alguns tamanhos de fonte de uma mesma classe (MontSerrat). A lista de fontes está no arquivo de configuração src/config/lv_conf.h. Neste arquivo você deve encontrar algo como:

289
290
291
292
293
294
295
296
297
298
299
300

/*Montserrat fonts with ASCII range and some symbols using bpp = 4
 *https://fonts.google.com/specimen/Montserrat*/
#define LV_FONT_MONTSERRAT_8  0
#define LV_FONT_MONTSERRAT_10 0
#define LV_FONT_MONTSERRAT_12 0
#define LV_FONT_MONTSERRAT_14 1
#define LV_FONT_MONTSERRAT_16 0
#define LV_FONT_MONTSERRAT_18 0
#define LV_FONT_MONTSERRAT_20 0
#define LV_FONT_MONTSERRAT_22 0
#define LV_FONT_MONTSERRAT_24 0
...

Para recriar a interface iremos usar um tamanho de fonte um pouco maior que o padrão (14) do LVGL, para isso iremos utilizar a fonte de tamanho 24. Isso é feito em duas etapas:

1. Ativando a fonte no arquivo de configuração
2. Configurando a nova fonte como padrão

Identificando widgets

A primeira etapa após ter a interface definida é identificar quais widgets podem ser utilizados para montar a interface.

Botões

O lv_button permite que criemos um ou mais botões, os botões podem ou não ter um label associado a ele. Podemos associar para cada botão uma função de handler que será chamada assim que um evento neste botão for detectado, a seguir alguns eventos que podem ser gerados por um objeto:

• LV_EVENT_PRESSED An object has been pressed
• LV_EVENT_PRESSING An object is being pressed (called continuously while pressing)
• LV_EVENT_PRESS_LOST An object is still being pressed but slid cursor/finger off of the object
• LV_EVENT_SHORT_CLICKED An object was pressed for a short period of time, then released. Not called if scrolled.
• LV_EVENT_LONG_PRESSED An object has been pressed for at least the long_press_time specified in the input device driver. Not called if scrolled.
• A lista completa pode ser acessada na página de Events: https://docs.lvgl.io/master/overview/event.html

O exemplo fornecido na função (lv_ex_btn_1) cria um botão chamado btn1 e o alinha no centro da tela, a função event_handler foi associada como callback deste widget, assim que um evento ocorrer a mesma será executada.

lv_obj_t * btn1 = lv_btn_create(lv_scr_act());
lv_obj_add_event_cb(btn1, event_handler, LV_EVENT_ALL, NULL);
lv_obj_align(btn1, LV_ALIGN_CENTER, 0, -40);

Depois cria um label e o associa ao botão:

label = lv_label_create(btn1);
lv_label_set_text(label, "Teste");
lv_obj_center(label);

Conforme a documentação do lvgl para objetos Podemos alinhar um objeto em vários locais diferentes na tela. Isso é feito pela função lv_obj_align(obj, obj_ref, LV_ALIGN_________, x_ofs, y_ofs) que recebe como parâmetro:

• obj is the object to align.
• obj_ref is a reference object. obj will be aligned to it. If obj_ref = NULL, then the parent of obj will be used.
• The third argument is the type of alignment. These are the possible options:

Extraído da documentação.

Botão de power

Agora vamos criar os botões da interface proposta, primeiro iremos criar o botão de power modificando o botão atual de teste.

1. Posição

Na primeira etapa iremos alinhar o botão no canto inferior esquerdo conforme figura a seguir:

Um objeto pode ser alinhado com relação a um screen ou a um outro objetivo de referência. Nesse caso vamos usar o botão de power alinhado ao canto inferior da tela.

• Para alinhar com relação a tela usar: lv_obj_align(obj, align, x, y);
• Para alinhar com relação a outro objeto usar: lv_obj_align_to(obj_to_align, reference_obj, align, x, y);

Os parâmetros X e Y são um deslocamento do alinhamento e o argumento aling pode ser qualquer uma dos itens a seguir:

    +-------++-------+  
    |  btn1 ||  btn2 | 
    |       ||       | 
    +-------++-------+ 

    +-------+ 
    |  btn1 | 
    |       | 
    +-------+ +-------+
              |  btn2 |
              |       |
              +-------+

2. Label/ Símbolo

No nosso código colocamos um "Label" dentro do objeto do botão, é por isso que aparecer o texto "Teste" no botão:

labelBtn1 = lv_label_create(btn1);
lv_label_set_text(labelBtn1, "[  " LV_SYMBOL_POWER);
lv_obj_center(labelBtn1);

Notem que utilizamos o lv_lavel_create e passamos o btn1 para a funcão. Isso faz com que o label pertenća ao objeto btn1.

Agora vamos trocar o label do btn1 para ser mais condizente com o do nosso modelo de referência. No LVGL podemos utilizar alguns símbolos já pré definidos, os detalhes estão na documentação de fonts e listados aqui:

Notem que podemos usar o símbolo LV_SYMBOL_POWER para recriar o botão da interface planejada, para isso é necessário alterar a linha que estamos escrevendo Teste para usar o símbolo em questão. Por exemplo, para adicionarmos o [ seguido do símbolo de power:

lv_label_set_text(labelBtn1, "[  " LV_SYMBOL_POWER);

Vocês podem definir o label como variável global, permitindo assim que outra parte do código altera o valor escrito.

// global
static  lv_obj_t * labelBtn1;

    +--------+  
    |        | 
    | [   ⏻ | 
    |        | 
    +--------+ 
       ^        
       | Botão

    +-------++-------+  
    |       ||       | 
    |   [   ||   ⏻  | 
    |       ||       | 
    +-------++-------+ 
       ^         ^
       |         | Botão
       | Apenas um label 

3. Formatando

Iremos agora criar um estilo próprio e aplicar no botão, um estilo pode conter várias configurações de Tema para um objeto (ou para vários). O exemplo a seguir cria um style com um fundo ROXO e uma borda VERDE.

void lv_termostato(void) {
    static lv_style_t style;
    lv_style_init(&style);
    lv_style_set_bg_color(&style, lv_palette_main(LV_PALETTE_PURPLE));
    lv_style_set_border_color(&style, lv_palette_main(LV_PALETTE_GREEN));
    lv_style_set_border_width(&style, 5);

E então aplicamos o novo estilo ao botão:

    lv_obj_t * btn1 = lv_btn_create(lv_scr_act());
    lv_obj_add_event_cb(btn1, event_handler, LV_EVENT_ALL, NULL);
    lv_obj_align(btn1, LV_ALIGN_BOTTOM_LEFT, 0, 0);
+   lv_obj_add_style(btn1, &style, 0);

Também podemos mudar o tamanho de um objeto, como no exemplo a seguir:

    lv_obj_set_width(btn1, 60);  lv_obj_set_height(btn1, 60);

Demais botões

Tarefa: Demais botões

Agora você é capaz de recriar os demais botões da interface, para cada botão crie uma função de callback (similar ao event_handler).

Implemente:

• M (btnMenu/ menu_handler): Menu
• Clock (btnClk/ clk_handler): Relógio
• ^ (btnUp/ up_handler): Aumentar (temperatura/ alarme):
• v (btnDown/ down_handler): Baixar (temperatura/ alarme)

Lembre de testar na placa! Vai precisar de ajustes.

Tip

Handlers:

• Crie um handler diferente por botão.

Alinhamento:

• Pense em como usar o alinhamento a seu favor.

Símbolos:

• Relógio: Você pode usar um outro símbolo no lugar.
• v, ^: Tem símbolos prontos para isso

Resultado esperado:

O seu pode ficar diferente, mas lembre que a ideia é chegar o mais perto do que da nossa referencia!

Meu	Referencia