Roku Developer Program

Developers and content creators—a complete solution for growing an audience directly.
cancel
Showing results for 
Search instead for 
Did you mean: 
nmaves
Level 7

Gaussian blur on background images

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
0 Kudos
7 Replies
EricBezanson
Level 7

Re: Gaussian blur on background images

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
0 Kudos
Roku Employee
Roku Employee

Re: Gaussian blur on background images

@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.
0 Kudos
EricBezanson
Level 7

Re: Gaussian blur on background images

@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
0 Kudos
taylorcw
Level 7

Re: Gaussian blur on background images

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.


MY APP - opacity = "0.8"


Thanks
0 Kudos
Veeta
Level 7

Re: Gaussian blur on background images

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



160x90 for loadWidth/loadHeight:

0 Kudos
taylorcw
Level 7

Re: Gaussian blur on background images

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



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



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
0 Kudos
squirreltown
Level 8

Re: Gaussian blur on background images

Great catch, thank you both.
Kinetics Screensavers
0 Kudos