Hi there,
I have a complex card, that shows my active Movie/Series on an old iPad.
This worked fine over a year since I created it, but with 2023.8 and Button 4.x after a while the Pictures goes black (sometimes one, sometimes both) and after a while the browser crashes.
Does anyone have a clue why?
Thanks - Michael
This is what the card look like when everything is good:
This is an example of the black whole:
And this is the code of the card:
type: custom:button-card
entity: sensor.movieurl
show_name: false
show_icon: false
show_state: false
custom_fields:
picture_behind:
card:
type: custom:button-card
entity: sensor.movieurl
show_icon: false
show_name: false
style: |
ha-card {
box-shadow: none;
background: none;
height: 768px;
border: none;
}
the_shadow:
card:
type: custom:button-card
style: |
ha-card {
box-shadow: none;
background: rgba(0,0,0,0.5);
height: 768px;
border: none;
}
picture: >-
[[[return `<div><img src="${entity.state}"
style="height:${entity.attributes.height}px;width:${entity.attributes.width}px;z-index:0;"></div>`]]]
the_overlay:
card:
type: custom:button-card
style: |
ha-card {
height: 150px;
background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 50%,rgba(0,0,0,0) 100%);
border: none;
border-radius: 0px;
}
the_2nd_overlay:
card:
type: custom:button-card
style: |
ha-card {
background: none;
border: none
}
title:
card:
type: custom:button-card
name: '[[[return `${entity.attributes.title}`]]]'
styles:
name:
- font-size: 40px
- font-weight: 800
- text-transform: uppercase
style: |
ha-card {
box-shadow: none;
background: none;
height: 100px;
border: none;
}
playheadBack: ''
playhead: ''
playhead2: ''
styles:
card:
- height: 768px
- width: 1024px
- margin: 0px
- padding: 0px
- border: none
- box-shadow: none
custom_fields:
picture_behind:
- z-index: 1
- position: absolute
- filter: blur(6px)
- border: none
- left: 0px
- top: 0px
- width: 1024px
- margin: 0 0 0 0
- padding: 0 0 0 0
- background: '[[[return ` center url("${entity.state}")`]]]'
the_shadow:
- z-index: 1
- border: none
- position: absolute
- left: 0px
- top: 0px
- width: 1024px
- margin: '-10 -10 -10 -10'
- padding: 0 0 0 0
picture:
- z-index: 2
- position: absolute
- border: none
- left: 0px
- top: 0px
- width: 1024px
- height: auto
- padding: 0 0 0 0
- margin-top: auto
- margin-bottom: auto
the_overlay:
- z-index: 3
- position: absolute
- border: none
- left: 0px
- width: 1024px
- bottom: '[[[return `${entity.attributes.differenz}px`]]]'
- margin: 0 0 0 0
- padding: 0 0 0 0
the_2nd_overlay:
- z-index: 4
- position: absolute
- background: rgba(0,0,0,0.9)
- bottom: 0px
- height: '[[[return `${entity.attributes.differenz}px`]]]'
- border: none
- width: 1024px
- margin: 0 0 0 0
- padding: 0 0 0 0
title:
- z-index: 5
- position: absolute
- border: none
- left: 0px
- bottom: 40px
- width: 1024px
- margin: 0 0 0 0
- padding: 0 0 0 0
playheadBack:
- position: absolute
- bottom: 20px
- left: 50px
- z-index: 10
- width: 924px
- height: 20px
- background: rgba(255,255,255,0.1)
- border-radius: 10px
playhead:
- position: absolute
- bottom: 20px
- left: 50px
- z-index: 11
- width: '[[[ return `${states[''sensor.playheadwidth''].state}px`]]]'
- height: 20px
- background: rgba(255,255,255,0.3)
- border-radius: 10px 0px 0px 10px
playhead2:
- position: absolute
- bottom: 20px
- left: '[[[ return `calc(${states[''sensor.playheadwidth''].state}px + 50px`]]]'
- z-index: 12
- width: 3px
- height: 20px
- background: rgba(255,255,255,1)
- border-radius: 0px