I would like to see the ability to hide devices that are not in use.
Holiday devices, for example. I have between 40-50 total devices and at any time between my experimental devices and my holiday devices, at least 10-15 are offline (and in a box in the attic).
Similar to disable or hide integrations.
Hi Stephen,
I was facing the same issue and ended up creating a JavaScript hack that hides the unused devices. Basically, all you need is to save the script as esphome-hide-dashboards.js under /config/www/community and then register it under Dashboard → Resources. The code is very crude but works with the latest version of HA (2024.01) and ESPHome (2023.12.9). All it does is it hides the divs with unused devices in DOM. As mentioned, it works for the current structure, but if they change the structure in the future, the script needs to be updated as well. For your case, just replace the names in the device list with the names of your devices.
var esphomeHideVersion = '1.0.3'
var esphomeHideCounter = 0;
var esphomeHideDevicesList = [
'esp01-irrigation-01',
'esp8266-433-receiver',
'esp8266-garage-switch',
'esp8266-smart-table',
'esp8266-led-guest-room',
];
function esphomeHideRoutine() {
setTimeout(() => {
let error = false;
esphomeHideDevicesList.forEach(device => {
try {
let selector = document
.querySelector(`home-assistant`)
.shadowRoot
.querySelector(`home-assistant-main`)
.shadowRoot
.querySelector(`iframe[title="ESPHome"]`)
.contentDocument
.querySelector(`hassio-main`)
.shadowRoot
.querySelector(`hassio-ingress-view`)
.shadowRoot
.querySelector(`iframe`)
.contentDocument
.querySelector(`esphome-devices-list`)
.shadowRoot
.querySelector(`[data-name="${device}"]`);
if (selector)
selector.hidden = true
else
error = true;
} catch {
error = true;
}
});
if (error) {
esphomeHideCounter++;
if (esphomeHideCounter < 20){
esphomeHideRoutine();
} else{
console.error('ESPHOME HIDE DASHBOARD ERROR')
}
} else {
console.info(`%c ESPHOME HIDE DASHBOARD %c Version ${esphomeHideVersion} `, "color: orange; font-weight: bold; background: black", "color: white; font-weight: bold; background: dimgray")
}
}, 100);
}
function esphomeHide(url) {
if (url.includes('esphome/ingress')) {
esphomeHideRoutine();
}
}
navigation.addEventListener('navigate', e =>
esphomeHide(e.destination.url)
);
esphomeHide(document.URL);
Cheers,
Michal
Also if you make changes to the script you’ll need to update the query string in the Dashboard → Resources URL because of Browser Caching. Currently it says
?v=1.0.3
so one way to do it is to change the value iteratively (e.g. v=1.0.4, v=1.0.5…). But you can use any arbitrary string if you want as long as it is unique to all previous values
