Merge pull request #25 from richsimpson/master

Apple TV and Firestick remotes added

README.md

@@ -1288,7 +1288,171 @@ remote_template: edifier_rc600a
 type: custom:generic-remote-control-card
 
 ```
+  </details>
+
+
+  <details>
+  <summary>Apple TV 4k Remote (Design and codes by richsimpson): (Click to expand!)</summary>
 
+  <img src="https://github.com/richsimpson/generic-remote-control-card/blob/master/apple4kremote.png" height="400">
+
+```
+type: custom:generic-remote-control-card
+name: Apple TV Lounge
+remote_template: apple4kremote
+buttons:
+  up:
+    call: remote.send_command
+    data:
+      entity_id: remote.apple_tv_lounge
+      command: up
+  left:
+    call: remote.send_command
+    data:
+      entity_id: remote.apple_tv_lounge
+      command: left
+  select:
+    call: remote.send_command
+    data:
+      entity_id: remote.apple_tv_lounge
+      command: select
+  right:
+    call: remote.send_command
+    data:
+      entity_id: remote.apple_tv_lounge
+      command: right
+  down:
+    call: remote.send_command
+    data:
+      entity_id: remote.apple_tv_lounge
+      command: down
+  menu:
+    call: remote.send_command
+    data:
+      entity_id: remote.apple_tv_lounge
+      command: menu
+  tv:
+    call: remote.send_command
+    data:
+      entity_id: remote.apple_tv_lounge
+      command: home
+  siri:
+    call: remote.send_command
+    data:
+      entity_id: remote.apple_tv_lounge
+      command: select
+  volup:
+    call: remote.send_command
+    data:
+      entity_id: remote.apple_tv_lounge
+      command: volume_up
+  play:
+    call: remote.send_command
+    data:
+      entity_id: remote.apple_tv_lounge
+      command: select
+  voldown:
+    call: remote.send_command
+    data:
+      entity_id: remote.apple_tv_lounge
+      command: volume_down
+
+```  
+  </details>
+
+  <details>
+  <summary>Firestick 4k Remote (Design and codes by richsimpson): (Click to expand!)</summary>
+
+  <img src="https://github.com/richsimpson/generic-remote-control-card/blob/master/firestick4kremote.png" height="400">
+
+```
+type: custom:generic-remote-control-card
+name: Bedroom Firestick
+remote_template: firestick4kremote
+buttons:
+  pwr:
+    call: androidtv.adb_command
+    data:
+      entity_id: media_player.fire_tv_bedroom
+      command: input keyevent 26
+  mic:
+    call: androidtv.adb_command
+    data:
+      entity_id: media_player.fire_tv_bedroom
+      command: null
+  volup:
+    call: androidtv.adb_command
+    data:
+      entity_id: media_player.fire_tv_bedroom
+      command: null
+  voldown:
+    call: androidtv.adb_command
+    data:
+      entity_id: media_player.fire_tv_bedroom
+      command: null
+  mute:
+    call: androidtv.adb_command
+    data:
+      entity_id: media_player.fire_tv_bedroom
+      command: null
+  up:
+    call: androidtv.adb_command
+    data:
+      entity_id: media_player.fire_tv_bedroom
+      command: UP
+  left:
+    call: androidtv.adb_command
+    data:
+      entity_id: media_player.fire_tv_bedroom
+      command: LEFT
+  select:
+    call: androidtv.adb_command
+    data:
+      entity_id: media_player.fire_tv_bedroom
+      command: input keyevent 23
+  right:
+    call: androidtv.adb_command
+    data:
+      entity_id: media_player.fire_tv_bedroom
+      command: RIGHT
+  down:
+    call: androidtv.adb_command
+    data:
+      entity_id: media_player.fire_tv_bedroom
+      command: DOWN
+  back:
+    call: androidtv.adb_command
+    data:
+      entity_id: media_player.fire_tv_bedroom
+      command: BACK
+  home:
+    call: androidtv.adb_command
+    data:
+      entity_id: media_player.fire_tv_bedroom
+      command: HOME
+  menu:
+    call: androidtv.adb_command
+    data:
+      entity_id: media_player.fire_tv_bedroom
+      command: MENU
+  rwd:
+    call: androidtv.adb_command
+    data:
+      entity_id: media_player.fire_tv_bedroom
+      command: input keyevent 89
+  play:
+    call: androidtv.adb_command
+    data:
+      entity_id: media_player.fire_tv_bedroom
+      command: input keyevent 85
+  fwd:
+    call: androidtv.adb_command
+    data:
+      entity_id: media_player.fire_tv_bedroom
+      command: input keyevent 90
+
+
+```  
   </details>
 
 # Contribution

dist/remotes/apple4kremote/remote-html.js

@@ -0,0 +1,219 @@
+function getRemoteStyle_apple4kremote(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-apple4kremote {
+	position: relative;
+	background: url(${base_url}/apple4kremote.png) no-repeat;
+	width: 349px;
+	height: 930px
+}
+
+#remote-control-apple4kremote h2,
+#remote-control-apple4kremote span {
+	position: absolute;
+	left: 5000px
+}
+
+#remote-control-apple4kremote ul {
+	margin: 0;
+	padding: 0;
+	list-style-type: none
+}
+
+#up a,
+#left a,
+#select a,
+#right a,
+#down a,
+#menu a,
+#tv a,
+#siri a,
+#volup a,
+#play a,
+#voldown a {
+	position: absolute;
+	display: block
+}
+
+#remote-control-apple4kremote li#up a {
+    left: 124px;
+    top: 51px;
+    width: 101px;
+    height: 53px;	
+	background: url(${base_url}/up.png) no-repeat
+}
+
+#remote-control-apple4kremote li#left a {
+    left: 56px;
+    top: 106px;
+    width: 53px;
+    height: 101px;	
+	background: url(${base_url}/left.png) no-repeat
+}
+
+#remote-control-apple4kremote li#select a {
+    left: 121px;
+    top: 111px;
+    width: 104px;
+    height: 103px;	
+	background: url(${base_url}/select.png) no-repeat
+}
+
+#remote-control-apple4kremote li#right a {
+    left: 245px;
+    top: 106px;
+    width: 53px;
+    height: 101px;	
+	background: url(${base_url}/right.png) no-repeat
+}
+
+#remote-control-apple4kremote li#down a {
+    left: 124px;
+    top: 230px;
+    width: 101px;
+    height: 53px;	
+	background: url(${base_url}/down.png) no-repeat
+}
+
+#remote-control-apple4kremote li#menu a {
+    left: 63px;
+    top: 295px;
+    width: 101px;
+    height: 102px;	
+	background: url(${base_url}/menu.png) no-repeat
+}
+
+#remote-control-apple4kremote li#tv a {
+    left: 186px;
+    top: 295px;
+    width: 101px;
+    height: 102px;	
+	background: url(${base_url}/tv.png) no-repeat
+}
+
+#remote-control-apple4kremote li#siri a {
+    left: 63px;
+    top: 415px;
+    width: 100px;
+    height: 102px;	
+	background: url(${base_url}/siri.png) no-repeat
+}
+
+#remote-control-apple4kremote li#volup a {
+    left: 191px;
+    top: 417px;
+    width: 92px;
+    height: 101px;	
+	background: url(${base_url}/volup.png) no-repeat
+}
+
+#remote-control-apple4kremote li#play a {
+    left: 63px;
+    top: 536px;
+    width: 100px;
+    height: 100px;	
+	background: url(${base_url}/play.png) no-repeat
+}
+
+#remote-control-apple4kremote li#voldown a {
+    left: 191px;
+    top: 534px;
+    width: 92px;
+    height: 100px;	
+	background: url(${base_url}/voldown.png) no-repeat
+}
+
+
+#remote-control-apple4kremote li#up a:hover {
+	background: url(${base_url}/up_over.png) no-repeat 0px 0px
+}
+
+#remote-control-apple4kremote li#left a:hover {
+	background: url(${base_url}/left_over.png) no-repeat 0px 0px
+}
+
+#remote-control-apple4kremote li#select a:hover {
+	background: url(${base_url}/select_over.png) no-repeat 0px 0px
+}
+
+#remote-control-apple4kremote li#right a:hover {
+	background: url(${base_url}/right_over.png) no-repeat 0px 0px
+}
+
+#remote-control-apple4kremote li#down a:hover {
+	background: url(${base_url}/down_over.png) no-repeat 0px 0px
+}
+
+#remote-control-apple4kremote li#menu a:hover {
+	background: url(${base_url}/menu_over.png) no-repeat 0px 0px
+}  
+
+#remote-control-apple4kremote li#tv a:hover {
+	background: url(${base_url}/tv_over.png) no-repeat 0px 0px
+}  
+
+#remote-control-apple4kremote li#siri a:hover {
+	background: url(${base_url}/siri_over.png) no-repeat 0px 0px
+}  
+
+#remote-control-apple4kremote li#volup a:hover {
+	background: url(${base_url}/volup_over.png) no-repeat 0px 0px
+}
+
+#remote-control-apple4kremote li#play a:hover {
+	background: url(${base_url}/play_over.png) no-repeat 0px 0px
+}
+
+#remote-control-apple4kremote li#voldown a:hover {
+	background: url(${base_url}/voldown_over.png) no-repeat 0px 0px
+}  
+  `;
+}
+
+function getRemoteHtml_apple4kremote(config){
+ const template = config.remote_template;
+ return `
+
+ <div class="container">
+            <div style="text-align:center">
+			<h1>${config.name}</h1>
+			</div>
+			<div id="remote-control-apple4kremote">
+				<h2>
+					Main navigation
+				</h2>
+				<ul>
+					<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="menu" class="myButton-${template}"><a href="#" title="menu"><span>menu</span></a></li>
+					<li id="tv" class="myButton-${template}"><a href="#" title="tv"><span>tv</span></a></li>
+					<li id="siri" class="myButton-${template}"><a href="#" title="siri"><span>siri</span></a></li>
+					<li id="volup" class="myButton-${template}"><a href="#" title="volup"><span>volup</span></a></li>
+					<li id="play" class="myButton-${template}"><a href="#" title="play"><span>play</span></a></li>
+					<li id="voldown" class="myButton-${template}"><a href="#" title="voldown"><span>voldown</span></a></li>			
+				</ul>
+			</div>	
+		</div>
+
+`;
+}