EPGGrid control: Difference between revisions

From Official Kodi Wiki
Jump to navigation Jump to search
m (Robot: Changing Category:Skin Development to Category:Skin development)
Line 5: Line 5:
<control type="epggrid" id="10">
<control type="epggrid" id="10">
     <description>EPG Grid</description>
     <description>EPG Grid</description>
     <posx>80</posx>
     <left>80</left>
     <posy>81</posy>
     <top>81</top>
     <width>1120</width>
     <width>1120</width>
     <height>555</height>
     <height>555</height>
Line 22: Line 22:
             <width>40</width>
             <width>40</width>
             <height>29</height>
             <height>29</height>
             <posx>0</posx>
             <left>0</left>
             <posy>0</posy>
             <top>0</top>
             <texture border="5">button-nofocus.png</texture>
             <texture border="5">button-nofocus.png</texture>
         </control>
         </control>
         <control type="label" id="2">
         <control type="label" id="2">
             <posx>10</posx>
             <left>10</left>
             <posy>0</posy>
             <top>0</top>
             <width>34</width>
             <width>34</width>
             <height>29</height>
             <height>29</height>
Line 41: Line 41:
         <animation effect="fade" start="110" time="200">UnFocus</animation>
         <animation effect="fade" start="110" time="200">UnFocus</animation>
         <control type="image" id="1">
         <control type="image" id="1">
             <posx>0</posx>
             <left>0</left>
             <posy>0</posy>
             <top>0</top>
             <width>270</width>
             <width>270</width>
             <height>52</height>
             <height>52</height>
Line 48: Line 48:
         </control>
         </control>
         <control type="label">
         <control type="label">
             <posx>5</posx>
             <left>5</left>
             <posy>5</posy>
             <top>5</top>
             <width>40</width>
             <width>40</width>
             <height>35</height>
             <height>35</height>
Line 60: Line 60:
         </control>
         </control>
         <control type="image">
         <control type="image">
             <posx>45</posx>
             <left>45</left>
             <posy>4</posy>
             <top>4</top>
             <width>45</width>
             <width>45</width>
             <height>44</height>
             <height>44</height>
Line 67: Line 67:
         </control>
         </control>
         <control type="label" id="1">
         <control type="label" id="1">
             <posx>94</posx>
             <left>94</left>
             <posy>0</posy>
             <top>0</top>
             <width>160</width>
             <width>160</width>
             <height>52</height>
             <height>52</height>
Line 81: Line 81:
         <animation effect="fade" start="110" time="200">OnFocus</animation>
         <animation effect="fade" start="110" time="200">OnFocus</animation>
         <control type="image" id="1">
         <control type="image" id="1">
             <posx>0</posx>
             <left>0</left>
             <posy>0</posy>
             <top>0</top>
             <width>270</width>
             <width>270</width>
             <height>52</height>
             <height>52</height>
Line 88: Line 88:
         </control>
         </control>
         <control type="label">
         <control type="label">
             <posx>5</posx>
             <left>5</left>
             <posy>5</posy>
             <top>5</top>
             <width>40</width>
             <width>40</width>
             <height>35</height>
             <height>35</height>
Line 100: Line 100:
         </control>
         </control>
         <control type="image">
         <control type="image">
             <posx>45</posx>
             <left>45</left>
             <posy>4</posy>
             <top>4</top>
             <width>45</width>
             <width>45</width>
             <height>44</height>
             <height>44</height>
Line 107: Line 107:
         </control>
         </control>
         <control type="label" id="1">
         <control type="label" id="1">
             <posx>94</posx>
             <left>94</left>
             <posy>0</posy>
             <top>0</top>
             <width>160</width>
             <width>160</width>
             <height>52</height>
             <height>52</height>
Line 122: Line 122:
             <width>40</width>
             <width>40</width>
             <height>52</height>
             <height>52</height>
             <posx>0</posx>
             <left>0</left>
             <posy>0</posy>
             <top>0</top>
             <aspectratio>stretch</aspectratio>
             <aspectratio>stretch</aspectratio>
             <texture border="3">epg-genres/$INFO[ListItem.Property(GenreType)].png</texture>
             <texture border="3">epg-genres/$INFO[ListItem.Property(GenreType)].png</texture>
         </control>
         </control>
         <control type="label" id="1">
         <control type="label" id="1">
             <posx>6</posx>
             <left>6</left>
             <posy>3</posy>
             <top>3</top>
             <width>30</width>
             <width>30</width>
             <height>25</height>
             <height>25</height>
Line 139: Line 139:
         </control>
         </control>
         <control type="image">
         <control type="image">
             <posx>5</posx>
             <left>5</left>
             <posy>28</posy>
             <top>28</top>
             <width>30</width>
             <width>30</width>
             <height>20</height>
             <height>20</height>
Line 147: Line 147:
         </control>
         </control>
         <control type="image">
         <control type="image">
             <posx>5</posx>
             <left>5</left>
             <posy>28</posy>
             <top>28</top>
             <width>20</width>
             <width>20</width>
             <height>20</height>
             <height>20</height>
Line 159: Line 159:
             <width>40</width>
             <width>40</width>
             <height>52</height>
             <height>52</height>
             <posx>0</posx>
             <left>0</left>
             <posy>0</posy>
             <top>0</top>
             <texture border="5">folder-focus.png</texture>
             <texture border="5">folder-focus.png</texture>
         </control>
         </control>
Line 166: Line 166:
             <width>40</width>
             <width>40</width>
             <height>52</height>
             <height>52</height>
             <posx>0</posx>
             <left>0</left>
             <posy>0</posy>
             <top>0</top>
             <aspectratio>stretch</aspectratio>
             <aspectratio>stretch</aspectratio>
             <texture border="3">epg-genres/$INFO[ListItem.Property(GenreType)].png</texture>
             <texture border="3">epg-genres/$INFO[ListItem.Property(GenreType)].png</texture>
         </control>
         </control>
         <control type="label" id="1">
         <control type="label" id="1">
             <posx>6</posx>
             <left>6</left>
             <posy>3</posy>
             <top>3</top>
             <width>30</width>
             <width>30</width>
             <height>25</height>
             <height>25</height>
Line 183: Line 183:
         </control>
         </control>
         <control type="image">
         <control type="image">
             <posx>5</posx>
             <left>5</left>
             <posy>28</posy>
             <top>28</top>
             <width>30</width>
             <width>30</width>
             <height>20</height>
             <height>20</height>
Line 191: Line 191:
         </control>
         </control>
         <control type="image">
         <control type="image">
             <posx>5</posx>
             <left>5</left>
             <posy>28</posy>
             <top>28</top>
             <width>20</width>
             <width>20</width>
             <height>20</height>
             <height>20</height>

Revision as of 12:09, 9 April 2016

The epggrid control is used for creating an epg timeline in XBMC. You can choose the position, size, and look of the grid and it's contents.

Example

<control type="epggrid" id="10">
    <description>EPG Grid</description>
    <left>80</left>
    <top>81</top>
    <width>1120</width>
    <height>555</height>
    <pagecontrol>10</pagecontrol>
    <scrolltime>350</scrolltime>
    <timeblocks>40</timeblocks>
    <rulerunit>6</rulerunit>
    <progresstexture border="5">PVR-EpgProgressIndicator.png</progresstexture>
    <onleft>31</onleft>
    <onright>31</onright>
    <onup>10</onup>
    <ondown>10</ondown>
    <rulerlayout height="35" width="40">
        <control type="image" id="1">
            <width>40</width>
            <height>29</height>
            <left>0</left>
            <top>0</top>
            <texture border="5">button-nofocus.png</texture>
        </control>
        <control type="label" id="2">
            <left>10</left>
            <top>0</top>
            <width>34</width>
            <height>29</height>
            <font>font12</font>
            <aligny>center</aligny>
            <selectedcolor>selected</selectedcolor>
            <align>left</align>
            <label>$INFO[ListItem.Label]</label>
        </control>
    </rulerlayout>
    <channellayout height="52" width="280">
        <animation effect="fade" start="110" time="200">UnFocus</animation>
        <control type="image" id="1">
            <left>0</left>
            <top>0</top>
            <width>270</width>
            <height>52</height>
            <texture border="5">button-nofocus.png</texture>
        </control>
        <control type="label">
            <left>5</left>
            <top>5</top>
            <width>40</width>
            <height>35</height>
            <font>font12</font>
            <align>left</align>
            <aligny>center</aligny>
            <textcolor>grey</textcolor>
            <selectedcolor>grey</selectedcolor>
            <info>ListItem.ChannelNumber</info>
        </control>
        <control type="image">
            <left>45</left>
            <top>4</top>
            <width>45</width>
            <height>44</height>
            <texture>$INFO[ListItem.Icon]</texture>
        </control>
        <control type="label" id="1">
            <left>94</left>
            <top>0</top>
            <width>160</width>
            <height>52</height>
            <font>special12</font>
            <aligny>center</aligny>
            <selectedcolor>selected</selectedcolor>
            <align>left</align>
            <label>$INFO[ListItem.ChannelName]</label>
        </control>
    </channellayout>
    <focusedchannellayout height="52" width="280">
        <animation effect="fade" start="110" time="200">OnFocus</animation>
        <control type="image" id="1">
            <left>0</left>
            <top>0</top>
            <width>270</width>
            <height>52</height>
            <texture border="5">button-focus.png</texture>
        </control>
        <control type="label">
            <left>5</left>
            <top>5</top>
            <width>40</width>
            <height>35</height>
            <font>font12</font>
            <align>left</align>
            <aligny>center</aligny>
            <textcolor>grey</textcolor>
            <selectedcolor>grey</selectedcolor>
            <info>ListItem.ChannelNumber</info>
        </control>
        <control type="image">
            <left>45</left>
            <top>4</top>
            <width>45</width>
            <height>44</height>
            <texture>$INFO[ListItem.Icon]</texture>
        </control>
        <control type="label" id="1">
            <left>94</left>
            <top>0</top>
            <width>160</width>
            <height>52</height>
            <font>special12</font>
            <aligny>center</aligny>
            <selectedcolor>selected</selectedcolor>
            <align>left</align>
            <label>$INFO[ListItem.ChannelName]</label>
        </control>
    </focusedchannellayout>
    <itemlayout height="52" width="40">
        <control type="image" id="2">
            <width>40</width>
            <height>52</height>
            <left>0</left>
            <top>0</top>
            <aspectratio>stretch</aspectratio>
            <texture border="3">epg-genres/$INFO[ListItem.Property(GenreType)].png</texture>
        </control>
        <control type="label" id="1">
            <left>6</left>
            <top>3</top>
            <width>30</width>
            <height>25</height>
            <font>font12</font>
            <aligny>center</aligny>
            <selectedcolor>selected</selectedcolor>
            <align>left</align>
            <info>ListItem.Label</info>
        </control>
        <control type="image">
            <left>5</left>
            <top>28</top>
            <width>30</width>
            <height>20</height>
            <texture>PVR-IsRecording.png</texture>
            <visible>ListItem.IsRecording</visible>
        </control>
        <control type="image">
            <left>5</left>
            <top>28</top>
            <width>20</width>
            <height>20</height>
            <texture>PVR-HasTimer.png</texture>
            <visible>ListItem.HasTimer + !ListItem.IsRecording</visible>
        </control>
    </itemlayout>
    <focusedlayout height="52" width="40">
        <control type="image" id="14">
            <width>40</width>
            <height>52</height>
            <left>0</left>
            <top>0</top>
            <texture border="5">folder-focus.png</texture>
        </control>
        <control type="image" id="2">
            <width>40</width>
            <height>52</height>
            <left>0</left>
            <top>0</top>
            <aspectratio>stretch</aspectratio>
            <texture border="3">epg-genres/$INFO[ListItem.Property(GenreType)].png</texture>
        </control>
        <control type="label" id="1">
            <left>6</left>
            <top>3</top>
            <width>30</width>
            <height>25</height>
            <font>font12</font>
            <aligny>center</aligny>
            <selectedcolor>selected</selectedcolor>
            <align>left</align>
            <info>ListItem.Label</info>
        </control>
        <control type="image">
            <left>5</left>
            <top>28</top>
            <width>30</width>
            <height>20</height>
            <texture>PVR-IsRecording.png</texture>
            <visible>ListItem.IsRecording</visible>
        </control>
        <control type="image">
            <left>5</left>
            <top>28</top>
            <width>20</width>
            <height>20</height>
            <texture>PVR-HasTimer.png</texture>
            <visible>ListItem.HasTimer + !ListItem.IsRecording</visible>
        </control>
    </focusedlayout>
</control>

Available tags

In addition to the Default Control Tags the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.

Tag Description
timeblocks The number of timeframes on the top row.
rulerunit Timeframe of each unit on the top row. 1 unit equals 5 minutes.
rulerlayout The layout of the top row.
progresstexture A texture which indicates the current progress time
channellayout The layout of the left column.
focusedchannellayout The focused layout of the left column.
itemlayout The layout of the grid
focusedlayout The focused layout of the grid


See also

Development: