🔹 Browser_mod - turn your browser into a controllable device, and a media_player

Yes that settings hides the sidebar so you don’t see the hamburger menu on the top left.

If you only have a couple of browsers registered, I would delete all of them in the browser mod settings and start over. Sounds like you changed some things and you weren’t quite sure what they did. Don’t hide any of the side bars until you are sure the browser mod settings are correct for that browser.

Your quite welcome :slight_smile:

1 Like

I only have 3 registered in the browser_mod settings. And I edited their names as the poured up to aid recognising then to the device. They each got added when I went to the devices browser and then to HA from there.
So what I’m not sure about it how to get the wall tablet to appear in the browser_mod as a registered device.
Ok thinking about it as I write, so I need to physically open the wall tablet side panel and go to browser_mod menu, then add “this browser” as a device in HA. Is that right?

Yup that is correct.

1 Like

Thank you so much! In one small response you have totally changed my view of the new browser_mod v.2!

Guys… am i right that if i hide header i also disable sidebar? I’m running fully kiosk and with “hide header” set to true i can’t access sidebar (at least i don’t know how - if i swipe from left to right fully settings appear). Is this correct behaviour?

Second: is there any way to enable/disable these show/hide settings from card? Let me explain: i don’t hide my header/sidebar to prevent persons from browsing, but for lovelace to “look nice”. Currently i’m using kiosk hacs add-on and i can disable it from lovelace card with toggling “input_boolean” defined for it. Can be same achieved here? Since it would make hacs kiosk addon needless then…

No I don’t think the two are linked. As last just now with the help of my daughter who’s at home, I hide the side bar and it doesn’t hide the header. So I assume the reverse would be true.

So I managed to sort out the wall tablet. But not so much joy with my wife’s iPhone. I wanted to set the default dashboard from browser_mod and also hide the side bar and header. However initially it looks like it worked, but then when the user refreshes the page by dragging down from top of the screen, the original header is back with the hamburger side menu button!

Is there something else to be done for iPhones? I know that Apple are very conservative on third party app controls… Ok the android wall tablet and my phone it all works as expected.

Once you’ve hidden the side bar on a device you have to disable that from an admin account browser, as far as I know anyway. But yes, with browser mod once it’s hidden, it’s hidden.

1 Like

Yep, you’re right, thanks. If i have “always hide sidebar” enabled in personal settings then sidebar is also unavailable when i hide header from browser mod. However, if sidebar is set to visible then it’s there. Good to know.
OK, if a person is not admin then there’s not much to do with that account anyway, so it’s acceptable. Before i used kiosk on/off switch to, say, reselect lovelace when blank page appeared on tablet - before at login (or sometimes reset) default lovelace appeared and if a person didn’t have access to it a blank page appeared, so i’ve had to select person’s lovelace manually from sidebar. Now i can assign default lovelace for each user in browser mod, so that doesn’t happen anymore.

Hi, I want to join your discussion, you wrote that you were having problems with the dashboards, I explain my problem to understand if it is the same as yours: I begin to use two dashboards one main that I use for the PC and one for the android tablet with the app (wall dashboard) after updating to browser_mod 2, in the tablet I seem to have a blank page and to view it I have to restart HA or do many refreshes, is it the same problem you had? and is yes can you explain to me the various steps of how you solved it? thank you

I just updated to the 2022.10.3 and now my Browser_Mod is not working as before…was there a breaking change and will an update for Browser_mob be released to fix it? I only just got it all working with the help of this thread…so I was a bit hacked off that the HA update seems to have broken it again.

Please can anyone else confirm this has happened to them as well with this update?

is there a way to identify if it is a mobile device to open the popup in fullscreen?

Hi angusc,
my Browser_Mod was also corrupted by the HA update

1 Like

Thank you for confirming a breaking change to browser_mod do we need to report it on the official github? I would have reverted back to the previous HA but I didn’t do the back up and I had made a lot of other changes to the system that day…I have to wait for someone to find the fix for this.

I have the same question. Did you find a solution for this? I don’t want the popup to close after clicking the left or right buttons. Tx for your reply.

