Login at Kodi Home

edjalmo · 2019-08-17, 20:49

Hi, and sorry to bother again!
I tried make new views to Amber but without sucess, I don't have skin knowlegd to do this.
I will share here my mockups in the hope that someone make it in some future.
Ah, my mockups is not total original ideias, it's based on other skins with Amber elements. I can quote here Amber herself, Arctic Zephyr: 2, Aeon Nox SILVO and Estuary.

This first one is base on previus BigList. I don't did the not-selectd episodes, but they will exist in the same way as selecte one. I thought in three diferent selections for this:
one: this way as in the image;
two: just a frame around;
three: just a frame around the image.
I like all!
This view is to show only landscape images, so episodes thumbs and fanarts.
Something like this:

The other is this one:

I think you can implement an addition for this view: add an button with an option to show discart, in the case users have scraped discart images, so:

These views are not meant to replace any current ones, they are new.

Thanks!

**bsoriano** · 2019-08-19, 16:32

(2019-08-17, 20:49)edjalmo Wrote: Hi, and sorry to bother again!
I tried make new views to Amber but without sucess, I don't have skin knowlegd to do this.
I will share here my mockups in the hope that someone make it in some future.
Ah, my mockups is not total original ideias, it's based on other skins with Amber elements. I can quote here Amber herself, Arctic Zephyr: 2, Aeon Nox SILVO and Estuary.

This first one is base on previus BigList. I don't did the not-selectd episodes, but they will exist in the same way as selecte one. I thought in three diferent selections for this:
one: this way as in the image;
two: just a frame around;
three: just a frame around the image.
I like all!
This view is to show only landscape images, so episodes thumbs and fanarts.
Something like this:

The other is this one:

I think you can implement an addition for this view: add an button with an option to show discart, in the case users have scraped discart images, so:

These views are not meant to replace any current ones, they are new.

Thanks!

@edjalmo, thank you for your ideas and mock-ups! I like both ideas, although I am not sure I will (myself) implement either of them. Would it be possible for you to mock-up how you envision Movies, seasons, tv shows, music videos, artists, albums, songs and sets in the first view, and to do the same for episodes, music videos and songs for the second view? That way I can better gauge the level of difficulty for me to create these new views and better evaluate if I will take this on or not. Thanks!

Regards,

Bart

edjalmo · 2019-08-19, 19:12

(2019-08-19, 16:32)bsoriano Wrote: @edjalmo, thank you for your ideas and mock-ups! I like both ideas, although I am not sure I will (myself) implement either of them. Would it be possible for you to mock-up how you envision Movies, seasons, tv shows, music videos, artists, albums, songs and sets in the first view, and to do the same for episodes, music videos and songs for the second view? That way I can better gauge the level of difficulty for me to create these new views and better evaluate if I will take this on or not. Thanks!

Regards,

Bart

After you said that, I think the best way for show this in first view is not only show landscape images but show poster too, as this view previously showed. Thinking more this is even better because with only landscape images the season images will be all the same (with posters not). You can use fanart for movies, since they are different for each (I think is nice this way). So, it's basically the old BigList but centralized, with a higher height (so more space for image and text too) and a few more changes (change position of view mark and text with duration of video/number of seasons/episodes/rating).

About the second one, I think this view is only best for movies, tv show and seasons. I think is best hide it for the rest (this view is kinda based on Estuary's Poster view, and there they hide it as I'm suggesting).

the_other_guy · 2019-08-20, 05:20

as a example of what is needed for the first one this is on estuary

xml:
<?xml version="1.0" encoding="UTF-8"?>

