• Stars
    star
    1,314
  • Rank 35,801 (Top 0.8 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 5 years ago
  • Updated 4 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

🔹 A Home Assistant integration to turn your browser into a controllable entity and media player

browser_mod 2

hacs_badge

What if that tablet you have on your wall could open up a live feed from your front door camera when someone rings the bell?

And what if you could use it as an extra security camera?

Or what if you could use it to play music and videos from your Home Assistant media library?

What if you could permanently hide that sidebar from your kids and lock them into a single dashboard?

What if you could change the icon of the Home Assistant tab so it doesn't look the same as the forum?

What if you could change the more-info dialog for some entity to a dashboard card of your own design?

What if you could tap a button and have Home Assistant ask you which rooms you want the roomba to vacuum?


 

Installation instructions

  • First make sure you have completely removed any installation of Browser Mod 1
    I.e. remove browser_mod: from your configuration.yaml and delete the integration from the integrations page.

  • Either

  • Restart Home Assistant

  • Add the "Browser Mod" integration in Settings -> Devices & Services -> Add Integration or click this button: Open your Home Assistant instance and start setting up a new integration.

  • Restart Home Assistant

Note: If you are upgrading from Browser Mod 1, it is likely that you will get some errors in your log during a transition period. They will say something along the lines of Error handling message: extra keys not allowed @ data['deviceID'].

They appear when a browser which has an old version of Browser Mod cached tries to connect and should disappear once you have cleared all your caches properly.

Quickstart

  1. Install browser mod
  2. Thoroughly clear your browser cache
  3. Go to the Browser Mod panel in your sidebar
  4. Make sure the "Register" toggle is checked.
    This is required in order to enable backend services to target this browser.
  5. Refresh the page (F5)
  6. Go to Developer Tools -> Services Open your Home Assistant instance and show your service developer tools.
  7. Select service "Browser Mod: popup (browser_mod.popup)"
  8. Check the "Title" checkbar and write something as a title
  9. Enter some text in the "Content" text box
    Not yaml or anything, just any text for now.
  10. Click "CALL SERVICE"
    The button is likely grayed out. That's a Home Assistant visual bug. Click it anyway.
  11. A popup dialog should now open on all your Registered Browsers.

Screenshot of a popup dialog according to the setup above


 
 

Browser Mod Configuration Panel

After installing Browser Mod you should see a new panel called Browser Mod in the sidebar. This is where you controll any Browser Mod settings.

See Configuration Panel for more info


 

Browser Mod Services

Browser Mod has a number of services you can call to cause things to happen in the target Browser, such as opening a popup or navigating to a certain dashboard.

See Services for more info


 

Popup card

A popup card can be used to replace the more-info dialog of an entity with something of your choosing.

To use it, add a "Custom: Popup card" to a dashboard view via the GUI, pick the entity you want to override, configure the card and set up the popup like for the browser_mod.popup service.

The card will be visible only while you're in Edit mode.

As long as the popup card is (would be) visible, i.e. you stay on the same view; whenever the more-info dialog for the entitiy you selected would be opened, the popup card will be shown instead.

Yaml configuration:

type: custom:popup-card
entity: <entity id>
card:
  type: ...etc...
[any parameter from the browser_mod.popup service call except "content"]

Note: It's advisable to use a fire-dom-event tap action instead as far as possible. Popup card is for the few cases where that's not possible. See services for more info.

Browser Player

Browser player is a card that allows you to controll the volume and playback on the current Browsers media player.

Add it to a dashboard via the GUI or through yaml:

type: custom:browser-player

FAQ

How do I access the FullyKiosk Browser special functions?

Make sure to activate the Javascript Interface. The browser-mod panel will guide you through the rest of the required and suggested settings.

Why doesn't ANYTHING that used to work with Browser Mod 1.0 work with Browser Mod 2.0?

Browser Mod 2.0 has been rewritten ENTIRELY from the ground up. This allows it to be more stable and less resource intensive. At the same time I took the opportunity to rename a lot of things in ways that are more consistent with Home Assistant nomenclature.

In short, things are hopefully much easier now for new users of Browser Mod at the unfortunate cost of a one-time inconvenience for veteran expert users such as yourself.

Why does my Browser ID keep changing?

There's just no way around this. I've used every trick in the book and invented a handful of new ones in order to save the Browser ID as far as possible. It should be much better in Browser Mod 2.0 than earlier, but it's still not perfect. At least it's easy to change it back now...

How do I update a popup from the Browser mod 1.5?

If you have used fire-dom-event it's really simple. Just change

action: fire-dom-event
browser_mod:
  command: popup
  title: My title
  card:
    type: ...etc...

to

action: fire-dom-event
browser_mod:
  service: browser_mod.popup
  data:
    title: My title
    content:
      type: ...etc...

Buy Me A Coffee

More Repositories

1

lovelace-auto-entities

🔹Automatically populate the entities-list of lovelace cards
TypeScript
1,271
star
2

lovelace-card-mod

🔹 Add CSS styles to (almost) any lovelace card
TypeScript
1,143
star
3

lovelace-layout-card

🔹 Get more control over the placement of lovelace cards.
TypeScript
1,064
star
4

lovelace-slider-entity-row

🔹 Add sliders to entity cards
TypeScript
818
star
5

lovelace-fold-entity-row

🔹 A foldable row for entities card, containing other rows
TypeScript
595
star
6

lovelace-state-switch

🔹Dynamically replace lovelace cards depending on occasion
TypeScript
400
star
7

hass-fontawesome

🔹 Use icons from fontawesome in home-assistant
Python
284
star
8

lovelace-card-tools

🔹A collection of tools for other lovelace plugins to use
JavaScript
247
star
9

lovelace-template-entity-row

🔹 Display whatever you want in an entities card row.
TypeScript
221
star
10

hass-lovelace_gen

🔹 Improve the lovelace yaml parser for Home Assistant
Python
218
star
11

hass-config

My Home Assistant configuration
Python
213
star
12

lovelace-more-info-card

🔹 Display the more-info dialog of any entity as a lovelace card
TypeScript
150
star
13

lovelace-hui-element

🔹 Use built-in elements in the wrong place
TypeScript
109
star
14

hass-favicon

🔹 Change the favicon of your Home Assistant instance
Python
104
star
15

lovelace-flower-card

JavaScript
102
star
16

lovelace-card-modder

JavaScript
101
star
17

lovelace-popup-card

JavaScript
94
star
18

hass-plejd

🔹 Plejd BLE integration for Home Assistant
Python
90
star
19

round-slider

JavaScript
85
star
20

lovelace-badge-card

🔹 Place badges anywhere in the lovelace layout
JavaScript
81
star
21

lovelace-toggle-lock-entity-row

JavaScript
62
star
22

lovelace-fullykiosk

Lovelace plugin for using Fully Kiosk Browser features in home-assistant
JavaScript
61
star
23

homeassistant-lovelace-gen

A lovelace configuration file generator for home assistant
Python
57
star
24

lovelace-player

Lets any browser currently viewing your lovelace interface act as an audio receiver with a media_player interface
JavaScript
50
star
25

mittos64

C
47
star
26

lovelace-theme-maker

JavaScript
42
star
27

lovelace-browser-commander

JavaScript
33
star
28

lovelace-gap-card

🔹 A lovelace card that does nothing and looks like nothing. Incredibly useful! No, really.
JavaScript
31
star
29

lovelace-useful-markdown-card

JavaScript
30
star
30

hass-custom-devcontainer

A devcontainer for developing and testing custom Home Assistant stuff
Shell
29
star
31

homeassistant-2020-presentation

18
star
32

lovelace-gui-sandbox

🔹 Lets you play around with the GUI editors even if you're using YAML mode
JavaScript
17
star
33

lovelace-markdown-mod

JavaScript
16
star
34

lovelace-color-picker

JavaScript
14
star
35

lovelace-card-loader

JavaScript
13
star
36

plejd2mqtt

JavaScript
12
star
37

lovelace-column-card

A columnizing card for lovelace ui for home-assistant.
JavaScript
12
star
38

card-tools

A collection of tools to help develop lovelace cards
JavaScript
11
star
39

os5

My attempts at developing an operating system kernel.
C
11
star
40

lovelace-dummy-entity-row

🔹 An entity row with only icon and name
JavaScript
10
star
41

lovelace-q-card

JavaScript
9
star
42

lovelace-long-press

JavaScript
9
star
43

lovelace-time-input-row

JavaScript
9
star
44

nextrevo-mod

How I use the E3D Revo system with Prusa Nextruder
8
star
45

dito

A library and some tools for handling disk image files.
C
8
star
46

mittsnap

rsnapshot-like tool that leverages btrfs snapshots
Shell
5
star
47

dotfiles

MATLAB
5
star
48

lovelace-color-glance-card

A glance card with a colorized background
JavaScript
3
star
49

lovelace-icon-headers

WIP
JavaScript
2
star
50

lovelace-wbah

Lovelace with bluejays and herons
TypeScript
2
star
51

pyplejd

Python
2
star
52

os4

C
1
star
53

new-hass-config

Python
1
star
54

z80Monitor

Assembly
1
star
55

vim-tstatus

My status line for vim
Vim Script
1
star
56

mittos64-old

C
1
star
57

hass-plant_helper

🔹 Home Assistant Helper for monitoring plant health using MiFlora devices
Python
1
star