Hallo zusammen,
ich bastel gerade an meinem Dashboard herum und möchte gerne ein Dashboard bauen, dass wenn möglich auf Handy und PC die gleiche basis hat und sich aber verschieden verhält.
Bisher komme ich damit ganz gut zurecht. Habe allerdings eine Frage.
Meine Navbar-card sieht aktuell so aus:
Räume werden automatisch nach den Stockwerken befüllt und angezeigt. Allerdings möchte ich einige der Kacheln im Hintergrund auch in die Navbar packen.
Es wird allerdings sehr klein am Handy, wenn ich noch ein Menüpunkt einfüge.
Habt ihr irgendwelche Ideen, wie ich das am besten machen kann?
Theoretisch kann ich die Stockwerke zusammenfassen, dann würde ich allerdings sehr viele Räume haben.
Navbar Code
---
# navbar
type: custom:navbar-card
routes:
- url: /lovelace-mobile/start
icon_selected: mdi:home
icon: mdi:home-outline
label: Startseite
- icon: mdi:home-floor-negative-1
label: "UG"
tap_action: { action: open-popup }
popup: |
[[[
return Object.values(hass.areas)
.filter(area => area.floor_id === 'keller')
.map(area => {
const lightCountEntityId = 'number.count_lights_' + area.area_id;
const lightCountState = states[lightCountEntityId];
let badgeCount = 0;
let showBadge = false;
if (lightCountState && lightCountState.state > 0) {
badgeCount = Math.ceil(lightCountState.state);
showBadge = true;
}
return {
label: area.name,
url: "/lovelace-mobile/room-ug-" + area.area_id,
icon: area.icon,
badge: {
show: showBadge,
count: badgeCount
}
}
});
]]]
selected: |
[[[
const path = window.location.pathname;
return path.startsWith('/lovelace-mobile/room-ug-');
]]]
badge:
show: |
[[[ return states['number.count_lights_ug'].state > 0; ]]]
count: |
[[[ return Math.ceil(states['number.count_lights_ug'].state); ]]]
- icon: mdi:home-floor-g
label: "EG"
tap_action: { action: open-popup }
popup: |
[[[
return Object.values(hass.areas)
.filter(area => area.floor_id === 'eg')
.map(area => {
const lightCountEntityId = 'number.count_lights_' + area.area_id;
const lightCountState = states[lightCountEntityId];
let badgeCount = 0;
let showBadge = false;
if (lightCountState && lightCountState.state > 0) {
badgeCount = Math.ceil(lightCountState.state);
showBadge = true;
}
return {
label: area.name,
url: "/lovelace-mobile/room-eg-" + area.area_id,
icon: area.icon,
badge: {
show: showBadge,
count: badgeCount
}
}
});
]]]
selected: |
[[[
const path = window.location.pathname;
return path.startsWith('/lovelace-mobile/room-eg-');
]]]
badge:
show: |
[[[ return states['number.count_lights_eg'].state > 0; ]]]
count: |
[[[ return Math.ceil(states['number.count_lights_eg'].state); ]]]
- icon: mdi:home-floor-1
label: "1. OG"
tap_action: { action: open-popup }
popup: |
[[[
return Object.values(hass.areas)
.filter(area => area.floor_id === '1_og')
.map(area => {
const lightCountEntityId = 'number.count_lights_' + area.area_id;
const lightCountState = states[lightCountEntityId];
let badgeCount = 0;
let showBadge = false;
if (lightCountState && lightCountState.state > 0) {
badgeCount = Math.ceil(lightCountState.state);
showBadge = true;
}
return {
label: area.name,
url: "/lovelace-mobile/room-1og-" + area.area_id,
icon: area.icon,
badge: {
show: showBadge,
count: badgeCount
}
}
});
]]]
selected: |
[[[
const path = window.location.pathname;
return path.startsWith('/lovelace-mobile/room-1og-');
]]]
badge:
show: |
[[[ return states['number.count_lights_1_og'].state > 0; ]]]
count: |
[[[ return Math.ceil(states['number.count_lights_1_og'].state); ]]]
# - url: /lovelace-mobile/server
# icon: mdi:home-modern
# label: Details
- url: /lovelace-mobile/miguel
icon: mdi:cog
label: "Profil"
image: |
[[[ return hass.states['person.miguel'].attributes.entity_picture ]]]
hidden: |
[[[ return user.name != 'Miguel' ]]]
- icon: mdi:dots-horizontal
label: Mehr
tap_action:
action: open-popup
popup:
- icon: mdi:account
url: /profile/general
- icon: mdi:cog
url: /config/dashboard
hidden: |
[[[ return user.name != 'Miguel' ]]]
- icon: mdi:hammer
url: /developer-tools/yaml
hidden: |
[[[ return user.name != 'Miguel' ]]]
- icon: mdi:power
hidden: |
[[[ return user.name != 'Miguel' ]]]
tap_action:
action: call-service
service: homeassistant.restart
service_data: {}
confirmation:
text: Are you sure you want to restart Home Assistant?
desktop:
position: left
show_labels: true
min_width: 768
mobile:
show_labels: true
media_player:
entity: media_player.spotify_miguel
album_cover_background: true
layout:
auto-padding:
enabled: true
styles: |
.image {
border-radius: 16px !important;
}
Danke schonmal für euren Input 