Kodi Community Forum

Full Version: Menu - Highlight / Submenu Positioning.
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hi all me again Smile

Still playing around with confluence and learning loads, getting there slowly with how i want tings to look and still enjoying it immensely despite some frustrations, my knowledge is coming on slowly though lol.

At the moment I'm currently playing around with my menu positioning and the sub-menu positioning.

I have finally got the highlights and am working on the sub-menu positioning.

I thought i had it figured out and everything how i want it when i realized a problem with my approach.

Currently as i hover over my menu items the highlight follows the cursor as it should and the sub-menu pop up as they should under the menu items, the problems arise when i hide a menu item, the remaining menu items highlight and sub-menus still retain there original values / positions.

How do i make it so that when i hide a menu item the rest of the reposition accordingly?

All pointers very much appreciated.

Pastebin link to my Home.xml

Is there an irc channel where i can ask questions also or are the forums the best place to ask?

You can put them all in a grouplist, remove their positions and let the grouplist control them instead then, when one or more are hidden, the grouplist will reposition the others.
... or use a container (fixed/wraplist, panel, list) and put the visible conditions on the items in <content> section.
Hi thanks for the replies.

Looked at the wiki and think i have a basic understanding but not sure how to implement the group as at the moment i have a list, would the group list change the look and feel of my menu?

I had it in my head to use visible conditions but not sure how to implement them, sounds complicated,

Any chance of an example for the first of my menu items i could replicate / learn from / play with, just so i get used to the syntax and how to lay it out?

Bit cheeky i know, learn quicker from examples and playing Smile

Code:
<!--Home Highlight -->
            <control type="image">
                <posx>10</posx>
                <posy>50</posy>
                <width>1260</width>
                <height>60</height>
                <texture>Highlight.png</texture>
                <animation effect="slide"  end="0,0" time="10" condition="Container(9000).HasFocus(10)">conditional</animation>
                <animation effect="slide"  end="0,70" time="10" condition="Container(9000).HasFocus(11)">conditional</animation>
                <animation effect="slide"  end="0,140" time="10" condition="Container(9000).HasFocus(3)">conditional</animation>
                <animation effect="slide"  end="0,210" time="10" condition="Container(9000).HasFocus(4)">conditional</animation>
                <animation effect="slide"  end="0,280" time="10" condition="Container(9000).HasFocus(2)">conditional</animation>
                <animation effect="slide"  end="0,350" time="10" condition="Container(9000).HasFocus(7)">conditional</animation>
                <animation effect="slide"  end="0,420" time="10" condition="Container(9000).HasFocus(1)">conditional</animation>
                <animation effect="slide"  end="0,470" time="10" condition="Container(9000).HasFocus(6)">conditional</animation>
                <animation effect="slide"  end="0,490" time="10" condition="Container(9000).HasFocus(5)">conditional</animation>
            </control>            

<!--Home List-->            
            <control type="list" id="9000">
                <posx>15</posx>
                <posy>60</posy>
                <width>300</width>
                <height>720</height>
                <onleft>9000</onleft>
                <onright>9001</onright>
                <onup condition="System.HasAddon(script.globalsearch)">608</onup>
                <onup condition="!System.HasAddon(script.globalsearch)">603</onup>
                <ondown>9000</ondown>
                <pagecontrol>-</pagecontrol>
                <scrolltime>300</scrolltime>
                <focusposition>2</focusposition>
                <movement>1</movement>
                <orientation>Vertical</orientation>
        <!--Menu Text-->                
                <itemlayout height="70" width="300">
                    <control type="label">
                        <posx>15</posx>
                        <posy>0</posy>
                        <width>290</width>
                        <height>50</height>
                        <font>font_MainMenu</font>
                        <textcolor>grey3</textcolor>
                        <align>left</align>
                        <label>$INFO[ListItem.Label]</label>
                    </control>
                </itemlayout>

                <focusedlayout height="70" width="300">
        <!--Unfocused Item-->
                    <control type="label">
                        <posx>15</posx>
                        <posy>0</posy>
                        <width>290</width>
                        <height>50</height>
                        <font>font_MainMenu</font>
                        <textcolor>grey3</textcolor>
                        <align>left</align>
                        <label>$INFO[ListItem.Label]</label>
                    </control>
        <!--Focused Item-->
                    <control type="label">
                        <posx>15</posx>
                        <posy>0</posy>
                        <width>290</width>
                        <height>50</height>
                        <font>font_MainMenu</font>
                        <textcolor>blue</textcolor>
                        <align>left</align>
                        <label>$INFO[ListItem.Label]</label>
                        <visible>Control.HasFocus(9000)</visible>
                        <include>VisibleFadeEffect</include>
                    </control>
                </focusedlayout>
    <!--The List-->
                <content>
                    <item id="10">
                        <label>20342</label>
                        <onclick>ActivateWindow(Videos,MovieTitles,return)</onclick>
                        <icon>-</icon>
                        <thumb>-</thumb>
                        <visible>!Skin.HasSetting(HomeMenuNoMoviesButton) + Library.HasContent(Movies)</visible>
                    </item>            
                    <item id="11">
                        <label>20343</label>
                        <onclick>ActivateWindow(Videos,TVShowTitles,return)</onclick>
                        <icon>-</icon>
                        <thumb>-</thumb>
                        <visible>!Skin.HasSetting(HomeMenuNoTVShowsButton) + Library.HasContent(TVShows)</visible>
                    </item>
                    <item id="3">
                        <label>2</label>
                        <onclick>ActivateWindow(Music)</onclick>
                        <icon>-</icon>
                        <thumb>-</thumb>
                        <visible>!Skin.HasSetting(HomeMenuNoMusicButton)</visible>
                    </item>
                </content>
            </control>
