Skip to content

Commit 088899b

Browse files
mathoudebinemathoudebine
committed
Update documentation for new layout option
1 parent 73f3ef9 commit 088899b

5 files changed

Lines changed: 49 additions & 33 deletions

File tree

‎README.md‎

Lines changed: 48 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,57 @@
11
# Browser Control card
2-
[![hacs_badge](https://img.shields.io/badge/integrated%20in-HACS-%2303a9f4.svg?style=flat-square&logo=homeassistant&logoColor=white)](https://hacs.xyz/) ![hacs_badge](https://img.shields.io/github/languages/top/mathoudebine/homeassistant-browser-control-card?style=flat-square) ![hacs_badge](https://img.shields.io/github/license/mathoudebine/homeassistant-browser-control-card?style=flat-square) ![hacs_badge](https://img.shields.io/github/issues/mathoudebine/homeassistant-browser-control-card?style=flat-square)
32

4-
* [Available browser controls](#available-browser-controls)
5-
* [What is my browser?](#what-is-my-browser)
6-
* [Install the card](#install-the-card)
7-
* [Using HACS (recommended)](#using-hacs-recommended)
8-
* [Manual install](#manual-install)
3+
[![hacs_badge](https://img.shields.io/badge/integrated%20in-HACS-%2303a9f4.svg?style=flat-square&logo=homeassistant&logoColor=white)](https://hacs.xyz/) ![hacs_badge](https://img.shields.io/github/languages/top/mathoudebine/homeassistant-browser-control-card?style=flat-square) ![hacs_badge](https://img.shields.io/github/license/mathoudebine/homeassistant-browser-control-card?style=flat-square) ![hacs_badge](https://img.shields.io/github/issues/mathoudebine/homeassistant-browser-control-card?style=flat-square)
94

10-
Based on [KTibow/fullscreen-card](https://github.com/KTibow/fullscreen-card) for card design and full screen
11-
Wake lock part from https://web.dev/wake-lock/
5+
Control your web browser from a [Home Assistant dashboard card](https://www.home-assistant.io/dashboards/cards/): full screen, disable screen lock, zoom...
6+
7+
![Browser Control card](resources/browser-control-card.png)
128

13-
![Browser Control card](https://raw.githubusercontent.com/mathoudebine/homeassistant-browser-control-card/master/resources/browser-control-card.png)
9+
This card is compatible with all web browsers and is particularly useful for:
1410

15-
Control your browser from a Home Assistant lovelace card: full screen, disable screen lock, zoom...
16-
This card is intended for:
1711
* mobile devices
1812
* devices with "locked" browser (browser in kiosk mode, without user menu/commands...) like the Facebook/Meta Portal
1913

20-
Also available: show/hide HomeAssistant navigation bar & sidebar
14+
HomeAssistant controls also available: show/hide navigation bar & sidebar
2115
Changes are not persisted: just reload the page to revert to initial settings
2216

23-
## Available browser controls
24-
| Icon | Control | Config. option | Availability |
25-
|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------|-------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
26-
| ![Full-screen](https://raw.githubusercontent.com/mathoudebine/homeassistant-browser-control-card/master/resources/fullscreen.png) | Enter / exit full-screen | `controls: [fullscreen]` | [![check_browser_support](https://img.shields.io/badge/check-browser%20support-%2339b54a.svg?style=flat-square&logo=googlechrome&logoColor=white)](https://caniuse.com/mdn-api_element_requestfullscreen) |
27-
| ![Wake lock](https://raw.githubusercontent.com/mathoudebine/homeassistant-browser-control-card/master/resources/wake_mode.png) | Enable / disable screen wake lock (keep screen always on) | `controls: [wakelock]` | [![check_browser_support](https://img.shields.io/badge/check-browser%20support-%2339b54a.svg?style=flat-square&logo=googlechrome&logoColor=white)](https://caniuse.com/wake-lock) |
28-
| ![Zoom In](https://raw.githubusercontent.com/mathoudebine/homeassistant-browser-control-card/master/resources/zoom_in.png) ![Zoom out](https://raw.githubusercontent.com/mathoudebine/homeassistant-browser-control-card/master//resources/zoom_out.png) | Zoom in / zoom out (using CSS) | `controls: [zoom]` | [![check_browser_support](https://img.shields.io/badge/check-browser%20support-%2339b54a.svg?style=flat-square&logo=googlechrome&logoColor=white)](https://caniuse.com/css-zoom) |
29-
| ![Reload](https://raw.githubusercontent.com/mathoudebine/homeassistant-browser-control-card/master/resources/reload.png) | Reload page | `controls: [reload]` | [![check_browser_support](https://img.shields.io/badge/check-browser%20support-%2339b54a.svg?style=flat-square&logo=googlechrome&logoColor=white)](https://caniuse.com/mdn-api_location_reload) |
30-
| ![Hide navigation bar](https://raw.githubusercontent.com/mathoudebine/homeassistant-browser-control-card/master/resources/hide_navbar.png) | Hide navigation bar | `controls: [navbar]` | [![check_browser_support](https://img.shields.io/badge/check-browser%20support-%2339b54a.svg?style=flat-square&logo=googlechrome&logoColor=white)](https://caniuse.com/mdn-api_cssstyledeclaration_setproperty) |
31-
| ![Hide sidebar](https://raw.githubusercontent.com/mathoudebine/homeassistant-browser-control-card/master/resources/hide_sidebar.png) | Hide sidebar | `controls: [sidebar]` | [![check_browser_support](https://img.shields.io/badge/check-browser%20support-%2339b54a.svg?style=flat-square&logo=googlechrome&logoColor=white)](https://caniuse.com/mdn-api_cssstyledeclaration_setproperty) |
32-
17+
## Available controls
3318

3419
> [!NOTE]
35-
> Some features may be disabled if your browser does not support them
20+
> Some controls may be hidden if your browser does not support them
21+
22+
| Icon | Control | Config. option | Availability |
23+
|------------------------------------------------------------------------|-----------------------------------------------------------|--------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
24+
| ![Full-screen](resources/fullscreen.png) | Enter / exit full-screen | `controls: [fullscreen]` | [![check_browser_support](https://img.shields.io/badge/check-browser%20support-%2339b54a.svg?style=flat-square&logo=googlechrome&logoColor=white)](https://caniuse.com/mdn-api_element_requestfullscreen) |
25+
| ![Wake lock](resources/wake_mode.png) | Enable / disable screen wake lock (keep screen always on) | `controls: [wakelock]` | [![check_browser_support](https://img.shields.io/badge/check-browser%20support-%2339b54a.svg?style=flat-square&logo=googlechrome&logoColor=white)](https://caniuse.com/wake-lock) |
26+
| ![Zoom In](resources/zoom_in.png) ![Zoom out](/resources/zoom_out.png) | Zoom in / zoom out (using CSS) | `controls: [zoom]` | [![check_browser_support](https://img.shields.io/badge/check-browser%20support-%2339b54a.svg?style=flat-square&logo=googlechrome&logoColor=white)](https://caniuse.com/css-zoom) |
27+
| ![Reload](resources/reload.png) | Reload page | `controls: [reload]` | [![check_browser_support](https://img.shields.io/badge/check-browser%20support-%2339b54a.svg?style=flat-square&logo=googlechrome&logoColor=white)](https://caniuse.com/mdn-api_location_reload) |
28+
| ![Hide navigation bar](resources/hide_navbar.png) | Hide navigation bar | `controls: [navbar]` | [![check_browser_support](https://img.shields.io/badge/check-browser%20support-%2339b54a.svg?style=flat-square&logo=googlechrome&logoColor=white)](https://caniuse.com/mdn-api_cssstyledeclaration_setproperty) |
29+
| ![Hide sidebar](resources/hide_sidebar.png) | Hide sidebar | `controls: [sidebar]` | [![check_browser_support](https://img.shields.io/badge/check-browser%20support-%2339b54a.svg?style=flat-square&logo=googlechrome&logoColor=white)](https://caniuse.com/mdn-api_cssstyledeclaration_setproperty) |
3630

3731
### What is my browser?
38-
If you cannot identify the browser your device is using, browse the following website https://www.whatsmyua.info/
32+
33+
If you cannot identify the browser your device is using, browse the following website <https://www.whatsmyua.info/>
3934
Search the result for a string like `Chrome/92.0`
4035

36+
## Styling options
37+
38+
* **Layout**: buttons horizontal alignment and spacing. Select between `center` (default), `space-around`, `left` and `right`
39+
40+
| ![Centered layout](resources/layout-center.png) | ![Centered layout](resources/layout-space-around.png) |
41+
|-------------------------------------------------|-------------------------------------------------------|
42+
| `center` layout | `space-around` layout |
43+
44+
* **No Padding**: remove space between buttons and card border
45+
* **Small buttons** (button size is based on theme font size)
46+
4147
## Card configuration
48+
4249
The card supports configuration through Home Assistant UI:
4350

44-
![Configuration UI](https://raw.githubusercontent.com/mathoudebine/homeassistant-browser-control-card/master/resources/card_configuration_ui.png)
51+
![Configuration UI](resources/card_configuration_ui.png)
4552

4653
YAML configuration is also supported:
54+
4755
```yaml
4856
type: custom:browser-control-card
4957
controls:
@@ -55,21 +63,29 @@ controls:
5563
- sidebar
5664
no_padding: false
5765
small_buttons: false
66+
layout: center
5867
```
5968
6069
> [!NOTE]
6170
> Old configuration keys beginning with `hide_` are still supported but will be ignored as soon as you configure the card using graphical editor.
6271

6372
## Install the card
73+
6474
### Using HACS (recommended)
65-
1. Make sure [HACS](https://hacs.xyz/) is installed.
66-
2. Go to HACS > Frontend > Explore & download repositories
67-
3. Search and install "Browser Control Card" that appeared in your Frontend tab
68-
4. Add the card to your dashboard
75+
76+
1. Make sure [HACS](https://hacs.xyz/) is installed.
77+
2. On HACS interface, search and install "Browser Control Card"
78+
3. Add the card to your dashboard and configure it
6979

7080
### Manual install
81+
7182
1. Copy `browser-control-card.js` from this repository to your HomeAssistant configuration folder `config/www/`
72-
2. Go to HomeAssistant configuration page > Dashboards > Resources tab
83+
2. Go to HomeAssistant configuration page > Dashboards > Three-dots "Resources" option in upper-right corner
7384
3. Add resource `/local/browser-control-card.js` (Resource type: JavaScript module)
74-
4. Reload the web UI by flushing cache (Ctrl + F5)
75-
5. Add the card to your dashboard
85+
4. Reload the HomeAssistant UI by flushing cache (Ctrl + F5)
86+
5. Add the card to your dashboard and configure it
87+
88+
## Sources
89+
90+
Based on [KTibow/fullscreen-card](https://github.com/KTibow/fullscreen-card) for card design and full screen
91+
Wake lock part from <https://web.dev/wakelock>

‎browser-control-card.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -475,7 +475,7 @@ class BrowserControlCard extends HTMLElement {
475475
case "controls":
476476
return "Select the controls to display. Some controls may be hidden if your current browser does not support the feature.";
477477
case "layout":
478-
return "Configure controls layout inside the card"
478+
return "Configure controls alignment and spacing inside the card"
479479
}
480480
return undefined;
481481
},

‎resources/browser-control-card.png‎

-13 Bytes
Loading

‎resources/layout-center.png‎

7.46 KB
Loading

‎resources/layout-space-around.png‎

6.51 KB
Loading

0 commit comments

Comments
 (0)