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!

2 Likes

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
    elements:      
    - type: state-label
      entity: sensor.local_time
      style:
        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 ?

thx!

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:

https://github.com/thomasloven/lovelace-useful-markdown-card/pull/2

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
    sensors:
        local_time:
        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 ):

image

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?

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

^^this works

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

^^this has no effect

Hmm, works for me:

image

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.

06

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