After 30 minutes of removing and adding and customizing the config, it seems to work. Thanks for the help.
Good to hear!
Great work. I loved setting this up. Just a quick question - is there a way for me to add letters to the keypad. I see you have provisioned Numbers, letters would be awesome.
<!-- ################################ keypad ################################## -->
<div class="grid-container-keypad">
<button class="btn-keypad ripple" @click=${() => this._button("1")}>1</button>
<button class="btn-keypad ripple" @click=${() => this._button("2")}>2</button>
<button class="btn-keypad ripple" @click=${() => this._button("3")}>3</button>
<button class="btn-keypad ripple" @click=${() => this._button("4")}>4</button>
<button class="btn-keypad ripple" @click=${() => this._button("5")}>5</button>
<button class="btn-keypad ripple" @click=${() => this._button("6")}>6</button>
<button class="btn-keypad ripple" @click=${() => this._button("7")}>7</button>
<button class="btn-keypad ripple" @click=${() => this._button("8")}>8</button>
<button class="btn-keypad ripple" @click=${() => this._button("9")}>9</button>
<button class="btn-keypad"></button>
<button class="btn-keypad ripple" @click=${() => this._button("0")}>0</button>
<button class="btn-keypad"></button>
</div>
Hi Maurizio and Piotr
Thank you for this!
but I have a problem:
I’ve followed guide the step by step; but, as soon as I get to the creation of the card, after having inserted
type: 'custom:lg-remote-control'
entity: media_player.tv_lg_smart
the result is a blank card!
do you have any advice?
1 Like
I have got this control working and even defined my own icons, phew!
Now I need to get the custom:card-channel-pad working (the LG channel pad integration).
Tried to follow the instructions but just getting setup errors in HA. Can anyone share their configuration.yaml code? the following (nor any obvious variants) does NOT work.
type: 'custom:card-channel-pad'
entity: media_player.tv_lg_55c8
channels:
- image: "/local/lg_remote/tv_logos/Rai 1 HD.png"
number: '501'
- image: "/local/lg_remote/tv_logos/Rai 2 HD.png"
number: '502'
- image: "/local/lg_remote/tv_logos/Rai 3 HD.png"
number: '503'
Any idea what to do?
The log has the error: Setup failed for card-channel-pad: Integration not found.
In the “www/community” folder I have a folder “channel-pad” with the file “card-channel-pad.js” and this is referenced in the HA Lovelace resources file.
I also had a blank card. To fix it I enabled browser_mod by adding browser_mod: to my configuration.yaml
I also had a typo in the TV entity name.
Making some progress. In the remote control configuration I have defined my “channels” entries and the popup now shows up.
It doesn’t look as elegant as the screenshots in the repository - for example it doesn’t copy my styles from the remote control. It’s just a window with a close symbol and a bunch of channel logos on a white background. Any way I can get this to look more integrated?
You need to define channels
type: custom:card-channel-pad entity: media_player.tv_oled_lg
Please can you help me to find out ?
type: custom:lg-remote-control
entity: media_player.tv_oled_lg
color_buttons: enable
sources:
- name: Netflix
icon: mdi:netflix
- name: YouTube
icon: mdi:youtube-tv
- name: HDMI 1
icon: mdi:video-input-hdmi
- name: HDMI 2
icon: mdi:video-input-hdmi
type: custom:card-channel-pad
entity: media_player.tv_oled_lg
channels:
- image: /config/www/images/tv_logo/Rai 1 HD.png
number: '1'
scale: 1
colors:
active-background-button-color: ‘#0080ff’
deactive-background-button-color: ‘#f2f0fa’
button-border-standard: ‘rgba(0, 128, 255, .5)’
state-icon-active-color: ‘#0080ff’
buttons: black
texts: white
background: dark grey
Hi all,
I have a visual issue in my remote (source graphics stops in first source).
Does anyone have any clue what I should fix?
I have all that, thank you., and its fully functional But still the channel logos show on a white background. Looking at the JavaScript code the button background is coded to be ‘transparent’. Can’t see the window background defined anywhere.
As you can se some of the channel logos are in white and show up as empty space, which makes for a fun guessing game!
I have popup without any logo, if i press on it, change channel, but no logo.
Someone know why?
my logo are: \192.168.178.40\config\www\images\tv_logo
and in the card i setup: /config/www/images/tv_logo/Rai 1 HD.png
Hi,
I had found a lot here and on github but did not find the epxlanation how to add the colored buttons .
Any ideas ?
color_buttons: enable
add it
Have you find out or you can help me to have logo channel list? i have empty icons
Yes and No,
yes, that worked instantly and was a really easy one - hope they add it on github.
Sadly no or not right now, that I can not help you about channels and icons cause I do not use any of these, I even do not know if they work or not.
UPDATE: Finally I have tried it out:
It works for the channel list button easily where I had right now only to change the path. You only have to know about the “base path” of /local/ in my opinion and that any typo or case sensitive mishap causes an empty list
- image: /local/images/tv_logo/channel_1.png
In this case /local/ means the basic path to “HomeAssistant” Configuration or in particularr its /www/ folder
For a usual raspi pi HA installation in /home/pi/HomeAssistant/
that /local/
would mean /home/pi/HomeAssistant/www/
There, I mean below /www/ you might already have a folder /img/ or you should create one. Also create below /img/ another folder for the dozens of channel pics you might have like /LG-REMOTE/
This is just a preparation for later use of /local/img//LG-REMOTE/
to adress each of the icons in your card easily, but be aware that this is case sensitive and that any typo in such path will lead to an empty channel list. There you most likely might have a typo and therefore your list might have been empty.
But to avoid all hazzles. Get a quick successfull start and copy the first 2 channel pic files in that /local/ folder and call these icons 1.png and 2.png
- Move the files 1.png and 2.png in
/home/pi/HomeAssistant/www/ - add / change these channel related lines to your card
channels:
- image: /local/1.png
number: '1'
- image: /local/2.png
number: '2'
Be aware that the 'number: ’ reflects the position in the list and check the numbers if you have copied that from somewhere else cause I had gotten in the beginning only 1 icon. The source code I had copied had only used number: '1' lines multiple times and that lead to just 1 icon and nothing else out of 50 or so. And that source code was from github explanation page so it can happen everywhere.
Once the 2 simple icons 1.png and 2.png are working like here these 2 old ones from 50s and 60s
you can move on and move all channel pics to this REMOTE CHANNEL folder created before
local/img/LG-REMOTE
and adress each channel with these lines
- image: /local/img/LG-REMOTE/1.png
number: '1'
- image: /local/img/LG-REMOTE/2.png
number: '2'
Here is my card with the addtional buttons I had gotten from you.
type: 'custom:lg-remote-control'
entity: media_player.lg_tv
dimensions:
scale: 1.07
border_width: 9px
colors:
buttons: var(--deactive-background-button-color)
texts: white
background: blue
sources:
- name: YouTube
icon: 'mdi:youtube-tv'
- name: HDMI 1
icon: 'mdi:video-input-hdmi'
- name: HDMI 2
icon: 'mdi:video-input-hdmi'
- name: HDMI 3
icon: 'mdi:video-input-hdmi'
friendly_name: KODI
channels:
- image: /local/img/LG-REMOTE/1.png
number: '1'
- image: /local/img/LG-REMOTE/2.png
number: '2'
color_buttons: enable
Please add for all the others what you think went wrong on your implementation.
1 Like
Can some on explain to me how to get the ‘source’ button right like this from github
My source button opens a kind of list which shows only “live TV” and looks a bit broken or like cut off 
At least my sources from source section in the CARD should appear that you can see now as buttons I guess.
sources:
- name: YouTube
icon: 'mdi:youtube-tv'
- name: HDMI 1
icon: 'mdi:home-floor-1'
- name: HDMI 2
icon: 'mdi:home-floor-2'
- name: HDMI 3
icon: 'mdi:home-floor-3'
friendly_name: KODI
That BLUE is my blackground colour.
1 Like
I had the same issue some weeks ago.
I didn’t know how to fixed this, use my code and play with it, to config your remote, is the best way. I remember that maybe is a thing about rgb colors.
Here my code:
type: custom:lg-remote-control
entity: media_player.tv_oled_lg
color_buttons: enable
sources:
- name: Netflix
icon: mdi:netflix
- name: YouTube
icon: mdi:youtube-tv
- name: HDMI 1
icon: mdi:video-input-hdmi
- name: HDMI 2
icon: mdi:video-input-hdmi
type: custom:card-channel-pad
channels:
- image: /local/tvlogo/Rai 1 HD.png
number: '1'
- image: /local/tvlogo/Rai 2 HD.png
number: '2'
- image: /local/tvlogo/Rai 3 HD.png
number: '3'
- image: /local/tvlogo/Rete4 HD.png
number: '4'
- image: /local/tvlogo/Canale5 HD.png
number: '5'
- image: /local/tvlogo/Italia1 HD.png
number: '6'
- image: /local/tvlogo/LA7 HD.png
number: '7'
- image: /local/tvlogo/TV8.png
number: '8'
- image: /local/tvlogo/NOVE.png
number: '9'
scale: 1
colors:
active-background-button-color: ‘#0080ff’
deactive-background-button-color: ‘#f2f0fa’
button-border-standard: ‘rgba(0, 128, 255, .5)’
state-icon-active-color: ‘#0080ff’
buttons: black
texts: white
background: dark grey
1 Like
Well,
I tried it out and copied everything except the first 2 lines and the result of pressing “sources” button is pretty much the same as before - except the background is grey black instead of blue. Same cut even though you can not see it that good as on my blue example above.
So not much progress and if your source button is offering more than live it might rely on HA the version you are running.
you must turn on tv, to see all sources, is normal that you can see ONLY Live TV if TV is off
