Hi,
is there any way to hide the red marked top bar and only show the camera stream in picture elements?
- type: icon
icon: mdi:cctv
entity: camera.ultimaker
style:
top: 21.5%
left: 59.5%
color: black
transform: translate(-50%, -50%) scale(1.5, 1.5) rotate(-25deg) skewX(-30deg)
filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3))
opacity: 0.8
spodec:
camera.ultimaker
There may be other solutions, but you can use the more-info-card and card_mod to remove it.
- type: icon
icon: mdi:cctv
entity: camera.ultimaker
style:
top: 21.5%
left: 59.5%
color: black
transform: translate(-50%, -50%) scale(1.5, 1.5) rotate(-25deg) skewX(-30deg)
filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3))
opacity: 0.8
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: custom:more-info-card
entity: camera.ultimaker
card_mod:
style:
div.content: |
.content .container {
padding: 0px !important;
}
more-info-card$ha-card:
$: |
.card-header {
display: none !important;
}
:host ::slotted(.card-content) {
padding: 0px !important; }
spodec
June 10, 2024, 7:12am
3
Thanks you
Card mod and more-info-card are installed.
It’s a indentation issue… Try this
- type: icon
icon: mdi:cctv
entity: camera.ultimaker
style:
top: 21.5%
left: 59.5%
color: black
transform: translate(-50%, -50%) scale(1.5, 1.5) rotate(-10deg)
filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3))
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: custom:more-info-card
entity: camera.ultimaker
card_mod:
style:
div.content: |
.content .container {
padding: 0px !important;
}
more-info-card$ha-card:
$: |
.card-header {
display: none !important;
}
:host ::slotted(.card-content) {
padding: 0px !important; }
1 Like
spodec
June 10, 2024, 7:21am
5
Awesome. That works. One more thing: The pop up is very up to the top of the screen at the moment. How can I adjust the position and size?
If we “fix” the position the image will be larger unless we change the card_mod code
Test this…
- type: icon
icon: mdi:cctv
entity: camera.ultimaker
style:
top: 21.5%
left: 59.5%
color: black
transform: translate(-50%, -50%) scale(1.5, 1.5) rotate(-10deg)
filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3))
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: custom:more-info-card
entity: camera.ultimaker
card_mod:
style:
div.content: |
.content .container {
padding: 0px !important;
position: fixed;
bottom: 20%;
}
more-info-card$ha-card:
$: |
.card-header {
display: none !important;
}
:host ::slotted(.card-content) {
padding: 0 !important; }
spodec
June 10, 2024, 10:08am
7
This brought a white border and the name back but didn’t change anything in the positioning. I tried to change the “bottom” value without any change.
Test the entire card code. You’ll need to add an image
type: picture-elements
elements:
- type: icon
icon: mdi:cctv
entity: camera.ultimaker
style:
top: 21.5%
left: 59.5%
color: black
transform: translate(-50%, -50%) scale(1.5, 1.5) rotate(-10deg)
filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3))
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: custom:more-info-card
entity: camera.ultimaker
card_mod:
style:
div.content: |
.content .container {
padding: 0px !important;
position: fixed;
bottom: 20%;
}
more-info-card$ha-card:
$: |
.card-header {
display: none !important;
}
:host ::slotted(.card-content) {
padding: 0 !important; }
This is what I see
spodec
June 10, 2024, 11:00am
9
Yeah, thanks. It works. I had some caching problem and hat to refresh the dashboard multiple times to see the changes. I added “left” to the code to center the pop up. The Pop up is actually pretty large now. How can I change the size of it and is there any way to round the corners? “border-radius” in style options does not work?
- type: icon
icon: mdi:printer-3d-nozzle
entity: camera.ultimaker
style:
top: 10%
left: 32%
color: black
transform: translate(-50%, -50%) scale(2.5, 2.5) rotate(0deg)
filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3))
border-radius: 20px
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: custom:more-info-card
entity: camera.ultimaker
card_mod:
style:
div.content: |
.content .container {
padding: 0px !important;
position: fixed;
bottom: 14%;
left: 16%
}
more-info-card$ha-card:
$: |
.card-header {
display: none !important;
}
:host ::slotted(.card-content) {
padding: 0 !important; }
This card has multiple layers, but this is a better solution. I’m still playing with the card settings so someone may have a more streamlined resolution.
card_mod:
style:
more-info-card$ha-card:
$: |
.card-header {
display: none !important;
}
:host ::slotted(.card-content) {
padding: 0 !important;
}
more-info-content$more-info-camera$ha-camera-stream$ha-hls-player$: |
video {
border-radius: 20px !important;
width: 500px !important;
bottom: 400px;
position: fixed;
}
spodec
June 11, 2024, 8:15am
11
Thank you for your help!
Just an indent issue. Can you post your code and I’ll fix it?
card_mod:
style:
more-info-card$ha-card:
$: |
.card-header {
display: none !important;
}
:host ::slotted(.card-content) {
padding: 0 !important;
}
more-info-content$more-info-camera$ha-camera-stream$ha-hls-player$: |
video {
border-radius: 20px !important;
width: 500px !important;
bottom: 400px;
position: fixed;
}
spodec
June 11, 2024, 8:36am
13
- type: icon
icon: mdi:printer-3d-nozzle
entity: camera.ultimaker
style:
top: 10%
left: 32%
color: '#FFA54F'
transform: translate(-50%, -50%) scale(2.5, 2.5) rotate(0deg)
filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3))
opacity: 0.8
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: custom:more-info-card
entity: camera.ultimaker
card_mod:
style:
more-info-card$ha-card:
$: |
.card-header {
display: none !important;
}
:host ::slotted(.card-content) {
padding: 0 !important;
}
more-info-content$more-info-camera$ha-camera-stream$ha-hls-player$: |
video {
border-radius: 20px !important;
width: 500px !important;
bottom: 400px;
position: fixed;
}
type: picture-elements
elements:
- type: icon
icon: mdi:printer-3d-nozzle
entity: camera.ultimaker
style:
top: 10%
left: 32%
color: '#FFA54F'
transform: translate(-50%, -50%) scale(2.5, 2.5) rotate(0deg)
filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3))
opacity: 0.8
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: custom:more-info-card
entity: camera.ultimaker
card_mod:
style:
more-info-card$ha-card:
$: |
.card-header {
display: none !important;
}
:host ::slotted(.card-content) {
padding: 0 !important;
}
more-info-content$more-info-camera$ha-camera-stream$ha-hls-player$: |
video {
border-radius: 20px !important;
width: 500px !important;
bottom: 400px;
position: fixed;
}
spodec
June 11, 2024, 6:35pm
15
This one brings back the headline and white background and changing the values doesn’t move the stream
The card mod has to line up with content: and a single indent can cause an issue.
type: picture-elements
elements:
- type: icon
icon: mdi:printer-3d-nozzle
entity: camera.detached_garage_cam_fluent_lens_0
style:
top: 10%
left: 32%
color: '#FFA54F'
transform: translate(-50%, -50%) scale(2.5, 2.5) rotate(0deg)
filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3))
opacity: 0.8
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: custom:more-info-card
entity: camera.detached_garage_cam_fluent_lens_0
card_mod:
style:
div.content: |
.content .container {
padding: 0px !important;
}
more-info-card$ha-card:
$: |
.card-header {
display: none !important;
}
:host ::slotted(.card-content) {
padding: 0 !important; }
}
more-info-content$more-info-camera$ha-camera-stream$ha-hls-player$: |
video {
border-radius: 20px !important;
width: 500px !important;
bottom: 400px;
position: fixed;
border-radius: 20px !important;
}
This what I get
spodec
June 12, 2024, 10:22am
17
Mine looks similar now, but changing any value about the position or border radius doesn’t change anything. Also, Border Radius is mentioned 2x? Is this a mistake?
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: custom:more-info-card
entity: camera.ultimaker
card_mod:
style:
div.content: |
.content .container {
padding: 0px !important;
}
more-info-card$ha-card:
$: |
.card-header {
display: none !important;
}
:host ::slotted(.card-content) {
padding: 0 !important; }
}
more-info-content$more-info-camera$ha-camera-stream$ha-hls-player$: |
video {
border-radius: 100px !important;
width: 50px !important;
bottom: 10px;
position: fixed;
border-radius: 100px !important;
}
Not sure how I copy and pasted from a test card, but this is the working code.
card_mod:
style:
div.content: |
.content .container {
padding: 0px !important;
}
more-info-card$ha-card:
$: |
.card-header {
display: none !important;
}
:host ::slotted(.card-content) {
padding: 0 !important;
}
more-info-content$more-info-camera$ha-camera-stream$ha-hls-player$: |
video {
border-radius: 20px !important;
width: 500px !important;
bottom: 400px;
position: fixed;
}
For example if I adjust the border-radius to 120px i get this
spodec
June 13, 2024, 8:11am
19
It still doesn’t work for me. Can you post a picture of your working code please. I had the problem in the past that copy & pasting the code does change some tap stops. Maybe there is the problem.
Can you post your full card code and I can test/ adjust that?
. Unfortunately I get an error message.
. I actually do like the white background but not the headline.
