EPGGrid control: Difference between revisions

From Official Kodi Wiki
Jump to navigation Jump to search
>NedBot
m (Robot: Cosmetic changes)
No edit summary
(14 intermediate revisions by 4 users not shown)
Line 1: Line 1:
<section begin="main content" />
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.
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 ===
=== Example ===
<source lang="xml">
<syntaxhighlight lang="xml" enclose="div">
<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 12: Line 13:
     <timeblocks>40</timeblocks>
     <timeblocks>40</timeblocks>
     <rulerunit>6</rulerunit>
     <rulerunit>6</rulerunit>
    <progresstexture border="5">PVR-EpgProgressIndicator.png</progresstexture>
     <onleft>31</onleft>
     <onleft>31</onleft>
     <onright>31</onright>
     <onright>31</onright>
     <onup>10</onup>
     <onup>10</onup>
     <ondown>10</ondown>
     <ondown>10</ondown>
    <orientation>Horizontal</orientation>
    <rulerdatelayout width="1700" height="45" condition="$PARAM[has_rulerdate_layout]">
        <control type="label">
            <width>1700</width>
            <height>45</height>
            <font>font24</font>
            <label>$INFO[ListItem.Label]</label>
            <textcolor>button_focus</textcolor>
            <align>center</align>
            <aligny>center</aligny>
        </control>
    </rulerdatelayout>
     <rulerlayout height="35" width="40">
     <rulerlayout height="35" width="40">
         <control type="image" id="1">
         <control type="image" id="1">
             <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 39: Line 53:
         <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 46: Line 60:
         </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 55: Line 69:
             <textcolor>grey</textcolor>
             <textcolor>grey</textcolor>
             <selectedcolor>grey</selectedcolor>
             <selectedcolor>grey</selectedcolor>
             <info>ListItem.ChannelNumber</info>
             <label>$INFO[ListItem.ChannelNumber]</label>
         </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 65: Line 79:
         </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 79: Line 93:
         <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 86: Line 100:
         </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 95: Line 109:
             <textcolor>grey</textcolor>
             <textcolor>grey</textcolor>
             <selectedcolor>grey</selectedcolor>
             <selectedcolor>grey</selectedcolor>
             <info>ListItem.ChannelNumber</info>
             <label>$INFO[ListItem.ChannelNumber]</label>
         </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 105: Line 119:
         </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 120: Line 134:
             <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 134: Line 148:
             <selectedcolor>selected</selectedcolor>
             <selectedcolor>selected</selectedcolor>
             <align>left</align>
             <align>left</align>
             <info>ListItem.Label</info>
             <label>$INFO[ListItem.Label]</label>
         </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 145: Line 159:
         </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 157: Line 171:
             <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 164: Line 178:
             <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 178: Line 192:
             <selectedcolor>selected</selectedcolor>
             <selectedcolor>selected</selectedcolor>
             <align>left</align>
             <align>left</align>
             <info>ListItem.Label</info>
             <label>$INFO[ListItem.Label]</label>
         </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 189: Line 203:
         </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 198: Line 212:
     </focusedlayout>
     </focusedlayout>
</control>
</control>
</source>
</syntaxhighlight>


=== Available Tags ===
=== 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.
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.
{| class="wikitable"
{| class="prettytable"
! Tag !! Description
|-   
|-   
|  '''timeblocks'''
|  '''timeblocks'''
Line 209: Line 224:
|  '''rulerunit'''
|  '''rulerunit'''
|  Timeframe of each unit on the top row. 1 unit equals 5 minutes.
|  Timeframe of each unit on the top row. 1 unit equals 5 minutes.
|- 
|  '''rulerdatelayout'''
|  The layout of the date header.
|-   
|-   
|  '''rulerlayout'''
|  '''rulerlayout'''
|  The layout of the top row.
|  The layout of the top row.
|-   
|-   
|  '''progresstexture'''
|  A texture which indicates the current progress time
|-
|  '''channellayout'''
|  '''channellayout'''
|  The layout of the left column.
|  The layout of the left column.
Line 224: Line 245:
|  '''focusedlayout'''
|  '''focusedlayout'''
|  The focused layout of the grid
|  The focused layout of the grid
|- 
|  '''orientation'''
|  The orientation (Horizontal/Vertical) of the grid
|}
|}
<section end="main content" />


== See also ==
== See also ==
Line 231: Line 257:
* [[Skinning]]
* [[Skinning]]


[[Category:Skin Development]]
[[Category:Skin development]]

Revision as of 21:42, 22 February 2019

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>
    <orientation>Horizontal</orientation>
    <rulerdatelayout width="1700" height="45" condition="$PARAM[has_rulerdate_layout]">
        <control type="label">
            <width>1700</width>
            <height>45</height>
            <font>font24</font>
            <label>$INFO[ListItem.Label]</label>
            <textcolor>button_focus</textcolor>
            <align>center</align>
            <aligny>center</aligny>
        </control>
    </rulerdatelayout>
    <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>
            <label>$INFO[ListItem.ChannelNumber]</label>
        </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>
            <label>$INFO[ListItem.ChannelNumber]</label>
        </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>
            <label>$INFO[ListItem.Label]</label>
        </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>
            <label>$INFO[ListItem.Label]</label>
        </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.
rulerdatelayout The layout of the date header.
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
orientation The orientation (Horizontal/Vertical) of the grid


See also

Development: