hey
perhaps someone can help, since the newest update to browser_mod 2.0 i have the problem that my popups have no background anymore and they were transparent.
i only change this code:
ction: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: My title
content:
This is an awesome UI, and I finally got around to making the changes needed for my environment and implementing the same.
I had one question about using an existing dashbaord as a popup in the Historik section.
I would like to display Home Assistant’s energy dashboard as a popup, when the Historik button is clicked.
Any recommendations on how I can go about doing this ?
Thanks !
found by searching for the word “transparent” A different take on designing a Lovelace UI - #3934 by arifroni
I have this but it still needs a bit of work, all the cards are available, see this link Energy Cards - Home Assistant
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Energy
size: fullscreen
content:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 2fr 2fr;
grid-template-areas: |
"date date"
"solar details"
"usage details"
mediaquery:
#portrait
"(max-width: 1200px)":
grid-template-columns: 1fr
grid-template-rows: repeat(3, 1fr)
grid-template-areas: |
"date"
"solar"
"usage"
"details"
cards:
- type: energy-date-selection
view_layout:
grid-area: date
- type: energy-solar-graph
view_layout:
grid-area: solar
title: Solar production
show_header_toggle: false
card_mod:
class: header
- type: energy-devices-graph
view_layout:
grid-area: usage
title: Individual devices
show_header_toggle: false
card_mod:
class: header
Thanks, I searched but must have missed it.
i read in a older post from you and @Laffer that you get with the “google cast integration” information from netflix, but i only get wich app is playing no title of the playing media or a icon, do you get a icon or title of the playing media in netflix over this integration?
I ended up getting the Apple TV not the shield, so I can’t help you with that one, but @Laffer has his full config so you could look there, I have had a look and it looks like there is little more work needed, see this post for more details or look into his config.
okay i buyed a apple tv 4K 4th Generation, can you explain how you get the information from netflix ? over which integration have you added the AppleTV?
thanks, can you test latest?
Compared to an Apple TV, the SHIELD is unpredictable with what info is visible in Home Assistant.
That’s one of the reasons I’ve attempted to create template sensors - to mitigate this.
I’m currently only using Plex with my SHIELD, and Apple TV for everything else.
One thing you could try is the Android TV integration. I used it at some point, and if I remember correctly, it did show some additional info.
Can anyone help with the code for my camera popup? thx in advance…
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Kameras
style: >
--popup-max-width: calc(385px + 385px);
--ha-card-border-radius: 0;
card_mod:
style:
layout-card:
$grid-layout$:
# card divider border
.: |
#root {
margin: -24px 0 !important;
}
hui-entities-card:
$: |
.card-content {
padding: var(--tablet-popup-content-padding);
padding-bottom: 0.8em;
}
ha-card {
border-right: 1.5px solid rgba(0, 0, 0, 0.2);
border-radius: 0;
transition: none;
}
/* portrait */
@media screen and (max-width: 1200px) {
ha-card {
border-right: none;
border-bottom: 1.5px solid rgba(0, 0, 0, 0.2);
}
}
$hui-horizontal-stack-card:
# horizontal bottom buttons
$: |
#root {
justify-content: space-evenly;
margin-top: 1.7em;
max-width: 82vw; /* iphonex */
}
content:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
margin: 0
grid-template-columns: 385px 385px
grid-template-rows: 1fr
grid-template-areas: |
"terrasse haustür"
mediaquery:
#portrait
"(max-width: 1200px)":
grid-template-columns: 1fr
grid-template-rows: repeat(2, 1fr)
grid-template-areas: |
"terrasse"
"haustür"
cards:
### TERRASSE
- type: entities
view_layout:
grid-area: terrasse
title: Terrasse
show_header_toggle: false
card_mod:
class: header
entities:
- type: picture-elements
elements: []
camera_image: camera.blink_terrasse
show_info: false
show_state: false
show_name: false
### HAUSTÜR
- type: entities
view_layout:
grid-area: haustür
title: Haustür
state_color: true
show_header_toggle: false
card_mod:
class: header
entities:
- type: picture-elements
elements: []
camera_image: camera.blink_haustur
show_info: false
show_state: false
show_name: false
Why use a picture-elements card if you have no elements on top of it? You could try with picture-entity.
Im just editing the sidebar template. Im adding my own weather and battery code. Is there anyway to control the styling of the sidebar, i.e. text sizies and icon sizes, for things i am adding? How is that done. I’m strugging to see how I can control some of these elements.
On reading the docs again, I’m not sure it’s possible to add type:picture-elements or type:picture-entity to an entities card. Why not use two vertical stacks, one for Terrasse and one for Haustür? Or simply use only the picture-entity cards?
Hi
I need some help.
I started to migrate my zigbee devices from zha to zigbee2mqtt
I modified the sidebar.yaml file with the new name of my entities but the display of powered on devices don’t works anymore
{% set lights = [
states.switch.0x680ae2fffe82bf8b,
states.switch.0x842e14fffe7f2dd9
] %}
{% set lights_on = lights | selectattr('state','eq','on') | list %}
In “model” tabs, the code above give me “UndefinedError: ‘None’ has no attribute ‘state’” while I do have an on state for these elements
I think I must change something in the code but I don’t know what. Can someone help me ?
you can do this using HTML and CSS,
see the time section for example
time: >
{% set hours = now().strftime('%H') %}
{% set minutes = now().strftime('%M') %}
<span class="time">
{{ hours }}<span class="time-colon">:</span>{{ minutes }}
</span>
span is a HTML tag and class=“time” is a css class, if you look for where the css class of time is defined it is in button_card_templates/sidebar.yaml, like so.
.time {
font-size: var(--sidebar-time-font-size);
font-weight: 300;
line-height: var(--sidebar-time-line-height);
letter-spacing: 0.11vw;
margin-left: -0.3vw;
color: rgba(255, 255, 255, 0.8);
}
you can add HTML tags with CSS classes and then define the styling via CSS.
if you dont know HTML CSS the following links are a good start
I can’t see any issue with the code you have shown.
working much better now, I did think of adding searching to your api, so depending on the data we get out from home assistant we can refine the search with more and more details to improve the matching, and we just use the 1st match
| endpoint | description |
|---|---|
| get/ | use the history to find the more resent video |
| get/?id={id} | get the details for that vide ID |
| get/?title={title} | search by title and get the 1st match |
| get/?title={title}&channel={channel} | search by title on the given channel |
@Laffer
the Apple TV is working well, little annoying the the current app is not reported until you start playing content in that app, my quick actions to open say Plex won’t work the same with the Apple TV as the Apple TV won’t report back that Plex is open until i start playing content, so the buttons can ask Plex to be opened but can show that Plex is open until something is played.