Only thing I can think of is that you have username and password set on your Kodi?
I at first had kodi setup with username and password and that did not work when it came to artwork.
When I cleared the credentials from Kodi and from the Kodi setup in the configuration.yaml then it worked for me.
it still needs to be in a www folder. Mine sits in /var/opt/homeassistant/www
My configuration.yaml sits in /var/opt/homeassistant
So I had issues with the API password on the API stream as well one way would be to append the ?api_password to the link however this would allow anyone to read out our password when accessing the site.
What I’ve done is to add the following just below <script type="text/javascript"> the following:
urlParam = function(name, url) {
if (!url) {
url = window.location.href;
}
var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(url);
if (!results) {
return undefined;
}
return results[1] || undefined;
};
var password = urlParam('api_password');
Then change var source = new EventSource("/api/stream"); to var source = new EventSource("/api/stream?api_password="+password);
I created a new DMP in Kodi itself. Makes for much easier and quicker response and also getting info displayed like time and runtime is much easier. Now looks like this.
I have created a new version working directly of Kodi.
Will post code shortly. Sorry for late reply. Some issues in offline life need taking care of 2.
Time for an update on the Digital Movie Poster. I moved away from the SSE version…
…and started working on a version that works directly of (and on) Kodi itself.
Gave me a lot more flexibility and killer response.
Now playing around with the css effects and layout. Came up with this.
For moving image check these videos
Create a kodi.html and put following code in it
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="mobile-web-app-capable" content="yes">
<meta name="description" content="Digital Movie Poster">
<meta name="author" content="Dennis Murray">
<!-- <link rel="search" href="provider.xml" type="application/opensearchdescription+xml" title="Kodi Library" /> -->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- <link href="/images/logo.png" rel="image_src" /> -->
<meta name="robots" content="NOINDEX, NOFOLLOW">
<link href="css/base.css?1.3.57" rel="stylesheet" type="text/css">
<link href="css/ipad.css?1.0.5" rel="stylesheet" media="only screen and (max-device-width: 1024px)" type="text/css">
<title>Digital Movie Poster</title>
<script>
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
var ampm = h >= 12 ? 'PM' : 'AM';
h = checkTime(h);
m = checkTime(m);
s = checkTime(s);
document.getElementById('clock').innerHTML =
h + ":" + m + " " + ampm
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>
</head>
<body onload="startTime()">
<div id="nowPlayingPanel" style="display: none;>
<div id="nowPlayingContent">
<div id="videoDescription">
<div id="videoCoverArt"></div>
<div id="footerPopover">
<div id="videoTitle"></div>
<div id="videoDuration"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/xbmc.launcher.js?v=2.1.0"></script>
</body>
</html>
Then log onto your Kodi (linux based) via SSH and place kodi.html in /usr/share/kodi/addons/webinterface.default
Once you have done that you can edit the base.css and ipad.css to your liking to show the videoTitle, clock and videoDuration div’s in the font and colours you like.
Best thing you can do is create a seperate kodi.css and replace base.css with kodi.css in kodi.html not to upset the default index webpage of Kodi itself.
@dennisaion:
I have implemented your Digital Movie Poster. I’m using the version where you host the html-file in the www-folder of HAss, but I have a minor issue.
When I start watching a movie and afterwards go to the URL: homeassistant.local:8123/local/dmp.html the poster isn’t shown. I have to change to another movie or open the website and start the movie later.
Do you know a solution for that?
EDIT: Nevermind, solved it myself using Kodi’s JSON RPC. So I get the image URL directly from there and see a sharper image as well.
It’s based on Server Side Events. So nothing will show unless a SSE happens.
You would have to pause the film and run it again and then you see it popping up.
Or start the DMP first and then the movie.
Best you can do is use my updated Kodi version. That one will show instantly what is running even if the DMP is started later than the movie.
I am having trouble getting this fully implemented in Hass.io. Does anyone have any experience running this on Hass.io from a Pi3 and Plex on Windows 10?
I’m trying to get this working for plex but I’m struggling. When I go to the Digital Movie Poster page I just get error in the top left and login attempt failed logged against HA.
Here is my steps I’ve done.
Create an index.html in www folder for HA
Copy the index.html code from your post and change the IP to my plex IP.
Create css in www/css called home-assistant-display.css
Copy the CSS code from your post.
Do I need to change the media_player_chris_iphone part to the entity of my plex media player?
