Kodi Community Forum

Full Version: ClearArt on video screen
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2
Hello, so I would like to add a clearArt on the video screen, I added these lines to do that but I am not a "skinner" so there are some issues...
In the Variables.xml file I added at the 353 line : 
xml:

<variable name="PlayerClearArtVar">
        <value condition="!String.IsEmpty(Player.Art(tvshow.clearart))">$INFO[Player.Art(tvshow.clearart)]</value>
        <value condition="!String.IsEmpty(Player.Art(clearart))">$INFO[Player.Art(clearart)]</value>
</variable>
    
And in the DialogSeekBar.xml file at the 23th line :
xml:
<control type="group">
                <animation effect="slide" end="90,0" time="0" condition="Skin.HasSetting(touchmode)">conditional</animation>
                <control type="grouplist">
                    <visible>!String.IsEmpty(Player.Art(tvshow.clearart)) | !String.IsEmpty(Player.Art(clearart))</visible>
                    <bottom>84</bottom>
                    <left>1600</left>
                    <height>240</height>
                    <itemgap>10</itemgap>
                    <orientation>horizontal</orientation>
                    <control type="image">
                        <width>300</width>
                        <texture>$VAR[PlayerClearArtVar]</texture>
                        <aspectratio aligny="center" align="center">keep</aspectratio>
                    </control>
                </control>
            </control>

And this is what I get :Image
    
But not all of my clearArt are the same size so this happen :Image
I would like the clearArt to be as in the first photo(So just above the progress bar)... 
Could someone help me by changing the lines I added or if you know others lines to do that...
I am on Kodi Matrix 19.0 and I am using Estuary

Thanks

Edit : Is it possible to move the thread to Skinning ? Or is it the right place ? I feel like it should be in Skinning
(2021-03-03, 03:06)Bungee_G Wrote: [ -> ]I would like the clearArt to be as in the first photo(So just above the progress bar)... 
I see this often with clearlogo's and clearart. This problem occurs because not every piece of clearart is of the same height or is placed in the same position on the transparent layer when it's created in photoshop/Gimp and then uploaded to the fanart.tv site. Kodi uses the height/width dimensions of the actual transparent layer and not the actual clearart image itself. As a result, I often see clearart at different positions like you are also seeing.  
What you are better off doing is raising your clearart slightly above the progress bar, so that in the event any clearart is positioned differently on the original transparent layer you can compensate for this and not end up having artwork overlapping the progress bar like you are seeing currently. So in summary, some artwork will be slightly above the progress bar and some will appear closer to the timeline bar.
It all depends how the original artwork was created. Yes, it's slightly annoying, but there is no real way to solve this issue (Unless you edit every artwork file and then place them all exactly in the same position on your photoshop layer). Trust me, that could end up being a very long job depending how many pieces of clearart you have in your library....Making changes to a Kodi skin can quite often be a frustrating business where you need to compromise on some things.
Good luck with your endeavours.
Try this from Line 11

xml:
<?xml version="1.0" encoding="UTF-8"?>
<window>
<visible>Player.Seeking | Player.DisplayAfterSeek | [Player.Paused + !Player.Caching] | Player.Forwarding | Player.Rewinding | Player.ShowInfo | Window.IsActive(fullscreeninfo) | Player.ShowTime | Window.IsActive(videoosd) | Window.IsActive(musicosd) | Window.IsActive(playerprocessinfo) | !String.IsEmpty(Player.SeekNumeric) | !String.IsEmpty(PVR.ChannelNumberInput)</visible>
<visible>![Window.IsActive(sliderdialog) | Window.IsActive(pvrosdchannels) | Window.IsActive(pvrguideinfo) | Window.IsActive(1110)]</visible>
<visible>Window.IsActive(fullscreenvideo) | Window.IsActive(visualisation)</visible>
<include>Animation_BottomSlide</include>
<depth>DepthOSD</depth>
<zorder>0</zorder>
<controls>
<include>PVRChannelNumberInput</include>
<control type="image">
<visible>Window.IsActive(videoosd)</visible>
<bottom>140</bottom>
<right>20</right>
<width>300</width>
<texture>$INFO[Player.Art(clearart)]</texture>
<aspectratio aligny="bottom" align="center">keep</aspectratio>
</control>

I've only enabled it for videoosd display (the visible condition) as shown in your screenshot as it would clash with the info view. So the <bottom>140</bottom> co-ordinate is just above the seekbar then for the image the aligny="bottom" ensures on the vertical axis it's aligned to the bottom so bottom of image always starts at co-ord 140, then having <width>300</width> with no height means a constant width is keep then height will vary in order to keep the aspect ratio for that width.
In addition as Dumyat has rightly pointed out, these clearart images are within a transparent box (normally 500x281) so you can only do an alignment for the the box the image is contained within, so if the bottom of the image is not placed at the bottom of the box then the gap between progress bar and bottom of image will vary.
Thanks for your help ! I saw the clearart from the Estuary mod V2 skin, as you can see they appear well on the two photos in this Estuary skin :ImageImage
I don't know what lines have been added...

About the lines you sent, do I have to remove the lines I added and add yours under the 11th line ?
xml:
<control type="group">
(2021-03-03, 16:06)Bungee_G Wrote: [ -> ]Thanks for your help ! I saw the clearart from the Estuary mod V2 skin, as you can see they appear well on the two photos in this Estuary skin
I don't know what lines have been added...

About the lines you sent, do I have to remove the lines I added and add yours under the 11th line ?
xml:
<control type="group">

