EPGGrid control: Difference between revisions
Jump to navigation
Jump to search
m (Bot: Automated text replacement (-class="wikitable" +class="prettytable" & -Available Tags +Available tags & -<source +<syntaxhighlight & -</source> +</syntaxhighlight>)) |
No edit summary |
||
(9 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
<section begin="main content" /> | <section begin="main content" /> | ||
The epggrid control is used for creating an epg timeline in | The epggrid control is used for creating an epg timeline in Kodi. You can choose the position, size, and look of the grid and it's contents. | ||
=== Example === | === Example === | ||
<syntaxhighlight 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> | ||
< | <left>80</left> | ||
< | <top>81</top> | ||
<width>1120</width> | <width>1120</width> | ||
<height>555</height> | <height>555</height> | ||
Line 18: | Line 18: | ||
<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> | ||
< | <left>0</left> | ||
< | <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"> | ||
< | <left>10</left> | ||
< | <top>0</top> | ||
<width>34</width> | <width>34</width> | ||
<height>29</height> | <height>29</height> | ||
Line 41: | 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"> | ||
< | <left>0</left> | ||
< | <top>0</top> | ||
<width>270</width> | <width>270</width> | ||
<height>52</height> | <height>52</height> | ||
Line 48: | Line 60: | ||
</control> | </control> | ||
<control type="label"> | <control type="label"> | ||
< | <left>5</left> | ||
< | <top>5</top> | ||
<width>40</width> | <width>40</width> | ||
<height>35</height> | <height>35</height> | ||
Line 57: | Line 69: | ||
<textcolor>grey</textcolor> | <textcolor>grey</textcolor> | ||
<selectedcolor>grey</selectedcolor> | <selectedcolor>grey</selectedcolor> | ||
< | <label>$INFO[ListItem.ChannelNumber]</label> | ||
</control> | </control> | ||
<control type="image"> | <control type="image"> | ||
< | <left>45</left> | ||
< | <top>4</top> | ||
<width>45</width> | <width>45</width> | ||
<height>44</height> | <height>44</height> | ||
Line 67: | Line 79: | ||
</control> | </control> | ||
<control type="label" id="1"> | <control type="label" id="1"> | ||
< | <left>94</left> | ||
< | <top>0</top> | ||
<width>160</width> | <width>160</width> | ||
<height>52</height> | <height>52</height> | ||
Line 81: | 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"> | ||
< | <left>0</left> | ||
< | <top>0</top> | ||
<width>270</width> | <width>270</width> | ||
<height>52</height> | <height>52</height> | ||
Line 88: | Line 100: | ||
</control> | </control> | ||
<control type="label"> | <control type="label"> | ||
< | <left>5</left> | ||
< | <top>5</top> | ||
<width>40</width> | <width>40</width> | ||
<height>35</height> | <height>35</height> | ||
Line 97: | Line 109: | ||
<textcolor>grey</textcolor> | <textcolor>grey</textcolor> | ||
<selectedcolor>grey</selectedcolor> | <selectedcolor>grey</selectedcolor> | ||
< | <label>$INFO[ListItem.ChannelNumber]</label> | ||
</control> | </control> | ||
<control type="image"> | <control type="image"> | ||
< | <left>45</left> | ||
< | <top>4</top> | ||
<width>45</width> | <width>45</width> | ||
<height>44</height> | <height>44</height> | ||
Line 107: | Line 119: | ||
</control> | </control> | ||
<control type="label" id="1"> | <control type="label" id="1"> | ||
< | <left>94</left> | ||
< | <top>0</top> | ||
<width>160</width> | <width>160</width> | ||
<height>52</height> | <height>52</height> | ||
Line 122: | Line 134: | ||
<width>40</width> | <width>40</width> | ||
<height>52</height> | <height>52</height> | ||
< | <left>0</left> | ||
< | <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"> | ||
< | <left>6</left> | ||
< | <top>3</top> | ||
<width>30</width> | <width>30</width> | ||
<height>25</height> | <height>25</height> | ||
Line 136: | Line 148: | ||
<selectedcolor>selected</selectedcolor> | <selectedcolor>selected</selectedcolor> | ||
<align>left</align> | <align>left</align> | ||
< | <label>$INFO[ListItem.Label]</label> | ||
</control> | </control> | ||
<control type="image"> | <control type="image"> | ||
< | <left>5</left> | ||
< | <top>28</top> | ||
<width>30</width> | <width>30</width> | ||
<height>20</height> | <height>20</height> | ||
Line 147: | Line 159: | ||
</control> | </control> | ||
<control type="image"> | <control type="image"> | ||
< | <left>5</left> | ||
< | <top>28</top> | ||
<width>20</width> | <width>20</width> | ||
<height>20</height> | <height>20</height> | ||
Line 159: | Line 171: | ||
<width>40</width> | <width>40</width> | ||
<height>52</height> | <height>52</height> | ||
< | <left>0</left> | ||
< | <top>0</top> | ||
<texture border="5">folder-focus.png</texture> | <texture border="5">folder-focus.png</texture> | ||
</control> | </control> | ||
Line 166: | Line 178: | ||
<width>40</width> | <width>40</width> | ||
<height>52</height> | <height>52</height> | ||
< | <left>0</left> | ||
< | <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"> | ||
< | <left>6</left> | ||
< | <top>3</top> | ||
<width>30</width> | <width>30</width> | ||
<height>25</height> | <height>25</height> | ||
Line 180: | Line 192: | ||
<selectedcolor>selected</selectedcolor> | <selectedcolor>selected</selectedcolor> | ||
<align>left</align> | <align>left</align> | ||
< | <label>$INFO[ListItem.Label]</label> | ||
</control> | </control> | ||
<control type="image"> | <control type="image"> | ||
< | <left>5</left> | ||
< | <top>28</top> | ||
<width>30</width> | <width>30</width> | ||
<height>20</height> | <height>20</height> | ||
Line 191: | Line 203: | ||
</control> | </control> | ||
<control type="image"> | <control type="image"> | ||
< | <left>5</left> | ||
< | <top>28</top> | ||
<width>20</width> | <width>20</width> | ||
<height>20</height> | <height>20</height> | ||
Line 205: | Line 217: | ||
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="prettytable" | {| class="prettytable" | ||
! Tag !! Description | |||
|- | |- | ||
| '''timeblocks''' | | '''timeblocks''' | ||
Line 211: | 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''' | ||
Line 229: | 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" /> | <section end="main content" /> | ||
== See also == | == See also == | ||
'''Development:''' | '''Development:''' | ||
Line 237: | Line 257: | ||
* [[Skinning]] | * [[Skinning]] | ||
[[Category:Skin | [[Category:Skin development]] |
Latest revision as of 00:59, 13 July 2020
The epggrid control is used for creating an epg timeline in Kodi. 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: