IDEA: Configurable modes

[Solmath]

I really love the large amount of modes. However, the list is rather long now and it can be difficult to find the mode one is looking for.

What do you think of clustering similar modes into groups with options (like e.g. the ticker mode)?

For example:

• Games
  • Dropdown to select game
  • Option to enable clock in game
• Clocks
  • Font selector
  • Option to enable/disable ticking

In a first step I could look into adding the "enable/disable ticking" option to an existing clock. This would help me to get familiar with the architecture of the web app (and Typescript). I don't have a lot of experience with frontend development.

[JanPetterMG]

Welcome to the project! I fully support this direction. It solves a UX issue I've been aware of but haven't had the bandwidth to tackle fully yet.

I've just created #256. It brings an expanded foundation and acts as a proof of concept, with clock toggles for the twin games. I haven't touched the regular clocks yet, as I think they deserve more comprehensive options.

There are many roads to the destination:

• Grouping: One solution might be to group the modes in the existing drop-down menu. Take a look at the top section of this Wiki page for inspiration, though note that some items might fit under multiple umbrellas.
• App Launcher: Another idea is to create a launcher similar to mobile phones, using categories as entry points.

Feel free to experiment—or shake things up a bit if you have a different vision. Since you are new to the stack, don't hesitate to ping me if you get stuck.

[Solmath]

Sounds good. My idea basically is to have only one clock mode in the end, but with different fonts and layouts.

I tried something with the large clock in #258, feedback welcome. I haven't tested it myself yet, because compiling takes 15 minutes on my old laptop that I'm currently using. I will try to build a firmware tomorrow.

Is there a way to deploy the webapp on the development machine? If I run npm run dev there's only a blank page, because it can't get the required data from the device.

[JanPetterMG]

The standard setup should work without customization, provided the HOSTNAME environment variable is set correctly in your global .env.

The application uses this variable to resolve the WebSocket connection. For example, if you have:

HOSTNAME='frekvens'

The app will attempt to connect to ws://frekvens.local. This happens even if you are accessing the UI via http://localhost:5173. If that hostname isn't resolving on your network, npm run dev might appear to fail or hang.

In case you're normally using an IP address to access the device, you might have to create a new config file: webapp/.env.development with VITE_HOSTNAME='192.168.1.123' or similar. Anyway, I think it might be a good idea to hit F12 and check the Network tab, it should give you some clues.

[JanPetterMG]

What are your thoughts on the long-term direction of the "Binary epoch" and "Binary clock" modes?

They are conceptually very similar and could potentially be consolidated, similar to what was done for the other clock modes. I rarely use the binary clock myself, mainly the binary epoch from time to time. I’ve considered removing the former, but that would realistically be a v3 change.

One alternative could be adding the clock variant as an option within "Binary epoch", even if the name becomes slightly misleading. Another possibility is integrating it into the new "Clock" mode, though that likely introduces additional complexity given the absence of a binary font abstraction.

No need to resolve this now — just raising it for discussion while the context is fresh.

[Solmath]

In a sense the "Binary epoch" is a clock as well (the wiki even says so), so I guess it would be fine to integrate it into the "Clock" mode.

I guess it's not strictly necessary to use a binary font, because we could just switch the display logic based on the options from the frontend.

The UI could look something like this:

• Radio buttons or toggle to switch between numerical and binary
  • Font selector and ticking checkbox if numerical is selected
  • Radio buttons to switch between epoch and time if binary is selected

By the way: Is there currently a way to switch between 12 and 24 hour display? If not we could add a toggle for this, too.

[JanPetterMG]

That’s a fair point — technically the binary epoch is also a clock.

The binary clock (separate H/M/S counters) is at least somewhat intended to be readable once you know how to interpret it, whereas the binary epoch feels more like a continuously running counter that works primarily as a visual animation.

Because of that, I’m not entirely sure they serve the same purpose — but I don’t have a strong opinion either way. It’s more about of how we want to position them long term.

Regarding 12/24h: there’s currently no 12-hour option. I agree it could be a nice addition, although it will probably be a niche use case to switch between them. A compile-time option might make sense there, especially if it simplifies the implementation and avoids adding extra runtime branching.

[Solmath]

You're right, a frontend switch for 12/24h might actually be a bit overengineered. We might as well add a flag to the secrets.h like there is for the temperature unit.

[Solmath]

Just found this nice overview of pixel/bitmap fonts: https://www.dafont.com/bitmap.php

Some of those look like we could adapt them.