<includes>

    <include name="View_505_List">

        <control type="group">

            <include>OpenClose_Right</include>

            <visible>Control.IsVisible(505)</visible>

            <control type="image">

                            <left>0</left>

                            <top>95%</top>

                            <width>100%</width>

                            <height>100%</height>

                            <texture>lists/space.png</texture>

                            

                        </control>

                        <control type="group">

            <control type="image">

                            <left>900</left>

                            <top>20</top>

                            <width>400</width>

                            <height>155</height>

                            <texture >$INFO[ListItem.Art(clearlogo)]</texture>

                            <aspectratio aligny="center">scale</aspectratio>

                        </control>

                        <control type="image">

                            <left>400</left>

                            <top>20</top>

                            <width>500</width>

                            <height>100</height>

                            <texture >$VAR[BannerVar]</texture>

                            <aspectratio aligny="center">scale</aspectratio>

                            <visible>String.IsEmpty(ListItem.Art(BannerArt))</visible>

                        </control>

                        

                        <control type="image">

                            <left>1550</left>

                            <top>20</top>

                            <width>230</width>

                            <height>230</height>

                            <texture  >$VAR[characterartVar]</texture>

                            <aspectratio aligny="center">scale</aspectratio>

                        </control>

                        <control type="image">

                            <left>1240</left>

                            <top>20</top>

                            <width>400</width>

                            <height>225</height>

                            <texture >$VAR[clearartVar]</texture>

                            <aspectratio aligny="center">scale</aspectratio>

                        </control>

                    

                        

                        </control>

            <control type="fixedlist" id="505">

                <left>40</left>

                <top>60</top>

                <height>90%</height>

                <top>list_y_offset</top>

                <bottom>list_y_offset</bottom>

                <right>0</right>

                <scrolltime tween="cubic" easing="out">500</scrolltime>

                <!-- <orientation>vertical</orientation> -->

                <pagecontrol>531</pagecontrol>

                <movement>5</movement>

                <focusposition>6</focusposition>

                <onleft>9000</onleft>

                <onright>531</onright>

                <onup>55</onup>

                <ondown>55</ondown>

                <viewtype label="$LOCALIZE[31107]">list</viewtype>

                <focusedlayout height="200" condition="Container.Content(tvshows) | Container.Content(seasons) | Container.Content(episodes) | Container.Content(movies) | Container.Content(musicvideos) | Container.Content(videos) | Container.Content(games)">

                    <control type="image">

                        <left>0</left>

                        <right>0</right>

                        <bottom>0</bottom>

                        <!-- <height>150</height> -->

                        <texture colordiffuse="ff000000">lists/focus.png</texture>

                        <bordertexture border="15">overlays/shadow.png</bordertexture>

                <bordersize>10</bordersize>

                        <visible>Control.HasFocus(505)</visible>

                    </control>

                                

                        

                    <control type="image">

                        <left>35</left>

                        <centertop>50%</centertop>

                        <width>32</width>

                        <height>32</height>

                        <texture>$VAR[ListWatchedIconVar]</texture>

                    </control>

                    <control type="group">

                    <control type="image">

                            <left>105</left>

                            <top>10</top>

                            <width>125</width>

                            <height>180</height>

                                <texture fallback="DefaultStudios.png">$INFO[ListItem.Icon]</texture>

                            <aspectratio aligny="center">scale</aspectratio>

                        </control>

                        <control type="image">

                            <left>230</left>

                            <top>0</top>

                            <width>10</width>

                            <height>200</height>

                            <texture>lists/space.png</texture>

                            

                        </control>

                        

                        <!-- <control type="image"> -->

                            <!-- <left>540</left> -->

                            <!-- <top>0</top> -->

                            <!-- <width>10</width> -->

                            <!-- <height>200</height> -->

                            <!-- <texture>lists/space.png</texture> -->

                            

                        <!-- </control> -->

                        <control type="textbox">

                        <left>250</left>

                        <top>5</top>

                        <width>500</width>

                        <height>180</height>

                        <label >$INFO[ListItem.Title] [CR]$INFO[ListItem.Plot]</label>

                        <autoscroll delay="10000" time="5000" repeat="10000"></autoscroll>

                        <font>font12</font>

                    </control>

                    <control type="image">

                            <left>750</left>

                            <top>0</top>

                            <width>10</width>

                            <height>200</height>

                            <texture>lists/space.png</texture>

                            </control>

                            <control type="textbox">

                        <left>760</left>

                        <top>5</top>

                        <width>200</width>

                        <height>160</height>

                        <label >Genre [CR] $INFO[ListItem.Genre]</label>

                        <autoscroll delay="10000" time="5000" repeat="10000">Skin.HasSetting(AutoScroll)</autoscroll>

                        <font>font12</font>

                    </control>

                    <control type="image">

                            <left>960</left>

                            <top>0</top>

                            <width>10</width>

                            <height>200</height>

                            <texture>lists/space.png</texture>

                            </control>

                            <control type="textbox">

                        <left>970</left>

                        <top>5</top>

                        <width>200</width>

                        <height>160</height>

                        <label >Cast [CR] $INFO[ListItem.Cast]</label>

                        <autoscroll delay="10000" time="5000" repeat="10000">Skin.HasSetting(AutoScroll)</autoscroll>

                        <font>font12</font>

                    </control>

                    <control type="image">

                            <left>1170</left>

                            <top>0</top>

                            <width>10</width>

                            <height>200</height>

                            <texture>lists/space.png</texture>

                            </control>

                                <control type="textbox">

                        <left>1180</left>

                        <top>5</top>

                        <width>200</width>

                        <height>160</height>

                        <label >Director [CR] $INFO[ListItem.Director]</label>

                        <autoscroll delay="10000" time="5000" repeat="10000">Skin.HasSetting(AutoScroll)</autoscroll>

                        <font>font12</font>

                    </control>

                    <control type="image">

                            <left>1390</left>

                            <top>0</top>

                            <width>10</width>

                            <height>200</height>

                            <texture>lists/space.png</texture>

                            </control>

                                <control type="textbox">

                        <left>1400</left>

                        <top>5</top>

                        <width>300</width>

                        <height>160</height>

                        <label >Writer [CR] $INFO[ListItem.Writer]</label>

                        <autoscroll delay="10000" time="5000" repeat="10000">Skin.HasSetting(AutoScroll)</autoscroll>

                        <font>font12</font>

                    </control>

                    <control type="image">

                            <left>1700</left>

                            <top>0</top>

                            <width>10</width>

                            <height>200</height>

                            <texture>lists/space.png</texture>

                            </control>

                    <!-- <contro

