Roku Developer Program

Join our online forum to talk to Roku developers and fellow channel creators. Ask questions, share tips with the community, and find helpful resources.
cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
nmaves
Visitor

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
8 REPLIES 8
EricBezanson
Visitor

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
NB_
Roku Guru

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
Visitor

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
Streaming Star

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
Visitor

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:

taylorcw
Streaming Star

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
squirreltown
Roku Guru

Re: Gaussian blur on background images

Great catch, thank you both.
Kinetics Screensavers
0 Kudos
Archana
Binge Watcher

Re: Gaussian blur on background images

Hi, 

I tried to achieve the same. But I observe the image gets pixelated. I can see some random and asymmetric lines over the image.

When I add overlay the lines are more visible. Any idea on this? Can we get good image without these lines.

<Poster id = "Background" loadWidth = "8.96" loadHeight = "5.04" height = "720" width = "1280" loadDisplayMode = "scaleToFill" />
<Rectangle id = "hideMe" height = "1080" width = "1920" opacity = "0.7" color = "0x000000"/>
0 Kudos
Need Assistance?
Welcome to the Roku Community! Feel free to search our Community for answers or post your question to get help.

Become a Roku Streaming Expert!

Share your expertise, help fellow streamers, and unlock exclusive rewards as part of the Roku Community. Learn more.