diff --git a/README.md b/README.md index da038e8..a126556 100644 --- a/README.md +++ b/README.md @@ -120,6 +120,21 @@ channels: number: '503' ``` + +### Custom button Options +The LG tv remote has more buttons available, also depending on the model. + +| Name | Type | Default | Supported options | Description | +| -------------- | ----------- | ------------ | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `name` | string | **Required** | A [Supported button](https://www.home-assistant.io/integrations/webostv/#service-webostvbutton) command | | +| `icon` | string | **Required** | 'mdi:netflix'| url of the image to be displayed in the extra button | + +```yaml +custom_buttons: + - name: SCREEN_REMOTE + icon: mdi:dots-horizontal +``` + ### Colors Options | Name | Type | Default | Supported options | Description | | -------------- | ----------- | ------------ | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | diff --git a/lg-remote-control.js b/lg-remote-control.js index c0fdd64..b0814c4 100644 --- a/lg-remote-control.js +++ b/lg-remote-control.js @@ -264,7 +264,11 @@ class LgRemoteControl extends LitElement { + + + + ${this._show_inputs ? html`
@@ -353,6 +357,21 @@ class LgRemoteControl extends LitElement { `} `} + + ${this.config.custom_buttons ? html` +
+ ${this.config.custom_buttons.map(button => { + return html` + + `; + })} +
+ ` : html` + `} + + ${this.config.sources ? html`
@@ -547,7 +566,7 @@ class LgRemoteControl extends LitElement { .grid-container-power { display: grid; grid-template-columns: 1fr 1fr 1fr; - grid-template-rows: 1fr; + grid-template-rows: 2fr; background-color: transparent; overflow: hidden; width: var(--remotewidth); @@ -592,6 +611,16 @@ class LgRemoteControl extends LitElement { width: var(--remotewidth); grid-template-areas: "bnt title" ". ." "tv tv-opt" "tv-phone opt" "hdmi line" "phone bluetooth" } + .grid-container-extra-buttons { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-template-rows: auto; + background-color: transparent; + width: calc(var(--remotewidth) / 1.03); + overflow: hidden; + margin: auto; + } + .grid-container-source { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; @@ -829,6 +858,16 @@ class LgRemoteControl extends LitElement { width: 100%; height: 100%; border-width: 0px; + } + .btn_extra { + background-color: var(--remote-button-color); + color: var(--remote-text-color); + height: 70%; + border-width: 0px; + border-radius: 50%; + margin: calc(var(--remotewidth) / 18.57) auto calc(var(--remotewidth) / 20) auto; + place-items: center; + cursor: pointer; } .btn_source { background-color: var(--remote-button-color); @@ -841,6 +880,8 @@ class LgRemoteControl extends LitElement { place-items: center; cursor: pointer; } + + .btn-color { background-color: var(--remote-button-color); color: var(--remote-text-color);