Item highlighting
Icerat
Senior Member
Posts: 156
#1
2012-06-20, 23:29
Hi

I'm playing around with the confluence home.xml and learning loads, but I'm now stumped when it comes to animations.

I'm trying to get Highlight.png to slid out as i hover over each choice on my home screen.

I can get Highlight.png to Slide out when i hover over the 1st item on my menu but when i go to hover over the second item Highlight.png doesn't slide out, what am i doing wrong.

I thought it would be something simple like but i was wrong Sad:
Code:
<control type="image"> <!--Highlight-->
                <posx>0</posx>
                <posy>60</posy>
                <width>1280</width>
                <height>80</height>
                <texture>HighLight.png</texture>
                <animation effect="slide" start="-500,0" end="0,0" time="300" condition="Container(9000).Row(0)">conditional</animation>
                <animation effect="slide" start="-500,0" end="0,0" time="300" condition="Container(9000).Row(1)">conditional</animation>
            </control>

Rest of my code:

Code:
<!--Home Layout-->    
            <!--Menu-->
            <control type="list" id="9000">
            <!--    <hitrect x="50" y="50" w="330" h="620" /> -->
                <posx>15</posx>
                <posy>80</posy>
                <width>180</width>
                <height>720</height>
                <onleft>10</onleft>
                <onright>9001</onright>
                <onup>9000</onup>
                <ondown>9000</ondown>
                <pagecontrol>-</pagecontrol>
                <scrolltime>200</scrolltime>
                <scrolltime>200</scrolltime>
                <focusposition>1</focusposition>
                <movement>2</movement>
                <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) | Control.HasFocus(9002)">conditional</animation>
                <!--Menu Text-->
                <itemlayout height="70" width="180">
                    <control type="label">
                        <posx>0</posx>
                        <posy>0</posy>
                        <width>180</width>
                        <height>500</height>
                        <font>font50caps_title</font>
                        <textcolor>grey</textcolor>
                        <align>left</align>
                        <aligny>left</aligny>
                        <label>$INFO[ListItem.Label]</label>
                        <!--<-animation effect="zoom" start="75" end="75" center="380,51" time="0" condition="true">Conditional</animation>
                        <animation effect="fade" start="100" end="30" time="200" condition="Window.IsVisible(1113) | ControlGroup(9001).HasFocus | ControlGroup(10).HasFocus | Control.HasFocus(9002)">conditional</animation> -->
                    </control>
                </itemlayout>
                <!--Selected Item-->
                <focusedlayout height="70" width="180">
                    <control type="label">
                        <posx>0</posx>
                        <posy>0</posy>
                        <width>180</width>
                        <height>102</height>
                        <font>font50caps_title</font>
                        <textcolor>orange</textcolor>
                        <align>left</align>
                        <aligny>left</aligny>
                        <!--<animation effect="zoom" start="75" end="100" center="380,51" time="200">Focus</animation>
                        <animation effect="zoom" start="100" end="75" center="380,51" time="200">UnFocus</animation>-->
                        <label>$INFO[ListItem.Label]</label>
                    </control>
                </focusedlayout>
                <content>
                    <item id="10">
                        <label>20342</label>
                        <onclick>ActivateWindow(Videos,MovieTitles,return)</onclick>
                        <icon>special://skin/backgrounds/videos.jpg</icon>
                        <thumb>$INFO[Skin.String(Home_Custom_Back_Movies_Folder)]</thumb>
                        <visible>Skin.HasSetting(HomeMenuNoMoviesButton) + Library.HasContent(Movies)</visible>
                    </item>
                    <item id="11">
                        <label>20343</label>
                        <onclick>ActivateWindow(Videos,TVShowTitles,return)</onclick>
                        <icon>special://skin/backgrounds/videos.jpg</icon>
                        <thumb>$INFO[Skin.String(Home_Custom_Back_TVShow_Folder)]</thumb>
                        <visible>Skin.HasSetting(HomeMenuNoTVShowsButton) + Library.HasContent(TVShows)</visible>
                    </item>
                    <item id="3">
                        <label>2</label>
                        <onclick>ActivateWindow(Music)</onclick>
                        <icon>special://skin/backgrounds/music.jpg</icon>
                        <thumb>$INFO[Skin.String(Home_Custom_Back_Music_Folder)]</thumb>
                        <visible>!Skin.HasSetting(HomeMenuNoMusicButton)</visible>
                    </item>
                    
                    <item id="6">
                        <label>8</label>
                        <onclick>ActivateWindow(Weather)</onclick>
                        <icon>special://skin/backgrounds/weather.jpg</icon>
                        <thumb>$INFO[Skin.String(Home_Custom_Back_Weather_Folder)]</thumb>
                        <visible>!Skin.HasSetting(HomeMenuNoWeatherButton) + !IsEmpty(Weather.Plugin)</visible>
                        <visible>!Skin.HasSetting(ShowWeatherFanart) | IsEmpty(Skin.String(WeatherFanartDir))</visible>
                    </item>
                    <item id="6">
                        <label>8</label>
                        <onclick>ActivateWindow(Weather)</onclick>
                        <icon>special://skin/backgrounds/weather.jpg</icon>
                        <thumb>$INFO[Skin.String(WeatherFanartDir)]$INFO[Weather.FanartCode]</thumb>
                        <visible>!Skin.HasSetting(HomeMenuNoWeatherButton) + !IsEmpty(Weather.Plugin)</visible>
                        <visible>Skin.HasSetting(ShowWeatherFanart) + !IsEmpty(Skin.String(WeatherFanartDir))</visible>
                    </item>
                    <item id="1">
                        <label>0</label>
                        <onclick>ActivateWindow(Programs,Addons,return)</onclick>
                        <icon>special://skin/backgrounds/programs.jpg</icon>
                        <thumb>$INFO[Skin.String(Home_Custom_Back_Programs_Folder)]</thumb>
                        <visible>!Skin.HasSetting(HomeMenuNoProgramsButton)</visible>
                    </item>
                    <item id="4">
                        <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>
                    </item>
                    <item id="2">
                        <label>3</label>
                        <onclick condition="!Skin.HasSetting(HomeVideostoFiles)">ActivateWindow(Videos)</onclick>
                        <onclick condition="Skin.HasSetting(HomeVideostoFiles)">ActivateWindow(Videos,Files,Return)</onclick>
                        <icon>special://skin/backgrounds/videos.jpg</icon>
                        <thumb>$INFO[Skin.String(Home_Custom_Back_Video_Folder)]</thumb>
                        <visible>!Skin.HasSetting(HomeMenuNoVideosButton)</visible>
                    </item>
                    <item id="7">
                        <label>341</label>
                        <onclick>XBMC.PlayDVD()</onclick>
                        <icon>special://skin/backgrounds/playdisc.jpg</icon>
                        <thumb>$INFO[Skin.String(Home_Custom_Back_PlayDisc_Folder)]</thumb>
                        <visible>System.HasMediaDVD</visible>
                    </item>
                    <item id="5">
                        <label>13000</label>
                        <onclick>ActivateWindow(Settings)</onclick>
                        <icon>special://skin/backgrounds/settings.jpg</icon>
                        <thumb>$INFO[Skin.String(Home_Custom_Back_Settings_Folder)]</thumb>
                    </item>
                </content>
            </control>
            <control type="image"> <!--Highlight-->
                <posx>0</posx>
                <posy>60</posy>
                <width>1280</width>
                <height>80</height>
                <texture>Highlight.png</texture>
                <animation effect="slide" start="-500,0" end="0,0" time="300" condition="Container(9000).Row(0)">conditional</animation>
                <animation effect="slide" start="-500,0" end="0,0" time="300" condition="Container(9000).Row(1)">conditional</animation>
            </control>
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
pecinko
Donor
Posts: 3,956
#2
2012-06-20, 23:44
List has positions or focused IDs. Rows and columns are in panel (grid views).
My skins:

Amber
Quartz

Find
Reply
Icerat
Senior Member
Posts: 156
#3
2012-06-21, 00:34
Sorry totally new to coding and xbmc skinning in general. Any chance you could dumb it down for a nub, maybe an example please.

Many thanks
IR

Edit: Stupid phone browser
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
pecinko
Donor
Posts: 3,956
#4
2012-06-21, 01:03
Check out Container.Position and Container.HasFocus in wiki
My skins:

Amber
Quartz

Find
Reply
Icerat
Senior Member
Posts: 156
#5
2012-06-21, 11:50
Hi
Thanks for reply. I'm not at my home computer at moment at work, but had a skim through the wiki and not really understanding what I'm looking for.

I did come across:
Code:
<animation effect="slide" start="-120,0" time="200" condition="Control.HasFocus(2)">Conditional</animation>

No idea if its right as still trying to get my head around what i need it to do, In my mind it seems right, as i hover over each item with is unique id it sets off the animation.

So would this be correct?
Code:
<animation effect="slide" start="-500,0" end="0,0" time="300" condition="Container(9000).HasFocus(10)">conditional</animation>

Would i have to list each menu item id separately so that the animation fires when i hover over the item, that's if i got this right in my head.

Thanks in advance, this is fun learning more with each question and trail and error.
IR

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
pecinko
Donor
Posts: 3,956
#6
2012-06-21, 12:11
Use Container(9000).HasFocus(id) or Container(9000).Position(id) .

