Login at Kodi Home

reaven · (This post was last modified: 2016-03-04, 23:53 by reaven.)

I was trying but get lost....
I am trying to achieve this viewtype for show episodes and songs, was using this custom_list from Reynald as a base.

but up to now could only achieve this laughable try:

With the help of Reynald and Jayz2K

* If like it ask for the code/custom list because my version is different from Reynald and Jayz2K

Reynald · 2016-03-03, 23:46

The problem is it does not work Wraplist.We must shift the images to the maximum, and create grouplist.

Reynald · 2016-03-03, 23:47

(2016-03-03, 23:42)reaven Wrote:

who did this ? you?

reaven · 2016-03-04, 00:44

(2016-03-03, 23:47)Reynald Wrote:
(2016-03-03, 23:42)reaven Wrote:

who did this ? you?

it was photoshop but me through it Wink

Reynald · 2016-03-04, 01:29

If you want I can look to create a view like that!

reaven · 2016-03-04, 03:54

I will be more than grateful !!

I dont know if my butchered test code can help you ... Undecided

PHP Code:
<itemlayout width="600" height="91">        
            <control type="label">
                <height>70</height>
                <left>24</left>
                <top>0</top>
                <align>right</align>
                <aligny>top</aligny>
                <font>Font30</font>
                <textcolor>$INFO[Skin.String(Color.B1Txt1NF)]</textcolor>
                <label>$VAR[B1Title]</label>
            </control>
            <control type="label">
                    <left>24</left>
                    <top>35</top>
                    <align>right</align>
                    <aligny>center</aligny>
                    <font>FontSmallR</font>
                    <textcolor>$INFO[Skin.String(Color.B1Txt2NF)]</textcolor>
                    <label>$VAR[B1SubTitle]$INFO[ListItem.Premiered, - $LOCALIZE[20416] ,]</label>
                </control>
        </itemlayout>

        <focusedlayout width="650" height="245">
            <control type="label">
                <left>200</left>
                <top>0</top>
                
                <aligny>top</aligny>
                <font>Font30</font>
                <textcolor>$VAR[CategoryColor]</textcolor>
                <label>$VAR[B1Title]</label>
            </control>
            <control type="label">
                <left>24</left>
                <top>35</top>
                <align>right</align>
                <aligny>center</aligny>
                <font>FontSmallR</font>
                <textcolor>$INFO[Skin.String(Color.B1Txt2F)]</textcolor>
                <label>$VAR[B1SubTitle]$INFO[ListItem.Premiered, - $LOCALIZE[20416] ,]</label>
            </control>
            <control type="textbox">
                <top>35</top>
                <left>-20</left>
                    <width>500</width>
                    <textcolor>$INFO[Skin.String(Color.B2Txt3)]</textcolor>
                    <font>Font25</font>
                    <label fallback="19055">$VAR[B2Plot]</label>
            </control>
            <control type="image">
                <left>450</left>
                <top>0</top>
                <width>242</width>
                <height>145</height>
                <aspectratio>scale</aspectratio>
                <texture>$INFO[ListItem.Icon]</texture>
        </control>
    </focusedlayout> 

BTW i think the list is too wide it would be better if it doesnt take more than half screen, maybe more like the one i tried to made below:

Kokonutcreme · 2016-03-04, 08:43

I'm also trying to replicate that viewtype from Mimic as its my favourite for tv episodes.

I was failing with the thumb image alignment

reaven · 2016-03-04, 09:14

what i got so far, that textbox control is a pain (if you dont know what you doing of course Wink

)

Reynald · (This post was last modified: 2016-03-04, 13:44 by Reynald.)

You can try this. Select Block 1 = 3x3.
I have not managed to do that well up articles (it is hidden on the head -1 item ) Would be corrected if we could work with Wraplist. But it is already moving. Sorry I do not have much time to find a solution. If you are not urgent, I can finish tomorrow?

EDIT : I made some change

Code:
    <itemlayout width="1850" height="145">  

        <control type="group">

        <top>50</top>         

            <control type="label">

                <height>70</height>

                <left>24</left>

                <top>0</top>

                <align>right</align>

                <aligny>top</aligny>

                <font>Font30</font>

                <textcolor>$INFO[Skin.String(Color.B1Txt1NF)]</textcolor>

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

            </control>

            <control type="label">

                    <left>24</left>

                    <top>35</top>

                    <align>right</align>

                    <aligny>center</aligny>

                    <font>FontSmallR</font>

                    <textcolor>$INFO[Skin.String(Color.B1Txt2NF)]</textcolor>

                    <label>$VAR[B1SubTitle]$INFO[ListItem.Premiered, - $LOCALIZE[20416] ,]</label>

                </control>

            </control>    

        </itemlayout>

        <focusedlayout width="1850" height="">

        <control type="group">

        <top>50</top> 

        <control type="group">        

        <left>1200</left>

        <control type="group">    

        <top></top>  

            <control type="label">

                <left>-215</left>

                <top>-20</top>   

                <width>500</width>

                <align>left</align>

                <aligny>top</aligny>

                <font>Font30</font>

                <textcolor>$VAR[CategoryColor]</textcolor>

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

            </control>

            <control type="label">

                <left>-215</left>

                <top>15</top>

                <align>left</align>

                <aligny>center</aligny>

                <font>FontSmallR</font>

                <textcolor>$INFO[Skin.String(Color.B1Txt2F)]</textcolor>

                <label>$VAR[B1SubTitle]$INFO[ListItem.Premiered, - $LOCALIZE[20416] ,]</label>

            </control>

            <control type="textbox">

                <top>50</top>

                <left>-215</left>

                    <width>600</width>

                    <height>75</height>

                    <textcolor>$INFO[Skin.String(Color.B2Txt3)]</textcolor>

                    <font>Font25</font>

                    <label fallback="19055">$VAR[B2Plot]</label>

            </control>

         </control>    

            <control type="group">            

            <control type="image">

                <left>425</left>

                <top>-10</top>

                <width>242</width>

                <height>145</height>

                <aspectratio>scale</aspectratio>

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

                <visible>Container.Content(movies) | Container.Content(tvshows) | Container.Content(seasons)</visible>

                </control>

            <control type="image">

                <left>425</left>

                <top>-10</top>

                <width>242</width>

                <height>145</height>

                <aspectratio>scale</aspectratio>

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

                <visible>Container.Content(episodes)</visible>

                </control>    

        </control>

         </control>

         </control>

    </focusedlayout>

Jayz2K · 2016-03-04, 13:32

Why do you want it to wrap ?

Reynald · 2016-03-04, 13:38

It does not work . I can not create a wrap type = tag between Itemlayout

Jayz2K · 2016-03-04, 13:43

Hmm, let me give it a try. Sounds doable to me ...

Reynald · 2016-03-04, 13:46

You can of course Smile

it's your code. I'm not good enough encoder. I can change source code, but add in the <item>. I can not understand how. It would create a separate include to manage this specific view .As I do in my skin.

Jayz2K · 2016-03-04, 14:17

I've not much time today and gave it a quick shot :

You can use this as base :