l type="textbox"> -->

                            <!-- <left>200</left> -->

                            <!-- <top>20</top> -->

                                <!-- <width>50%</width> -->

                                <!-- <height>150</height> -->

                            <!-- <autoscroll time="3000" delay="7000" repeat="5000">!System.HasActiveModalDialog + Skin.HasSetting(AutoScroll)</autoscroll> -->

                            <!-- <label>$VAR[ShiftRightTextBoxVar]</label> -->

                            <!-- <shadowcolor>black</shadowcolor> -->

                            <!-- <font>font12</font> -->

                        <!-- </control> -->

                    <control type="label">

                        <left>105</left>

                        <top>0</top>

                        <bottom>0</bottom>

                        <right>40</right>

                        <align>right</align>

                        <aligny>center</aligny>

                        <label>$VAR[ListLabel2Var]</label>

                        <font>font37</font>

                        <shadowcolor>text_shadow</shadowcolor>

                    </control></control>

                </focusedlayout>

                <itemlayout height="200" condition="Container.Content(tvshows) | Container.Content(seasons) | Container.Content(episodes) | Container.Content(movies) | Container.Content(musicvideos) | Container.Content(videos) | Container.Content(games)">

                    <control type="image">

                        <left>35</left>

                        <centertop>50%</centertop>

                        <width>32</width>

                        <height>32</height>

                        <texture colordiffuse="grey">$VAR[ListWatchedIconVar]</texture>

                    </control>

                    <control type="image">

                            <left>105</left>

                            <top>10</top>

                            <width>125</width>

                            <height>180</height>

                            <texture fallback="DefaultStudios.png">$INFO[ListItem.Icon]</texture>

                            <aspectratio aligny="center">scale</aspectratio>

                        </control>

                        <control type="image">

                            <left>230</left>

                            <top>10</top>

                            <width>10</width>

                            <height>200</height>

                            <texture>lists/space.png</texture>

                            

                        </control>

                    <!-- <control type="label"> -->

                        <!-- <left>105</left> -->

                        <!-- <top>0</top> -->

                        <!-- <bottom>0</bottom> -->

                        <!-- <right>40</right> -->

                        <!-- <aligny>center</aligny> -->

                        <!-- <font>font13</font> -->

                        <!-- <label>$INFO[ListItem.Label]</label> -->

                        <!-- <shadowcolor>text_shadow</shadowcolor> -->

                        <!-- <visible>String.IsEmpty(ListItem.Art(clearlogo))</visible> -->

                    <!-- </control> -->

                    <control type="label">

                        <left>105</left>

                        <top>0</top>

                        <bottom>0</bottom>

                        <right>40</right>

                        <align>right</align>

                        <aligny>center</aligny>

                        <font>font13</font>

                        <label>$VAR[ListLabel2Var]</label>

                        <shadowcolor>text_shadow</shadowcolor>

                    </control>

                </itemlayout>

                <focusedlayout height="200" condition="!Container.Content(songs) + !Container.Content(addons) + !Container.Content(playlists) + !Container.Content() + !Container.Content(tvshows) + !Container.Content(seasons) + !Container.Content(episodes) + !Container.Content(movies) + !Container.Content(musicvideos) + !Container.Content(videos)">

                    <control type="image">

                        <left>0</left>

                        <right>0</right>

                        <bottom>0</bottom>

                        <texture colordiffuse="button_focus">lists/focus.png</texture>

                        <visible>Control.HasFocus(55)</visible>

                    </control>

                    <control type="image">

                        <left>35</left>

                        <centertop>50%</centertop>

                        <width>32</width>

                        <height>32</height>

                        <texture>$VAR[ListWatchedIconVar]</texture>

                    </control>

                    <!-- <control type="image"> -->

                            <!-- <left>105</left> -->

                            <!-- <top>0</top> -->

                            <!-- <width>520</width> -->

                            <!-- <height>93</height> -->

                            <!-- <texture>$VAR[BannerArtVar]</texture> -->

                            <!-- <aspectratio aligny="center">scale</aspectratio> -->

                        <!-- </control> -->

                    <control type="label">

                        <left>105</left>

                        <top>0</top>

                        <bottom>0</bottom>

                        <right>40</right>

                        <aligny>center</aligny>

                        <scroll>true</scroll>

                        <font>font13</font>

                        <label>$INFO[ListItem.Label]</label>

                        <shadowcolor>text_shadow</shadowcolor>

                    </control>

                    <control type="label">

                        <left>105</left>

                        <top>0</top>

                        <bottom>0</bottom>

                        <right>40</right>

                        <align>right</align>

                        <aligny>center</aligny>

                        <font>font13</font>

                        <label>$VAR[ListLabel2Var]</label>

                        <shadowcolor>text_shadow</shadowcolor>

                    </control>

                </focusedlayout>

                <itemlayout height="200" condition="!Container.Content(songs) + !Container.Content(addons) + !Container.Content(playlists) + !Container.Content() + !Container.Content(tvshows) + !Container.Content(seasons) + !Container.Content(episodes) + !Container.Content(movies) + !Container.Content(musicvideos) + !Container.Content(videos)">

                    <control type="image">

                        <left>35</left>

                        <centertop>50%</centertop>

                        <width>32</width>

                        <height>32</height>

                        <texture colordiffuse="grey">$VAR[ListWatchedIconVar]</texture>

                    </control>

                    <control type="label">

                        <left>105</left>

                        <top>0</top>

                        <bottom>0</bottom>

                        <right>40</right>

                        <aligny>center</aligny>

                        <font>font13</font>

                        <label>$INFO[ListItem.Label]</label>

                        <shadowcolor>text_shadow</shadowcolor>

                    </control>

                    <control type="label">

                        <left>105</left>

                        <top>0</top>

                        <bottom>0</bottom>

                        <right>40</right>

                        <align>right</align>

                        <aligny>center</aligny>

                        <font>font13</font>

                        <label>$VAR[ListLabel2Var]</label>

                        <shadowcolor>text_shadow</shadowcolor>

                    </control>

                </itemlayout>



                <focusedlayout height="list_item_height" condition="Container.Content(playlists) | Container.Content()">

                    <control type="image">

                        <left>0</left>

                        <right>0</right>

                        <bottom>0</bottom>

                        <texture colordiffuse="button_focus">lists/focus.png</texture>

                        <visible>Control.HasFocus(505)</visible>

                    </control>

                    <control type="image">

                        <left>20</left>

                        <top>10</top>

                        <width>60</width>

                        <bottom>10</bottom>

                        <aspectratio>keep</aspectratio>

                        <texture>$INFO[ListItem.Icon]</texture>

                    </control>

                    <control type="label">

                        <left>105</left>

                        <top>0</top>

                        <bottom>0</bottom>

                        <right>100</right>

                        <aligny>center</aligny>

                        <scroll>true</scroll>

                        <font>font13</font>

                    <label>$INFO[ListItem.Label]</label>

                        <shadowcolor>text_shadow</shadowcolor>

                    </control>

                </focusedlayout>

                <itemlayout height="list_item_height" condition="Container.Content(playlists) | Container.Content()">

                    <control type="image">

                        <left>20</left>

                        <top>10</top>

                        <width>60</width>

                        <bottom>10</bottom>

                        <aspectratio>keep</aspectratio>

                        <texture colordiffuse="grey">$INFO[ListItem.Icon]</texture>

                    </control>

                    <control type="label">

                        <left>105</left>

                        <top>0</top>

                        <bottom>0</bottom>

                        <right>100</right>

                        <aligny>center</aligny>

                        <font>font13</font>

                        <label>$INFO[ListItem.Label]</label>

                        <shadowcolor>text_shadow</shadowcolor>

                    </control>

                </itemlayout>

                <include condition="Window.IsActive(music)">SongsListLayout</include>

                <include>AddonsListLayout</include>

            </control>

        </control>

    </include>

    <include name="SongsListLayout">

        <focusedlayout height="80" condition="Container.Content(songs)">

            <control type="image">

                <left>0</left>

                <right>0</right>

                <height>80</height>

                <texture colordiffuse="button_focus">lists/focus.png</texture>

                <visible>Control.hasFocus(55)</visible>

            </control>

            <control type="label">

                <left>35</left>

                <height>80</height>

                <right>40</right>

                <aligny>center</aligny>

                <scroll>true</scroll>

                <font>font37</font>

                <label>$INFO[ListItem.Label]</label>

                <shadowcolor>text_shadow</shadowcolor>

            </control>

            <control type="label">

                <left>35</left>

                <height>80</height>

                <right>40</right>

                <align>right</align>

                <aligny>center</aligny>

            <font>font37</font>

                <label>$INFO[ListItem.Label2]</label>

                <shadowcolor>text_shadow</shadowcolor>

            </control>

        </focusedlayout>

        <itemlayout height="80" condition="Container.Content(songs)">

            <control type="label">

                <left>35</left>

                <height>80</height>

                <right>40</right>

                <aligny>center</aligny>

                <label>$INFO[ListItem.Label]</label>

                <shadowcolor>text_shadow</shadowcolor>

            </control>

            <control type="label">

                <left>35</left>

                <height>80</height>

                <right>40</right>

                <align>right</align>

                <aligny>center</aligny>

                <font>font13</font>

                <label>$INFO[ListItem.Label2]</label>

                <textcolor>grey</textcolor>

                <shadowcolor>text_shadow</shadowcolor>

            </control>

        </itemlayout>

    </include>

    <include name="AddonsListLayout">

    

        <focusedlayout height="80" condition="Container.Content(addons)">

            <control type="image">

                <left>0</left>

                <right>0</right>

                <height>80</height>

                <texture colordiffuse="button_focus">lists/focus.png</texture>

                <visible>Control.hasFocus(55)</visible>

            </control>

            <control type="image">

                <left>20</left>

                <top>25</top>

                <width>32</width>

                <height>32</height>

                <texture>$VAR[AddonsListIconVar]</texture>

            </control>

            <control type="label">

                <left>75</left>

                <height>80</height>

                <right>40</right>

                <aligny>center</aligny>

                <scroll>true</scroll>

                <font>font13</font>

                <label>$INFO[ListItem.Label]</label>

            </control>

            <control type="label">

                <left>75</left>

                <height>80</height>

                <right>40</right>

                <align>right</align>

                <aligny>center</aligny>

                <font>font13</font>

                <label>$VAR[AddonsLabel2Var]</label>

            </control>

        </focusedlayout>

        <itemlayout height="80" condition="Container.Content(addons)">

            <control type="image">

                <left>20</left>

                <top>25</top>

                <width>32</width>

                <height>32</height>

                <texture>$VAR[AddonsListIconVar]</texture>

            </control>

            <control type="label">

                <left>75</left>

                <height>80</height>

                <right>40</right>

                <aligny>center</aligny>

                <scroll>true</scroll>

                <label>$INFO[ListItem.Label]</label>

            </control>

            

            <control type="label">

                <left>75</left>

                <height>80</height>

                <right>40</right>

                <align>right</align>

                <aligny>center</aligny>

            <font>font13</font>

                <label>$VAR[AddonsLabel2Var]</label>

                <textcolor>grey</textcolor>

                <shadowcolor>text_shadow</shadowcolor>

            </control>

        </itemlayout>

        

    </include>

