Merge branch 'main' into watchSettingScreen

.github/workflows/main.yml

@@ -61,10 +61,10 @@ jobs:
   build-simulator:
     runs-on: ubuntu-22.04
     steps:
-    - name: Install SDL2 development package
+    - name: Install SDL2 and libpng development package
       run:  |
         sudo apt-get update
-        sudo apt-get -y install libsdl2-dev
+        sudo apt-get -y install libsdl2-dev libpng-dev
 
     - name: Install Ninja
       run:  |
@@ -82,7 +82,7 @@ jobs:
     - name: Get InfiniSim repo
       run:  |
         git clone https://github.com/InfiniTimeOrg/InfiniSim.git --depth 1 --branch main
-        git -C InfiniSim submodule update --init lv_drivers libpng
+        git -C InfiniSim submodule update --init lv_drivers
 
     - name: CMake
       # disable BUILD_RESOURCES as this is already done when building the firmware

doc/buildAndProgram.md

@@ -48,7 +48,17 @@ CMake configures the project according to variables you specify the command line
 #### (\*) Note about **CMAKE_BUILD_TYPE**
 By default, this variable is set to *Release*. It compiles the code with size and speed optimizations. We use this value for all the binaries we publish when we [release](https://github.com/InfiniTimeOrg/InfiniTime/releases) new versions of InfiniTime.
 
-The *Debug* mode disables all optimizations, which makes the code easier to debug. However, the binary size will likely be too big to fit in the internal flash memory. If you want to build and debug a *Debug* binary, you'll need to disable some parts of the code. For example, the icons for the **Navigation** app use a lot of memory space. You can comment the content of `m_iconMap` in the [Navigation](https://github.com/InfiniTimeOrg/InfiniTime/blob/main/src/displayapp/screens/Navigation.h#L148) application to free some memory.
+The *Debug* mode disables all optimizations, which makes the code easier to debug. However, the binary size will likely be too big to fit in the internal flash memory. If you want to build and debug a *Debug* binary, you can disable some parts of the code that are not needed for the test you want to achieve. You can also apply the *Debug* mode selectively on parts of the application by applying the `DEBUG_FLAGS` only for the part (CMake target) you want to debug. For example, let's say you want to debug code related to LittleFS, simply set the compilation options for the RELEASE configuration of the target to `DEBUG_FLAGS` (in `src/CMakeLists.txt`). This will force the compilation of that target in *Debug* mode while the rest of the project will be built in *Release* mode. Example:
+
+```
+target_compile_options(littlefs PRIVATE
+        ${COMMON_FLAGS}
+        $<$<CONFIG:DEBUG>: ${DEBUG_FLAGS}>
+        $<$<CONFIG:RELEASE>: ${DEBUG_FLAGS}> # Change from RELEASE_FLAGS to DEBUG_FLAGS
+        $<$<COMPILE_LANGUAGE:CXX>: ${CXX_FLAGS}>
+        $<$<COMPILE_LANGUAGE:ASM>: ${ASM_FLAGS}>
+        )
+```
 
 #### (\*\*) Note about **BUILD_DFU**
 DFU files are the files you'll need to install your build of InfiniTime using OTA (over-the-air) mechanism. To generate the DFU file, the Python tool [adafruit-nrfutil](https://github.com/adafruit/Adafruit_nRF52_nrfutil) is needed on your system. Check that this tool is properly installed before enabling this option.

src/displayapp/DisplayApp.cpp

@@ -404,7 +404,7 @@ void DisplayApp::LoadScreen(Apps app, DisplayApp::FullRefreshDirections directio
   switch (app) {
     case Apps::Launcher:
       currentScreen =
-        std::make_unique<Screens::ApplicationList>(this, settingsController, batteryController, bleController, dateTimeController);
+        std::make_unique<Screens::ApplicationList>(this, settingsController, batteryController, bleController, dateTimeController, filesystem);
       break;
     case Apps::Motion:
       // currentScreen = std::make_unique<Screens::Motion>(motionController);

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")

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()`.

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": [
          {

src/displayapp/screens/ApplicationList.cpp

@@ -6,8 +6,6 @@
 
 using namespace Pinetime::Applications::Screens;
 
-constexpr std::array<Tile::Applications, ApplicationList::applications.size()> ApplicationList::applications;
-
 auto ApplicationList::CreateScreenList() const {
   std::array<std::function<std::unique_ptr<Screen>()>, nScreens> screens;
   for (size_t i = 0; i < screens.size(); i++) {
@@ -22,12 +20,14 @@ ApplicationList::ApplicationList(Pinetime::Applications::DisplayApp* app,
                                  Pinetime::Controllers::Settings& settingsController,
                                  const Pinetime::Controllers::Battery& batteryController,
                                  const Pinetime::Controllers::Ble& bleController,
-                                 Controllers::DateTime& dateTimeController)
+                                 Controllers::DateTime& dateTimeController,
+                                 Pinetime::Controllers::FS& filesystem)
   : app {app},
     settingsController {settingsController},
     batteryController {batteryController},
     bleController {bleController},
     dateTimeController {dateTimeController},
+    filesystem{filesystem},
     screens {app, settingsController.GetAppMenu(), CreateScreenList(), Screens::ScreenListModes::UpDown} {
 }
 

src/displayapp/screens/ApplicationList.h

@@ -10,6 +10,7 @@
 #include "components/battery/BatteryController.h"
 #include "displayapp/screens/Symbols.h"
 #include "displayapp/screens/Tile.h"
+#include "displayapp/screens/Navigation.h"
 
 namespace Pinetime {
   namespace Applications {
@@ -20,7 +21,8 @@ namespace Pinetime {
                                  Pinetime::Controllers::Settings& settingsController,
                                  const Pinetime::Controllers::Battery& batteryController,
                                  const Pinetime::Controllers::Ble& bleController,
-                                 Controllers::DateTime& dateTimeController);
+                                 Controllers::DateTime& dateTimeController,
+                                 Pinetime::Controllers::FS& filesystem);
         ~ApplicationList() override;
         bool OnTouchEvent(TouchEvents event) override;
 
@@ -33,26 +35,27 @@ namespace Pinetime {
         const Pinetime::Controllers::Battery& batteryController;
         const Pinetime::Controllers::Ble& bleController;
         Controllers::DateTime& dateTimeController;
+        Pinetime::Controllers::FS& filesystem;
 
         static constexpr int appsPerScreen = 6;
 
         // Increment this when more space is needed
         static constexpr int nScreens = 2;
 
-        static constexpr std::array<Tile::Applications, appsPerScreen * nScreens> applications {{
+        std::array<Tile::Applications, appsPerScreen * nScreens> applications {{
-          {Symbols::stopWatch, Apps::StopWatch},
+          {Symbols::stopWatch, Apps::StopWatch, true},
-          {Symbols::clock, Apps::Alarm},
+          {Symbols::clock, Apps::Alarm, true},
-          {Symbols::hourGlass, Apps::Timer},
+          {Symbols::hourGlass, Apps::Timer, true},
-          {Symbols::shoe, Apps::Steps},
+          {Symbols::shoe, Apps::Steps, true},
-          {Symbols::heartBeat, Apps::HeartRate},
+          {Symbols::heartBeat, Apps::HeartRate, true},
-          {Symbols::music, Apps::Music},
+          {Symbols::music, Apps::Music, true},
 
-          {Symbols::paintbrush, Apps::Paint},
+          {Symbols::paintbrush, Apps::Paint, true},
-          {Symbols::paddle, Apps::Paddle},
+          {Symbols::paddle, Apps::Paddle, true},
-          {"2", Apps::Twos},
+          {"2", Apps::Twos, true},
-          {Symbols::drum, Apps::Metronome},
+          {Symbols::drum, Apps::Metronome, true},
-          {Symbols::map, Apps::Navigation},
+          {Symbols::map, Apps::Navigation, Applications::Screens::Navigation::IsAvailable(filesystem)},
-          {Symbols::none, Apps::None},
+          {Symbols::none, Apps::None, false},
 
           // {"M", Apps::Motion},
         }};

src/displayapp/screens/Navigation.cpp

@@ -23,105 +23,166 @@
 
 using namespace Pinetime::Applications::Screens;
 
-LV_FONT_DECLARE(lv_font_navi_80)
+/* Notes about the navigation icons :
+ *  - Icons are generated from a TTF font converted in PNG images. Those images are all appended
+ *    vertically into a single PNG images. Since LVGL support images width and height up to
+ *    2048 px, the icons needs to be split into 2 separate PNG pictures. More info in
+ *    src/displayapp/fonts/README.md
+ *  - To make the handling of those icons easier, they must all have the same width and height
+ *  - Those PNG are then converted into BINARY format using the classical image generator
+ *    (in src/resources/generate-img.py)
+ *  - The array `iconMap` maps each icon with an index. This index corresponds to the position of
+ *    the icon in the file. All index lower than 25 (`maxIconsPerFile`) represent icons located
+ *    in the first file (navigation0.bin). All the other icons are located in the second file
+ *    (navigation1.bin). Since all icons have the same height, this index must be multiplied by
+ *    80px (`iconHeight`) to get the actual position (in pixels) of the icon in the image.
+ * - This is how the images are laid out in the PNG files :
+ *  *---------------*
+ *  | ICON 0        |
+ *  | FILE 0        |
+ *  | INDEX = 0     |
+ *  | PIXEL# = 0    |
+ *  *---------------*
+ *  | ICON 1        |
+ *  | FILE 0        |
+ *  | INDEX = 1     |
+ *  | PIXEL# = -80  |
+ *  *---------------*
+ *  | ICON 2        |
+ *  | FILE 0        |
+ *  | INDEX = 2     |
+ *  | PIXEL# = -160 |
+ *  *---------------*
+ *  |     ...       |
+ *  *---------------*
+ *  | ICON 25       |
+ *  | FILE 1        |
+ *  | INDEX = 25    |
+ *  | PIXEL# = 0    |
+ *  *---------------*
+ *  | ICON 26       |
+ *  | FILE 1        |
+ *  | INDEX = 26    |
+ *  | PIXEL# = -80  |
+ *  *---------------*
+ *   - The source images are located in `src/resources/navigation0.png` and `src/resources/navigation1.png`
+ */
 
 namespace {
-  constexpr std::array<std::pair<const char*, const char*>, 86> m_iconMap = {{
+  struct Icon {
-    {"arrive-left", "\xEE\xA4\x81"},
+    const char* fileName;
-    {"arrive-right", "\xEE\xA4\x82"},
+    int16_t offset;
-    {"arrive-straight", "\xEE\xA4\x80"},
+  };
-    {"arrive", "\xEE\xA4\x80"},
+
-    {"close", "\xEE\xA4\x83"},
+  constexpr uint16_t iconHeight = -80;
-    {"continue-left", "\xEE\xA4\x85"},
+  constexpr uint8_t flagIndex = 18;
-    {"continue-right", "\xEE\xA4\x86"},
+  constexpr uint8_t maxIconsPerFile = 25;
-    {"continue-slight-left", "\xEE\xA4\x87"},
+  const char* iconsFile0 = "F:/images/navigation0.bin";
-    {"continue-slight-right", "\xEE\xA4\x88"},
+  const char* iconsFile1 = "F:/images/navigation1.bin";
-    {"continue-straight", "\xEE\xA4\x84"},
+
-    {"continue-uturn", "\xEE\xA4\x89"},
+  constexpr std::array<std::pair<const char*, uint8_t>, 86> iconMap = {{
-    {"continue", "\xEE\xA4\x84"},
+    {"arrive-left", 1},
-    {"depart-left", "\xEE\xA4\x8B"},
+    {"arrive-right", 2},
-    {"depart-right", "\xEE\xA4\x8C"},
+    {"arrive-straight", 0},
-    {"depart-straight", "\xEE\xA4\x8A"},
+    {"arrive", 0},
-    {"end-of-road-left", "\xEE\xA4\x8D"},
+    {"close", 3},
-    {"end-of-road-right", "\xEE\xA4\x8E"},
+    {"continue-left", 5},
-    {"ferry", "\xEE\xA4\x8F"},
+    {"continue-right", 6},
-    {"flag", "\xEE\xA4\x90"},
+    {"continue-slight-left", 7},
-    {"fork-left", "\xEE\xA4\x92"},
+    {"continue-slight-right", 8},
-    {"fork-right", "\xEE\xA4\x93"},
+    {"continue-straight", 4},
-    {"fork-slight-left", "\xEE\xA4\x94"},
+    {"continue-uturn", 9},
-    {"fork-slight-right", "\xEE\xA4\x95"},
+    {"continue", 4},
-    {"fork-straight", "\xEE\xA4\x96"},
+    {"depart-left", 11},
-    {"invalid", "\xEE\xA4\x84"},
+    {"depart-right", 12},
-    {"invalid-left", "\xEE\xA4\x85"},
+    {"depart-straight", 10},
-    {"invalid-right", "\xEE\xA4\x86"},
+    {"end-of-road-left", 13},
-    {"invalid-slight-left", "\xEE\xA4\x87"},
+    {"end-of-road-right", 14},
-    {"invalid-slight-right", "\xEE\xA4\x88"},
+    {"ferry", 15},
-    {"invalid-straight", "\xEE\xA4\x84"},
+    {"flag", 16},
-    {"invalid-uturn", "\xEE\xA4\x89"},
+    {"fork-left", 18},
-    {"merge-left", "\xEE\xA4\x97"},
+    {"fork-right", 19},
-    {"merge-right", "\xEE\xA4\x98"},
+    {"fork-slight-left", 20},
-    {"merge-slight-left", "\xEE\xA4\x99"},
+    {"fork-slight-right", 21},
-    {"merge-slight-right", "\xEE\xA4\x9A"},
+    {"fork-straight", 22},
-    {"merge-straight", "\xEE\xA4\x84"},
+    {"invalid", 4},
-    {"new-name-left", "\xEE\xA4\x85"},
+    {"invalid-left", 5},
-    {"new-name-right", "\xEE\xA4\x86"},
+    {"invalid-right", 6},
-    {"new-name-sharp-left", "\xEE\xA4\x9B"},
+    {"invalid-slight-left", 7},
-    {"new-name-sharp-right", "\xEE\xA4\x9C"},
+    {"invalid-slight-right", 8},
-    {"new-name-slight-left", "\xEE\xA4\x87"},
+    {"invalid-straight", 4},
-    {"new-name-slight-right", "\xEE\xA4\x88"},
+    {"invalid-uturn", 9},
-    {"new-name-straight", "\xEE\xA4\x84"},
+    {"merge-left", 23},
-    {"notification-left", "\xEE\xA4\x85"},
+    {"merge-right", 24},
-    {"notification-right", "\xEE\xA4\x86"},
+    {"merge-slight-left", 25},
-    {"notification-sharp-left", "\xEE\xA4\x9B"},
+    {"merge-slight-right", 26},
-    {"notification-sharp-right", "\xEE\xA4\xA5"},
+    {"merge-straight", 4},
-    {"notification-slight-left", "\xEE\xA4\x87"},
+    {"new-name-left", 5},
-    {"notification-slight-right", "\xEE\xA4\x88"},
+    {"new-name-right", 6},
-    {"notification-straight", "\xEE\xA4\x84"},
+    {"new-name-sharp-left", 27},
-    {"off-ramp-left", "\xEE\xA4\x9D"},
+    {"new-name-sharp-right", 28},
-    {"off-ramp-right", "\xEE\xA4\x9E"},
+    {"new-name-slight-left", 7},
-    {"off-ramp-slight-left", "\xEE\xA4\x9F"},
+    {"new-name-slight-right", 8},
-    {"off-ramp-slight-right", "\xEE\xA4\xA0"},
+    {"new-name-straight", 4},
-    {"on-ramp-left", "\xEE\xA4\x85"},
+    {"notification-left", 5},
-    {"on-ramp-right", "\xEE\xA4\x86"},
+    {"notification-right", 6},
-    {"on-ramp-sharp-left", "\xEE\xA4\x9B"},
+    {"notification-sharp-left", 27},
-    {"on-ramp-sharp-right", "\xEE\xA4\xA5"},
+    {"notification-sharp-right", 37},
-    {"on-ramp-slight-left", "\xEE\xA4\x87"},
+    {"notification-slight-left", 7},
-    {"on-ramp-slight-right", "\xEE\xA4\x88"},
+    {"notification-slight-right", 8},
-    {"on-ramp-straight", "\xEE\xA4\x84"},
+    {"notification-straight", 4},
-    {"rotary", "\xEE\xA4\xA1"},
+    {"off-ramp-left", 29},
-    {"rotary-left", "\xEE\xA4\xA2"},
+    {"off-ramp-right", 30},
-    {"rotary-right", "\xEE\xA4\xA3"},
+    {"off-ramp-slight-left", 31},
-    {"rotary-sharp-left", "\xEE\xA4\xA4"},
+    {"off-ramp-slight-right", 32},
-    {"rotary-sharp-right", "\xEE\xA4\xA5"},
+    {"on-ramp-left", 5},
-    {"rotary-slight-left", "\xEE\xA4\xA6"},
+    {"on-ramp-right", 6},
-    {"rotary-slight-right", "\xEE\xA4\xA7"},
+    {"on-ramp-sharp-left", 27},
-    {"rotary-straight", "\xEE\xA4\xA8"},
+    {"on-ramp-sharp-right", 37},
-    {"roundabout", "\xEE\xA4\xA1"},
+    {"on-ramp-slight-left", 7},
-    {"roundabout-left", "\xEE\xA4\xA2"},
+    {"on-ramp-slight-right", 8},
-    {"roundabout-right", "\xEE\xA4\xA3"},
+    {"on-ramp-straight", 4},
-    {"roundabout-sharp-left", "\xEE\xA4\xA4"},
+    {"rotary", 33},
-    {"roundabout-sharp-right", "\xEE\xA4\xA5"},
+    {"rotary-left", 34},
-    {"roundabout-slight-left", "\xEE\xA4\xA6"},
+    {"rotary-right", 35},
-    {"roundabout-slight-right", "\xEE\xA4\xA7"},
+    {"rotary-sharp-left", 36},
-    {"roundabout-straight", "\xEE\xA4\xA8"},
+    {"rotary-sharp-right", 37},
-    {"turn-left", "\xEE\xA4\x85"},
+    {"rotary-slight-left", 38},
-    {"turn-right", "\xEE\xA4\x86"},
+    {"rotary-slight-right", 39},
-    {"turn-sharp-left", "\xEE\xA4\x9B"},
+    {"rotary-straight", 40},
-    {"turn-sharp-right", "\xEE\xA4\xA5"},
+    {"roundabout", 33},
-    {"turn-slight-left", "\xEE\xA4\x87"},
+    {"roundabout-left", 34},
-    {"turn-slight-right", "\xEE\xA4\x88"},
+    {"roundabout-right", 35},
-    {"turn-straight", "\xEE\xA4\x84"},
+    {"roundabout-sharp-left", 36},
-    {"updown", "\xEE\xA4\xA9"},
+    {"roundabout-sharp-right", 37},
-    {"uturn", "\xEE\xA4\x89"},
+    {"roundabout-slight-left", 38},
+    {"roundabout-slight-right", 39},
+    {"roundabout-straight", 40},
+    {"turn-left", 5},
+    {"turn-right", 6},
+    {"turn-sharp-left", 27},
+    {"turn-sharp-right", 37},
+    {"turn-slight-left", 7},
+    {"turn-slight-right", 8},
+    {"turn-straight", 4},
+    {"updown", 41},
+    {"uturn", 9},
   }};
 
-  const char* iconForName(const std::string& icon) {
+  Icon GetIcon(uint8_t index) {
-    for (auto iter : m_iconMap) {
+    if (index < maxIconsPerFile) {
+      return {iconsFile0, static_cast<int16_t>(iconHeight * index)};
+    }
+    return {iconsFile1, static_cast<int16_t>(iconHeight * (index - maxIconsPerFile))};
+  }
+
+  Icon GetIcon(const std::string& icon) {
+    for (const auto& iter : iconMap) {
       if (iter.first == icon) {
-        return iter.second;
+        return GetIcon(iter.second);
       }
     }
-    return "\xEE\xA4\x90";
+    return GetIcon(flagIndex);
   }
 }
 
@@ -130,11 +191,15 @@ namespace {
  *
  */
 Navigation::Navigation(Pinetime::Controllers::NavigationService& nav) : navService(nav) {
-
+  const auto& image = GetIcon("flag");
-  imgFlag = lv_label_create(lv_scr_act(), nullptr);
+  imgFlag = lv_img_create(lv_scr_act(), nullptr);
-  lv_obj_set_style_local_text_font(imgFlag, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &lv_font_navi_80);
+  lv_img_set_auto_size(imgFlag, false);
-  lv_obj_set_style_local_text_color(imgFlag, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_CYAN);
+  lv_obj_set_size(imgFlag, 80, 80);
-  lv_label_set_text_static(imgFlag, iconForName("flag"));
+  lv_img_set_src(imgFlag, image.fileName);
+  lv_img_set_offset_x(imgFlag, 0);
+  lv_img_set_offset_y(imgFlag, image.offset);
+  lv_obj_set_style_local_image_recolor_opa(imgFlag, LV_IMG_PART_MAIN, LV_STATE_DEFAULT, LV_OPA_COVER);
+  lv_obj_set_style_local_image_recolor(imgFlag, LV_IMG_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_CYAN);
   lv_obj_align(imgFlag, nullptr, LV_ALIGN_CENTER, 0, -60);
 
   txtNarrative = lv_label_create(lv_scr_act(), nullptr);
@@ -173,7 +238,11 @@ Navigation::~Navigation() {
 void Navigation::Refresh() {
   if (flag != navService.getFlag()) {
     flag = navService.getFlag();
-    lv_label_set_text_static(imgFlag, iconForName(flag));
+    const auto& image = GetIcon(flag);
+    lv_img_set_src(imgFlag, image.fileName);
+    lv_obj_set_style_local_image_recolor_opa(imgFlag, LV_IMG_PART_MAIN, LV_STATE_DEFAULT, LV_OPA_COVER);
+    lv_obj_set_style_local_image_recolor(imgFlag, LV_IMG_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_CYAN);
+    lv_img_set_offset_y(imgFlag, image.offset);
   }
 
   if (narrative != navService.getNarrative()) {
@@ -196,3 +265,19 @@ void Navigation::Refresh() {
     }
   }
 }
+
+bool Navigation::IsAvailable(Pinetime::Controllers::FS& filesystem) {
+  lfs_file file = {};
+
+  if (filesystem.FileOpen(&file, "/images/navigation0.bin", LFS_O_RDONLY) < 0) {
+    return false;
+  }
+  filesystem.FileClose(&file);
+
+  if (filesystem.FileOpen(&file, "/images/navigation1.bin", LFS_O_RDONLY) < 0) {
+    return false;
+  }
+  filesystem.FileClose(&file);
+
+  return true;
+}

src/displayapp/screens/Navigation.h

@@ -26,16 +26,18 @@
 namespace Pinetime {
   namespace Controllers {
     class NavigationService;
+    class FS;
   }
 
   namespace Applications {
     namespace Screens {
       class Navigation : public Screen {
       public:
-        Navigation(Pinetime::Controllers::NavigationService& nav);
+        explicit Navigation(Pinetime::Controllers::NavigationService& nav);
         ~Navigation() override;
 
         void Refresh() override;
+        static bool IsAvailable(Pinetime::Controllers::FS& filesystem);
 
       private:
         lv_obj_t* imgFlag;
@@ -48,7 +50,7 @@ namespace Pinetime {
         std::string flag;
         std::string narrative;
         std::string manDist;
-        int progress;
+        int progress = 0;
 
         lv_task_t* taskRefresh;
       };

src/displayapp/screens/Tile.cpp

@@ -76,7 +76,7 @@ Tile::Tile(uint8_t screenID,
 
   for (uint8_t i = 0; i < 6; i++) {
     lv_btnmatrix_set_btn_ctrl(btnm1, i, LV_BTNMATRIX_CTRL_CLICK_TRIG);
-    if (applications[i].application == Apps::None) {
+    if (applications[i].application == Apps::None || !applications[i].enabled) {
       lv_btnmatrix_set_btn_ctrl(btnm1, i, LV_BTNMATRIX_CTRL_DISABLED);
     }
   }

src/displayapp/screens/Tile.h

@@ -19,6 +19,7 @@ namespace Pinetime {
         struct Applications {
           const char* icon;
           Pinetime::Applications::Apps application;
+          bool enabled;
         };
 
         explicit Tile(uint8_t screenID,

src/resources/images.json

@@ -5,5 +5,19 @@
       "output_format": "bin",
       "binary_format": "ARGB8565_RBSWAP",
       "target_path": "/images/"
+   },
+   "navigation0" : {
+      "sources": "images/navigation0.png",
+      "color_format": "CF_INDEXED_1_BIT",
+      "output_format": "bin",
+      "binary_format": "ARGB8565_RBSWAP",
+      "target_path": "/images/"
+   },
+   "navigation1" : {
+      "sources": "images/navigation1.png",
+      "color_format": "CF_INDEXED_1_BIT",
+      "output_format": "bin",
+      "binary_format": "ARGB8565_RBSWAP",
+      "target_path": "/images/"
    }
 }