firmware: Semi-working emoji

firmware/.gitignore

@@ -5,3 +5,5 @@ sdkconfig.old
 *.swp
 /main/font/*.c
 /main/img/*.c
+/assets/moon.png
+/assets/star.png

firmware/default.nix

@@ -2,43 +2,6 @@
   perSystem = { libMy, pkgs, ... }:
   let
     genImgsPy = pkgs.python3.withPackages (ps: with ps; [ pillow ]);
-    genImgs = pkgs.writeScriptBin "gen-imgs" ''
-      #!${genImgsPy}/bin/python
-      import itertools
-      import os
-
-      from PIL import Image
-
-      imgs = ['bg.png']
-      for fname in imgs:
-        with Image.open(os.path.join('assets/', fname)) as img:
-          w = img.width
-          h = img.height
-
-          data = [(r >> 3) << 11 | (g >> 2) << 5 | (b >> 3) for r, g, b in img.getdata()]
-
-        basename = os.path.splitext(fname)[0]
-        with open(os.path.join('main/img/', basename + '.c'), 'w') as f:
-          f.write(
-            '#include <inttypes.h>\n\n'
-            '#include "lvgl.h"\n\n'
-            'static const uint16_t _data[] = {\n')
-
-          for group in itertools.batched(data, 20):
-            f.write('  ' + ' '.join(map(lambda i: f'{i:#x},', group)) + '\n')
-
-          f.write('};\n\n')
-
-          f.write(
-            f'const lv_image_dsc_t ui_img_{basename} = {{\n'
-             '  .header.magic = LV_IMAGE_HEADER_MAGIC,\n'
-             '  .header.cf = LV_COLOR_FORMAT_RGB565,\n'
-            f'  .header.w = {w},\n'
-            f'  .header.h = {h},\n'
-             '  .data_size = sizeof(_data) * 2,\n'
-             '  .data = (const uint8_t *)_data,\n'
-             '};\n')
-    '';
   in
   {
     devenv.shells.firmware = libMy.withRootdir {
@@ -46,7 +9,7 @@
         esp-idf-esp32s3
         picocom
         lv_font_conv
-        genImgs
+        imagemagick
       ];
 
       env = {
@@ -58,11 +21,17 @@
           idf.py set-target esp32s3
         '';
         gen-fonts.exec = ''
-          for s in 120; do
+          for s in 40 180; do
             DEBUG='*' lv_font_conv --font assets/Tungsten-Bold.ttf --bpp 4 --size $s -r 0x20-0x7F --no-compress \
               --format lvgl --lv-include lvgl.h --lv-font-name lv_font_tungsten_"$s" -o main/font/tungsten_"$s".c
           done
         '';
+        gen-imgs.exec = ''
+          magick assets/moon_orig.png -resize 180x180 assets/moon.png
+          magick assets/star_orig.png -resize 180x180 assets/star.png
+
+          ${genImgsPy}/bin/python gen-imgs.py
+        '';
       };
     };
   };

firmware/gen-imgs.py

@@ -0,0 +1,54 @@
+#!/usr/bin/env python3
+import itertools
+import os
+import struct
+
+from PIL import Image
+
+def rgb2h(r, g, b):
+  return (r >> 3) << 11 | (g >> 2) << 5 | (b >> 3)
+
+def bytes_line(bs):
+  return '  ' + ' '.join(map(lambda i: f'{i:#x},', bs)) + '\n'
+
+imgs = ['bg.png', 'moon.png', 'star.png']
+for fname in imgs:
+  alpha = []
+  with Image.open(os.path.join('assets/', fname)) as img:
+    w = img.width
+    h = img.height
+
+    if img.has_transparency_data:
+      has_alpha = True
+      data = [rgb2h(r, g, b) for r, g, b, _ in img.getdata()]
+      alpha = [a for _, _, _, a in img.getdata()]
+    else:
+      data = [rgb2h(r, g, b) for r, g, b in img.getdata()]
+
+  basename = os.path.splitext(fname)[0]
+  with open(os.path.join('main/img/', basename + '.c'), 'w') as f:
+    f.write(
+      '#include <inttypes.h>\n\n'
+      '#include "lvgl.h"\n\n'
+      'static const uint8_t _data[] = {\n')
+
+    for group in itertools.batched(data, 10):
+      bs = bytearray()
+      for c in group:
+        bs += struct.pack('<H', c)
+
+      f.write(bytes_line(bs))
+    for group in itertools.batched(alpha, 20):
+      f.write(bytes_line(group))
+
+    f.write('};\n\n')
+
+    f.write(
+      f'const lv_image_dsc_t ui_img_{basename} = {{\n'
+       '  .header.magic = LV_IMAGE_HEADER_MAGIC,\n'
+      f'  .header.cf = LV_COLOR_FORMAT_RGB565{"A8" if alpha else ""},\n'
+      f'  .header.w = {w},\n'
+      f'  .header.h = {h},\n'
+       '  .data_size = sizeof(_data),\n'
+       '  .data = _data,\n'
+       '};\n')

firmware/main/CMakeLists.txt

@@ -1,3 +1,3 @@
 idf_component_register(
-  SRCS "valconomy.c" "ui.c" "lcd.c" "usb.c" "font/tungsten_120.c" "img/bg.c"
+  SRCS "valconomy.c" "ui.c" "lcd.c" "usb.c" "font/tungsten_40.c" "font/tungsten_180.c" "img/bg.c" "img/moon.c" "img/star.c"
   INCLUDE_DIRS ".")

firmware/main/lcd.c

@@ -26,20 +26,38 @@
 #define LVGL_TASK_PRIORITY   2
 #define LVGL_TASK_STACK_SIZE (8 * 1024)
 
+#define WAIT_VSYNC 0
+
 static const char *TAG = "valconomy-lcd";
 
 // LVGL library is not thread-safe, we will call LVGL APIs from different tasks, so use a mutex to protect it
 static SemaphoreHandle_t lvgl_mtx = NULL;
+#if WAIT_VSYNC
+static SemaphoreHandle_t sem_vsync_end = NULL;
+static SemaphoreHandle_t sem_gui_ready = NULL;
+#endif
 
 static bool val_on_vsync(esp_lcd_panel_handle_t panel, const esp_lcd_rgb_panel_event_data_t *event_data, void *user_ctx) {
-  return false;
+  BaseType_t high_task_awoken = pdFALSE;
+#if WAIT_VSYNC
+  if (xSemaphoreTakeFromISR(sem_gui_ready, &high_task_awoken) == pdTRUE) {
+    xSemaphoreGiveFromISR(sem_vsync_end, &high_task_awoken);
+  }
+#endif
+
+  lv_disp_flush_ready(user_ctx);
+  return high_task_awoken == pdTRUE;
 }
 
 static void val_lvgl_flush_cb(lv_display_t *disp, const lv_area_t *area, uint8_t *px_map) {
   esp_lcd_panel_handle_t panel_handle = lv_display_get_user_data(disp);
+#if WAIT_VSYNC
+  xSemaphoreGive(sem_gui_ready);
+  xSemaphoreTake(sem_vsync_end, portMAX_DELAY);
+#endif
+
   // pass the draw buffer to the driver
   esp_lcd_panel_draw_bitmap(panel_handle, area->x1, area->y1, area->x2 + 1, area->y2 + 1, px_map);
-  lv_disp_flush_ready(disp);
 }
 
 static void val_increase_lvgl_tick(void *arg) {
@@ -225,6 +243,13 @@ lv_display_t *val_setup_lvgl(esp_lcd_panel_handle_t lcd_panel, esp_lcd_touch_han
   // set the callback which can copy the rendered image to an area of the display
   lv_display_set_flush_cb(display, val_lvgl_flush_cb);
 
+#if WAIT_VSYNC
+  sem_vsync_end = xSemaphoreCreateBinary();
+  assert(sem_vsync_end);
+  sem_gui_ready = xSemaphoreCreateBinary();
+  assert(sem_gui_ready);
+#endif
+
   ESP_LOGI(TAG, "Register event callbacks");
   esp_lcd_rgb_panel_event_callbacks_t cbs = {
     .on_vsync = val_on_vsync,

firmware/main/ui.c

@@ -5,9 +5,31 @@
 static const lv_font_t *font_normal = &lv_font_montserrat_24;
 
 static lv_color_t color_primary, color_secondary;
-static lv_color_t color_text_hero;
+static lv_color_t color_text_hero, color_text_subtitle;
 
-static lv_style_t s_hero;
+static lv_style_t s_hero, s_subtitle;
+
+static lv_obj_t *o_container = NULL;
+
+static lv_anim_timeline_t *at_active = NULL;
+static lv_obj_t *o_active = NULL;
+
+static const void* imgfont_get_path(
+    const lv_font_t *font, uint32_t unicode, uint32_t unicode_next, int32_t *offset_y, void *user_data) {
+  LV_UNUSED(font);
+  LV_UNUSED(unicode_next);
+  LV_UNUSED(offset_y);
+  LV_UNUSED(user_data);
+
+  switch (unicode) {
+  case 0x1F319:
+    return &ui_img_moon;
+  case 0x2B50:
+    return &ui_img_star;
+  default:
+    return NULL;
+  }
+}
 
 static void b_cfg_cb(lv_event_t *e) {
   lv_obj_t *box = lv_msgbox_create(NULL);
@@ -16,21 +38,94 @@ static void b_cfg_cb(lv_event_t *e) {
   lv_msgbox_add_close_button(box);
 }
 
-static void ui_home() {
+static void setup_next_state() {
-  lv_obj_t *i_bg = lv_image_create(lv_screen_active());
+  if (at_active) {
-  lv_image_set_src(i_bg, &ui_img_bg);
+    lv_anim_timeline_delete(at_active);
+    at_active = NULL;
+  }
+  if (o_active) {
+    lv_obj_delete(o_active);
+    o_active = NULL;
+  }
 
-  lv_obj_t *l_test = lv_label_create(lv_screen_active());
+  o_active = lv_obj_create(o_container);
-  lv_obj_add_style(l_test, &s_hero, 0);
+  lv_obj_center(o_active);
-  lv_label_set_text(l_test, "VAL TIME");
+  lv_obj_set_style_bg_opa(o_active, LV_OPA_0, 0);
+  lv_obj_set_style_border_width(o_active, 0, 0);
+  lv_obj_set_size(o_active, lv_pct(100), lv_pct(100));
 
-  lv_obj_t *b_cfg = lv_button_create(lv_screen_active());
+  at_active = lv_anim_timeline_create();
-  lv_obj_align(b_cfg, LV_ALIGN_BOTTOM_RIGHT, -10, -10);
+}
-  lv_obj_add_event_cb(b_cfg, b_cfg_cb, LV_EVENT_CLICKED, NULL); 
 
-  lv_obj_t *l_cfg = lv_label_create(b_cfg);
+static void anim_y_cb(void *var, int32_t v) {
-  lv_label_set_text(l_cfg, LV_SYMBOL_SETTINGS);
+  lv_obj_set_y(var, v);
-  lv_obj_center(l_cfg);
+}
+static void anim_opa_cb(void *var, int32_t v) {
+  lv_obj_set_style_opa(var, v, 0);
+}
+static void anim_val_time_text(lv_anim_t *anim) {
+  lv_label_set_text_static(anim->var, "VAL TIME?");
+}
+
+void val_ui_none() {
+  setup_next_state();
+
+  lv_obj_t *l_main = lv_label_create(o_active);
+  lv_obj_add_style(l_main, &s_hero, 0);
+  lv_obj_center(l_main);
+  lv_label_set_text_static(l_main, "HELLO \U0001F319\u2B50!");
+
+  lv_obj_t *l_subtitle = lv_label_create(o_active);
+  lv_obj_add_style(l_subtitle, &s_subtitle, 0);
+  lv_obj_center(l_subtitle);
+  lv_label_set_text_static(l_subtitle, "SOME VAL IS ALWAYS ON THE MENU...");
+
+  lv_obj_update_layout(o_active);
+  lv_obj_set_pos(
+    l_subtitle, -(lv_obj_get_width(l_main) - lv_obj_get_width(l_subtitle)) / 2, lv_obj_get_height(l_main) / 2);
+
+  // Animations
+  lv_anim_t a_hello_in;
+  lv_anim_init(&a_hello_in);
+  lv_anim_set_var(&a_hello_in, l_main);
+  lv_anim_set_values(
+    &a_hello_in,
+    (lv_obj_get_height(o_container) - lv_obj_get_height(l_main)) / 2, 0);
+  lv_anim_set_exec_cb(&a_hello_in, anim_y_cb);
+  lv_anim_set_path_cb(&a_hello_in, lv_anim_path_ease_in);
+  lv_anim_set_duration(&a_hello_in, 500);
+
+  lv_anim_t a_sub;
+  lv_anim_init(&a_sub);
+  lv_anim_set_var(&a_sub, l_subtitle);
+  lv_anim_set_values(&a_sub, 0, 255);
+  lv_anim_set_exec_cb(&a_sub, anim_opa_cb);
+  lv_anim_set_path_cb(&a_sub, lv_anim_path_linear);
+  lv_anim_set_duration(&a_sub, 750);
+
+  lv_anim_t a_hello_out;
+  lv_anim_init(&a_hello_out);
+  lv_anim_set_var(&a_hello_out, l_main);
+  lv_anim_set_values(&a_hello_out, 255, 0);
+  lv_anim_set_exec_cb(&a_hello_out, anim_opa_cb);
+  lv_anim_set_path_cb(&a_hello_out, lv_anim_path_linear);
+  lv_anim_set_duration(&a_hello_out, 500);
+
+  lv_anim_t a_val;
+  lv_anim_init(&a_val);
+  lv_anim_set_early_apply(&a_val, false);
+  lv_anim_set_var(&a_val, l_main);
+  lv_anim_set_values(&a_val, 0, 255);
+  lv_anim_set_start_cb(&a_val, anim_val_time_text);
+  lv_anim_set_exec_cb(&a_val, anim_opa_cb);
+  lv_anim_set_path_cb(&a_val, lv_anim_path_linear);
+  lv_anim_set_duration(&a_val, 500);
+
+  lv_anim_timeline_add(at_active, 0, &a_hello_in);
+  lv_anim_timeline_add(at_active, 0, &a_sub);
+  lv_anim_timeline_add(at_active, 750, &a_hello_out);
+  lv_anim_timeline_add(at_active, 1000, &a_val);
+  // lv_anim_timeline_start(at_active);
 }
 
 void val_lvgl_ui(lv_display_t *disp) {
@@ -38,6 +133,7 @@ void val_lvgl_ui(lv_display_t *disp) {
   color_secondary = lv_color_hex(0xf7518f);
 
   color_text_hero = lv_palette_lighten(LV_PALETTE_GREY, 2);
+  color_text_subtitle = lv_palette_darken(LV_PALETTE_GREY, 2);
 
   // init default theme
   lv_theme_default_init(
@@ -46,9 +142,37 @@ void val_lvgl_ui(lv_display_t *disp) {
     font_normal);
   // lv_sysmon_hide_performance(disp);
 
+  lv_font_t *f_hero_emoji = lv_imgfont_create(180, imgfont_get_path, NULL);
+  assert(f_hero_emoji);
+  f_hero_emoji->fallback = &lv_font_tungsten_180;
+
   lv_style_init(&s_hero);
-  lv_style_set_text_font(&s_hero, &lv_font_tungsten_120);
+  lv_style_set_text_font(&s_hero, f_hero_emoji);
   lv_style_set_text_color(&s_hero, color_text_hero);
 
-  ui_home();
+  lv_style_init(&s_subtitle);
+  lv_style_set_text_font(&s_subtitle, &lv_font_tungsten_40);
+  lv_style_set_text_color(&s_subtitle, color_text_subtitle);
+
+  // Background
+  lv_obj_t *i_bg = lv_image_create(lv_screen_active());
+  lv_image_set_src(i_bg, &ui_img_bg);
+
+  // Content container
+  o_container = lv_obj_create(lv_screen_active());
+  lv_obj_set_style_bg_opa(o_container, LV_OPA_0, 0);
+  lv_obj_set_style_border_width(o_container, 0, 0);
+  lv_obj_set_style_pad_all(o_container, 0, 0);
+  lv_obj_set_size(o_container, lv_pct(100), lv_pct(100));
+
+  // Settings button
+  lv_obj_t *b_cfg = lv_button_create(lv_screen_active());
+  lv_obj_align(b_cfg, LV_ALIGN_BOTTOM_RIGHT, -10, -10);
+  lv_obj_add_event_cb(b_cfg, b_cfg_cb, LV_EVENT_CLICKED, NULL);
+
+  lv_obj_t *l_cfg = lv_label_create(b_cfg);
+  lv_label_set_text(l_cfg, LV_SYMBOL_SETTINGS);
+  lv_obj_center(l_cfg);
+
+  val_ui_none();
 }

firmware/main/ui.h

@@ -2,8 +2,11 @@
 
 #include "lvgl.h"
 
-LV_FONT_DECLARE(lv_font_tungsten_120)
+LV_FONT_DECLARE(lv_font_tungsten_40)
+LV_FONT_DECLARE(lv_font_tungsten_180)
 
 LV_IMAGE_DECLARE(ui_img_bg);
+LV_IMAGE_DECLARE(ui_img_moon);
+LV_IMAGE_DECLARE(ui_img_star);
 
 void val_lvgl_ui(lv_display_t *disp);

firmware/main/usb.c

@@ -7,6 +7,7 @@
 
 #include "common.h"
 #include "usb.h"
+#include "lcd.h"
 
 #define TUSB_DESC_TOTAL_LEN (TUD_CONFIG_DESC_LEN + TUD_HID_INOUT_DESC_LEN)
 

firmware/sdkconfig.defaults

@@ -7,6 +7,7 @@ CONFIG_ESPTOOLPY_FLASHMODE_QIO=y
 CONFIG_ESPTOOLPY_FLASHFREQ_120M=y
 CONFIG_ESPTOOLPY_FLASHSIZE_8MB=y
 CONFIG_PARTITION_TABLE_CUSTOM=y
+CONFIG_COMPILER_OPTIMIZATION_PERF=y
 CONFIG_USJ_ENABLE_USB_SERIAL_JTAG=n
 CONFIG_SPIRAM=y
 CONFIG_SPIRAM_MODE_OCT=y
@@ -26,4 +27,5 @@ CONFIG_LV_LOG_PRINTF=y
 CONFIG_LV_FONT_MONTSERRAT_24=y
 CONFIG_LV_USE_SYSMON=y
 CONFIG_LV_USE_PERF_MONITOR=y
+CONFIG_LV_USE_IMGFONT=y
 CONFIG_IDF_EXPERIMENTAL_FEATURES=y