dimagoltsman / generic-remote-control-card Goto Github PK
View Code? Open in Web Editor NEWGeneric Remote control card for HACS
Generic Remote control card for HACS
hi
With the template PartnerTV , i have a copy of the remote in text(html) at the right of the dashbord.
I am using the remote cards with a ZS06 Zigbee IR remote that requires the publishing of ir_send_code mqtt topics to transmit the ir signals. So I tried to set up the buttons to call a script that then creates and publishes an appropriate mqtt topic.
I have had a few attempts including those below:
pwr: call: script.living_room_ir_button data: button_pressed: '{{ input_text.btyouview_pwr_text }}'
pwr: service: script.living_room_ir_button data: button_pressed: '{{ input_text.btyouview_pwr_text }}'
These have not worked and all the example remotes are using the remote.send method in their calls. Is there any way that the card button call can trigger a script rather than a remote.send command or is there a way of tailoring the remote.send to actually call a script?
Attempting to create a new Ollny lights remote.
I have simplified the setup to one button until I can get it working. JS is:
function getRemoteStyle_ollnyremote(config) { const template = config.remote_template; const base_url =
/hacsfiles/generic-remote-control-card/remotes/${template}`;
return `
ha-card{
background-color:transparent;
box-shadow:var(--paper-material-elevation-0_-_box-shadow);
}
body {
margin: 0;
padding: 20px;
font-family: "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif
}
.container {
width: 360px;
margin: 0 auto
}
#remote-control-ollnyremote {
position: relative;
background: url(${base_url}/ollnyremote.png) no-repeat;
width: 208px;
height: 345px
}
#remote-control-ollnyremote h2,
#remote-control-ollnyremote span {
position: absolute;
left: 5000px
}
#remote-control-ollnyremote ul {
margin: 0;
padding: 0;
list-style-type: none
}
#on a {
position: absolute;
disrwd: block
}
#remote-control-ollnyremote li#on a {
left: 43px;
top: 54px;
width: 37px;
height: 38px;
background: url(${base_url}/on.png) no-repeat
}
#remote-control-ollnyremote li#on a:hover {
background: url(${base_url}/on_over.png) no-repeat 0px 0px
}
`;
}
function getRemoteHtml_ollnyremote(config){
const template = config.remote_template;
return `
; }
The card yaml is based on the firesticktv remote, as is the js, and I have implemented the firestick successfully in a card just to ensure I can confirm that the basic setup works, and it does. It is just my cut down version that is not right.
type: custom:generic-remote-control-card name: Ollny Remote remote_template: ollnyremote buttons: 'on': call: script.ollny_button data: button_pressed: '{{ input_text.ollny_on_text }}'
The ollnyremote.png and on.png file sizes match the settings in the js file but its still looks wrong in the dashboard.
I realise it will be my issue but need help to understand what I have done wrong.
Hi there
I tried creating a remote for my Nvidia Shield. I used the Mibox as a template. Aside from the remote not showing up in HA, the icons for the remote don't look like the actual remote buttons. It looks like they've been cut off. Here is some code - I know I'm missing code for some buttons. I'm a noob at this so I'm learning as I go along.
function getRemoteStyle_nvidia_shield(config) {
const template = config.remote_template;
const base_url = /hacsfiles/generic-remote-control-card/remotes/${template}
;
return `
ha-card{
background-color:transparent;
box-shadow:var(--paper-material-elevation-0_-_box-shadow);
}
body {
margin: 0;
padding: 20px;
font-family: "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif
}
.container {
width: 224px;
margin: 0 auto
}
#remote-control-nvidia_shield {
position: relative;
background: url(${base_url}/remote.png) no-repeat;
width: 153px;
height: 608px
}
#remote-control-nvidia_shield h2,
#remote-control-nvidia_shield span {
position: absolute;
left: -5000px
}
#remote-control-nvidia_shield ul {
margin: 0;
padding: 0;
list-style-type: none
}
#power a,
#volumeup a,
#volumedown a,
#clickleft a,
#clickright a,
#mute a,
#microphone a,
#info a,
#home a,
#back a,
#top a,
#bottom a,
#ok a {
position: absolute;
display: block
}
#remote-control-nvidia_shield li#power a {
left: 17px;
top: 37px;
width: 29px;
height: 30px;
background: url(${base_url}/power.png) no-repeat
}
#remote-control-nvidia_shield li#power a:hover {
background-image: url(${base_url}/power.png);
background-repeat: no-repeat;
background-position: 0 0px
}
#remote-control-nvidia_shield li#microphone a {
left: 119px;
top: 250px;
width: 28px;
height: 29px;
background: url(${base_url}/voice_search.png) no-repeat
}
#remote-control-nvidia_shield li#microphone a:hover {
background-image: url(${base_url}/voice_search.png);
background-repeat: no-repeat;
background-position: 0 0px
}
#remote-control-nvidia_shield li#volumeup a {
left: 69px;
top: 299px;
width: 29px;
height: 30px;
background: url(${base_url}/volume_up.png) no-repeat
}
#remote-control-nvidia_shield li#volumeup a:hover {
background-image: url(${base_url}/volume_up.png);
background-repeat: no-repeat;
background-position: 0 0px
}
#remote-control-nvidia_shield li#volumedown a {
left: 69px;
top: 359px;
width: 29px;
height: 30px;
background: url(${base_url}/volume_down.png) no-repeat
}
#remote-control-nvidia_shield li#volumedown a:hover {
background-image: url(${base_url}/volume_down.png);
background-repeat: no-repeat;
background-position: 0 0px
}
#remote-control-nvidia_shield li#clickleft a {
left: 21px;
top: 137px;
width: 29px;
height: 29px;
background: url(${base_url}/left.png) no-repeat
}
#remote-control-nvidia_shield li#clickleft a:hover {
background-image: url(${base_url}/left.png);
background-repeat: no-repeat;
background-position: 0 0px
}
#remote-control-nvidia_shield li#clickright a {
left: 116px;
top: 138px;
width: 29px;
height: 29px;
background: url(${base_url}/right.png) no-repeat
}
#remote-control-nvidia_shield li#clickright a:hover {
background-image: url(${base_url}/right.png);
background-repeat: no-repeat;
background-position: 0 0px
}
#remote-control-nvidia_shield li#source a:hover {
background-image: url(${base_url}/remote-sitemap.jpg);
background-repeat: no-repeat;
background-position: 0 -37px
}
#remote-control-nvidia_shield li#home a {
width: 29px;
height: 30px;
left: 69px;
top: 248px;
background: url(${base_url}/home.png) no-repeat 0px 0
}
#remote-control-nvidia_shield li#back a {
width: 28px;
height: 29px;
left: 17px;
top: 249px;
background: url(${base_url}/left.png) no-repeat 0px 0px
}
#remote-control-nvidia_shield li#right a {
width: 23px;
height: 59px;
left: 139px;
top: 365px;
background: url(${base_url}/remote-circle3.png) no-repeat -98px -53px
}
#remote-control-nvidia_shield li#top a {
width: 29px;
height: 29px;
left: 69px;
top: 93px;
background: url(${base_url}/up.png) no-repeat 0px 0px
}
#remote-control-nvidia_shield li#bottom a {
width: 29px;
height: 29px;
left: 68px;
top: 190px;
background: url(${base_url}/down.png) no-repeat 0px 0px
}
#remote-control-nvidia_shield li#ok a {
width: 29px;
height: 29px;
left: 68px;
top: 141px;
background: url(${base_url}/select.png) no-repeat 0px 0px
}
#remote-control-nvidia_shield li#home a:hover {
background: url(${base_url}/home.png) no-repeat 0px 0px
}
#remote-control-nvidia_shield li#back a:hover {
background: url(${base_url}/back.png) no-repeat 0px 0px
}
#remote-control-nvidia_shield li#top a:hover {
background: url(${base_url}/up.png) no-repeat 0px 0px
}
#remote-control-nvidia_shield li#bottom a:hover {
background: url(${base_url}/down.png) no-repeat 0px 0px
}
#remote-control-nvidia_shield li#ok a:hover {
background: url(${base_url}/select.png) no-repeat 0px 0px
}
`;
}
function getRemoteHtml_nvidia_shield(config){
const template = config.remote_template;
return `
</ul>
<ul>
<li class="myButton-${template}" id="home"><a href="#" title="home"><span>home</span></a></li>
<li class="myButton-${template}" id="back"><a href="#" title="Go back to beginning"><span>back</span></a></li>
<li class="myButton-${template}" id="top"><a href="#" title="Top of gallery"><span>Top of Gallery</span></a></li>
<li class="myButton-${template}" id="bottom"><a href="#" title="Bottom of gallery"><span>Bottom of Gallery</span></a></li>
<li class="myButton-${template}" id="ok"><a href="#" title="OK - start slideshow"><span>OK - start slideshow</span></a></li>
</ul>
</div>
</div>
`;
}
I have a custom remote in the /remotes/ folder.
Every time I update the package, my custom remote is blown away.
Is there a way around this?
not exist button0....button9
the right name of button is: zero, one, two,....nine
Hello,
I have tried removing the white background from the Apple TV Remote and resaving with a transparent background but can't find a way to actually achieve this. It seems like the image is loaded correctly with transparent background but the dashboard still shows the white background. I'm editing the images in the /www/community/generic-remote-control-card/remotes/apple4kremote folder. What am I doing wrong?
Thanks!
Hello,
When I change the icons positions on remote-html.js I will see the card and I don't see the changes.
How can we refresh the changes to be visible on the card?
Thank you and congratulations for the great job.
Hi!
This is a great card and I am wondering if there is any simple editor to have my own remote for my television.
This will give the community the option to add different remotes and upload them to the project.
where samsungtv remote doesn't have it.
I have loaded a forked contribution in the hope it would be adopted to the github page. However, I have noticed that it has been a long time since any such remote contributions were committed. I understand that sometimes, the Github Developer has other priorities or may indeed no longer work on the project but it would be nice for us to be able to continue adding contributions. I believe mine would help anyone wanting to utilise mqtt commands for remotes. How does Github deal with this?
A new remote for older LG TVs
lg_older
lg_older.zip
Hi,
it is possible to enable color buttons: red, green, yellow, blue for new LG remote ?
thank you
Hi i have a problem with this card.
What i did:
Can you tell me what is wrong?
Hi,
sorry to bother, but as newbee (only 2 months into HACS), I've read and read again the readme, the issues (even the closed ones)
but I still cannot create your card.
Inside a new dashboard, I try to add a card (manual way) whatever I put in the card configuration, got always same msg : No card type found!
I've tried to set up resources in the dashboard config resource panel... but nothing works this way either...
Can I get some help here?
In advance, thanks!
I have a problem with the Integration to Lovelace.
My Yaml looks like this
- title: Soundbar
path: soundbar
badges: []
cards: []
resources:
- url: /hacsfiles/generic-remote-control-card/generic-remote-control-card.js
type: module
What do I need to do to see an example Remote ?
Your LG examples show 'remote' service calls to entities in the 'remote' domain. I have an LG smart tv that uses the remote control in your lg-new example but no integration I can find for the LG tv exposes a 'remote' entity (remote.living_room_tv). How did this entity get defined in your system?
Hi. I would hapilly see a plain theme, without any backgrounds, just a chunky, white and blue buttons which would look like the rest of HA, just more condensed.
Hi!
Can you add Yeelight YLYK01YL remote support?
Hi, I tried looking in the code to find the spot where a layer of the Samsung remote controls is displayed shifted by a large amount of pixels to the right in the Home Assistant dashboard. I have not succeeded. I attach some screenshots to immediately understand the imperfection, circled in red I highlight the card and the horizontal navigation bar. Everything is perfectly functional anyway, but, if I can also be a little more precise, the lower part of the photo of the remote control would be missing, but that's not a problem, just a simple detail. Thanks in advance for your reply.
How do you get a remote entity for AppleTV? I have the AppleTV 4k integration installed and do not have any remote devices.
I am trying to add some extra buttons to the remote but failing.
I edited the remote-html.js but no luck, for now i just tried adding smarthub
function getRemoteStyle_samsungtv(config) {
const template = config.remote_template;
const base_url = `/hacsfiles/generic-remote-control-card/remotes/${template}`;
return `
ha-card{
background-color:transparent;
box-shadow:var(--paper-material-elevation-0_-_box-shadow);
}
body {
margin: 0;
padding: 20px;
font-family: "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif
}
.container {
width: 360px;
margin: 0 auto
}
#remote-control-samsungtv {
position: relative;
background: url(${base_url}/samsungtv_remote.png) no-repeat;
width: 224px;
height: 750px
}
#remote-control-samsungtv h2,
#remote-control-samsungtv span {
position: absolute;
left: 5000px
}
#remote-control-samsungtv ul {
margin: 0;
padding: 0;
list-style-type: none
}
#power a,
#samsungtv a,
#volmin a,
#volplus a,
#mute a,
#source a,
#one a,
#two a,
#three a,
#four a,
#five a,
#six a,
#seven a,
#eight a,
#nine a,
#zero a,
#lastch a,
#fastforward a,
#rewind a,
#play a,
#pause a,
#stop a,
#channelup a,
#channeldown a,
#menu a,
#smarthub a,
#back a,
#exit a,
#guide a,
#info a,
#left a,
#right a,
#top a,
#bottom a,
#ok a {
position: absolute;
display: block
}
#remote-control-samsungtv li#power a {
left: 33px;
top: 34px;
width: 27px;
height: 29px;
background: url(${base_url}/power.png) no-repeat
}
#remote-control-samsungtv li#source a {
left: 152px;
top: 33px;
width: 40px;
height: 29px;
background: url(${base_url}/source.png) no-repeat
}
#remote-control-samsungtv li#source a:hover {
background-image: url(${base_url}/source_over.png);
background-repeat: no-repeat;
background-position: 0 0px
}
#remote-control-samsungtv li#one a {
left: 42px;
top: 92px;
width: 10px;
height: 21px;
background: url(${base_url}/one.png) no-repeat 0 0px
}
#remote-control-samsungtv li#two a {
left: 103px;
top: 92px;
width: 14px;
height: 20px;
background: url(${base_url}/two.png) no-repeat 0 0px
}
#remote-control-samsungtv li#three a {
left: 166px;
top: 91px;
width: 14px;
height: 21px;
background: url(${base_url}/three.png) no-repeat 0 0px
}
#remote-control-samsungtv li#four a {
width: 15px;
height: 20px;
left: 41px;
top: 138px;
background: url(${base_url}/four.png) no-repeat 0 0px
}
#remote-control-samsungtv li#five a {
width: 14px;
height: 21px;
left: 104px;
top: 137px;
background: url(${base_url}/five.png) no-repeat 0 0px
}
#remote-control-samsungtv li#six a {
width: 14px;
height: 20px;
left: 166px;
top: 137px;
background: url(${base_url}/six.png) no-repeat 0 0px
}
#remote-control-samsungtv li#seven a {
width: 14px;
height: 21px;
left: 42px;
top: 183px;
background: url(${base_url}/seven.png) no-repeat 0 0px
}
#remote-control-samsungtv li#eight a {
width: 14px;
height: 21px;
left: 104px;
top: 183px;
background: url(${base_url}/eight.png) no-repeat 0 0px
}
#remote-control-samsungtv li#nine a {
width: 14px;
height: 20px;
left: 166px;
top: 183px;
background: url(${base_url}/nine.png) no-repeat 0 0px
}
#remote-control-samsungtv li#zero a {
width: 14px;
height: 20px;
left: 104px;
top: 229px;
background: url(${base_url}/zero.png) no-repeat 0 0px
}
#remote-control-samsungtv li#volplus a {
width: 25px;
height: 26px;
left: 39px;
top: 286px;
background: url(${base_url}/volplus.png) no-repeat 0 0px
}
#remote-control-samsungtv li#volmin a {
width: 26px;
height: 5px;
left: 39px;
top: 369px;
background: url(${base_url}/volmin.png) no-repeat 0 0px
}
#remote-control-samsungtv li#menu a {
width: 38px;
height: 28px;
left: 31px;
top: 415px;
background: url(${base_url}/menu.png) no-repeat 0px 0px;
}
#remote-control-samsungtv li#smarthub a {
width: 38px;
height: 28px;
left: 103px;
top: 400px;
background: url(${base_url}/smarthub.png) no-repeat 0px 0px
}
#remote-control-samsungtv li#mute a {
width: 29px;
height: 28px;
left: 96px;
top: 288px;
background: url(${base_url}/mute.png) no-repeat 0 0px
}
#remote-control-samsungtv li#lastch a {
width: 40px;
height: 28px;
left: 153px;
top: 225px;
background: url(${base_url}/lastch.png) no-repeat 0 0px
}
#remote-control-samsungtv li#back a {
width: 38px;
height: 29px;
left: 31px;
top: 576px;
background: url(${base_url}/back.png) no-repeat 0px 0px;
}
#remote-control-samsungtv li#exit a {
width: 35px;
height: 28px;
left: 152px;
top: 577px;
background: url(${base_url}/exit.png) no-repeat 0px 0px;
}
#remote-control-samsungtv li#guide a {
width: 38px;
height: 14px;
left: 151px;
top: 423px;
background: url(${base_url}/guide.png) no-repeat 0px 0px;
}
#remote-control-samsungtv li#info a {
width: 27px;
height: 28px;
left: 157px;
top: 467px;
background: url(${base_url}/info.png) no-repeat 0px 0px;
}
#remote-control-samsungtv li#left a {
width: 20px;
height: 16px;
left: 44px;
top: 527px;
background: url(${base_url}/left.png) no-repeat 0px 0px
}
#remote-control-samsungtv li#right a {
width: 19px;
height: 15px;
left: 157px;
top: 529px;
background: url(${base_url}/right.png) no-repeat 0px 0px
}
#remote-control-samsungtv li#top a {
left: 102px;
top: 475px;
width: 16px;
height: 19px;
background: url(${base_url}/top.png) no-repeat 0px 0px
}
#remote-control-samsungtv li#bottom a {
width: 16px;
height: 20px;
left: 102px;
top: 576px;
background: url(${base_url}/bottom.png) no-repeat 0px 0px
}
#remote-control-samsungtv li#fastforward a {
width: 18px;
height: 12px;
left: 168px;
top: 703px;
background: url(${base_url}/fastforward.png) no-repeat 0px 0px
}
#remote-control-samsungtv li#rewind a {
width: 18px;
height: 12px;
left: 35px;
top: 702px;
background: url(${base_url}/rewind.png) no-repeat 0px 0px
}
#remote-control-samsungtv li#play a {
width: 11px;
height: 12px;
left: 81px;
top: 702px;
background: url(${base_url}/play.png) no-repeat 0px 0px
}
#remote-control-samsungtv li#pause a {
width: 10px;
height: 11px;
left: 128px;
top: 703px;
background: url(${base_url}/pause.png) no-repeat 0px 0px
}
#remote-control-samsungtv li#stop a {
width: 13px;
height: 13px;
left: 172px;
top: 666px;
background: url(${base_url}/stop.png) no-repeat 0px 0px
}
#remote-control-samsungtv li#channelup a {
width: 34px;
height: 34px;
left: 152px;
top: 289px;
background: url(${base_url}/channelup.png) no-repeat 0px 0px
}
#remote-control-samsungtv li#channeldown a {
width: 33px;
height: 33px;
left: 153px;
top: 349px;
background: url(${base_url}/channeldown.png) no-repeat 0px 0px
}
#remote-control-samsungtv li#ok a {
width: 23px;
height: 15px;
left: 99px;
top: 528px;
background: url(${base_url}/ok.png) no-repeat 0px 0px
}
#remote-control-samsungtv li#one a:hover {
background: url(${base_url}/one_over.png) no-repeat 0 0px
}
#remote-control-samsungtv li#two a:hover {
background: url(${base_url}/two_over.png) no-repeat 0 0px
}
#remote-control-samsungtv li#three a:hover {
background: url(${base_url}/three_over.png) no-repeat 0 0px
}
#remote-control-samsungtv li#four a:hover {
background: url(${base_url}/four_over.png) no-repeat 0 0px
}
#remote-control-samsungtv li#five a:hover {
background: url(${base_url}/five_over.png) no-repeat 0 0px
}
#remote-control-samsungtv li#six a:hover {
background: url(${base_url}/six_over.png) no-repeat 0 0px
}
#remote-control-samsungtv li#seven a:hover {
background: url(${base_url}/seven_over.png) no-repeat 0 0px
}
#remote-control-samsungtv li#eight a:hover {
background: url(${base_url}/eight_over.png) no-repeat 0 0px
}
#remote-control-samsungtv li#nine a:hover {
background: url(${base_url}/nine_over.png) no-repeat 0 0px
}
#remote-control-samsungtv li#zero a:hover {
background: url(${base_url}/zero_over.png) no-repeat 0 0px
}
#remote-control-samsungtv li#volplus a:hover {
background: url(${base_url}/volplus_over.png) no-repeat 0 0px
}
#remote-control-samsungtv li#volmin a:hover {
background: url(${base_url}/volmin_over.png) no-repeat 0 0px
}
#remote-control-samsungtv li#menu a:hover {
background: url(${base_url}/menu_over.png) no-repeat 0px 0px
}
#remote-control-samsungtv li#lastch a:hover {
background: url(${base_url}/lastch_over.png) no-repeat 0px 0px
}
#remote-control-samsungtv li#back a:hover {
background: url(${base_url}/back_over.png) no-repeat 0px 0px;
}
#remote-control-samsungtv li#exit a:hover {
background: url(${base_url}/exit_over.png) no-repeat 0px 0px;
}
#remote-control-samsungtv li#guide a:hover {
background: url(${base_url}/guide_over.png) no-repeat 0px 0px;
}
#remote-control-samsungtv li#smarthub a:hover {
background: url(${base_url}/smarthub_over.png) no-repeat 0px 0px;
}
#remote-control-samsungtv li#info a:hover {
background: url(${base_url}/info_over.png) no-repeat 0px 0px;
}
#remote-control-samsungtv li#left a:hover {
background: url(${base_url}/left_over.png) no-repeat 0px 0px
}
#remote-control-samsungtv li#right a:hover {
background: url(${base_url}/right_over.png) no-repeat 0px 0px
}
#remote-control-samsungtv li#top a:hover {
background: url(${base_url}/top_over.png) no-repeat 0px 0px
}
#remote-control-samsungtv li#bottom a:hover {
background: url(${base_url}/bottom_over.png) no-repeat 0px 0px
}
#remote-control-samsungtv li#fastforward a:hover {
background: url(${base_url}/fastforward_over.png) no-repeat 0px 0px
}
#remote-control-samsungtv li#rewind a:hover {
background: url(${base_url}/rewind_over.png) no-repeat 0px 0px
}
#remote-control-samsungtv li#play a:hover {
background: url(${base_url}/play_over.png) no-repeat 0px 0px
}
#remote-control-samsungtv li#pause a:hover {
background: url(${base_url}/pause_over.png) no-repeat 0px 0px
}
#remote-control-samsungtv li#stop a:hover {
background: url(${base_url}/stop_over.png) no-repeat 0px 0px
}
#remote-control-samsungtv li#channelup a:hover {
background: url(${base_url}/channelup_over.png) no-repeat 0px 0px
}
#remote-control-samsungtv li#channeldown a:hover {
background: url(${base_url}/channeldown_over.png) no-repeat 0px 0px
}
#remote-control-samsungtv li#mute a:hover {
background: url(${base_url}/mute_over.png) no-repeat 0px 0px
}
#remote-control-samsungtv li#power a:hover {
background: url(${base_url}/power_over.png) no-repeat 0px 0px
}
#remote-control-samsungtv li#ok a:hover {
background: url(${base_url}/ok_over.png) no-repeat 0px 0px
}
`;
}
function getRemoteHtml_samsungtv(config){
const template = config.remote_template;
return `
<div class="container">
<div style="text-align:center">
<h1>${config.name}</h1>
</div>
<div id="remote-control-samsungtv">
<h2>
Main navigation
</h2>
<ul>
<li id="power" class="myButton-${template}"><a href="#" title="Power"><span>Power</span></a></li>
<li id="volmin" class="myButton-${template}"><a href="#" title="Vol Min"><span>Vol Min</span></a></li>
<li id="volplus" class="myButton-${template}"><a href="#" title="Vol Plus"><span>Vol Plus</span></a></li>
<li id="mute" class="myButton-${template}"><a href="#" title="Vol Mute"><span>Vol Mute</span></a></li>
<li id="source" class="myButton-${template}"><a href="#" title="Source"><span>Source</span></a></li>
</ul>
<ul>
<li id="lastch" class="myButton-${template}""><a href="#" title="last ch"><span>lastch</span></a></li>
</ul>
<ul>
<li class="myButton-${template}" id="one"><a href="#" title="one"><span>one</span></a></li>
<li class="myButton-${template}" id="two"><a href="#" title="two"><span>two</span></a></li>
<li class="myButton-${template}" id="three"><a href="#" title="three"><span>three</span></a></li>
<li class="myButton-${template}" id="four"><a href="#" title="four"><span>four</span></a></li>
<li class="myButton-${template}" id="five"><a href="#" title="five"><span>five</span></a></li>
<li class="myButton-${template}" id="six"><a href="#" title="six"><span>six</span></a></li>
<li class="myButton-${template}" id="seven"><a href="#" title="seven"><span>seven</span></a></li>
<li class="myButton-${template}" id="eight"><a href="#" title="eight"><span>eight</span></a></li>
<li class="myButton-${template}" id="nine"><a href="#" title="nine"><span>nine</span></a></li>
<li class="myButton-${template}" id="zero"><a href="#" title="zero"><span>zero</span></a></li>
<li class="myButton-${template}" id="fastforward"><a href="#" title="fastforward"><span>fastforward</span></a></li>
<li class="myButton-${template}" id="rewind"><a href="#" title="rewind"><span>rewind</span></a></li>
<li class="myButton-${template}" id="play"><a href="#" title="play"><span>play</span></a></li>
<li class="myButton-${template}" id="pause"><a href="#" title="pause"><span>pause</span></a></li>
<li class="myButton-${template}" id="stop"><a href="#" title="stop"><span>stop</span></a></li>
<li class="myButton-${template}" id="channelup"><a href="#" title="channel up"><span>channelup</span></a></li>
<li class="myButton-${template}" id="channeldown"><a href="#" title="channel down"><span>channeldown</span></a></li>
<li class="myButton-${template}" id="menu"><a href="#" title="Menu"><span>Menu</span></a></li>
<li class="myButton-${template}" id="smarthub"><a href="#" title="smarthub"><span>smarthub</span></a></li>
<li class="myButton-${template}" id="back"><a href="#" title="Go back"><span>back</span></a></li>
<li class="myButton-${template}" id="exit"><a href="#" title="Exit"><span>exit</span></a></li>
<li class="myButton-${template}" id="guide"><a href="#" title="Guide"><span>guide</span></a></li>
<li class="myButton-${template}" id="info"><a href="#" title="Info"><span>info</span></a></li>
<li class="myButton-${template}" id="left"><a href="#" title="Left"><span>Left</span></a></li>
<li class="myButton-${template}" id="right"><a href="#" title="right"><span>right</span></a></li>
<li class="myButton-${template}" id="top"><a href="#" title="Top"><span>Top</span></a></li>
<li class="myButton-${template}" id="bottom"><a href="#" title="Bottom"><span>Bottom</span></a></li>
<li class="myButton-${template}" id="ok"><a href="#" title="OK"><span>OK</span></a></li>
</ul>
</div>
</div>
`;
}
I also created the smarthub.png and smarthub_over.png files.
my yaml.config
buttons:
back:
call: remote.send_command
data:
entity_id: remote.lounge_remote
device: samsung television
command: back
zero:
call: remote.send_command
data:
entity_id: remote.lounge_remote
device: samsung television
command: zero
one:
call: remote.send_command
data:
entity_id: remote.lounge_remote
device: samsung television
command: one
two:
call: remote.send_command
data:
entity_id: remote.lounge_remote
device: samsung television
command: two
three:
call: remote.send_command
data:
entity_id: remote.lounge_remote
device: samsung television
command: three
four:
call: remote.send_command
data:
entity_id: remote.lounge_remote
device: samsung television
command: four
five:
call: remote.send_command
data:
entity_id: remote.lounge_remote
device: samsung television
command: five
six:
call: remote.send_command
data:
entity_id: remote.lounge_remote
device: samsung television
command: six
seven:
call: remote.send_command
data:
entity_id: remote.lounge_remote
device: samsung television
command: seven
eight:
call: remote.send_command
data:
entity_id: remote.lounge_remote
device: samsung television
command: eight
nine:
call: remote.send_command
data:
entity_id: remote.lounge_remote
device: samsung television
command: nine
exit:
call: remote.send_command
data:
entity_id: remote.lounge_remote
device: samsung television
command: exit
info:
call: remote.send_command
data:
entity_id: remote.lounge_remote
device: samsung television
command: info
buttonClear: null
buttonEnter: null
left:
call: remote.send_command
data:
entity_id: remote.lounge_remote
device: samsung television
command: left
right:
call: remote.send_command
data:
entity_id: remote.lounge_remote
device: samsung television
command: right
top:
call: remote.send_command
data:
entity_id: remote.lounge_remote
device: samsung television
command: top
bottom:
call: remote.send_command
data:
entity_id: remote.lounge_remote
device: samsung television
command: bottom
menu:
call: remote.send_command
data:
entity_id: remote.lounge_remote
device: samsung television
command: menu
mute:
call: remote.send_command
data:
entity_id: remote.lounge_remote
device: samsung television
command: mute
ok:
call: remote.send_command
data:
entity_id: remote.lounge_remote
device: samsung television
command: ok
power:
call: remote.send_command
data:
entity_id: remote.lounge_remote
device: samsung television
command: power
source:
call: remote.send_command
data:
entity_id: remote.lounge_remote
device: samsung television
command: source
volmin:
call: remote.send_command
data:
entity_id: remote.lounge_remote
device: samsung television
command: volmin
volplus:
call: remote.send_command
data:
entity_id: remote.lounge_remote
device: samsung television
command: volplus
channelup:
call: remote.send_command
data:
entity_id: remote.lounge_remote
device: samsung television
command: channel up
channeldown:
call: remote.send_command
data:
entity_id: remote.lounge_remote
device: samsung television
command: channel down
rewind:
call: remote.send_command
data:
entity_id: remote.lounge_remote
device: samsung television
command: rewind
play:
call: remote.send_command
data:
entity_id: remote.lounge_remote
device: samsung television
command: play
pause:
call: remote.send_command
data:
entity_id: remote.lounge_remote
device: samsung television
command: pause
stop:
call: remote.send_command
data:
entity_id: remote.lounge_remote
device: samsung television
command: stop
fastforward:
call: remote.send_command
data:
entity_id: remote.lounge_remote
command: fastforward
lastch:
call: remote.send_command
data:
entity_id: remote.lounge_remote
device: samsung television
command: last ch
guide:
call: remote.send_command
data:
entity_id: remote.lounge_remote
device: samsung television
command: guide
name: Samsung
remote_template: samsungtv
style: |
ha-card {
font-size: 10px;
}
h1{
text-align:left;
margin-left: 75px;
}
type: 'custom:generic-remote-control-card'
Any thoughts as to where i am going wrong?
Also the bottom of the remote is cutoff?
Regards,
Your remotes look very nice!
Can you please consider adding support for the Harmony Hub too?
This would make your remote truly "Generic".
Thanks!
I have used your info to produce two remotes and happy to share with you. I don;t know how though!
I have remote for 4k Apple TV and 4k Amazon Firestick
I have the remote-html file and all the separate images for buttons but I don;t think you expect me to just add them all to this message.
Sorry not done this before but happy to share my work.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.