Merge pull request #12 from FaserF/master

Add support for Chromecast with GoogleTV remote

README.md

@@ -336,6 +336,97 @@ type: 'custom:generic-remote-control-card'
 
 ```
 
+Google Chromecast with Google TV Remote example, with ADB server.
+(remote design by @FaserF & @KaiSMR) <br /> 
+<img src="ccwgtv.png" height="400">
+
+```
+buttons:
+  top:
+    call: androidtv.adb_command
+    data:
+      entity_id: media_player.chromecast
+      command: input keyevent 19
+  bottom:
+    call: androidtv.adb_command
+    data:
+      entity_id: media_player.chromecast
+      command: input keyevent 20
+  ok:
+    call: androidtv.adb_command
+    data:
+      entity_id: media_player.chromecast
+      command: input keyevent 66
+  clickleft:
+    call: androidtv.adb_command
+    data:
+      entity_id: media_player.chromecast
+      command: input keyevent 21
+  clickright:
+    call: androidtv.adb_command
+    data:
+      entity_id: media_player.chromecast
+      command: input keyevent 22
+  volumedown:
+    call: androidtv.adb_command
+    data:
+      entity_id: media_player.chromecast
+      command: input keyevent 25
+  volumeup:
+    call: androidtv.adb_command
+    data:
+      entity_id: media_player.chromecast
+      command: input keyevent 24
+  back:
+    call: androidtv.adb_command
+    data:
+      entity_id: media_player.chromecast
+      command: input keyevent 4
+  assistant:
+    call: androidtv.adb_command
+    data:
+      entity_id: media_player.chromecast
+      command: am start -a android.intent.action.VIEW -d -n com.google.android.apps.tv.launcherx/.home.HomeActivity
+  mute:
+    call: androidtv.adb_command
+    data:
+      entity_id: media_player.chromecast
+      command: input keyevent 164
+  youtube:
+    call: androidtv.adb_command
+    data:
+      entity_id: media_player.chromecast
+      #Official YouTube TV
+      command: am start -a android.intent.action.VIEW -d -n com.google.android.youtube.tvunplugged/com.google.android.apps.youtube.tvunplugged.activity.MainActivity
+      #SmartTubeNext
+      #command: am start -a android.intent.action.VIEW -d -n com.liskovsoft.smarttubetv.beta/com.liskovsoft.smartyoutubetv2.tv.ui.browse.BrowseActivity
+  netflix:
+    call: androidtv.adb_command
+    data:
+      entity_id: media_player.chromecast
+      command: am start -a android.intent.action.VIEW -d -n *com.netflix.ninja/.MainActivity
+  home:
+    call: androidtv.adb_command
+    data:
+      entity_id: media_player.chromecast
+      command: input keyevent 3
+  power:
+    call: androidtv.adb_command
+    data:
+      entity_id: media_player.chromecast
+      command: input keyevent 26
+  #Source doesnt work yet. We have no clue how to send a input source command via adb
+  #source:
+  #  call: androidtv.adb_command
+  #  data:
+  #    entity_id: media_player.chromecast
+  #    command: ???
+name: Chromecast with Google TV
+remote_template: ccwgtv
+type: 'custom:generic-remote-control-card'
+
+```
+
 PartnerTV Remote example, thanx to @VirtualL :
 
 <img src="https://github.com/dimagoltsman/ha-custom-lovelace-cards/blob/master/remote-control/content-card-remote-control/partner/remote-screen-shot.png?raw=true" height="400">

dist/remotes/ccwgtv/remote-html.js

@@ -0,0 +1,229 @@
+function getRemoteStyle_ccwgtv(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-ccwgtv {
+            position: relative;
+            background: url(${base_url}/remote.png) no-repeat;
+            width: 178px;
+            height: 559px;
+        }
+        
+        span {
+            display: none;
+        }
+        
+        li {
+            display: inline-block;
+        }
+        
+        ul a {
+            display: inline-block;
+            position: absolute;
+            width: 29px;
+            height: 29px;
+            background-repeat: no-repeat;
+            background-position: center center;
+            background-size: contain;
+            border-radius: 50%;
+            transition: opacity 0.3s ease-in-out;
+        }
+        
+        ul a:hover,
+        ul a:focus,
+        ul a:active {
+            opacity: 0.3;
+        }
+        
+        #remote-control-ccwgtv ul {
+            margin: 0;
+            padding: 0;
+            list-style-type: none;
+        }
+        
+        #top a {
+            top: 15px;
+            background-image: url(${base_url}/top.png);
+        }
+        
+        #bottom a,
+        #ok a,
+        #top a {
+            left: 68px;
+        }
+        
+        #bottom a {
+            top: 117px;
+            background-image: url(${base_url}/bottom.png);
+        }
+        
+        
+        #clickleft a,
+        #clickright a,
+        #ok a {
+            top: 63px;
+        }
+        
+        #ok a {
+            background-image: url(${base_url}/ok.png);
+        }
+        
+        #clickleft a {
+            left: 18px;
+            background-image: url(${base_url}/clickleft.png);
+        }
+        
+        #clickright a {
+            left: 119px;
+            background-image: url(${base_url}/clickright.png);
+        }
+        
+        #back a {
+            left: 27px;
+            top: 174px;
+            width: 26px;
+            background-image: url(${base_url}/go_back.png);
+        }
+        
+        #assistant a {
+            left: 107px;
+            top: 167px;
+            width: 39px;
+            height: 41px;
+            background-image: url(${base_url}/assistant.png);
+        }
+        
+        
+        #home a,
+        #mute a {
+            top: 240px;
+            width: 26px;
+            height: 41px;
+        }
+        
+        #home a {
+            left: 30px;
+            background-image: url(${base_url}/home.png);
+        }
+        
+        #mute a {
+            left: 113px;
+            background-image: url(${base_url}/mute.png);
+        }
+        
+        #youtube a,
+        #netflix a {
+            top: 313px;
+            width: 45px;
+            height: 41px;
+        }
+        
+        #youtube a {
+            left: 20px;
+            background-image: url(${base_url}/youtube.png);
+        }
+        
+        #netflix a {
+            left: 109px;
+            background-image: url(${base_url}/netflix.png);
+        }
+        
+        
+        #power a,
+        #source a {
+            top: 388px;
+            transform: scale(0.8);
+        }
+        
+        #power a {
+            left: 30px;
+            background-image: url(${base_url}/power.png);
+        }
+        
+        #source a {
+            left: 118px;
+            background-image: url(${base_url}/source.png);
+        }
+        
+        .audio-controls {
+            position: absolute;
+            left: 168px;
+            top: 100px;
+            width: 40px;
+            background: #b8b7b1;
+            border-radius: 0;
+            border-top-right-radius: 14px;
+            border-bottom-right-radius: 14px;
+            height: 70px;
+            transform: rotate(-1.5deg);
+        }
+        
+        #volumeup a,
+        #volumedown a {
+            left: 5.5px;
+            width: 25px;
+        }
+        
+        #volumeup a {
+            top: 5px;
+            background-image: url(${base_url}/volume.png);
+        }
+        
+        #volumedown a {
+            bottom: 5px;
+            background-image: url(${base_url}/volumedown.png);
+        }
+    `;
+}
+
+function getRemoteHtml_ccwgtv(config){
+    const template = config.remote_template;
+
+    return `
+        <div class="container">
+            <div style="text-align:center">
+			<h1>${config.name}</h1>
+			</div>
+			<div id="remote-control-ccwgtv">
+				<ul>
+					<li id="power" class="myButton-${template}"><a href="#" title="Power"><span>Power</span></a></li>
+					<li id="assistant" class="myButton-${template}"><a href="#" title="assistant"><span>assistant</span></a></li>
+					<li id="home" class="myButton-${template}"><a href="#" title="home"><span>home</span></a></li>
+					<li id="back" class="myButton-${template}"><a href="#" title="Go back to beginning"><span>back</span></a></li>
+					<li id="mute" class="myButton-${template}"><a href="#" title="Mute"><span>mute</span></a></li>
+					<li id="youtube" class="myButton-${template}"><a href="#" title="Start Youtube"><span>youtube</span></a></li>
+					<li id="netflix" class="myButton-${template}"><a href="#" title="Start Netflix"><span>netflix</span></a></li>
+					<li id="source" class="myButton-${template}"><a href="#" title="Select Input Source"><span>source</span></a></li>
+					<li id="clickleft" class="myButton-${template}"><a href="#" title="clickleft"><span>clickleft</span></a></li>
+					<li id="clickright" class="myButton-${template}"><a href="#" title="clickright"><span>clickright</span></a></li>
+					<li class="myButton-${template}" id="back"><a href="#" title="Go back to beginning"><span>back</span></a></li>
+					<li class="myButton-${template}" id="top"><a href="#" title="Top of gallery"><span>Top of Gallery</span></a></li>
+					<li class="myButton-${template}" id="bottom"><a href="#" title="Bottom of gallery"><span>Bottom of Gallery</span></a></li>
+					<li class="myButton-${template}" id="ok"><a href="#" title="OK - start slideshow"><span>OK - start slideshow</span></a></li>
+				</ul>
+				<ul class="audio-controls">
+				    <li id="volumeup" class="myButton-${template}"><a href="#" title="volume"><span>volume</span></a></li>
+					<li id="volumedown" class="myButton-${template}"><a href="#" title="volumedown"><span>volumedown</span></a></li>
+                </ul>
+			</div>	
+		</div>
+    `;
+}