From 15f0ef389a0f4e06d601c369a3afc0a5822c8985 Mon Sep 17 00:00:00 2001 From: Xinne van der Oord Date: Fri, 11 Feb 2022 16:04:31 +0100 Subject: [PATCH 1/8] added row to power to see effect --- lg-remote-control.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/lg-remote-control.js b/lg-remote-control.js index c0fdd64..c8f0540 100644 --- a/lg-remote-control.js +++ b/lg-remote-control.js @@ -264,7 +264,13 @@ class LgRemoteControl extends LitElement { + + + + + + ${this._show_inputs ? html`
@@ -547,7 +553,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); From 9f55c36952111653c0a02dba6b3af6ec9590f7ab Mon Sep 17 00:00:00 2001 From: Xinne van der Oord Date: Fri, 11 Feb 2022 16:12:59 +0100 Subject: [PATCH 2/8] set container height --- lg-remote-control.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lg-remote-control.js b/lg-remote-control.js index c8f0540..ff6610e 100644 --- a/lg-remote-control.js +++ b/lg-remote-control.js @@ -557,7 +557,7 @@ class LgRemoteControl extends LitElement { background-color: transparent; overflow: hidden; width: var(--remotewidth); - height: calc(var(--remotewidth) / 3); + height: calc(var(--remotewidth) / 2); } .grid-container-cursor { display: grid; From 47150d201a4f8a32e0a21398a858280e625a6abc Mon Sep 17 00:00:00 2001 From: Xinne van der Oord Date: Fri, 11 Feb 2022 16:25:18 +0100 Subject: [PATCH 3/8] added extra buttons container --- lg-remote-control.js | 44 ++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 40 insertions(+), 4 deletions(-) diff --git a/lg-remote-control.js b/lg-remote-control.js index ff6610e..b055d8d 100644 --- a/lg-remote-control.js +++ b/lg-remote-control.js @@ -264,9 +264,7 @@ class LgRemoteControl extends LitElement { - - - +
@@ -359,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`
@@ -557,7 +570,7 @@ class LgRemoteControl extends LitElement { background-color: transparent; overflow: hidden; width: var(--remotewidth); - height: calc(var(--remotewidth) / 2); + height: calc(var(--remotewidth) / 3); } .grid-container-cursor { display: grid; @@ -598,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; @@ -835,6 +858,17 @@ class LgRemoteControl extends LitElement { width: 100%; height: 100%; border-width: 0px; + } + .btn_extra { + background-color: var(--remote-button-color); + color: var(--remote-text-color); + width: calc(var(--remotewidth) / 5.9); + height: calc(var(--remotewidth) / 8.125); + border-width: 0px; + border-radius: calc(var(--remotewidth) / 10); + 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); @@ -847,6 +881,8 @@ class LgRemoteControl extends LitElement { place-items: center; cursor: pointer; } + + .btn-color { background-color: var(--remote-button-color); color: var(--remote-text-color); From 3c8db69e7c89d05216032f5e8e44d88bdc83a0ef Mon Sep 17 00:00:00 2001 From: Xinne van der Oord Date: Fri, 11 Feb 2022 16:29:42 +0100 Subject: [PATCH 4/8] added button action for custom buttons --- lg-remote-control.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lg-remote-control.js b/lg-remote-control.js index b055d8d..4e5393c 100644 --- a/lg-remote-control.js +++ b/lg-remote-control.js @@ -362,7 +362,7 @@ class LgRemoteControl extends LitElement {
${this.config.custom_buttons.map(button => { return html` - `; From 3eab65f41df7d1541a0f2da16bda6265bfc0c5d0 Mon Sep 17 00:00:00 2001 From: Xinne van der Oord Date: Fri, 11 Feb 2022 17:28:46 +0100 Subject: [PATCH 5/8] added size --- lg-remote-control.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/lg-remote-control.js b/lg-remote-control.js index 4e5393c..b45f848 100644 --- a/lg-remote-control.js +++ b/lg-remote-control.js @@ -617,6 +617,7 @@ class LgRemoteControl extends LitElement { grid-template-rows: auto; background-color: transparent; width: calc(var(--remotewidth) / 1.03); + height: calc(var(--remotewidth) / 4); overflow: hidden; margin: auto; } @@ -862,8 +863,8 @@ class LgRemoteControl extends LitElement { .btn_extra { background-color: var(--remote-button-color); color: var(--remote-text-color); - width: calc(var(--remotewidth) / 5.9); - height: calc(var(--remotewidth) / 8.125); + width: 70%; + height: 70% border-width: 0px; border-radius: calc(var(--remotewidth) / 10); margin: calc(var(--remotewidth) / 18.57) auto calc(var(--remotewidth) / 20) auto; From eb1806fac8afa3a836e19a0c8145f7baa1be217a Mon Sep 17 00:00:00 2001 From: Xinne van der Oord Date: Fri, 11 Feb 2022 17:30:10 +0100 Subject: [PATCH 6/8] added size --- lg-remote-control.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lg-remote-control.js b/lg-remote-control.js index b45f848..06717f0 100644 --- a/lg-remote-control.js +++ b/lg-remote-control.js @@ -864,9 +864,9 @@ class LgRemoteControl extends LitElement { background-color: var(--remote-button-color); color: var(--remote-text-color); width: 70%; - height: 70% + height: 70%; border-width: 0px; - border-radius: calc(var(--remotewidth) / 10); + border-radius: 50%; margin: calc(var(--remotewidth) / 18.57) auto calc(var(--remotewidth) / 20) auto; place-items: center; cursor: pointer; From 0c8b035ad194d0acfcf4d00078fd95bf0b8df8d9 Mon Sep 17 00:00:00 2001 From: Xinne van der Oord Date: Fri, 11 Feb 2022 17:51:03 +0100 Subject: [PATCH 7/8] fixed more rows --- lg-remote-control.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/lg-remote-control.js b/lg-remote-control.js index 06717f0..b0814c4 100644 --- a/lg-remote-control.js +++ b/lg-remote-control.js @@ -617,7 +617,6 @@ class LgRemoteControl extends LitElement { grid-template-rows: auto; background-color: transparent; width: calc(var(--remotewidth) / 1.03); - height: calc(var(--remotewidth) / 4); overflow: hidden; margin: auto; } @@ -863,7 +862,6 @@ class LgRemoteControl extends LitElement { .btn_extra { background-color: var(--remote-button-color); color: var(--remote-text-color); - width: 70%; height: 70%; border-width: 0px; border-radius: 50%; From c02518b38e3df370680baea93c240d9aaabb2a14 Mon Sep 17 00:00:00 2001 From: Xinne van der Oord Date: Fri, 11 Feb 2022 18:00:03 +0100 Subject: [PATCH 8/8] fixed more rows --- README.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) 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 | | -------------- | ----------- | ------------ | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |