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

vinzcenzo · September 11, 2021, 9:43am

I think the trick lies in disabling.

I originally had your same problem until I did this.

Thanks for your answer.

This only disables all entities related to devices (available or unavailable), but devices are still there.

If the devices are unavailable (and for sure it will never be back in the future), I’m not able to delete them without removing the integration… that’s my concern.

As browser_mod is probably based on a cookie that is related to the session context, the behavior seems correct: when clearing the entire cache, it will delete the ID related to the device and create a new one when the browser reconnects the next time because it is considered as a new device.

But I would like to clean up the mess without having to remove and re-add the integration.

By looking at the community feed I finally found an old thread that cover this problem : Delete individual device (and entity) from integration - #55 by SnoWake

This is apparently not only related to browser_mod.

skank · September 15, 2021, 9:52am

Hi all,
A question.
Is it possible to make a button when i click on it, i get a popup showing the new energy dashboard or the media browser (with other button) inside the popup?
I’m not sure how.

suxlala · September 15, 2021, 8:37pm

Use iframe (web) card inside the popup and put your energy dashboard or media browser address as URL.

skank · September 16, 2021, 6:55am

Why didnt i think of that myself lol
Great will do that

El_Duderino · September 16, 2021, 6:40pm

I’m having issues with this card. I have the following in my config.yaml:

browser_mod:
  prefix: "browser_"
  devices:
    a1521498_ea1ae31b:
      name: mbp_13_safari
      disable:
        - light
        - media_player
    218f8982_b93c0162:
      name: master_tablet_fully
      disable: 
        - media_player
      enable:
        - camera
        - binary_sensor
        - sensor
        - light
  disable:
    - all

However, in Developer Tools/States, I only see entities with the browser mod ID (i.e. 218f8982_b93c0162) and only camera and media_player with no sensor.

My goal is to manage charging based on the battery of my tablet (Fire HD 10) running Fully Kiosk, so maybe there’s another way that’s a bit simpler. Very curious what I’m missing here.

Thank you!

rmertz3282 · September 16, 2021, 8:19pm

Please clarify.

Are you trying to use browser mod to determine the battery level of your tablet? If so I used the REST API.

El_Duderino · September 16, 2021, 10:41pm

That’s exactly what I’m looking to do! Will the curl commands work on supervised HA (hassio)?

rmertz3282 · September 16, 2021, 11:03pm

Works perfectly for me. I have an automation that turns off the outlet when it reaches 90% and back on at 20%.

El_Duderino · September 17, 2021, 2:56pm

Thank you so much. This is exactly what I was looking for. I would like to figure out the logic to only have it charge during the day (so the switch doesn’t click or light up while sleeping) unless it’s absolutely necessary. I use node red, so will experiment with that when I have a chance.

Thanks again.

El_Duderino · September 18, 2021, 7:15pm

@rmertz3282 Any idea why I’m not getting more info?

Specifically, I’m not getting screen on data. I can turn the screen on/off with the switch, but it doesn’t recognize if it’s on or not. When I put the same command in my browser, I get much more data back. Do I need to add screen.on to the sensor?

critical_limit · September 21, 2021, 3:38pm

Please help me, i´m new to browser mod.

is it possible to do an automation which brings back the first page in Lovelace after last action detected on a wall mounted iPad?

At the moment I use an automation triggered every 2 minutes:

alias: iPad Standardseite nach 2min
description: ''
trigger:
  - platform: time_pattern
    minutes: /2
condition: []
action:
  - service: browser_mod.navigate
    data:
      navigation_path: /lovelace/0
      deviceID:
        - ipad
mode: single

But what I´m searching for is an automation that starts and wait for 2 mins after ipad is touched.

Possible?

critical_limit · September 21, 2021, 3:48pm

deleted, sorry

SgtBatten · September 25, 2021, 12:33am

You should try using the mode restart instead of single. The trigger would be any touch and the action would contain the 2 minute wait and then the navigation action.

This way every touch resets the automation and therefore resets the timer.

critical_limit · September 25, 2021, 9:25am

Thats the way I do with my motion sensors. But which trigger is able to detect a touch on the ipad?

brot123 · September 26, 2021, 10:54am

I have created 3 pages on my HA Lovelace Dashboard so I don’t overload the single page with information.

How can I achieve that in interaction with the Fully Kiosk Browser App I can achieve an automatic switch between the 3 pages after a defined time and I can also display the Energy Dashboard, this always in Alternation, can the browser mod do that? Thanks

elik745i · September 27, 2021, 5:50pm

Will just leave it here. I wanted to popup animation when there is something wrong with troubleshooting instructions. So to do that I have created automation with the following code:

alias: sewage_pump_blocked
description: Sewage pump works longer than expected, possibly outlet is blocked.
trigger:
  - type: power
    platform: device
    device_id: 98345bfb68b8a64113b5f6535952d75e
    entity_id: sensor.sewage_pump_energy_today
    domain: sensor
    above: 0.5
