Login at Kodi Home

ajiratech · 2018-01-10, 05:38

I'm a noob and have been racking my brain to achieve the following for the last 3 days and have gotten nowhere.

I'd like to create a new custom xml window that takes up the entire screen and use control type "Panel". In the panel I'd like to show thumbnail images that are dynamically learnt via a local file or via http call to local server (whichever is easier).

So far I've been able to create a custom XML with just a label and button control and open this page by activatewindow(1101) call made elsewhere. But when I change the code of this custom XML to include content type "panel", the window loads but I see nothing on the window.

Here is the custom XML I have so far. (I'm not able to get static content so far, once I get that showing, then I'll look into populating it by fetching it from the file)

I have tried a few different variations of controls under control type but none seem to show.

Your advice with some basic XML code will be much appreciated in getting me on the right track. Thanks in advance.

-------- XML file -------
<?xml version="1.0" encoding="UTF-8"?>
<window id="1101">
 <defaultcontrol always="false">1234561</defaultcontrol>
 <backgroundcolor>0xff00ff00</backgroundcolor>
 <controls>
 <control type="panel" id="1234580">
 <left>50</left>
 <top>50</top>
 <width>600</width>
 <height>600</height>
 <viewtype label="536">icon</viewtype>
 <content>
 <item id="1">
 <label>My First Item</label>
 <label2>Label 2</label2>
 <icon>icon1.png</icon>
 <thumb>thumb1.png</thumb>
 <onclick>ActivateWindow(Home)</onclick>
 <visible>true</visible>
 <property name="foo">Some1stValueHere</property>
 <property name="foo2">Some2ndValueHere</property>
 </item>
 <item id="2">
 <label>My Second Item</label>
 <label2>Label 2</label2>
 <icon>icon2.png</icon>
 <thumb>thumb2.png</thumb>
 <onclick>ActivateWindow(MyMusicLibrary)</onclick>
 <property name="foo">Some1stValueHere</property>
 <property name="foo2">Some2ndValueHere</property>
 </item>
 </content>
 </control>
 </controls>
</window>

**ronie** · 2018-01-10, 10:36

your <itemlayout> and <focusedlayout> sections are missing?

ajiratech · 2018-01-10, 23:45

I've tried with those sections too and that gives me a blank page too.

Here is the code that I've tried from the Kodi Manual: (I see no controls on the page and when I mouse over all over the page the debug tip on top does not say that I am over a control "panel".

If there is another sample XML that I can copy and make it my starting point, that would be a big help.

------ XML file named custom1101.xml -------
<?xml version="1.0" encoding="UTF-8"?>
<window id="1101">
 <defaultcontrol always="true">50</defaultcontrol>
 <menucontrol>9000</menucontrol>
 <onload condition="!Skin.HasSetting(FirstTimeRun)">ActivateWindow(1112)</onload>
 <views>500</views>
<left>190</left>
<top>100</top>
<width>485</width>
<height>425</height>
<onleft>9000</onleft>
<onright>60</onright>
<onup>52</onup>
<ondown>52</ondown>
<scrolltime tween="sine" easing="out">200</scrolltime>
<autoscroll>true</autoscroll>
<viewtype label="536">icon</viewtype>
<pagecontrol>60</pagecontrol>
<include>contentpanelslide</include>
<itemlayout height="141" width="120">
<control type="label">
<left>10</left>
<top>10</top>
<width>100</width>
<height>100</height>
<label>Test label 1</label>
</control>
<control type="image">
<left>80</left>
<top>75</top>
<width>32</width>
<height>32</height>
<info>ListItem.Overlay</info>
</control>
<control type="label">
<left>60</left>
<top>115</top>
<width>110</width>
<height>22</height>
font13
<selectedcolor>green</selectedcolor>
<align>center</align>
<info>ListItem.Label</info>
</control>
</itemlayout>
<focusedlayout height="141" width="120">
<control type="image">
<width>110</width>
<height>110</height>
<left>5</left>
<top>5</top>
<texture>folder-focus.png</texture>
<animation effect="zoom" end="0,0,120,120" time="100">focus</animation>
</control>
<control type="image">
<left>10</left>
<top>10</top>
<width>100</width>
<height>100</height>
<info>ListItem.Icon</info>
<animation effect="zoom" end="5,5,110,110" time="100">focus</animation>
</control>
<control type="image">
<left>80</left>
<top>75</top>
<width>32</width>
<height>32</height>
<info>ListItem.Overlay</info>
<animation effect="slide" end="5,5" time="100">focus</animation>
</control>
<control type="label">
<left>60</left>
<top>120</top>
<width>110</width>
<height>22</height>
font13
<selectedcolor>green</selectedcolor>
<align>center</align>
<info>ListItem.Label</info>
</control>
</focusedlayout>
</window>

**ronie** · 2018-01-11, 00:10

that code make no sense ;-)

here's an article about adding a custom window:
http://kodi.wiki/view/HOW-TO_add_a_new_w...a_skinning

an example of a panel container:
http://kodi.wiki/view/Skinning_Manual#Panel_Container

and how to fill a container with static content:
http://kodi.wiki/view/Skinning_Manual#Fi...ic_content

combine those there and you're done ;-p

keep in mind if you want to fill a container with dynamic content, you'll also have to write a python addon.

ajiratech · 2018-01-11, 01:44

Thanks Ronie !

I had read these pages individually and could not get it working then. But now I did, I see the custom XML displaying label controls.

I think I understand now how it is supposed to work, I still have a lot of work ahead of me though.

One question - regarding dynamic content, when I do python script to fetch the content, I'm assuming the response/result of that python script should be in XML format. exactly how it would have been as if it were a static content inside "<content> </content>" tags ?

Also, could you please point me to documentation on how to populate variables and fetch values from them to display them inside content?

------- XML file that shows container ---------
<window id="1101">
<defaultcontrol>2</defaultcontrol>
<controls>
<control type="panel" id="52">
<left>50</left>
<top>75</top>
<width>1000</width>
<height>900</height>
<onleft>9000</onleft>
<onright>60</onright>
<onup>52</onup>
<ondown>52</ondown>
<scrolltime tween="sine" easing="out">200</scrolltime>
<autoscroll>true</autoscroll>
<viewtype label="536">icon</viewtype>
<pagecontrol>60</pagecontrol>
<include>contentpanelslide</include>
<itemlayout height="220" width="220">
<control type="image">
<left>5</left>
<top>5</top>
<width>170</width>
<height>170</height>
<info>ListItem.Icon</info>
</control>
<control type="image">
<left>80</left>
<top>75</top>
<width>32</width>
<height>32</height>
<info>ListItem.Overlay</info>
</control>
<control type="label">
<left>30</left>
<top>180</top>
<width>190</width>
<height>22</height>
font13
<selectedcolor>green</selectedcolor>
<align>center</align>
<label>My Test label</label>
</control>
</itemlayout>
<focusedlayout height="220" width="220">
<control type="image">
<width>170</width>
<height>170</height>
<left>5</left>
<top>5</top>
<texture>folder-focus.png</texture>
<animation effect="zoom" end="0,0,120,120" time="100">focus</animation>
</control>
<control type="image">
<left>5</left>
<top>5</top>
<width>150</width>
<height>150</height>
<info>ListItem.Icon</info>
<animation effect="zoom" end="5,5,110,110" time="100">focus</animation>
</control>
<control type="image">
<left>80</left>
<top>75</top>
<width>32</width>
<height>32</height>
<info>ListItem.Overlay</info>
<animation effect="slide" end="5,5" time="100">focus</animation>
</control>
<control type="label">
<left>30</left>
<top>180</top>
<width>190</width>
<height>22</height>
font13
<selectedcolor>green</selectedcolor>
<align>center</align>
<info>ListItem.Label</info>
</control>
</focusedlayout>
<content>
<item id="1">
<label>My First Item</label>
<label2>Label 2</label2>
<icon>icon1.png</icon>
<thumb>thumb1.png</thumb>
<onclick>ActivateWindow(Home)</onclick>
<visible>true</visible>
<property name="foo">Some1stValueHere</property>
<property name="foo2">Some2ndValueHere</property>
</item>
<item id="2">
<label>My Second Item</label>
<label2>Label 2</label2>
<icon>icon2.png</icon>
<thumb>thumb2.png</thumb>
<onclick>ActivateWindow(MyMusicLibrary)</onclick>
<property name="foo">Some1stValueHere</property>
<property name="foo2">Some2ndValueHere</property>
</item>
<item id="2">
<label>My Third Item</label>
<label2>Label 2</label2>
<icon>icon2.png</icon>
<thumb>thumb2.png</thumb>
<onclick>ActivateWindow(MyMusicLibrary)</onclick>
<property name="foo">Some1stValueHere</property>
<property name="foo2">Some2ndValueHere</property>
</item>
<item id="2">
<label>My Fourth Item</label>
<label2>Label 2</label2>
<icon>icon2.png</icon>
<thumb>thumb2.png</thumb>
<onclick>ActivateWindow(MyMusicLibrary)</onclick>
<property name="foo">Some1stValueHere</property>
<property name="foo2">Some2ndValueHere</property>
</item>
<item id="2">
<label>My Fifth Item</label>
<label2>Label 2</label2>
<icon>icon2.png</icon>
<thumb>thumb2.png</thumb>
<onclick>ActivateWindow(MyMusicLibrary)</onclick>
<property name="foo">Some1stValueHere</property>
<property name="foo2">Some2ndValueHere</property>
</item>
<item id="2">
<label>My Sixth Item</label>
<label2>Label 2</label2>
<icon>icon2.png</icon>
<thumb>thumb2.png</thumb>
<onclick>ActivateWindow(MyMusicLibrary)</onclick>
<property name="foo">Some1stValueHere</property>
<property name="foo2">Some2ndValueHere</property>
</item>
</content>
</control>
</controls>
</window>

**ronie** · 2018-01-11, 03:13

(2018-01-11, 01:44)ajiratech Wrote: Thanks Ronie !
One question - regarding dynamic content, when I do python script to fetch the content, I'm assuming the response/result of that python script should be in XML format.

not really...

there are various ways to have a container filled by an addon:
1 a service addon that sets window properties. you can use those properties in the items inside your <content> section
2 a script addon, you'd have to include your xml file in the script instead of in the skin. the script can then load your xml and fill the container with listitems
3 a plugin addon that provides dynamic content.you reference the plugin inside the <content> tag.

depends on your usecase/preference which of those would work best for you.

should you want to explore option 3:
skin code: http://kodi.wiki/view/Skinning_Manual#Fi...ic_content

plugin tutorials:
http://kodi.wiki/view/Audio/video_add-on_tutorial
http://kodi.wiki/view/HOW-TO:Video_addon

ajiratech · 2018-01-11, 03:21

Thanks again, Ronie!

These links look good, I see python examples for http request. Thats exactly what I needed to get started.

Your time and help is much appreciated.

ajiratech · 2018-01-15, 05:35

Ronie, Thank you for the links.

They were very helpful, I've made quite a bit of progress and am getting a lot more comfortable with Skins, custom pages and python scripts. But am stuck on how to navigate from one Custom XML to another when the first page was populated with dynamic list using python addon.

Here is where I am at now...

I tested out the sample plugin - plugin.video.example and it works fine, I am able to navigate from page one to page two to actually playing a video if I use it as an addon and call it from under "Video" -> "addon".

But my use case is that I want a custom XML page that will eventually become the start page and also will be called via JSON api calls (thats a different topic so will post on that when I get there).

I created the page "customMainMenu.xml" (code below) and am calling this python plugin inside <content> </content> tags. This works fine for first page.

---------- this XML file is called customMainMenu.xml -------
<?xml version="1.0" encoding="UTF-8"?>
<window id="1111">
<defaultcontrol>2</defaultcontrol>
<controls>
<control type="panel" id="52">
<left>50</left>
<top>100</top>
<width>1300</width>
<height>900</height>
<onleft>9000</onleft>
<onright>60</onright>
<onup>52</onup>
<ondown>52</ondown>
<scrolltime tween="sine" easing="out">200</scrolltime>
<autoscroll>true</autoscroll>
<viewtype label="536">icon</viewtype>
<pagecontrol>60</pagecontrol>
<itemlayout height="300" width="400">
<control type="image">
<top>10</top>
<left>100</left>
<width>200</width>
<height>200</height>
<info>ListItem.Icon</info>
</control>
<control type="image">
<top>10</top>
<left>100</left>
<width>32</width>
<height>32</height>
<info>ListItem.Overlay</info>
</control>
<control type="label"> 
<top>220</top>
<left>50</left>
<width>300</width>
<height>22</height>
font15
<selectedcolor>green</selectedcolor>
<align>center</align>
<info>ListItem.Label</info>
</control>
<control type="label"> 
<top>250</top>
<left>50</left>
<width>300</width>
<height>22</height>
font11
<textcolor>grey</textcolor>
<selectedcolor>green</selectedcolor>
<align>center</align>
<info>ListItem.Label2</info>
</control>
</itemlayout>
<focusedlayout height="220" width="220">
<control type="image">
<top>5</top>
<left>95</left>
<width>210</width>
<height>210</height>
<texture>folder-focus.png</texture>
<animation effect="zoom" end="5,95,210,210" time="100">focus</animation>
</control>
<control type="image">
<top>10</top>
<left>100</left>
<width>200</width>
<height>200</height>
<info>ListItem.Icon</info>
<animation effect="zoom" end="10,100,200,200" time="100">focus</animation>
</control>
<control type="image">
<top>10</top>
<left>100</left>
<width>200</width>
<height>200</height>
<info>ListItem.Overlay</info>
<animation effect="slide" end="10,100" time="100">focus</animation>
</control>
<control type="label"> 
<top>220</top>
<left>50</left>
<width>300</width>
<height>22</height>
font15
<selectedcolor>green</selectedcolor>
<align>center</align>
<info>ListItem.Label</info>
</control>
<control type="label"> 
<top>250</top>
<left>50</left>
<width>300</width>
<height>22</height>
font11
<textcolor>grey</textcolor>
<selectedcolor>green</selectedcolor>
<align>center</align>
<info>ListItem.Label2</info>
</control>
</focusedlayout>
<include>MainWindowMouseButtons</include>
<content>plugin://plugin.video.example</content>
</control>
</controls>
</window>

The python script I'm using is slightly modified version of 'plugin.video.example'. This function is responsible for displaying the first page and it displays them just fine. The problem is when I click on any of the list items then it does not do anything and stays on this screen.

def list_categories():
"""
Create the list of video categories in the Kodi interface.
"""
# Set plugin category. It is displayed in some skins as the name
# of the current section.
xbmcplugin.setPluginCategory(_handle, 'My Video Collection')
# Set plugin content. It allows Kodi to select appropriate views
# for this type of content.
xbmcplugin.setContent(_handle, 'videos')
# Get video categories
categories = get_categories()
# Iterate through categories
for category in categories:
# Create a list item with a text label and a thumbnail image.
list_item = xbmcgui.ListItem(label=category)
# Set graphics (thumbnail, fanart, banner, poster, landscape etc.) for the list item.
# Here we use the same image for all items for simplicity's sake.
# In a real-life plugin you need to set each image accordingly.
list_item.setArt({'thumb': VIDEOS[category][0]['thumb'],
'icon': VIDEOS[category][0]['thumb'],
'fanart': VIDEOS[category][0]['thumb']})
# Set additional info for the list item.
# Here we use a category name for both properties for for simplicity's sake.
# setInfo allows to set various information for an item.
# For available properties see the following link:
# https://codedocs.xyz/xbmc/xbmc/group__py...2888fb5f14
# 'mediatype' is needed for a skin to display info for this ListItem correctly.
list_item.setInfo('video', {'title': category,
'genre': category,
'mediatype': 'video'})
# Create a URL for a plugin recursive call.
# Example: plugin://plugin.video.example/?action=listing&category=Animals
url = get_url(action='listing', category=category)
# is_folder = True means that this item opens a sub-list of lower level items.
is_folder = True
# Add our item to the Kodi virtual folder listing.
xbmcplugin.addDirectoryItem(_handle, url, list_item, is_folder)
# Add a sort method for the virtual folder items (alphabetically, ignore articles)
xbmcplugin.addSortMethod(_handle, xbmcplugin.SORT_METHOD_LABEL_IGNORE_THE)
# Finish creating a virtual folder.
xbmcplugin.endOfDirectory(_handle)

---- end of python method -----

I've tried adding list_item.setPath(path="ActivateWindow(1112) ) but that didn't do anything.

The only way I can load next page when I click on a list Item is when I add the onclick tags under control of type 'panel' in the XML file.
<onclick>ActivateWindow(1112)</onclick>

But with this now I don't have a way to find out which list item was clicked and how to load different pages/contents for different list items.

Any suggestions ?

**ronie** · 2018-01-15, 16:55

i don't think the <content>plugin://plugin.video.example</content> functionality supports browsing.
i guess it's only useful to list files, not folders.

ajiratech · 2018-01-15, 20:23

Thanks Ronie.

What I don't understand is how does the same plugin work for folders and files and navigates quite well when called from inside Video -> Addon -> plugin.video.example but it doesn't work inside content tags.

I see that Video -> addon -> shows the installed plugin - the file used for this is 'MyVideoNav.xml', but I don't see anything in 'MyVideoNav.xml' that tells it how to find the installed plugin.

Can you shed some light on this please? Maybe understanding how the plugin works directly will help me find a way to achieve my goals via alternate methods.

**ronie** · 2018-01-15, 22:11

the <content> functionality just provides a list of 'shortcuts' to the items in a plugin.
when you click on such a shortcut in your custom xml, it will run the plugin.
this means if it is a shortcut to a folder, it will open this folder in the plugin.
(it not not feed the contents of this folder back to your xml as you are expecting).

i just noticed there's a tiny bit missing in your xml code that cases your folders to be non-clickable,
you need to define a target, like this:

xml:
<content target="video">plugin://plugin.video.example</content>

**ronie** · 2018-01-15, 22:21

it might also be worth to have a look at the discussion that took place during the development of this functionality:
https://forum.kodi.tv/showthread.php?tid=176864
perhaps there's something useful in there that you could use.

the kodi source code for this feature can be found here:
https://github.com/xbmc/xbmc/pull/3522

ajiratech · 2018-01-15, 22:29

Thanks Ronie.

I changed the content tag to include target="video" like you suggested. I think this will take me a little further at the very least.

Now I get an error message "ERROR: Activate/ReplaceWindow called with invalid destination window: video" . Would you know if there is any specific window or file I should be including ?

I'll also go through your suggested reading material and codes in the post you made just now.

**ronie** · 2018-01-15, 23:55

ah damn, yeah 'video' is not valid anymore, use 'videos' instead.

ajiratech · 2018-01-16, 01:06

Thanks again!!

Changing to Videos, that fixed the un-clickable issue I was experiencing. I can now navigate. :-)

The subsequent folders now open in MyVideoNav.xml, just like they were when I accessed the plugin via Video -> Add on -> plugin.video.example

Although I don't like the layout of the default MyVideoNav.xml. I'll start looking into how Kodi makes the connection from target 'Videos' to 'MyVideoNav.xml' and then see if I can use a custom target like 'CustomVideos' that opens 'CustomVideoNav.xml'.

If you have any suggestions on where to look for this then please do share.

I really appreciate your time and help in getting me this far.