[SOLVED]Controlling sub menu visibility
Icerat
Senior Member
Posts: 156
#1
2012-09-27, 22:24
Hi
Back again Big Grin

Been playing around with confluence and enjoying the experience so far, learning loads, but still so much to learn.

Things are getting a little clearer now and believe I finally have a basic grasp of how to structure the code. I've been able to move things about, add menus and sub menus and am getting my head around includes slowly. Been able to move items out of home.xml into my own includes.

My home.xml is looking a bit more like how I want it but Im a little stumped Confused

At the moment my sub-menus slide down whenever I select an Item with a sub-menu (default confluence behaviour).

How do I make it so the menu stays hidden until the user presses the down arrow on the keyboard or clicks/hovers on a sub menu indicator.png (Not figured this out yet)

Has it got something to do with visibility and conditions? I have an idea in my head how to do it but can t figure it out in practice yet.

Thanks in advance
Old newbie trying his hardest to get his head around skinning lol, expect loads of questions :-)

It may be hard but the challenge of learning something new is fun :-)
Find
Reply
BigNoid
Team-Kodi Member
Posts: 3,919
#2
2012-09-27, 22:31
Add a slide and fade animation based on whether the submenu control group has focus or not.
Aeon Nox
Find
Reply
MassIV
Skilled Skinner
Posts: 1,126
#3
2012-09-28, 00:44
First of all, when you say select, do you mean <onclick> or <onfocus>?

For the basic idea. To hide something you need <visible>false</visible>

Or anything that will return "false". Like <visible>The Pope is a muslim</visible>

Now this will return false, as long as control 9001 does not have focus:
<visible>Control.HasFocus(9001)</visible>

Or more simply put. It will return true if it has focus.

To set focus to the hidden sub menu by down arrow, use:
<ondown>9001</ondown> in the main menu control, instead of the <onfocus> or <onclick> as means of putting the focus on the sub menu.

Then your sub menu needs to have <visible allowhiddenfocus="true">Control.HasFocus(9001)</visible>
Because normally, you can't set focus to something that is not visible.

Or like Big_Noid said, use an animation. Here you can find all the types and stuff and combos you can make:
http://wiki.xbmc.org/index.php?title=Ani..._your_skin

But he mentioned using two of them, so like this:

Code:
<animation type="Focus">
        <effect type="Fade" start="0" end="100" time="200" />
        <effect type="Slide" start="0,10" end="0,70" time="200" />
</animation>
Percentages and coordinates...

Now the condition (look at the wiki example) we could use to for example rule one of the menu entries out.
Like not when main menu item 3 has focus:

condition="!ControlGroup(9000).HasFocus(3)"


Image [RELEASE] Metroid
Image [RELEASE] IrcChat
Find
Reply
Icerat
Senior Member
Posts: 156
#4
2012-09-29, 14:30
Went with the playing with the animations first as it seemed the simplest to start with, will play with the code suggestion also once I learn more about animations (one step at a time hehe).

I found the section responsible for the animation in the include.xml and amended it according.
Code:
<animation type="Focus">
            <effect type="Fade" start="0" end="90" time="200" />
            <effect type="Slide" start="0,-40" end="0,70" delay="200" time="200" tween="quadratic" easing="out" />
        </animation>

It works as intended many thanks.

The only thing I cant figure out is why the original sub menu still shows up when I move to an item with a sub menu.

When I press the down key the new sub menu appears below the original menu.

I've look through the code for home and includes to see if I could find what's responsible for bringing in the original menu but I'm just missing it Sad

My Home.xml
http://pastebin.com/SEkycEci

include.xml
http://pastebin.com/qpmaQRtr

I'm using confluence as a base to learn off and amend to my needs.
Old newbie trying his hardest to get his head around skinning lol, expect loads of questions :-)

It may be hard but the challenge of learning something new is fun :-)
Find
Reply
MassIV
Skilled Skinner
Posts: 1,126
#5
2012-09-29, 15:40
Well if you don't remove the original sub menu. And it still has code to become visible when the main menu has focus on a certain item, that is to be expected. <visible>Container(9000).HasFocus(2)</visible>
Code:
<control type="grouplist" id="9010">
              <include>HomeSubMenuCommonValues</include>
              <onleft>9010</onleft>
              <onright>9010</onright>
              <visible>Container(9000).HasFocus(2)</visible>
              <include>HomeSubMenuVideos</include> <!-- Buttons for the grouplist -->
      </control>
I didn't have a real thorough look at the code but i suggest you just start removing the original sub menu code, completely.
Image [RELEASE] Metroid
Image [RELEASE] IrcChat
Find
Reply
Icerat
Senior Member
Posts: 156
#6
2012-09-29, 16:07
Sorry I'm now lost do you mean remove all the code for container 9001 (the sub menu) if so how is the sub menu created.
Old newbie trying his hardest to get his head around skinning lol, expect loads of questions :-)

It may be hard but the challenge of learning something new is fun :-)
Find
Reply
MassIV
Skilled Skinner
Posts: 1,126
#7
2012-09-29, 17:38
You made a new submenu didn't you? Or you want to keep the old one?
And then change it to only come out when you press down?
Image [RELEASE] Metroid
Image [RELEASE] IrcChat
Find
Reply
Icerat
Senior Member
Posts: 156
#8
2012-09-29, 21:30
All I did was change the amination in the include.xml so it hide and slide the sub menu out.
Old newbie trying his hardest to get his head around skinning lol, expect loads of questions :-)

It may be hard but the challenge of learning something new is fun :-)
Find
Reply
MassIV
Skilled Skinner
Posts: 1,126
#9
2012-09-29, 21:56
Yeah, but the sub menu still activates when a main menu item gets focused. By this code:
<visible>Container(9000).HasFocus(2)</visible>

If you want it to work with <ondown> then read post 3 again.

Image [RELEASE] Metroid
Image [RELEASE] IrcChat
Find
Reply
MassIV
Skilled Skinner
Posts: 1,126
#10
2012-09-29, 22:43
Alright, complete page example here:

Code:
<window id="0">
<defaultcontrol always="true">9000</defaultcontrol>


    <coordinates>
        <system>1</system>
        <posx>0</posx>
        <posy>0</posy>
    </coordinates>

<controls>

    <control type="image">
        <posx>0</posx>
        <posy>0</posy>
        <width>1280</width>
        <height>720</height>
        <aspectratio>stretch</aspectratio>
        <texture>black.png</texture>
        <colordiffuse>FFCCCCCF</colordiffuse>
    </control>
    
    
<control type="fixedlist" id="9000">
    <posy>70</posy>
    <posx>300</posx>
    <width>900</width>
    <height>700</height>
    <onup>9000</onup>
    
    <!--THIS THIS THIS THIS THIS THIS THIS THIS THIS THIS THIS THIS THIS THIS-->
    <ondown>9001</ondown><!--THIS SETS FOCUS TO MENU 9001 on down-->
    <!--THIS THIS THIS THIS THIS THIS THIS THIS THIS THIS THIS THIS THIS THIS-->
    
    <onright>9000</onright>
    <onleft>9000</onleft>
    <orientation>horizontal</orientation>
    <scrolltime tween="Cubic" easing="Out">68</scrolltime>
    <visible>true</visible>    
    <focusposition>3</focusposition>      
    <itemlayout width="100" height="50">
        
        <control type="label">
            <posx>40</posx>
            <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="100" height="50">
        
        <control type="label">
            <posx>40</posx>
            <posy>0</posy>
            <width>300</width>
            <height>50</height>
            <align>left</align>
            <label>$INFO[ListItem.Label]</label>
            <textcolor>ff808080</textcolor>
            <font>font30</font>
        </control>
        
        <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>
        
        <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>
        
        
        <control type="label">
            <posx>40</posx>
            <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>
        
        <!--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>
        
        <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>
        
        <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-->

