Kodi Community Forum

Full Version: seat volkswagen skin MIB based on Eminence2
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
I’m new to Kodi. I’m planing to run Kodi on tablets in the car for the kids. I've copied the look and feel of the car’s OEM radio to make Kodi look like the OEM GUI of the radio. It’s a SEAT/Volkswagen. My skin is based on eminence2.  

oem Volkswagen:
Image

For days I’m trying to solve a problem with the main menu of the home screen.

I use buttons with an horizontal layout. When I hover over the buttons they change in size and get highlighted. So far so good.

I also want to display a shadow at the bottom of the buttons when they are focused. Since the shadow has a width of 420 px and the button 190 px I have to change the position auf the shadow to left=„-110“ relative to the button.

The problem is that the shadow is cut off on the left side. Kodi would not display it cause it is out of the itemlayout (left=„-110“).

ImageImage

So I tried the other way around and moved the buttons within the itemlayout to the right +110 px and the shadow to pixel 0.
Now I see the full shadow, cause it is in the itemlayout. BUT: Moving the buttons to the right, doesn’t move the focus of the button to the right. The focus still starts at pixel 0, but should start at pixel 110.

So either I need an idea on how to display the missing part of the shadow-image left out of the itemlayout or a way to shift the focus of the focusedlayout to the right.

Hopefully the pictures are more conclusive. Wink

xml-code
    <include name="Home_Menu">
        <control type="group">
            <!-- Backing Bar -->
            <include condition="!String.IsEqual(Skin.String(home.style),$LOCALIZE[31181])">Home_Menu_BG_Big</include>
            <include condition="String.IsEqual(Skin.String(home.style),$LOCALIZE[31181])">Home_Menu_BG_Small</include>

            <!-- Main list -->
            <control type="panel" id="9000">
                <animation effect="slide" end="0,160" condition="String.IsEqual(Skin.String(home.style),$LOCALIZE[31182])">Conditional</animation>
                <animation effect="slide" end="94" condition="!Integer.IsGreater(Container(9000).NumItems,0)">Conditional</animation>
                <animation effect="slide" end="94" condition="!Integer.IsGreater(Container(9000).NumItems,1)">Conditional</animation>
                <animation effect="slide" end="94" condition="!Integer.IsGreater(Container(9000).NumItems,2)">Conditional</animation>
                <animation effect="slide" end="94" condition="!Integer.IsGreater(Container(9000).NumItems,3)">Conditional</animation>
                <animation effect="slide" end="94" condition="!Integer.IsGreater(Container(9000).NumItems,4)">Conditional</animation>
                <animation effect="slide" end="94" condition="!Integer.IsGreater(Container(9000).NumItems,5)">Conditional</animation>
                <animation effect="slide" end="94" condition="!Integer.IsGreater(Container(9000).NumItems,6)">Conditional</animation>
                <animation effect="slide" end="94" condition="!Integer.IsGreater(Container(9000).NumItems,7)">Conditional</animation>
                <animation effect="slide" end="94" condition="!Integer.IsGreater(Container(9000).NumItems,8)">Conditional</animation>
                <animation effect="slide" end="94" condition="!Integer.IsGreater(Container(9000).NumItems,9)">Conditional</animation>
                <left>0</left>
                <right>0</right>
                <bottom>350</bottom>
                <height>266</height>
                <onfocus>SetProperty(MenuFocus,9000,Home)</onfocus>

                <onup condition="[Skin.HasSetting(home.disableplayercontrols) | !Player.HasMedia] + !Window.IsVisible(PlayerControls.xml)">SetProperty(FO9001,1,home)</onup>
                <onup condition="[Skin.HasSetting(home.disableplayercontrols) | !Player.HasMedia] + !Window.IsVisible(PlayerControls.xml) + [[!String.IsEmpty(Container(9000).ListItem.Property(widget)) + !String.IsEqual(Container(9000).ListItem.Property(widgetTarget),pictures)] | [String.IsEmpty(Container(9000).ListItem.Property(widget)) + !String.IsEqual(Skin.String(home.fallbackwidget.target),pictures)]]">9001</onup>
                <onup condition="Player.HasMedia + !Window.IsVisible(PlayerControls.xml) + !Skin.HasSetting(home.disableplayercontrols)">9005</onup>
                <ondown condition="Integer.IsGreater(Container(9002).NumItems,0) + !Window.IsVisible(PlayerControls.xml)">9002</ondown>
                <ondown condition="!Integer.IsGreater(Container(9002).NumItems,0) + !Window.IsVisible(PlayerControls.xml) + !Skin.HasSetting(DisableShowcase)">ActivateWindow(1131)</ondown>
                <animation type="Visible">
                    <effect type="slide" start="0,266" end="0" time="150" />
                </animation>
                <orientation>horizontal</orientation>
                <scrolltime tween="sine" easing="out">240</scrolltime>
                
                <focusposition>0</focusposition>
                <!-- Default Home -->
                <itemlayout width="206" height="266" condition="!String.IsEqual(Skin.String(home.style),$LOCALIZE[31181]) + !String.IsEqual(Skin.String(home.style),$LOCALIZE[31182])">
                    <control type="image">
                        <top>24</top>
                        <left>6</left>
                        <width>190</width>
                        <height>158</height>
                        <texture colordiffuse="HomeBarTile">common/tile3.png</texture>
                        <aspectratio>stretch</aspectratio>
                        <visible>String.IsEmpty(ListItem.Property(tilecolor)) | !Skin.HasSetting(home.tilecolor.nofocus) | !Skin.HasSetting(home.tilecolor)</visible>
                    </control>
                    <control type="image">
                        <top>24</top>
                        <left>6</left>
                        <width>190</width>
                        <height>158</height>
                        <animation effect="fade" start="100" end="25" condition="true">Conditional</animation>
                        <texture colordiffuse="HomeBarFG" diffuse="common/tile.png">special://skin/extras/colors/$INFO[ListItem.Property(tilecolor)].png</texture>
                        <aspectratio scalediffuse="false">stretch</aspectratio>
                        <visible>!String.IsEmpty(ListItem.Property(tilecolor)) + Skin.HasSetting(home.tilecolor.nofocus) + Skin.HasSetting(home.tilecolor)</visible>
                    </control>
                    <control type="image">
                        <top>16</top>
                        <left>6</left>
                        <width>190</width>
                        <height>158</height>
                        <texture>$INFO[ListItem.Icon]</texture>
                        <aspectratio scalediffuse="false">center</aspectratio>
                        <animation effect="fade" start="50" end="50" condition="true">Conditional</animation>
                    </control>
                    <control type="label">
                        <top>180</top>
                        <left>6</left>
                        <height>78</height>
                        <width>190</width>
                        <align>center</align>
                        <aligny>center</aligny>
                        <font>Font-HomeMenu</font>
                        <textcolor>HomeBarFG</textcolor>
                        <label>$INFO[ListItem.Label]</label>
                        <animation effect="fade" start="50" end="50" condition="true">Conditional</animation>
                    </control>
                    <control type="image">
                        <top>24</top>
                        <left>7</left>
                        <width>190</width>
                        <height>4</height>
                        <texture colordiffuse="$VAR[Defs_HomeTileColor]">common/white.png</texture>
                        <aspectratio>scale</aspectratio>
                    </control>
                    <control type="image">
                        <top>155</top>
                        <left>7</left>
                        <width>190</width>
                        <height>3</height>
                        <texture colordiffuse="3e000000">common/white.png</texture>
                        <texture>common/white.png</texture>
                        <aspectratio>scale</aspectratio>
                    </control>
                </itemlayout>
                <focusedlayout width="206" height="266" condition="!String.IsEqual(Skin.String(home.style),$LOCALIZE[31181]) + !String.IsEqual(Skin.String(home.style),$LOCALIZE[31182])">
                    <focusposition>-110</focusposition>
                    <control type="image">
                        <top>170</top>
                        <left>-110</left>
                        <width>420</width>
                        <height>65</height>
                        <texture colordiffuse="tile-framed">common/shadow.png</texture>
                        <aspectratio>stretch</aspectratio>
                    </control>
                    <control type="image">
                        <top>15</top>
                        <left>0</left>
                        <width>214</width>
                        <height>178</height>
                        <texture colordiffuse="tile-framed">common/tile3.png</texture>
                        <aspectratio>stretch</aspectratio>
                    </control>
                    <control type="image">
                        <top>28</top>
                        <left>26</left>
                        <width>150</width>
                        <height>126</height>
                        <texture colordiffuse="tile-framed">$INFO[ListItem.Icon]</texture>
                        <aspectratio scalediffuse="false">scale</aspectratio>
                    </control>
                    <control type="label">
                        <top>180</top>
                        <left>6</left>
                        <height>78</height>
                        <width>190</width>
                        <align>center</align>
                        <aligny>center</aligny>
                        <font>Font-HomeMenu-Zoom</font>
                        <textcolor>HomeBarFG</textcolor>
                        <label>$INFO[ListItem.Label]</label>
                        <animation effect="slide" start="0" end="0,0" time="100" reversible="false">Focus</animation>
                    </control>
                    <control type="image">
                        <top>15</top>
                        <left>0</left>
                        <width>213</width>
                        <height>4</height>
                        <texture colordiffuse="Highlight2">common/white.png</texture>
                        <aspectratio>scale</aspectratio>
                    </control>
                    <control type="image">
                        <top>155</top>
                        <left>0</left>
                        <width>213</width>
                        <height>3</height>
                        <texture>common/white.png</texture>
                        <aspectratio>scale</aspectratio>
                    </control>
                </focusedlayout>
             
                <content>
                    <include>skinshortcuts-mainmenu</include>
                </content>
            </control>
(2019-07-02, 22:17)drheiser Wrote: [ -> ]xml-code
Kindly use https://paste.kodi.tv or similar paste websites next time for providing longer text files.
To make it more simple.
I have an <itemlayout width="206" height="266"> to display mainmenu items. It contains a button-image, a label and an icon.
The <focusedlayout width="206" height="266"> highlights the button. It changes the size of the image and the icon. Furthermore it adds a shine under the focused button that is much wider than the image itself. The problem is that the shine of the first item is cutoff on the left, 'cause it's relative x-position is negative (-110). To avoid that I could move the items by 110 pixels to the right. So the shine would start at 0 instead of -110. But If I do so, the focus doesn't move to the right. It will alway begin at pixel 0, so If you hover over the items the next one will by highlighted 110 pixel before. 
Any hints?
Just place the shadow completely outside your panel and adjust its position with animations. As conditions and animation trigger for conditional animations you should play with Container(id).HasFocus(item_number) and Container(id).OnNext / Container(id).OnPrevious Info Bools.

No ready solution, but in theory it should work Wink

Cheers Louis