Skip to content

Move Navigation font to external memory #1838

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
FintasticMan merged 4 commits into from
Sep 2, 2023
Merged

Move Navigation font to external memory #1838

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9cafdac
Move Navigation font to external memory
JF002 Aug 20, 2023
9cb4239
Move Navigation font to external memory
JF002 Aug 20, 2023
7730725
Move Navigation font to external memory
JF002 Aug 27, 2023
22c4000
Move Navigation font to external memory
JF002 Aug 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion doc/buildAndProgram.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ 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'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 `iconMap` in the [Navigation](https://github.com/InfiniTimeOrg/InfiniTime/blob/main/src/displayapp/screens/Navigation.h#L148) application to free some memory.

#### (\*\*) 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.
Expand Down
2 changes: 1 addition & 1 deletion src/displayapp/fonts/CMakeLists.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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")
Expand Down
14 changes: 14 additions & 0 deletions src/displayapp/fonts/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()`.
11 changes: 0 additions & 11 deletions src/displayapp/fonts/fonts.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": [
{
Expand Down
224 changes: 125 additions & 99 deletions src/displayapp/screens/Navigation.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,105 +23,123 @@

using namespace Pinetime::Applications::Screens;

LV_FONT_DECLARE(lv_font_navi_80)

namespace {
constexpr std::array<std::pair<const char*, const char*>, 86> m_iconMap = {{
{"arrive-left", "\xEE\xA4\x81"},
{"arrive-right", "\xEE\xA4\x82"},
{"arrive-straight", "\xEE\xA4\x80"},
{"arrive", "\xEE\xA4\x80"},
{"close", "\xEE\xA4\x83"},
{"continue-left", "\xEE\xA4\x85"},
{"continue-right", "\xEE\xA4\x86"},
{"continue-slight-left", "\xEE\xA4\x87"},
{"continue-slight-right", "\xEE\xA4\x88"},
{"continue-straight", "\xEE\xA4\x84"},
{"continue-uturn", "\xEE\xA4\x89"},
{"continue", "\xEE\xA4\x84"},
{"depart-left", "\xEE\xA4\x8B"},
{"depart-right", "\xEE\xA4\x8C"},
{"depart-straight", "\xEE\xA4\x8A"},
{"end-of-road-left", "\xEE\xA4\x8D"},
{"end-of-road-right", "\xEE\xA4\x8E"},
{"ferry", "\xEE\xA4\x8F"},
{"flag", "\xEE\xA4\x90"},
{"fork-left", "\xEE\xA4\x92"},
{"fork-right", "\xEE\xA4\x93"},
{"fork-slight-left", "\xEE\xA4\x94"},
{"fork-slight-right", "\xEE\xA4\x95"},
{"fork-straight", "\xEE\xA4\x96"},
{"invalid", "\xEE\xA4\x84"},
{"invalid-left", "\xEE\xA4\x85"},
{"invalid-right", "\xEE\xA4\x86"},
{"invalid-slight-left", "\xEE\xA4\x87"},
{"invalid-slight-right", "\xEE\xA4\x88"},
{"invalid-straight", "\xEE\xA4\x84"},
{"invalid-uturn", "\xEE\xA4\x89"},
{"merge-left", "\xEE\xA4\x97"},
{"merge-right", "\xEE\xA4\x98"},
{"merge-slight-left", "\xEE\xA4\x99"},
{"merge-slight-right", "\xEE\xA4\x9A"},
{"merge-straight", "\xEE\xA4\x84"},
{"new-name-left", "\xEE\xA4\x85"},
{"new-name-right", "\xEE\xA4\x86"},
{"new-name-sharp-left", "\xEE\xA4\x9B"},
{"new-name-sharp-right", "\xEE\xA4\x9C"},
{"new-name-slight-left", "\xEE\xA4\x87"},
{"new-name-slight-right", "\xEE\xA4\x88"},
{"new-name-straight", "\xEE\xA4\x84"},
{"notification-left", "\xEE\xA4\x85"},
{"notification-right", "\xEE\xA4\x86"},
{"notification-sharp-left", "\xEE\xA4\x9B"},
{"notification-sharp-right", "\xEE\xA4\xA5"},
{"notification-slight-left", "\xEE\xA4\x87"},
{"notification-slight-right", "\xEE\xA4\x88"},
{"notification-straight", "\xEE\xA4\x84"},
{"off-ramp-left", "\xEE\xA4\x9D"},
{"off-ramp-right", "\xEE\xA4\x9E"},
{"off-ramp-slight-left", "\xEE\xA4\x9F"},
{"off-ramp-slight-right", "\xEE\xA4\xA0"},
{"on-ramp-left", "\xEE\xA4\x85"},
{"on-ramp-right", "\xEE\xA4\x86"},
{"on-ramp-sharp-left", "\xEE\xA4\x9B"},
{"on-ramp-sharp-right", "\xEE\xA4\xA5"},
{"on-ramp-slight-left", "\xEE\xA4\x87"},
{"on-ramp-slight-right", "\xEE\xA4\x88"},
{"on-ramp-straight", "\xEE\xA4\x84"},
{"rotary", "\xEE\xA4\xA1"},
{"rotary-left", "\xEE\xA4\xA2"},
{"rotary-right", "\xEE\xA4\xA3"},
{"rotary-sharp-left", "\xEE\xA4\xA4"},
{"rotary-sharp-right", "\xEE\xA4\xA5"},
{"rotary-slight-left", "\xEE\xA4\xA6"},
{"rotary-slight-right", "\xEE\xA4\xA7"},
{"rotary-straight", "\xEE\xA4\xA8"},
{"roundabout", "\xEE\xA4\xA1"},
{"roundabout-left", "\xEE\xA4\xA2"},
{"roundabout-right", "\xEE\xA4\xA3"},
{"roundabout-sharp-left", "\xEE\xA4\xA4"},
{"roundabout-sharp-right", "\xEE\xA4\xA5"},
{"roundabout-slight-left", "\xEE\xA4\xA6"},
{"roundabout-slight-right", "\xEE\xA4\xA7"},
{"roundabout-straight", "\xEE\xA4\xA8"},
{"turn-left", "\xEE\xA4\x85"},
{"turn-right", "\xEE\xA4\x86"},
{"turn-sharp-left", "\xEE\xA4\x9B"},
{"turn-sharp-right", "\xEE\xA4\xA5"},
{"turn-slight-left", "\xEE\xA4\x87"},
{"turn-slight-right", "\xEE\xA4\x88"},
{"turn-straight", "\xEE\xA4\x84"},
{"updown", "\xEE\xA4\xA9"},
{"uturn", "\xEE\xA4\x89"},
struct Icon {
const char* fileName;
int16_t offset;
};

constexpr uint16_t iconHeight = -80;
constexpr uint8_t flagIndex = 18;
constexpr uint8_t maxIconsPerFile = 25;
const char* iconsFile0 = "F:/images/navigation0.bin";
const char* iconsFile1 = "F:/images/navigation1.bin";

constexpr std::array<std::pair<const char*, uint8_t>, 86> iconMap = {{
{"arrive-left", 1},
{"arrive-right", 2},
{"arrive-straight", 0},
{"arrive", 0},
{"close", 3},
{"continue-left", 5},
{"continue-right", 6},
{"continue-slight-left", 7},
{"continue-slight-right", 8},
{"continue-straight", 4},
{"continue-uturn", 9},
{"continue", 4},
{"depart-left", 11},
{"depart-right", 12},
{"depart-straight", 10},
{"end-of-road-left", 13},
{"end-of-road-right", 14},
{"ferry", 15},
{"flag", 16},
{"fork-left", 18},
{"fork-right", 19},
{"fork-slight-left", 20},
{"fork-slight-right", 21},
{"fork-straight", 22},
{"invalid", 4},
{"invalid-left", 5},
{"invalid-right", 6},
{"invalid-slight-left", 7},
{"invalid-slight-right", 8},
{"invalid-straight", 4},
{"invalid-uturn", 9},
{"merge-left", 23},
{"merge-right", 24},
{"merge-slight-left", 25},
{"merge-slight-right", 26},
{"merge-straight", 4},
{"new-name-left", 5},
{"new-name-right", 6},
{"new-name-sharp-left", 27},
{"new-name-sharp-right", 28},
{"new-name-slight-left", 7},
{"new-name-slight-right", 8},
{"new-name-straight", 4},
{"notification-left", 5},
{"notification-right", 6},
{"notification-sharp-left", 27},
{"notification-sharp-right", 37},
{"notification-slight-left", 7},
{"notification-slight-right", 8},
{"notification-straight", 4},
{"off-ramp-left", 29},
{"off-ramp-right", 30},
{"off-ramp-slight-left", 31},
{"off-ramp-slight-right", 32},
{"on-ramp-left", 5},
{"on-ramp-right", 6},
{"on-ramp-sharp-left", 27},
{"on-ramp-sharp-right", 37},
{"on-ramp-slight-left", 7},
{"on-ramp-slight-right", 8},
{"on-ramp-straight", 4},
{"rotary", 33},
{"rotary-left", 34},
{"rotary-right", 35},
{"rotary-sharp-left", 36},
{"rotary-sharp-right", 37},
{"rotary-slight-left", 38},
{"rotary-slight-right", 39},
{"rotary-straight", 40},
{"roundabout", 33},
{"roundabout-left", 34},
{"roundabout-right", 35},
{"roundabout-sharp-left", 36},
{"roundabout-sharp-right", 37},
{"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) {
for (auto iter : m_iconMap) {
Icon GetIcon(uint8_t index) {
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) {
uint8_t index = 0;
for (const auto& iter : iconMap) {
if (iter.first == icon) {
return iter.second;
return GetIcon(iter.second);
}
index++;
}
return "\xEE\xA4\x90";
return GetIcon(flagIndex);
}
}

Expand All @@ -130,11 +148,15 @@ namespace {
*
*/
Navigation::Navigation(Pinetime::Controllers::NavigationService& nav) : navService(nav) {

imgFlag = lv_label_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_obj_set_style_local_text_color(imgFlag, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_CYAN);
lv_label_set_text_static(imgFlag, iconForName("flag"));
const auto& image = GetIcon("flag");
imgFlag = lv_img_create(lv_scr_act(), nullptr);
lv_img_set_auto_size(imgFlag, false);
lv_obj_set_size(imgFlag, 80, 80);
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);
Expand Down Expand Up @@ -173,7 +195,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()) {
Expand Down
4 changes: 2 additions & 2 deletions src/displayapp/screens/Navigation.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ namespace Pinetime {
namespace Screens {
class Navigation : public Screen {
public:
Navigation(Pinetime::Controllers::NavigationService& nav);
explicit Navigation(Pinetime::Controllers::NavigationService& nav);
~Navigation() override;

void Refresh() override;
Expand All @@ -48,7 +48,7 @@ namespace Pinetime {
std::string flag;
std::string narrative;
std::string manDist;
int progress;
int progress = 0;

lv_task_t* taskRefresh;
};
Expand Down
14 changes: 14 additions & 0 deletions src/resources/images.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/"
}
}
Binary file added src/resources/images/navigation0.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/resources/images/navigation1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.