Login at Kodi Home

circle_ · (This post was last modified: 2010-12-17, 01:04 by circle_.)

I'm in the process of altering (Read: butchering) Confluence to get my head around skinning and eventually create my own skin. I'll post some basic questions here that I couldn't find answers to in the Wiki or by trial and error.

I'm wondering how to space list items different distances apart. EG. in the screenshot I'm trying to get Video, Audio and Image grouped to the left but have System right aligned while still being selectable in the same list. Does that make sense?

Here's the code section. You'll notice I created a separate itemlayout control with a different posx to use for System but I don't think its being told to affect the System item correctly?

Code:
            <control type="list" id="9000">

                <posx>-175</posx>

                <posy>202r</posy>

                <width>1515</width>

                <height>100</height>

                <onleft>9000</onleft>

                <onright>9000</onright>

                <onup>10</onup>

                <ondown>9001</ondown>

                <pagecontrol>-</pagecontrol>

                <focusposition>1</focusposition>

                     <orientation>horizontal</orientation>

                <animation effect="fade" start="0" end="100" time="200">Visible</animation>

                <animation effect="fade" start="100" end="30" time="200" condition="Window.IsVisible(1113) | ControlGroup(9001).HasFocus | ControlGroup(10).HasFocus | Control.HasFocus(8000) | Control.HasFocus(8001)">conditional</animation>

                <itemlayout height="100" width="150">

                    <control type="image">

                        <posx>355</posx>

                        <posy>21</posy>

                        <width>121</width>

                        <height>31</height>

                        <texture>$INFO[ListItem.Icon]</texture>

                    </control>

                    <control type="image">

                        <posx>580</posx>

                        <posy>21</posy>

                        <width>121</width>

                        <height>31</height>

                        <texture>$INFO[ListItem.Icon2]</texture>

                    </control>

                </itemlayout>

                <focusedlayout height="100" width="150">

                    <control type="image">

                        <posx>355</posx>

                        <posy>21</posy>

                        <width>121</width>

                        <height>31</height>

                        <texture>$INFO[ListItem.Icon]</texture>

                    </control>

                    <control type="image">

                        <posx>580</posx>

                        <posy>21</posy>

                        <width>121</width>

                        <height>31</height>

                        <texture>$INFO[ListItem.Icon2]</texture>

                    </control>

                </focusedlayout>

                <content>

                    <item id="2">

                        <description>Videos</description>

                        <label>3</label>

                        <onclick>ActivateWindow(Videos)</onclick>

                        <icon>special://skin/media/Video.png</icon>

                        <visible>!Skin.HasSetting(HomeMenuNoVideosButton)</visible>

                    </item>

                    <item id="3">

                        <description>Audio</description>

                        <label>2</label>

                        <onclick>ActivateWindow(Music)</onclick>

                        <icon>special://skin/media/Audio.png</icon>

                        <visible>!Skin.HasSetting(HomeMenuNoMusicButton)</visible>

                    </item>

                    <item id="4">

                        <description>Image</description>

                        <label>1</label>

                        <onclick>ActivateWindow(Pictures)</onclick>

                        <icon>special://skin/media/Image.png</icon>

                        <visible>!Skin.HasSetting(HomeMenuNoPicturesButton)</visible>

                    </item>

                    <item id="5">

                        <description>System</description>

                        <label2>13000</label2>

                        <onclick>ActivateWindow(Settings)</onclick>

                        <icon>special://skin/media/System.png</icon>

                    </item>

                </content>

            </control>

I actually took this part of code from Alaska Revisited because I couldn't get Confluence code to display my images correctly. This code worked right away but now the button image displays as the background as well. I haven't tried to tackle that yet but if anyone has any tips to stop that I'm all ears. *EDIT* Got this background thing sorted. All good.

Oh and one last thing while I'm posting, is it possible to underline the submenu items when they are focused?

**ronie** · 2010-12-17, 01:51

circle_ Wrote:I'm wondering how to space list items different distances apart.

you can't.
one way to get around it may be to put the labels outside of the list ('CoverFlow technique'),
or forget about the list and just use buttons for the items.

circle_ Wrote:Oh and one last thing while I'm posting, is it possible to underline the submenu items when they are focused?

as far as i know xbmc does not support underlining of test,
so just use a separate image to 'fake' it.

circle_ · 2010-12-17, 04:09

Thanks for the tips. I went for the 'forget about the list and just use buttons for the items' option but something has gone horribly wrong and now my skin is just a black screen.

I put the button controls within a group control originally and also tried removing the group control and having the buttons not within a container but same black screen outcome for both. I also tried a few other things I thought might be the problem but to no avail.

Here's the xml code snippet if anyone has time to give it a once over.
If there's another way I should ask for help rather than the forums let me know.
Much appreciated.

