Copy my code and then add the below line in it for Plex
Working on the slideshow part. Keep chwcking back and don’t forget to like. 
I’ve done more testing with this and Plex and found a few issues that I’ve worked out:
- The first Plex event would not be displayed if it was a play or pause
- It would still say it was playing a movie if the movie stopped naturally (in essence, if Plex fired its idle event versus its paused event)
- The picture wouldn’t be full screen on my iOS device (it was way bigger). This was fixed with some css changes.
Do you want me to post the code here? Or start another topic? I’m not sure if the changes still work with Kodi or not. I made a number of changes as I was working things out. Everything appears to work with Android and Plex too. I’m happy to keep everything under your project here.
I’m planning to use a Pi with a screen as well to get this up and going for my media room.
so if the Chromecast I am streaming to is named media_player.gorgon, I would change that above line to media_player_gorgon in the code also?
You can post the code here. I updated the topic title. 
I can highly recommend running Chrome OS on a Pi running in kiosk mode.
Quick and clean.
Unfortunately I just get a completely blank window in Chrome when I navigate to the page. I also tried including with my api_password
Is there specific spacing that needs to go before this line? I have
var entity_picture = obj.data.new_state.attributes.entity_picture;
entity_picture = entity_picture.replace("localhost", "192.168.0.90");
var friendly_name = obj.data.new_state.attributes.friendly_name;
I take it you did not download the css file from here https://github.com/fabaff/home-assistant-sse/tree/master/www/css and placed it in local/css did you?
DOH! I did not
It’s okay. Will get there in the end. For me also a learning proces’s this HA thing but an entertaining one at it.
If you could put your Plex working code up that’d be great as I never could get it working
Cheers
1 Like
Second that request… 
Thanks for updating the title!
Here’s the code (replace the 172.16.2.105 address with the IP address of the computer running Plex Media Server):
<!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 + Lanky">
<link href="css/home-assistant-display.css" rel="stylesheet">
<title>Digital Movie Poster</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.2.min.js"></script>
</head>
<body>
<div id="output"></div>
<script>
// Set Plex Media Server parameters
var pmsAddress = "172.16.2.105";
var pmsPort = "32400";
</script>
<script>
var posterDisplayTimeInMS = 5000;
var movies = [];
var cMovies = 0;
var changePosterTimer = null;
function changePoster()
{
if ( cMovies >= movies.length )
cMovies = 0;
if ( cMovies < movies.length )
{
var output = document.getElementById('output');
var newHTML = "<section class=section-images><img src=" + movies[cMovies] + " /></section><h3><p align=center>COMING SOON!</p></h3>";
cMovies++;
output.innerHTML = newHTML;
}
}
$(document).ready(function()
{
// When the web page first loads, get movies from PMS
jQuery.get("http://" + pmsAddress + ":" + pmsPort + "/library/sections/").done(function(xml)
{
$(xml).find('Directory').each(function()
{
var sTitle = $(this).attr('title');
var sKey = $(this).attr('key');
var sType = $(this).attr('type');
if ( sType == "movie" )
{
jQuery.get("http://" + pmsAddress + ":" + pmsPort + "/library/sections/" + sKey + "/unwatched").done(function(xml)
{
var output = document.getElementById('output');
$(xml).find('Video').each(function()
{
var sTitle = $(this).attr('title');
var sKey = $(this).attr('key');
var sArt = $(this).attr('thumb');
sArt = "http://" + pmsAddress + ":" + pmsPort + sArt;
movies.push(sArt);
});
if ( changePosterTimer == null )
{
changePoster();
changePosterTimer = setInterval(changePoster, posterDisplayTimeInMS);
}
}).fail(function( jqxhr, textStatus, error )
{
var output = document.getElementById('output');
output.innerHTML = textStatus + error;
});
}
});
}).fail(function( jqxhr, textStatus, error )
{
var output = document.getElementById('output');
output.innerHTML = textStatus + error;
});
});
</script>
<script>// type="text/javascript">
// Entities to display. Replace the period in the name with an underscore.
var entities = ['media_player_chriss_iphone'
];
if (typeof(EventSource) !== "undefined")
{
var source = new EventSource("/api/stream");
var output = document.getElementById('output');
source.onmessage = function(event)
{
if ("ping" === event.data)
return;
var obj = JSON.parse(event.data);
if ("undefined" !== typeof obj.data.new_state)
{
var entity_id = obj.data.new_state.entity_id.replace(/\./g, "_");
if (-1 != entities.indexOf(entity_id))
{
var new_html;
try
{
var state = obj.data.new_state.state;
var friendly_name = obj.data.new_state.attributes.friendly_name;
if ( state == "idle" )
{
changePoster();
changePosterTimer = setInterval(changePoster, posterDisplayTimeInMS);
return;
}
else
{
clearInterval(changePosterTimer);
var entity_picture = obj.data.new_state.attributes.entity_picture;
entity_picture = entity_picture.replace("localhost", "172.16.2.105");
var media_title = obj.data.new_state.attributes.media_title;
var media_duration = obj.data.new_state.attributes.media_duration;
var rtime = new Date(media_duration).toISOString().substr(11, 8);
new_html = "<section class=section-images + ><img src=" + entity_picture + " /></section>";
if ( state != "paused" )
new_html = new_html + "<h3><p align=center>Now Showing in " + friendly_name + "</p></h3><h4><p align=center>Runtime: " + rtime + "</p></h4>";
else
new_html = new_html + "<h3><p align=center>Intermission in " + friendly_name + "</p></h3><h4><p align=center>Runtime: " + rtime + "</p></h4>";
}
}
catch (err)
{
new_html = err.message;
}
output.innerHTML = new_html;
}
}
};
}
</script>
</body>
</html>
You also need this css code (just replace existing):
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #c8c8c8;
background-color: #272b30;
}
html,
body,
.section-images {
height: 100%;
margin: 0;
}
.section-images {
margin: auto 2em;
text-align: center;
}
img {
border: 0;
width:auto;
height:auto;
max-width:100%;
max-height:90%;
}
2 Likes
Still not working, but instead of a blank white screen, I get a blank black screen. Making Progress!!! 
Are you running DMP on seperate machine? Yes.
Did you at least once open HA on that machine and fill out the HA password?
yes. Went through that process
You are running Kodi or Plex?
When page is open just for test purposes open second tab with HA in it on same machine/browser as one where you run DMP page.
Clear cache, log into HA, go to media player gorgon and pause the movie from there.
Go to DMP tab and refresh the page.
Go back to HA tab and press play. Wait few seconds and press pause again.
Go back to DMP page to see if you see change.
If so keep that page open and use HA on your mobile to see if something happens when you play/pause your instance.
I hope the code I posted works for you.
I should note that I don’t have secure local connections enabled in plex, so I’m not sure if that would impact anything. You can look in HA’s log file and see what values Plex is raising.
If you’re running Plex, be sure to update to the code I posted. There was an issue where the first play with Plex would not get displayed. You needed to play/pause a couple of times to see anything.
And for Kodi you take my updated code. I implemented the Lanky fix for the page not updating immediatly on first play.