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

weemaba999 · December 24, 2021, 8:56am

Hi all,

Wondering,

Isn’t it possible to have a tap-action just on the image of the picture-elements itself ?

  - title: Merc
    icon: 'mdi:car-sports'
    path: auto
    type: custom:grid-layout
    layout:
      grid-template-columns: 50% 50% 
      grid-template-rows: auto ## or 4 if you want to be strict about it 
      grid-template-areas: |
         "buttons1 buttons1 "
         "picture1  picture1 "
         "buttons2  buttons2 "
    cards:
      - type: custom:button-card
        view_layout: buttons1
        title : Mercedes GLE350 DE
      
      - type: horizontal-stack
        view_layout:
           grid-area: picture1
        cards:
          - type: picture-elements
            image: /local/merclogo.png
            tap_action: !include popup/mercedes.yaml
            hold_action: !include popup/mercedes.yaml
            elements:
              - type: state-badge
                entity: sensor.2_amu_833_fuel_level
                title: Fuel level
                style:
                 top: 15%
                 left: 10%

Should fire up (from other yaml-file) pop-up with more information:

action: fire-dom-event
browser_mod:
command: popup
title: Mercedes
hide_header: true
style:
.: |
:host .content {
width: calc(385px + 385px + 385px);
max-width: 90vw;
}
$: |
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
background: none !important;
}
card:

type: custom:layout-card
column_num: 3
column_width: [385, 385, 385]
layout: vertical
cards:
- type: entities
  title: Battery and Range
  class: add_header
  state_color: true
  show_header_toggle: false
  entities:


But when I try to click on the image, ... just nothing happens...

Can anyone help ?

Kr,

Bart

keex · January 4, 2022, 3:31pm

Hi! Any idea why none of my configuration.yaml options are having any effect?

Here’s my config:

browser_mod:
  prefix: 'browser_'
  devices:
    9cc935ba-86298435:
      name: Browser Casper Chrome
    04a8b117-9e734fc8:
      name: Browser Kitchen Tablet Chrome
      camera: true
    c6dd59ba-aedc6250:
      name: Browser Samsung Galaxy S10 App
    a52afc49-84f07054:
      name: Browser Bathroom Tablet Chrome
      camera: true
  disable:
    - all

And here are the devices showing up without aliases despite the “disable all” option, none of them have camera integrations enabled and none have prefixes (although “disable all” should eliminate the need for the prefix).

“Browser Samsung Galaxy S10 App” seems to have now showed up, but the entities don’t have the alias still…

I’ve tried hard refreshes, closing the apps, restarting home assistant…

Kejszijo · January 4, 2022, 8:51pm

Hi,

After I upgrade card-mod to 3.1.1, my swipe cards don’t show entities, button- cards, only picture-entity show in browser pop-up window. If I try config without pop-up card, it works fine.

Without pop-up card:

Config:

cards:
  - camera_image: camera.utolso_csengetes_csengo
    camera_view: live
    entity: camera.utolso_csengetes_csengo
    type: picture-entity
  - camera_image: camera.utolso_csengetes_elso_kamera
    camera_view: live
    entity: camera.utolso_csengetes_elso_kamera
    type: picture-entity
  - entities:
      - automation.terasz_ventilator_megallitas_120_perc
      - entity: timer.terasz_fan
        name: Idő kikapcsolásig
    type: entities
parameters:
  allowTouchMove: true
  centeredSlides: true
  navigation:
    keyboard:
      enabled: true
      onlyInViewport: true
  pagination:
    type: progressbar
  slidesPerView: auto
  spaceBetween: 8
type: custom:swipe-card

With pop-up card:

Config:
…

aspect_ratio: 3/1
color_type: card
entity: binary_sensor.csengettek
layout: vertical
name: Csengő
show_last_changed: true
state:
  - color: red
    icon: mdi:bell
    name: Csengettek!
    styles:
      card:
        - animation: blink 2s ease infinite
    value: 'on'
  - color: '#d4d4d4'
    icon: mdi:bell
    operator: default
styles:
  grid:
    - grid-template-areas: '"n i" "s i" "l i"'
    - grid-template-columns: 1fr 30%
  icon:
    - width: 70%
  label:
    - color: gray
    - font-size: 10px
    - justify-self: start
    - padding-left: 10px
    - padding-top: 10px
  name:
    - justify-self: start
    - padding-top: 5px
    - font-weight: bold
    - padding-left: 10px
tap_action:
  action: fire-dom-event
  browser_mod:
    command: popup
    service_data: null
    card:
      card:
        cards:
          - camera_image: camera.utolso_csengetes_csengo
            camera_view: live
            entity: camera.utolso_csengetes_csengo
            type: picture-entity
          - camera_image: camera.utolso_csengetes_elso_kamera
            camera_view: live
            entity: camera.utolso_csengetes_elso_kamera
            type: picture-entity
          - entities:
              - automation.terasz_ventilator_megallitas_120_perc
              - entity: timer.terasz_fan
                name: Idő kikapcsolásig
            type: entities
        parameters:
          allowTouchMove: true
          centeredSlides: true
          navigation:
            keyboard:
              enabled: true
              onlyInViewport: true
          pagination:
            type: progressbar
          slidesPerView: auto
          spaceBetween: 8
        type: custom:swipe-card
      type: custom:mod-card
    deviceID:
      - this
      - dashboard
    large: false
    title: Utolsó csengetés
type: custom:button-card

Has anyone experienced such a mistake?

Thanks

keex · January 10, 2022, 7:51pm

Hi! Any hints as to why my config is not having any effect?

Klagio · January 10, 2022, 10:05pm

Hi, installed this,

When I press from android phone Browser mod: debug in services, I get device ID
When I press from Windows 10 - Chrome tab Browser mod: debug in services, I get … nothing (no popup, nada)

EDIT: Ahhh if I have in my browser http://192.168.1.12:8123 it shows all, if I use https://ha.mydomain.com is not showing …

How can I solve this?

p.s.
And don’t understand where to find custom card browser-player , its not there???

Klagio · January 10, 2022, 10:30pm

Playing with this nice toy, cool on my android phone.

When the android phone screen is on, the HA app is on display is all working (like a popup call for example or the camera),
When the android phone screen is OFF, it will not show the pop-up (need to turn on the screen go to the HA app open t and it shows the pop-up.

Is there anyway to make the android phone turn on and show the popup automatically?

ASNNetworks · January 10, 2022, 10:52pm

Create an automation/script with Notification Commands to start HA as Activity as the first action and then the popup command as the second action. Keep in mind that it’s impossible for HA to unlock your device. If your device is unlocked it will launch the app on the selected lovelage page however with the command.

Your request has nothing to do with browser_mod btw. That’s not something browser_mod can do on it’s own.

Klagio · January 10, 2022, 10:58pm

you have suggestions on how to do it?

ASNNetworks · January 10, 2022, 11:00pm

@Klagio see my post above you

service: notify.mobile_app_your_phone_example
data:
  message: "command_webview"
  title: "/lovelace/home"

This will launch Home Assistant app on your phone and open the dashboard /lovelace/home. Use this with the browser_mod popup service call in a script/automation so it opens the app and shows the popup.

If your goal is to show a camera, you can also just send a snapshot of the camera through notification: Standard Attachments | Home Assistant Companion Docs

sebbaT · January 11, 2022, 8:25pm

is it possible to give unique ID’s to popups?

borsa93 · January 11, 2022, 8:40pm

Hi all, I’m having some troubles trying to have a popup with custom button-card that have icons that change color dynamically. As I read in some other post, if I press the button it works but to see the color changed I have to close and open again the popup (so the icon is not changing dynamically).
Below my code, a suggestion on how fix this problem would be much appreciated.

type: custom:button-card
template: button-template
name: popup
tap_action:
  action: fire-dom-event
  browser_mod:
    command: popup
    hide_header: true
    style:
      .: |
        :host .content {
          align: center !important;
          margin: 20px !important; 
         } 
      $: |
        .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
            background: var(--primary-background-color) !important;
            border-radius: 15px;
            border-style: solid;
            border-color: rgb(55,161,247);
            border-width: 1px;
        }
    card:
      type: vertical-stack
      cards:
        - cards:
            - type: custom:button-card
              color_type: blank-card
            - type: custom:button-card
              icon: mdi:power
              show_icon: true
              show_name: false
              size: 90%
              styles:
                card:
                  - justify-self: middle
                  - box-shadow: none
                  - position: relative
                  - border-radius: 20px
                  - width: 40px
                  - height: 40px
                  - left: 0px
                  - top: 0px
                  - background-color: var(--primary-background-color)
                  - margin: 0px
                icon:
                  - color: var(--primary-text-color)
              tap_action:
                action: call-service
                service: climate.set_hvac_mode
                service_data:
                  entity_id: climate.fan_shim
                  hvac_mode: 'off'
            - type: custom:button-card
              icon: mdi:snowflake
              show_icon: true
              show_name: false
              size: 90%
              styles:
                card:
                  - justify-self: middle
                  - box-shadow: none
                  - position: relative
                  - border-radius: 20px
                  - width: 40px
                  - height: 40px
                  - left: 0px
                  - top: 0px
                  - background-color: var(--primary-background-color)
                  - margin: 0px
                icon:
                  - color: |
                      [[[
                        if (states['climate.fan_shim'].state == 'cool')
                          return "rgb(55,161,247)";
                        else
                          return "var(--primary-text-color)";
                      ]]]
              tap_action:
                action: call-service
                service: climate.set_hvac_mode
                service_data:
                  entity_id: climate.fan_shim
                  hvac_mode: cool
            - type: custom:button-card
              icon: mdi:fire
              show_icon: true
              show_name: false
              size: 90%
              styles:
                card:
                  - justify-self: middle
                  - box-shadow: none
                  - position: relative
                  - border-radius: 20px
                  - width: 40px
                  - height: 40px
                  - left: 0px
                  - top: 0px
                  - background-color: var(--primary-background-color)
                  - margin: 0px
                icon:
                  - color: |
                      [[[
                        if (states['climate.fan_shim'].state == 'heat')
                          return "rgb(251, 183, 65)";
                        else
                          return "var(--primary-text-color)";
                      ]]]
            - type: custom:button-card
              color_type: blank-card
          type: horizontal-stack

Thanks

Klagio · January 14, 2022, 8:53am

Anyone succeeded to use this great addon with tasker for Android phones/tablets?

My goal is to make the phone RING upon an event, whatever the status of the phone (locked, DND silent and so on)

Possible?

klogg · January 14, 2022, 12:10pm

If you use the mobile app you can do it natively with notifications.
Well… almost, instead of a ringing it can speak using TTS.

jwelvaert · January 17, 2022, 9:53pm

I’m trying to get this to work on my Fire Tablet running Fully Kiosk paid version to show the front door camera when the doorbell rings. I can get it to show up on my computer (Chrome) when I run

service: browser_mod.more_info
data:
  entity_id: camera.front_door
  deviceID:
    - ae4aca0d-f29eece9

but not on the tablet.

service: browser_mod.more_info
data:
  entity_id: camera.front_door
  deviceID:
    - fire_tablet

I have activated Settings->Advanced Web Settings->Javascript Interface (PLUS) and Settings->Motion Detection (PLUS)->Enable Visual Motion Detection .

What am I missing here?

MarvinE · January 18, 2022, 8:24am

Hi guys.
I was wondering, is it possible to have multiple cards in a popup?

arganto · January 18, 2022, 9:22am

Popup a custom:layout-card with two (or more) cards.

Or a simple stack-card.

tottow · January 26, 2022, 10:35am

Hi all, and thanks for a great card @thomasloven !

I’m running a casting service to a Nest hub, however when I press my button that does the browser mod popout service, the pop up is showing up on my computer and not on the nest. What am I missing? Tried adding the browser.js in resources, but it doesn’t seem to change any behaviour.

Thoughts/ideas?

Nick4 · January 30, 2022, 11:19am

@thomasloven, I’m getting this error in my log:

Logger: homeassistant.helpers.entity
Source: helpers/entity.py:549
First occurred: 12:10:58 (6 occurrences)
Last logged: 12:10:59

Entity light.14421223_2931a223 (<class 'custom_components.browser_mod.light.BrowserModLight'>) implements device_state_attributes. Please report it to the custom component author.
Entity sensor.14421223_2931a223 (<class 'custom_components.browser_mod.sensor.BrowserModSensor'>) implements device_state_attributes. Please report it to the custom component author.
Entity media_player.e6df632d_98839884 (<class 'custom_components.browser_mod.media_player.BrowserModPlayer'>) implements device_state_attributes. Please report it to the custom component author.
Entity light.e6df632d_98839884 (<class 'custom_components.browser_mod.light.BrowserModLight'>) implements device_state_attributes. Please report it to the custom component author.
Entity sensor.e6df632d_98839884 (<class 'custom_components.browser_mod.sensor.BrowserModSensor'>) implements device_state_attributes. Please report it to the custom component author.

VDRainer · January 30, 2022, 5:49pm

There are a few open issues where people reported this to the custom component author.

VMCosco · January 30, 2022, 6:40pm

I’m getting this error in my log thousands of times a day. I am trying to makes sure this is not related to my setup before posting an issue. Any ideas what may be causing this?

Logger: homeassistant.components.websocket_api.http.connection
Source: helpers/entity.py:643
Integration: Home Assistant WebSocket API (documentation, issues)
First occurred: January 28, 2022, 11:50:13 AM (3139 occurrences)
Last logged: 1:38:11 PM

[140291055913328] Error handling message: Unknown error
[140290689331792] Error handling message: Unknown error
[140290578037488] Error handling message: Unknown error
[140291228618608] Error handling message: Unknown error
[140291228805152] Error handling message: Unknown error
Traceback (most recent call last):
  File "/usr/src/homeassistant/homeassistant/components/websocket_api/connection.py", line 100, in async_handle
    handler(self.hass, self, schema(msg))
  File "/config/custom_components/browser_mod/connection.py", line 44, in handle_update
    devices[deviceID].update(msg.get("data", None))
  File "/config/custom_components/browser_mod/connection.py", line 94, in update
    self.sensor.data = data.get("browser")
  File "/config/custom_components/browser_mod/helpers.py", line 106, in data
    self.updated()
  File "/config/custom_components/browser_mod/sensor.py", line 27, in updated
    self.schedule_update_ha_state()
  File "/usr/src/homeassistant/homeassistant/helpers/entity.py", line 643, in schedule_update_ha_state
    self.hass.add_job(self.async_update_ha_state(force_refresh))  # type: ignore
AttributeError: 'NoneType' object has no attribute 'add_job'