Roku Developer Program

[nmaves]

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

[EricBezanson]

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.

[NB_]

@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.

[EricBezanson]

@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.

[taylorcw]

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

[Veeta]

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]

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]

Great catch, thank you both.

[Archana]

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"/>