• Stars
    star
    1,253
  • Rank 37,357 (Top 0.8 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 5 years ago
  • Updated 3 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,190
star
2

lovelace-card-mod

๐Ÿ”น Add CSS styles to (almost) any lovelace card
TypeScript
1,059
star
3

lovelace-layout-card

๐Ÿ”น Get more control over the placement of lovelace cards.
TypeScript
1,015
star
4

lovelace-slider-entity-row

๐Ÿ”น Add sliders to entity cards
TypeScript
801
star
5

lovelace-fold-entity-row

๐Ÿ”น A foldable row for entities card, containing other rows
TypeScript
563
star
6

lovelace-state-switch

๐Ÿ”นDynamically replace lovelace cards depending on occasion
TypeScript
386
star
7

hass-fontawesome

๐Ÿ”น Use icons from fontawesome in home-assistant
JavaScript
272
star
8

lovelace-card-tools

๐Ÿ”นA collection of tools for other lovelace plugins to use
JavaScript
244
star
9

lovelace-template-entity-row

๐Ÿ”น Display whatever you want in an entities card row.
TypeScript
213
star
10

hass-config

My Home Assistant configuration
Python
210
star
11

hass-lovelace_gen

๐Ÿ”น Improve the lovelace yaml parser for Home Assistant
Python
209
star
12

lovelace-more-info-card

๐Ÿ”น Display the more-info dialog of any entity as a lovelace card
TypeScript
139
star
13

lovelace-hui-element

๐Ÿ”น Use built-in elements in the wrong place
TypeScript
105
star
14

hass-favicon

๐Ÿ”น Change the favicon of your Home Assistant instance
Python
101
star
15

lovelace-card-modder

JavaScript
101
star
16

lovelace-flower-card

JavaScript
99
star
17

lovelace-popup-card

JavaScript
94
star
18

hass-plejd

๐Ÿ”น Plejd BLE integration for Home Assistant
Python
82
star
19

round-slider

JavaScript
81
star
20

lovelace-badge-card

๐Ÿ”น Place badges anywhere in the lovelace layout
JavaScript
77
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
42
star
26

lovelace-theme-maker

JavaScript
42
star
27

lovelace-browser-commander

JavaScript
33
star
28

lovelace-useful-markdown-card

JavaScript
30
star
29

lovelace-gap-card

๐Ÿ”น A lovelace card that does nothing and looks like nothing. Incredibly useful! No, really.
JavaScript
29
star
30

hass-custom-devcontainer

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

homeassistant-2020-presentation

18
star
32

lovelace-markdown-mod

JavaScript
16
star
33

lovelace-gui-sandbox

๐Ÿ”น Lets you play around with the GUI editors even if you're using YAML mode
JavaScript
16
star
34

lovelace-card-loader

JavaScript
13
star
35

lovelace-color-picker

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

dito

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

nextrevo-mod

How I use the E3D Revo system with Prusa Nextruder
7
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

os4

C
1
star
52

new-hass-config

Python
1
star
53

z80Monitor

Assembly
1
star
54

vim-tstatus

My status line for vim
Vim Script
1
star
55

pyplejd

Python
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