root
261 lines
6.6 KiB
JavaScript
261 lines
6.6 KiB
JavaScript
function getRemoteStyle_jblsoundbar(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-jblsoundbar {
|
|
position: relative;
|
|
background: url(${base_url}/jblsoundbar_remote.png) no-repeat;
|
|
width: 327px;
|
|
height: 692px
|
|
}
|
|
|
|
#remote-control-jblsoundbar h2,
|
|
#remote-control-jblsoundbar span {
|
|
position: absolute;
|
|
left: 5000px
|
|
}
|
|
|
|
#remote-control-jblsoundbar ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style-type: none
|
|
}
|
|
|
|
#power a,
|
|
#bluetooth a,
|
|
#source a,
|
|
#aux a,
|
|
#optical a,
|
|
#feedback a,
|
|
#minus a,
|
|
#mute a,
|
|
#plus a,
|
|
#bassminus a,
|
|
#bassplus a,
|
|
#surround a,
|
|
#stereo a,
|
|
#harman a {
|
|
position: absolute;
|
|
display: block
|
|
}
|
|
|
|
#remote-control-jblsoundbar li#power a {
|
|
left: 56px;
|
|
top: 75px;
|
|
width: 38px;
|
|
height: 38px;
|
|
background: url(${base_url}/power.png) no-repeat
|
|
}
|
|
|
|
#remote-control-jblsoundbar li#bluetooth a {
|
|
left: 147px;
|
|
top: 74px;
|
|
width: 38px;
|
|
height: 38px;
|
|
background: url(${base_url}/bluetooth.png) no-repeat
|
|
}
|
|
|
|
#remote-control-jblsoundbar li#source a {
|
|
left: 240px;
|
|
top: 74px;
|
|
width: 38px;
|
|
height: 38px;
|
|
background: url(${base_url}/source.png) no-repeat
|
|
}
|
|
|
|
#remote-control-jblsoundbar li#aux a {
|
|
left: 56px;
|
|
top: 158px;
|
|
width: 38px;
|
|
height: 38px;
|
|
background: url(${base_url}/auxiliar.png) no-repeat
|
|
}
|
|
|
|
#remote-control-jblsoundbar li#optical a {
|
|
left: 148px;
|
|
top: 157px;
|
|
width: 38px;
|
|
height: 38px;
|
|
background: url(${base_url}/optical.png) no-repeat
|
|
}
|
|
|
|
#remote-control-jblsoundbar li#feedback a {
|
|
left: 233px;
|
|
top: 157px;
|
|
width: 46px;
|
|
height: 38px;
|
|
background: url(${base_url}/feedback.png) no-repeat
|
|
}
|
|
|
|
#remote-control-jblsoundbar li#minus a {
|
|
left: 55px;
|
|
top: 239px;
|
|
width: 38px;
|
|
height: 38px;
|
|
background: url(${base_url}/minus.png) no-repeat
|
|
}
|
|
|
|
#remote-control-jblsoundbar li#mute a {
|
|
left: 148px;
|
|
top: 239px;
|
|
width: 38px;
|
|
height: 38px;
|
|
background: url(${base_url}/mute.png) no-repeat
|
|
}
|
|
|
|
#remote-control-jblsoundbar li#plus a {
|
|
left: 238px;
|
|
top: 239px;
|
|
width: 38px;
|
|
height: 38px;
|
|
background: url(${base_url}/plus.png) no-repeat
|
|
}
|
|
|
|
#remote-control-jblsoundbar li#bassminus a {
|
|
left: 55px;
|
|
top: 322px;
|
|
width: 38px;
|
|
height: 38px;
|
|
background: url(${base_url}/minus.png) no-repeat
|
|
}
|
|
|
|
#remote-control-jblsoundbar li#bassplus a {
|
|
left: 238px;
|
|
top: 322px;
|
|
width: 38px;
|
|
height: 38px;
|
|
background: url(${base_url}/plus.png) no-repeat
|
|
}
|
|
|
|
#remote-control-jblsoundbar li#surround a {
|
|
left: 55px;
|
|
top: 405px;
|
|
width: 38px;
|
|
height: 38px;
|
|
background: url(${base_url}/surround.png) no-repeat
|
|
}
|
|
|
|
#remote-control-jblsoundbar li#stereo a {
|
|
left: 147px;
|
|
top: 406px;
|
|
width: 38px;
|
|
height: 38px;
|
|
background: url(${base_url}/stereo.png) no-repeat
|
|
}
|
|
|
|
#remote-control-jblsoundbar li#harman a {
|
|
left: 238px;
|
|
top: 406px;
|
|
width: 38px;
|
|
height: 38px;
|
|
background: url(${base_url}/harman.png) no-repeat
|
|
}
|
|
|
|
#remote-control-jblsoundbar li#power a:hover {
|
|
background: url(${base_url}/power_over.png) no-repeat 0px 0px
|
|
}
|
|
|
|
#remote-control-jblsoundbar li#bluetooth a:hover {
|
|
background: url(${base_url}/bluetooth_over.png) no-repeat 0px 0px
|
|
}
|
|
|
|
#remote-control-jblsoundbar li#source a:hover {
|
|
background: url(${base_url}/source_over.png) no-repeat 0px 0px
|
|
}
|
|
|
|
#remote-control-jblsoundbar li#aux a:hover {
|
|
background: url(${base_url}/auxiliar_over.png) no-repeat 0px 0px
|
|
}
|
|
|
|
#remote-control-jblsoundbar li#optical a:hover {
|
|
background: url(${base_url}/optical_over.png) no-repeat 0px 0px
|
|
}
|
|
|
|
#remote-control-jblsoundbar li#feedback a:hover {
|
|
background: url(${base_url}/feedback_over.png) no-repeat 0px 0px
|
|
}
|
|
|
|
#remote-control-jblsoundbar li#minus a:hover {
|
|
background: url(${base_url}/minus_over.png) no-repeat 0px 0px
|
|
}
|
|
|
|
#remote-control-jblsoundbar li#mute a:hover {
|
|
background: url(${base_url}/mute_over.png) no-repeat 0px 0px
|
|
}
|
|
|
|
#remote-control-jblsoundbar li#plus a:hover {
|
|
background: url(${base_url}/plus_over.png) no-repeat 0px 0px
|
|
}
|
|
|
|
#remote-control-jblsoundbar li#bassminus a:hover {
|
|
background: url(${base_url}/minus_over.png) no-repeat 0px 0px
|
|
}
|
|
|
|
#remote-control-jblsoundbar li#bassplus a:hover {
|
|
background: url(${base_url}/plus_over.png) no-repeat 0px 0px
|
|
}
|
|
|
|
#remote-control-jblsoundbar li#surround a:hover {
|
|
background: url(${base_url}/surround_over.png) no-repeat 0px 0px
|
|
}
|
|
|
|
#remote-control-jblsoundbar li#stereo a:hover {
|
|
background: url(${base_url}/stereo_over.png) no-repeat 0px 0px
|
|
}
|
|
|
|
#remote-control-jblsoundbar li#harman a:hover {
|
|
background: url(${base_url}/harman_over.png) no-repeat 0px 0px
|
|
}
|
|
`;
|
|
}
|
|
|
|
function getRemoteHtml_jblsoundbar(config){
|
|
const template = config.remote_template;
|
|
return `
|
|
|
|
<div class="container">
|
|
<div style="text-align:center">
|
|
<h1>${config.name}</h1>
|
|
</div>
|
|
<div id="remote-control-jblsoundbar">
|
|
<h2>
|
|
Main navigation
|
|
</h2>
|
|
<ul>
|
|
<li id="power" class="myButton-${template}"><a href="#" title="Power"><span>Power</span></a></li>
|
|
<li id="bluetooth" class="myButton-${template}"><a href="#" title="Bluetooth"><span>Bluetooth</span></a></li>
|
|
<li id="source" class="myButton-${template}"><a href="#" title="Source"><span>Source</span></a></li>
|
|
<li id="aux" class="myButton-${template}"><a href="#" title="Aux"><span>Aux</span></a></li>
|
|
<li id="optical" class="myButton-${template}"><a href="#" title="Optical"><span>Optical</span></a></li>
|
|
<li id="feedback" class="myButton-${template}"><a href="#" title="Feedback"><span>Feedback</span></a></li>
|
|
<li id="minus" class="myButton-${template}"><a href="#" title="Minus"><span>Minus</span></a></li>
|
|
<li id="mute" class="myButton-${template}"><a href="#" title="Mute"><span>Mute</span></a></li>
|
|
<li id="plus" class="myButton-${template}"><a href="#" title="Plus"><span>Plus</span></a></li>
|
|
<li id="bassminus" class="myButton-${template}"><a href="#" title="Minus"><span>Minus</span></a></li>
|
|
<li id="bassplus" class="myButton-${template}"><a href="#" title="Plus"><span>Plus</span></a></li>
|
|
<li id="surround" class="myButton-${template}"><a href="#" title="Surround"><span>Surround</span></a></li>
|
|
<li id="stereo" class="myButton-${template}"><a href="#" title="Stereo"><span>Stereo</span></a></li>
|
|
<li id="harman" class="myButton-${template}"><a href="#" title="Harman"><span>Harman</span></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
`;
|
|
}
|