Really simple big clock

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.

1 Like

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

2 Likes

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
2 Likes

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)

2 Likes

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.

4 Likes

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

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 !

added this to the configuration yaml

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

Working now thanks guys!!!

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?

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

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

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.

1 Like

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

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

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:

1 Like

your card with the house and the interior and exterior temperature is so nice,
could you share it?

Sure, no problem. It uses card-mod to change the colour of the outside temperature depending on whether it’s hotter or colder outside, and the colour of the inside temperature to indicate heating vs cooling. There are also a few template helpers to get rid of the temperature units, for example the helper sensor.hvac_target_temp_no_units has a template of

{{state_attr("climate.hvac", "temperature")}}

There might be a tidier way of doing this, but in the end it works pretty well. It also uses scripts to toggle cool/heat (by tapping on the inside house temperature) or to turn the entire HVAC system off and on (by tapping on the outside temperature).

At some point I want to change the sun to a moon based on whether the sun is above the horizon and move those tap actions into small discrete toggle icons, but with HA there’s always something more important/interesting to poke on.

type: vertical-stack
cards:
  - type: picture-elements
    elements:
      - type: conditional
        conditions:
          - entity: climate.hvac
            state: cool
        elements:
          - type: state-label
            entity: sensor.hvac_target_temp_no_units
            style:
              top: 65%
              left: 21%
              transform: scale(3,3)
              color: var(--blue-color)
            tap_action:
              action: call-service
              service: script.thermostat_toggle_cool_heat
              target: {}
          - type: icon
            icon: mdi:snowflake
            style:
              top: 50%
              left: 22.5%
              transform: scale(1.5,1.5)
              color: var(--blue-color)
            tap_action:
              action: call-service
              service: script.thermostat_toggle_cool_heat
              target: {}
      - type: conditional
        conditions:
          - entity: climate.hvac
            state: heat
        elements:
          - type: state-label
            entity: sensor.hvac_target_temp_no_units
            style:
              top: 65%
              left: 22%
              transform: scale(3,3)
              color: var(--red-color)
            tap_action:
              action: call-service
              service: script.thermostat_toggle_cool_heat
              target: {}
          - type: icon
            icon: mdi:fire
            style:
              top: 50%
              left: 22.5%
              transform: scale(1.5,1.5)
              color: var(--red-color)
            tap_action:
              action: call-service
              service: script.thermostat_toggle_cool_heat
              target: {}
      - type: conditional
        conditions:
          - entity: climate.hvac
            state: "off"
        elements:
          - type: state-label
            entity: sensor.inside_temperature_no_units
            style:
              top: 65%
              left: 22%
              transform: scale(3,3)
              color: var(--green-color)
      - type: state-label
        entity: sensor.temperature_no_units
        tap_action:
          action: call-service
          service: script.thermostat_toggle_off
          target: {}
        style:
          top: 25%
          left: 72%
          transform: scale(3,3)
        card_mod:
          style: |
            :host {
              color:
                  {% set tempOut = states('sensor.outside_temperature')|float(0) %}
                  {% set tempIn = states('sensor.hvac_air_temperature')|float(0) %}
                  {% if tempOut > tempIn %}
                    var(--pink-color)
                  {% else %}
                    var(--blue-color)
                  {% endif %}
    image: /local/inside-outside-grey.png
  - type: custom:button-card
    color_type: blank-card
    styles:
      card:
        - height: 50px
view_layout:
  grid-area: thermostat1