2025-12-22 01:24:14 -05:00
|
|
|
#include "NetworkModeSelectionActivity.h"
|
|
|
|
|
|
|
|
|
|
#include <GfxRenderer.h>
|
|
|
|
|
|
2025-12-30 15:09:30 +10:00
|
|
|
#include "MappedInputManager.h"
|
feat: UI themes, Lyra (#528)
## Summary
### What is the goal of this PR?
- Visual UI overhaul
- UI theme selection
### What changes are included?
- Added a setting "UI Theme": Classic, Lyra
- The classic theme is the current Crosspoint theme
- The Lyra theme implements these mockups:
https://www.figma.com/design/UhxoV4DgUnfrDQgMPPTXog/Lyra-Theme?node-id=2003-7596&t=4CSOZqf0n9uQMxDt-0
by Discord users yagofarias, ruby and gan_shu
- New functions in GFXRenderer to render rounded rectangles, greyscale
fills (using dithering) and thick lines
- Basic UI components are factored into BaseTheme methods which can be
overridden by each additional theme. Methods that are not overridden
will fallback to BaseTheme behavior. This means any new
features/components in CrossPoint only need to be developed for the
"Classic" BaseTheme.
- Additional themes can easily be developed by the community using this
foundation



## Additional Context
- Only the Home, Library and main Settings screens have been implemented
so far, this will be extended to the transfer screens and chapter
selection screen later on, but we need to get the ball rolling somehow
:)
- Loading extra covers on the home screen in the Lyra theme takes a
little more time (about 2 seconds), I added a loading bar popup (reusing
the Indexing progress bar from the reader view, factored into a neat UI
component) but the popup adds ~400ms to the loading time.
- ~~Home screen thumbnails will need to be generated separately for each
theme, because they are displayed in different sizes. Because we're
using dithering, displaying a thumb with the wrong size causes the
picture to look janky or dark as it does on the screenshots above. No
worries this will be fixed in a future PR.~~ Thumbs are now generated
with a size parameter
- UI Icons will need to be implemented in a future PR.
---
### AI Usage
While CrossPoint doesn't have restrictions on AI tools in contributing,
please be transparent about their usage as it
helps set the right context for reviewers.
Did you use AI tools to help write this code? _**PARTIALLY**_
This is not a vibe coded PR. Copilot was used for autocompletion to save
time but I reviewed, understood and edited all generated code.
---------
Co-authored-by: Dave Allie <dave@daveallie.com>
2026-02-05 17:50:11 +07:00
|
|
|
#include "components/UITheme.h"
|
Aleo, Noto Sans, Open Dyslexic fonts (#163)
## Summary
* Swap out Bookerly font due to licensing issues, replace default font
with Aleo
* I did a bunch of searching around for a nice replacement font, and
this trumped several other like Literata, Merriwether, Vollkorn, etc
* Add Noto Sans, and Open Dyslexic as font options
* They can be selected in the settings screen
* Add font size options (Small, Medium, Large, Extra Large)
* Adjustable in settings
* Swap out uses of reader font in headings and replaced with slightly
larger Ubuntu font
* Replaced PixelArial14 font as it was difficult to track down, replace
with Space Grotesk
* Remove auto formatting on generated font files
* Massively speeds up formatting step now that there is a lot more CPP
font source
* Include fonts with their licenses in the repo
## Additional Context
Line compression setting will follow
| Font | Small | Medium | Large | X Large |
| --- | --- | --- | --- | --- |
| Aleo |

|

|

|

|
| Noto Sans |

|

|

|

|
| Open Dyslexic |

|

|

|

|
2025-12-30 18:21:47 +10:00
|
|
|
#include "fontIds.h"
|
2025-12-22 01:24:14 -05:00
|
|
|
|
|
|
|
|
namespace {
|
2026-01-27 06:02:38 -05:00
|
|
|
constexpr int MENU_ITEM_COUNT = 3;
|
|
|
|
|
const char* MENU_ITEMS[MENU_ITEM_COUNT] = {"Join a Network", "Connect to Calibre", "Create Hotspot"};
|
|
|
|
|
const char* MENU_DESCRIPTIONS[MENU_ITEM_COUNT] = {
|
|
|
|
|
"Connect to an existing WiFi network",
|
|
|
|
|
"Use Calibre wireless device transfers",
|
|
|
|
|
"Create a WiFi network others can join",
|
|
|
|
|
};
|
2025-12-22 01:24:14 -05:00
|
|
|
} // namespace
|
|
|
|
|
|
|
|
|
|
void NetworkModeSelectionActivity::taskTrampoline(void* param) {
|
|
|
|
|
auto* self = static_cast<NetworkModeSelectionActivity*>(param);
|
|
|
|
|
self->displayTaskLoop();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
void NetworkModeSelectionActivity::onEnter() {
|
|
|
|
|
Activity::onEnter();
|
|
|
|
|
|
|
|
|
|
renderingMutex = xSemaphoreCreateMutex();
|
|
|
|
|
|
|
|
|
|
// Reset selection
|
|
|
|
|
selectedIndex = 0;
|
|
|
|
|
|
|
|
|
|
// Trigger first update
|
|
|
|
|
updateRequired = true;
|
|
|
|
|
|
|
|
|
|
xTaskCreate(&NetworkModeSelectionActivity::taskTrampoline, "NetworkModeTask",
|
|
|
|
|
2048, // Stack size
|
|
|
|
|
this, // Parameters
|
|
|
|
|
1, // Priority
|
|
|
|
|
&displayTaskHandle // Task handle
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
void NetworkModeSelectionActivity::onExit() {
|
|
|
|
|
Activity::onExit();
|
|
|
|
|
|
|
|
|
|
// Wait until not rendering to delete task
|
|
|
|
|
xSemaphoreTake(renderingMutex, portMAX_DELAY);
|
|
|
|
|
if (displayTaskHandle) {
|
|
|
|
|
vTaskDelete(displayTaskHandle);
|
|
|
|
|
displayTaskHandle = nullptr;
|
|
|
|
|
}
|
|
|
|
|
vSemaphoreDelete(renderingMutex);
|
|
|
|
|
renderingMutex = nullptr;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
void NetworkModeSelectionActivity::loop() {
|
|
|
|
|
// Handle back button - cancel
|
2025-12-28 21:59:14 -06:00
|
|
|
if (mappedInput.wasPressed(MappedInputManager::Button::Back)) {
|
2025-12-22 01:24:14 -05:00
|
|
|
onCancel();
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Handle confirm button - select current option
|
2025-12-28 21:59:14 -06:00
|
|
|
if (mappedInput.wasPressed(MappedInputManager::Button::Confirm)) {
|
2026-01-27 06:02:38 -05:00
|
|
|
NetworkMode mode = NetworkMode::JOIN_NETWORK;
|
|
|
|
|
if (selectedIndex == 1) {
|
|
|
|
|
mode = NetworkMode::CONNECT_CALIBRE;
|
|
|
|
|
} else if (selectedIndex == 2) {
|
|
|
|
|
mode = NetworkMode::CREATE_HOTSPOT;
|
|
|
|
|
}
|
2025-12-22 01:24:14 -05:00
|
|
|
onModeSelected(mode);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Handle navigation
|
2026-02-09 15:19:34 +06:00
|
|
|
buttonNavigator.onNext([this] {
|
|
|
|
|
selectedIndex = ButtonNavigator::nextIndex(selectedIndex, MENU_ITEM_COUNT);
|
2025-12-22 01:24:14 -05:00
|
|
|
updateRequired = true;
|
2026-02-09 15:19:34 +06:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
buttonNavigator.onPrevious([this] {
|
|
|
|
|
selectedIndex = ButtonNavigator::previousIndex(selectedIndex, MENU_ITEM_COUNT);
|
2025-12-22 01:24:14 -05:00
|
|
|
updateRequired = true;
|
2026-02-09 15:19:34 +06:00
|
|
|
});
|
2025-12-22 01:24:14 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
void NetworkModeSelectionActivity::displayTaskLoop() {
|
|
|
|
|
while (true) {
|
|
|
|
|
if (updateRequired) {
|
|
|
|
|
updateRequired = false;
|
|
|
|
|
xSemaphoreTake(renderingMutex, portMAX_DELAY);
|
|
|
|
|
render();
|
|
|
|
|
xSemaphoreGive(renderingMutex);
|
|
|
|
|
}
|
|
|
|
|
vTaskDelay(10 / portTICK_PERIOD_MS);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
void NetworkModeSelectionActivity::render() const {
|
|
|
|
|
renderer.clearScreen();
|
|
|
|
|
|
|
|
|
|
const auto pageWidth = renderer.getScreenWidth();
|
|
|
|
|
const auto pageHeight = renderer.getScreenHeight();
|
|
|
|
|
|
|
|
|
|
// Draw header
|
2025-12-31 12:11:36 +10:00
|
|
|
renderer.drawCenteredText(UI_12_FONT_ID, 15, "File Transfer", true, EpdFontFamily::BOLD);
|
2025-12-22 01:24:14 -05:00
|
|
|
|
|
|
|
|
// Draw subtitle
|
Aleo, Noto Sans, Open Dyslexic fonts (#163)
## Summary
* Swap out Bookerly font due to licensing issues, replace default font
with Aleo
* I did a bunch of searching around for a nice replacement font, and
this trumped several other like Literata, Merriwether, Vollkorn, etc
* Add Noto Sans, and Open Dyslexic as font options
* They can be selected in the settings screen
* Add font size options (Small, Medium, Large, Extra Large)
* Adjustable in settings
* Swap out uses of reader font in headings and replaced with slightly
larger Ubuntu font
* Replaced PixelArial14 font as it was difficult to track down, replace
with Space Grotesk
* Remove auto formatting on generated font files
* Massively speeds up formatting step now that there is a lot more CPP
font source
* Include fonts with their licenses in the repo
## Additional Context
Line compression setting will follow
| Font | Small | Medium | Large | X Large |
| --- | --- | --- | --- | --- |
| Aleo |

|

|

|

|
| Noto Sans |

|

|

|

|
| Open Dyslexic |

|

|

|

|
2025-12-30 18:21:47 +10:00
|
|
|
renderer.drawCenteredText(UI_10_FONT_ID, 50, "How would you like to connect?");
|
2025-12-22 01:24:14 -05:00
|
|
|
|
|
|
|
|
// Draw menu items centered on screen
|
|
|
|
|
constexpr int itemHeight = 50; // Height for each menu item (including description)
|
|
|
|
|
const int startY = (pageHeight - (MENU_ITEM_COUNT * itemHeight)) / 2 + 10;
|
|
|
|
|
|
|
|
|
|
for (int i = 0; i < MENU_ITEM_COUNT; i++) {
|
|
|
|
|
const int itemY = startY + i * itemHeight;
|
|
|
|
|
const bool isSelected = (i == selectedIndex);
|
|
|
|
|
|
|
|
|
|
// Draw selection highlight (black fill) for selected item
|
|
|
|
|
if (isSelected) {
|
|
|
|
|
renderer.fillRect(20, itemY - 2, pageWidth - 40, itemHeight - 6);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Draw text: black=false (white text) when selected (on black background)
|
|
|
|
|
// black=true (black text) when not selected (on white background)
|
Aleo, Noto Sans, Open Dyslexic fonts (#163)
## Summary
* Swap out Bookerly font due to licensing issues, replace default font
with Aleo
* I did a bunch of searching around for a nice replacement font, and
this trumped several other like Literata, Merriwether, Vollkorn, etc
* Add Noto Sans, and Open Dyslexic as font options
* They can be selected in the settings screen
* Add font size options (Small, Medium, Large, Extra Large)
* Adjustable in settings
* Swap out uses of reader font in headings and replaced with slightly
larger Ubuntu font
* Replaced PixelArial14 font as it was difficult to track down, replace
with Space Grotesk
* Remove auto formatting on generated font files
* Massively speeds up formatting step now that there is a lot more CPP
font source
* Include fonts with their licenses in the repo
## Additional Context
Line compression setting will follow
| Font | Small | Medium | Large | X Large |
| --- | --- | --- | --- | --- |
| Aleo |

|

|

|

|
| Noto Sans |

|

|

|

|
| Open Dyslexic |

|

|

|

|
2025-12-30 18:21:47 +10:00
|
|
|
renderer.drawText(UI_10_FONT_ID, 30, itemY, MENU_ITEMS[i], /*black=*/!isSelected);
|
2025-12-22 01:24:14 -05:00
|
|
|
renderer.drawText(SMALL_FONT_ID, 30, itemY + 22, MENU_DESCRIPTIONS[i], /*black=*/!isSelected);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Draw help text at bottom
|
2025-12-28 21:59:14 -06:00
|
|
|
const auto labels = mappedInput.mapLabels("« Back", "Select", "", "");
|
feat: UI themes, Lyra (#528)
## Summary
### What is the goal of this PR?
- Visual UI overhaul
- UI theme selection
### What changes are included?
- Added a setting "UI Theme": Classic, Lyra
- The classic theme is the current Crosspoint theme
- The Lyra theme implements these mockups:
https://www.figma.com/design/UhxoV4DgUnfrDQgMPPTXog/Lyra-Theme?node-id=2003-7596&t=4CSOZqf0n9uQMxDt-0
by Discord users yagofarias, ruby and gan_shu
- New functions in GFXRenderer to render rounded rectangles, greyscale
fills (using dithering) and thick lines
- Basic UI components are factored into BaseTheme methods which can be
overridden by each additional theme. Methods that are not overridden
will fallback to BaseTheme behavior. This means any new
features/components in CrossPoint only need to be developed for the
"Classic" BaseTheme.
- Additional themes can easily be developed by the community using this
foundation



## Additional Context
- Only the Home, Library and main Settings screens have been implemented
so far, this will be extended to the transfer screens and chapter
selection screen later on, but we need to get the ball rolling somehow
:)
- Loading extra covers on the home screen in the Lyra theme takes a
little more time (about 2 seconds), I added a loading bar popup (reusing
the Indexing progress bar from the reader view, factored into a neat UI
component) but the popup adds ~400ms to the loading time.
- ~~Home screen thumbnails will need to be generated separately for each
theme, because they are displayed in different sizes. Because we're
using dithering, displaying a thumb with the wrong size causes the
picture to look janky or dark as it does on the screenshots above. No
worries this will be fixed in a future PR.~~ Thumbs are now generated
with a size parameter
- UI Icons will need to be implemented in a future PR.
---
### AI Usage
While CrossPoint doesn't have restrictions on AI tools in contributing,
please be transparent about their usage as it
helps set the right context for reviewers.
Did you use AI tools to help write this code? _**PARTIALLY**_
This is not a vibe coded PR. Copilot was used for autocompletion to save
time but I reviewed, understood and edited all generated code.
---------
Co-authored-by: Dave Allie <dave@daveallie.com>
2026-02-05 17:50:11 +07:00
|
|
|
GUI.drawButtonHints(renderer, labels.btn1, labels.btn2, labels.btn3, labels.btn4);
|
2025-12-22 01:24:14 -05:00
|
|
|
|
|
|
|
|
renderer.displayBuffer();
|
|
|
|
|
}
|