512 lines
13 KiB
JavaScript
512 lines
13 KiB
JavaScript
function getRemoteStyle_infocus_ir1109r1(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: 215px;
|
|
margin: 0 auto
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 {
|
|
position: relative;
|
|
background: url(${base_url}/remote-background.png) no-repeat;
|
|
width: 215px;
|
|
height: 717px
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 h2,
|
|
#remote-control-infocus_ir1109r1 span {
|
|
position: absolute;
|
|
left: -5000px
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 div {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style-type: none
|
|
}
|
|
|
|
#avmute a,
|
|
#power a,
|
|
#resync a,
|
|
#source a,
|
|
#up a,
|
|
#left a,
|
|
#enter a,
|
|
#right a,
|
|
#down a,
|
|
#menu a,
|
|
#eco a,
|
|
#keystoneup a,
|
|
#keystonedown a,
|
|
#volumeup a,
|
|
#volumedown a,
|
|
#one a,
|
|
#two a,
|
|
#three a,
|
|
#four a,
|
|
#five a,
|
|
#six a,
|
|
#seven a,
|
|
#eight a,
|
|
#nine a,
|
|
#mouse a,
|
|
#zero a,
|
|
#mute a {
|
|
position: absolute;
|
|
display: block
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 div#avmute a {
|
|
left: 39px;
|
|
bottom: 661px;
|
|
width: 45px;
|
|
height: 12px;
|
|
background: url(${base_url}/btn-av-mute.png) no-repeat
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 div#avmute a:hover {
|
|
background-image: url(${base_url}/btn-av-mute_over.png);
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0px
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 div#power a {
|
|
left: 139px;
|
|
bottom: 655px;
|
|
width: 21px;
|
|
height: 25px;
|
|
background: url(${base_url}/btn-power.png) no-repeat
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 div#power a:hover {
|
|
background-image: url(${base_url}/btn-power_over.png);
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0px
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 div#resync a {
|
|
left: 19px;
|
|
bottom: 584px;
|
|
width: 34px;
|
|
height: 36px;
|
|
background: none
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 div#resync a:hover {
|
|
background-image: url(${base_url}/btn-re-sync_over.png);
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0px
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 div#source a {
|
|
left: 157px;
|
|
bottom: 585px;
|
|
width: 34px;
|
|
height: 36px;
|
|
background: none
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 div#source a:hover {
|
|
background-image: url(${base_url}/btn-source_over.png);
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0px
|
|
}
|
|
|
|
|
|
#remote-control-infocus_ir1109r1 div#up a {
|
|
left: 98px;
|
|
bottom: 593px;
|
|
width: 17px;
|
|
height: 17px;
|
|
background: url(${base_url}/btn-up.png) no-repeat
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 div#up a:hover {
|
|
background-image: url(${base_url}/btn-up_over.png);
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0px
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 div#left a {
|
|
left: 27px;
|
|
bottom: 523px;
|
|
width: 17px;
|
|
height: 17px;
|
|
background: url(${base_url}/btn-left.png) no-repeat
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 div#left a:hover {
|
|
background-image: url(${base_url}/btn-left_over.png);
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0px
|
|
}
|
|
|
|
|
|
#remote-control-infocus_ir1109r1 div#enter a {
|
|
left: 90px;
|
|
bottom: 526px;
|
|
width: 31px;
|
|
height: 12px;
|
|
background: url(${base_url}/btn-enter.png) no-repeat
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 div#enter a:hover {
|
|
background-image: url(${base_url}/btn-enter_over.png);
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0px
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 div#right a {
|
|
left: 168px;
|
|
bottom: 525px;
|
|
width: 17px;
|
|
height: 17px;
|
|
background: url(${base_url}/btn-right.png) no-repeat
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 div#right a:hover {
|
|
background-image: url(${base_url}/btn-right_over.png);
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0px
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 div#down a {
|
|
left: 97px;
|
|
bottom: 456px;
|
|
width: 17px;
|
|
height: 17px;
|
|
background: url(${base_url}/btn-down.png) no-repeat
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 div#down a:hover {
|
|
background-image: url(${base_url}/btn-down_over.png);
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0px
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 div#menu a {
|
|
left: 22px;
|
|
bottom: 446px;
|
|
width: 30px;
|
|
height: 12px;
|
|
background: url(${base_url}/btn-menu.png) no-repeat
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 div#menu a:hover {
|
|
background-image: url(${base_url}/btn-menu_over.png);
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0px
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 div#eco a {
|
|
left: 163px;
|
|
bottom: 447px;
|
|
width: 27px;
|
|
height: 12px;
|
|
background: url(${base_url}/btn-eco.png) no-repeat
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 div#eco a:hover {
|
|
background-image: url(${base_url}/btn-eco_over.png);
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0px
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 div#keystoneup a {
|
|
left: 50px;
|
|
bottom: 385px;
|
|
width: 24px;
|
|
height: 24px;
|
|
background: url(${base_url}/btn-plus.png) no-repeat
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 div#keystoneup a:hover {
|
|
background-image: url(${base_url}/btn-plus_over.png);
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0px
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 div#keystonedown a {
|
|
left: 51px;
|
|
bottom: 326px;
|
|
width: 21px;
|
|
height: 7px;
|
|
background: url(${base_url}/btn-minus.png) no-repeat
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 div#keystonedown a:hover {
|
|
background-image: url(${base_url}/btn-minus_over.png);
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0px
|
|
}
|
|
#remote-control-infocus_ir1109r1 div#volumeup a {
|
|
left: 139px;
|
|
bottom: 385px;
|
|
width: 24px;
|
|
height: 24px;
|
|
background: url(${base_url}/btn-plus.png) no-repeat
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 div#volumeup a:hover {
|
|
background-image: url(${base_url}/btn-plus_over.png);
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0px
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 div#volumedown a {
|
|
left: 140px;
|
|
bottom: 326px;
|
|
width: 21px;
|
|
height: 7px;
|
|
background: url(${base_url}/btn-minus.png) no-repeat
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 div#volumedown a:hover {
|
|
background-image: url(${base_url}/btn-minus_over.png);
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0px
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 div#one a {
|
|
left: 42px;
|
|
bottom: 254px;
|
|
width: 6px;
|
|
height: 11px;
|
|
background: url(${base_url}/btn-one.png) no-repeat
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 div#one a:hover {
|
|
background-image: url(${base_url}/btn-one_over.png);
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0px
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 div#two a {
|
|
left: 102px;
|
|
bottom: 253px;
|
|
width: 8px;
|
|
height: 10px;
|
|
background: url(${base_url}/btn-two.png) no-repeat
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 div#two a:hover {
|
|
background-image: url(${base_url}/btn-two_over.png);
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0px
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 div#three a {
|
|
left: 162px;
|
|
bottom: 253px;
|
|
width: 8px;
|
|
height: 11px;
|
|
background: url(${base_url}/btn-three.png) no-repeat
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 div#three a:hover {
|
|
background-image: url(${base_url}/btn-three_over.png);
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0px
|
|
}
|
|
|
|
|
|
#remote-control-infocus_ir1109r1 div#four a {
|
|
left: 35px;
|
|
bottom: 206px;
|
|
width: 21px;
|
|
height: 12px;
|
|
background: url(${base_url}/btn-four.png) no-repeat
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 div#four a:hover {
|
|
background-image: url(${base_url}/btn-four_over.png);
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0px
|
|
}
|
|
|
|
|
|
#remote-control-infocus_ir1109r1 div#five a {
|
|
left: 101px;
|
|
bottom: 206px;
|
|
width: 9px;
|
|
height: 12px;
|
|
background: url(${base_url}/btn-five.png) no-repeat
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 div#five a:hover {
|
|
background-image: url(${base_url}/btn-five_over.png);
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0px
|
|
}
|
|
|
|
|
|
#remote-control-infocus_ir1109r1 div#six a {
|
|
left: 154px;
|
|
bottom: 206px;
|
|
width: 25px;
|
|
height: 12px;
|
|
background: url(${base_url}/btn-six.png) no-repeat
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 div#six a:hover {
|
|
background-image: url(${base_url}/btn-six_over.png);
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0px
|
|
}
|
|
|
|
|
|
#remote-control-infocus_ir1109r1 div#seven a {
|
|
left: 34px;
|
|
bottom: 160px;
|
|
width: 21px;
|
|
height: 12px;
|
|
background: url(${base_url}/btn-seven.png) no-repeat
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 div#seven a:hover {
|
|
background-image: url(${base_url}/btn-seven_over.png);
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0px
|
|
}
|
|
|
|
|
|
#remote-control-infocus_ir1109r1 div#eight a {
|
|
left: 102px;
|
|
bottom: 160px;
|
|
width: 9px;
|
|
height: 12px;
|
|
background: url(${base_url}/btn-eight.png) no-repeat
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 div#eight a:hover {
|
|
background-image: url(${base_url}/btn-eight_over.png);
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0px
|
|
}
|
|
|
|
|
|
#remote-control-infocus_ir1109r1 div#nine a {
|
|
left: 155px;
|
|
bottom: 160px;
|
|
width: 21px;
|
|
height: 12px;
|
|
background: url(${base_url}/btn-nine.png) no-repeat
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 div#nine a:hover {
|
|
background-image: url(${base_url}/btn-nine_over.png);
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0px
|
|
}
|
|
|
|
|
|
#remote-control-infocus_ir1109r1 div#mouse a {
|
|
left: 28px;
|
|
bottom: 106px;
|
|
width: 36px;
|
|
height: 28px;
|
|
background: none
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 div#mouse a:hover {
|
|
background-image: url(${base_url}/btn-over.png);
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0px
|
|
}
|
|
|
|
|
|
#remote-control-infocus_ir1109r1 div#zero a {
|
|
left: 102px;
|
|
bottom: 114px;
|
|
width: 9px;
|
|
height: 12px;
|
|
background: url(${base_url}/btn-zero.png) no-repeat
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 div#zero a:hover {
|
|
background-image: url(${base_url}/btn-zero_over.png);
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0px
|
|
}
|
|
|
|
|
|
#remote-control-infocus_ir1109r1 div#mute a {
|
|
left: 148px;
|
|
bottom: 106px;
|
|
width: 36px;
|
|
height: 28px;
|
|
background: none
|
|
}
|
|
|
|
#remote-control-infocus_ir1109r1 div#mute a:hover {
|
|
background-image: url(${base_url}/btn-over.png);
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0px
|
|
}
|
|
|
|
|
|
|
|
`;
|
|
}
|
|
|
|
function getRemoteHtml_infocus_ir1109r1(config){
|
|
const template = config.remote_template;
|
|
return `
|
|
<div class="container">
|
|
<div style="text-align:center">
|
|
<h1>${config.name}</h1>
|
|
</div>
|
|
<div id="remote-control-infocus_ir1109r1">
|
|
<h2>
|
|
Main navigation
|
|
</h2>
|
|
<div id="avmute" class="myButton-${template}"><a href="#" title="AV Mute"><span>AV Mute</span></a></div>
|
|
<div id="power" class="myButton-${template}"><a href="#" title="Power"><span>Power</span></a></div>
|
|
|
|
<div id="resync" class="myButton-${template}"><a href="#" title="Re-Sync"><span>Re-Sync</span></a></div>
|
|
<div id="source" class="myButton-${template}"><a href="#" title="Source"><span>Source</span></a></div>
|
|
|
|
<div id="up" class="myButton-${template}"><a href="#" title="Up"><span>Up</span></a></div>
|
|
<div id="left" class="myButton-${template}"><a href="#" title="Left"><span>Left</span></a></div>
|
|
<div id="enter" class="myButton-${template}"><a href="#" title="Enter"><span>Enter</span></a></div>
|
|
<div id="right" class="myButton-${template}"><a href="#" title="Right"><span>Right</span></a></div>
|
|
<div id="down" class="myButton-${template}"><a href="#" title="Down"><span>Down</span></a></div>
|
|
|
|
<div id="menu" class="myButton-${template}"><a href="#" title="Menu"><span>Menu</span></a></div>
|
|
<div id="eco" class="myButton-${template}"><a href="#" title="ECO"><span>ECO</span></a></div>
|
|
|
|
<div id="keystoneup" class="myButton-${template}"><a href="#" title="Keystone Up"><span>Keystone Up</span></a></div>
|
|
<div id="keystonedown" class="myButton-${template}"><a href="#" title="Keystone Down"><span>Keystone Down</span></a></div>
|
|
<div id="volumeup" class="myButton-${template}"><a href="#" title="Volume Up"><span>Volume Up</span></a></div>
|
|
<div id="volumedown" class="myButton-${template}"><a href="#" title="Volume Down"><span>Volume Down</span></a></div>
|
|
|
|
<div id="one" class="myButton-${template}"><a href="#" title="1/VGA"><span>1/VGA</span></a></div>
|
|
<div id="two" class="myButton-${template}"><a href="#" title="2/Video"><span>2/Video</span></a></div>
|
|
<div id="three" class="myButton-${template}"><a href="#" title="3/HDMI"><span>3/HDMI</span></a></div>
|
|
<div id="four" class="myButton-${template}"><a href="#" title="4/Page Up"><span>4/Page Up</span></a></div>
|
|
<div id="five" class="myButton-${template}"><a href="#" title="5/Aspect"><span>5/Aspect</span></a></div>
|
|
<div id="six" class="myButton-${template}"><a href="#" title="6/Zoom Up"><span>6/Zoom Up</span></a></div>
|
|
<div id="seven" class="myButton-${template}"><a href="#" title="7/Page Down"><span>7/Page Down</span></a></div>
|
|
<div id="eight" class="myButton-${template}"><a href="#" title="8/Freeze"><span>8/Freeze</span></a></div>
|
|
<div id="nine" class="myButton-${template}"><a href="#" title="9/Zoom Down"><span>9/Zoom Down</span></a></div>
|
|
<div id="mouse" class="myButton-${template}"><a href="#" title="Mouse"><span>Mouse</span></a></div>
|
|
<div id="zero" class="myButton-${template}"><a href="#" title="0/Picture"><span>0/Picture</span></a></div>
|
|
<div id="mute" class="myButton-${template}"><a href="#" title="Mute"><span>Mute</span></a></div>
|
|
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|