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

so this was going to be my first browser-mod more-info, but I am not getting the correct syntax, so turn to your assistance please:

      - type: custom:auto-entities
        card:
          type: entities
#              title: Family abroad
          card_mod: &style
            style: |
              ha-card {
                margin: 0px -16px;
                box-shadow: none;
              }
          tap_action:
            action: fire-dom-event
            browser_mod:
              command: more-info
              parameter: >
                {{states(config.entity|replace('duration','route'))}}

        filter:
          include:
            - entity_id: sensor.*naar_huis_duration
              options:
                type: custom:template-entity-row
                name: >
                  {{state_attr(config.entity,'friendly_name').split(' Dur')[0]}}
                state: >
                  {{states(config.entity)}} min - {{states(config.entity|replace('duration','distance'))}} km
                secondary: >
                  {{states(config.entity|replace('duration','route'))}}
#                secondary_info: last-changed
        sort:
          method: state

the section in the astro-entities filter does all work, so I am positive about the template under secondary.

However, id love that show on more-info when tapping the entity, simply because the secondary line is too small to display.

hence my effort to show the same template on a tap action on the entity (did try it in the filter section options, but that didnt work either.) Yet nothing showing but the real entityā€™s more-infoā€¦

if I do

        filter:
          include:
            - entity_id: sensor.*naar_huis_duration
              tap_action:
                action: fire-dom-event
                browser_mod:
                  command: more-info
                  parameter: >
                    {{states(config.entity|replace('duration','route'))}}

the whole entity disappearsā€¦

please have a look where my error lies? thanks!

update

                type: custom:template-entity-row
#                tap_action:
#                  action: fire-dom-event
#                  browser_mod:
#                    command: popup
#                    title: Whatever
                name: >
                  {{state_attr(config.entity,'friendly_name').split(' Dur')[0]}}
                state: >
                  {{states(config.entity)}} min - {{states(config.entity|replace('duration','distance'))}} km
                secondary: >
                  {{states(config.entity|replace('duration','route'))}}
                tap_action:
                  action: fire-dom-event
                  browser_mod:
                    command: toast
                    message: Hello, world!

make the toaster appear alright, so that would at least tell me the spot in the crd co fig is correct under the template-entity-row

now how to get the syntax for showing

                    command: more-info
                    entity: >
                      {{states(config.entity|replace('duration','route'))}}
                tap_action:
                  action: fire-dom-event
                  browser_mod:
#                    command: toast
#                    message: Hello, world!
                    command: popup
                    title: Route
                    card:
                      type: markdown
                      content: >
                        {{states(config.entity|replace('duration','route'))}}

give me a popup but an empty markdown card.

If I replace the template with a plain string (ROUTE to be displayed hereā€¦)

that works alright. So, almost there!

now how to get the template workingā€¦ because

title: >
   Route for {{states(config.entity)}}

doesnt work either. Maybe this boils down to templates not supported in Browser-modā€¦ no. it must be me doing something wrong
Although: https://github.com/thomasloven/hass-browser_mod/issues/286 ā€¦

1 Like

Hi, is there a way to open a popup to a fully kiosk browser (on my tablet, dashboard)? I can play music and things like that to the browser mod mediaplayer, but i want to send / cast an popup message.
Thanks for the help!

Hello, i am using Browser Mod to play back stored MP3 files from a script:

alias: bedroom yellow_1'
sequence:
  - service: media_player.play_media
    data:
      media_content_type: audio/mp3
      media_content_id: /local/media/bedroom yellow/yellow_1.m4a
    target:
      area_id: room_27
mode: single
max: 10

This script is triggerd from a hotspot in Lovelace, to make this work I need to assigne the browser to Room 27 for it to run, this is fine untill the Mobile app generates a new Browser then the scrip wont run untill i have been in and assigend the new browser to Room 27.

I am sure there is a better way to do this but cant work it out, any ideas? even to broadcast to all active browser would work

Hi. Is there any way of putting a background picture to a popup window ?

Iā€™ve reported a bug with FKB becoming unavailable again even though force_stay_awake: true or screensaver: true are both used

Iā€™ve tried running one option on one device and the other one on a second and both devices go unavailable after approximately 5 minutes

Is this broken, Iā€™m on 2022.7.7 but havenā€™t tried it before in honesty so wondering if maybe Iā€™m missing a new workaround that I was unaware of.

I discovered there were newer versions of FKB, so have now installed FKB 1.48.2 and will try force_stay_awake

anyone knows how to get the browser_mom.popup make the same style as the theme itself?

new FKB version on both tablets didnā€™t helpā€¦devices are still becoming unavailableā€¦not sure what else to try

HI, I disabled the Broser_mod integration. Now I canā€™t Enable it. I can see the enable button, but when I select it nothing happens. Any suggestions?
image

Hi can anybody help with this please, nothing pops up when I click the button, thanks.

type: custom:mushroom-template-card
primary: null
secondary: ''
icon: mdi:sofa
icon_color: orange
card_mod: null
style:
  mushroom-shape-icon:
    $: |
      .shape ha-icon
        {
          --icon-animation: blink 1s linear infinite;
        }
        @keyframes blink {
          30% {opacity: 0.5;}
          }
        }
layout: vertical
tap_action:
  action: fire-dom-event
  browser_mod:
    command: popup
    deviceID: this
    service_data:
      card:
        - type: custom:stack-in-card
          cards:
            - type: custom:mushroom-chips-card
              chips:
                - type: back
                - type: entity
                  entity: scene.diy_fireplace_on
                  name: Downstairs Lights
                  content_info: name
                  use_entity_picture: false
                  card_mod: null
                  style: |
                    ha-card {
                      --text-color: green ;
                    }
            - type: horizontal-stack
              cards:
                - show_name: true
                  show_icon: true
                  type: custom:button-card
                  tap_action:
                    action: call-service
                    service: scene.turn_on
                    service_data:
                      entity_id: scene.diy_fireplace_on
                  name: Fireplace On
                  icon: mdi:fire
                  size: 30px
                  color: Green
                - show_name: true
                  show_icon: true
                  type: custom:button-card
                  tap_action:
                    action: call-service
                    service: scene.turn_on
                    service_data:
                      entity_id: scene.diy_fireplace_off
                  name: Fireplace OFF
                  icon: mdi:fire-off
                  size: 30px
                  color: red
            - type: horizontal-stack
              cards:
                - show_name: true
                  show_icon: true
                  type: custom:button-card
                  tap_action:
                    action: call-service
                    service: scene.turn_on
                    service_data:
                      entity_id: scene.diy_kitchen_light_on
                  name: Kitchen Light On
                  icon: mdi:water-pump
                  size: 30px
                  color: Green
                - show_name: true
                  show_icon: true
                  type: custom:button-card
                  tap_action:
                    action: call-service
                    service: scene.turn_on
                    service_data:
                      entity_id: scene.diy_kitchen_light_off
                  name: Kitchen Light OFF
                  icon: mdi:water-pump-off
                  size: 30px
                  color: red
            - type: horizontal-stack
              cards:
                - show_name: true
                  show_icon: true
                  type: custom:button-card
                  tap_action:
                    action: call-service
                    service: scene.turn_on
                    service_data:
                      entity_id: scene.diy_living_room_light_on
                  name: Living Lamp On
                  icon: mdi:lightbulb
                  size: 30px
                  color: Green
                - show_name: true
                  show_icon: true
                  type: custom:button-card
                  tap_action:
                    action: call-service
                    service: scene.turn_on
                    service_data:
                      entity_id: scene.diy_living_room_light_off
                  name: Living Lamp OFF
                  icon: mdi:lightbulb-off
                  size: 30px
                  color: red
            - type: horizontal-stack
              cards:
                - show_name: true
                  show_icon: true
                  type: custom:button-card
                  tap_action:
                    action: call-service
                    service: scene.turn_on
                    service_data:
                      entity_id: scene.diy_yorkie_light_on
                  name: Yorkie Lamp On
                  icon: mdi:dog-side
                  size: 30px
                  color: Green
                - show_name: true
                  show_icon: true
                  type: custom:button-card
                  tap_action:
                    action: call-service
                    service: scene.turn_on
                    service_data:
                      entity_id: scene.diy_yorkie_light_off
                  name: Yorkie Lamp OFF
                  icon: mdi:dog-side-off
                  size: 30px
                  color: red
        - type: custom:stack-in-card
          cards:
            - type: custom:mushroom-template-card
              primary: Incense Burner
              secondary: >-
                Living Room:{{ state_attr('climate.home', 'current_temperature')
                }}Ā°C
              icon: mdi:oil-lamp
              entity: switch.led_phone_box_socket_1
              tap_action:
                action: toggle
                entity_id: switch.led_phone_box_socket_1
              hold_action:
                action: toggle
              icon_color: '{{ ''teal'' if is_state(entity, ''on'') else ''disabled'' }}'
              fill_container: true
              layout: horizontal
              multiline_secondary: false
              card_mod:
                style: |
                  :host {
                    background: rgba(var(--rgb-card-background-color), 0.2) url( '/local/images/oillamp.jpeg' ) center no-repeat;
                    background-size: cover;
                    #background-blend-mode: overlay;
                    background-color: rgba(var(--rgb-card-background-color), 0.8);
                    --mush-icon-size: 76px;
                    height: 66px;
                    margin-left: -18px !important;
                  }
            - type: custom:mushroom-chips-card
              chips:
                - type: conditional
                  conditions:
                    - entity: binary_sensor.lounge
                      state: 'on'
                  chip:
                    type: template
                    icon_color: disabled
                    icon: mdi:motion-sensor
                    tap_action:
                      action: none
                    hold_action:
                      action: none
                - type: conditional
                  conditions:
                    - entity: media_player.steven_s_3rd_fire_tv_2
                      state_not: 'off'
                    - entity: media_player.steven_s_3rd_fire_tv
                      state_not: unavailable
                  chip:
                    type: template
                    icon_color: disabled
                    icon: >-
                      {% set media_type =
                      state_attr('media_player.steven_s_3rd_fire_tv',

                      'media_content_type') %}

                      {% if media_type == 'tvshow' %}
                        mdi:television-classic
                      {% elif media_type == 'movie' %}
                        mdi:movie-open
                      {% elif media_type == 'music' %}
                        mdi:music
                      {% elif media_type == 'playlist' %}
                        mdi:music
                      {% else %}
                        mdi:plex
                      {% endif %}
                    tap_action:
                      action: none
                    hold_action:
                      action: none
                - type: conditional
                  conditions:
                    - entity: climate.home
                      state_not: 'off'
                  chip:
                    type: template
                    entity: climate.home
                    icon_color: disabled
                    icon: |-
                      {% if is_state(entity, 'idle') %}
                        mdi:sync 
                      {% elif is_state(entity, 'heat') %}
                        mdi:fire
                      {% elif is_state(entity, 'auto') %}
                        mdi:snowflake
                      {% elif is_state(entity, 'boost') %}
                        mdi:water-percent
                      {% elif is_state(entity, 'off') %}
                        mdi:fan
                      {% else %}
                        mdi:air-conditioner
                      {% endif %}
                    tap_action:
                      action: none
                    hold_action:
                      action: none
                    card_mod:
                      style: |
                        @keyframes rotation {
                          0% {
                            transform: rotate(0deg);
                          }
                          100% {
                            transform: rotate(360deg);
                          }
                        }
                        ha-card {
                          {% if is_state('climate.home', 'off') %}
                             animation: rotation 2s linear infinite;
                          {% endif %}
                        }
                - type: conditional
                  conditions:
                    - entity: script.stairs_led_lights_script
                      state: 'on'
                  chip:
                    type: template
                    icon_color: disabled
                    icon: mdi:led-on
                    tap_action:
                      action: none
                    hold_action:
                      action: none
              alignment: end
              card_mod:
                style: |
                  ha-card {
                    --chip-box-shadow: none;
                    --chip-background: none;
                    --chip-spacing: 0;
                  }
          card_mod:
            style: |
              ha-card {
                height: 102px;
                {% if is_state('switch.led_phone_box_socket_1', 'on') %}
                  background: rgba(244, 67, 54, 0.1);
                {% endif %}
              }
              :host {
                background: var(--card-background-color);
                border-radius: var(--ha-card-border-radius);
              }
      deviceID:
        - this
      title: šŸ›€ Lights

Is it possible for the popup to display more than one column? Trying to have 5 cards popup without a scroll bar.

Is navigation to external URLā€™s already possible?

Did you find a solution to this?

Yep

        style:
          $: |
            .mdc-dialog__surface {
              left: -50%;
            }

Plz guide how to open a webpage in popup

Am I right here or does this not work on mobile? I created a popup map but it doesnā€™t show on my phoneā€¦

I defined my popups like this:

tap_action:
  action: fire-dom-event
  browser_mod:
    command: popup
    title: BMW X3
    card:
      entities:
        - entity: device_tracker.520d
          icon: mdi:car
        - entity: sensor.template_driving_distance
        - entity: sensor.template_avg_km_per_day_used
          name: pro Tag gefahrene KM
          icon: mdi:null

They work on mobile as well as desktop

1 Like

Thank you!! Iā€™m using the HA app on Android and itā€™s still not popping upā€¦ not sure why.
Your version is MUCH quicker on HA though :slight_smile:

I figured this out. If I use it in a browser on my phone it worksā€¦ if I used the HA app it does not.