Did you have any style: line after entity: sensor.time?
indeed, I do.
style:
top: 50%
left: 50%
font-size: 15vw
color: black #dk gray
filter: opacity(70%)Last thing I can think of is comment out the image: to test.
If you still can’t even see sensor.time, there is something else wrong.
As the picture-elements solution needs some fiddling with the correct aspect ration of the background image, here is a solution that uses an online PNG generator for the background. The geometry and the color of the PNG can be easily adjusted by simply changing the parameters in the image url (see help at https://fakeimg.pl/).
type: picture-elements
image: 'https://fakeimg.pl/100x22/000000,0/ffffff?text=+'
#image: 'https://dummyimage.com/100x22/fff/000.png&text=+'
elements:
- type: state-label
entity: sensor.time
style:
left: 50%
top: 45%
font-size: 5vw
- type: state-label
entity: sensor.date
style:
left: 50%
top: 78%
font-size: 1.5vw
Don’t forget to add the time_date integration to you configuration.yaml:
sensor:
- platform: time_date
display_options:
- 'time'
- 'date'
Result:
UPDATE 20200513: I changed the code above from using dummyimage.com to fakeimg.pl, because fakeimg supports transparent PNGs. This becomes relevant if you need the ability to switch between light and dark themes (e.g. day/night switch) and want the background of the date/time to change with the theme. Hint: There are many PNG generators out there, but right now only very few seem to support transparent colors.
Result shown with an active dark theme:
UPDATE 20200606:
Roll your own dummy image generator!
fakeimg.pl went down for some days but is back online now. But I took the opportunity to research other options. Unfortunately there seems to be no (!) other online dummy image service that provides the option to create transparent images.
The alternative I found is Node Red. If you already use it in HA (which I highly recommend) than it is dead simple to create your own dummy image generator.
- Install the Node Red contrib node-red-contrib-image-tools:
Use the hamburger icon in Node red --> Manage palette --> Install,
search for the image-tools contrib and install it. - Import the following flow:
[{"id":"cfc4d950.0fef68","type":"http in","z":"4c71f9ee.cbd868","name":"","url":"make_png","method":"get","upload":false,"swaggerDoc":"","x":150,"y":1280,"wires":[["cb76a29a.06709"]]},{"id":"d7e57b07.c6aaa8","type":"http response","z":"4c71f9ee.cbd868","name":"","statusCode":"200","headers":{"Content-Type":"image/png"},"x":500,"y":1280,"wires":[]},{"id":"cb76a29a.06709","type":"jimp-image","z":"4c71f9ee.cbd868","name":"","data":"payload","dataType":"msg","ret":"buf","parameter1":"","parameter1Type":"msg","parameter2":"","parameter2Type":"msg","parameter3":"","parameter3Type":"msg","parameter4":"","parameter4Type":"msg","parameter5":"","parameter5Type":"msg","parameter6":"","parameter6Type":"msg","parameter7":"","parameter7Type":"msg","parameter8":"","parameter8Type":"msg","parameterCount":0,"jimpFunction":"none","selectedJimpFunction":{"name":"none","fn":"none","description":"Just loads the image.","parameters":[]},"x":350,"y":1280,"wires":[["d7e57b07.c6aaa8"]]}]
- Now you can read your dummy image from your own endpoint with a URL like this: http://hassio:1880/endpoint/make_png?w=100&h=22&background=%2300000000
Check the domain or IP address (hassio) and the port (1880) for your system. They may be different. The port is defined in the Node Red config.
The background parameter is the hex representation of an RGB or RGBA color value (RGBA = RGB + Alpha transparancy), i.e. #FF000080 for a semi transparent red. The # character must be url-encoded, which results in a leading %23.
%2300000000 in my example is #00000000 which is a fully transparent black.
BTW: Actually the color does not matter if it is fully transparent, so #FFFFFF00 would do as well.
3 Likes
I have used similar approach but with custom button card.
Here is the code:
https://github.com/dmatik/homeassistant-config/blob/e35c577093e5f88b78e746b575c4e76908e4a3f9/homeassistant/config/lovelace/cards/card_clock_button.yaml
4 Likes
What are you using to display the clock? I’ve been using someones clock.js that was utilizing a custom:clock-card. I really like how yours is displaying and would love to know what you’re using.
As mentioned above, I am using custom button card and ha time sensors. There is a link in my post to the card in my github. You can see all the code there.
Nick- I don’t see how to use this in a card config - Do you have any instructions for that?
cards:
- analogPlacement: top
displayType: both
timezone: Pacific/Auckland
type: 'custom:mm2-clock-card'
That is mine. If I wanted it really big I would use panel mode.
1 Like
Great example, Thank you!!! Helped me out alot!!!
Hi dmatik, a bit new to this. I am not sure I understand how to setup you clock. I tried adding the code to a custom-button in the Overview page, but nothing happens. Looking at you post I see two paths being referenced. Unsure where those files are or what should be in them. Thought possible your code but that did not work either.
config/lovelace/cards/card_clock_button.yaml
config/lovelace/styles/separator_card.yaml
Could you provide the steps needed to get this work? Thank you.
Hi,
Sure…
First of all ignore the separator_card.yaml, as you can see it is commented.
Have you managed to install the custom button card and use it at all?
I suggest you start there.
Try to remove the vertical stack and custom layout parts. You don’t need it.
Leave only the button card itself.
Please note that I never edit my lovelace dashboards from UI, so not really sure how it supposed to work there.
Thanks for your code and tips! For others trying to get it to work, here are some more detailed instructions (credit to @dmatik for the code!) when using Lovelace in UI mode:
First we need to prepare by adding the sensors used by the card:
- Add the following sensors to your config.yaml:
sensor:
- platform: time_date
display_options:
- 'time'
- 'date'
- platform: template
sensors:
my_date:
friendly_name: "Date"
icon_template: mdi:calendar
value_template: >-
{{ as_timestamp(strptime(states('sensor.date'), '%Y-%m-%d')) | timestamp_custom("%a, %b %d") }}
Then the following to get the actual card:
- Download the button_card.js component from https://github.com/custom-cards/button-card
- Save the button_card.js file in /config/www/button_card.js
- Go to your lovelace dashboard, press ‘Edit Dashboard’ at top right (3 dots menu)
- Click on ‘Manage resources’ under top right menu (3 dots)
- Click ‘ADD RESOURCE’, with URL: ‘/local/button_card.js’ and Resource Type ‘Javascript Module’ (both without quotes)
- Possibly you have to restart home assistant server here, TBH I can’t remember. From the top of my head it is not necessary.
- Go back to Lovelace editor and press “ADD CARD”. Choose “Custom: Button-Card”
- Use the code editor to enter the following card code (credits to @dmatik ):
type: custom:button-card
entity: ''
styles:
card:
- padding: 4%
- font-size: 52px
- border-radius: var(--button-card-border-radius)
- background-color: var(--button-card-background-color)
- color: var(--primary-text-color)
grid:
- grid-template-areas: '"time date"'
- grid-template-columns: 2fr
- grid-template-rows: 1fr
custom_fields:
time:
- justify-self: start
date:
- justify-self: end
- font-size: 20px
- color: var(--secondary-text-color)
custom_fields:
time: |
[[[ return states['sensor.time'].state ]]]
date: |
[[[ return states['sensor.my_date'].state ]]]
tap_action: none
hold_action: none
- Save your card and you should be done!
Result looks as follows:
1 Like
Just a few notes:
I’d advise to install button-card via HACS. It is not updated very frequently, so no harm in manual installation, but it is easier. 
#6 No need for a restart of HA, but you need to “reload ressources” in Lovelace (three-dot-menu, right top corner). Afterwards I always do a “refresh” out of the same menu, but that is optional.
And I’d set triggers_update, especially as you don’t use any entity. This would be to fit in here:
type: custom:button-card
triggers_update:
- sensor.time
entity: ''
styles:
[...]