NeoID
January 21, 2021, 12:39pm
1
Ever since I removed the Compact Header module (deprecated) I’ve been missing the clock in the upper right corner. I loved that feature and my wife is mad it’s gone.
Since I do not use custom themes and do not want to modify every users profile setting I tried to solve it like so:
configuration.yaml
frontend:
extra_module_url:
- /local/toolbar-clock.js
/www/toolbar-clock.js
customElements.whenDefined('mwc-icon-button').then(() => {
const haButtonMenu = document.querySelector('home-assistant').shadowRoot
.querySelector('home-assistant-main').shadowRoot
.querySelector('ha-panel-lovelace').shadowRoot
.querySelector('hui-root').shadowRoot
.querySelector('ha-button-menu');
haButtonMenu.updateComplete.then(() => {
function haClock() {
c.innerHTML = (new Date()).toLocaleTimeString(navigator.language, {
hour: '2-digit',
minute: '2-digit'
});
}
const mdcButton = haButtonMenu.querySelector('mwc-icon-button').shadowRoot
.querySelector('button')
const haMenuSpan = haButtonMenu.querySelector('mwc-icon-button').shadowRoot
.querySelector('span')
// Adjust the CSS
mdcButton.style.height = 'auto';
mdcButton.style.width = 'auto';
mdcButton.style.padding = '0px';
// Insert the clock
var c = document.createElement('span');
haMenuSpan.parentNode.replaceChild(c, haMenuSpan);
// Start the clock
haClock();
setInterval(function() {
haClock();
}, 1000);
});
})
Copying the code from toolbar-clock.js into the Chrome console adds the clock every time, but when the code is added using the configuration.yaml file I get an error message most of the time (not always though).
It looks like the code runs to early, but even after playing around with whenDefined and updateComplete I just can’t get it to work reliable.
Uncaught (in promise) TypeError: Cannot read property 'shadowRoot' of null
at toolbar-clock.js:4
Any hints would be very much appreciated.
5 Likes
I also miss the clock in the header. Have you come up with a reliable solution ?
NeoID
March 7, 2021, 10:55pm
3
Not yet unfortunately. The code works when pasting into the web-browser console, but not when adding it to HA.
rabittn
March 14, 2021, 2:54am
4
This is working for me in chrome.
I added the date and time:
NeoID
March 16, 2021, 9:31am
5
For me it seems to work only when wrapping the whole code in a delay function like so:
setTimeout(function(){
// code here
}, 3000);
3 Likes
mountwebs
September 16, 2021, 5:47pm
6
Thanks, @NeoID !https://stackoverflow.com/questions/22347521/change-time-format-to-24-hours-in-javascript
I don’t love the setTimeout (though you can easily lower the time, I use 500) - but it works. Does anyone know how to get around this?
NeoID
November 5, 2021, 2:23pm
7
Here’s is an updated version that supports core-2021.11.1:
setTimeout(function(){
customElements.whenDefined('mwc-icon-button').then(() => {
const haButtonMenu = document.querySelector('home-assistant').shadowRoot
.querySelector('home-assistant-main').shadowRoot
.querySelector('ha-panel-lovelace').shadowRoot
.querySelector('hui-root').shadowRoot
.querySelector('ha-button-menu');
haButtonMenu.updateComplete.then(() => {
function haClock() {
c.innerHTML = (new Date()).toLocaleTimeString(navigator.language, {
hour: '2-digit',
minute: '2-digit'
});
}
const mdcButton = haButtonMenu.querySelector('ha-icon-button').shadowRoot
.querySelector('mwc-icon-button').shadowRoot
.querySelector('button')
const haMenuSpan = haButtonMenu.querySelector('ha-icon-button').shadowRoot
.querySelector('mwc-icon-button').shadowRoot
.querySelector('span')
// Adjust the CSS
mdcButton.style.height = 'auto';
mdcButton.style.width = 'auto';
mdcButton.style.padding = '0px';
// Insert the clock
var c = document.createElement('span');
haMenuSpan.parentNode.replaceChild(c, haMenuSpan);
// Start the clock
haClock();
setInterval(function() {
haClock();
}, 1000);
});
})
}, 3000);
3 Likes
This is great. My time stamp was text wrapping, so I just added:
// Adjust the CSS
mdcButton.style.height = 'auto';
mdcButton.style.width = 'auto';
mdcButton.style.padding = '0px';
mdcButton.style.whiteSpace = "nowrap"
To the CSS. Thanks!
1 Like
Just what I was looking for. Thank you. Here’s how to show the date (substitute “toLocaleTimeString” with “toLocaleDateString” and then select from options described here: Intl.DateTimeFormat() constructor - JavaScript | MDN )
haButtonMenu.updateComplete.then(() => {
function haClock() {
c.innerHTML = (new Date()).toLocaleTimeString(navigator.language, {
hour: '2-digit',
minute: '2-digit'
weekday: 'short'
month: 'short'
day: 'numeric'
year: 'numeric'
});
}
And for those who may be wondering how you edit the page if the three dots are missing, note that the date and time functionally replace the three dots, so that clicking on them recovers the edit menu.
1 Like
Thanks everyone that posted in this thread, this is working perfectly for me! Also for anyone as naive as myself that wants to do this remember that you have to restart HA for the changes to show up!
RBee
January 24, 2024, 2:52pm
11
This works indeed, but only when accessing HA over a browser via the web URL. Anybody has an idea on how to show the clock instead of the dots when using the Companion app ?
The clock shows up for me with the iOS companion app (using Nabu Casa).
This hack just stopped working with HA Core Update 2024.3.0 when accessing HA over a browser. However, it continues to work in the iOS companion app.
miszou
March 11, 2024, 8:37am
14
I got it working again in 2024.3.0 on web with a few fixes.
setTimeout(function(){
customElements.whenDefined('mwc-icon-button').then(() => {
const haButtonMenu = document.querySelector('home-assistant').shadowRoot
.querySelector('home-assistant-main').shadowRoot
.querySelector('ha-drawer')
.querySelector('ha-panel-lovelace').shadowRoot
.querySelector('hui-root').shadowRoot
.querySelector('.action-items');
function haClock() {
c.innerHTML = (new Date()).toLocaleTimeString(navigator.language, {
hour: '2-digit',
minute: '2-digit',
/*
weekday: 'short',
month: 'short',
day: 'numeric',
year: 'numeric'
*/
});
}
const mdcButton = haButtonMenu.querySelector('ha-icon-button[data-selector="EDIT_DASHBOARD"]').shadowRoot
.querySelector('mwc-icon-button').shadowRoot
.querySelector('button')
const haMenuSpan = haButtonMenu.querySelector('ha-icon-button[data-selector="EDIT_DASHBOARD"]').shadowRoot
.querySelector('mwc-icon-button').shadowRoot
.querySelector('span')
// Adjust the CSS
mdcButton.style.height = 'auto';
mdcButton.style.width = 'auto';
mdcButton.style.padding = '0px';
mdcButton.style.whiteSpace = "nowrap"
// Insert the clock
var c = document.createElement('span');
haMenuSpan.parentNode.replaceChild(c, haMenuSpan);
// Start the clock
haClock();
setInterval(function() {
haClock();
}, 1000);
});
}, 500);
Thanks, but this did not work for me. It behaved similarly to the old code in that it only shows up with narrow web windows and continues to work with the iOS app.
A completely different approach is to use card-mod to create a new theme.
See the posts by Duke_box here:
Hi,
I have just updated core HA from 2024.1.6 to 2024.2.2 and noticed there is now a pencil icon where the overflow (3 dots) menu button was. This now takes you directly into edit mode rather than a submenu to enter edit mode.
I was using code from the Theme cookbook to hide the overflow menu and show a clock in its place.
This now only works if you are in edit mode which makes it rather pointless.
Here is an example from before 2024.2.2 with the card mod code in my theme.
[image]
And this…
Install card-mod:
I used the Time & Date integration (but there are other approaches):
Here is what it looks like (in web browser):
It also works in the companion app (at least the iOS app).
Here is a theme I created (without borders) modifying Duke_box’s theme:
no_borders_day_date_time:
card-mod-theme: no_borders_day_date_time
ha-card-border-radius: 2px
ha-card-border-color: rgba(0,0,0,0)
ha-card-border-width: 0px
primary-background-color: "#F3F3F3"
card-mod-root-yaml: |
.: |
/* this hides the pencil icon & replaces it with the time when browser window is wide */
ha-icon-button[data-selector="EDIT_DASHBOARD"] {
color: transparent !important;
}
ha-icon-button[data-selector="EDIT_DASHBOARD"]::after {
content: "{{ now().strftime('%A') }}" ", " "{{states('sensor.date_time')}}";
color: var(--text-primary-color);
visibility: visible;
position: relative;
font-size: 20px;
top: 14px;
right: 2px;
}
/* this hides the overflow icon & replaces it with the time when browser window is narrow or in edit mode or in the companion app */
ha-button-menu {
color: transparent !important;
}
ha-button-menu::before {
content: "{{states('sensor.date_time')}}";
color: var(--text-primary-color);
visibility: visible;
position: relative;
font-size: 14px;
top: 25px;
white-space: nowrap;
}
ha-app-layout {
--ha-card-border-width: 0px;
--ha-card-border-radius: 2px
}
'''
