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

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

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!

Please clarify.

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

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

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

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.

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

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?

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?

deleted, sorry

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.

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

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

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!

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)

2 Likes

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!

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.

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

2 Likes

@thomasloven
I had issues in the past (still not solved) that my device id isnt recognized by its name, i even added prefix to the enitties created, but he still doesnt change that

I added this to my configuration file:

browser_mod:
  prefix: "browser_"
  devices:
    41b5a475-fe0bd9fc:
      name: tablet

However thats been a long time, and i lived with it until now :stuck_out_tongue: lol

I had entitties which i don’t like, unti l i noticed i can stop browser_mod from creating it, so i change the code :

browser_mod:
  prefix: "browser_"
  devices:
    41b5a475-fe0bd9fc:
      name: tablet
      disable:
        - light
        - media_player

And rebooted
Again, the entites are still there

What can i do to make this work?

Edit: i now see the prefix browser is working ,but he is still creating browser entities for light and mediaplayer :frowning:

If your config is as shown, try line up the disable block indentation with the devices block like:

browser_mod:
  prefix: "browser_"
  devices:
    41b5a475-fe0bd9fc:
      name: tablet
  disable:
    - light
    - media_player

Hi All,

I need a Trigger created from a called Lovelace page. Not shure if browser_mod can do this.
I can use browser_mod to switch to a lovelace page as an action. But how to use it as a trigger?
Lets say, when on the wallmounted ipad someone is switching to Lovelace page 5, I want to be informed. But for that I need a Trigger recognizing when Page 5 is activated.

Somebody knows how to?

Thanx