Really simple big clock

[magica]

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

[aa025620]

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?

[magica]

Thank you! I’m not a programmer either, but I will try
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.

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

24hr format instead of AM/PM in Europe

I have the OS set to en-GB and the browser to en-GB and that makes half of HA in 24. But the other half is not. The 12 hour pops up everywhere. I have just walked through my own HA. It is using Google Chrome on a Windows 10 machine with OS set to British English. I get similar results on Google Chrome on a Linux box with the OS set to en-GB. On the various tabs in the Overview, the small pop-up you get when you click on a badge or entity is in 24 hour clock. OK The log book is …

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.

[Lavado]

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

[magica]

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.

[Lavado]

Thanks for the support… appreciated it

[Vlad (Vladislav)]

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:

[mrand (Marc Randolph)]

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") }}

[Vlad (Vladislav)]

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

[Jeetah (Oliver)]

Regarding the background image - I would recommend using online placeholder sources like
https://placeholder.pics

This way you can define or change the sizes more dynamically - e.g for the dark theme my background image is this: https://placeholder.pics/svg/300x130/1c1c1c/1c1c1c (just set text and color on same value to hide dimmension info)

[fileopen]

Unfortunately, I don’t see a easy way to create a transparent image through placeholder.pics, so I ended up using a data: URL for that:

image: >-
  data:image/svg+xml,%3Csvg%20width%3D%22300%22%20height%3D%22130%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%2F%3E

This works flawlessly with both light and dark themes and doesn’t require Internet. You can still change the size dynamically by editing the 300 and 130 values in the code, although they are a bit hard to spot since they are surrounded by %22 (URL-encoded quotes), which shouldn’t be touched.

[appsfinder (Andy)]

thanks this what it did works perfect

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: https://placeholder.pics/svg/300x180/1c1c1c/1c1c1c
type: picture-elements

[lizzardking33 (bc)]

@Vlad

- 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'

did you need to make something for sensor.time/sensor.date? I copied the code and am not getting a time/date on the dash. Just two angry triangles with a !

[lizzardking33 (bc)]

added this to the configuration yaml

sensor:
  - platform: time_date
    display_options:
      - 'time'

Working now thanks guys!!!

[coskarl]

I am sorry guys but since I am new in HA I don’t understand, the codes you write above I have to write in the configuration yaml or in some custom card?

[drknow]

Create a Dashboard. Add a card. Choose Picture-Entity. Paste the code in there.

[coskarl]

Thank you! I just restarted the HA with quick reload and the system was not reloaded all the components. Now it’s ok!

[k8gg]

@Jeetah

Regarding the background image - I would recommend using online placeholder sources like
https://placeholder.pics

To future users coming to this thread, and fast forward to summer 2023: placeholder.pics website is dead / gone (for me anyways - I’m getting 522 time out error for a couple of weeks/months now).

So I am now following this recommendation from this comment above (thanks @fileopen)
… and it works! The svg is now generated by the client browser side - no resource needed from the HA server nor networking.

[Herman-Karin (Herman)]

Now that is an interesting reply:-). Novice here as well.
So I did what you said: create as dashboard, and so on.
This is the result:

Probably date and time sensor missing. How do I add them? Same simple steps, please:-).

[Geoff_B (Geoff)]

Date and time sensors can be added by editing the configuration.yaml, that’s what someone posted further up in the thread:

@lizzardking33

added this to the configuration yaml

sensor:
  - platform: time_date
    display_options:
      - 'time'

Working now thanks guys!!!

You may want to create a templated sensor instead, it will give you more control over the format, and doesn’t require editing the config.

1. Settings > Devices & Services > Helpers (Link to Helpers – My Home Assistant).
2. Create a new template sensor
3. In the template, paste in something like one of the strings Vlad posted earlier.
4. Modify the strftime parameters, the ones available are listed here.

Mine looks like:

Note the preview down the bottom right.

Then, put it into a picture-elements card:

show_state: true
show_name: true
camera_view: auto
type: picture-elements
image: >-
  data:image/svg+xml,%3Csvg%20width%3D%22300%22%20height%3D%22130%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%2F%3E
elements:
  - entity: sensor.time_templated
    style:
      color: var(--secondary-text-color)
      font-size: 600%
      left: 50%
      top: 45%
    type: state-label
  - entity: sensor.date_templated
    style:
      color: var(--primary-text-color)
      font-size: 200%
      left: 50%
      top: 80%
    type: state-label

Result: