Digital clock overlay

[Myriadbits]

Added an usermod for my clock project (called Cloxel). This usermod basically puts a digital clock on top of the effects. The effects are faded to make the clock more readable. It works best with a 32x8 LED matrix. It includes multiple fonts and some color/text customization settings. An additional feature is that by using the API it is possible to show temporary (short) message on the WLED screen (useful to let kids know that it is time for dinner).
See https://www.instructables.com/Cloxel-WLED-Pixel-Clock/ for some pictures.

Summary by CodeRabbit

• New Features

  • Introduced a clock overlay that displays the current time or custom messages on LED segments, with configurable fonts, colors, and display effects.
  • Added support for multiple compact bitmap fonts for customizable text appearance.
  • Enabled integration with WLED’s JSON API for remote control of messages and settings.
  • Provided persistent configuration options and UI settings for time format, font, and display style.

• Documentation

  • Added a readme with setup instructions, configuration guidance, and feature overview for the new clock overlay functionality.

[coderabbitai[bot]]

Walkthrough

A new usermod named "ClockOverlay" has been introduced for WLED, enabling a configurable digital clock overlay on LED segments. The implementation includes font data files, font data structures, configuration handling, rendering logic, and integration with WLED's usermod and JSON systems. Documentation and metadata files are also provided.

Changes

File(s)	Change Summary
usermods/Clock_overlay/Clock_overlay.cpp	Added ClockOverlay usermod with time/message display, font rendering, configuration, JSON API, and WLED integration.
usermods/Clock_overlay/FontsBase.h	Introduced font data structures (GFXglyph, GFXfont) and enums for font type and text alignment.
usermods/Clock_overlay/MyriadbitsFont3x5.h usermods/Clock_overlay/MyriadbitsFont3x6.h usermods/Clock_overlay/MyriadbitsFont3x8.h usermods/Clock_overlay/MyriadbitsFont4x7.h	Added 3x5, 3x6, 3x8, and 4x7 pixel font definitions with bitmap and glyph data for text rendering.
usermods/Clock_overlay/library.json	Added library metadata JSON file specifying the usermod name and build options.
usermods/Clock_overlay/readme.md	Added documentation describing features, setup, configuration, and planned enhancements for the Clock Overlay usermod.

Suggested reviewers

• blazoncek

✨ Finishing Touches

• [ ] 📝 Generate Docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[blazoncek]

FYI you can use segment layers in 0.16 with multiple blending modes that will allow various effects with clock overlay.

[netmindz]

Hi @Myriadbits - looks like a nice addition. It looks like coderabbitai has picked up on a few potential issues with your code, sometimes it doesn't get things right, so please comment on any false positives

[Myriadbits]

FYI you can use segment layers in 0.16 with multiple blending modes that will allow various effects with clock overlay.

@blazoncek : It sounds exactly like something I could use in this mod. Where can I find more information on this feature? What calls should I look at?

[DedeHai]

@Myriadbits if you write it as a FX instead of a direct overlay, the new layering feature takes care of the rest if you create two or more overlapping segments you can choose how they are mixed.

Making it into an effect also gives direct control over colors using the colorwheel, brightness using the segment slider making it easier to use and more versatile if you want to use the FX sliders and checkmarks.

Question: at first glance, the added fonts are very similar to the current WLED fonts. anything better about the ones you added?

[blazoncek]

@everyone there is an analog clock FX waiting in one of the PRs. With 0.16 it can be used as an overlay.

@Myriadbits you can't, unless you examine the code. It is not intended to be used in usermods and is intended to replace any and all overlays available (in due time).

Scrolling text FX set up with appropriate segment name is a flexible way to have time and/or date displayed as overlay over any effect.

[blazoncek]

@DedeHai as we managed to reduce binary with Tasmota framework it may be feasible to add more fonts to Scrolling text FX.

[DedeHai]

@DedeHai as we managed to reduce binary with Tasmota framework it may be feasible to add more fonts to Scrolling text FX.

I was recently thinking about that. Could also use a different font encoding to save unused bits (currently about 1k worth) at the cost of needing a converter script / more cryptic encoding. A more elaborate version could be to add support to read a font from a file, similar to IR.json

[Myriadbits]

@blazoncek The scrolling text/clock overlay didn't look that nice to me. I find the scrolling annoying/distracting and the font is not that clean. That is why I created this user mod.

@DedeHai So that would mean the code will end up in the WLED code itself, not in an usermod. That will take some extra time, but is that something that the maintainers want? Regarding the fonts (I created them myself) are more 'squarish' (if that is a correct word :) ). If size is an issue, I could remove them except the 3x6 font as I personally find that the nicest.

[blazoncek]

First off, scrolling only happens if text is wider than it will fit on screen. Second, there are 4 fonts to choose from.

[DedeHai]

most if not all of what your usermod is trying to achieve can be done with the updated scrolling text, see https://github.com/wled/WLED/pull/4742 the API also allows to display custom messages AFAIK. What is left is the fonts, if they are nicer, we could replace the current ones. Got a bitmap comparison of the fonts?

edit: if the auto-scrolling is an issue, I was thinking of adding a "Fixed" checkmark to the FX that will center the text and not scroll even if the text does not fit.

[Myriadbits]

@DedeHai : I understand your idea. Personally I like it way better if the text overlay is part of WLED core itself instead of a usermod. Adding a 'Fixed' checkmark sounds like a great idea. It could also be an option box, with a fixed time and maybe an option to show the time and date after each other (for instance each 5 seconds) and/or show the current moving time/date. Thanks for the ideas and feedback!

I will cancel this PR and (if not already present) try to add the options inside WLED itself. (and maybe add the some fonts as well).

[blazoncek]

I veto fixed text checkmark.