Just a big clock

Hi all,

Similar to the Alarm project, I’m just looking for a way to show off a clock big enough to be seen from 3/4m.
I have a wall-mounted tablet that is now showing off my lovely lovelace dashboard :slight_smile:

I tried iframing some website, showing of markdown with sensor.time (couldn’t render it)… but unfortunately it’s not good enough.

Any idea ?

Thanks a lot in advance!


How about something like this:

Just add the following to ui-lovelace.yaml, the png image and time sensor is up to you:

  - type: picture-elements    
    image: /local/Globe.png?v=1
    - type: state-label
      entity: sensor.local_time
        top: 50%
        left: 50%
        font-size: 7vw
        color: black
1 Like

indeed, good idea :slight_smile:

your screenshot lookgs great btw, would you share your config ?


Really hard to make it look good…
I don’t necessary want a background picture.

I tried an iframe with some quick JS script, also it does not look good. Somehow the iframe integration is broken by “type: horizontal-stack”

Ok, I managed by simply using “lovelace useful card”.
I forked it and added fontsize option.

here you are:


Thanks @thomasloven !

The configuration:

     - type: custom:useful-markdown-card
       padding: 0 15%                   
       fontSize: 200px                  
       #title: Time                     
       content: >                       
         [[ sensor.time.state ]]
1 Like

It is here if you are still interested.

Hi JT,

I have a special request…bc I’m barely js literate. I can read some but writing it is over my head.
I dig your clock, but I don’t need the seconds and I was hoping to request a change to the font and background pic.

A dream come true would be with a weather widget…so:

But I could live without the weather.
I love this flip clock that was on the HTC HD2 back in the day.
Could you help out with the heavy lifting (js)? I could do the background mockup. It’s basically a dark gray or black semi transparent background with the white squares where the time font should be overlayed.

The time display in the clock I posted above came from a sensor.local_time, I also removed second from my local_time since:

  - platform: template
        value_template: "{{ as_timestamp(now()) | timestamp_custom('%-I:%M') }}"
        entity_id: sensor.time

%-I display, i.e. 3:12, use %H instead if you want 03:12.

For the weather widget, if you look at the 2nd banner badge (version 2.1 here ):


That has weather icon and temperature, same idea can be used for weather widget/clock. I used - type: state-icon with sensor.pws_weather_1d from WUnderground but their icon won’t scale any bigger though.

Hope that helps.

1 Like

The ‘value_template’ …where does this go? In your config.yaml?
Are you running home assistant or hass.io?

Running Hassbian on Ubuntu. The value_template part should be in the configuration.yaml, sensor section.

Ah. Hmm. I’m running homeassistant…

Should be the same.

the value template kills my config.yaml

Would you please show your code and any error from log?

  - platform: time_date
      - 'time'
      - 'date'
      - 'date_time'
      - 'time_date'
      - 'time_utc'

^^this works

  - platform: template
        value_template: "{{as_timestamp(now()) | timestamp_custom('%-I:%M %p')}}"
        entity_id: sensor.time
        value_template: "{{as_timestamp(now()) | timestamp_custom('%A %B %-d')}}"
        entity_id: sensor.date

^^this has no effect

Hmm, works for me:


So sensor.local_time did not show anything for you? How about sensor.time, is it showing anything?

sensor.time works for me.

Question: on mobile, the font size is very small. Is there a way to increase the font size for smaller resolutions?

Depends what card you are using, in picture-elements, for example, you can try to increase the font size in the state-label, style, font-size. Screen size creatures a different challenge, you may want to test out different units to see what works best, like %, vw, hw.

Ok, I think using % will be solve my issue.


With sensor.local_time the time value only appears as a hyphen.