2025-12-30 22:41:47 +10:00
|
|
|
#include "ScreenComponents.h"
|
|
|
|
|
|
|
|
|
|
#include <GfxRenderer.h>
|
|
|
|
|
|
2026-01-07 03:58:37 -05:00
|
|
|
#include <cstdint>
|
2025-12-30 22:41:47 +10:00
|
|
|
#include <string>
|
|
|
|
|
|
|
|
|
|
#include "Battery.h"
|
|
|
|
|
#include "fontIds.h"
|
|
|
|
|
|
2026-01-12 10:53:58 +01:00
|
|
|
void ScreenComponents::drawBattery(const GfxRenderer& renderer, const int left, const int top,
|
|
|
|
|
const bool showPercentage) {
|
2025-12-30 22:41:47 +10:00
|
|
|
// Left aligned battery icon and percentage
|
|
|
|
|
const uint16_t percentage = battery.readPercentage();
|
2026-01-12 10:53:58 +01:00
|
|
|
const auto percentageText = showPercentage ? std::to_string(percentage) + "%" : "";
|
2025-12-30 22:41:47 +10:00
|
|
|
renderer.drawText(SMALL_FONT_ID, left + 20, top, percentageText.c_str());
|
|
|
|
|
|
|
|
|
|
// 1 column on left, 2 columns on right, 5 columns of battery body
|
|
|
|
|
constexpr int batteryWidth = 15;
|
2026-01-04 05:27:34 +01:00
|
|
|
constexpr int batteryHeight = 12;
|
2025-12-30 22:41:47 +10:00
|
|
|
const int x = left;
|
2026-01-04 05:27:34 +01:00
|
|
|
const int y = top + 6;
|
2025-12-30 22:41:47 +10:00
|
|
|
|
|
|
|
|
// Top line
|
2026-01-04 05:27:34 +01:00
|
|
|
renderer.drawLine(x + 1, y, x + batteryWidth - 3, y);
|
2025-12-30 22:41:47 +10:00
|
|
|
// Bottom line
|
2026-01-04 05:27:34 +01:00
|
|
|
renderer.drawLine(x + 1, y + batteryHeight - 1, x + batteryWidth - 3, y + batteryHeight - 1);
|
2025-12-30 22:41:47 +10:00
|
|
|
// Left line
|
2026-01-04 05:27:34 +01:00
|
|
|
renderer.drawLine(x, y + 1, x, y + batteryHeight - 2);
|
2025-12-30 22:41:47 +10:00
|
|
|
// Battery end
|
2026-01-04 05:27:34 +01:00
|
|
|
renderer.drawLine(x + batteryWidth - 2, y + 1, x + batteryWidth - 2, y + batteryHeight - 2);
|
|
|
|
|
renderer.drawPixel(x + batteryWidth - 1, y + 3);
|
|
|
|
|
renderer.drawPixel(x + batteryWidth - 1, y + batteryHeight - 4);
|
|
|
|
|
renderer.drawLine(x + batteryWidth - 0, y + 4, x + batteryWidth - 0, y + batteryHeight - 5);
|
2025-12-30 22:41:47 +10:00
|
|
|
|
|
|
|
|
// The +1 is to round up, so that we always fill at least one pixel
|
|
|
|
|
int filledWidth = percentage * (batteryWidth - 5) / 100 + 1;
|
|
|
|
|
if (filledWidth > batteryWidth - 5) {
|
|
|
|
|
filledWidth = batteryWidth - 5; // Ensure we don't overflow
|
|
|
|
|
}
|
|
|
|
|
|
2026-01-04 05:27:34 +01:00
|
|
|
renderer.fillRect(x + 2, y + 2, filledWidth, batteryHeight - 4);
|
2025-12-30 22:41:47 +10:00
|
|
|
}
|
2026-01-07 03:58:37 -05:00
|
|
|
|
My Library: Tab bar w/ Recent Books + File Browser (#250)
# Summary
This PR introduces a reusable Tab Bar component and combines the Recent
Books and File Browser into a unified tabbed page called "My Library"
accessible from the Home screen.
## Features
### New Tab Bar Component
A flexible, reusable tab bar component added to `ScreenComponents` that
can be used throughout the application.
### New Scroll Indicator Component
A page position indicator for lists that span multiple pages.
**Features:**
- Up/down arrow indicators
- Current page fraction display (e.g., "1/3")
- Only renders when content spans multiple pages
### My Library Activity
A new unified view combining Recent Books and File Browser into a single
tabbed page.
**Tabs:**
- **Recent** - Shows recently opened books
- **Files** - Browse SD card directory structure
**Navigation:**
- Up/Down or Left/Right: Navigate through list items
- Left/Right (when first item selected): Switch between tabs
- Confirm: Open selected book or enter directory
- Back: Go up directory (Files tab) or return home
- Long press Back: Jump to root directory (Files tab)
**UI Elements:**
- Tab bar with selection indicator
- Scroll/page indicator on right side
- Side button hints (up/down arrows)
- Dynamic bottom button labels ("BACK" in subdirectories, "HOME" at
root)
## Tab Bar Usage
The tab bar component is designed to be reusable across different
activities. Here's how to use it:
### Basic Example
```cpp
#include "ScreenComponents.h"
void MyActivity::render() const {
renderer.clearScreen();
// Define tabs with labels and selection state
std::vector<TabInfo> tabs = {
{"Tab One", currentTab == 0}, // Selected when currentTab is 0
{"Tab Two", currentTab == 1}, // Selected when currentTab is 1
{"Tab Three", currentTab == 2} // Selected when currentTab is 2
};
// Draw tab bar at Y position 15, returns height of the tab bar
int tabBarHeight = ScreenComponents::drawTabBar(renderer, 15, tabs);
// Position your content below the tab bar
int contentStartY = 15 + tabBarHeight + 10; // Add some padding
// Draw content based on selected tab
if (currentTab == 0) {
renderTabOneContent(contentStartY);
} else if (currentTab == 1) {
renderTabTwoContent(contentStartY);
} else {
renderTabThreeContent(contentStartY);
}
renderer.displayBuffer();
}
```
Video Demo: https://share.cleanshot.com/P6NBncFS
<img width="250"
src="https://github.com/user-attachments/assets/07de4418-968e-4a88-9b42-ac5f53d8a832"
/>
<img width="250"
src="https://github.com/user-attachments/assets/e40201ed-dcc8-4568-b008-cd2bf13ebb2a"
/>
<img width="250"
src="https://github.com/user-attachments/assets/73db269f-e629-4696-b8ca-0b8443451a05"
/>
---------
Co-authored-by: Dave Allie <dave@daveallie.com>
2026-01-21 05:38:38 -06:00
|
|
|
int ScreenComponents::drawTabBar(const GfxRenderer& renderer, const int y, const std::vector<TabInfo>& tabs) {
|
|
|
|
|
constexpr int tabPadding = 20; // Horizontal padding between tabs
|
|
|
|
|
constexpr int leftMargin = 20; // Left margin for first tab
|
|
|
|
|
constexpr int underlineHeight = 2; // Height of selection underline
|
|
|
|
|
constexpr int underlineGap = 4; // Gap between text and underline
|
|
|
|
|
|
|
|
|
|
const int lineHeight = renderer.getLineHeight(UI_12_FONT_ID);
|
|
|
|
|
const int tabBarHeight = lineHeight + underlineGap + underlineHeight;
|
|
|
|
|
|
|
|
|
|
int currentX = leftMargin;
|
|
|
|
|
|
|
|
|
|
for (const auto& tab : tabs) {
|
|
|
|
|
const int textWidth =
|
|
|
|
|
renderer.getTextWidth(UI_12_FONT_ID, tab.label, tab.selected ? EpdFontFamily::BOLD : EpdFontFamily::REGULAR);
|
|
|
|
|
|
|
|
|
|
// Draw tab label
|
|
|
|
|
renderer.drawText(UI_12_FONT_ID, currentX, y, tab.label, true,
|
|
|
|
|
tab.selected ? EpdFontFamily::BOLD : EpdFontFamily::REGULAR);
|
|
|
|
|
|
|
|
|
|
// Draw underline for selected tab
|
|
|
|
|
if (tab.selected) {
|
|
|
|
|
renderer.fillRect(currentX, y + lineHeight + underlineGap, textWidth, underlineHeight);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
currentX += textWidth + tabPadding;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return tabBarHeight;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
void ScreenComponents::drawScrollIndicator(const GfxRenderer& renderer, const int currentPage, const int totalPages,
|
|
|
|
|
const int contentTop, const int contentHeight) {
|
|
|
|
|
if (totalPages <= 1) {
|
|
|
|
|
return; // No need for indicator if only one page
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const int screenWidth = renderer.getScreenWidth();
|
|
|
|
|
constexpr int indicatorWidth = 20;
|
|
|
|
|
constexpr int arrowSize = 6;
|
|
|
|
|
constexpr int margin = 15; // Offset from right edge
|
|
|
|
|
|
|
|
|
|
const int centerX = screenWidth - indicatorWidth / 2 - margin;
|
|
|
|
|
const int indicatorTop = contentTop + 60; // Offset to avoid overlapping side button hints
|
|
|
|
|
const int indicatorBottom = contentTop + contentHeight - 30;
|
|
|
|
|
|
|
|
|
|
// Draw up arrow at top (^) - narrow point at top, wide base at bottom
|
|
|
|
|
for (int i = 0; i < arrowSize; ++i) {
|
|
|
|
|
const int lineWidth = 1 + i * 2;
|
|
|
|
|
const int startX = centerX - i;
|
|
|
|
|
renderer.drawLine(startX, indicatorTop + i, startX + lineWidth - 1, indicatorTop + i);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Draw down arrow at bottom (v) - wide base at top, narrow point at bottom
|
|
|
|
|
for (int i = 0; i < arrowSize; ++i) {
|
|
|
|
|
const int lineWidth = 1 + (arrowSize - 1 - i) * 2;
|
|
|
|
|
const int startX = centerX - (arrowSize - 1 - i);
|
|
|
|
|
renderer.drawLine(startX, indicatorBottom - arrowSize + 1 + i, startX + lineWidth - 1,
|
|
|
|
|
indicatorBottom - arrowSize + 1 + i);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Draw page fraction in the middle (e.g., "1/3")
|
|
|
|
|
const std::string pageText = std::to_string(currentPage) + "/" + std::to_string(totalPages);
|
|
|
|
|
const int textWidth = renderer.getTextWidth(SMALL_FONT_ID, pageText.c_str());
|
|
|
|
|
const int textX = centerX - textWidth / 2;
|
|
|
|
|
const int textY = (indicatorTop + indicatorBottom) / 2 - renderer.getLineHeight(SMALL_FONT_ID) / 2;
|
|
|
|
|
|
|
|
|
|
renderer.drawText(SMALL_FONT_ID, textX, textY, pageText.c_str());
|
|
|
|
|
}
|
|
|
|
|
|
2026-01-07 03:58:37 -05:00
|
|
|
void ScreenComponents::drawProgressBar(const GfxRenderer& renderer, const int x, const int y, const int width,
|
|
|
|
|
const int height, const size_t current, const size_t total) {
|
|
|
|
|
if (total == 0) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Use 64-bit arithmetic to avoid overflow for large files
|
|
|
|
|
const int percent = static_cast<int>((static_cast<uint64_t>(current) * 100) / total);
|
|
|
|
|
|
|
|
|
|
// Draw outline
|
|
|
|
|
renderer.drawRect(x, y, width, height);
|
|
|
|
|
|
|
|
|
|
// Draw filled portion
|
|
|
|
|
const int fillWidth = (width - 4) * percent / 100;
|
|
|
|
|
if (fillWidth > 0) {
|
|
|
|
|
renderer.fillRect(x + 2, y + 2, fillWidth, height - 4);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Draw percentage text centered below bar
|
|
|
|
|
const std::string percentText = std::to_string(percent) + "%";
|
|
|
|
|
renderer.drawCenteredText(UI_10_FONT_ID, y + height + 15, percentText.c_str());
|
|
|
|
|
}
|