Skip to content

Digital clock overlay #4729

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Digital clock overlay #4729

wants to merge 7 commits into from

Conversation

Myriadbits
Copy link

@Myriadbits Myriadbits commented Jun 13, 2025

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.

Copy link
Contributor

coderabbitai bot commented Jun 13, 2025

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
🪧 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.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 5

🧹 Nitpick comments (3)
usermods/Clock_overlay/readme.md (2)

3-6: Nit: Punctuation and URL formatting.

Add a comma after “pixel” and convert the bare URL to markdown link syntax for readability:

- Since it combines a clock with pixel we named it Cloxel.
- See the following instructable for more information:
- https://www.instructables.com/Cloxel-WLED-Pixel-Clock/
+ Since it combines a clock with pixel, we named it Cloxel.
+ See the following instructable for more information:
+ [Cloxel WLED Pixel Clock](https://www.instructables.com/Cloxel-WLED-Pixel-Clock/)
🧰 Tools
🪛 LanguageTool

[uncategorized] ~3-~3: A comma might be missing here.
Context: ...effects. Since it combines a clock with pixel we named it Cloxel. See the following i...

(AI_EN_LECTOR_MISSING_PUNCTUATION_COMMA)

🪛 markdownlint-cli2 (0.17.2)

5-5: Bare URL used
null

(MD034, no-bare-urls)


19-27: Nit: List indentation.

Adjust unordered list indentation under “Notes for configuring the 32x8 LED matrix” to two spaces for consistency:

- - 2D Configuration 
-     - Use the Matrix generator:
-         - Select 2D Matrix
-         - 1 Panel
-         - 1st LED is either Bottom-Right or Top-Left (depends on how you put in the matrix)
-         - Orientation: Vertical
-         - Make sure Serpentine is selected
-         - Dimensions are 32x8
-         - Offset X and Y are both 0
+ - 2D Configuration 
+ - Use the Matrix generator:
+   - Select 2D Matrix
+   - 1 Panel
+   - 1st LED is either Bottom-Right or Top-Left (depends on how you put in the matrix)
+   - Orientation: Vertical
+   - Make sure Serpentine is selected
+   - Dimensions are 32x8
+   - Offset X and Y are both 0
🧰 Tools
🪛 markdownlint-cli2 (0.17.2)

20-20: Unordered list indentation
Expected: 2; Actual: 4

(MD007, ul-indent)


21-21: Unordered list indentation
Expected: 4; Actual: 8

(MD007, ul-indent)


22-22: Unordered list indentation
Expected: 4; Actual: 8

(MD007, ul-indent)


23-23: Unordered list indentation
Expected: 4; Actual: 8

(MD007, ul-indent)


24-24: Unordered list indentation
Expected: 4; Actual: 8

(MD007, ul-indent)


25-25: Unordered list indentation
Expected: 4; Actual: 8

(MD007, ul-indent)


26-26: Unordered list indentation
Expected: 4; Actual: 8

(MD007, ul-indent)


27-27: Unordered list indentation
Expected: 4; Actual: 8

(MD007, ul-indent)

usermods/Clock_overlay/Clock_overlay.cpp (1)

285-297: Handle both RGB and RGBW hex color formats.

To maintain backwards compatibility and support both RGB and RGBW, the function should accept both 6 and 8 character hex strings.

 bool hexStringToColor(String const &s, uint32_t &c, uint32_t def)
 {
   char *ep;
+  // Remove any leading # if present
+  String colorStr = s;
+  if (colorStr.startsWith("#")) {
+    colorStr = colorStr.substring(1);
+  }
+  
-  unsigned long long r = strtoull(s.c_str(), &ep, 16);
+  unsigned long long r = strtoull(colorStr.c_str(), &ep, 16);
   if (*ep == 0) {
+    // If only 6 chars (RGB), shift to make room for white channel
+    if (colorStr.length() == 6) {
+      r = r << 8; // Shift RGB to RGBW with W=0
+    }
     c = r;
     return true;
   }
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 05f0630 and fd16bdf.

📒 Files selected for processing (8)
  • usermods/Clock_overlay/Clock_overlay.cpp (1 hunks)
  • usermods/Clock_overlay/FontsBase.h (1 hunks)
  • usermods/Clock_overlay/MyriadbitsFont3x5.h (1 hunks)
  • usermods/Clock_overlay/MyriadbitsFont3x6.h (1 hunks)
  • usermods/Clock_overlay/MyriadbitsFont3x8.h (1 hunks)
  • usermods/Clock_overlay/MyriadbitsFont4x7.h (1 hunks)
  • usermods/Clock_overlay/library.json (1 hunks)
  • usermods/Clock_overlay/readme.md (1 hunks)
🧰 Additional context used
🪛 LanguageTool
usermods/Clock_overlay/readme.md

[uncategorized] ~3-~3: A comma might be missing here.
Context: ...effects. Since it combines a clock with pixel we named it Cloxel. See the following i...

(AI_EN_LECTOR_MISSING_PUNCTUATION_COMMA)

🪛 markdownlint-cli2 (0.17.2)
usermods/Clock_overlay/readme.md

5-5: Bare URL used
null

(MD034, no-bare-urls)


20-20: Unordered list indentation
Expected: 2; Actual: 4

(MD007, ul-indent)


21-21: Unordered list indentation
Expected: 4; Actual: 8

(MD007, ul-indent)


22-22: Unordered list indentation
Expected: 4; Actual: 8

(MD007, ul-indent)


23-23: Unordered list indentation
Expected: 4; Actual: 8

(MD007, ul-indent)


24-24: Unordered list indentation
Expected: 4; Actual: 8

(MD007, ul-indent)


25-25: Unordered list indentation
Expected: 4; Actual: 8

(MD007, ul-indent)


26-26: Unordered list indentation
Expected: 4; Actual: 8

(MD007, ul-indent)


27-27: Unordered list indentation
Expected: 4; Actual: 8

(MD007, ul-indent)

🔇 Additional comments (7)
usermods/Clock_overlay/FontsBase.h (3)

1-5: Header guard and PROGMEM macro definition.

#pragma once, <cstdint> include, and the empty PROGMEM macro are appropriate for cross-platform embedded support.


7-22: Glyph and font struct definitions.

GFXglyph and GFXfont correctly model per-glyph metrics and font metadata. Layout and documentation comments align with Adafruit GFX conventions.


24-31: Font type and text alignment enums.

EFontType and ETextAlign cover required font variations and alignment modes. Enum values are clear and extensible.

Also applies to: 33-40

usermods/Clock_overlay/MyriadbitsFont3x5.h (1)

1-139: Font definition consistency.

Bitmap data, glyph metrics, and the final GFXfont instantiation all align correctly with FontsBase.h. No syntax or memory-layout issues detected.

usermods/Clock_overlay/MyriadbitsFont4x7.h (1)

1-147: Font definition consistency.

The 4x7 font bitmap, glyph descriptors, and GFXfont instance are structured correctly and conform to the expected format.

usermods/Clock_overlay/MyriadbitsFont3x6.h (1)

1-137: Font definition looks properly structured.

The font file follows the standard GFXfont format with PROGMEM storage for embedded systems. The glyph definitions are consistent and cover the expected ASCII range (0x20-0x7E). The yAdvance value of 7 is appropriate for a 6-pixel tall font with spacing.

Note: The bitmap data correctness would need to be verified through visual testing of the rendered characters.

usermods/Clock_overlay/MyriadbitsFont3x8.h (1)

1-137: Font definition is properly structured.

The 3x8 font follows the same standard GFXfont format. The yAdvance value of 9 is correct for an 8-pixel tall font with spacing.

Comment on lines 277 to 282
String colorToHexString(uint32_t c)
{
char buffer[9];
sprintf(buffer, "%06X", c);
return buffer;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Support full 32-bit RGBW colors.

The current implementation only handles 24-bit RGB colors, potentially losing white channel data in RGBW setups.

 String colorToHexString(uint32_t c)
 {
-  char buffer[9];
-  sprintf(buffer, "%06X", c);
+  char buffer[9];
+  sprintf(buffer, "%08X", c);
   return buffer;
 }

Also update the config UI hint:

-oappend(F("addInfo('")); oappend(_txtName); oappend(F(":Time color (RRGGBB)', 1, '(RRGGBB)');"));
+oappend(F("addInfo('")); oappend(_txtName); oappend(F(":Time color (RRGGBBWW)', 1, '(RRGGBBWW or RRGGBB)');"));
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
String colorToHexString(uint32_t c)
{
char buffer[9];
sprintf(buffer, "%06X", c);
return buffer;
}
String colorToHexString(uint32_t c)
{
char buffer[9];
sprintf(buffer, "%08X", c);
return buffer;
}
🤖 Prompt for AI Agents
In usermods/Clock_overlay/Clock_overlay.cpp around lines 277 to 282, the
colorToHexString function currently formats only 24-bit RGB colors, ignoring the
white channel in 32-bit RGBW colors. Update the sprintf format to output 8 hex
digits ("%08X") to include the full 32-bit color value. Also, update the
configuration UI hint to reflect support for full 32-bit RGBW colors.

@blazoncek
Copy link
Collaborator

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

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
@netmindz
Copy link
Member

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

@netmindz netmindz added the usermod usermod related label Jun 15, 2025
@Myriadbits
Copy link
Author

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?

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

♻️ Duplicate comments (1)
usermods/Clock_overlay/Clock_overlay.cpp (1)

286-291: Still drops the white channel – format to 8 hex digits
(Identical to a previous review – repeating for visibility.)

-      sprintf(buffer, "%06X", c);
+      sprintf(buffer, "%08X", c);   // preserve RGBW
🧹 Nitpick comments (2)
usermods/Clock_overlay/Clock_overlay.cpp (1)

109-121: Minor: use the pre-computed index variable

idx is already bounded; use it instead of recomputing and risking divergence in future edits.

-                int idx = posX + xx + yoffset;
-                if (idx >= 0 && idx < ledMaskSize) {
-                  pLedMask[posX + xx + yoffset] = 1;
-                }
+                int idx = posX + xx + yoffset;
+                if (idx >= 0 && idx < ledMaskSize) {
+                  pLedMask[idx] = 1;
+                }
usermods/Clock_overlay/readme.md (1)

30-37: Nit: wrap the example JSON in fenced code & add a missing comma

Improves readability and fixes the markdown-lint warnings.

```json
{
  "clock_overlay": {
    "msg": "PIZZA!",
    "time": 3
  }
}

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 LanguageTool</summary>

[uncategorized] ~37-~37: Possible missing comma found.
Context: ...in the configured pattern/colors. After 3s the normal time will be displayed again...

(AI_HYDRA_LEO_MISSING_COMMA)

</details>

</details>

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**


<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 16e42bcd94825035deded1af48e3e5b0dad23d50 and 881e4d2cf2e5e3bfc1808d1af8c49b8b152d060b.

</details>

<details>
<summary>📒 Files selected for processing (3)</summary>

* `usermods/Clock_overlay/Clock_overlay.cpp` (1 hunks)
* `usermods/Clock_overlay/library.json` (1 hunks)
* `usermods/Clock_overlay/readme.md` (1 hunks)

</details>

<details>
<summary>🚧 Files skipped from review as they are similar to previous changes (1)</summary>

* usermods/Clock_overlay/library.json

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🪛 LanguageTool</summary>

<details>
<summary>usermods/Clock_overlay/readme.md</summary>

[uncategorized] ~37-~37: Possible missing comma found.
Context: ...in the configured pattern/colors. After 3s the normal time will be displayed again...

(AI_HYDRA_LEO_MISSING_COMMA)

</details>

</details>
<details>
<summary>🪛 markdownlint-cli2 (0.17.2)</summary>

<details>
<summary>usermods/Clock_overlay/readme.md</summary>

5-5: Bare URL used
null

(MD034, no-bare-urls)

</details>

</details>

</details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (5)
usermods/Clock_overlay/readme.md (5)

1-2: Standardize header capitalization
The top-level heading uses “usermod” in lowercase; consider title-casing for consistency with other sections.


4-6: Convert bare URL into a markdown link
A raw URL triggers MD034 (no-bare-urls). Wrapping it in link syntax improves readability.

- See the following instructable for more information:
- https://www.instructables.com/Cloxel-WLED-Pixel-Clock/
+ See the following instructable for more information:
+ [Cloxel WLED Pixel Clock Instructable](https://www.instructables.com/Cloxel-WLED-Pixel-Clock/)
🧰 Tools
🪛 markdownlint-cli2 (0.17.2)

5-5: Bare URL used
null

(MD034, no-bare-urls)


7-11: Refine “Future work” section
Use title case for the section heading and ensure bullet items follow the same style (either all end with a period or none). This enhances clarity and consistency.


12-27: Use inline code formatting for config values
Wrap identifiers and settings (e.g., custom_usermods, 2D Matrix, panel count values, orientation options, serpentine toggle, Offset X, Offset Y) in backticks for clarity in markdown.


40-43: Title-case “Release notes” and ensure trailing newline
Change the heading to “## Release Notes” and confirm the file ends with a single blank line for POSIX compliance.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 881e4d2 and af84db5.

📒 Files selected for processing (2)
  • usermods/Clock_overlay/Clock_overlay.cpp (1 hunks)
  • usermods/Clock_overlay/readme.md (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • usermods/Clock_overlay/Clock_overlay.cpp
🧰 Additional context used
🪛 markdownlint-cli2 (0.17.2)
usermods/Clock_overlay/readme.md

5-5: Bare URL used
null

(MD034, no-bare-urls)

Comment on lines 28 to 38
## Using the message functionality
On the 'state' URL api call: http://<IP address or localname>/json/state.
POST the following json data:
```json
{
"clock_overlay": {
"msg": "PIZZA!",
"time": 3
}
}
The text 'PIZZA!' will blink for 3 seconds in the configured pattern/colors. After 3s the normal time will be displayed again.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix code block fence and inline URL formatting
The JSON snippet opens with ```json but isn’t closed, which breaks rendering. Also wrap the API URL in backticks.

- On the 'state' URL api call: http://<IP address or localname>/json/state.
+ On the `state` API call: `http://<IP address or localname>/json/state`.
...
- ```json
+ ```json
  {
    "clock_overlay": {
      "msg": "PIZZA!",
      "time": 3
    }
  }
+ ```
 The text 'PIZZA!' will blink for 3 seconds in the configured pattern/colors. After 3s the normal time will be displayed again.
🤖 Prompt for AI Agents
In usermods/Clock_overlay/readme.md around lines 28 to 38, the JSON code block
is missing a closing triple backtick, causing rendering issues. Add a closing
```json code fence after the JSON snippet. Also, wrap the API URL (http://<IP
address or localname>/json/state) in backticks to format it as inline code for
clarity.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (4)
usermods/Clock_overlay/readme.md (4)

23-24: Format API endpoint as inline code
Wrap the /json/state endpoint in backticks to improve readability and differentiate it from plain text.

- On the 'state' URL api call: http://<IP address or localname>/json/state.
+ On the `state` URL API call: `<IP address or localname>/json/state`.

34-34: Add comma after introductory phrase
Add a comma after "After 3s" to improve sentence flow:

- The text 'PIZZA!' will blink for 3 seconds in the configured pattern/colors. After 3s the normal time will be displayed again.
+ The text 'PIZZA!' will blink for 3 seconds in the configured pattern/colors. After 3s, the normal time will be displayed again.
🧰 Tools
🪛 LanguageTool

[uncategorized] ~34-~34: Possible missing comma found.
Context: ...in the configured pattern/colors. After 3s the normal time will be displayed again...

(AI_HYDRA_LEO_MISSING_COMMA)


37-40: Ensure consistent bullet punctuation
Remove the extra space before the period and standardize end-of-line punctuation (either all bullets end with a period or none):

- - Message integration into main WLED screen .
+ - Message integration into main WLED screen

7-10: Specify minimum WLED version requirement
This overlay leverages segment blending modes introduced in WLED v0.16. Please call out the minimum required WLED version under Installation.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between af84db5 and af73a04.

📒 Files selected for processing (1)
  • usermods/Clock_overlay/readme.md (1 hunks)
🧰 Additional context used
🪛 LanguageTool
usermods/Clock_overlay/readme.md

[uncategorized] ~34-~34: Possible missing comma found.
Context: ...in the configured pattern/colors. After 3s the normal time will be displayed again...

(AI_HYDRA_LEO_MISSING_COMMA)

🔇 Additional comments (1)
usermods/Clock_overlay/readme.md (1)

26-33: Validate JSON snippet formatting
The JSON block fence and indentation look correct; no changes required here.

@DedeHai
Copy link
Collaborator

DedeHai commented Jun 15, 2025

@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?

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (5)
usermods/Clock_overlay/readme.md (5)

32-32: Format API URL and endpoint as inline code

Wrap the state endpoint and the full URL in backticks for clarity and consistency with Markdown conventions.

- On the 'state' URL api call: http://<IP address or localname>/json/state.
+ On the `state` URL API call: `http://<IP address or localname>/json/state`.

24-30: Refine list-item punctuation and compound adjective

Use colons after each configuration key and hyphenate “custom-made” to improve readability and consistency.

- - `Segment Id`, select the correct segment to display the clock on.
+ - `Segment Id`: select the correct segment to display the clock on.
- - `Time Options`, select HH:MM or HH:MM:ss as display options.
+ - `Time Options`: select HH:MM or HH:MM:ss as display options.
- - `Time Font`, select the font to use for the time display. Fonts are custom made fonts in different sizes.
+ - `Time Font`: select the font to use for the time display. Fonts are custom-made fonts in different sizes.
- - `Time Color`, enter the time color in RRGGBB hexadecimal format (FFFFFF for white).
+ - `Time Color`: enter the time color in RRGGBB hexadecimal format (FFFFFF for white).
- - `Background Fade`, how much should the background (the WLED effects) be faded (0 = no WLED effects visible, 255 = WLED effects are not faded).
+ - `Background Fade`: specify how much the background (the WLED effects) should be faded (0 = no WLED effects visible, 255 = WLED effects are not faded).
- - `Message Options`, different blinking colors/options when displaying the message.
+ - `Message Options`: choose different blinking colors/options when displaying the message.
🧰 Tools
🪛 LanguageTool

[uncategorized] ~25-~25: Loose punctuation mark.
Context: ...o display the clock on. - Time Options, select HH:MM or HH:MM:ss as display opt...

(UNLIKELY_OPENING_PUNCTUATION)


[uncategorized] ~26-~26: Loose punctuation mark.
Context: ...:MM:ss as display options. - Time Font, select the font to use for the time dis...

(UNLIKELY_OPENING_PUNCTUATION)


[misspelling] ~26-~26: This word is normally spelled with a hyphen.
Context: ... to use for the time display. Fonts are custom made fonts in different sizes. - `Time Color...

(EN_COMPOUNDS_CUSTOM_MADE)


[uncategorized] ~27-~27: Loose punctuation mark.
Context: ...fonts in different sizes. - Time Color, enter the time color in RRGGBB hexadeci...

(UNLIKELY_OPENING_PUNCTUATION)


[uncategorized] ~28-~28: Loose punctuation mark.
Context: ... (FFFFFF for white). - Background Fade, how much should the background (the WLE...

(UNLIKELY_OPENING_PUNCTUATION)


[uncategorized] ~29-~29: Loose punctuation mark.
Context: ...ects are not faded). - Message Options, different blinking colors/options when ...

(UNLIKELY_OPENING_PUNCTUATION)


22-30: Suggest documenting available fonts and color options

It would be helpful to list the bundled fonts and detail how to configure colors. Consider inserting a new subsection under User configuration:

@@ ## User configuration
   - `Message Options`: choose different blinking colors/options when displaying the message.
+
+### Font and Color Options
+The following fonts are available:
+- `MyriadbitsFont3x5.h` (3×5 pixels)
+- `MyriadbitsFont3x6.h` (3×6 pixels)
+- `MyriadbitsFont3x8.h` (3×8 pixels)
+- `MyriadbitsFont4x7.h` (4×7 pixels)
+
+You can customize time and message colors using the `Time Color` and `Message Color` fields (enter RRGGBB hex). Adjust `Background Fade` (0–255) to control the opacity of underlying effects.
🧰 Tools
🪛 LanguageTool

[uncategorized] ~25-~25: Loose punctuation mark.
Context: ...o display the clock on. - Time Options, select HH:MM or HH:MM:ss as display opt...

(UNLIKELY_OPENING_PUNCTUATION)


[uncategorized] ~26-~26: Loose punctuation mark.
Context: ...:MM:ss as display options. - Time Font, select the font to use for the time dis...

(UNLIKELY_OPENING_PUNCTUATION)


[misspelling] ~26-~26: This word is normally spelled with a hyphen.
Context: ... to use for the time display. Fonts are custom made fonts in different sizes. - `Time Color...

(EN_COMPOUNDS_CUSTOM_MADE)


[uncategorized] ~27-~27: Loose punctuation mark.
Context: ...fonts in different sizes. - Time Color, enter the time color in RRGGBB hexadeci...

(UNLIKELY_OPENING_PUNCTUATION)


[uncategorized] ~28-~28: Loose punctuation mark.
Context: ... (FFFFFF for white). - Background Fade, how much should the background (the WLE...

(UNLIKELY_OPENING_PUNCTUATION)


[uncategorized] ~29-~29: Loose punctuation mark.
Context: ...ects are not faded). - Message Options, different blinking colors/options when ...

(UNLIKELY_OPENING_PUNCTUATION)


42-42: Add missing comma after introductory clause

Insert a comma after “After 3s” to correct the sentence flow.

- The text 'PIZZA!' will blink for 3 seconds in the configured pattern/colors. After 3s the normal time will be displayed again.
+ The text 'PIZZA!' will blink for 3 seconds in the configured pattern/colors. After 3s, the normal time will be displayed again.
🧰 Tools
🪛 LanguageTool

[uncategorized] ~42-~42: Possible missing comma found.
Context: ...in the configured pattern/colors. After 3s the normal time will be displayed again...

(AI_HYDRA_LEO_MISSING_COMMA)


47-47: Insert missing article for grammatical correctness

Add “the” before “main WLED screen” to improve readability.

- - Message integration into main WLED screen.
+ - Message integration into the main WLED screen.
🧰 Tools
🪛 LanguageTool

[uncategorized] ~47-~47: You might be missing the article “the” here.
Context: .../time modes. - Message integration into main WLED screen. ## Release notes 2025-06 ...

(AI_EN_LECTOR_MISSING_DETERMINER_THE)

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between af73a04 and ab51732.

📒 Files selected for processing (2)
  • usermods/Clock_overlay/Clock_overlay.cpp (1 hunks)
  • usermods/Clock_overlay/readme.md (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • usermods/Clock_overlay/Clock_overlay.cpp
🧰 Additional context used
🪛 LanguageTool
usermods/Clock_overlay/readme.md

[uncategorized] ~25-~25: Loose punctuation mark.
Context: ...o display the clock on. - Time Options, select HH:MM or HH:MM:ss as display opt...

(UNLIKELY_OPENING_PUNCTUATION)


[uncategorized] ~26-~26: Loose punctuation mark.
Context: ...:MM:ss as display options. - Time Font, select the font to use for the time dis...

(UNLIKELY_OPENING_PUNCTUATION)


[misspelling] ~26-~26: This word is normally spelled with a hyphen.
Context: ... to use for the time display. Fonts are custom made fonts in different sizes. - `Time Color...

(EN_COMPOUNDS_CUSTOM_MADE)


[uncategorized] ~27-~27: Loose punctuation mark.
Context: ...fonts in different sizes. - Time Color, enter the time color in RRGGBB hexadeci...

(UNLIKELY_OPENING_PUNCTUATION)


[uncategorized] ~28-~28: Loose punctuation mark.
Context: ... (FFFFFF for white). - Background Fade, how much should the background (the WLE...

(UNLIKELY_OPENING_PUNCTUATION)


[uncategorized] ~29-~29: Loose punctuation mark.
Context: ...ects are not faded). - Message Options, different blinking colors/options when ...

(UNLIKELY_OPENING_PUNCTUATION)


[uncategorized] ~42-~42: Possible missing comma found.
Context: ...in the configured pattern/colors. After 3s the normal time will be displayed again...

(AI_HYDRA_LEO_MISSING_COMMA)


[uncategorized] ~47-~47: You might be missing the article “the” here.
Context: .../time modes. - Message integration into main WLED screen. ## Release notes 2025-06 ...

(AI_EN_LECTOR_MISSING_DETERMINER_THE)

@blazoncek
Copy link
Collaborator

@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
Copy link
Collaborator

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

@DedeHai
Copy link
Collaborator

DedeHai commented Jun 16, 2025

@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
Copy link
Author

@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
Copy link
Collaborator

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

@DedeHai
Copy link
Collaborator

DedeHai commented Jun 21, 2025

most if not all of what your usermod is trying to achieve can be done with the updated scrolling text, see #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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
usermod usermod related
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants