Jump to content

POSTERS (Alpha) - A Web based Dynamic Now Playing Poster App for Emby


chef

Recommended Posts

POSTERS

 

"Posters"  is in an Alpha stage of development. (was excited to share with the community, but there will be some fun things to fix)

It is an application written in Javascript which will connect to Emby and display   the a poster for the media item currently playing on a device.

This app is hosted in the web browser.

It can be  run on  Raspberry Pi, stuck to the back of an old computer monitor, mounted on the Wall.

It can be opened in Chrome using  'Kiosk' mode, and the display set to portrait.

More Raspi integration terminal commands to come. (Anyone with Raspi knowledge? It's time to shine!)

It uses https://animate.style/ animations, so there is,  literally, an bunch of possibilities in layout, and animations to make the posters app unique to each users tastes... More to come. 

How to use:

  1. Unzip the folder to the desktop (anywhere)
  2. Right click "index.html"
  3. Open in your favorite browser
  4. Discover your server
  5. Login
  6. Start to play a movie on one of your emby ready devices
  7. Watch the posters come alive

 

 

TODO:

  • A Landscape view
  • Configuration options
  • Terminal Commands for Raspberry Pi (kiosk browser, start in portrait, load html on start)
  • Fix multiple streams cause images to reload. Maybe this is a good thing, we just have to slow it down.
  • Take advantage of all the different animations available in animatecss libraries

 

November 3

1. Added full screen capabilities,

2.  landscape mode,

3. hidden fly-out nav for future options.

 

November 2 

1. First Upload

 

DOWNLOAD: 

 

PosterApp_v0.22.zip

Edited by chef
  • Like 10
  • Thanks 2
Link to comment
Share on other sites

Now with Landscape and with portrait! :)

Updated link in the main description :)

 

You can change the dimensions in chrome dev tools to see the changes.

 

It now grows to full screen.

  port_poster_app.png.e959296a951af7433f1126a4bf7cab34.png

land_poster_app.thumb.png.8033fb43aa2d66d84e285d43199804c7.png

 

  • Like 1
Link to comment
Share on other sites

CBers

@chef Just trying the latest version, but it seems to be taking a little longer to find what what's playing, and update, probably around 10 seconds.

I'm sure your first release was quicker.

Also, when you stop playing, it doesn't go to a blank screen.
 

  • Thanks 1
Link to comment
Share on other sites

1 hour ago, CBers said:

@chef Just trying the latest version, but it seems to be taking a little longer to find what what's playing, and update, probably around 10 seconds.

I'm sure your first release was quicker.

Also, when you stop playing, it doesn't go to a blank screen.
 

Cool. Yes I see what happens, now. thank you.

 

I fixed it, and put a new one up at the top.

 

Hint: Try playing a kids movie (Animation/Family... ex. Something from Disney/Pixar), and also try playing a movie meant for grown ups. The animations are different. LOL!

 

  • Like 1
Link to comment
Share on other sites

And @CBers I have the screen clear when there is no nowplaying data on the network. Awesome man! thanks!

new version is posted v0.13

Edited by chef
  • Like 1
Link to comment
Share on other sites

CBers
10 minutes ago, chef said:

And @CBers I have the screen clear when there is no nowplaying data on the network.

That's better, thanks 👍

Still takes a little while to load the image (12-18 seconds), but I am testing remotely, so perhaps that's why, although it clears the screen straight away on playback stop.
 

Link to comment
Share on other sites

CBers

So in Landscape mode, it's loading the movie LOGO ?

And this is only for movies, not TV shows ?
 

Edited by CBers
Link to comment
Share on other sites

1 hour ago, CBers said:

So in Landscape mode, it's loading the movie LOGO ?

And this is only for movies, not TV shows ?
 

Yeah logo only right now. I am not great at layout stuff. 

I can code it once I see it, but I am not good at making it up. LOL.

 

Interesting, I haven't tried tv shows yet.

 

  • Like 1
Link to comment
Share on other sites

1 hour ago, CBers said:

That's better, thanks 👍

Still takes a little while to load the image (12-18 seconds), but I am testing remotely, so perhaps that's why, although it clears the screen straight away on playback stop.
 

There is a throttle on the messages from the server. When there are two streams playing the images update really fast, and looks kinda bad. Unfortunately, the throttle also affects the loading of the whole thing.

I have an idea.

There is a secret popout menu on the side.

If you click the top left of the screen it will fly out.

There we can have a selection of the device to monitor for events.

 

That way it is only a condition to check, and not the entire server worth of sessions.

Edited by chef
  • Like 1
Link to comment
Share on other sites

Excellent!

 

When you first start the app you are given access to the pop-out menu to choose the device to monitor for playback events! Awesome!

posterApp_0_14.thumb.png.d9beae8fcc403612812b0d550c0b46dd.png

 

Once you select the device, it will monitor for that device.

 

Much, much better :)

I'll updated the main post! Version 0.14

Link to comment
Share on other sites

Junglejim

Hi mate, just gave this a whirl and its looking totally cool.. I can see this making it into my man cave! :) Got a few RasPi hanging around that will fit the bill. ;)

Cheers mate

  • Thanks 1
Link to comment
Share on other sites

OMG! I took took a course on HTML Canvas element. Our posters are now animated.

posterv_2.png.f027bd3247826f8b7d9a9e506cb8ddee.png

  • Like 1
Link to comment
Share on other sites

Junglejim

Wow mate, your a coding ninja. Must admit I'm not a big fan of the animation stuff (hopefully it will be optional eventually). 👍

  • Like 1
Link to comment
Share on other sites

8 hours ago, Junglejim said:

Wow mate, your a coding ninja. Must admit I'm not a big fan of the animation stuff (hopefully it will be optional eventually). 👍

yes, you are right.

 

I did get backdrops working in the posters, which I think looks pretty good.

backdrop.thumb.png.acef0b2512361d92f1876b9e32e86239.png

backdrop_2.png.c7905b9ec208a3e42a29e77aa52c8213.png

Link to comment
Share on other sites

CBers

@chefWould animated posters work, such as these

Not sure if Emby is supporting these yet, but wondered if your code would load a specific file of it existed? 

 

Edited by CBers
  • Like 1
Link to comment
Share on other sites

2 hours ago, CBers said:

@chefWould animated posters work, such as these

Not sure if Emby is supporting these yet, but wondered if your code would load a specific file of it existed? 

 

they sure will!

where do I get them from?

Link to comment
Share on other sites

If you have them as your folder/poster image they will load.

Requesting "backdrop/0" will return the first backdrop.  I wonder if requesting "primaryImage/0" returns the first primary image, and therefore requesting "primaryImage/1" would return the second.

Then you could have them as the seconds primary image, and the poster app would check if there is one, and use it instead of static one.

 

I'll check it out... one second

 

Link to comment
Share on other sites

I'm back!

 

Yes, the primary images url is certainly indexed, so the answer is,  yeah we should totally do this.

But, they have to be saved as something in the file system. Is it "folder(1).gif"?

I'm unsure.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...