Digital movie poster - Kodi version (dennisaion) Plex version (Lanky)

dennisaion · May 20, 2016, 11:25am

Per request of the kids this time I have setup a digital movie poster.

This is the end result. Still needs start and end time. But as the kids say “It totally rocks!”

Below you can read about the road leading to it.

At first I tested it on a spare tablet and planned to a 22" TV as wall mounted poster. Has a nice even bezel on all sides.

Each time a movie starts on their Kodi system the movie poster is shown with “Now Playing” message above it and details below.

I was planning to use this 22" TV as wall mounted poster. Has a nice even bezel on all sides.

With movie scenes dimming lights working in HASS all ground work is done for creating their movie theater.

Decided to use the 15" LCD panel out of my old laptop and put that in a frame. Making for a more sleek look.

You read up on how I did it further down below.

rpitera · May 20, 2016, 11:58am

Wow! Very cool! How did you make this happen?

dennisaion · May 20, 2016, 12:03pm

There were two solutions available. A paid Windows only made by Meyer64 over at AVS forums (www.movieposterapp.com) and the other is a Addon for Kodi made by Lunaticx called PseudoPoster.

This one has code on Github which I am refactoring to make it work straight from HASS.
It is also free and has more options and flexibility.

Would love to see possibillity for an out of the box solution from HASS.

Untill then I am coding to keep kids happy.

Also revisiting some old work I dis on voice recognition to incorporate in my system. The LG TV control (pre WebOS) workaround f.i. was derived from that.

rpitera · May 20, 2016, 1:13pm

Man I wish they had this for Plex - this is awesome. I’ve considered moving to Kodi a couple of times, but I have a lifetime subscription at Plex.tv and I got a bit invested in the platform. I wonder if you could do this using that static website code that @fabaff posted (can’t find the link right now - at work)?

dennisaion · May 20, 2016, 1:22pm

You mean this

I’ll give it a whirl.

rpitera · May 20, 2016, 3:18pm

There was actually another one with a black and white screen in grid layout - I can’t seem to find it though; maybe it wasn’t @fabaff. But I think the concept is the same. It’s just so cool though. Your kids are so lucky. My Dad was like that, but analog. I miss watching him solve problems and put together things that worked well for years.

fabaff · May 20, 2016, 10:01pm

rpitera · May 20, 2016, 10:04pm

THAT’S THE ONE!
I just got home from the client site and was in here searching for it when I saw the notification for the post. That’s what I was thinking might work. Thanks, man…

dennisaion · May 20, 2016, 10:04pm

Found it few mins ago and refactored it for my purpose.

Now looks like this

@fabaff seem’s only Desktop Chrome and Mozilla browsers are supported. Info is not showing on IE and Android tabs f.i.

It works now but limits my options.

for anyone interested in the code copy and past this in your index.html of static page in local www


<!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 href="css/home-assistant-display.css" rel="stylesheet">
    <title>Digital Movie Poster</title>			
</head>

<body>
<div class="row" id="output"></div>

<script type="text/javascript">
    // Entities to display. Replace the period in the name with an underscore.
    var entities = ['media_player_kodi'
                    ];

   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 state = obj.data.new_state.state;
	                var friendly_name = obj.data.new_state.attributes.friendly_name;
	                var new_html;
	                if ( state == "idle" ) {
	                    new_html = "<div id=" + entity_id + "><h3><p align=center>No media playing in " + friendly_name + "</p></h3></div>";
	                } else {
		                var entity_picture = obj.data.new_state.attributes.entity_picture;
		                var media_title = obj.data.new_state.attributes.media_title;
		                var media_duration = obj.data.new_state.attributes.media_duration;
		                var state = obj.data.new_state.state;
		                var rtime = new Date(media_duration * 1000).toISOString().substr(11, 8);
		
		                new_html = "<div id=" + entity_id + "><section class=section-images + ><img src=" + entity_picture + " /></section><h3><p align=center>Now " + state + " in " + friendly_name + "</p></h3><h4><p align=center>Runtime: " + rtime + "</p></h4></div>";
	                }
                
                    var myElement = document.getElementById(entity_id);
                    if(null !== myElement){
                        myElement.innerHTML = new_html;
                    } else {
                        var newElement = document.createElement('div');

                        newElement.innerHTML = new_html;
                        output.appendChild(newElement);
                    }
                }
            }
        };
    }