Hi, what is the most elegant way of calling a popup from another popup?
The code I am using is below, what happens however, is that the second popup “flashes” the background (since the first popup blurs the background, then the second unblurs it and reblurs it quickly). Is there a better way to achieve this?

          - type: horizontal-stack
            cards:
              - type: custom:button-card
                name: Lights
                template: main-level-button
                icon: mdi:lightbulb-group
                entity: light.light_group_all_lights
                tap_action:
                  haptic: medium
                  action: fire-dom-event
                  browser_mod:
                    service: browser_mod.popup
                    data:
                      card_mod:
                        style:
                          ha-dialog$: |
                            div.mdc-dialog__scrim {
                              backdrop-filter: blur(15px) !important;
                              -webkit-backdrop-filter: blur(15px) !important;
                            }
                            @media {
                              div.mdc-dialog div.mdc-dialog__container {
                                align-items: start;
                                padding-top: 60px;
                              }
                            }
                          .: |
                            ha-dialog {
                              --mdc-dialog-min-width: 200px !important;
                              --mdc-dialog-max-width: 200px !important;
                            }
                            :host .content {
                              width: auto !important;
                              display:flex !important;
                              flex-direction: column !important;
                              justify-content: center !important;
                              align-items: center !important;
                            }
                      style: |
                        --popup-border-radius: 0px;
                        --popup-border-width: 0px;
                        --popup-border-color: rgba(0,0,0,0);
                        --popup-background-color: rgba(0,0,0,0);
                        --popup-padding-x: 0px;
                        --popup-padding-y: 0px;
                      content:
                        type: vertical-stack
                        cards:
                          - type: custom:button-card
                            template: title2
                            name: LIGHTS
                          - type: custom:gap-card
                            height: 20
                          - type: custom:button-card
                            name: ALL
                            entity: light.light_group_all_lights
                            template: normal-button
                            icon: mdi:lightbulb-group
                          - type: custom:gap-card
                            height: 10
                          - type: custom:button-card
                            name: Entry
                            entity: light.light_group_entry
                            template: normal-button
                            icon: mdi:door-closed
                            tap_action:
                              haptic: medium
                              action: fire-dom-event
                              browser_mod:
                                service: browser_mod.popup
                                data:
                                  card_mod:
                                    style:
                                      ha-dialog$: |
                                        div.mdc-dialog__scrim {
                                          backdrop-filter: blur(15px) !important;
                                          -webkit-backdrop-filter: blur(15px) !important;
                                        }
                                        @media {
                                          div.mdc-dialog div.mdc-dialog__container {
                                            align-items: start;
                                            padding-top: 60px;
                                          }
                                        }
                                      .: |
                                        ha-dialog {
                                          --mdc-dialog-min-width: 200px !important;
                                          --mdc-dialog-max-width: 200px !important;
                                        }
                                        :host .content {
                                          width: auto !important;
                                          display:flex !important;
                                          flex-direction: column !important;
                                          justify-content: center !important;
                                          align-items: center !important;
                                        }
                                  style: |
                                    --popup-border-radius: 0px;
                                    --popup-border-width: 0px;
                                    --popup-border-color: rgba(0,0,0,0);
                                    --popup-background-color: rgba(0,0,0,0);
                                    --popup-padding-x: 0px;
                                    --popup-padding-y: 0px;
                                  content:
                                    type: vertical-stack
                                    cards:
                                      - type: custom:button-card
                                        template: title2
                                        name: 'LIGHTS: ENTRY'
                                      - type: custom:gap-card
                                        height: 20
                                      - type: custom:button-card
                                        name: ALL
                                        entity: light.light_group_entry
                                        template: normal-button
                                        icon: mdi:lightbulb-group

Hi, I’m trying to use an apexcharts card as a hold action, but it doesn’t seem to work using a fire-dom-event. Is this possible? This is my code:

            hold_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod:popup
                data:
                  title: Room Temps
                  content:
                    type: custom:apexcharts-card
                    graph_span: 24h
                    header:
                      show: true
                      title: Outside & Indoor Temperatures
                      show_states: false
                      colorize_states: false
                    series:
                      - entity: sensor.temperature_42
                        stroke_width: 1
                        type: area
                        opacity: 0.3
                        color: cyan
                        curve: smooth
                      - entity: sensor.average_room_temperature
                        stroke_width: 2
                        curve: smooth
                        color: blue
                      - entity: sensor.loft_temperature
                        stroke_width: 1
                        curve: smooth
                        color: red
                      - entity: sensor.garage_temp_and_humidity
                        stroke_width: 1
                        curve: smooth
                        color: green

SORTED: My error - should be browser_mod.popup not browser_mod:popup!

Can a decluttering card be used in a popup in browser mod 2? I had it working in 1, but not in 2.

Got it working

Hi, I would appreciate a bit of help - I am trying to move the popup close button “X” to the right edge instead of the current left. I have managed to move the actual “X” but it loses the button/close ability.
This is what I have:

                      card_mod:
                        style:
                          $: |
                            .mdc-icon-button {
                              position: absolute !important;
                              right: 10px !important;
                              z-index: 8 !important;
                            }

                          .: |
                            ha-icon-button {
                              position: absolute !important;
                              right: 10px !important;
                              z-index: 7 !important;
                            }

Any idea why it isnt working?