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

Hello - Really like this. I purchased the PRO version of Fully to use with this. Iā€™m having troubles getting the screen to wake up when I want it to. At first it was just showing the light entity as Unavailable. I changed to display settings to never turn off (system settings). Then I went ahead and turned off the light entity. 10 minutes later, trying to turn it on - HA allows me to flip the switch but it does nothing and then the switch turns off by itself. Iā€™m not super smart about this stuff. Whatā€™s the best way to troubleshoot this? Might it be because I have a very old tablet w/ a very old version of Android (6.0 - no further updates available)?

Good day,

Exactly like @jschwalbe, Iā€™ve purchased Fully Kiosk Browser in order to use the browser_mod entirely.

It seems like browser_mod wonā€™t detect Iā€™m using FKB at all. No binary_sensor is created for that device.

Screen Shot 2020-04-13 at 9.39.22 AM

Iā€™ve created a user specifically for my Pixel C Tablet which has admin rights.

What is weird though is the fact that Fully Kiosk shows a Device ID which is not the same as the one detected by the browser_mod. Iā€™ve cleared the cache several times. Each time I had a different device id from HAā€™s perspective, but still the same device id on fully kiosk.

Any ideas? Thank you! :slight_smile:

EDIT: Nevermind, I had to enable JavaScript in the settings. Now I have the binary sensor!

Try adding top: 0 to styles.

Works, thx!

I have no doubt this is a blatantly dumb question but whatā€™s the best way to do an easy migration from the old pop up card to this? I have all my pop ups in a separate yaml that I call on the more-info tap action. Am simply looking to replicate this for now :slight_smile:

  1. Uninstall popup-card.
  2. Install browser_mod.

Thanks Thomas, knew it was a dumb question. Will give it a shot!

Hi Thomas, Iā€™ve used tileboard with fully kiosk, and I had this code to change the timeout of the tablet through a home-assistant event that I sent through an automation:

events: [
    {
      command: 'setscreenmode',
      action: function(e) {
        if (typeof fully !== undefined) {
          fully.setScreenBrightness(e.level);
          fully.setStringSetting("timeToScreenOffV2", e.timeout);     
          if (e.timeout == 0) {
            fully.setStringSetting("keepScreenOn", true);
            fully.turnScreenOn();
          }
          else {
            fully.setStringSetting("keepScreenOn", false);
            fully.turnScreenOff();
          }
        }
      }
    }

Iā€™m now switching to Lovelace, and I was hoping to use browser-mod to control these Fully functions (they are documented by Ozerov), but I have no idea how. Can you please point me in the right direction?

Thanks, Johan

All those options have corresponding commands in the REST interface. That should be easy enough to controll from the Home Assistant backend.

Hi Thomas,

I am trying out your browser_mod, which is awesome by the way. Trying to replace some more-info popups and that seems to work out. Only the attribute large: true doesnā€™t change a thing, the pop-ups keep appearing as the small version. Any ideas?

Example:

popup_cards:
      sensor.attic_temperature:
        title: Attic Temperature
        large: true
        card:
          entities:
            - entity: sensor.attic_temperature
          font_size: 75
          line_color: orange
          line_width: 8
          name: Attic
          type: 'custom:mini-graph-card' 

Thanks, I was not aware of that option.

Also a big shout out to Andrew Molina for this great link explaining exactly how to do it!

But I have a follow-up:
Using this method I have to define the URL for each tablet (I have 13); can you think of a way where we could use the HA-events bus and process them on the client with Browser_mod, similar to Tileboard?

What is the best approach for splitting out these popups. I am reviewing code from this example: https://github.com/matt8707/hass-config/blob/fe294e98be324ac4dd6b27fb8d4db6c663f78a30/ui-lovelace.yaml and can see on a custom button (which i am using) there is a tap action which has an !include popup/something.yaml

I have tried to replicate this but i get the following error in my logs

Uncaught TypeError: Cannot assign to read only property '0' of string '!include /config/popup/light_office.yaml'

Adding a bunch of popups can make the lovelace-ui.yaml hard to read so splitting out makes more sense. Plus this doesnt take the default more-info panel away.

Edit: It appears i am getting errors because i am not using ā€œyamlā€ mode for LoveLace. I do my edits via the UI and i dont believe i can use !include tag in this mode.

Hi, is this working for Ring doorbell 2? Thank you.

Hey. Can anyone help me with what css properties I need to set to modify the style of the title of a popup, including the ā€˜xā€™ icon?

Thomas, to make it easier to control these ā€˜extraā€™ features of Fully on multiple tablets, Iā€™m asking you to consider to add one of these two Textfeatures:

  1. expose the IP number of a device, so that the IP-numbers of the Fully devices donā€™t need to be hard-coded
  2. accept a javascript-key and a value and post that to the device(s). That would also be great to play eg a tone when opening a door on every tablet.

Thank you for considering, Johan
@thomasloven

I am trying to find a good background-color for this browser_mod_popup:

Schermata 2020-04-23 alle 14.30.23

And this is my code:

                    hold_action:
                      action: call-service
                      service: browser_mod.popup
                      service_data:
                        theme: darkmix
                        title: Info RGB
                        large: false
                        auto_close: false
                        style:
                          border-radius: 20px
                          --ha-card-border-radius: 20px
                        card:
                          type: entities
                          entities:         
                            - type: custom:slider-entity-row
                              entity: light.yeelight_strip_2
                              name: Luce Strip 2
                              hide_when_off: true
                              toggle: true                   
                            - type: custom:rgb-light-card
                              entity: light.yeelight_strip_2
                              justify: center  
                              hide_when_off: true                            
                              colors:
                                - rgb_color:
                                    - 255
                                    - 5
                                    - 5
                                  brightness_pct: 100
                                  transition: 10
                                - rgb_color:
                                    - 240
                                    - 252
                                    - 3
                                - rgb_color:
                                    - 23
                                    - 252
                                    - 3
                                - rgb_color:
                                    - 3
                                    - 78
                                    - 252
                                - rgb_color:
                                    - 244
                                    - 3
                                    - 252

Can someone suggest me a style to make the background more clear and the font more visible?
The theme option seems to not workā€¦

Iā€™m using browser_mod with popup but there is something strange with the styling. I use border-radius but the bottom two corners donā€™t seem to be radiused although the shadow is.

(Iā€™m also using lovelace_gen which explains the {{ cycle }} in the following code)

tap_action:
  action: call-service
  service: browser_mod.popup
  service_data:
    title: Cycle {{ cycle }} Settings
    card:
      type: entities
      entities:
        - entity: input_datetime.irrigation_cycle{{ cycle }}_start_time
    deviceID:
      - this
    style:
      font-family: Oswald
      font-size: 14px
      border-radius: 1em
      box-shadow: 0em 0em 0.5em 0.2em
      opacity: 0.9

image

Nice work.
I would like to ask something regarding accessing home assistant through nginx proxy when outside of local network.
Is there a way for devices to keep the same id?
eg. i have a tablet i want to use as a media player but device id is different in local and outside connection.

Thatā€™s a bit of an unfortunate oddity in the popup.
The top part belongs to the popup itself, but the bottom part - including the two bottom corners - belong to the included card.
You need to add a border radius to the card as well, using e.g. card-mod or a theme.

Note that CSS allows for rounding individual corners too.

1 Like

Only if they connect through the same URL.

So if you use your cloud/duckdns/other outside url solution to connect even when at home, youā€™ll get the same deviceID.
Your router/firewall may not like a connection going outside and the coming back, but thereā€™s usually a way to enable it. It may be called ā€œNAT mirroringā€, ā€œhairpinningā€ or something like that.
If not, you may be able to redirect calls to your domain via the DNS settings. YMMW.