feat: add a font button to change the title font

Author: JulesL2

pretty_gpx/common/drawing/utils/fonts.py

@@ -11,5 +11,10 @@
 class FontEnum(Enum):
     """Font Enum."""
     ANNOTATION = FontProperties(weight="bold")
-    TITLE = FontProperties(fname=os.path.join(FONTS_DIR, "Lobster 1.4.otf"))
-    STATS = FontProperties(fname=os.path.join(FONTS_DIR, "Lobster 1.4.otf"))
+    TITLE = (FontProperties(family="Lobster 1.4.otf", fname=os.path.join(FONTS_DIR, "Lobster 1.4.otf")),
+             FontProperties(family="Arial"),
+             FontProperties(family="Verdana"),
+             FontProperties(family="Times New Roman"),
+             FontProperties(family="Georgia"),
+             FontProperties(family="Comic Sans MS"))
+    STATS = FontProperties(family="Lobster 1.4.otf", fname=os.path.join(FONTS_DIR, "Lobster 1.4.otf"))

pretty_gpx/rendering_modes/city/drawing/city_params.py

@@ -123,5 +123,5 @@ def default() -> "CityParams":
 
             centered_title_font_color="cyan",
             centered_title_font_size=A4Float(mm=20),
-            centered_title_fontproperties=FontEnum.TITLE.value
+            centered_title_fontproperties=FontEnum.TITLE.value[0]
         )

pretty_gpx/rendering_modes/mountain/drawing/mountain_params.py

@@ -93,5 +93,5 @@ def default() -> "MountainParams":
 
             centered_title_font_color="cyan",
             centered_title_font_size=A4Float(mm=20),
-            centered_title_fontproperties=FontEnum.TITLE.value
+            centered_title_fontproperties=FontEnum.TITLE.value[0]
         )

pretty_gpx/rendering_modes/multi_mountain/drawing/multi_mountain_params.py

@@ -93,5 +93,5 @@ def default() -> "MultiMountainParams":
 
             centered_title_font_color="cyan",
             centered_title_font_size=A4Float(mm=20),
-            centered_title_fontproperties=FontEnum.TITLE.value
+            centered_title_fontproperties=FontEnum.TITLE.value[0]
         )

pretty_gpx/ui/pages/city/page.py

@@ -64,6 +64,8 @@ def update_drawer_params(self) -> None:
         self.drawer.params.profile_font_color = theme.background_color
         self.drawer.params.centered_title_font_color = theme.point_color
 
+        self.drawer.params.centered_title_fontproperties = self.font.value
+
         for cat in [ScatterPointCategory.CITY_BRIDGE,
                     ScatterPointCategory.CITY_POI_DEFAULT,
                     ScatterPointCategory.CITY_POI_GREAT,

pretty_gpx/ui/pages/template/ui_input.py

@@ -8,7 +8,7 @@
 from nicegui import ui
 
 from pretty_gpx.common.utils.utils import safe
-
+from matplotlib.font_manager import FontProperties
 
 @dataclass
 class UiInput:
@@ -61,6 +61,73 @@ def _value_str(self) -> str:
         return val
 
 
+@dataclass
+class UiFontsMenu:
+    """NiceGui menu to select a font in a list."""
+
+    button: ui.button
+    menu: ui.menu
+    fonts: tuple[FontProperties, ...]
+
+    @classmethod
+    def create(cls,
+               *,
+               fonts_l: tuple[FontProperties, ...],
+               tooltip: str,
+               on_change: Callable[[], Awaitable[None]]) -> Self:
+
+        button = ui.button(fonts_l[0].get_name()).props('outline flat') \
+                                                 .classes('bg-white text-black w-48 justify-start') \
+                                                 .style('border: 1px solid #ddd; border-radius: 4px; position: relative;')
+
+        with button:
+            ui.icon('arrow_drop_down').classes('ml-auto')
+            ui.tooltip(tooltip)
+
+            with ui.menu().props('anchor="bottom left"') as menu:  # Ensure menu opens below button
+                with ui.column().classes('no-wrap'):
+                    for font in fonts_l:
+                        font_name = font.get_name()
+
+                        def create_click_handler(selected_font):
+                            async def handler():
+                                button.text = selected_font
+                                menu.close()
+                                await on_change()
+                            return handler
+
+                        ui.button(font_name) \
+                            .props('flat no-caps text-left') \
+                            .classes('w-48') \
+                            .style(f'font-family: {font_name}; padding: 8px 16px;') \
+                            .on('click', create_click_handler(font_name))
+
+        def toggle_menu():
+            if menu.visible:
+                menu.close()
+            else:
+                menu.open()
+
+        button.on('click', toggle_menu)
+
+        return cls(button, menu, fonts_l)
+
+
+@dataclass
+class UiFontsMenuFontProp(UiFontsMenu):
+    """NiceGUI Str Dropdown Wrapper."""
+
+    @property
+    def value(self) -> FontProperties:
+        """Return the value."""
+        str_to_font = {font.get_name(): font for font in self.fonts}
+        font_output = str_to_font.get(self.button.text, None)
+        if font_output is None:
+            raise KeyError
+        else:
+            return font_output
+
+
 @dataclass
 class UiDropdownStr(UiDropdown):
     """NiceGUI Str Dropdown Wrapper."""

pretty_gpx/ui/pages/template/ui_manager.py

@@ -18,12 +18,14 @@
 from pretty_gpx.common.drawing.utils.color_theme import LightTheme
 from pretty_gpx.common.drawing.utils.drawer import DrawerMultiTrack
 from pretty_gpx.common.drawing.utils.drawer import DrawerSingleTrack
+from pretty_gpx.common.drawing.utils.fonts import FontEnum
 from pretty_gpx.common.layout.paper_size import PAPER_SIZES
 from pretty_gpx.common.layout.paper_size import PaperSize
 from pretty_gpx.common.utils.logger import logger
 from pretty_gpx.common.utils.profile import profile_parallel
 from pretty_gpx.ui.pages.template.ui_input import UiInputFloat
 from pretty_gpx.ui.pages.template.ui_input import UiInputStr
+from pretty_gpx.ui.pages.template.ui_input import UiFontsMenuFontProp
 from pretty_gpx.ui.pages.template.ui_plot import UiPlot
 from pretty_gpx.ui.pages.template.ui_toggle import UiToggle
 from pretty_gpx.ui.utils.run import run_cpu_bound
@@ -123,6 +125,7 @@ class UiManager(Generic[T], ABC):
     paper_size: UiToggle[PaperSize]
     title: UiInputStr
     dist_km: UiInputFloat
+    font: UiFontsMenuFontProp
     dark_mode_switch: ui.switch
     theme: UiToggle[DarkTheme] | UiToggle[LightTheme]
 
@@ -201,6 +204,12 @@ def __init__(self, drawer: T) -> None:
             self.dist_km = UiInputFloat.create(label='Distance (km)', value="", on_enter=self.on_click_update,
                                                tooltip="Press Enter to override distance from GPX")
 
+
+
+            self.font = UiFontsMenuFontProp.create(fonts_l=FontEnum.TITLE.value,
+                                                   on_change=self.on_click_update,
+                                                   tooltip="Override title font")
+
             #
             # New fields will be added here by the subclass
             #