Blur Overlay
#16
In Startup.xml you need to setup colorbox and launch it

<onload>Skin.SetString(colorbox_effect,blur)</onload>
<onload>Skin.SetString(colorbox_quality,4)</onload>
<onload>Skin.SetString(colorbox_blursize,15)</onload>
<onload>Skin.SetString(colorbox_blend,100)</onload>
<onload>Skin.SetString(colorbox_bitsize,1)</onload>
<onload>Skin.SetString(colorbox_pixelsize,12)</onload>
<onload>Skin.SetString(colorbox_desat,0.3)</onload>
<onload>Skin.SetString(colorbox_black,000000)</onload>
<onload>Skin.SetString(colorbox_white,ffffff)</onload>
<onload>Skin.SetString(colorbox_main,main:fhls*-;0.45;0.9)</onload>
<onload>Skin.SetString(colorbox_comp,main:hls*0.75;0;[email protected]*-;0.45;0.9)</onload>

<onload condition="System.HasAddon(script.colorbox)">RunScript(script.colorbox,daemon=True)</onload>
<onload condition="System.HasAddon(script.colorbox)">SetProperty(FIVE_daemon_set,$INFO[Skin.String(colorbox_effect)],home)</onload>
<onload condition="System.HasAddon(script.colorbox)">AlarmClock(nms1,SetProperty(NINE_manual_set,"var=main,set=$INFO[Skin.String(colorbox_main)]|var=comp,set=$INFO[Skin.String(colorbox_comp)]|var=quality,set=$INFO[Skin.String(colorbox_quality)]|var=blursize,set=$INFO[Skin.String(colorbox_blursize)]|var=bitsize,set=$INFO[Skin.String(colorbox_bitsize)]|var=pixelsize,set=$INFO[Skin.String(colorbox_pixelsize)]|var=black,set=$INFO[Skin.String(colorbox_black)]|var=white,set=$INFO[Skin.String(colorbox_white)]|var=blend,set=$INFO[Skin.String(colorbox_blend)]|var=desat,set=$INFO[Skin.String(colorbox_desat)]",home),00:05,true)</onload>


Then in the background of your view:

<!-- Colorbox Daemon -->
<control type="multiimage" id="7975">
<left>-2160</left>
<width>1</width>
<height>1</height>
<imagepath background="true">$INFO[ListItem.Art(fanart)]</imagepath>
<visible>System.HasAddon(script.colorbox)</visible>
</control>
<!-- Background Fanart -->
<control type="texture">
<width>1920</width>
<height>1080</height>
<fadetime>600</fadetime>
<aspectratio scalediffuse="false">scale</aspectratio>
<texture background="true">$INFO[ListItem.Art(fanart)]</texture>
</control>
<!-- Colorbox Blur Image -->
<control type="texture">
<width>1920</width>
<height>1080</height>
<fadetime>600</fadetime>
<aspectratio scalediffuse="false">scale</aspectratio>
<texture background="true" diffuse="background-diffuse.png">$INFO[Window(home).Property(ImageFilterFIVE)]</texture>
</control>

The image control with id 7975 is the colorbox daemon. It will blur whatever image you pass to it (you can use a $VAR if you like) and output to ImageFilterFIVE window property: $INFO[Window(home).Property(ImageFilterFIVE)]

The second image control is the standard fanart background. This image needs to match whatever you are passing to the colorbox image control.

The third image is the blurred output of colorbox. I've applied a diffuse image (diffuse="background-diffuse.png") to it so that it only blurs the section of the background which matches the section behind my list panel. Basically you need to create 1920x1080 transparent png image and then colour white the sections that you would like to display.

That's the basics of it. Once you have it working, you can experiment with adding other effects to get it looking how you like. For instance, in my example image, I also applied a colordiffuse to dim the fanart and the blur. I also added a shadow texture around the blur section to separate it from the background a little bit.

You can tweak the strength of the blur in the Startup settings:
<onload>Skin.SetString(colorbox_blursize,15)</onload>
Reply
#17
(2019-07-11, 00:33)jurialmunkey Wrote: In Startup.xml you need to setup colorbox and launch it

<onload>Skin.SetString(colorbox_effect,blur)</onload>
<onload>Skin.SetString(colorbox_quality,4)</onload>
<onload>Skin.SetString(colorbox_blursize,15)</onload>
<onload>Skin.SetString(colorbox_blend,100)</onload>
<onload>Skin.SetString(colorbox_bitsize,1)</onload>
<onload>Skin.SetString(colorbox_pixelsize,12)</onload>
<onload>Skin.SetString(colorbox_desat,0.3)</onload>
<onload>Skin.SetString(colorbox_black,000000)</onload>
<onload>Skin.SetString(colorbox_white,ffffff)</onload>
<onload>Skin.SetString(colorbox_main,main:fhls*-;0.45;0.9)</onload>
<onload>Skin.SetString(colorbox_comp,main:hls*0.75;0;[email protected]*-;0.45;0.9)</onload>

