2019-07-02, 22:17
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:
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“).
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.
xml-code
oem Volkswagen:
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“).
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.
xml-code
xml:<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>