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

Any chance you could share your more-info syntax?

This is the more-info popup code I use;

title: Bedroom
path: bedroom
icon: mdi:bed
popup_cards:
  light.colour_lamp:
    title: ''
    style:
      background: var(--background)
    card:
      type: vertical-stack
      cards:
        - type: custom:decluttering-card
          template: h2
          variables:
            - name: Colour Lamp
        - type: custom:light-entity-card
          style: |
            ha-card {
              background: rgba(0,0,0,0);
              box-shadow: none;
            }
          entity: light.colour_lamp
          brightness_icon: palette
          hide_header: true
          brightness: true
          color_picker: true
          smooth_color_wheel: true
          full_width_sliders: true
          show_slider_percent: true
1 Like

@thomasloven thank you for this wonderful add on.
A quick question which I think is missing from the documentation.
Is it possible to eliminate the header and the x (close button) at the top of a Popup without setting the autoclose property to true?
There is no need for the x button since the popup closes if we click outside of it and a header can be had in the popup card wrapper (e.g. entities).
And in some cases it provides a better interface to have a popup with no x and header where we can use the mouse (or tap different buttons) before the window closes.
Thanks again!

Does anyone find if they touch their tablet and maybe click a ā€˜buttonā€™ the tablet will suddenly play the last sound sent to the tablet? This is only when using it as a media_player. I have this happen occasionally. Just wondering.

Iā€™m guessing this is an ipad?
Apple wonā€™t allow playing sounds without confirmation from the user. I managed to work around this to the point where ā€œconfirmationā€ entails touching the screen at least once.
Thatā€™s why you need to touch the screen after reloading a page for the playback to work at all, and I guess that could make playback be delayed until touched too.

Ah, so thatā€™s the difference between what you are doing and whatā€™s not working for me. You are using it as a more-info for a lovelace card as described here(which I am also using and also still works for me).

I am trying to call it as a service call to popup my camera feed when people are detected outside as shown in this example, or just to produce any sort of popup from a service call like this example. Those are the cases that no longer work for me. Only the debug service popup works, but it also creates some strange card after I close it that it didnā€™t used to, which I suspect is related to why the other popup services arenā€™t working.

I suspect Iā€™m just one of the only few people using the service calls that has upgraded yet.

Itā€™s a fully rooted Amazon Fire now running Lineage and Fully Kiosk (so no trace of anything Amazon but the hardware itā€™s running on)