<onload condition="System.HasAddon(script.colorbox)">RunScript(script.colorbox,daemon=True)</onload>
<onload condition="System.HasAddon(script.colorbox)">SetProperty(FIVE_daemon_set,$INFO[Skin.String(colorbox_effect)],home)</onload>
<onload condition="System.HasAddon(script.colorbox)">AlarmClock(nms1,SetProperty(NINE_manual_set,"var=main,set=$INFO[Skin.String(colorbox_main)]|var=comp,set=$INFO[Skin.String(colorbox_comp)]|var=quality,set=$INFO[Skin.String(colorbox_quality)]|var=blursize,set=$INFO[Skin.String(colorbox_blursize)]|var=bitsize,set=$INFO[Skin.String(colorbox_bitsize)]|var=pixelsize,set=$INFO[Skin.String(colorbox_pixelsize)]|var=black,set=$INFO[Skin.String(colorbox_black)]|var=white,set=$INFO[Skin.String(colorbox_white)]|var=blend,set=$INFO[Skin.String(colorbox_blend)]|var=desat,set=$INFO[Skin.String(colorbox_desat)]",home),00:05,true)</onload>


Then in the background of your view:

<!-- Colorbox Daemon -->
<control type="multiimage" id="7975">
<left>-2160</left>
<width>1</width>
<height>1</height>
<imagepath background="true">$INFO[ListItem.Art(fanart)]</imagepath>
<visible>System.HasAddon(script.colorbox)</visible>
</control>
<!-- Background Fanart -->
<control type="texture">
<width>1920</width>
<height>1080</height>
<fadetime>600</fadetime>
<aspectratio scalediffuse="false">scale</aspectratio>
<texture background="true">$INFO[ListItem.Art(fanart)]</texture>
</control>
<!-- Colorbox Blur Image -->
<control type="texture">
<width>1920</width>
<height>1080</height>
<fadetime>600</fadetime>
<aspectratio scalediffuse="false">scale</aspectratio>
<texture background="true" diffuse="background-diffuse.png">$INFO[Window(home).Property(ImageFilterFIVE)]</texture>
</control>

The image control with id 7975 is the colorbox daemon. It will blur whatever image you pass to it (you can use a $VAR if you like) and output to ImageFilterFIVE window property: $INFO[Window(home).Property(ImageFilterFIVE)]

The second image control is the standard fanart background. This image needs to match whatever you are passing to the colorbox image control.

The third image is the blurred output of colorbox. I've applied a diffuse image (diffuse="background-diffuse.png") to it so that it only blurs the section of the background which matches the section behind my list panel. Basically you need to create 1920x1080 transparent png image and then colour white the sections that you would like to display.

That's the basics of it. Once you have it working, you can experiment with adding other effects to get it looking how you like. For instance, in my example image, I also applied a colordiffuse to dim the fanart and the blur. I also added a shadow texture around the blur section to separate it from the background a little bit.

You can tweak the strength of the blur in the Startup settings:
<onload>Skin.SetString(colorbox_blursize,15)</onload>
Thanks for your guide but for some reason I can't get it work. There is no image shown
Reply
#18
(2019-07-11, 00:33)jurialmunkey Wrote: In Startup.xml you need to setup colorbox and launch it

<onload>Skin.SetString(colorbox_effect,blur)</onload>
<onload>Skin.SetString(colorbox_quality,4)</onload>
<onload>Skin.SetString(colorbox_blursize,15)</onload>
<onload>Skin.SetString(colorbox_blend,100)</onload>
<onload>Skin.SetString(colorbox_bitsize,1)</onload>
<onload>Skin.SetString(colorbox_pixelsize,12)</onload>
<onload>Skin.SetString(colorbox_desat,0.3)</onload>
<onload>Skin.SetString(colorbox_black,000000)</onload>
<onload>Skin.SetString(colorbox_white,ffffff)</onload>
<onload>Skin.SetString(colorbox_main,main:fhls*-;0.45;0.9)</onload>
<onload>Skin.SetString(colorbox_comp,main:hls*0.75;0;[email protected]*-;0.45;0.9)</onload>

