Clock card?

Hi.
is there a “clock card” for lovelace?
a nice big “clock card”?

Thanks
Refael

Take a look here:


I made a background image in the color of my cards and used it

              - type: picture-elements    
                image: /local/clock_bg_263137.png
                elements:      
                  - type: state-label
                    entity: sensor.time
                    style:
                      top: 35%
                      left: 50%
                      font-size: 5vw
                      color: white
      
                  - type: state-label
                    entity: sensor.date
                    style:
                      top: 70%
                      left: 50%
                      font-size: 2vw
                      color: white

Auswahl_013

Thanks very much
Refael

Got his working but, have an odd element in the centr of the image (see attached).
I created a simple .png file filled with only color.hassio-clock

This ‘odd’ element is shown when HA can’t find your picture.
Should be in the www folder and that points to /local.
If you still created the folder, you have to restart HA.

Simple clock
clock

/config/www/clock-card.js


class ClockCard extends Polymer.Element {
  set hass(hass) {
    if (!this.content) {
      const card = document.createElement('ha-card');
      card.header = 'What the time ?';
      this.content = document.createElement('div');
      this.content.style.padding = '0 16px 16px';
      card.appendChild(this.content);
      this.appendChild(card);
    }
    //const entityId = this.config.entity;
    //const state = hass.states[entityId];
    //const stateStr = state ? state.state : 'unavailable';
    const stateTime = moment().format('h:mm A');
    const stateDate = moment().format('dddd, MMMM DD');
    this.content.innerHTML = `
          <style>
        :host {
          cursor: pointer;
        }
        .content {
          padding: 24px 16px;
          display:flex;
        }
        .gtlogo{
	        background-image: url("/local/images/gt-logo.png");
		    background-size: contain;
		    background-repeat: no-repeat;
		    width:92px;
        }
        .time {
          font-family: var(--paper-font-headline_-_font-family);
          -webkit-font-smoothing: var(--paper-font-headline_-_-webkit-font-smoothing);
          font-size: 3em;
          font-weight: var(--paper-font-headline_-_font-weight);
          letter-spacing: var(--paper-font-headline_-_letter-spacing);
          line-height: 1em;
          text-rendering: var(--paper-font-common-expensive-kerning_-_text-rendering);
        }
        .date {
	      color: var(--accent-color);
          font-family: var(--paper-font-headline_-_font-family);
          -webkit-font-smoothing: var(--paper-font-headline_-_-webkit-font-smoothing);
          font-size: 1.3em;
          font-weight: var(--paper-font-headline_-_font-weight);
          letter-spacing: var(--paper-font-headline_-_letter-spacing);
          line-height: var(--paper-font-headline_-_line-height);
          text-rendering: var(--paper-font-common-expensive-kerning_-_text-rendering);
        }
      </style>
      <ha-card>
        <div class="content">
	      <div class="gtlogo"></div>
	      <div class="clock">
		    <div class="time" id="time">${stateTime}</div>
		    <div class="date" id="date">${stateDate}</div>
	      </div>
        </div>
      </ha-card>
    `;
  }

  setConfig(config) {
    this.config = config;
  }

  // The height of your card. Home Assistant uses this to automatically
  // distribute all cards over the available columns.
  getCardSize() {
    return 3;
  }
}

customElements.define('clock-card', ClockCard);

/config/ui-lovelace.yaml
NOTES : moment.js import before

resources:
  - url: /local/moment.js
    type: js
  - url: /local/clock-card.js
    type: js
 
        cards:

          - type: custom:clock-card
            #entity: sensor.latest_available_version

@vipk31 I like that. Exactly what I need/want. How do I go about implementing this? I tried to create the clock-card.js with your code. I added the location to my resources: list. When I add the card to Lovelace, i get a " Uncaught ReferenceError: moment is not defined". I added moment.js to www and got the same error. Any help would be appreciated.

Oh and i had to be sure to replace your image file with this one :slight_smile:

@VMCosco
I update source code . plz refer
NOTES : moment.js import before.
I also like liverpool (^.^)

If that doesn’t work, you should refresh lovelace the first time you start

good luck !!!

1 Like

@vipk31 Working perfectly. Thanks!! How can I remove or change the title? It says “Example Card”

const card = document.createElement(‘ha-card’);
card.header = ‘What the time ?’; // can set is null

Not sure if I am reading this correctly but where is moment.js? I can’t seem to find it.

I grabbed it from here

Thank you so much good sir!

It would be great if you can add this to github.

Thank you for this!