navigation: Move font to external memory (#1838)

The TTF font used by the navigation app is ~20KB and is stored in internal flash memory.
To free this space, the TTF font is now converted in 2 "atlas pictures" (pictures that contain multiple concatenated images) stored in the external flash memory. The navigation app now accesses one of those 2 files and apply an offset to display the desired picture.

The corresponding documentation has also been updated.

Add comments about the layout of the pictures that contain the icon and about the indexing of those icons.

In documentation (buildAndProgram.md), edit the section about the debug compilation mode. Remove the part about removing the Navigation app to free some memory (since it's not relevant anymore) and explain how to selectively build parts of the firmware in Debug mode.

3 files changed, 15 insertions, 12 deletions

diff --git a/src/displayapp/fonts/CMakeLists.txt b/src/displayapp/fonts/CMakeLists.txt
index 5a32151e..22627efc 100644
--- a/src/displayapp/fonts/CMakeLists.txt
+++ b/src/displayapp/fonts/CMakeLists.txt
@@ -1,5 +1,5 @@
 set(FONTS jetbrains_mono_42 jetbrains_mono_76 jetbrains_mono_bold_20
-   jetbrains_mono_extrabold_compressed lv_font_navi_80 lv_font_sys_48
+   jetbrains_mono_extrabold_compressed lv_font_sys_48
    open_sans_light fontawesome_weathericons)
 find_program(LV_FONT_CONV "lv_font_conv" NO_CACHE REQUIRED
    HINTS "${CMAKE_SOURCE_DIR}/node_modules/.bin")
diff --git a/src/displayapp/fonts/README.md b/src/displayapp/fonts/README.md
index b2669a78..bcc2d49c 100644
--- a/src/displayapp/fonts/README.md
+++ b/src/displayapp/fonts/README.md
@@ -33,3 +33,17 @@ and for each font there is:
 ### Navigation font
 
 `navigtion.ttf` is created with the web app [icomoon](https://icomoon.io/app) by importing the svg files from `src/displayapp/icons/navigation/unique` and generating the font. `lv_font_navi_80.json` is a project file for the site, which you can import to add or remove icons.
+
+To save space in the internal flash memory, the navigation icons are now moved into the external flash memory. To do this, the TTF font is converted into pictures (1 for each symbol). Those pictures are then concatenated into 2 big pictures (we need two files since LVGL supports maximum 2048px width/height). At runtime, a map is used to locate the desired icon in the corresponding file at a specific offset. 
+
+Here is the command to convert the TTF font in PNG picture:
+
+```shell
+convert -background none -fill white -font navigation.ttf -pointsize 80 -gravity center label:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"  navigation0.png
+
+convert -background none -fill white -font navigation.ttf -pointsize 80 -gravity center label:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"  navigation1.png
+```
+
+*Please note that the characters after `label:` are UTF-8 characters and might not be displayed correctly in this document.*
+
+The characters in the TTF font range from `0xEEA480` to `0xEEA4A9`. Characters from `0xEEA480` to `0xEEA498` are stored in `navigation0.png` and the others in `navigation1.png`. Each character is 80px height so displaying a specific character consists in multiplying its index in the file by -80 and use this value as the offset when calling `lv_img_set_offset_y()`.
diff --git a/src/displayapp/fonts/fonts.json b/src/displayapp/fonts/fonts.json
index e65f6dd4..bcfc365f 100644
--- a/src/displayapp/fonts/fonts.json
+++ b/src/displayapp/fonts/fonts.json
@@ -64,17 +64,6 @@
       "bpp": 1,
       "size": 48
    },
-   "lv_font_navi_80": {
-      "sources": [
-         {
-            "file": "navigation.ttf",
-            "range": "0xe900-0xe929"
-         }
-      ],
-      "bpp": 2,
-      "size": 80,
-      "compress": true
-   },
    "fontawesome_weathericons": {
       "sources": [
          {