Control.HasFocus(id) returns true for a simple controls like buttons with given id OR for a whole container, regardless of position - Control.HasFocus(9000) returns true if ANY of container 9000's items has focus.
My skins:

Amber
Quartz

Find
Reply
Icerat
Senior Member
Posts: 156
#7
2012-06-21, 14:15
Hi Pecink

Many thanks for the reply and the description of what each piece of code does, it's helped me a lot get an idea of how this works.

If its OK could i know why this didn't work?
Code:
Container(9000).Row(0)


Do i use this like i tried to use row ie (0),(1),(2) or does it have to be the actual id of the item:
Code:
Container(9000).Position(id)

Last question for now (must get some work done) could i use
Code:
Control.HasFocus(9000)
to cover all the items in the container so that the whatever menu item i hovered over be it TV Shows, Movies, etc, etc the animation would fire?

This seems like a cleaner way of doing it instead of listing each id separately, am i over simplifying it or not understanding it correctly?

Many many thank in advance for helping me understand this Smile .
IR
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
Icerat
Senior Member
Posts: 156
#8
2012-06-21, 19:03
Hi
Ok thought i had it but evidently not Sad what am i doing wrong? Works once then that's it and only once i come out of a menu

Code:
            <control type="image"> <!--Highlight-->
                <posx>0</posx>
                <posy>60</posy>
                <width>1280</width>
                <height>80</height>
                <texture>HomeBlade_middle.png</texture>
                <animation effect="slide" start="-500,0" end="0,0" time="300" condition="Container(9000).HasFocus(10)">conditional</animation>
                <animation effect="slide" start="-500,70" end="0,70" time="300" condition="Container(9000).HasFocus(11)">conditional</animation>
            </control>

Full Code:
http://pastebin.com/sc9gHLFz
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
Icerat
Senior Member
Posts: 156
#9
2012-06-21, 20:55
Yeah some success Smile found if i list the control twice like below it works but seems like an awful lot of repeating if i have to do for each menu item. Is this the correct way?

