Analog style for clock card #26557
Analog style for clock card #26557
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR adds analog clock style support to the existing clock card, providing users with both digital and analog visual options. The implementation maintains all existing functionality while introducing comprehensive customization options for the analog style.
Key changes:
- Adds analog clock style option with visual customization controls
- Refactors existing digital clock into separate component for better maintainability
- Updates grid layout handling to accommodate analog clock sizing requirements
Reviewed Changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/translations/en.json | Adds translation keys for clock style selection and analog-specific options |
| src/panels/lovelace/editor/config-elements/hui-clock-card-editor.ts | Extends editor with clock style selector and conditional analog options form |
| src/panels/lovelace/cards/types.ts | Updates type definitions to include analog clock configuration |
| src/panels/lovelace/cards/hui-clock-card.ts | Refactors main card to delegate rendering to style-specific components |
| src/panels/lovelace/cards/clock/hui-clock-card-digital.ts | Extracts digital clock implementation into dedicated component |
| src/panels/lovelace/cards/clock/hui-clock-card-analog.ts | Implements new analog clock component with customizable features |
da1eb5e to
d429d17
Compare
|
I wonder if this should just be a seperate card instead of the same card as the digital clock, as it also has its own options and is code split anyway. |
| locale = { ...locale, time_format: this.config.time_format }; | ||
| } | ||
|
|
||
| this._dateTimeFormat = new Intl.DateTimeFormat(this.hass.locale.language, { |
There was a problem hiding this comment.
Do we care out the format if we are going to show it analog anyway? I think we should always use the same rules here to make it easier to for ourselves?
There was a problem hiding this comment.
Only for time zone, I've removed the additional options which were leftover from the digital version
|
After discussion, we've decided to keep this on the "clock" card, but move the conditionally rendered options to the root of the editor and hide the unused options for analog dependent on the style Also for the future, we may want to allow numbers instead of ticks and additional theming of the clock hands (watch faces similar to watches etc.) |
cf8061a to
077c4de
Compare
Co-authored-by: Norbert Rittel <norbert@rittel.de>
| const second = secondStr ? parseInt(secondStr, 10) : 0; | ||
|
|
||
| // Analog face: 12-hour based rotation | ||
| const hourOn12 = hour % 12; |
There was a problem hiding this comment.
No longer needed now we dont have 24 hour style anymore I think?
Breaking change
Proposed change
screenrecording-2025-08-15_14-53-47.mp4
Type of change
Example configuration
Additional information
Checklist
If user exposed functionality or configuration variables are added/changed: