Just a big clock

Share your Projects! Dashboards & Frontend
3

indeed, good idea :slight_smile:

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

thx!

4

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”

5

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
6

It is here if you are still interested.

7

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.

8

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.

1 Like
9

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

10

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

11

Ah. Hmm. I’m running homeassistant…

12

Should be the same.

13

the value template kills my config.yaml

14

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

15 
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

16

Hmm, works for me:

image

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

17

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?

18

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.

19

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

20

06

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

21

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

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