Yes do not use the code so remove what you had added, as that was over kill for the task, just take the image control lines I post for Lines 11 to 18. Oh and for my quick test I used $INFO[Player.Art(clearart)]
so replace that with your variable.
(2021-03-03, 16:13)jjd-uk Wrote: [ -> ]
(2021-03-03, 16:06)Bungee_G Wrote: [ -> ]Thanks for your help ! I saw the clearart from the Estuary mod V2 skin, as you can see they appear well on the two photos in this Estuary skin
I don't know what lines have been added...

About the lines you sent, do I have to remove the lines I added and add yours under the 11th line ?
xml:
<control type="group">

Yes do not use the code so remove what you had added, as that was over kill for the task, just take the image control lines I post for Lines 11 to 18. Oh and for my quick test I used $INFO[Player.Art(clearart)]
so replace that with your variable.
Okay thanks ! so I added your lines like that :

xml:
<control type="group">
                <control type="image">
            <visible>Window.IsActive(videoosd)</visible>
            <bottom>140</bottom>
            <right>20</right>
            <width>300</width>
            <texture>$VAR[PlayerClearArtVar]</texture>
            <aspectratio aligny="bottom" align="center">keep</aspectratio>
        </control>
            
<animation effect="fade" time="200">VisibleChange</animation>

And this is what I get :Image
Can I increase the width to make the clearart has the same size as before ?
On looking up Mod code it is not too dissimilar

https://github.com/Guilouz/repository.gu...3938-L3950
(2021-03-03, 16:25)Bungee_G Wrote: [ -> ]
(2021-03-03, 16:13)jjd-uk Wrote: [ -> ]
(2021-03-03, 16:06)Bungee_G Wrote: [ -> ]Thanks for your help ! I saw the clearart from the Estuary mod V2 skin, as you can see they appear well on the two photos in this Estuary skin
I don't know what lines have been added...

About the lines you sent, do I have to remove the lines I added and add yours under the 11th line ?
xml:
<control type="group">

Yes do not use the code so remove what you had added, as that was over kill for the task, just take the image control lines I post for Lines 11 to 18. Oh and for my quick test I used $INFO[Player.Art(clearart)]
so replace that with your variable.
Okay thanks ! so I added your lines like that :

xml:
<control type="group">
                <control type="image">
            <visible>Window.IsActive(videoosd)</visible>
            <bottom>140</bottom>
            <right>20</right>
            <width>300</width>
            <texture>$VAR[PlayerClearArtVar]</texture>
            <aspectratio aligny="bottom" align="center">keep</aspectratio>
        </control>
            
<animation effect="fade" time="200">VisibleChange</animation>

That's not what I said, I included that start of the file on purpose so you'd know where to place it, you've still got it in some group control which I did not do.
To further expand file code

xml:
<?xml version="1.0" encoding="UTF-8"?>
<window>
<visible>Player.Seeking | Player.DisplayAfterSeek | [Player.Paused + !Player.Caching] | Player.Forwarding | Player.Rewinding | Player.ShowInfo | Window.IsActive(fullscreeninfo) | Player.ShowTime | Window.IsActive(videoosd) | Window.IsActive(musicosd) | Window.IsActive(playerprocessinfo) | !String.IsEmpty(Player.SeekNumeric) | !String.IsEmpty(PVR.ChannelNumberInput)</visible>
<visible>![Window.IsActive(sliderdialog) | Window.IsActive(pvrosdchannels) | Window.IsActive(pvrguideinfo) | Window.IsActive(1110)]</visible>
<visible>Window.IsActive(fullscreenvideo) | Window.IsActive(visualisation)</visible>
<include>Animation_BottomSlide</include>
<depth>DepthOSD</depth>
<zorder>0</zorder>
<controls>
<include>PVRChannelNumberInput</include>
<control type="image">
<visible>Window.IsActive(videoosd)</visible>
<bottom>140</bottom>
<right>20</right>
<width>300</width>
<texture>$INFO[Player.Art(clearart)]</texture>
<aspectratio aligny="bottom" align="center">keep</aspectratio>
</control>
<control type="group">
<animation effect="slide" start="0,200" end="0,0" time="300" tween="cubic" easing="out">VisibleChange</animation>
<visible>Player.ShowInfo | Window.IsActive(fullscreeninfo) | Player.ShowTime | Window.IsActive(videoosd) | Window.IsActive(musicosd) | Window.IsActive(playerprocessinfo) | !String.IsEmpty(PVR.ChannelNumberInput) | Window.IsActive(pvrosdchannels) | Window.IsActive(pvrchannelguide) | ![!String.IsEmpty(Player.SeekNumeric) | Player.Seeking | Player.DisplayAfterSeek | Player.Forwarding | Player.Rewinding | Player.Paused]</visible>
<visible>!Player.HasGame</visible>
<bottom>0</bottom>
<height>190</height>
<control type="image">
<left>-40</left>
<width>120%</width>
<height>200</height>
<texture flipy="true">frame/osdfade.png</texture>
</control>

So immediatley after <include>PVRChannelNumberInput</include> and before the first group
Okay thanks, it is too big, how can I change that ? Image
Noooooooooooooooooooooo

Just use what I've posted as it is, don't add to it
(2021-03-03, 16:39)jjd-uk Wrote: [ -> ]Noooooooooooooooooooooo

Just use what I've posted as it is, don't add to it

Yes just saw your post, I just edited mine
Play with the <width>300</width> decrease it until you get the size you want.

<control type="image">
<visible>Window.IsActive(videoosd)</visible>
<bottom>140</bottom>
<right>20</right>
<width>300</width>
<texture>$INFO[Player.Art(clearart)]</texture>
<aspectratio aligny="bottom" align="center">keep</aspectratio>
</control>
(2021-03-03, 16:42)jjd-uk Wrote: [ -> ]Play with the <width>300</width> decrease it until you get the size you want.

Thanks ! Can I also play with <right>20</right> ? Also can I change bottom from 140 to 120 ?
Pages: 1 2