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
2 Likes
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.
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
/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 
@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
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.
Thank you so much good sir!
It would be great if you can add this to github.
Thank you for this!
This works great and does exactly as it should … but any chance you could make it support HA cast ?
Attached a plain javascript version without including the whole moment.js library.
I just modified the _updateTime function:
_updateTime(force = false) {
var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
var Digital = new Date();
var hours = Digital.getHours();
var minutes = Digital.getMinutes();
var seconds = Digital.getSeconds();
var day = Digital.getDate();
var year = Digital.getFullYear();
var month = Digital.getMonth() + 1;
if (hours <= 9) {
hours = "0" + hours;
}
if (minutes <= 9) {
minutes = "0" + minutes;
}
if (seconds <= 9) {
seconds = "0" + seconds;
}
if (day <= 9) {
day = "0" + day;
}
if (month <= 9) {
month = "0" + month;
}
this.time.innerHTML = hours + ":" + minutes + ":" + seconds;
this.date.innerHTML = days[Digital.getDay()] + ", " + day + "." + month + "." + year;
}
1 Like
I been searching for a flip clock card, something like this https://github.com/pqina/flip for example. can your card be make like this?
What are you using for the entity here? @VMCosco maybe you can help out too since it sounds like you’ve got it working as well.
Cheers
I use entity: sensor.time
1 Like
this is working great, thanks …