HOW-TO:Estuary Modification

From Official Kodi Wiki
Revision as of 22:26, 8 November 2017 by Zag (talk | contribs)
Jump to navigation Jump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

Introduction

Estuary is Kodi's default skin, so it makes a good example of how to get start with editing a skin

Estuary-logo.png

Setting up a developer environment for skinning

First thing we need to do is setup a simple skin development environment:

To get the most out of it you'll need to either make a new keymap.xml or add this to your existing one.

<keymap>
   <global>
       <keyboard>
           <F5>XBMC.ReloadSkin()</F5>
           <F7>Notification(Testing 123,Hello world)</F7>
           <F8>Skin.ToggleDebug()</F8>
       </keyboard>
   </global>
</keymap>

Keymap xml.jpg

You will need to copy this keymap.xml file into the Kodi userdata folder. In our example, we are using windows so I have copied this file into the C:\Users\user\AppData\Roaming\Kodi\userdata\keymaps folder.

Now we need a text editor to actually edit the files. Any text editor will work but we recommend something that can open multiple files at once such as Sublime Text or Notepad++

Testing your enviroment

Lets launch Kodi and try out our new skinners keymap features.

The following keys will then activate the corresponding action:

F5 - Reload skin (used to see any changes instantly without restarting XBMC)
F7 - Activated the KaiDialogToast.xml (used to display the notification dialog)
F8 - Show/Hide the Debug Info (used to display the currently active windows or dialogs)

As you can see all these features are incredibly important to a skinner.

Skinners keymap kodi.jpg

Structure of Estuary

The default skin is very nicely laid out in actually quite a simple way. In our case on Windows, you can access the skin files in this folder C:\Program Files (x86)\Kodi\addons\skin.estuary\xml

Below are some explanations of the files you will see in the Estuary XML folder:

The file "Home.xml" is the basic home screen you see on first load of Kodi.

Files that start with "My" are the main sub windows from the main screen such as Music or TVShows.

Files that start with "Includes_" are all files that incorporate common elements that can be used all over the skin.

Files that start with "Dialogue_" are all popups you see in the use of Kodi

Files that start with "View_" are all the specific views you see in the skin, such as wide list or the Poster view for example.

Files that start with "Settings" are simply to detail the settings menu.

As you can probably tell, editing a skin is actually pretty logical and great effort has been made by the original developers to make it easy to understand.



Making your first skin edit

As an example here, I am going to show you how to add a feature that was important to me but missing in the standard Estuary release.

This example will show you how to add a music rating to the wide list view.


Estuary mod music1.jpg


Currently the rating only shows under the album artwork when you have a single track focused on the right.

I will change this so that every rating shows next to each track name even when not focused.

First thing we need to do is find out what files to edit. Now this is pretty easy because we can press F8 on the keyboard to see the debug screen in Kodi.

Now browse to the screen you want to edit in Kodi and the debug text will change. In this case its changed to "MyMusicNav.xml" and Focus is "55 (Fixed list)".


Estuary mod music2.jpg


So go ahead and open these 2 files: "MyMusicNav.xml" and "View_55_WideList.xml". Its also important that we open the "includes.xml" file as this has many common elements that will help us.

At this point you may find it useful to start test deleting bits of the "View_55_WideList.xml". Try deleting different containers and control elements in the XML file.

You should quickly learn what bits do what with this method. For example if I remove the <itemlayout height="80" condition="Container.Content(songs)"> code section, all the track listings disappear!

Now we know what bits do what, we can start to edit. Lets look at this code:


Estuary mod music3.jpg


As you can see, its quite simple. This code shows the duration of the track on the widelist music screen. You can see where the control is positioned, how its aligned and what colour it is. In this case its grey.

As a quick test lets change the colour to yellow! Just change "<textcolor>grey</textcolor>" to "<textcolor>yellow</textcolor>". Go back to Kodi and hit F5 on the keyboard and all your track lengths go yellow!


Estuary mod music4.jpg


Magic! Now lets try adding some text instead of the duration, just as a test. Just change "<label>$INFO[ListItem.Label2]</label>" to "<label>Blah!</label>"


Estuary mod music6.jpg


OK so that was fun, but its probably best to change that back now. Undo(ctrl + z) and redo(ctrl + y) are your friends while testing :)

So lets actually get on with our modification, what we need to do is find out what label the user rating is. To find this out we need to look in the "includes.xml" file as the rating star resides in there as its a re-usable element all over the skin.

You can do a quick text search "Ctrl + s" and look for "rating". Easy huh!


Estuary mod music5.jpg


This looks quite complicated (and it is a little due to the settings in there) but actually it just shows a rating "circle" with either the user or the overall rating inside it.

What we are really looking for here is the infolabel string. We've circled it above as ListItem.UserRating so lets copy (Ctrl + c) that simple string for use later.

We don't need to do anything more with the includes file at this time but hopefully you can see the power of using re-usable elements in this file.

So now go back to your "View_55_WideList.xml" file and lets add a new control. All we are going to do is copy the duration control to just below.


Estuary mod music7.jpg


As you can see from the screenshot we now have a new control which has been modified with a few new values.

We've changed the position of the control to be slightly to the left of the song duration control.

We've also changed the colour to yellow and the label to our rating listitem. In this case its: "$INFO[ListItem.UserRating]"


Estuary mod music8.jpg

Right, that's it. We have managed to get the rating to show on each song track listing. Our objective has been achieved!

This example is obviously not complete, we need to change the control that is selected to also show the rating and possibly change the actual rating to star images but you get the idea!

Editing skins is easy, logical and quick once you get used to it. Good luck and let us know how you get on.


More advanced edits

Just to complete this guide, lets try and add some graphical stars to the widelist view, while also adding the focused stars.

Lets change the code we added earlier to an image control


Estuary rating image control.jpg


And we end up with something like this!


Estuary rating mod4.jpg


Last but not least, we need to add a new control for when the song is in focus by the user. This will ensure that the stars do not disappear when the user moves over each song with the selection bar.


Estuary rating image control.jpg


So all we have done is copy the same code again and put it this time in the control, that is visible when "HasFocus" is selected.

All done!


See also

Development: