Digital movie poster - Kodi version (dennisaion) UPDATED!

Share your Projects!
1

Hi all,

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.

So

    <link href="css/base.css?1.3.57" rel="stylesheet" type="text/css">

becomes

    <link href="css/kodi.css?1.3.57" rel="stylesheet" type="text/css">

Now you have the basics. There is a lot you can do with HTML5 and java so have fun with it.

7 Likes
2

waiting for running code :slight_smile:

3

It is up in the first post already.

4

Code is on top. First post.

5

Using libreElec the mentioned directory/path is ‘Read-only file system’ So I can’t place any file there.

1 Like
6

login as root

user: root
password: libreelec

7

What did you do to get around this?

8

Any help in libreelec? I can’t modify/add the file in /usr/share/xxx it’s read-only fs, inclusive with root password…thanks

9

I think I found a simpler approach.

I created an HTML-file called poster.html in this directory:
/home/pi/.homeassistant/www

with the following content using JSONRPC:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta charset="utf-8">
    <link href="css/movieposter.css" rel="stylesheet">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <title>Movie Poster</title>			
</head>
<body>
<script language="javascript" type="text/javascript">
    var ws = new WebSocket('ws://192.168.1.154:9090/jsonrpc'); //IP address of your Kodi / libreELEC instance
    var regex = /(http.*\w)/;
    var contentType;
   
    ws.onopen = function (event) {
        send_message("Player.GetActivePlayers");
        }

    ws.onmessage = function (event) {
        var j = JSON.parse(event.data);

        if (j.id) // response
            {
            switch(j.id) {
                case "Player.GetActivePlayers":
                    var r = j.result[0];
                    if (r.type == 'video') {
                        contentType = 'video';
                        send_message("Player.GetItem", {
                                "properties": ["art"],
                                "playerid": r.playerid,
                                });
                        }
                    else if (r.type == 'audio') {
                        contentType = 'audio';
                        send_message("Player.GetItem", {
                                "properties": ["fanart","artist", "album","title", "thumbnail"],
                                "playerid": r.playerid,
                                });
                        }
                    break;
                case "Player.GetItem":
                    var r = j.result.item;
                    
                    if (contentType == 'video') {
                      document.getElementById("audio").style.display = 'none';
                      if(r.type == "movie") {
                        document.getElementById("poster").style.backgroundImage = "url('" + regex.exec(decodeURIComponent(r.art["poster"]))[1] + "')";
                      }
                      else if (r.type == "episode")
                      {
                        document.getElementById("poster").style.backgroundImage = "url('" + regex.exec(decodeURIComponent(r.art["season.poster"]))[1] + "')";
                      }
                      else if (r.type == "unknown") {
                        document.getElementById("poster").style.backgroundImage = "url('" + regex.exec(decodeURIComponent(r.art["thumb"]))[1] + "')";
                      }
                      else {
                        document.getElementById("poster").style.backgroundImage = "url('placeholder.png')";
                      }
                    }
                    else if (contentType == 'audio')  {
                      document.getElementById("audio").style.display = 'block';
                      document.getElementById("poster").style.backgroundImage = "url('" + regex.exec(decodeURIComponent(r["fanart"]))[1] + "')";
                      document.getElementById("artist").innerHTML = r["artist"][0];
                      document.getElementById("album").innerHTML = r["album"];
                      document.getElementById("title").innerHTML = r["title"];
                      document.getElementById("albumCover").style.backgroundImage = "url('http://libreelec.local/image/" + encodeURIComponent(r["thumbnail"]) + "')";
                    }
                    break;
                }
            }
        else // notification
            {
            switch(j.method) {
                case "Player.OnPlay":
                    document.getElementById("pause").style.display = 'none';
                    send_message("Player.GetActivePlayers");
                    break;
                case "Player.OnPause":
                    document.getElementById("pause").style.display = 'block';
                    break;
                case "Player.OnStop":
                    document.getElementById("poster").style.backgroundImage = "url('stop.png')";
                    document.getElementById("audio").style.display = 'none';
                    document.getElementById("pause").style.display = 'none';
                    break;
                }
            }
        }
    function send_message(method, params) {
        var msg = {
            "jsonrpc": "2.0",
            "method": method,
            "id": method
        };
        if (params) {
            msg.params = params;
        }
        ws.send(JSON.stringify(msg));
    }
</script>

<div id="pause" class="centerBlackBox">Short Break!</div>

<div id="poster"></div>

<div id="audio">
  <div id="albumCover" class="albumCover"></div>
  <div id="artist" class="centerBlackBox"></div>
  <div id="album" class="centerBlackBox"></div>
  <div id="title" class="centerBlackBox"></div>
</div> 
</body>
</html>

Now can style your movie poster using the corresponding css-file.
After that just call the following link:

http://<IP-Address of your HA instance>:8123/local/poster.html

1 Like