2019-07-11, 00:33
In Startup.xml you need to setup colorbox and launch it
Then in the background of your view:
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>
xml:
<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;0@fhls*-;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:
xml:
<!-- 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>
