Just a big clock


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.


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.


Would you please show your picture-elements code for this?

- type: picture-elements
  image: /local/clock_template.png
  - type: state-label
    entity: sensor.time


Did you have any style: line after entity: sensor.time?


indeed, I do.

      top: 50%
      left: 50%
      font-size: 15vw
      color: black #dk gray
      filter: opacity(70%)


Last thing I can think of is comment out the image: to test.
If you still can’t even see sensor.time, there is something else wrong.