@scstraus Iā€™ve also got service call popups working, this is the code for one that is working, please note this works in 0.112.4 but all popups stop working if I upgrade to 0.113.0b.

            - type: custom:button-card
              style: |
                ha-card {
                  background: var(--button-background-color);
                  border-radius: 20px;
                  font-family: var(--font-family);
                  box-shadow:
                    {% if is_state('input_boolean.alarm_clock', 'on') %}
                      var(--box-shadow-on);
                    {% elif is_state('input_boolean.alarm_clock', 'off') %}
                      var(--box-shadow-off);
                    {% elif is_state('input_boolean.alarm_clock', 'unavailable') %}
                      var(--box-shadow-off);
                    {% endif %}
                }
              aspect_ratio: 2/1.135
              name: Alarm Clock
              entity: input_boolean.alarm_clock
              show_state: false
              show_label: false
              icon: mdi:alarm
              size: 20%
              styles:
                card:
                  - padding-top: 5%
                  - padding-bottom: 10%
                  - padding-left: 10%
                icon:
                  - margin-top: 0%
                  - margin-left: -80%
                name:
                  - padding-top: 2px
                  - justify-self: start
                  - font-size: 16px
                  - color: var(--button-text-color)
              state:
                - value: "on"
                  color: rgb(110,235,15)
                - value: "off"
                  color: var(--button-off-color)
                - value: "unavailable"
                  color: rgba(0,0,0,1)
              tap_action:
                action: toggle
              hold_action:
                action: call-service
                service: browser_mod.popup
                service_data:
                  title: ' '
                  style:
                    background: var(--background)
                  card:
                    type: vertical-stack
                    cards:
                      - type: custom:decluttering-card
                        template: h2
                        variables:
                          - name: Alarm Clock Settings
                      - !include ../../includes/v-space-5.yaml
                      - type: horizontal-stack
                        cards:
                          - !include ../../includes/h-space-10.yaml
                          - type: entities
                            style: |
                              ha-card {
                                background: rgba(0,0,0,0);
                                box-shadow: none;
                                font-family: var(--font-family);
                                font-size: 16px;
                              }
                            entities:
                              - entity: sensor.time
                                name: Current Time
                                icon: mdi:clock-outline
                              - entity: sensor.alarm_clock_time
                                name: Alarm Time
                                icon: mdi:alarm
                          - !include ../../includes/h-space-10.yaml
                      - type: horizontal-stack
                        cards:
                          - !include ../../includes/h-space-10.yaml
                          - type: entities
                            style: |
                              ha-card {
                                background: rgba(0,0,0,0);
                                box-shadow: none;
                                font-family: var(--font-family);
                                font-size: 16px;
                              }
                            entities:
                              - entity: input_select.alarm_clock_hour
                                name: Hour
                          - !include ../../includes/h-space-10.yaml
                          - type: entities
                            style: |
                              ha-card {
                                background: rgba(0,0,0,0);
                                box-shadow: none;
                                font-family: var(--font-family);
                                font-size: 16px;
                              }
                            entities:
                              - entity: input_select.alarm_clock_minute
                                name: Minute
                          - !include ../../includes/h-space-10.yaml
                  deviceID:
                    - this

Hi @thomasloven thanks for all the work you do on this and all the other amazing cards you have contributed!

Just wondering if you know why popups donā€™t work on 0.113.0b? Are there changes needed in browser_mod for 0.113 or is it just not working in the beta?

1 Like

Thanks for sticking with me on this, Brad. I just realized I had 2 different types of cameras showing the same feeds and one of them had been deactivated which is why the cameras worked but the popups didnā€™t. Without your help I probably wouldnā€™t have looked back at it enough times to see it was another dumb thing Iā€™d overlooked.

Weā€™ve all been there, happy you got it sorted!

2 Likes

Just a thought - but could sending a sound to play on a device which has its screen off cause this?

Hi Thomas

Thanks for a great plugin!

Iā€™m running the latest Hass.io on a RPI4
I have installed browser_mod through HACS, but I am unable to find the service call (browser_mod.debug) or any browser mod service calls for that matter. I want to find my device id and have read that is the best way.


Can you help?

Have you done the second step from the installation instructions? :wink:

I have put in the:

browser_mod:

in my configuration.yaml

The second part I understood as not being necessary, unless I use HA cast.

But while checking this I removed the invalid device_idā€™s and that saved the situation

Thank you for your reply

Feature request - Hi @thomasloven, Iā€™m a big fan and use browser_mod on all of my over 20 tablets. Iā€™d like to run a script on the start of Home Assistant to reload the start page in Fully Kiosk using a REST call. For that, I need the IP-number of the tablet. Can you add the IP number to the attributes of browser_mod so that I can write that script?

Appreciate your response, Johan

hello, after updating to HA 0.113 the popup cards do not work for me, someone else with this problem?
Greetings
this shows the log:

Logger: frontend.js.latest.202007160
Source: components/system_log/__init__.py:209
First occurred: 19:53:18 (13 occurrences)
Last logged: 19:55:49

http://192.168.1.2:8123/browser_mod.js:1:5019 Uncaught TypeError: Cannot read property 'close' of undefined
1 Like
4 Likes

FYI
I made the header invisible by changing its color opacity:

        style:
          --more-info-header-color: rgba(255,255,255,0.0)

Still, it would be great to remove it altogether (still takes up space and it reacts to hover).

For all those having popup issues with 0.113 @thomasloven has updated the issue on Github and is working on the fix, will be a day or two.

1 Like