Just a big clock

Share your Projects! Dashboards & Frontend
41

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:

  1. 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:

  1. Download the button_card.js component from https://github.com/custom-cards/button-card
  2. Save the button_card.js file in /config/www/button_card.js
  3. Go to your lovelace dashboard, press ‘Edit Dashboard’ at top right (3 dots menu)
  4. Click on ‘Manage resources’ under top right menu (3 dots)
  5. Click ‘ADD RESOURCE’, with URL: ‘/local/button_card.js’ and Resource Type ‘Javascript Module’ (both without quotes)
  6. Possibly you have to restart home assistant server here, TBH I can’t remember. From the top of my head it is not necessary.
  7. Go back to Lovelace editor and press “ADD CARD”. Choose “Custom: Button-Card”
  8. 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
  1. Save your card and you should be done!

Result looks as follows:
Screenshot 2021-10-09 181949

1 Like
42

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. :slight_smile:

#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:
[...]