</includes>

edjalmo · 2019-08-20, 16:34

Thanks, @the_other_guy! But what I image is more easy, I just want to show the main informations (if users wish more they can see in video info page). So, just an image, title, plot, duration (in case of tv show/season/movie: number of episodes and unwatched and rating) and a mark indicating if it was watched or not.
This is the old code of this view: https://github.com/jester-xbmc/skin.ambe...igList.xml

edjalmo · 2019-08-22, 19:43

I'm trying make this view myself (currently only for episodes), but I don't know how align the not focused objects.
I can align the not focused plot, title, info,but I can not define the height of the space these things are in, the same for the separete line (WhiteRoundedST2.png), so all not focused get messed up.
I can choose the height of the select by this lines:

xml:


<control type="image">

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

        <top>0</top>

        <left>100</left>

        <width>1700</width>

        <height>252</height>

        <texture border="4" colordiffuse="Highlight">img/WhiteRoundedST2.png</texture>

        <animation effect="fade" start="100" end="50" time="100" condition="!Control.HasFocus(52)">Conditional</animation>

      </control>

But how I do this for the not focused?
Can someone help?
This is the current code: https://pastebin.com/t20SmUZyI

**bsoriano** · 2019-08-22, 23:07

(2019-08-22, 19:43)edjalmo Wrote: I'm trying make this view myself (currently only for episodes), but I don't know how align the not focused objects.
I can align the not focused plot, title, info,but I can not define the height of the space these things are in, the same for the separete line (WhiteRoundedST2.png), so all not focused get messed up.
I can choose the height of the select by this lines:
xml:


