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 `
evmux - Full-time Senior Software Engineer
Feb 2022 - Present
Beersheba, Southern, Israel
Wix.com - Full-time Senior Software Engineer
Nov 2014 - Jan 2022
Tel Aviv
fiverr
Software EngineerS
Fiverr (Fiverr.com)
Feb 2014 - Oct 2014
Israel, Tel Aviv
eDealya
Developer
eDealyae
Feb 2011 - Jan 2014
Ben-Gurion University of the NegevBen-Gurion University of the Negev
Computer Software EngineeringBachelor of Science (BSc) 2009 - 2012
Wix Bookings
find-car site (sold)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent