I really like the MagicMirror2 clock and have been working on creating a dashboard for Home Assistant similar to my MagicMirror, so I made an attempt to port over the clock from the MagicMirror project into a Lovelace Card. I wanted to share in case anyone is interested:
Repo is here: https://github.com/shbatm/mm2-clock-card
I am very much interested.would you mind sharing your config? I am looking for a background picture which rotates/changes and a very transparent theme.
Atm it looks like this which is far from how it should look.
His source is on the github page!
I found the source of the clock module. I am more interested into your config for home assistant. Especially in the Lovelace part. I went through your github 77 (impressive ,-) repos with no luck finding the config.
Sorry, my config isnât in a public repo at the moment. Itâs a combo pulled from a lot of the things posted in the community. If I get time Iâll post some screenshots and code snippets.
For themes though, I use the Google Light, Google Dark, and AMOLED themes available in HACS.
Understood. Thanks anyhow.
This is mine with impressive sbath clock:
- type: custom:mm2-clock-card
timeFormat: 24
clockBold: false
dateFormat: DD/MM/YYYY
displayType: both
timezone: Europe/Madrid
Itâs a card inside a âvertical-cardâ. As always, be careful with spaces and modify it to your needs.
By the way, THANKS sbath!
I cannot get the faces to work. The files here seem to be blank. https://github.com/shbatm/mm2-clock-card/tree/master/dist/faces
Lovely clock though.
Iâve gotten the faces to work (sort of), but they were flashing. Havenât had time to really debug it yet because I only use the simple circle - maybe someone on here can help.
The files arenât blank, theyâre just white faces on a transparent background, since the MM2 default background is black.
Right now itâs hard-coded to look for them in config/www/faces/ because I havenât quite figured out how to correctly get the cardâs source folder at run time.
nice looking for an analog clock card
any chance this will come to hacs?
You can add it to HACS as a custom repo and install it that way. I havenât added it to the default repo yetâwanted to do some more testing and clean up first.
I used hacs, but it just diwnloaded a zip file. Some tidying nedeed
I use only digital clock, i want it on the right side! How? analogPlacement is only for analog 
Thereâs no direct layout for the digital clock right now within the card. Youâll have to use some Lovelace layout tools or custom resources like layout-card to fine tune the placement.
Hi, I cant get this to work, HA117, I have copied the files to the WWW directory, set lovelace resources to /local/mm2-clock-card.js, restarted HA then in lovelace i get the following error trying to set up a manual card :
Custom element doesnât exist: mm2-clock-card.
type: âcustom:mm2-clock-cardâ,
any ideas what could be the problem, Tks
how can we make this card fill the grid height?
<ha-card>
<div class="warning">${qc("common.show_warning")}</div>
</ha-card>
`:E`
<ha-card tabindex="0" aria-label=${"MM2ClockCard"}>${this.getDom()}</ha-card>
`:E``}getCardSize(){return"digital"!==this._config.displayType?6:2}static get styles(){return $`
.clockCircle {
margin: 0 auto;
position: relative;
border-radius: 50%;
background-size: 100%;
}
.clockFace {
width: 100%;
height: 100%;
}
.clockFace::after {
position: absolute;
top: 50%;
left: 50%;
width: 6px;
height: 6px;
margin: -3px 0 0 -3px;
background: var(--paper-item-icon-color);
border-radius: 3px;
content: '';
display: block;
}
.clockHour {
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 50%;
margin: -2px 0 -2px -25%; /* numbers much match negative length & thickness */
padding: 2px 0 2px 25%; /* indicator length & thickness */
background: var(--paper-item-icon-color);
-webkit-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
transform-origin: 100% 50%;
border-radius: 3px 0 0 3px;
}
.clockMinute {
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 50%;
margin: -35% -2px 0; /* numbers must match negative length & thickness */
padding: 35% 2px 0; /* indicator length & thickness */
background: var(--paper-item-icon-color);
-webkit-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
border-radius: 3px 0 0 3px;
}
.clockSecond {
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 50%;
margin: -38% -1px 0 0; /* numbers must match negative length & thickness */
padding: 38% 1px 0 0; /* indicator length & thickness */
background: #888;
-webkit-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.dimmed {
color: var(--disabled-text-color);
}
.normal {
color: var(--paper-item-icon-color);
}
.bright {
color: var(--primary-text-color);
}
.large {
font-size: 48px;
line-height: 48px;
}
.medium {
font-size: 16px;
line-height: 40px;
}
#mm2-clock-card {
color: var(--disabled-text-color);
/* font-family: 'Roboto Condensed', sans-serif; */
font-weight: 500;
font-size: 48px;
line-height: 48px;
-webkit-font-smoothing: antialiased;
padding: 15px;
}
sup {
font-size: 50%;
line-height: 50%;
}
.thin {
/* font-family: Roboto, sans-serif; */
font-weight: 300;
}
.light {
/* font-family: 'Roboto Condensed', sans-serif; */
font-weight: 400;
}
.regular {
/* font-family: 'Roboto Condensed', sans-serif; */
font-weight: 500;
}
.bold {
/* font-family: 'Roboto Condensed', sans-serif; */
font-weight: 700;
}
Iâve been collecting up various approaches for cards with the intent of figuring out which I like best⌠some donât display exactly right (I welcome improvements), but hereâs some starting points:
cards:
- type: 'custom:button-card'
aspect_ratio: 2/1
entity: sensor.date_time
hold_action:
action: more-info
show_icon: false
show_name: false
show_state: true
styles:
card:
- font-size: 60px
# - font-weight: bold
- type: 'custom:clockwork-card'
other_time: []
- type: "custom:clock-card"
size: 0
disable_seconds: true
display_date: "YYYY-MM-DD, HH:mm, DDDD"
- type: markdown
content: >
{% set time = now() %} <h1><ha-icon icon="mdi:clock"></ha-icon>{{time.hour}}:{{'{:0>2d}'.format(time.minute) }}</h1>
- type: markdown
content: >
<font size = '12pt'>
{{ '{:02}:{:02}'.format(now().hour, now().minute )}}
- type: markdown
content: >
<font size = '8pt'>
{{ '{:02}:{:02}'.format(now().hour, now().minute )}}
{{ states("sensor.date_time") }}
- type: markdown
content: >
{{ states("sensor.day_of_week") }}
- type: horizontal-stack
cards:
- type: custom:button-card
entity: ""
styles:
card:
- padding: 4%
- font-size: 70px
- filter: opacity(20%)
# - border-radius: var(--button-card-border-radius)
# - background-color: var(--button-card-background-color)
- color: var(--button-card-text-color)
grid:
- grid-template-areas: '"time date"'
- grid-template-columns: 2fr 3fr
- grid-template-rows: 1fr
custom_fields:
time:
- justify-self: start
#- font-size: 72px
date:
- justify-self: end
- font-size: 24px
# - color: var(--secondary-text-color)
custom_fields:
time: >
[[[ return states['sensor.date_time'].state ]]]
date: >
[[[ return states['sensor.day_of_week'].state ]]]
tap_action: none
hold_action: none
Thanks for sharing these - custom button card seems to work well for this application. No date above the time though. I need to figure that part out.
How do you have your time platform configured?
- platform: time_date
display_options:
- 'date_time'
Hi, you have to point the URL towards the location of your mm2-clock-card.js in your home assistant directory minus the /config/www/ the âlocalâ encompasses that.