Really simple big clock

In my lovelace I have made very simple big clock.


Colors are taken from the actual theme. To assure the size I have used transparent svg 800x217px file stored in local folder (www).

In lovelace I’ve made a Picture element card:

elements:
  - entity: sensor.time
    style:
      color: var(--secondary-text-color)
      font-size: 600%
      left: 50%
      top: 45%
    type: state-label
  - entity: sensor.date
    style:
      color: var(--primary-text-color)
      font-size: 200%
      left: 50%
      top: 80%
    type: state-label
image: /local/fono_malplena_largxa.svg
type: picture-elements
4 Likes

Hey thanks for sharing this. I have been looking for something like this…forever. I have yet to understand why, as advanced as HA is, why there is NOT a simple damn clock card… Seems easy enough (not for me…I’m not a coder) maybe I am missing something. Anyway, one question, is there a way to display the time in 12 hr. format and maybe the date displayed as “Friday January 22, 2021” for example.

I have seen options with templates for this but cant seem to make them work and they dont look as good as this.

Thanks for your help and for sharing?

1 Like

Thank you! I’m not a programmer either, but I will try :wink:
So for displaying the name of the day I have now added new sensor to configuration yaml:

- platform: template
    sensors:
      weekday:
        value_template: '{% if now().weekday() in (0,) %} Monday {% elif now().weekday() in (1,) %} Tuesday {% elif now().weekday() in (2,) %} Wednesday {% elif now().weekday() in (3,) %} Thursday {% elif now().weekday() in (4,) %} Friday {% elif now().weekday() in (5,) %} Saturday {% elif now().weekday() in (6,) %} Sunday {% endif %}'

For easier understanding (or if you need to modify the template, it’s good to see it formatted in lines:
‘{% if now().weekday() in (0,) %} Monday
{% elif now().weekday() in (1,) %} Tuesday
{% elif now().weekday() in (2,) %} Wednesday
{% elif now().weekday() in (3,) %} Thursday
{% elif now().weekday() in (4,) %} Friday
{% elif now().weekday() in (5,) %} Saturday
{% elif now().weekday() in (6,) %} Sunday
{% endif %}’

If the shown day is not correct, try to modify the numbers in brackets from 1-7 instead 0-6

Now you can add the sensor to the card:

elements:
  - entity: sensor.time
    style:
      color: var(--secondary-text-color)
      font-size: 600%
      left: 50%
      top: 45%
    type: state-label
  - entity: sensor.weekday
    style:
      color: var(--primary-text-color)
      font-size: 200%
      left: 30%
      top: 80%
    type: state-label
  - entity: sensor.date
    style:
      color: var(--primary-text-color)
      font-size: 200%
      left: 65%
      top: 80%
    type: state-label
image: /local/fono_malplena_largxa.svg
type: picture-elements

My version is in Esperanto, so I have defined different day names and the result is then of course in esperanto as well.
image

About the 12/24 hour format is a long discussion in this thread.


We have struggled a bit at the beginning to have everything in 24 hour format, so I am not going to change our settings at home to avoid chaos again, but generally as I have understood HA takes the format form settings of your system as well as from the language/locale settings of your browser. It is not a setting coming from Home assistant.

great and practical… can you please give me a help with the transparent SVG? How do I do to get one? Cheers

You can create one for example with Inkscape.
Easiest way is to draw rectangle with specified size, no fill and no stroke.

Option png: Select and export selection as png.
Option svg: in document properties - page - resize page to drawing or selection and then save as svg.

In both cases you can use gradient or picture and play with transparency so the background react to your home assistant color or you can make it without transparency with fixed colors/ pictures.

Thanks for the support… appreciated it :wink:

I’m using “strftime”.

  - platform: template
    sensors:
      time_templated:
        value_template: "{{ now().strftime('%X') }}"
        friendly_name: ''
        icon_template: 'mdi:clock'
      date_templated:
        value_template: "{{ now().strftime('%d %B, %Y') }}"
        friendly_name: ''
        icon_template: 'mdi:clock'
      weekday_templated:
        value_template: "{{ now().strftime('%A') }}"
        friendly_name: ''
        icon_template: 'mdi:clock'

Result:

dt

Vlad, care to share what method are you using to display this on Lovelace? Is it using the OP’s Picture element method?

I’ve been collecting up different ways to display clocks. I’ve been abusing the custom:big number card for a long time, but I’ve been seeing lots of people use the custom:button-card or just the markdown card. There is also the custom:clockwork-card.

All of them are missing small elements of what I’m looking for, might help others. Here’s some examples I’ve collected for the markdown:

      - type: markdown
        content: >
          {% set time = now() %} <h1><ha-icon icon="mdi:clock"></ha-icon>{{time.hour}}:{{'{:0>2d}'.format(time.minute) }}</h1>

      - type: markdown
        content: >
          <font size = '12pt'>
          {{ '{:02}:{:02}'.format(now().hour, now().minute )}}
      - type: markdown
        content: >
          <font size = '8pt'>
          {{ '{:02}:{:02}'.format(now().hour, now().minute )}}

          {{ states("sensor.date_time") }}
      - type: markdown
        content: >
          {{ states("sensor.day_of_week") }}

Marc, using picture element:

      - type: picture-elements
        elements:
          - entity: sensor.time
            style:
              color: var(--secondary-text-color)
              font-size: 750%
              left: 50%
              top: 25%
            type: state-label
          - entity: sensor.date_templated
            style:
              color: var(--primary-text-color)
              font-size: 450%
              left: 50%
              top: 50%
            type: state-label
          - entity: sensor.dt_templated
            style:
              color: var(--primary-text-color)
              font-size: 450%
              left: 50%
              top: 80%
            type: state-label
        image: /local/index.svg