Addon with custom gui
#1
I'm thinking of trying to write an addon with it's own custom look, I've seen a couple of addons (Sonos and Spotify) i that do this and was just wondering if anyone knew of any decent web pages that can help with doing this?
Had a little look around and haven't found anything particularly useful yet, I'll be digging around the couple of addons that I've got that do it to hopefully learn from their code, but any pointers would be useful Big Grin
Reply
#2
i don't think we have (m)any examples of this in our wiki.

you basically have two choices:
1) use the Window (or WindowDialog) class.
http://mirrors.xbmc.org/docs/python-docs...tml#Window

2) use the WindowXML (or WindowXMLDialog) class
http://mirrors.xbmc.org/docs/python-docs...#WindowXML

if you use the first one, you'll have to code your custom look in python.
for the second option, you can code your look in xml (like skins do).

imo the second option is the way to go, as i think it's easier and provides more customization options.
should you go this route, the skinning manual has all the info (and more):
http://kodi.wiki/view/Skinning_Manual


in this case, looking at how other addons do it, isn't a bad way to start btw ;-)
Do not PM or e-mail Team-Kodi members directly asking for support.
Always read the Forum rules, Kodi online-manual, FAQ, Help and Search the forum before posting.
Reply
#3
Music 
If you only need something simple then you can also checkout PyXBMCt which is a Python micro-framework created to simplify creating GUI for Kodi (XBMC)

http://forum.kodi.tv/showthread.php?tid=174859

(2013-10-03, 12:17)Roman_V_M Wrote: I'm glad to present you PyXBMCt — a framework which simplifies creating arbitrary UIs for XBMC addons. UIs based on PyXBMCt may not be so fancy as skinned UIs based on WindowXML, but, in my opinion, it is relatively easy to learn, especially for those who are familiar with general-purpose Python GUI frameworks, like Tkinter, PyQt, PySide etc. And it does not require the knowledge of XBMC skinning, so it's a good choice for beginners.

Introduction
PyXBMCt is a Python framework for simple XBMC addon UI building. It was inspired by PyQt (hence the name) and shares the same basic principles, so those who are familiar with PyQt/PySide should feel themselves right at home. The framework provides 4 base classes, 9 ready-to-use widgets or, in XBMC terms, controls, a Grid layout manager and an event connection manager.
PyXBMCt uses texture images from XBMC’s default Confluence skin to decorate its visual elements. Those textures are included in PyXBMCt, so UI based on it will have the same look in different skins.

...

Links

PyXBMCt developer's documentation: http://romanvm.github.io/PyXBMCt
PyXBMCt module repository on Github: https://github.com/romanvm/script.module.pyxbmct
A demo addon with a comprehensive usage example of all PyXBMCt controls: https://github.com/romanvm/pyxbmct.demo
The demo addon repository on Github: https://github.com/romanvm/pyxbmct.demo

The example of a multi-select dialog based on PyXBMCt.
Reply
#4
I need a push in the right direction:

How do I go about copying/modifying a gui like the View_50_List.xml in estuary into my addon?
The design is already there, I just want to change it a little. (increase the height of the individual DirectoryItem s)

1.)
I've tried copying View_50_List.xml into my 720p folder and calling it from code.
I can't even make it show up by making all <visible> to "true". It looks like i need to convert/copy all the includes.

--OR--

2.)
another method is to create my own .xml file and 'include' View_50_List
Code:
<?xml version="1.0" encoding="UTF-8"?>
<window>
    <controls>
        <include>DefaultBackground</include>
        <include>View_50_List</include>
    </controls>
</window>
the control shows up but i need to position/resize all controls manually. I'm not sure how customizeable it is in the end


Which way is better?
Reply
#5
I'm testing out method 2.

The controls are bigger than the screen. how do I scale it to fit my screensize?
Reply
#6
looks like there are no shortcuts to making your own xml based gui for addons:

as far as I can tell, addons cannot define its own <include> but skin includes are available.
Reply
#7
Sorry to hi-jack your thread but I too am trying to create my own addon with a custom GUI. I'm wanting to create an EPG which integrates with an IPTV service I use. I can see that there are already xml templates for the current PVR/EPG in Kodi. Could I just load one of those xml's, for example, MyPVRGuide.xml and just code my own login in python? Such as populate the grid with custom EPG info and get which item is pressed?

I've got experience with Python (as a scripting language, not creating UI's) and Java experience with javafx but I'm completely stumped with Kodi's take on addon development. I can load and xml template within my addon, but no idea how to interact with the controls and populate lists?
Reply
#8
I'm in the process of trying this out and so far I have not hit a brick wall yet.

Here's what I got:
I've seen code that loads those pre-made xml, populate it and get the item that was selected by the user.
here

populating textboxes and buttons from python is straightforward. (get control id and set its properties)
the beauty about the above example is that it shows how you use a listitem to populate a list in the xml and handle which item the user selected.

**debugging xml based gui is hard.


I think there is a risk in using the pre-made skins.
Kodi17 has estuary as default skin so you might have issues if your code is expecting confluence.
Reply
#9
Okay, I've hit a brick wall:

I'm trying to get an item on the list control to "execute" when the user clicks it but I cannot make it work like xbmcplugin.addDirectoryItem.
with xbmcplugin.addDirectoryItem, you can provide "http://...mp4" or "plugin://" links and it will resolve.

with the custom gui, I can only make it resolve "http://...mp4" links and it plays in the background
Code:
class cGUI(xbmcgui.WindowXMLDialog):
    pluginhandle=int( sys.argv[1] )
    def __init__(self, *args, **kwargs):
        xbmcgui.WindowXMLDialog.__init__(self, *args, **kwargs)
        self.listing = kwargs.get("listing")
    def onInit(self):
        self.gui_listbox = self.getControl(55)
        #url="plugin://plugin.video.reddit_viewer/?url=plugin%3A%2F%2Fplugin.video.youtube%2Fplay%2F%3Fvideo_id%3D73lsIXzBar0&mode=playVideo"
        url="http://i.imgur.com/ARdeL4F.mp4"

        listitem = xbmcgui.ListItem(label='try me!', label2="<", iconImage='DefaultAddon.png',path=url)
        listitem.setPath(url)
        self.gui_listbox.addItem(listitem)

        self.gui_listbox.addItems(self.listing)
        self.setFocus(self.gui_listbox)
        pass

    def onClick(self, controlID):
        if controlID == 55:
            num = self.gui_listbox.getSelectedPosition()
            item = self.gui_listbox.getSelectedItem()

            if num == 0:
                log( "  %d clicked on %d" %(self.pluginhandle, num ) )
                xbmcplugin.setResolvedUrl(self.pluginhandle, True, item)
                #xbmc.executebuiltin('RunPlugin(%s)' %di_url )  #doesn't work for videos(Attempt to use invalid handle -1)

Any suggestions on what else I can try?
Reply
#10
(2016-07-12, 07:53)gedisony Wrote: Okay, I've hit a brick wall:

I'm trying to get an item on the list control to "execute" when the user clicks it but I cannot make it work like xbmcplugin.addDirectoryItem.
with xbmcplugin.addDirectoryItem, you can provide "http://...mp4" or "plugin://" links and it will resolve.

with the custom gui, I can only make it resolve "http://...mp4" links and it plays in the background
Code:
class cGUI(xbmcgui.WindowXMLDialog):
    pluginhandle=int( sys.argv[1] )
    def __init__(self, *args, **kwargs):
        xbmcgui.WindowXMLDialog.__init__(self, *args, **kwargs)
        self.listing = kwargs.get("listing")
    def onInit(self):
        self.gui_listbox = self.getControl(55)
        #url="plugin://plugin.video.reddit_viewer/?url=plugin%3A%2F%2Fplugin.video.youtube%2Fplay%2F%3Fvideo_id%3D73lsIXzBar0&mode=playVideo"
        url="http://i.imgur.com/ARdeL4F.mp4"

        listitem = xbmcgui.ListItem(label='try me!', label2="<", iconImage='DefaultAddon.png',path=url)
        listitem.setPath(url)
        self.gui_listbox.addItem(listitem)

        self.gui_listbox.addItems(self.listing)
        self.setFocus(self.gui_listbox)
        pass

    def onClick(self, controlID):
        if controlID == 55:
            num = self.gui_listbox.getSelectedPosition()
            item = self.gui_listbox.getSelectedItem()

            if num == 0:
                log( "  %d clicked on %d" %(self.pluginhandle, num ) )
                xbmcplugin.setResolvedUrl(self.pluginhandle, True, item)
                #xbmc.executebuiltin('RunPlugin(%s)' %di_url )  #doesn't work for videos(Attempt to use invalid handle -1)

Any suggestions on what else I can try?

You can't do it like that as you aren't in a plugin, you'll need to play the list item "yourself", e.g..

Code:
pl = xbmc.PlayList(xbmc.PLAYLIST_VIDEO)
pl.clear()
pl.add(url, item)
xbmc.Player().play(pl)

See http://mirrors.xbmc.org/docs/python-docs...tml#Player

Actually since you also need the URL, which you don't have access to in your onClick method (I don't think you can get access to the value set using the setPath call), so you will need to add that to the listitem as a property when you create it, i.e.

Code:
listitem.setProperty('Url', url)

then to get it back

Code:
url = item.getProperty('Url')
pl = xbmc.PlayList(xbmc.PLAYLIST_VIDEO)
pl.clear()
pl.add(url, item)
xbmc.Player().play(pl)


Obviously just being able to play the listitem would make much more sense, but Kodi doesn't allow that, well I've never been able to work out how anyway Smile

HTH

(great video by the way LOL)

Edit
Code above will play the video fullscreen, if you want a smaller player in your gui you can add a videowindow in your XML, i.e

Code:
<control type="videowindow">
    <posx>14</posx>
    <posy>11</posy>
    <width>422</width>
    <height>240</height>
</control>

And then call:

Code:
xbmc.Player().play(pl, windowed=True)
Reply
#11
Thank you very much!!!

I was trying so many things and couldn't get it to work.

extra thanks to the <control type="videowindow"> edit too!
I would have spent a lot of time figuring out how to hide the gui so that the video will play in the foreground.
Reply
#12
in the end i've gone with PyXBMCt it seems fairly straight forward, and for me at least writing the gui in Python seems easier than doing it in XML (mainly as I've never tried, so I'm probably completely wrong lol) once I've finished I'll have a read through the comments above and see if i can move it over to an XML based layout
Reply
#13
OK, so hit a wall with PyXBMCt with it not allowing for custom onFocus events on controls. Had a look at creating without it and at the moment am using xbmcgui.Window and am having the exact same issue.
So I've written a simple bit of code which I've added below, this just outputs to the log when a button is clicked, it should also do this when hovered a control but it doesnt... unless I'm reading the documentation wrong.

Was thinking of using onAction instead, but was wondering how to get button id and the action performed on it i.e click, focus

Code:
import xbmc, xbmcplugin, xbmcaddon, xbmcgui  

sysarg=str(sys.argv[1])
ADDON_ID='plugin.video.window'
addon = xbmcaddon.Addon(id=ADDON_ID)

class MyAddon(xbmcgui.Window):        
    def __init__(self):
        self.button=xbmcgui.ControlButton (100, 250, 200, 50, 'Status', font='font14')
        self.addControl(self.button)
        xbmc.executebuiltin('Dialog.Close(10138)')
    
    #def onAction(self, action):
    #    xbmc.log(str(action.getButtonCode())+" "+str(action.getAmount1()), xbmc.LOGERROR)
    #    self.close(self)
    
    def onControl(self, control):
        xbmc.log("clicked", xbmc.LOGERROR)
        self.close(self)
        
    def onFocus(self, controlId):
        xbmc.log("focused", xbmc.LOGERROR)
        self.close(self)
    
if __name__ == '__main__':
    myaddon = MyAddon()
    myaddon.doModal()
    del myaddon
Reply
#14
2 ptom

xbmcgui.Window event callbacks work differently for XML and non-XML windows. Some of them work for the first type, other - for the second. Quick example: for non-XML windows control events are intercepted via onControl method, but for XML windows - via onClick. The last one simply do not work for non-XML. I have no idea if onFocus works for XML, but for non-XML it surely does not, as I've told you in another topic.

PS. onAction intercepts keyboard actions and has nothing to do with on-screen Controls.
Reply
#15
(2016-07-20, 14:05)Roman_V_M Wrote: xbmcgui.Window event callbacks work differently for XML and non-XML windows. Some of them work for the first type, other - for the second. Quick example: for non-XML windows control events are intercepted via onControl method, but for XML windows - via onClick. The last one simply do not work for non-XML. I have no idea if onFocus works for XML, but for non-XML it surely does not, as I've told you in another topic.

PS. onAction intercepts keyboard actions and has nothing to do with on-screen Controls.

im just going by the documentation here http://mirrors.xbmc.org/docs/python-docs...tml#Window where it saying that it's part of Window and that WindowXML inherits them, totally agree with you that they don't work I'm just wondering why seeing as how it's in the doc.
Oddly though onAction does trigger if you hover it, but as far as I can see I can't get button ID or what the action was, but as you're saying if it's for keyboard controls then that's probably why I can't pull any information
Reply

Logout Mark Read Team Forum Stats Members Help
Addon with custom gui0