</script>
</body>
</html>

fabaff · May 21, 2016, 11:07am

Lucky for me that there is no IE on Linux

dennisaion · May 21, 2016, 12:57pm

Well kinda sucks as it also does not work on Android based browsers. On Chrome 49 it works but 50 it doesn"t. So that makes me fall back to my first option. Anyway enjoy this untill I have zomething better people.

rpitera · May 21, 2016, 1:16pm

Video =
Soundtrack =

LOL, thanks for sharing this. Your media room must rock.

dennisaion · May 21, 2016, 1:36pm

Yeah the soundtrack I had to do. Kids where duking it out in the other room so this Samsung soundtrack made this video PG rated.

Don’t worry no one got killed.

I’ll post a pic once media room is ready.

dennisaion · May 21, 2016, 7:20pm

dennisaion · May 22, 2016, 5:03pm

I changed my mind on the 22" TV. Had an old broken Lenovo laying around. Gutted it for it’s 15" screen.

Will hook it up with an controller board and have it be the thinnest digital movie poster possible.

rpitera · May 22, 2016, 10:37pm

Keep it up and I’m asking to be adopted! Once you get this done, you need to post this on imgur and or the HA G+ group. This is awesome and deserves a wider audience…

dennisaion · May 25, 2016, 10:52am

Made index.html full screen (on Android as home screen app) and now shows runtime in hours minutes seconds instead of just seconds.

w84no1 · May 25, 2016, 3:22pm

That is awesome, when do we get the code and a how to?

Great job!

fabaff · May 25, 2016, 6:20pm

There is not much more needed than to place the HTML file (index.html) in your folder www in your Home Assistant configuration directory (.homeassistant) and to visit https://localhost:8123/local/index.html.

dennisaion · May 25, 2016, 7:03pm

Here is my updated code for the index.html Just copy and paste it. Place it the local folder per instructions of our friend @fabaff and your good to go.

Make sure you change var entities = ['media_player_kodi_bedroom' to reflect your Kodiplayer.


<!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 href="css/home-assistant-display.css" rel="stylesheet">
    <title>Digital Movie Poster</title>			
</head>

<body>
<div class="row" id="output"></div>

<script type="text/javascript">
    // Entities to display. Replace the period in the name with an underscore.
    var entities = ['media_player_kodi_bedroom'
                    ];

   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 state = obj.data.new_state.state;
	                var friendly_name = obj.data.new_state.attributes.friendly_name;
	                var new_html;
	                if ( state == "idle" ) {
	                    new_html = "<div id=" + entity_id + "><h3><p align=center>No media playing in " + friendly_name + "</p></h3></div>";
	                } else {
		                var entity_picture = obj.data.new_state.attributes.entity_picture;
		                var media_title = obj.data.new_state.attributes.media_title;
		                var media_duration = obj.data.new_state.attributes.media_duration;
		                var state = obj.data.new_state.state;
		                var rtime = new Date(media_duration * 1000).toISOString().substr(11, 8);
		
		                new_html = "<div id=" + entity_id + "><section class=section-images + ><img src=" + entity_picture + " /></section><h3><p align=center>Now " + state + " in " + friendly_name + "</p></h3><h4><p align=center>Runtime: " + rtime + "</p></h4></div>";
	                }
                
                    var myElement = document.getElementById(entity_id);
                    if(null !== myElement){
                        myElement.innerHTML = new_html;
                    } else {
                        var newElement = document.createElement('div');

                        newElement.innerHTML = new_html;
                        output.appendChild(newElement);
                    }
                }
            }
        };
    }
</script>
</body>
</html>

Works on most Android and Chrome browsers.