Code:
        <control type="image"> <!--Highlight Row 0-->
                <posx>0</posx>
                <posy>60</posy>
                <width>1280</width>
                <height>80</height>
                <texture>HomeBlade_middle.png</texture>
                <animation effect="slide" start="-1280,0" end="0,0" time="300" condition="Container(9000).HasFocus(10)">conditional</animation>
            </control>
            
            <control type="image"> <!--Highlight Row 1-->
                <posx>0</posx>
                <posy>60</posy>
                <width>1280</width>
                <height>80</height>
                <texture>HomeBlade_middle.png</texture>
                <animation effect="slide" start="-1280,70" end="0,70" time="300" condition="Container(9000).HasFocus(11)">conditional</animation>
            </control>
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
Hitcher
Team-Kodi Member
Posts: 17,420
#10
2012-06-21, 23:16
It shouldn't need to be separated. Confused
My GitHub repositories
Find
Reply
Icerat
Senior Member
Posts: 156
#11
2012-06-21, 23:31
Hi

When i first load xmbc the highlight is there on the first menu item, movies, if i click on a menu item and come back to home it appears also on the one i clicked , it just doesn't slide in when i move over the menu items.

Is the following be correct then, Just when thought i was getting my head around some of this Sad lol

Code:
            <control type="image"> <!--Highlight-->
                <posx>0</posx>
                <posy>60</posy>
                <width>1280</width>
                <height>80</height>
                <texture>HomeBlade_middle.png</texture>
                <animation effect="slide" start="-500,0" end="0,0" time="300" condition="Container(9000).HasFocus(10)">conditional</animation>
                <animation effect="slide" start="-500,70" end="0,70" time="300" condition="Container(9000).HasFocus(11)">conditional</animation>
                <animation effect="slide" start="-500,140" end="0,140" time="300" condition="Container(9000).HasFocus(3)">conditional</animation>
                <animation effect="slide" start="-500,210" end="0,210" time="300" condition="Container(9000).HasFocus(6)">conditional</animation>
                <animation effect="slide" start="-500,280" end="0,280" time="300" condition="Container(9000).HasFocus(1)">conditional</animation>
                <animation effect="slide" start="-500,350" end="0,350" time="300" condition="Container(9000).HasFocus(4)">conditional</animation>
                <animation effect="slide" start="-500,420" end="0,420" time="300" condition="Container(9000).HasFocus(2)">conditional</animation>
                <animation effect="slide" start="-500,490" end="0,490" time="300" condition="Container(9000).HasFocus(7)">conditional</animation>
                <animation effect="slide" start="-500,560" end="0,560" time="300" condition="Container(9000).HasFocus(5)">conditional</animation>
            </control>
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
Icerat
Senior Member
Posts: 156
#12
2012-06-22, 11:28
Hi me again Smile

Had another play around this morning with the above and still no luck, can any of you super smart people point a code nub like me in correct direction.

Full home.xml
http://pastebin.com/TPDtxz8h

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
pecinko
Donor
Posts: 3,956
#13
2012-06-22, 11:37
What exactly do you mean by no luck - what exactly is happening?
My skins:

Amber
Quartz

Find
Reply
Icerat
Senior Member
Posts: 156
#14
2012-06-22, 12:29
Hi
What I'm trying to achieve is to get a HomeBlade_middle.png which is my custom Highlight to slide out from the left over my menu items as i mouse over / focus on them.

If I just list one line <animation effect="slide" start="-500,0" end="0,0" time="300" condition="Container(9000).HasFocus(10)">conditional</animation> and hover over my first menu item (Movies) it slides out from the left as it should when i mouse over and slides back out the way when i mouse off / un-focus.

If i add a the code for my next highlight for the second menu item: <animation effect="slide" start="-500,70" end="0,70" time="300" condition="Container(9000).HasFocus(11)">conditional</animation> it no longer works.

if i click into the second menu item and come back to home the highlights there but a soon as i mouse off it disappears and wont come back, neither will the first.

Thought i got my head around this little bit but looks like i didn't, any pointer on what im doing wrong.

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
Icerat
Senior Member
Posts: 156
#15
2012-06-23, 12:22
Any pointers on how I can sort this guys would love to get this working and learn a little more.
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
Item highlighting0