A remote control card that can be used with any service!
broadlink, adb server, harmony or anything you want.
2 Likes
This is great.
I have used it already to have a remote calling a combination of switch on, off and toggle services.
This will be a powerful tool once I get some “remote faces” that are most relevant for my use cases.
Many thanks for sharing (and changing it to support any service)
Phil
glad i helped.
ill be glad to accept PRs for new remotes, (actually it can be anything, not just a remote)
Thanks for the great card. I made copied of simple dir and name as myremote and I change all the reference of simple in the remote-html.js file to myremote. I capture picture of my remote and name it as remote-back2.PNG and I change button id for 8 button. I am not sure what else I need to change. I am trying to understand the js file. It has all commented # so I am not sure what I need to change. I just need 8 button for my remote. This is for AV switch so just to switch AV input. Remote does not show up in lovelace. Just the heading shows up. I know I will have to change pixel to match my remote in the js file. But currently I am not sure why it does not show up. Thanks.
Please let me know if I am missing something.
function getRemoteStyle_avswitch(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: 241;
margin: 0 auto
}
#remote-control-avswitch {
position: relative;
background: url(${base_url}/remote-back2.png) no-repeat;
width: 241;
height: 537px
}
#remote-control-avswitch h2,
#remote-control-avswitch span {
position: absolute;
left: -5000px
}
#remote-control-avswitch ul {
margin: 0;
padding: 0;
list-style-type: none
}
#power a,
#a1 a,
#A2 a,
#A3 a,
#A4 a,
#b1 a,
#B2 a,
#B3 a,
#B4 a,
#remote-control-avswitch li#power a {
left: 33px;
top: 29px;
width: 37px;
height: 37px;
background: url(${base_url}/remote-home.jpg) no-repeat
}
#remote-control-avswitch li#power a:hover {
background-image: url(${base_url}/remote-home.jpg);
background-repeat: no-repeat;
background-position: 0 -37px
}
#remote-control-avswitch li#a1 a {
left: 154px;
top: 29px;
width: 37px;
height: 37px;
background: url(${base_url}/remote-sitemap.jpg) no-repeat
}
#remote-control-avswitch li#a1 a:hover {
background-image: url(${base_url}/remote-sitemap.jpg);
background-repeat: no-repeat;
background-position: 0 -37px
}
#remote-control-avswitch li#A2 a {
left: 176px;
top: 118px
}
#remote-control-avswitch li#A3 a {
left: 21px;
top: 176px
}
#remote-control-avswitch li#A4 a {
left: 176px;
top: 176px
}
#remote-control-avswitch li#b1 a {
left: 21px;
top: 239px
}
#remote-control-avswitch li#B2 a {
left: 176px;
top: 239px
}
#remote-control-avswitch li#B3 a {
left: 21px;
top: 300px
}
#remote-control-avswitch li#B4 a {
left: 176px;
top: 300px
}
#remote-control-avswitch li#a1 a:hover,
#remote-control-avswitch li#A2 a:hover,
#remote-control-avswitch li#A3 a:hover,
#remote-control-avswitch li#A4 a:hover,
#remote-control-avswitch li#b1 a:hover,
#remote-control-avswitch li#B2 a:hover,
#remote-control-avswitch li#B3 a:hover,
#remote-control-avswitch li#B4 a:hover, {
background-image: url(${base_url}/remote-button.jpg);
background-repeat: no-repeat;
background-position: 0 -21px
}
`;
}
function getRemoteHtml_avswitch(config){return `
${config.name}
`;
}
I made a nice photo of my Sony remote. I can slice it up, but I do not really know what would be next. could you explain?
you can look at any other remote in the repo and just copy it and make adaptations
I tried, but there is no documentation provided and because of that it feels a monumental effort…
One of the challenges I have is how to map the sliced PNGs to the .js file.
Did you use some sort of generator for the .js file?
1 Like
sorry, im not a FED so i didnt do it, only one example, all othe remotes are contributions
Not sure what I am doing wrong. Installed via Hacs. It’s listed when I click manages resources, but it doesn’t show up as a custom card in lovelace.
just paste the example from the readme to a custom card
Can this use for tasmota based ir? using mqtt
It can be used for anything since it calls an ha service
Hi I have installed this and have the mibox remote displaying nicely in Lovelace,
I customized the card with the specifics to control my MiProj and the buttons do nothing.
Running the same YAML manually from Developer Tools / Services works as I would hope.
Not sure what I am missing?
Bump… can anyone shed some light to what I am missing with making the buttons on the image perform the functions? Please.
Helloooooo anybody?
did u look at the examples? the actions per button are configured in the card itself
its a service call:
buttons:
back:
call: remote.send_command
data:
entity_id: remote.living_room_remote
command: >-
b64:JgBgAAABJZEVEBITERMTEhMRExITEhISEjYUNhI3EzYTNhM1ExISNxQQFBETEhE4ExETEhM2EhISNxM2EzYTEhI3EzUUERM2EwAFOgABJ0gSAAwPAAEkSRMADA4AASVJEgANBQAAAAAAAAAA
bottom:
call: remote.send_command
data:
entity_id: remote.living_room_remote
command: >-
b64:JgBQAAABKZIUERMSEhIUERUQFBEUERMSEzYUNhM2FTQUNhM2FBAUNhQ1FTQVNRQRFDUUERUQExITEhQRFBAVNBURFDUVNBU1FAAFTQABKUgVAA0FAAAAAAAAAAA=
button0:
call: remote.send_command
data:
entity_id: remote.living_room_remote
command: >-
b64:JgBQAAABKpITERUQFRAUERQRFBETEhMRFTUUNRU0FTUTNhU0FRAVNRMSFBAVEBQRExIUERQRExEVNBU1FDUVNBU1FDUVNRQ1FAAFTgABKUgWAA0FAAAAAAAAAAA=
button1:
call: remote.send_command
data:
entity_id: remote.living_room_remote
command: >-
b64:JgBQAAABKJIVEBUSEhISEhQRFBEUEBUQFjQUNRU0FDYUNRQ2FBETNhQ1FBEUERQRExETEhUQFBEUERQ1EzYVNRQ1FTQVNRQ1FQAFTQABKUgUAA0FAAAAAAAAAAA=
Thank you for the reply,
I have looked at the examples and believe I have done what is needed.
Here is my card:
buttons:
back:
service: androidtv.adb_command
data:
command: input keyevent 4
target:
device_id: media_player.projector_3
bottom:
service: androidtv.adb_command
data:
command: input keyevent 20
target:
device_id: media_player.projector_3
clickleft:
service: androidtv.adb_command
data:
command: input keyevent 21
target:
device_id: media_player.projector_3
clickright:
service: androidtv.adb_command
data:
command: input keyevent 22
target:
device_id: media_player.projector_3
home:
service: androidtv.adb_command
data:
command: input keyevent 3
target:
device_id: media_player.projector_3
ok:
service: androidtv.adb_command
data:
command: input keyevent 66
target:
entity_id: media_player.projector_3
power:
service: androidtv.adb_command
data:
command: input keyevent 26
target:
device_id: media_player.projector_3
top:
service: androidtv.adb_command
data:
command: input keyevent 19
target:
device_id: media_player.projector_3
volumedown:
service: script.cinema_volume_down
data: {}
volumeup:
service: script.cinema_volume_up
data: {}
name: Cinema Projector
remote_template: mibox
type: custom:generic-remote-control-card
But not one button actually does anything, but if I use the developer tools to issue the exact same command for the androidtv service it works fine,
One the remote card I tap a button and it gets a highlight on it, but nothing happens as hoped.
I am sure I am missing something, but not obvious to me.
Still looking for help on this.
I just used the commands ON OFF LEFT RIGHT etc.
Also try with them in quotation marks.
“ON” “OFF” “CENTER” etc.
Can anyone help with this. Im getting an overlap with the background or something that just seems to span forever until reaching some test saying “Main Menu” I can just scroll right for aggggessss.
Its really pushing the buttons with my OCD,
I believe this is the template file.
function getRemoteStyle_firestick4kremote(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-firestick4kremote {
position: relative;
background: url(${base_url}/firestick4kremote.png) no-repeat;
width: 332px;
height: 768px
}
#remote-control-firestick4kremote h2,
#remote-control-firestick4kremote span {
position: absolute;
left: 5000px
}
#remote-control-firestick4kremote ul {
margin: 0;
padding: 0;
list-style-type: none
}
#pwr a,
#mic a,
#volup a,
#voldown a,
#mute a,
#up a,
#left a,
#select a,
#right a,
#down a,
#back a,
#home a,
#menu a,
#rwd a,
#play a,
#fwd a {
position: absolute;
disrwd: block
}
#remote-control-firestick4kremote li#pwr a {
left: 86px;
top: 27px;
width: 36px;
height: 36px;
background: url(${base_url}/pwr.png) no-repeat
}
#remote-control-firestick4kremote li#mic a {
left: 140px;
top: 68px;
width: 49px;
height: 49px;
background: url(${base_url}/mic.png) no-repeat
}
#remote-control-firestick4kremote li#volup a {
left: 140px;
top: 428px;
width: 49px;
height: 49px;
background: url(${base_url}/volup.png) no-repeat
}
#remote-control-firestick4kremote li#voldown a {
left: 140px;
top: 485px;
width: 49px;
height: 49px;
background: url(${base_url}/voldown.png) no-repeat
}
#remote-control-firestick4kremote li#mute a {
left: 140px;
top: 548px;
width: 49px;
height: 49px;
background: url(${base_url}/mute.png) no-repeat
}
#remote-control-firestick4kremote li#up a {
left: 120px;
top: 129px;
width: 89px;
height: 42px;
background: url(${base_url}/up.png) no-repeat
}
#remote-control-firestick4kremote li#left a {
left: 78px;
top: 169px;
width: 42px;
height: 89px;
background: url(${base_url}/left.png) no-repeat
}
#remote-control-firestick4kremote li#select a {
left: 134px;
top: 183px;
width: 63px;
height: 63px;
background: url(${base_url}/select.png) no-repeat
}
#remote-control-firestick4kremote li#right a {
left: 210px;
top: 169px;
width: 42px;
height: 89px;
background: url(${base_url}/right.png) no-repeat
}
#remote-control-firestick4kremote li#down a {
left: 120px;
top: 256px;
width: 89px;
height: 42px;
background: url(${base_url}/down.png) no-repeat
}
#remote-control-firestick4kremote li#back a {
left: 80px;
top: 308px;
width: 49px;
height: 49px;
background: url(${base_url}/back.png) no-repeat
}
#remote-control-firestick4kremote li#home a {
left: 140px;
top: 308px;
width: 49px;
height: 49px;
background: url(${base_url}/home.png) no-repeat
}
#remote-control-firestick4kremote li#menu a {
left: 200px;
top: 308px;
width: 49px;
height: 49px;
background: url(${base_url}/menu.png) no-repeat
}
#remote-control-firestick4kremote li#rwd a {
left: 80px;
top: 367px;
width: 49px;
height: 49px;
background: url(${base_url}/rwd.png) no-repeat
}
#remote-control-firestick4kremote li#play a {
left: 140px;
top: 367px;
width: 49px;
height: 49px;
background: url(${base_url}/play.png) no-repeat
}
#remote-control-firestick4kremote li#fwd a {
left: 200px;
top: 367px;
width: 49px;
height: 49px;
background: url(${base_url}/fwd.png) no-repeat
}
#remote-control-firestick4kremote li#pwr a:hover {
background: url(${base_url}/pwr_over.png) no-repeat 0px 0px
}
#remote-control-firestick4kremote li#mic a:hover {
background: url(${base_url}/mic_over.png) no-repeat 0px 0px
}
#remote-control-firestick4kremote li#volup a:hover {
background: url(${base_url}/volup_over.png) no-repeat 0px 0px
}
#remote-control-firestick4kremote li#voldown a:hover {
background: url(${base_url}/voldown_over.png) no-repeat 0px 0px
}
#remote-control-firestick4kremote li#mute a:hover {
background: url(${base_url}/mute_over.png) no-repeat 0px 0px
}
#remote-control-firestick4kremote li#up a:hover {
background: url(${base_url}/up_over.png) no-repeat 0px 0px
}
#remote-control-firestick4kremote li#left a:hover {
background: url(${base_url}/left_over.png) no-repeat 0px 0px
}
#remote-control-firestick4kremote li#select a:hover {
background: url(${base_url}/select_over.png) no-repeat 0px 0px
}
#remote-control-firestick4kremote li#right a:hover {
background: url(${base_url}/right_over.png) no-repeat 0px 0px
}
#remote-control-firestick4kremote li#down a:hover {
background: url(${base_url}/down_over.png) no-repeat 0px 0px
}
#remote-control-firestick4kremote li#back a:hover {
background: url(${base_url}/back_over.png) no-repeat 0px 0px
}
#remote-control-firestick4kremote li#home a:hover {
background: url(${base_url}/home_over.png) no-repeat 0px 0px
}
#remote-control-firestick4kremote li#menu a:hover {
background: url(${base_url}/menu_over.png) no-repeat 0px 0px
}
#remote-control-firestick4kremote li#rwd a:hover {
background: url(${base_url}/rwd_over.png) no-repeat 0px 0px
}
#remote-control-firestick4kremote li#play a:hover {
background: url(${base_url}/play_over.png) no-repeat 0px 0px
}
#remote-control-firestick4kremote li#fwd a:hover {
background: url(${base_url}/fwd_over.png) no-repeat 0px 0px
}
`;
}
function getRemoteHtml_firestick4kremote(config){
const template = config.remote_template;
return `
<div class="container">
<div style="text-align:center">
<h1>${config.name}</h1>
</div>
<div id="remote-control-firestick4kremote">
<h2>
Main navigation
</h2>
<ul>
<li id="pwr" class="myButton-${template}"><a href="#" title="pwr"><span>pwr</span></a></li>
<li id="mic" class="myButton-${template}"><a href="#" title="mic"><span>mic</span></a></li>
<li id="volup" class="myButton-${template}"><a href="#" title="volup"><span>volup</span></a></li>
<li id="voldown" class="myButton-${template}"><a href="#" title="voldown"><span>voldown</span></a></li>
<li id="mute" class="myButton-${template}"><a href="#" title="mute"><span>mute</span></a></li>
<li id="up" class="myButton-${template}"><a href="#" title="up"><span>up</span></a></li>
<li id="left" class="myButton-${template}"><a href="#" title="left"><span>left</span></a></li>
<li id="select" class="myButton-${template}"><a href="#" title="select"><span>select</span></a></li>
<li id="right" class="myButton-${template}"><a href="#" title="right"><span>right</span></a></li>
<li id="down" class="myButton-${template}"><a href="#" title="down"><span>down</span></a></li>
<li id="back" class="myButton-${template}"><a href="#" title="back"><span>back</span></a></li>
<li id="home" class="myButton-${template}"><a href="#" title="home"><span>home</span></a></li>
<li id="menu" class="myButton-${template}"><a href="#" title="menu"><span>menu</span></a></li>
<li id="rwd" class="myButton-${template}"><a href="#" title="rwd"><span>rwd</span></a></li>
<li id="play" class="myButton-${template}"><a href="#" title="play"><span>play</span></a></li>
<li id="fwd" class="myButton-${template}"><a href="#" title="fwd"><span>fwd</span></a></li>
</ul>
</div>
</div>
`;
}
Thanks!