PHP Code:
<?xml version="1.0" encoding="UTF-8"?>
<includes>
    <!-- BUILD YOUR OWN LIST TYPE INSIDE KOver 

        You will find below a quick guide to give you more details about variables and settings and help you build your own list.
        Before you start, and for you to get the best results, keep in mind that KOver's grid is made of 9 spaces with a 636 (width) x 356 (height) pixels size.
        If you want your list to fit prefectly when resizing, make your <itemlayout>, <focusedlayout> a multiple of this file :

        Ex : Fanart view is set with <itemlayout width="636" height="356">. Ratio 1:1
        Ex2 : Poster view is set with <itemlayout width="212" height="356">. Ratio 1:3 on width and 1:1 on height

        KOver also handles a dynamic sizing giving you the layout the whole size set in Designer (meaning if you set 1column x 1row, size will be automatically 636x356
        and if you set 3column x 3row will be 1908x1068 ratio 3:1). For this, you can use the following code :

        <itemlayout width="$PARAM[width]" height="$PARAM[height]">

        >> VARIABLES :
        ______________

        The following variables are available inside the list and set to provide the best matching imformations :

        >>>Labels :

        $VAR[B1Title] : Usually the ListItem.Title ot ListItem.Label + fallbacks
        $VAR[B1SubTitle] : Additional informations of an item (ex : duration for movies, start time / end time for PVR, etc.)

        >>>Pictures :

        $VAR[ThumbPortrait] : Return a Portrait picture of an item. Usually Poster or thumb (if episodes) + fallback pictures
        $VAR[ThumbLandscape] : Return a Landscape picture of an item. Usually Fanart or thumb (if episodes) + fallback pictures

        >>>Colors (Colors set in the Color tool) :

        $INFO[Skin.String(Color.B1Bg)] : Bloc 1 background 
        $INFO[Skin.String(Color.B1ItemNF)] : Bloc 1 unselected item (itemlayout) background
        $INFO[Skin.String(Color.B1Txt1NF)] : Text 1 unselected item (itemlayout) usually used for titles and icons
        $INFO[Skin.String(Color.B1Txt2NF)] : Text 2 unselected item (itemlayout) usually used for subtitles
        $VAR[CategoryColor] : Bloc 1 selected item (focusedlayout) background. Changes with the category
        $INFO[Skin.String(Color.B1IconBg)] : Icon background overlay (focusedlayout). Shows over the Bloc 1 selected item
        $INFO[Skin.String(Color.B1Txt1F)] : Text 1 selected item (focusedlayout) usually used for titles and icons
        $INFO[Skin.String(Color.B1Txt2F)] : Text 2 selected item (focusedlayout) usually used for subtitles

        Of course, you can also use any of the KODI infolabels instead.

    -->

    <!-- Custom List 1 -->

    <!-- GIVE THE NAME BELOW THE SAME NUMBER AS XML FILE -->
    <include name="Custom1">

        <itemlayout width="1908" height="120">
            <control type="label">
                <height>120</height>
                <width>1908</width>
                <right>24</right>
                <align>right</align>
                <aligny>center</aligny>
                <font>Font27</font>
                <textcolor>$INFO[Skin.String(Color.B1Txt1NF)]</textcolor>
                <label>$INFO[ListItem.Label]</label>
            </control>
        </itemlayout>

        <focusedlayout width="1908" height="318">
            <control type="group">
                <width>636</width>
                <height>318</height>
                <right>24</right>

                <control type="image">
                    <left>0</left>
                    <top>0</top>
                    <width>636</width>
                    <height>318</height>
                    <aspectratio>scale</aspectratio>
                    <texture colordiffuse="$INFO[Skin.String(Color.B1ItemNF)]">common/white.png</texture>
                </control>
                <control type="image">
                    <left>100</left>
                    <top>12</top>
                    <width>104</width>
                    <height>104</height>
                    <align>center</align>
                    <aspectratio>keep</aspectratio>
                    <texture background="true" colordiffuse="FFFFFFFF" fallback="material/tv.png">$VAR[ThumbTV]</texture>
                    <visible>!IsEmpty(ListItem.Property(ChannelName)) | !IsEmpty(ListItem.ChannelName)</visible>
                </control>
                <control type="image">
                    <left>100</left>
                    <top>12</top>
                    <width>104</width>
                    <height>104</height>
                    <align>center</align>
                    <aspectratio>keep</aspectratio>
                    <texture background="true" colordiffuse="$INFO[Skin.String(Color.B1Txt1NF)]">$VAR[ThumbIcon]</texture>
                    <visible>[IsEmpty(ListItem.Property(ChannelName)) + IsEmpty(ListItem.ChannelName)] + [ListItem.IsFolder | IsEmpty(ListItem.Art(thumb)) | !IsEmpty(ListItem.Property(labelID))]</visible>
                </control>
                <control type="image">
                    <left>0</left>
                    <top>0</top>
                    <width>636</width>
                    <height>318</height>
                    <align>center</align>
                    <aspectratio>scale</aspectratio>
                    <texture background="true" colordiffuse="FFFFFFFF">$VAR[ThumbLandscape]</texture>
                    <visible>IsEmpty(ListItem.Property(ChannelName)) + IsEmpty(ListItem.ChannelName) + IsEmpty(ListItem.Property(labelID))</visible>
                </control>
                <control type="group">
                    <right>0</right>
                    <top>0</top>
                    <width>100</width>
                    <height>100</height>
                    <control type="image">
                        <right>1</right>
                        <top>0</top>
                        <aspectratio>scale</aspectratio>
                        <texture colordiffuse="$VAR[CategoryColor]">common/corner.png</texture>
                    </control>
                    <control type="image">
                        <right>6</right>
                        <top>6</top>
                        <width>25</width>
                        <height>25</height>
                        <aspectratio>scale</aspectratio>
                        <texture colordiffuse="$INFO[Skin.String(Color.B1Txt1F)]">material/check.png</texture>
                        <visible>!ListItem.HasTimer + !ListItem.IsRecording + !ListItem.IsResumable</visible>
                    </control>
                    <control type="image">
                        <right>6</right>
                        <top>6</top>
                        <width>25</width>
                        <height>25</height>
                        <aspectratio>scale</aspectratio>
                        <texture colordiffuse="$INFO[Skin.String(Color.B1Txt1F)]">osd/pause.png</texture>
                        <visible>ListItem.IsResumable</visible>
                    </control>
                    <!-- Recording image -->
                    <control type="image">
                        <right>6</right>
                        <top>6</top>
                        <width>25</width>
                        <height>25</height>
                        <aspectratio>scale</aspectratio>
                        <texture colordiffuse="$INFO[Skin.String(Color.B1Txt1F)]">osd/record.png</texture>
                        <visible>ListItem.IsRecording</visible>
                    </control>
                    <!-- Timer image -->
                    <control type="image">
                        <right>6</right>
                        <top>6</top>
                        <width>25</width>
                        <height>25</height>
                        <aspectratio>scale</aspectratio>
                        <texture colordiffuse="$INFO[Skin.String(Color.B1Txt1F)]">material/clock.png</texture>
                        <visible>ListItem.HasTimer + !ListItem.IsRecording</visible>
                    </control>          

                <visible>[Skin.HasSetting(WatchedFlag) + [Container.Content(movies) + stringcompare(ListItem.Overlay,OverlayWatched.png)] | [Container.Content(episodes) + stringcompare(ListItem.Overlay,OverlayWatched.png)] | [Container.Content(seasons) + stringcompare(ListItem.Overlay,OverlayWatched.png)] | [Container.Content(tvshows) + stringcompare(ListItem.Overlay,OverlayWatched.png)] | ListItem.IsResumable] | ListItem.IsRecording | ListItem.HasTimer</visible>
                </control>
                <control type="image">
                    <left>0</left>
                    <bottom>0</bottom>
                    <width>636</width>
                    <height>50</height>
                    <aspectratio>scale</aspectratio>
                    <texture colordiffuse="$INFO[Skin.String(Color.B1ItemNF)]">common/white.png</texture>
                </control>
                <control type="image">
                    <left>0</left>
                    <bottom>0</bottom>
                    <width>636</width>
                    <height>50</height>
                    <aspectratio>scale</aspectratio>
                    <texture colordiffuse="$VAR[CategoryColor]">common/white.png</texture>
                </control>
                <control type="label">
                    <left>9</left>
                    <bottom>0</bottom>
                    <width>636</width>
                    <height>50</height>
                    <align>left</align>
                    <aligny>center</aligny>
                    <font>FontSmallR</font>
                    <textcolor>$INFO[Skin.String(Color.B1Txt1F)]</textcolor>
                    <label>$INFO[ListItem.Rating]</label>
                </control>
            </control>
            <control type="group">
                <right>684</right>
                <width>1000</width>
                <height>318</height>
                <control type="label">
                    <top>0</top>
                    <height>60</height>
                    <width>1000</width>
                    <right>24</right>
                    <align>right</align>
                    <aligny>center</aligny>
                    <font>Font36</font>
                    <textcolor>$INFO[Skin.String(Color.B1Txt1F)]</textcolor>
                    <label>$INFO[ListItem.Label]</label>
                </control>
                <control type="textbox">
                    <top>60</top>
                    <height>200</height>
                    <width>1000</width>
                    <right>24</right>
                    <align>right</align>
                    <aligny>center</aligny>
                    <font>FontSmall</font>
                    <textcolor>$INFO[Skin.String(Color.B1Txt1F)]</textcolor>
                    <label>$INFO[ListItem.Plot]</label>
                </control>
            </control>
        </focusedlayout>

    <!-- DO NOT MODIFY FROM HERE -->        
    </include>
</includes>
    <!-- TO HERE --> 

Reynald · (This post was last modified: 2016-03-04, 14:38 by Reynald.)

http://prntscr.com/ab2ek8

thx very much , it's the same problem, the list out of the screen