šŸ”¹ Browser_mod - turn your browser into a controllable device, and a media_player

okay without hacs it works.

i had another problem, i can paste by style what i want but nothing changes in the popup

tap_action:
          action: call-service
          service: browser_mod.popup
          service_data:
            style:
              align-items: center
              background-color: rgba(190, 190, 190, 0.2)
              opacity: 0.2
              padding-bottom: 50px
              border-radius: 60px
              '--ha-card-border-radius': 15px
              '--ha-card-background': '#fff5bc'
            hide_header: false
            card:
              cards:

Thanks, made my day as well.

okay, now i figured it out, the popup now works well.

i played a little bit with the css style functions.

in my firefox it works well. than i went to my tablet with fully kiosk browser, there works the css not, and then i checked my iphone with the official home assistant app, and there is NO css.
thats really weired,

can i do there something?

style: |
      @media (min-width: 812px) {
        :host .content {
          width: 40vw;
          overflow: hidden;
          height: 28vh;
          padding-top: 10px;
          align-items: center;
          background: center / cover no-repeat url("/local/profilbilder/background.jpg")
        }

I do not use IPhones neither use fully kiosk.
I have an android tablet with wallpanel in full screen mode.
That works perfectly.

Maybe reduce some customizings and start simply with height and width.
My stomach feeling is, that the background item line causes problems on your other devices.

Is there a min-width fitting to the,edia query? This was only an example.

@arganto
yeah you are right, the

@media (min-width: 812px) {

caused the problem. i removed it and now it works on both devices.

@Pirol62

the background image works fine. but thank you both

another question,

is it possible to save the code in a extra file? and include it in the lovelance ?
this would save much space.

i tried it so

tap_action: '!include /config/popup/fenster.yaml'

and the file

          
          action: fire-dom-event
          browser_mod:
            deviceID:
              - laptop_julia
              - firehd_tablet
            command: popup
            auto_close: false
            title: Fenster Sensoren
            theme: Custom Background Theme
            large: false
            style: |

              :host .content {
                padding-left: 10px;
                padding-right: 10px;
                padding-top: 10px;
                padding-bottom: 10px;
                background: center / cover no-repeat url("/local/profilbilder/background.jpg");
              }
            card:
              type: vertical-stack
              cards:
                - type: horizontal-stack
                  cards:
                    - type: custom:button-card
                      size: 40px
                      entity: binary_sensor.fenstersensor_badezimmer
                      name: Bade Zimmer
                      show_state: true
                      styles:
                        card:
                          - background-color: rgba(190, 190, 190, 0.2)
                          - height: 100px
                        grid:
                          - grid-template-areas: '"i" "n" "s"'
                          - grid-template-columns: 1fr
                          - grid-template-rows: 1fr min-content min-content
                        img_cell:
                          - align-self: center
                          - text-align: center
                        name:
                          - justify-self: center
                          - padding-left: 10px
                          - font-weight: bold
                          - font-size: 13px
                          - text-transform: uppercase
                        state:
                          - justify-self: center
                          - padding-left: 0px
                          - font-weight: light
                          - font-size: 12px
                      state:
                        - value: 'on'
                          styles:
                            icon:
                              - color: red
                    - type: custom:button-card
                      size: 40px
                      entity: binary_sensor.fenstersensor_toilette
                      name: Toilette
                      show_state: true
                      styles:
                        card:
                          - background-color: rgba(190, 190, 190, 0.2)
                          - height: 100px
                        grid:
                          - grid-template-areas: '"i" "n" "s"'
                          - grid-template-columns: 1fr
                          - grid-template-rows: 1fr min-content min-content
                        img_cell:
                          - align-self: center
                          - text-align: center
                        name:
                          - justify-self: center
                          - padding-left: 10px
                          - font-weight: bold
                          - font-size: 13px
                          - text-transform: uppercase
                        state:
                          - justify-self: center
                          - padding-left: 0px
                          - font-weight: light
                          - font-size: 12px
                      state:
                        - value: 'on'
                          styles:
                            icon:
                              - color: red
                    - type: custom:button-card
                      size: 40px
                      entity: binary_sensor.fenstersensor_kinderzimmer
                      name: Kinder Zimmer
                      show_state: true
                      styles:
                        card:
                          - background-color: rgba(190, 190, 190, 0.2)
                          - height: 100px
                        grid:
                          - grid-template-areas: '"i" "n" "s"'
                          - grid-template-columns: 1fr
                          - grid-template-rows: 1fr min-content min-content
                        img_cell:
                          - align-self: center
                          - text-align: center
                        name:
                          - justify-self: center
                          - padding-left: 10px
                          - font-weight: bold
                          - font-size: 13px
                          - text-transform: uppercase
                        state:
                          - justify-self: center
                          - padding-left: 0px
                          - font-weight: light
                          - font-size: 12px
                      state:
                        - value: 'on'
                          styles:
                            icon:
                              - color: red
                - type: horizontal-stack
                  cards:
                    - type: custom:button-card
                      size: 40px
                      entity: binary_sensor.fenstersensor_schlafzimmer
                      name: Schlaf Zimmer
                      show_state: true
                      styles:
                        card:
                          - background-color: rgba(190, 190, 190, 0.2)
                          - height: 100px
                        grid:
                          - grid-template-areas: '"i" "n" "s"'
                          - grid-template-columns: 1fr
                          - grid-template-rows: 1fr min-content min-content
                        img_cell:
                          - align-self: center
                          - text-align: center
                        name:
                          - justify-self: center
                          - padding-left: 10px
                          - font-weight: bold
                          - font-size: 13px
                          - text-transform: uppercase
                        state:
                          - justify-self: center
                          - padding-left: 0px
                          - font-weight: light
                          - font-size: 12px
                      state:
                        - value: 'on'
                          styles:
                            icon:
                              - color: red
                    - type: custom:button-card
                      size: 40px
                      entity: binary_sensor.fenstersensor_wohnzimmer
                      name: Wohn Zimmer
                      show_state: true
                      styles:
                        card:
                          - background-color: rgba(190, 190, 190, 0.2)
                          - height: 100px
                        grid:
                          - grid-template-areas: '"i" "n" "s"'
                          - grid-template-columns: 1fr
                          - grid-template-rows: 1fr min-content min-content
                        img_cell:
                          - align-self: center
                          - text-align: center
                        name:
                          - justify-self: center
                          - padding-left: 10px
                          - font-weight: bold
                          - font-size: 13px
                          - text-transform: uppercase
                        state:
                          - justify-self: center
                          - padding-left: 0px
                          - font-weight: light
                          - font-size: 12px
                      state:
                        - value: 'on'
                          styles:
                            icon:
                              - color: red
                - type: horizontal-stack
                  cards:
                    - type: custom:button-card
                      name: Mehr Informationen
                      color_type: icon
                      tap_action:
                        action: navigate
                        navigation_path: /lovelace/fenster
                      color: rgb(3,169,244)
                      icon: mdi:weather-night
                      show_state: true
                      styles:
                        card:
                          - background-color: rgba(190, 190, 190, 0.2)
                          - height: 50px
                        grid:
                          - grid-template-areas: '"i" "n" "s"'
                          - grid-template-columns: 1fr
                          - grid-template-rows: 1fr min-content min-content
                        img_cell:
                          - align-self: start
                          - text-align: start
                        name:
                          - padding-left: 0px
                          - font-weight: bold
                          - font-size: 13px
                          - text-transform: uppercase
                        state:
                          - justify-self: start
                          - padding-left: 10px

i get this error in the logs

http://192.168.0.73:8123/hacsfiles/button-card/button-card.js?hacstag=146194325342:547:3849 TypeError: 0 is read-only

I just started trying browser_mod. So far I just use it to replace a few more-info dialogs, but itā€™s fascinating seeing all the creativity it brings.

I have two questions:

  1. Can I template somehow to inherit the entity so I dont have to specify each sensor again - like in template-entity-row? I tried a few combinations, but havenā€™t succeeded so far. See mockup below.

  2. When I use another card for more-info, the close X isnā€™t centered and the dividing row is missing(?). Expected behavior, a bug or something I can do? https://imgur.com/a/kOctecU

My config:

    popup_cards:
      sensor.floor_1_temperature_tmpl:
        title: EntrƩplan
        card:
          type: custom:mini-graph-card
          entities:
            - [config.entity]
          show:
            icon: false
            name: false

How I can popup this window directly from input_datetime.mami_google_calendar_date

I try like this:

service: browser_mod.more_info
data:
  entity_id: input_datetime.mami_google_calendar_date

but I get this:
pic21

and then I must click on date to get what I wanna heave.

browser_mod.more_info does nothing else like:

tap_action:
    action: more-info

you should use the command popup like in many examples above

tap_action:
  action: fire-dom-event
  browser_mod:
    command: popup
    title: Calendar
    card:
      type: calendar
      entities:
        - calendar.gmail_1
        - calendar.gmail_2
    initial_view: dayGridMonth

I need popup for input_datetime.mami_google_calendar_date to set date, not calendar.

this card:

Then define it in the raw config editor like this

views:
  - popup_cards:
      input_datetime.mami_google_calendar_date:
        card:

If this is not what youā€™re looking for then Iā€™m outā€¦

Thx for trying to help, but I need card that popup after click on calendar icon.

01

Hi everyone, do you know if this integration works with the new HA Browser RADIO feature?
I tried with an automation but it says itā€™s not compatible.

1 Like

Yes, If you declare the view in the raw editor, you must no declare anything further in a card or button-card.
The klick on the item replaces the default and shoud provide what you configured
I declared this:

views:
  - popup_cards:
      sensor.current_motion_location:
        card:
          entities:
            - entity: binary_sensor.schlafzimmer
              secondary_info: last-changed
            - entity: binary_sensor.schlafzimmer2
              secondary_info: last-changed
            - entity: binary_sensor.fitnessroom
              secondary_info: last-changed
            - entity: binary_sensor.fitnessroom2
              secondary_info: last-changed
            - entity: binary_sensor.treppe_oben
              secondary_info: last-changed
            - entity: binary_sensor.treppe_unten
              secondary_info: last-changed
            - entity: binary_sensor.guestroom
              secondary_info: last-changed
            - entity: binary_sensor.guestroom2
              secondary_info: last-changed
            - entity: binary_sensor.office
              secondary_info: last-changed
            - entity: binary_sensor.office2
              secondary_info: last-changed
            - entity: binary_sensor.wohnzimmer
              secondary_info: last-changed
            - entity: binary_sensor.wohnzimmer_2
              secondary_info: last-changed
            - entity: binary_sensor.wohnzimmer3
              secondary_info: last-changed
            - entity: binary_sensor.terrasse
              secondary_info: last-changed
          show_header_toggle: false
          state_color: true
          type: entities
        title: Motions

and the click on the button looks like this:


The button:

entity: sensor.current_motion_location
template: standard_button
label: Presence
icon: mdi:motion-sensor
size: 20px
show_state: true
custom_fields:
  add_info: |
    [[[ 
      return states['sensor.last_detected_motion'].state;
    ]]]
styles:
  icon:
    - color: |
        [[[
           if ( states['group.all_motion_sensors'].state == 'off') return 'var(--state-icon-color)';
           else return 'var(--state-icon-active-color)';
        ]]]
tap_action:
  action: more-info
type: custom:button-card

I donā€™t wanna to replace default I just wanna call popup that directly shows card for set date.

If I call it like I say:

I get this:

I am lookig a way to popup directly this:

Hello,

I have trouble installing browser mod.

In configuraiton.yaml I have made these lines:

browser_mod:
  prefix: "browsermod_"
  devices:
    ccccdf07-f63f2dfa:
      name: browsermod_tablet_r20
      disable: 
        - media_player
    91ef1e92-b21cd603:
      name: browsermod_tablet_r22
    0b7799d7-96154a1c:
      name: browsermod_k68w12
      disable:
        - light
        - media_player
    3d37dd68-f758c6b0:
      name: browsermod_iPad_es
      disable:
        - light
        - media_player
    8aa176f9-b887d4c9:
      name: browsermod_iPhone_es
      disable:
        - light
        - media_player
 disable:
   - all

But: The prefix and all the alias-names are ignored.
Any idea?

Regards, Eckart

Generating a custom popup works as expected in my desktop browser and on my phoneā€™s browser (Android). However, nothing happens when I try to trigger a popup from within the Android Companion App. We have multiple Android devices and none of them will show a custom popup with the app. Calling service: browser_mod.debug does nothing as well.
-Edit: Clearing data for the companion app resolved my issue.

2 Likes

Why do you need the prefix if you are disabling all other devices without an alias? (via the disable -allsetting)

According to the documentation, the prefix is not applied to devices with an alias. Try removing the prefix key to see if it also solves the issue with alias names.

I apologize if Iā€™m asking for help in the wrong place, but is there a way to resolve these warnings?

Thanks