tomasrudh / analogclock Goto Github PK
View Code? Open in Web Editor NEWAn analog clock for Home Assistant Lovelace
An analog clock for Home Assistant Lovelace
Hallå
I can't change the colour of the text for weekdays
BR
Kenneth
Add a configurable time zone. Request from @kenge1967
Copied and pasted one of your examples.
Used HACS to install
Added the extra resource reference mentioned
https://unpkg.com/[email protected]/min/moment-with-locales.js
Restarted HA, using vanilla HA version 2021.6.2
'moment not defined' shows up in card with no hands
This card does not show up in the list, when you activate "Add card" in a dashboard.
I have downloaded it via HACS and restarted.
I wanted to install your analog clock card but I have a problem with the moment.js installation.
I followed the installation procedure as follows:
views:
- type: custom:vertical-layout
cards:
- type: custom:analog-clock
hide_SecondHand: true
color_HourHand: '#326ba8'
color_MinuteHand: '#3273a8'
color_DigitalTime: '#CCCCCC'
color_FaceDigits: '#a83832'
hide_minorticks: true
timezone: America/Fortaleza
timezonedisplayname: UTC-3
dateformat: MMM Do YYYY
time format: hh mm
``
4) restarted the HA service
and I am getting the following message
"moment is not defined".
I am sure that HA service has access to https://unpkg.com/[email protected]/min/moment-with-locales.js
I am using HA version 2023.6.1
I cannot find any error in the log file (logger: default: info
logs: custom_components.hacs: debug
aiogithubapi: debug
Can you advice how to troubleshoot this problem or fix it?
NYFB
I really don't know how to install it. But I'd really want to try it... Can you walk me through?
On my Safari this card doesn't make trouble.
But If I use Fully Browser on my Android 10 Tablet, it shows up with this error message.
Config is like this:
type: custom:analog-clock
diameter: 180
timezone: Europe/Berlin
This card is amazing. If you are in desperate need for new features ideas, may I suggest a color change that indicates if it is day or night. It would mean to define a day color and a night color, maybe for the background, and it would use day colors from 6 to 18 and night colors for the other half of the day. It would make using the card multiple times as a world clock even more useful. A little bit like GMT wrist watches do it. Example:
Thank you for the work with the analog clock!
I hope this is the right way to go about the request.
I was hoping to be able to adjust the background color of the clock, based on time and perhaps on-demand timer.
My thoughts was to have a set schedule, that would enable me to color code different time-areas to certain colors, that would represent an action, that would cover the time from geetting home, and bedtime and beyond.
Something like:
15:00 - 18:00 Playtime
18:00 - 18:30 Bathtime
18:30 - 19:00 Get ready to bed
19:00 - 00:00 Sleepy time
My kids 3 years old, so we don't have homework yet - but it would be perfect for that as well.
The on-demand timer I was mentioning, would be for dinner-time.
This could either be done with a button, that turns the next 20-30 minutes into the dinnertime color - or something I could set with a setting in another card and have the length predetermined, and just input todays estimated dinnertime, so that it shows on the clock.
Thank you for reading.
Is it possible to use color variables like var(--secondary-text-color)
to have the clock adapt to theme changes (light/dark) automatically?
I tried with
color_digitaltime: '--secondary-text-color'
color_hourhand: var(--label-badge-green)
but these variations have no effect.
I agree with Pieter, that this is the best analog clock for HA.
Just two suggestions, in case you are bored one day :)
1.) It would be nice to be able to configure the way the date is displayed, maybe using strftime syntax like HA does.
2.) An option to configure if the digital time is displayed in 24 or 12 hour format would be great too
Cheers,
Julian
This is the first analogue clock for HA that I actually like. Thanks!
Would it be possible to have an option to have the face text overlay the hands so that the hands appear behind? I think it would be easier to read the text. Alternatively, you could allow for the alpha channel to be specified for the hand colours.
If one can use theme variables for colours that would be great too. Currently, it's only the background that makes use of a theme colour. You have your own theme option but I think it would be more seamless if theme variables are used, especially where one has an HA instance that automatically changes between a light and dark theme depending on whether the sun's up or down.
An option to hide the minor ticks would also be useful to someone that wants a more minimalistic look.
Instead of displaying the timezone, it would be great just to specify your own name or label. This is useful where you specify a timezone but the city or town you have in mind is different.
Hi,
my plan was to use a analog clock in a horizontal stack. However, I ran into an issue where there are no hands and no digital time/date shown when in a horizontal or vertical stack or grid. It does work without the stack and in the lovelace-layout-card (https://github.com/thomasloven/lovelace-layout-card).
I cleared the cache of my browser (Firefox 106.0.1 on Win 10 64-bit) multiple times to no avail. The Moment resource is installed according to your readme.
Here are my .yaml codes and corresponding behaviour:
type: horizontal-stack
cards:
- type: custom:analog-clock
hide_minorticks: true
hide_secondhand: true
style_hourhand: 3
style_minutehand: 3
diameter: 150
- type: thermostat
entity: climate.thermostat_hc1
type: custom:layout-card
layout_type: custom:horizontal-layout
layout:
width: 180
cards:
- type: thermostat
entity: climate.thermostat_hc1
- type: custom:analog-clock
hide_minorticks: true
hide_secondhand: true
style_hourhand: 3
style_minutehand: 3
diameter: 150
If you need anything else or if I miss something, please let me know.
Hej Tomas.
How do I do to change the color of the background, I use the theme midnight for my display but the square around the clock stays white.
title: iPad
views:
Hi Tomas, thanks for your great job, I´ve been using your card for some moths and haven´t had problems with it untill now.
The problem I´m havig is this:
I added the resource https://unpkg.com/[email protected]/min/moment-with-locales.js as a JavaScript Module (just module is not an option in my lovelace) and configure the dateformat as the last example (dateformat: "MMM Do YYYY").
When I do this, the clock desappear of my dashboard. I edit the code with the raw editor of lovelace and I see that the editor erases the quotation marks (whenever I use double or simple).
I erase the line with the dateformat option, and the clock appears again. It seems to me that the lovelace editor, I don´t know why, erases the quotation marks every time, therefore the clock desappear
Thank´s for your help!
Hello and happy new year
after last hassio update and restart i see this on screen (in a red box :-) )
Custom element doesn't exist: analog-clock.
type: 'custom:analog-clock'
hide_SecondHand: true
locale: IT
diameter: 200
color_HourHand: '#326ba8'
color_MinuteHand: '#3273a8'
color_DigitalTime: '#CCCCCC'
color_FaceDigits: '#a83832'
color_Ticks: Silver
what's happen ?
could you help me ?
wbr
Tiziano
Hi Tomas
thanks a lot for this analog clock
After installation , we can put info on config file ?
wbr
Cippo
Hi! On iOS (iPad) I get 'invalid time' showing over the clock face. There are no minute nor second hands. This occurs on the HA application as well as in Chrome and Safari. It works fine on my Windows browsers and Android app.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.