├── .gitattributes
├── nowplaying.jpg
├── Design Tool
    ├── back.jpg
    ├── echo.png
    ├── kodi.png
    ├── roku.png
    ├── works best in chrome or firefox.txt
    └── rotate.html
├── now-playing-card.js
└── README.md


/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/nowplaying.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bradcrc/now-playing-card/HEAD/nowplaying.jpg


--------------------------------------------------------------------------------
/Design Tool/back.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bradcrc/now-playing-card/HEAD/Design Tool/back.jpg


--------------------------------------------------------------------------------
/Design Tool/echo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bradcrc/now-playing-card/HEAD/Design Tool/echo.png


--------------------------------------------------------------------------------
/Design Tool/kodi.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bradcrc/now-playing-card/HEAD/Design Tool/kodi.png


--------------------------------------------------------------------------------
/Design Tool/roku.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bradcrc/now-playing-card/HEAD/Design Tool/roku.png


--------------------------------------------------------------------------------
/Design Tool/works best in chrome or firefox.txt:
--------------------------------------------------------------------------------
1 | this tool works best in chrome or firefox.
2 |  
3 | Other browsers may not work as well or at all due to funky css incompatibilities.


--------------------------------------------------------------------------------
/now-playing-card.js:
--------------------------------------------------------------------------------
  1 | class NowPlayingPoster extends HTMLElement {
  2 |   set hass(hass) {
  3 |     if (!this.content) {
  4 |       const card = document.createElement('ha-card');
  5 |       this.content = document.createElement('div');
  6 | 
  7 | 
  8 | 	  //this.content.style = "!important;";
  9 | 
 10 | 
 11 |       card.appendChild(this.content);
 12 | 	  card.style = "background: none;";
 13 |       this.appendChild(card);
 14 | 
 15 | 
 16 |     }
 17 | 
 18 | 	const offposter = this.config.off_image;
 19 |     const entityId = this.config.entity;
 20 | 	const state = hass.states[entityId];
 21 | 	const stateStr = state ? state.state : 'unavailable';
 22 | 
 23 | 
 24 | 
 25 | 	if (state) {
 26 | 
 27 | 		const movposter = state.attributes.entity_picture;
 28 | 
 29 | 		if (["playing", "on"].indexOf(stateStr) > -1 ) {
 30 | 			if ( !movposter ) {
 31 | 				if ( offposter ) {
 32 | 					this.content.innerHTML = `
 33 | 					<!-- now playing card ${entityId} -->
 34 | 					<img src="${offposter}" width=100% align="center" style="">
 35 | 					`;
 36 | 				}
 37 | 				else
 38 | 				{
 39 | 					this.content.innerHTML = `
 40 | 					<!-- now playing card ${entityId}  no image-->
 41 | 					`;
 42 | 				}
 43 | 			}
 44 | 			else
 45 | 			{
 46 | 				const img = new Image();
 47 | 				img.onload = () => {
 48 | 					this.content.innerHTML = `
 49 | 					<!-- now playing card ${entityId}  -->
 50 | 					<img src="${movposter}" width=100% height=100%">
 51 | 					`;
 52 | 				};
 53 | 				img['src']= movposter
 54 | 			}
 55 | 		}
 56 | 		else
 57 | 		{
 58 | 
 59 | 			if ( offposter ) {
 60 | 				this.content.innerHTML = `
 61 | 				<!-- now playing card ${entityId} -->
 62 | 				<img src="${offposter}" width=100% align="center" style="">
 63 | 				`;
 64 | 			}
 65 | 			else
 66 | 			{
 67 | 				this.content.innerHTML = `
 68 | 				<!-- now playing card ${entityId}  no image-->
 69 | 				`;
 70 | 			}
 71 | 
 72 | 		}
 73 | 
 74 | 
 75 | 	}
 76 | 	else
 77 | 	{
 78 | 
 79 | 
 80 |     this.content.innerHTML = `
 81 | 	<!-- now playing card ${entityId} not playing -->
 82 |     `;
 83 | 
 84 | 	}
 85 | 
 86 |   }
 87 | 
 88 | 
 89 | 
 90 | 
 91 |   setConfig(config) {
 92 |     if (!config.entity) {
 93 |       throw new Error('You need to define an entity');
 94 |     }
 95 |     this.config = config;
 96 |   }
 97 | 
 98 | 
 99 |   // The height of your card. Home Assistant uses this to automatically
100 |   // distribute all cards over the available columns.
101 |   getCardSize() {
102 |     return 3;
103 |   }
104 | }
105 | 
106 | customElements.define('now-playing-poster', NowPlayingPoster);
107 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![title](nowplaying.jpg)
 2 | # now-playing-card
 3 | 
 4 | 
 5 | Custom card for [Home Assistant](https://www.home-assistant.io/) to display a poster of the currently playing item in designated media_player.
 6 | 
 7 | #### Demo: [Youtube video](https://youtu.be/1ZU4WMgwU6s)
 8 | 
 9 | This works with those media_player entities supporting the entity_picture attribute.   Roku, Kodi, and Amazon Echo Dot all seem to work well for me.
10 | 
11 | The card is stackable, so you can position cards from several media players in the same spot to show whichever one is playing.
12 | 
13 | The card only shows the entity_picture while the status is playing.  This is because some roku players and echo dots will show images even when not actively playing media content.  It should be easy to edit this function out if you don't want it.
14 | 
15 | #### Known issues: 
16 | Transform is highly dependent on the image size, so if you attempt to display an image of a different size (this can happen in kodi) the transform will not work correctly and the image will look weird or in the wrong place. 
17 | 
18 | If you use an old browser that doesn't display transform css properly, transform just won't work.
19 | 
20 | ------------
21 | 
22 | #### entity
23 | (string)(Required)
24 | 
25 | Entity id
26 |  
27 | &nbsp;
28 |   
29 |   
30 | #### off_image
31 | (string)(optional)
32 | 
33 | Optional Image to display when idle.  This must be the same size as the media image if using transform.
34 | 
35 | 
36 | 
37 | 
38 | ------------
39 | 
40 | ## Example Usage
41 | 
42 | 
43 |           - type: "custom:now-playing-poster"
44 |             entity: media_player.dot_lr  
45 |             style:
46 |               width: 10%
47 |               top: 20%
48 |               left: 9%
49 |               transform: rotate(-76deg) rotateX(-57deg) skewX(-25deg)              
50 |                       
51 |               
52 | 
53 |               
54 |               
55 |               
56 | # Installation
57 |   
58 | Installation is the same as any custom card.
59 | 
60 | 1. Copy the file [now-playing-card.js](https://github.com/bradcrc/Now-Playing-Card) to your /config/www/js/ directory
61 | 
62 | 2. Add the following to the resources area of your ui-lovelace.yaml (or add to resources on the lovelace dashboard)
63 | 
64 | 
65 |             - url: /local/js/now-playing-card.js
66 |               type: module
67 | 
68 | 
69 | 
70 | Once the card is copied and referenced, you can just add the entry as listed above.   
71 | 
72 | Most likely you'll also want to move the image around your floorplan.  This can be accomplished with CSS.  A tool has been included to help figure out the skew and rotate values, it's not necessary to use this tool, but hopefully it makes things easier.  To use the tool just open rotate.html from the Design Tool folder, and then copy your floorplan image and media image to the folder, or enter a valid URL for those images.
73 | 


--------------------------------------------------------------------------------
/Design Tool/rotate.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | <head>
  3 | <TITLE>CSS Generator Tool</TITLE> 
  4 | <meta http-equiv="X-UA-Compatible" content="IE=9;IE=8; IE=7; IE=EDGE" />
  5 | <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
  6 | <meta http-equiv="pragma" content="no-cache">
  7 | <meta http-equiv="expires" content="0">
  8 | <style>
  9 | 
 10 | 
 11 | 
 12 | .demo2 {
 13 | 	z-index: 33;	
 14 | 	position: fixed;	
 15 | 	top: 0;
 16 | 	right: 0;	
 17 | 	width: 100%;	
 18 | }
 19 | 
 20 | .demo {
 21 | 	z-index: 33;	
 22 | 	position: absolute;		
 23 | 	top: 0;
 24 | 	right: 0;
 25 | 	width: 100%;	
 26 | }
 27 | 
 28 | 
 29 | .idem {
 30 | 	position: fixed;
 31 | 	z-index: 35;
 32 | }
 33 | 
 34 | 
 35 | 
 36 | .frontdiv{
 37 | 	z-index: 50;
 38 | 	width: 100%;
 39 | 	height: 100%;
 40 | 	position: fixed;
 41 | 	top: 0;
 42 | 	right: 0;	
 43 | }
 44 | 
 45 | .toolbox {
 46 | 	border: 3px solid #FF0000;
 47 | 	border-radius:  10px;
 48 | 	background: rgba(0,0,0,.5);
 49 | 	box-shadow: 8px 8px 6px 1px rgba(0, 0, 0, .7); 
 50 | }
 51 | 
 52 | .toolbox td, th{
 53 | 	font-family: tahoma;
 54 | 	color: white;
 55 | 	text-shadow: 2px 2px rgba(0, 0, 0, 1); 
 56 | 	padding-left: 4px;
 57 | 	padding-right: 4px;
 58 | }
 59 | 
 60 | .toolbox th{
 61 | 	background: #660000;	
 62 | }
 63 | 
 64 | .toolbox th a{
 65 | 	text-decoration: none;
 66 | 	font-size: 20pt;
 67 | 	color: #ffffff;
 68 | }
 69 | .ssizer {
 70 | 	opacity: 0;
 71 | }
 72 | body {
 73 | 	background: #220000;	
 74 | }
 75 | </style>
 76 | 
 77 | 
 78 | <script>
 79 | 
 80 | function DoSkew(){
 81 | 	var rT = document.getElementById("rT").value;
 82 | 	var rX = document.getElementById("rX").value;
 83 | 	var rY = document.getElementById("rY").value;
 84 | 	var sX = document.getElementById("sX").value;
 85 | 	var sY = document.getElementById("sY").value;
 86 | 	
 87 | 	var sW = document.getElementById("sW").value;
 88 | 	var MT = document.getElementById("MT").value;
 89 | 	var ML = document.getElementById("ML").value;	
 90 | 	
 91 | 	var imgURL = document.getElementById("iURL").value;
 92 | 	var bmgURL = document.getElementById("bURL").value;
 93 | 	
 94 | 	var OutVal = "";
 95 | 	
 96 | 	if (rT != 0){ rTv = 'rotate(' + rT + 'deg) ';} else { rTv = '';}
 97 | 	if (rX != 0){ rXv = 'rotateX(' + rX + 'deg) ';} else { rXv = '';}
 98 | 	if (rY != 0){ rYv = 'rotateY(' + rY + 'deg) ';} else { rYv = '';}
 99 | 	if (sX != 0){ sXv = 'skewX(' + sX + 'deg) ';} else { sXv = '';}
100 | 	if (sY != 0){ sYv = 'skewY(' + sY + 'deg) ';} else { sYv = '';}
101 | 	
102 | 	if (sW != 0){ 
103 | 		sWv = 'width="' + sW + '%" ';
104 | 		OutVal = OutVal + 'width: ' + sW + '%\n';
105 | 	} else { sWv = '';}
106 | 	
107 | 	if (MT != 0){
108 | 		MTv = 'translateY(' + MT + '%) ';
109 | 		OutVal = OutVal + 'top: ' + MT + '%\n';
110 | 	} else { MTv = '';}
111 | 	
112 | 	if (ML != 0){ 
113 | 		MLv = 'translateX(' + ML + '%) ';
114 | 		OutVal = OutVal + 'left: ' + ML + '%\n';
115 | 	} else { MLv = '';}
116 | 
117 | 	
118 | 	var DemoVal = rTv + rXv + rYv + sXv + sYv;
119 | 	var DemoVal2 = MTv + MLv ;
120 |  
121 |   
122 | 	document.getElementById("demo2").innerHTML = '<img src="' + bmgURL + '" width=100%><div class="demo" id="demo"><img class="idem" id="idem" ' + sWv + 'src="' + imgURL + '"><img src="' + bmgURL + '" class="ssizer" width=100%></div>';
123 | 	
124 | 	
125 | 	document.getElementById("idem").style.transform = DemoVal;
126 | 	document.getElementById("demo").style.transform = DemoVal2;
127 | 	
128 | 	OutVal = OutVal + 'transform: ' + DemoVal + '\n';
129 | 	document.getElementById("DVal").value = OutVal;
130 | 
131 | 	
132 |  }
133 |  
134 |  function moveit(mdr){
135 | 	if (mdr == 'l') {
136 | 		document.getElementById("tbox").align = 'left';
137 | 		document.getElementById("mvr").innerHTML = '<a href="#" title="move right" onclick="moveit(\'r\');">👉</a>';
138 | 	} else {
139 | 		document.getElementById("tbox").align = 'right';
140 | 		document.getElementById("mvr").innerHTML = '<a href="#" title="move left" onclick="moveit(\'l\');">👈</a>';
141 | 	}
142 |  
143 |  }
144 |  
145 | </script>
146 | 
147 | </head>
148 | <body>
149 | 
150 | <table width=100%>
151 | <tr><td class="demo2" id="demo2"><img src="house.jpg" width=100%>
152 | <div class="demo" id="demo"><img src="movie.gif" id="idem"></div>
153 | </td></tr>
154 | </table>
155 | 
156 | 
157 | 
158 | 
159 | 
160 | 
161 | 
162 | <table class="frontdiv" width=100% height=100%>
163 | <tr><td id="tbox" valign="bottom">
164 | <form>
165 | <table class="toolbox">
166 | <tr><th id="mvr"><a href="#" title="move right" onclick="moveit('r');">👉</a></th></tr>
167 | </table>
168 | <p>
169 | <table class="toolbox">
170 | <tr><th colspan=2>adjust</th></tr>
171 | <tr><td>Width:</td><td><input type="number" id="sW" min=1 max=200 value="10" oninput="DoSkew()"> %</td></tr>
172 | <tr><td>Top:</td><td><input type="number" id="MT" min=-100 max=100 value="20" oninput="DoSkew()"> %</td></tr>
173 | <tr><td>Left:</td><td><input type="number" id="ML" min=-100 max=100 value="45" oninput="DoSkew()"> %</td></tr>
174 | <tr><td>Rotate:</td><td><input type="number" id="rT" min=-359 max=359 value="0" oninput="DoSkew()"></td></tr>
175 | <tr><td>Rotate X:</td><td><input type="number" id="rX" min=-359 max=359 value="0" oninput="DoSkew()"></td></tr>
176 | <tr><td>Rotate Y:</td><td><input type="number" id="rY" min=-359 max=359 value="0" oninput="DoSkew()"></td></tr>
177 | <tr><td>Skew X:</td><td><input type="number" id="sX" min=-100 max=100 value="0" oninput="DoSkew()"></td></tr>
178 | <tr><td>Skew Y:</td><td><input type="number" id="sY" min=-100 max=100 value="0" oninput="DoSkew()"></td></tr>
179 | </table>
180 | <p>
181 | <table class="toolbox">
182 | <tr><th colspan=2>images</th></tr>
183 | <tr><td>Test image:</td><td><input type="text" id="iURL" value="roku.png" size=10 oninput="DoSkew()"></td></tr>
184 | <tr><td>Background:</td><td><input type="text" id="bURL" value="back.jpg" size=10 oninput="DoSkew()"></td></tr>
185 | </table>
186 | <p>
187 | <table class="toolbox">
188 | <tr><th colspan=2>output</th></tr>
189 | <tr><td colspan=2><textarea id="DVal" cols=60 rows=5></textarea></td></tr>
190 | </table>
191 | 
192 | </td></tr></table>
193 | </form>
194 | 
195 | 
196 | </body>
197 | <script>
198 | 	DoSkew();
199 | </script>
200 | </html>
201 | 
202 | 


--------------------------------------------------------------------------------