<control type="image">

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

        <top>0</top>

        <left>100</left>

        <width>1700</width>

        <height>252</height>

        <texture border="4" colordiffuse="Highlight">img/WhiteRoundedST2.png</texture>

        <animation effect="fade" start="100" end="50" time="100" condition="!Control.HasFocus(52)">Conditional</animation>

      </control>
But how I do this for the not focused?
Can someone help?
This is the current code: https://pastebin.com/t20SmUZyI

@edjalmo , it seems the pastebin address is no longer valid.

For lists, what defines the height of each list item is the attribute "height" of the <itemlayout> (for non-focused) and <focusedlayout> (for focused). So for example:

xml:


<itemlayout condition="Container.Content(episodes)" height="72" width="1210">

                <control type="image" description="BG">

                    <posy>0</posy>

                    <posx>580</posx>

                    <width>670</width>

                    <height>72</height>

                    <texture flipy="true" border="3">list/ListNF.png</texture>

                </control>

                <control type="label" description="Main Label">

                    <posx>589</posx>

                    <height>72</height>

                    <width>600</width>

                    <scroll>false</scroll>

                    <textoffsetx>16</textoffsetx>

                    <font>ListDetails</font>

                    <label>$VAR[MediaListLabel]</label>

                </control>

            </itemlayout>

            <focusedlayout condition="Container.Content(episodes)" height="72" width="1210">

                <control type="image" description="BG">

                    <posx>589</posx>

                    <posy>0</posy>

                    <height>72</height>

                    <width>670</width>

                    <texture border="4" colordiffuse="Highlight">img/WhiteRoundedST2.png</texture>

                    <animation effect="fade" start="100" end="50" time="100" condition="!Control.HasFocus(52)">Conditional</animation>

                </control>

                <control type="label" description="Main Label">

                    <posx>589</posx>

                    <height>72</height>

                    <width>600</width>

                    <scroll>false</scroll>

                    <textoffsetx>16</textoffsetx>

                    <textcolor>Black</textcolor>

                    <selectedcolor>Black</selectedcolor>

                    <shadowcolor></shadowcolor>

                    <font>ListDetails</font>

                    <label>$VAR[MediaListLabel]</label>

                </control>

            </focusedlayout>

In that code excerpt, the item height is 72 pixels. As you can see, this is defined in the itemlayout and focusedlayout. The background image (img/ListNF.png for non-focused, and img/WhiteRoundedST2.png for focused) also has a height of 72, so that it covers the whole item.

Please let me know if this answers your question. Thanks.

This is very helpful: Skinning_Manual (wiki)

Regards,

Bart

edjalmo · (This post was last modified: 2019-08-23, 18:54 by edjalmo.)

(2019-08-22, 23:07)bsoriano Wrote:

(2019-08-22, 19:43)edjalmo Wrote: I'm trying make this view myself (currently only for episodes), but I don't know how align the not focused objects.
I can align the not focused plot, title, info,but I can not define the height of the space these things are in, the same for the separete line (WhiteRoundedST2.png), so all not focused get messed up.
I can choose the height of the select by this lines:
xml:


<control type="image">

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

        <top>0</top>

        <left>100</left>

        <width>1700</width>

        <height>252</height>

        <texture border="4" colordiffuse="Highlight">img/WhiteRoundedST2.png</texture>

        <animation effect="fade" start="100" end="50" time="100" condition="!Control.HasFocus(52)">Conditional</animation>

      </control>
But how I do this for the not focused?
Can someone help?
This is the current code: https://pastebin.com/t20SmUZyI

@edjalmo , it seems the pastebin address is no longer valid.

For lists, what defines the height of each list item is the attribute "height" of the <itemlayout> (for non-focused) and <focusedlayout> (for focused). So for example:

xml:


<itemlayout condition="Container.Content(episodes)" height="72" width="1210">

                <control type="image" description="BG">

                    <posy>0</posy>

                    <posx>580</posx>

                    <width>670</width>

                    <height>72</height>

                    <texture flipy="true" border="3">list/ListNF.png</texture>

                </control>

                <control type="label" description="Main Label">

                    <posx>589</posx>

                    <height>72</height>

                    <width>600</width>

                    <scroll>false</scroll>

                    <textoffsetx>16</textoffsetx>

                    <font>ListDetails</font>

                    <label>$VAR[MediaListLabel]</label>

                </control>

            </itemlayout>

            <focusedlayout condition="Container.Content(episodes)" height="72" width="1210">

                <control type="image" description="BG">

                    <posx>589</posx>

                    <posy>0</posy>

                    <height>72</height>

                    <width>670</width>

                    <texture border="4" colordiffuse="Highlight">img/WhiteRoundedST2.png</texture>

                    <animation effect="fade" start="100" end="50" time="100" condition="!Control.HasFocus(52)">Conditional</animation>

                </control>

                <control type="label" description="Main Label">

                    <posx>589</posx>

                    <height>72</height>

                    <width>600</width>

                    <scroll>false</scroll>

                    <textoffsetx>16</textoffsetx>

                    <textcolor>Black</textcolor>

                    <selectedcolor>Black</selectedcolor>

                    <shadowcolor></shadowcolor>

                    <font>ListDetails</font>

                    <label>$VAR[MediaListLabel]</label>

                </control>

            </focusedlayout>

In that code excerpt, the item height is 72 pixels. As you can see, this is defined in the itemlayout and focusedlayout. The background image (img/ListNF.png for non-focused, and img/WhiteRoundedST2.png for focused) also has a height of 72, so that it covers the whole item.

Please let me know if this answers your question. Thanks.

This is very helpful: Skinning_Manual (wiki)

Regards,

Bart

Thank you very much! Helped a lot!
Almost complete. Take a look:

The only problem is for old tv show episodes thumbs. They are not in same format as new. I tried adjust using <aspectratio scalediffuse="true">scale</aspectratio>, but I think I'm not using this right. How can I make all image have the same format for the watched mark be positioned correctly?

Can I increase the height of all page, for the last movie/season/episode don't get cutted?

The current code: https://pastebin.com/MH62vecy
Hope not be deleted this time

But have a thing I noticed now: I'm making these changes in amber32 (because I can't understand current Amber view codes), but when I put this view on current amber it didn't look a bit like my changes Rofl

**bsoriano** · 2019-08-23, 20:55

(2019-08-23, 18:52)edjalmo Wrote:

(2019-08-22, 23:07)bsoriano Wrote:

(2019-08-22, 19:43)edjalmo Wrote: I'm trying make this view myself (currently only for episodes), but I don't know how align the not focused objects.
I can align the not focused plot, title, info,but I can not define the height of the space these things are in, the same for the separete line (WhiteRoundedST2.png), so all not focused get messed up.
I can choose the height of the select by this lines:
xml:


<control type="image">

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

        <top>0</top>

        <left>100</left>

        <width>1700</width>

        <height>252</height>

        <texture border="4" colordiffuse="Highlight">img/WhiteRoundedST2.png</texture>

        <animation effect="fade" start="100" end="50" time="100" condition="!Control.HasFocus(52)">Conditional</animation>

      </control>
But how I do this for the not focused?
Can someone help?
This is the current code: https://pastebin.com/t20SmUZyI

@edjalmo , it seems the pastebin address is no longer valid.

For lists, what defines the height of each list item is the attribute "height" of the <itemlayout> (for non-focused) and <focusedlayout> (for focused). So for example:

xml:


<itemlayout condition="Container.Content(episodes)" height="72" width="1210">

                <control type="image" description="BG">

                    <posy>0</posy>

                    <posx>580</posx>

                    <width>670</width>

                    <height>72</height>

                    <texture flipy="true" border="3">list/ListNF.png</texture>

                </control>

                <control type="label" description="Main Label">

                    <posx>589</posx>

                    <height>72</height>

                    <width>600</width>

                    <scroll>false</scroll>

                    <textoffsetx>16</textoffsetx>

                    <font>ListDetails</font>

                    <label>$VAR[MediaListLabel]</label>

                </control>

            </itemlayout>

            <focusedlayout condition="Container.Content(episodes)" height="72" width="1210">

                <control type="image" description="BG">

                    <posx>589</posx>

                    <posy>0</posy>

                    <height>72</height>

                    <width>670</width>

                    <texture border="4" colordiffuse="Highlight">img/WhiteRoundedST2.png</texture>

                    <animation effect="fade" start="100" end="50" time="100" condition="!Control.HasFocus(52)">Conditional</animation>

                </control>

                <control type="label" description="Main Label">

                    <posx>589</posx>

                    <height>72</height>

                    <width>600</width>

                    <scroll>false</scroll>

                    <textoffsetx>16</textoffsetx>

                    <textcolor>Black</textcolor>

                    <selectedcolor>Black</selectedcolor>

                    <shadowcolor></shadowcolor>

                    <font>ListDetails</font>

                    <label>$VAR[MediaListLabel]</label>

                </control>

            </focusedlayout>

In that code excerpt, the item height is 72 pixels. As you can see, this is defined in the itemlayout and focusedlayout. The background image (img/ListNF.png for non-focused, and img/WhiteRoundedST2.png for focused) also has a height of 72, so that it covers the whole item.

Please let me know if this answers your question. Thanks.

This is very helpful: Skinning_Manual (wiki)

Regards,

Bart

Thank you very much! Helped a lot!
Almost complete. Take a look:

The only problem is for old tv show episodes thumbs. They are not in same format as new. I tried adjust using <aspectratio scalediffuse="true">scale</aspectratio>, but I think I'm not using this right. How can I make all image have the same format for the watched mark be positioned correctly?

Can I increase the height of all page, for the last movie/season/episode don't get cutted?

The current code: https://pastebin.com/MH62vecy
Hope not be deleted this time

But have a thing I noticed now: I'm making these changes in amber32 (because I can't understand current Amber view codes), but when I put this view on current amber it didn't look a bit like my changes Rofl

@edjalmo, you are progressing well! You can increase the height of the whole list, look for the list with id 52 and change its height attribute.

As for the images, use scale aspectratio, in theory they should "stretch" to whatever dimensions (height, width) you defined for the image.

I did see in your code that you are using incorrectly the width attribute for the label. You can't do mathematical operations like substracting in the skin xml. You can have a single value for the width, either a constant or a PARAM that itself is a constant. if you want to show the same label with different widths depending on some conditions, you need to use multiple label controls, each with the appropriate width and the visibility condition that you want.

Once you finish with your mod, and you have it working, let me know and I will evaluate how best to incorporate it.

Regards,

Bart

edjalmo · 2019-08-23, 22:09

Thanks!

(2019-08-23, 20:55)bsoriano Wrote: I did see in your code that you are using incorrectly the width attribute for the label. You can't do mathematical operations like substracting in the skin xml. You can have a single value for the width, either a constant or a PARAM that itself is a constant. if you want to show the same label with different widths depending on some conditions, you need to use multiple label controls, each with the appropriate width and the visibility condition that you want.

You mean this

xml:
<width>$PARAM[width]-$PARAM[image]</width>

?
This was a test because I was trying use the IconBorder_FO.png instead WhiteRoundedST2.png, and I think I could ajust it this way to fit for diferent image sizes, of course don't worked, I just forgeted to delete.

edjalmo · 2019-08-23, 23:10

(2019-08-23, 20:55)bsoriano Wrote: As for the images, use scale aspectratio, in theory they should "stretch" to whatever dimensions (height, width) you defined for the image.

I could do that, however the icons that represent all seasons and back folder are not cool. Is there any way to not touch them?

**bsoriano** · 2019-08-23, 23:40

(2019-08-23, 23:10)edjalmo Wrote:
(2019-08-23, 20:55)bsoriano Wrote: As for the images, use scale aspectratio, in theory they should "stretch" to whatever dimensions (height, width) you defined for the image.
I could do that, however the icons that represent all seasons and back folder are not cool. Is there any way to not touch them?

@edjalmo, what comes to mind is that you could have another image, with aspectratio "keep" with the <visible> like this: "ListItem.IsParentFolder | [Container.Content(seasons) + String.IsEmpty(ListItem.Season)]". That image would only show if the item is the parent folder (the back folder) or if the item is the All Seasons, which is a season that has no season number. Please try it out and let me know if it works for you.

Regards,

Bart

**bsoriano** · 2019-08-23, 23:41

(2019-08-23, 22:09)edjalmo Wrote: Thanks!

(2019-08-23, 20:55)bsoriano Wrote: I did see in your code that you are using incorrectly the width attribute for the label. You can't do mathematical operations like substracting in the skin xml. You can have a single value for the width, either a constant or a PARAM that itself is a constant. if you want to show the same label with different widths depending on some conditions, you need to use multiple label controls, each with the appropriate width and the visibility condition that you want.
You mean this
xml:
<width>$PARAM[width]-$PARAM[image]</width>
?
This was a test because I was trying use the IconBorder_FO.png instead WhiteRoundedST2.png, and I think I could ajust it this way to fit for diferent image sizes, of course don't worked, I just forgeted to delete.

Yes, I meant just that.

edjalmo · 2019-08-24, 19:19

(2019-08-23, 23:40)bsoriano Wrote: @edjalmo, what comes to mind is that you could have another image, with aspectratio "keep" with the <visible> like this: "ListItem.IsParentFolder | [Container.Content(seasons) + String.IsEmpty(ListItem.Season)]". That image would only show if the item is the parent folder (the back folder) or if the item is the All Seasons, which is a season that has no season number. Please try it out and let me know if it works for you.

Regards,

Bart

I have an doubt here.
I can only use <aspectration>scale</aspectration> if I use <control type="image">. If I keep the image like it is (<include content="ShadowedImage">) scale do nothing.
I added a new image this way:

xml:
<control type="image">

        <visible>ListItem.IsParentFolder | [Container.Content(seasons) + String.IsEmpty(ListItem.Season)]</visible>

        <top>10</top>

        <left>185</left>

        <width>410</width>

        <height>231</height>

        <image>DefaultFolder.png</image>

        <aspectratio>keep</aspectratio>

</control>

But if I'm using the image (fanart) inside a <control type="image"> they not show DefaultFolder.png, they're only show if I use Fanart inside a <include content="ShadowedImage"> (but this way I can't use scale).

Also what do <param name="left">, <param name="width"> and <param name="imgwidth"> inside focusedlayout and itemlayout?
See all code here: https://pastebin.com/Pap9L86e

edjalmo · 2019-08-25, 01:19

I found a way!
You guys know easier ways to do that, but that's the only way I found it.
Check here: https://pastebin.com/E1Bj4jM4
Please tell me if I'm doing it wrong.