(2012-07-05, 19:03)Hitcher Wrote: [ -> ]You can put them all in a grouplist, remove their positions and let the grouplist control them instead then, when one or more are hidden, the grouplist will reposition the others.

Been a while but decided to have another go getting my head around this and still having a problems Confused

Any chance you or some other generous person could provide me with a basic example of what you mean by put them in a grouplist?

I'm confident that once i get my head around this ill be able to move on, be it very slowly lol.

Many thanks in advance.
Have a look at Foundation's MyVideoNav.xml for grouplist id=9000.
Hi and thanks

OK i converted my list to a grouplist and think i did it right (at work at moment so no way to test).

Looking at your MyVideoNav.xml what controls the hightlight, what brings it it?

Is it the <include>View_50_List</include> ?

If so how do i bring this in to my Home.xml


I'm so determined to get my head around this but fear my knowledge is lacking to much and may never get it.

Many many thanks in advance,

Code:
<!--Home List-->    
        <control type="grouplist" id="9000">
            <posx>15</posx>
            <posy>60</posy>
            <width>300</width>
            <height>720</height>
            <itemgap>3</itemgap>
            <onleft>9000</onleft>
            <onright>9001</onright>
            <onup condition="System.HasAddon(script.globalsearch)">608</onup>
            <onup condition="!System.HasAddon(script.globalsearch)">603</onup>
            <ondown>9000</ondown>
            <orientation>vertical</orientation>
            <animation type="Conditional" condition="!ControlGroup(9000).HasFocus()">
                <effect type="fade" start="100" end="50" time="200" />
                <effect type="zoom" center="0,450" start="100" end="80" time="200" />
            </animation>

                <control type="button" id="10">
                    <description>Movies</description>
                    <width>330</width>
                    <align>left</align>
                    <label>20342</label>
                    <onclick>ActivateWindow(Videos,MovieTitles,return)</onclick>
                    <icon>-</icon>
                    <thumb>-</thumb>
                    <visible>!Skin.HasSetting(HomeMenuNoMoviesButton) + Library.HasContent(Movies)</visible>
                </control>

                <control type="button" id="11">
                    <description>TV</description>
                    <width>330</width>
                    <align>left</align>
                    <label>20343</label>
                    <onclick>ActivateWindow(Videos,TVShowTitles,return)</onclick>
                    <icon>-</icon>
                    <thumb>-</thumb>
                    <visible>!Skin.HasSetting(HomeMenuNoTVShowsButton) + Library.HasContent(TVShows)</visible>
                </control>
            
                <control type="button" id="3">
                    <description>Music</description>
                    <width>330</width>
                    <align>left</align>
                    <label>2</label>
                    <onclick>ActivateWindow(Music)</onclick>
                    <icon>-</icon>
                    <thumb>-</thumb>
                    <visible>!Skin.HasSetting(HomeMenuNoMusicButton)</visible>
                </control>

                <control type="button" id="4">
                    <description>Pictures</description>
                    <width>330</width>
                    <align>left</align>
                    <label>1</label>
                    <onclick>ActivateWindow(Pictures)</onclick>
                    <icon>special://skin/backgrounds/pictures.jpg</icon>
                    <thumb>$INFO[Skin.String(Home_Custom_Back_Pictures_Folder)]</thumb>
                    <visible>!Skin.HasSetting(HomeMenuNoPicturesButton)</visible>
                </control>
            
                <control type="button" id="2">
                    <description>Videos</description>
                    <width>330</width>
                    <align>Left</align>
                    <label>3</label>
                    <onclick condition="StringCompare(Window.Property(VideosDirectLink),True)">ActivateWindow(Videos)</onclick>
                    <onclick condition="!StringCompare(Window.Property(VideosDirectLink),True)">ActivateWindow(Videos,root)</onclick>
                    <icon>-</icon>
                    <thumb>-</thumb>
                    <visible>!Skin.HasSetting(HomeMenuNoVideosButton)</visible>
                </control>

                <control type="button" id="7">
                    <description>Weather</description>
                    <width>330</width>
                    <align>Left</align>
                    <label>8</label>
                    <onclick>ActivateWindow(Weather)</onclick>
                    <icon>-</icon>
                    <thumb>-</thumb>
                    <visible>!Skin.HasSetting(HomeMenuNoWeatherButton) + !IsEmpty(Weather.Plugin)</visible>
                </control>
                                
                <control type="button" id="1">
                    <description>Addons</description>
                    <width>330</width>
                    <align>Left</align>
                    <label>0</label>
                    <onclick>ActivateWindow(Programs,Addons,return)</onclick>
                    <icon>-</icon>
                    <thumb>-</thumb>
                    <visible>!Skin.HasSetting(HomeMenuNoProgramsButton)</visible>
                </control>
                                    
                <control type="button" id="6">
                    <description>Play DVD</description>
                    <width>330</width>
                    <align>Left</align>
                    <label>341</label>
                    <onclick>XBMC.PlayDVD()</onclick>
                    <icon>-</icon>
                    <thumb>-</thumb>
                    <visible>System.HasMediaDVD</visible>
                </control>
                                    
                <control type="button" id="5">
                    <description>Settings</description>
                    <width>330</width>
                    <align>Left</align>
                    <label>13000</label>
                    <onclick>ActivateWindow(Settings)</onclick>
                    <icon>-</icon>
                    <thumb>-</thumb>
                </control>
        </content>
What do you mean by 'highlight'? The focused button?
Basically i have a vertical menu that when i move up and down on a custom Highlight.png highlights the item in focus.

Highlight.png is just a horizontal strip of orange that highlights the focused item, it sits behind the white test of my menu items.

The problem with my first try was that when i hid a menu item Highlight.png would still just move up and down the list just like if the menu item wasn't hidden.
I think this is what you want.

Code:
<control type="list" id="9000">
    <posy>70</posy>
    <posx>500</posx>
    <width>300</width>
    <height>700</height>
    <onup>9000</onup>
    <ondown>9000</ondown>
    <onright>300</onright>
    <onleft>300</onleft>
    <orientation>vertical</orientation>
    <scrolltime tween="Cubic" easing="Out">68</scrolltime>
    <visible>true</visible>    
            
    <itemlayout width="300" height="50">
        <!--THIS IS HOW YOUR ITEMS LOOK WHEN NOT HIGHLIGHTED (color+size)-->
        <control type="label">
            <posx>40</posx><!----THIS 40 IS TO MAKE SOME SPACE ON THE LEFT FOR THE IMAGE--->
            <posy>0</posy>
            <width>300</width>
            <height>50</height>
            <align>left</align>
            <label>$INFO[ListItem.Label]</label>
            <textcolor>ff808080</textcolor>
            <font>font30</font>
        </control>
    </itemlayout>
    
    <focusedlayout width="300" height="50">
        <!--THIS IS THE SAME TEXT COLOR AS WHEN NOT FOCUSED-->
        <!--THIS IS TO MAKE SURE THE ITEM DOES NOT LOOK EMPTY FOR A SPLIT SECOND BETWEEN FOCUS AND NO FOCUS (mostly for fade animations)-->
        <!--THE IMAGE LIES ON TOP OF THIS BECAUSE THE CONTROL OF THE IMAGE IS BELOW THIS ONE-->
        <control type="label">
            <posx>40</posx><!----THIS 40 IS TO MAKE SOME SPACE ON THE LEFT FOR THE IMAGE--->
            <posy>0</posy>
            <width>300</width>
            <height>50</height>
            <align>left</align>
            <label>$INFO[ListItem.Label]</label>
            <textcolor>ff808080</textcolor>
            <font>font30</font>
        </control>
        
        <!---THIS IMAGE FOLLOWS THE FOCUSED ITEM--->
        <!---BUT WILL NOT BE VISIBLE ON ITEM 2 IN THE LIST--->
        <control type="image">
            <posx>0</posx>
            <posy>15</posy>
            <width>30</width>
            <height>30</height>
            <aspectratio>keep</aspectratio>
            <texture>OSDPlay.png</texture>
            <visible>!Container(9000).HasFocus(2)</visible>
        </control>
        <!---THIS IMAGE FOLLOWS THE FOCUSED ITEM--->
        <!---BUT WILL ONLY BE VISIBLE ON ITEM 2 IN THE LIST--->
        <control type="image">
            <posx>0</posx>
            <posy>15</posy>
            <width>30</width>
            <height>30</height>
            <aspectratio>keep</aspectratio>
            <texture>OSDPause.png</texture>
            <visible>Container(9000).HasFocus(2)</visible>
        </control>
        
        <!---THIS IS HOW YOUR ITEMS LOOK WHEN FOCUSED (text color+size)--->
        <control type="label">
            <posx>40</posx><!----THIS 40 IS TO MAKE SOME SPACE ON THE LEFT FOR THE IMAGE--->
            <posy>0</posy>
            <width>300</width>
            <height>50</height>
            <align>left</align>
            <textcolor>ffffffff</textcolor>
            <label>$INFO[ListItem.Label]</label>
            <font>font30</font>
        </control>
        
    </focusedlayout>
    <content>
        <!--THESE ITEMS WILL BE LOADED IN YOUR LIST-->
        <!--videos-->
        <item id="1">
            <label>videos</label>
            <onclick>ActivateWindow(Videos,Files)</onclick>
            <visible>true</visible>
        </item>
        <!--movies-->
        <item id="2">
            <label>movies</label>
            <onclick>ActivateWindow(MyVideoLibrary,movietitles,return)</onclick>
            <visible>true</visible>
        </item>
        <!--tv shows-->
        <item id="3">
            <label>tv shows</label>
            <onclick>ActivateWindow(MyVideoLibrary,tvshowtitles,return)</onclick>
            <visible>true</visible>
        </item>
        <!--live tv-->
        <item id="4">
            <label>live tv</label>
            <onclick>ActivateWindow(600)</onclick>
            <visible>false</visible>
        </item>
        <!--youtube set to visible if youtube addon is installed-->
        <item id="5">
            <label>Youtube</label>
            <onclick>ActivateWindow(VideoLibrary,plugin://plugin.video.youtube,return)</onclick>
            <visible>system.hasaddon(plugin.video.youtube)</visible>
        </item>
        <!--music-->
        <item id="6">
            <label>music</label>
            <onclick>ActivateWindow(MyMusicLibrary)</onclick>
            <visible>true</visible>
        </item>
        <!--PICTURES IS SET TO NOT VISIBLE HERE-->
        <!--PICTURES WILL NOT SHOW UP IN THE LIST (the list wont leave an empty spot)-->
        <item id="7">
            <label>pictures</label>
            <onclick>ActivateWindow(2)</onclick>
            <visible>false</visible>
        </item>
        <!--addons-->
        <item id="8">
            <label>addons</label>
            <onclick>ActivateWindow(addonbrowser,addons://all/)</onclick>
            <visible>true</visible>
        </item>
        <!--system-->
        <item id="9">
            <label>system</label>
            <onclick>ActivateWindow(settings)</onclick>
            <visible>true</visible>
        </item>
        
    </content>
</control><!--END OF CONTROL 9000-->
Hi MassIV

Thanks for the reply, I copied your code into my home.xml to see what it looked like so i could learn from it, but i think i may have done someting wrong.

I copied it into a clean confluence home.xml but something not working, i can hover over where the items should be and i see the icons but i see no text or no background i only see black Sad

Here's a copy of the home.xml

http://pastebin.com/rRVPRcSJ

Many thanks in advance
You need to set the font.
I didn't set it because i made it in a different skin and well... was too lazy to look up what the fonts in Confluence were called.
My bad for assuming...

This is a working copy of your home.xml
http://pastebin.com/i4kwbCAy