<onload condition="System.HasAddon(script.colorbox)">RunScript(script.colorbox,daemon=True)</onload>
<onload condition="System.HasAddon(script.colorbox)">SetProperty(FIVE_daemon_set,$INFO[Skin.String(colorbox_effect)],home)</onload>
<onload condition="System.HasAddon(script.colorbox)">AlarmClock(nms1,SetProperty(NINE_manual_set,"var=main,set=$INFO[Skin.String(colorbox_main)]|var=comp,set=$INFO[Skin.String(colorbox_comp)]|var=quality,set=$INFO[Skin.String(colorbox_quality)]|var=blursize,set=$INFO[Skin.String(colorbox_blursize)]|var=bitsize,set=$INFO[Skin.String(colorbox_bitsize)]|var=pixelsize,set=$INFO[Skin.String(colorbox_pixelsize)]|var=black,set=$INFO[Skin.String(colorbox_black)]|var=white,set=$INFO[Skin.String(colorbox_white)]|var=blend,set=$INFO[Skin.String(colorbox_blend)]|var=desat,set=$INFO[Skin.String(colorbox_desat)]",home),00:05,true)</onload>


Then in the background of your view:

<!-- Colorbox Daemon -->
<control type="multiimage" id="7975">
<left>-2160</left>
<width>1</width>
<height>1</height>
<imagepath background="true">$INFO[ListItem.Art(fanart)]</imagepath>
<visible>System.HasAddon(script.colorbox)</visible>
</control>
<!-- Background Fanart -->
<control type="texture">
<width>1920</width>
<height>1080</height>
<fadetime>600</fadetime>
<aspectratio scalediffuse="false">scale</aspectratio>
<texture background="true">$INFO[ListItem.Art(fanart)]</texture>
</control>
<!-- Colorbox Blur Image -->
<control type="texture">
<width>1920</width>
<height>1080</height>
<fadetime>600</fadetime>
<aspectratio scalediffuse="false">scale</aspectratio>
<texture background="true" diffuse="background-diffuse.png">$INFO[Window(home).Property(ImageFilterFIVE)]</texture>
</control>

The image control with id 7975 is the colorbox daemon. It will blur whatever image you pass to it (you can use a $VAR if you like) and output to ImageFilterFIVE window property: $INFO[Window(home).Property(ImageFilterFIVE)]

The second image control is the standard fanart background. This image needs to match whatever you are passing to the colorbox image control.

The third image is the blurred output of colorbox. I've applied a diffuse image (diffuse="background-diffuse.png") to it so that it only blurs the section of the background which matches the section behind my list panel. Basically you need to create 1920x1080 transparent png image and then colour white the sections that you would like to display.

That's the basics of it. Once you have it working, you can experiment with adding other effects to get it looking how you like. For instance, in my example image, I also applied a colordiffuse to dim the fanart and the blur. I also added a shadow texture around the blur section to separate it from the background a little bit.

You can tweak the strength of the blur in the Startup settings:
<onload>Skin.SetString(colorbox_blursize,15)</onload>
Your code didn't work for me
Reply
#19
What didn't work? Be more specific. Also it's not just a simple copy paste job - you'll need to adapt the sample code I provided and create the diffuse image etc.

What specifically did you do? Post your code and diffuse texture and I can have a look at where you are going wrong.

The code definitely works because I created that screenshot using the methods that I described
Reply
#20
Sorry also in the above I made an error with syntax - the fanart and blur images should be controltype="image" not "texture" - if you copied my code verbatim that's what your issue likely is. I just wrote that as an example of how to achieve what I did, not as code to be copied directly.
Reply
#21
(2019-07-18, 01:10)jurialmunkey Wrote: Sorry also in the above I made an error with syntax - the fanart and blur images should be controltype="image" not "texture" - if you copied my code verbatim that's what your issue likely is. I just wrote that as an example of how to achieve what I did, not as code to be copied directly.
I didn't use a diffuse for testing so it cant failure there. I also test it with controltype image but I can test it again. The failure is that the image will be not blur.
Reply
#22
(2019-07-18, 12:32)emre.ay Wrote:
(2019-07-18, 01:10)jurialmunkey Wrote: Sorry also in the above I made an error with syntax - the fanart and blur images should be controltype="image" not "texture" - if you copied my code verbatim that's what your issue likely is. I just wrote that as an example of how to achieve what I did, not as code to be copied directly.
I didn't use a diffuse for testing so it cant failure there. I also test it with controltype image but I can test it again. The failure is that the image will be not blur.

Do you have colorbox installed? Does blur work if you use another skin that supports colorbox?
Also, if you make changes to Startup.xml you need to restart kodi for them to take effect.
Reply
 
Thread Rating:
  • 0 Vote(s) - 0 Average



Logout Mark Read Team Forum Stats Members Help
Blur Overlay00