[Arcanthur]

Hey guys, I'm working on a personal project modding the titan skin for Kodi Krypton with DSPlayer.  I'm really wanting to use blurred fanart backgrounds and from what I can gather the colorbox script is what I want/need.  

Since I'm more of a designer than a coder, I'm kinda lost as to how to go about using it.  I basically just want to have my background layered as such:

Fanart (Blurred)
A dark semi transparent overlay

ANY help would be greatly appreciated

[mardukL]

I am wonder, titan default offers that using custom background, custom fanart overlay texture (+ color ) + custom overlay color. (https://forum.kodi.tv/showthread.php?tid...pid2789057)

If you wanna do it your self

I think the easiest way is to make a group control.
The images wil overlay each other, deepest layer will be the 1st in group

xml:




 <control type="group">

        <posx>0</posx>

        <posy>0</posy>

        <width>100%</width>

        <height>100%</height>

        

        <!-- 1 -->

         <control type="image">

            <texture>your overlay texture</texture>

            <colordiffuse>your color</colordiffuse>        

         </control>

         <!-- 2 (overlay over 1)-->

         <control type="image">

            <texture>your overlay texture</texture>

            <colordiffuse>your color</colordiffuse>        

         </control>

         <!-- 3 (overlay over 1 + 2)-->

         <control type="image">

            <texture>your overlay texture</texture>

            <colordiffuse>your color</colordiffuse>        

         </control>

    </control>        

    

    <!-- example to fit an image into an given texture (using diffuse) ,

    e.g. https://i.imgur.com/8Oy0ejU.jpg  using diffuse within https://i.imgur.com/RZiOybX.png -->

            <control type="image">

                <texture background="true" diffuse="nextupicons/diffusor_Square Bold.png">$VAR[NextUpThumb]</texture>

                <aspectratio scalediffuse="false" align="center" aligny="center">scale</aspectratio>

            </control>

PS: if you wanna let user customize with colorbox script or similiar, you need to add also the button in the setting, to ,let user choose the color via set skin string
Button definition include

xml:
<include name="SkinSettings_ColorButton">

        <control type="button" id="$PARAM[id]">

            <include>SkinSettings_Button</include>

            <label>$PARAM[labelprefix]$PARAM[label]</label>

            <label2>$INFO[Skin.String($PARAM[skinsetting].name)]  [color=$INFO[Skin.String($PARAM[skinsetting])]]███[/color]</label2>

            <onclick condition="System.HasAddon(script.skin.helper.colorpicker)">RunScript(script.skin.helper.colorpicker,action=COLORPICKER,skinstring=$PARAM[skinsetting],header=$PARAM[label],palette=$INFO[Skin.String(defaultcolorpalette)])</onclick>

            <onclick condition="!System.HasAddon(script.skin.helper.colorpicker)">RunPlugin(plugin://script.skin.helper.colorpicker)</onclick>

            <visible>$PARAM[visible]</visible>

        </control>

    </include>

Use the include for the new color setting (example color = upnext_panel)

xml:
 <include name="SkinSettings_ColorButton" content="SkinSettings_ColorButton">

                <param name="id" value="3100708" />

                <param name="label" value="upnext_panel" />

                <param name="skinsetting" value="upnext_panel" />

                <param name="visible" value="System.HasAddon(service.upnext) + [!Skin.String(upnext_fancy,upn_fancy_def) | !Skin.String(upnext_simple,upn_simple_addondefault)]" />

            </include>

[jurialmunkey]

@Arcanthur - This is how I use colorbox blur in Aura and AZ2

In Startup.xml

Code:

<onload>Skin.SetString(colorbox_effect,blur)</onload>
    <onload>Skin.SetString(colorbox_quality,4)</onload>
    <onload>Skin.SetString(colorbox_blend,100)</onload>
    <onload>Skin.SetString(colorbox_blursize,30)</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) + Skin.HasSetting(EnableBlur)">RunScript(script.colorbox,daemon=True)</onload>
    <onload condition="Skin.HasSetting(EnableBlur)">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>

The skin strings set various properties of colorbox. Main ones you want are:
colorbox_effect (to set colorbox to use blur)
colorbox_quality (to set quality of generated blur image, 1 is best, 8 is worst - considering its blur though, you can get away with 8. I like 4 though)
colorbox_blursize (how strong the blur is)

Most of the other settings relate to other effects colorbox can do.
The runscript line starts colorbox. I have a skin setting to enable it so that it doesn't run unnecessarily if disabled - Skin.HasSetting(EnableBlur).
You could just remove the setting altogether if you always want to use colorbox.
The FIVE_daemon line starts the blur service of colorbox.
The AlarmClock sets the colorbox settings after a delay to give colorbox time to start.


To blur images, you need a hidden control that you pass the images to:

Code:

<control type="multiimage" id="7975">
            <left>-2160</left>
            <width>1</width>
            <height>1</height>
            <timeperimage>7000</timeperimage>
            <randomize>true</randomize>
            <fadetime>600</fadetime>
            <imagepath background="true">$VAR[Global_Background_Image_Var]</imagepath>
            <visible>System.HasAddon(script.colorbox)</visible>
            <visible>Skin.HasSetting(EnableBlur)</visible>
        </control>

Replace the $VAR with the image that you want to blur. The 7975 control is the blur daemon (i.e. FIVE as in 7975)
I just pass it my default background variable because I want to apply blur to everything. But you might just want to pass $INFO[ListItem.Art(fanart)] or whatever.

Colorbox will now blur whatever image is in 7975 and output the blurred item to:
$INFO[Window(home).Property(ImageFilterFIVE)]

Put that infolabel in your image control that you use for the background.

[Arcanthur]

@jurialmunkey  THANK YOU!  I got it working within 5 minutes.  I'll post some screens once I get the settings I like.  How high can the blursize go?

*edit* So I've changed the blur size from 10 to 30 to 70 to 500, and I'm not seeing any difference, would me using Krypton have any effect on that?

[Arcanthur]

For now I just changed the default value in utils.py (Hopefully I can find a fix), but here is my list view with the blur applied:

[jurialmunkey]

Arcanthur - you would need to restart kodi to see any changes to the settings. To update the settings whilst kodi is running, you need a button that does:

Code:


<onclick>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:00,silent)</onclick>

        <onclick>AlarmClock(nms2,SetProperty(FIVE_daemon_fire,True,home),00:01,silent)</onclick>


Also, if you want to test out different settings and effects, in Aura I have a custom dialog available in skin settings where you can adjust the colour box config and see the effect applied to an image in real time.

[mardukL]

@jurialmunkey
thanks for such detailed info.
didnt know that colorbox offers such things.
quick tested your "custom blur settings preview dialog" in aura and thats briliant.

thanks for sharing.