Your Digital Media Has Never Looked So Good

 
nmaves
Topic Author
Posts: 42
Joined: Mon Jul 10, 2017 6:52 pm

Gaussian blur on background images

Fri Jul 14, 2017 9:30 am

I am trying to find a way to blur a poster image for the background of a content detail page.

Is this possible and if so can you point me in the right direction.

Nathan
 
User avatar
EricBezanson
Posts: 2
Joined: Fri Jul 07, 2017 10:33 am
Location: Halifax, NS
Contact:

Re: Gaussian blur on background images

Wed Jul 19, 2017 10:28 am

Hey Nathan!

To my knowledge there is not a way blur an image natively within the sdk, you can use the maskGroup feature but this is not available on all devices (https://sdkdocs.roku.com/display/sdkdoc/MaskGroup)

One way you can accomplish this is simply create an image with some opacity in photoshop and then place it overtop of the image you want to blur. so for example if you have say a modal that pops up over top of your main screen to display information about the content, you can set the modal size to be full screen and then set the modal background image to your semi-transparent gaussian-blur image. This method should work on all devices.

as a test i just took this image https://wallpaperlayer.com/img/2015/6/gaussian-blur-wallpaper-3240-3444-hd-wallpapers.jpg from a google search, set its opacity to 90% in photoshop and then applied it over top of an image and achieved an effect similar to the gaussian blur effect. 

Hope this helps! have a good one.
- Eric Bezanson -
Associate Developer, REDspace
 
User avatar
RokuNB
Posts: 306
Joined: Fri Mar 31, 2017 2:22 pm

Re: Gaussian blur on background images

Wed Jul 19, 2017 11:26 am

@EricBezanson -
wouldn't it also be possible (and easier) to use the opacity field? I have not tried, it just seems like something that should work - either directly applied on the image or applied on a "blurification" image put on top. That image can be generated with some white noise in it and used in multiple places... one imagines.
 
User avatar
EricBezanson
Posts: 2
Joined: Fri Jul 07, 2017 10:33 am
Location: Halifax, NS
Contact:

Re: Gaussian blur on background images

Thu Jul 20, 2017 11:42 am

@RokuNB I have not tested that but I don't see any reason why that wouldn't work, its another great solution! 
The reason I chose to create an image in photoshop was to limit the amount of opacity operations preformed by the device, which could add up if its done a lot throughout the app. However at the end of the day it probably wouldn't save anything noticeable as far as performance but that is just how my brain works haha.
- Eric Bezanson -
Associate Developer, REDspace
 
taylorcw
Posts: 14
Joined: Mon Jan 18, 2016 7:41 pm

Re: Gaussian blur on background images

Tue Dec 05, 2017 10:07 pm

I found PLEX Roku app is doing a nice Gaussian blur on its images during slideshows. The closest I can come is the second image below.  Does anyone have an idea how PLEX is doing this? It looks really cool, but i can't figure it out.   

PLEX ROKU APP.
Image

MY APP - opacity = "0.8"
Image

Thanks
 
Veeta
Posts: 128
Joined: Tue Aug 12, 2014 4:44 am
Location: http://www.veeta.tv
Contact:

Re: Gaussian blur on background images

Thu Dec 07, 2017 7:27 am

2 ideas:

1) Plex almost surely is doing this processing on the server side.  They do other heavyweight things like transcoding video before sending to the Roku for display.

2) I've done some fiddling with Poster node's loadWidth/loadHeight/loadDisplayMode lately and it seems that there is some smoothing that happens when resampling images.  Could be useful for your desired effect.

EDIT: adding examples:

Original 1920x1080 image

Image

160x90 for loadWidth/loadHeight:

Image
 
taylorcw
Posts: 14
Joined: Mon Jan 18, 2016 7:41 pm

Re: Gaussian blur on background images

Fri Dec 08, 2017 9:27 pm

Hey! You're on to something with the loadHeight / loadWidth. I tried this and went down to an extremely low percentage, results look pretty good.

loadwidth = 1% of original = 12.8
loadheight = 1% of original = 7.2

Image

Not enough?
loadwidth = 0.07% of original = 8.96
loadheight = 0.07% of original = 5.04
Image


For those wanting to see code:

<Poster id = "Background" loadWidth = "12.8" loadHeight = "7.2" height = "720" width = "1280" loadDisplayMode = "scaleToFill" />
<Rectangle id = "hideMe" height = "720" width = "1280" opacity = ".3" />   
<Poster id = "PrimaryImage" loadWidth = "0.0" loadHeight = "0.0" loadDisplayMode = "scaleToFit" />

Thanks for the tip
 
User avatar
squirreltown
Posts: 752
Joined: Sun Apr 21, 2013 2:20 pm

Re: Gaussian blur on background images

Fri Dec 08, 2017 9:32 pm

Great catch, thank you both.
Kinetics Screensaver (kineticsscreensaver), Kinetics³ Screensaver(kinetics3), Kinetics Painter Screensaver (kineticspainter), Kinetics Splash Screensaver (kineticssplash)

Who is online

Users browsing this forum: No registered users and 7 guests