From bc019d14e0e74127b6386d50b5975318feb73ce0 Mon Sep 17 00:00:00 2001
From: coen1111 <mail+github@coen-bakker.nl>
Date: Wed, 9 Nov 2022 13:30:48 +0100
Subject: [PATCH] Added support for color buttons row and digit rows

---
 README.md                       |  31 ++++++++++++++++++++++++++++---
 assets/digits_color_buttons.png | Bin 0 -> 7973 bytes
 tv-card.js                      |  24 +++++++++++++++++++++++-
 3 files changed, 51 insertions(+), 4 deletions(-)
 create mode 100644 assets/digits_color_buttons.png

diff --git a/README.md b/README.md
index f42e1bb..1027475 100644
--- a/README.md
+++ b/README.md
@@ -52,14 +52,14 @@ media_control_row:
   - fast_forward
 ```
 
-The available rows are `power_row`, `channel_row`, `apps_row`, `source_row` and `media_control_row`
-There also `volume_row` and `navigation_row`, but these requires a string as value.
+The available rows are `power_row`, `channel_row`, `apps_row`, `source_row`, `media_control_row`, `first_digits_row`, `second_digits_row`, `third_digits_row`, `fourth_digits_row`,`buttons_row`
+There also `volume_row`, `navigation_row` and  `digits_row`, but these requires a string as value.
 
 | Name | Type | Description
 | ---- | ---- | -------
 | volume_row | string | Can be either `slider` or `buttons`. This defines the mode you want for setting the volume (you'll see them soon below). You need to have [slider-card](https://github.com/AnthonMS/my-cards) installed in order to use `slider`.
 | navigation_row | string | Can be either `touchpad` or `buttons`. This defines the mode you want for navigating around your tv (you'll also see them soon below).
-
+| navigation_row | string | Can only be `buttons`.
 ## **Notice**
 
 This card uses `media_player.play_media` to send keys to the TV.
@@ -313,6 +313,31 @@ Result:
 
 <img src="assets/using_less.png" alt="less example" width="300"/>
 
+### Example 4
+
+Digits and color buttons added
+
+```yaml
+type: custom:tv-card
+entity: media_player.tv
+title: Example 4
+channel_row:
+  - channel_up
+  - channel_down
+volume_row: buttons
+navigation_row: buttons
+buttons_row:
+  - redbutton
+  - greenbutton
+  - yellowbutton
+  - bluebutton
+digits_row: buttons
+```
+
+Result:
+
+<img src="assets/digits_color_buttons.png" alt="digits and color buttons example" width="300"/>
+
 ### Extra
 
 In any row, if you add an ampty item, there will be an empty/invisible button filling the space:
diff --git a/assets/digits_color_buttons.png b/assets/digits_color_buttons.png
new file mode 100644
index 0000000000000000000000000000000000000000..ae0a7dbbeeb0fafc1a24b9e6edf3ab4fa693880e
GIT binary patch
literal 7973
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

literal 0
HcmV?d00001

diff --git a/tv-card.js b/tv-card.js
index ec0e755..2bc1312 100644
--- a/tv-card.js
+++ b/tv-card.js
@@ -23,6 +23,20 @@ const keys = {
     "play": {"key": "KEY_PLAY", "icon": "mdi:play"},
     "pause": {"key": "KEY_PAUSE", "icon": "mdi:pause"},
     "fast_forward": {"key": "KEY_FF", "icon": "mdi:fast-forward"},
+    "digit1": {"key": "KEY_1", "icon": "mdi:numeric-1"},
+    "digit2": {"key": "KEY_2", "icon": "mdi:numeric-2"},
+    "digit3": {"key": "KEY_3", "icon": "mdi:numeric-3"},
+    "digit4": {"key": "KEY_4", "icon": "mdi:numeric-4"},
+    "digit5": {"key": "KEY_5", "icon": "mdi:numeric-5"},
+    "digit6": {"key": "KEY_6", "icon": "mdi:numeric-6"},
+    "digit7": {"key": "KEY_7", "icon": "mdi:numeric-1"},
+    "digit8": {"key": "KEY_8", "icon": "mdi:numeric-8"},
+    "digit9": {"key": "KEY_9", "icon": "mdi:numeric-9"},
+    "digit0": {"key": "KEY_0", "icon": "mdi:numeric-0"},
+    "redbutton": {"key": "KEY_RED", "icon": "mdi:alpha-r-box"},
+    "greenbutton": {"key": "KEY_GREEN", "icon": "mdi:alpha-g-box"},
+    "yellowbutton": {"key": "KEY_YELLOW", "icon": "mdi:alpha-y-box"},
+    "bluebutton": {"key": "KEY_BLUE", "icon": "mdi:alpha-b-box"},
 };
 
 const sources = {
@@ -302,7 +316,7 @@ class TVCardServices extends LitElement {
             return html ``;
         }
 
-        const row_names = ["power_row", "channel_row", "apps_row", "source_row", "volume_row", "media_control_row", "navigation_row"];
+        const row_names = ["power_row", "channel_row", "apps_row", "source_row", "volume_row", "media_control_row", "navigation_row", "digits_row", "first_digits_row", "second_digits_row", "third_digits_row", "fourth_digits_row","buttons_row"];
 
         var content = [];
         Object.keys(this._config).forEach((row_name) => {
@@ -343,6 +357,14 @@ class TVCardServices extends LitElement {
                         navigation_row = [touchpad];
                     }
                     content.push(...navigation_row);
+                } else if (row_name === "digits_row") {
+                    let digits_row = [];
+                    let first_row  = [this.buildIconButton("digit1"), this.buildIconButton("digit2"), this.buildIconButton("digit3")];
+                    let second_row = [this.buildIconButton("digit4"), this.buildIconButton("digit5"), this.buildIconButton("digit6")];
+                    let third_row  = [this.buildIconButton("digit7"), this.buildIconButton("digit8"), this.buildIconButton("digit9")];
+                    let fourth_row = [this.buildIconButton("digit0")];
+                    digits_row = [first_row, second_row, third_row, fourth_row];
+                    content.push(...digits_row);
                 } else {
                     let row_content = this.buildButtonsFromActions(row_actions);
                     content.push(row_content);