GUI tutorial

Development

Add-on development

Python development

GUI tutorial

Introduction

Building on the first Hello World tutorial, this guide explores different ways to create the graphical user interface (GUI) for the Hello World example in Kodi. It introduces several approaches to displaying a simple message on screen, explaining how each method works and highlighting the differences between them.

Examples

Using Kodi's Python API

Following a simple example demonstrating how to use Kodi's Python modules to display a notification for five seconds.

More info on Built-In functions can be found in the List of built-in functions
Note: Kodi uses the term "Built-In Functions" in its documentation. These are Kodi commands executed through the Python function xbmc.executebuiltin(). They should not be confused with Python's built-in functions, such as print().

Following are two examples. One with just a simple notification dialog and the other with the same dialog but with using variables. It all depends on how extended you scripts will be. Since we require all used strings to be localized (translatable) we recommend the second option.

using xbmc

import xbmc

xbmc.executebuiltin('Notification(Hello World,This is a simple example of notifications,5000,/script.hellow.world.png)')

import xbmc
import xbmcaddon

__addon__ = xbmcaddon.Addon()
__addonname__ = __addon__.getAddonInfo('name')
__icon__ = __addon__.getAddonInfo('icon')
 
line1 = "This is a simple example of notifications"
time = 5000 #in miliseconds
 
xbmc.executebuiltin('Notification(%s, %s, %d, %s)'%(__addonname__,line1, time, __icon__))

using xbmcgui module

This will show a OK dialog box with the message. More info on xbmcgui functions can be found here: [ http://mirrors.xbmc.org/docs/python-docs/16.x-jarvis/xbmcgui.html#Dialog ]

import xbmcaddon
import xbmcgui

__addon__ = xbmcaddon.Addon()
__addonname__ = __addon__.getAddonInfo('name')

line1 = "This is a simple example of OK dialog"
line2 = "Showing this message using"
line3 = "XBMC python modules"

xbmcgui.Dialog().ok(__addonname__, line1, line2, line3)

Using xbmc modules & JSON-RPC API

More info on JSON-RPC API can be found here: JSON-RPC API

This JSON-RPC command send through various ways and will execute the addon code that is shown below.

{
    "jsonrpc": "2.0",
    "id": 0,
    "method": "Addons.ExecuteAddon",
    "params": {
        "addonid": "script.popup",
        "params": {
            "image": "D:\\heartagram.jpg",
            "line1": "Hello World",
            "line2": "Showing this message using",
            "line3": "Combination of Kodi python modules and",
            "line4": "JSON-RPC API interface",
            "line5": "Have fun coding"
        }
    }
}

This python code will create several controls using xbmcgui module and fill these will the message send through JSON-RPC:

import xbmcgui
import sys
import urlparse

class PopupWindow(xbmcgui.WindowDialog):
    def __init__(self, image, line1, line2, line3, line4, line5):
        self.addControl(xbmcgui.ControlImage(x=25, y=25, width=150, height=150, filename=image[0]))
        self.addControl(xbmcgui.ControlLabel(x=190, y=25, width=500, height=25, label=line1[0]))
        self.addControl(xbmcgui.ControlLabel(x=190, y=50, width=500, height=25, label=line2[0]))
        self.addControl(xbmcgui.ControlLabel(x=190, y=75, width=500, height=25, label=line3[0]))
        self.addControl(xbmcgui.ControlLabel(x=190, y=100, width=500, height=25, label=line4[0]))
        self.addControl(xbmcgui.ControlLabel(x=190, y=125, width=500, height=25, label=line5[0]))

if __name__ == '__main__':
    params = urlparse.parse_qs('&'.join(sys.argv[1:]))
    window = PopupWindow(**params)
    window.show()
    xbmc.sleep(5000)
    window.close()
    del window

See also

Development:

• Addon Settings
• Python development
• Skinning