Code:
        <control type="group" id="9000">

                <posx>-175</posx>

                <posy>202r</posy>

                    <control type="button" id="2">

                        <description>Videos</description>

                        <label>3</label>

                        <posx>355</posx>

                        <posy>21</posy>

                        <width>121</width>

                        <height>31</height>

                        <onclick>ActivateWindow(Videos)</onclick>

                        <texturefocus>Video.png</texture>

                        <texturenofocus>Video.png</texture>

                        <onleft>5</onleft>

                        <onright>3</onright>

                        <onup>10</onup>

                        <ondown>9001</ondown>

                    </control>

                    <control type="button" id="3">

                        <description>Audio</description>

                        <label>2</label>

                        <posx>370</posx>

                        <posy>21</posy>

                        <width>121</width>

                        <height>31</height>

                        <onclick>ActivateWindow(Music)</onclick>

                        <texturefocus>Audio.png</texture>

                        <texturenofocus>Audio.png</texture>

                        <onleft>2</onleft>

                        <onright>4</onright>

                        <onup>10</onup>

                        <ondown>9001</ondown>

                    </control>

                    <control type="button" id="4">

                        <description>Image</description>

                        <label>1</label>

                        <posx>400</posx>

                        <posy>21</posy>

                        <width>121</width>

                        <height>31</height>

                        <onclick>ActivateWindow(Pictures)</onclick>

                        <texturefocus>Image.png</texture>

                        <texturenofocus>Image.png</texture>

                        <onleft>3</onleft>

                        <onright>5</onright>

                        <onup>10</onup>

                        <ondown>9001</ondown>

                    </control>

                    <control type="button" id="5">

                        <description>System</description>

                        <label>13000</label>

                        <posx>470</posx>

                        <posy>21</posy>

                        <width>121</width>

                        <height>31</height>

                        <onclick>ActivateWindow(Settings)</onclick>

                        <texturefocus>System.png</texture>

                        <texturenofocus>System.png</texture>

                        <onleft>4</onleft>

                        <onright>2</onright>

                        <onup>10</onup>

                        <ondown>9001</ondown>

                    </control>

            </control>

**ronie** · 2010-12-17, 12:01

these are invalid:

<texturefocus>Video.png</texture>
<texturenofocus>Video.png</texture>

circle_ · 2010-12-17, 22:49

Ahh of course. Thats what I get for staring at it for so long.
Cheers!

**Hitcher** · 2010-12-17, 23:09

Very handy for any error checking -

http://www.w3schools.com/Dom/dom_validate.asp

stoli · 2010-12-17, 23:19

@circle - highly recommend notepad++ with the xml plugin for editing. It will verify your xml on the fly and save a lot of headaches.

KiSUAN · 2010-12-17, 23:42

stoli Wrote:@circle - highly recommend notepad++ with the xml plugin for editing. It will verify your xml on the fly and save a lot of headaches.

This and compare are the shit!!! notepad++ rocks...

circle_ · 2010-12-18, 14:36

Oh great. Thanks for the tips. I've just been using wordpad during slow days at work.
I'll definitely use Notepad++ and XML Dom now though.
Cheers.

ZombieRobot · 2010-12-18, 20:28

any other plugins for notepad++ you guys use for skinning i haven't used the xml plugin yet will give it a go today

**Hitcher** · 2010-12-18, 21:29

I use the XML plugin and hot-key the 'Pretty print with line breaks' function.

circle_ · 2010-12-20, 07:47

This is much more enjoyable using Notepad++.

However I've hit another speed bump. I have my home screen just about how I wanted it to look. The buttons as opposed to a list menu work well until I try to open the sub-menus.

When my main menu was a list, the sub-menus opened fine. Now they don't open at all.
Currently the home screen looks like this:

But my sub-menus from the mockup below (which worked and looked fine previously) are broke:

Originally I had my sub-menus working when pressing down from focussed state when the menu was a list, ultimately I'd like the sub-menus to appear onfocus without having to push anything.

I've uploaded my Home.xml to pastebin:
http://pastebin.ca/2024190

I've been stuck on this most of the day. I'd really appreciate any help, even just suggestions of what to look at/for and I'll go from there.

bridgman · 2010-12-20, 14:11

circle_ Wrote:This is much more enjoyable using Notepad++.

I've been stuck on this most of the day. I'd really appreciate any help, even just suggestions of what to look at/for and I'll go from there.

Maybe something like this

PHP Code:
Container(9000).HasFocus(2)
or
Control(9000).HasFocus(2) 

not sure without loading up myself there is most likely an easier way

bridgman · 2010-12-20, 14:26

Hitcher Wrote:I use the XML plugin and hot-key the 'Pretty print with line breaks' function.

I like that plugin quite a bit. Today to get a more details on what was wrong with a few XMLs I loaded them up in Dreamweaver. Worked out pretty good. Added the 720 folder as a SITE and had the XMLs listed to the right .Real convenient to have them right there

not my pic or files but you get the point from the image

circle_ · 2010-12-22, 00:55

bridgman Wrote:Maybe something like this

PHP Code:
Container(9000).HasFocus(2) or Control(9000).HasFocus(2)
not sure without loading up myself there is most likely an easier way

Thanks bridgman. It ended up being ControlGroup that got it working.

Here comes a stupid question... How to I change the wording for the sub-menus? I have searched through all the XML files but can't find anywhere that determines the actual wording for the sub-menus. 'Files', 'Library', 'Plugins', 'System Info' etc..

I suspect different options appear depending on what media is available to XBMC, which would suggest the wording is harcoded, but I'm on my work comp (slow time of year) and don't have any media available to link to.

Also beside the sub-menu wording I've pretty much completed my home screen. Any suggestions as to the next logical step to skin? Movie views?