condition: []
action:
  - service: browser_mod.toast
    data:
      message: >-
        ALERT!!! Sewage pump exceeded daily usage power quota, please check if
        it's outline for blockage!
  - service: tts.google_say
    data:
      entity_id:
        - media_player.browser_mod_c8e19d5c_eaa365fb
        - media_player.browser_mod_c90fab5a_e329a3f2
      message: >-
        Насос откачки сточных вод  забился, следует прочистить линию, отключаю
        его!
  - delay:
      hours: 0
      minutes: 0
      seconds: 12
      milliseconds: 0
  - service: switch.turn_off
    target:
      device_id: 98345bfb68b8a64113b5f6535952d75e
  - service: browser_mod.popup
    data:
      command: popup
      title: Popup animation
      card:
        type: picture
        image: /local/gif/troubles/sewage_clean.gif
      deviceID:
        - c8e19d5c_eaa365fb
        - c90fab5a-e329a3f2
mode: single

As a result I get notification popup with text, sound alert and popup with gif animation on both devices!

schumijo · September 29, 2021, 7:58am

Hi,

I am trying to create a popup inspired by minimalist design to control light brightness and color.
But I have a problem with text that display brightness which is not refreshed (when used outside of browser-mod popup it works correctly)
Can someone help me ?

Code :

popup_light:
  template: popup_3_items
  custom_fields:
    item1:
      card:
        type: custom:button-card
        template: header_popup
        icon: mdi:lightbulb
        name: Lumière
        show_label: none
        styles:
          icon:
            - color: var(--color-theme)
    item2:
      card:
        type: custom:state-switch
        entity: hash
        default: color
        states:
          brightness:
            type: custom:button-card
            styles:
              grid:
                - grid-template-areas: '"item1"'
                - grid-template-columns: 1fr
                - grid-template-rows: min-content
              card:
                - background: none
                - box-shadow: none
                - padding: 4%
              custom_fields:
                item2:
                  - background-color: blue
                  - border-radius: 12px
                  - position: absolute
                  - left: 64%
                  - top: >
                      [[[
                        var bri = states[variables.entity].attributes.brightness;
                        return Math.round(bri ? (80-(72*bri/256)) : '80') + '%';
                      ]]]
                  - height: 25px
                  - width: 45px
                  - font-size: 11px
                  - line-height: 25px
                  - color: white
            custom_fields:
              item1:
                card:
                  type: "custom:slider-card"
                  entity: "[[[ return variables.entity ]]]"
                  radius: 20px
                  rotate: 270
                  containerHeight: 320px
                  width: 250px
                  height: 100px
                  top: 100px
                  left: 17%
                  thumbHorizontalPadding: 0px
                  thumbWidth: 0px
                  mainSliderColor: rgba(var(--color-theme),0.1)
                  mainSliderColorOff: rgba(var(--color-theme),0.1)
                  secondarySliderColor: var(--color-theme)
                  secondarySliderColorOff: var(--color-theme)
                  card_mod:
                    style: |
                      ha-card {
                        background: none !important;
                        box-shadow: none !important;
                      }
                      .off {
                        border: 1px solid rgba(var(--color-theme),0.3) !important;
                      }
                      .on {
                        border: 1px solid rgba(var(--color-theme),0.3) !important;
                      }
              item2: >
                [[[
                  var bri = states[variables.entity].attributes.brightness;
                  return Math.round(bri ? (bri/256*100) : '0') + '%';
                ]]]
          #####
          color:
            type: custom:light-entity-card
            entity: "[[[ return variables.entity ]]]"
            persist_features: true
            brightness: false
            color_temp: false
            white_value: false
            hide_header: true
            effects_list: false
            card_mod:
              style: |
                ha-card {
                  background: none !important;
                  box-shadow: none !important;
                  padding: 0 0 20px 0 !important;
                }
    item3:
      card:
        type: custom:button-card
        template: list_2_buttons
        custom_fields:
          item1:
            card:
              icon: "mdi:lightbulb-on"
              name: Luminosité
              type: "custom:button-card"
              template: action_button
              tap_action:
                action: navigate
                navigation_path: "#brightness"
              styles:
                icon:
                  - color: var(--color-theme)
          item2:
            card:
              icon: "mdi:palette"
              name: Couleur
              type: "custom:button-card"
              template: action_button
              tap_action:
                action: navigate
                navigation_path: "#color"
              styles:
                icon:
                  - color: var(--color-theme)

sergio_pt · September 29, 2021, 10:33am

Hi! I think you need to use the “triggers_update” (https://github.com/custom-cards/button-card#triggers_update)

Can you also please share your usage of this template?
It looks really good! Congrats!

ASNNetworks · September 29, 2021, 11:20am

I believe this is a bug. I noticed this behavior as well with input_text entity inside entities card. Using it outside popup it worked fine. But as a popup, it didn’t update the text when changing. Closing and opening popup showed the new state. So if sergio_pt’s suggestion doesn’t work, it’s a bug with either browser_mod or how Lovelace handles browser_mod popups. In that case you should create a ticket at browser_mod Github and hope it will be solved in the future.

schumijo · September 29, 2021, 1:35pm

Hi @sergio_pt, @ASNNetworks

triggers_update doesn’t work.
I use this template with minimalist design : https://community.home-assistant.io/t/lovelace-ui-minimalist/322687

Maybe you’re right @ASNNetworks. I will create a ticket at browser_mod Github

Thank you for your help