Hide top bar in camera view

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

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; }

Thanks you :pray:. Unfortunately I get an error message.

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

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; }

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

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;
                  }     
                    

Thank you for your help! :pray: I get an error message. I am not really into card_mod at this stage so can you tell me what the problem is?

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;
                    }     
                      
              - 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;
              }

This one brings back the headline and white background and changing the values doesn’t move the stream :see_no_evil:. I actually do like the white background but not the headline.

The card mod has to line up with content: and a single indent can cause an issue.

image

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

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