<control type="fixedlist" id="9001">
    <posy>140</posy>
    <posx>300</posx>
    <width>900</width>
    <height>700</height>
    <onup>9000</onup>
    <ondown>9001</ondown>
    <onright>9001</onright>
    <onleft>9001</onleft>
    <orientation>horizontal</orientation>
    <scrolltime tween="Cubic" easing="Out">68</scrolltime>
    <visible>true</visible>    
    <focusposition>3</focusposition>
    
    <!--THIS THIS THIS THIS THIS THIS THIS THIS THIS THIS THIS THIS THIS THIS-->
    <visible allowhiddenfocus="true">Control.HasFocus(9001)</visible>
    <!--THIS ALLOWS FOCUS WHEN HIDDEN, AND MAKES IT VISIBLE IF 9001 HAS FOCUS-->
    <animation type="Focus">
        <effect type="Fade" start="0" end="100" time="200" reversable="true" />
        <effect type="Slide" start="0,-70" end="0,0" time="200" reversable="true" />
    </animation>
    <!--THIS JUST MAKES IT A PRETTY SLIDE OUT-->
    
    
    <itemlayout width="100" height="50">
      
        <control type="label">
            <posx>40</posx>
            <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="100" height="50">
      
        <control type="label">
            <posx>40</posx>
            <posy>0</posy>
            <width>300</width>
            <height>50</height>
            <align>left</align>
            <label>$INFO[ListItem.Label]</label>
            <textcolor>ff808080</textcolor>
            <font>font30</font>
        </control>
              
        
        <control type="label">
            <posx>40</posx>
            <posy>0</posy>
            <width>300</width>
            <height>50</height>
            <align>left</align>
            <textcolor>ffffffff</textcolor>
            <label>$INFO[ListItem.Label]</label>
            <font>font30</font>
            <visible>Control.HasFocus(9001)</visible>
        </control>
        
    </focusedlayout>
    <content>
        
        <!--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>
        
        <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 9001-->
    

            
        

</controls>

</window>
Image [RELEASE] Metroid
Image [RELEASE] IrcChat
Find
Reply
Icerat
Senior Member
Posts: 156
#11
2012-09-30, 14:51
Thanks MassIV for the example I've saved it to learn from, its joined my pile of notes, I now understand what you were trying to tell me hehe got there in end.

I have however surprised myself and figured it out lol.

Following on from Big_Noid suggestion about the animation, move and fade, I was able with the help of the Wiki and cirrus skin learn a little about conditions in animations hehe.

The menu does as it should now and I was pleasantly surprised looking thorough cirrus.skin that I was able to understand more of the code and what some of it dose as last week I was having big problems figuring bits out lol.

I guess somethings going in.

Once again thanks Big_Noid for the suggestion and MassIV for the very very informative example, it helped loads Big Grin

Flagged Solved

Code:
    <include name="HomeSubMenuCommonValues">
        <posx>0</posx>
        <posy>0</posy>
        <width>1280</width>
        <height>35</height>
        <align>center</align>
        <align>left</align>
        <onup>9000</onup>
        <ondown>9002</ondown>
        <itemgap>0</itemgap>
        <orientation>Horizontal</orientation>
        <animation effect="fade" start="90" end="0" time="0" condition="!ControlGroup(9001).HasFocus">conditional</animation>
        <animation effect="fade" start="0" end="90" delay="300" time="300" condition="ControlGroup(9001).HasFocus">conditional</animation>
        <animation effect="Slide" start="0,-40" end="0,0" delay="300" time="300" tween="quadratic" easing="out" condition="ControlGroup(9001).HasFocus">conditional</animation>
    </include>
Old newbie trying his hardest to get his head around skinning lol, expect loads of questions :-)

It may be hard but the challenge of learning something new is fun :-)
Find
Reply

Home
Search
Help
Logout Mark Read Team Forum Stats Members Help
[SOLVED]Controlling sub menu visibility 0