Kodi Community Forum

Full Version: Focus/unfocus in fixedlist
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2
Hi, I'm starting to make a skin for xbmc based WMC (windows media center) and am having a problem to put two icons for each item in the list (one with focus and one without focus.

How can I put an icon with focus and other without focus for each item in a fixedlist?

Image

the second image is how is should be visually
Image

The second image I did with button and animation (animation still know little), but did not like the result, because of a problem with animation that I faced in this method.
Then be possible to make by fixedlist, good.

Thanks!
For non-focused items put the image in the itemlayout section.
thanks Hitcher for the reply, but did not work for me:
The relevant part of code:


Code:
    <!-- teste -->
        <control type="group">
            <posy>110</posy>
            <posy>49</posy>
            <control type="fixedlist" id="9001">
                <defaultcontrol always="true">50001</defaultcontrol>
                <description>Menu Principal</description>
                <visible allowhiddenfocus="true">Container(9000).HasFocus(4)</visible>
                <posx>35</posx>
                <posy>260</posy>
                <width>1280</width>
                <height>100</height>
                <onleft>9001</onleft>
                <onright>9001</onright>
                <onup>9000</onup>
                <ondown>9000</ondown>
                <scrolltime>400</scrolltime>
                <focusposition>2</focusposition>
                <movement>0</movement>
                <orientation>Horizontal</orientation>
            <itemlayout height="100" width="320">
            <control type="image">
                <description>image nofocus</description>
                <posx>200</posx>
                <posy>200</posy>
                <width>230</width>
                <height>129</height>
                <texture>Home\image_nofocus.png</texture>
            </control>
            <control type="label">
                <description>Sub menu - titulos sem foco</description>
                <posx>-250</posx>
                <width>200</width>
                <height>100</height>
                <font>Segoe UI Light</font>
                <textcolor>grey3</textcolor>
                <align>center</align>
                <label>$INFO[ListItem.Label]</label>
            </control>
            </itemlayout>
            <focusedlayout height="100" width="230">
            <control type="label">
                <description>Sub menu - titulos com foco</description>
                <posx>-300</posx>
                <width>200</width>
                <height>100</height>
                <font>Segoe UI Light</font>
                <textcolor>white</textcolor>
                <align>center</align>
                <label>$INFO[ListItem.Label]</label>
            </control>
            </focusedlayout>
                <content>
                    <item id="50001">
                        <label>imagens</label>
                        <onclick>ActivateWindow(Pictures)</onclick>
                        <icon>Home\image_nofocus.png</icon>
                        <thumb>Home\image_focus.png</thumb>
                    </item>
                    <item id="50002">
                        <label>pesquisar</label>
                        <onclick>ActivateWindow()</onclick>
                        <icon></icon>
                        <thumb></thumb>
                    </item>
                </content>
            </control>
            </control>

I know I'm doing something wrong, but I do not know where.

Thanks
looking like a nice clean skin you're developing there!
Yes I started to Develop, (has no name yet), but I'm still a beginner in skinning and much remains learn to complete skin.
But the main menu just need to issue the submenu to finish it..
Domina Wrote:thanks Hitcher for the reply, but did not work for me:
The relevant part of code:


Code:
    <!-- teste -->
        <control type="group">
            <posy>110</posy>
            <posy>49</posy>
            <control type="fixedlist" id="9001">
                <defaultcontrol always="true">50001</defaultcontrol>
                <description>Menu Principal</description>
                <visible allowhiddenfocus="true">Container(9000).HasFocus(4)</visible>
                <posx>35</posx>
                <posy>260</posy>
                <width>1280</width>
                <height>100</height>
                <onleft>9001</onleft>
                <onright>9001</onright>
                <onup>9000</onup>
                <ondown>9000</ondown>
                <scrolltime>400</scrolltime>
                <focusposition>2</focusposition>
                <movement>0</movement>
                <orientation>Horizontal</orientation>
            <itemlayout height="100" width="320">
            <control type="image">
                <description>image nofocus</description>
                <posx>200</posx>
                <posy>200</posy>
                <width>230</width>
                <height>129</height>
                <texture>Home\image_nofocus.png</texture>
            </control>
            <control type="label">
                <description>Sub menu - titulos sem foco</description>
                <posx>-250</posx>
                <width>200</width>
                <height>100</height>
                <font>Segoe UI Light</font>
                <textcolor>grey3</textcolor>
                <align>center</align>
                <label>$INFO[ListItem.Label]</label>
            </control>
            </itemlayout>
            <focusedlayout height="100" width="230">
            <control type="label">
                <description>Sub menu - titulos com foco</description>
                <posx>-300</posx>
                <width>200</width>
                <height>100</height>
                <font>Segoe UI Light</font>
                <textcolor>white</textcolor>
                <align>center</align>
                <label>$INFO[ListItem.Label]</label>
            </control>
            </focusedlayout>
                <content>
                    <item id="50001">
                        <label>imagens</label>
                        <onclick>ActivateWindow(Pictures)</onclick>
                        <icon>Home\image_nofocus.png</icon>
                        <thumb>Home\image_focus.png</thumb>
                    </item>
                    <item id="50002">
                        <label>pesquisar</label>
                        <onclick>ActivateWindow()</onclick>
                        <icon></icon>
                        <thumb></thumb>
                    </item>
                </content>
            </control>
            </control>

I know I'm doing something wrong, but I do not know where.

Thanks

The height of your list is only 100 and you don't have an image control in the focused layout.
Thank Hitcher worked, but now I'm facing another problem, Which is Being the image cut, stirred at the height of the list and add other strings, but It Seems to have effect in HAD.

I had a similar problem to create the main menu, but HAD managed to concert, but the image is cut in half and if I lower the image it is not cut, but is out of position.

Image

should look like this:
Image


So I guess I must be missing some string so that the image does not cut, I know not what and where (perhaps "<height>" but where) to put?

the current test code:
Code:
<!-- teste -->
        <control type="group">
            <posy>110</posy>
            <control type="fixedlist" id="9001">
                <defaultcontrol always="true">50001</defaultcontrol>
                <description>Menu Principal</description>
                <visible allowhiddenfocus="true">Container(9000).HasFocus(4)</visible>
                <posx>35</posx>
                <posy>260</posy>
                <width>1280</width>
                <height>600</height>
                <onleft>9001</onleft>
                <onright>9001</onright>
                <onup>9000</onup>
                <ondown>9000</ondown>
                <scrolltime>400</scrolltime>
                <focusposition>2</focusposition>
                <movement>0</movement>
                <orientation>Horizontal</orientation>
            <itemlayout height="600" width="320">
             <control type="image">
                            <posx>-380</posx>
                            <posy>-70</posy>
                            <width>230</width>
                            <height>129</height>
                            <info>ListItem.icon</info>
            </control>
            <control type="label">
                <description>Sub menu - titulos sem foco</description>
                <posx>-250</posx>
                <width>200</width>
                <height>400</height>
                <font>Segoe UI Light</font>
                <textcolor>grey3</textcolor>
                <align>center</align>
                <label>$INFO[ListItem.Label]</label>
            </control>
            </itemlayout>
            <focusedlayout height="200" width="230">
            <control type="label">
                <description>Sub menu - titulos com foco</description>
                <posx>-300</posx>
                <width>200</width>
                <height>500</height>
                <font>Segoe UI Light</font>
                <textcolor>white</textcolor>
                <align>center</align>
                <label>$INFO[ListItem.Label]</label>
            </control>
            </focusedlayout>
                <content>
                    <item id="50001">
                        <label>imagens</label>
                        <onclick>ActivateWindow(Pictures)</onclick>
                        <icon>Home\image_nofocus.png</icon>
                        <thumb></thumb>
                    </item>
                    <item id="50002">
                        <label>pesquisar</label>
                        <onclick>ActivateWindow()</onclick>
                        <icon></icon>
                        <thumb></thumb>
                    </item>
                </content>
            </control>
        </control>


And to focusing on the picture?

Thanks again!
All the images you use in the list are dependant on the co-ordinates and sizes of the main list.

PHP Code:
<posx>35</posx>
<
posy>260</posy>
<
width>1280</width>
<
height>600</height

And your image co-ordinates are moving them back up past them.
Thanks hitcher, it worked!

Image


Now I need to find a way to add a different image when it is in focus, know what should I do?
Try this -

PHP Code:
<control type="group">
    <
posy>110</posy>
    <
control type="fixedlist" id="9001">
        <
defaultcontrol always="true">50001</defaultcontrol>
        <
description>Menu Principal</description>
        <
visible allowhiddenfocus="true">Container(9000).HasFocus(4)</visible>
        <
posx>35</posx>
        <
posy>260</posy>
        <
width>1280</width>
        <
height>600</height>
        <
onleft>9001</onleft>
        <
onright>9001</onright>
        <
onup>9000</onup>
        <
ondown>9000</ondown>
        <
scrolltime>400</scrolltime>
        <
focusposition>2</focusposition>
        <
movement>0</movement>
        <
orientation>Horizontal</orientation>
        <
itemlayout height="600" width="320">
            <
control type="image">
                <
posx>-380</posx>
                <
posy>-70</posy>
                <
width>230</width>
                <
height>129</height>
                <
info>ListItem.ActualIcon</info>
            </
control>
            <
control type="label">
                <
description>Sub menu titulos sem foco</description>
                <
posx>-250</posx>
                <
width>200</width>
                <
height>400</height>
                <
font>Segoe UI Light</font>
                <
textcolor>grey3</textcolor>
                <
align>center</align>
                <
label>$INFO[ListItem.Label]</label>
            </
control>
        </
itemlayout>
        <
focusedlayout height="200" width="230">
            <
control type="image">
                <
posx>-380</posx>
                <
posy>-70</posy>
                <
width>230</width>
                <
height>129</height>
                <
info>ListItem.Thumb</info>
            </
control>
            <
control type="label">
                <
description>Sub menu titulos com foco</description>
                <
posx>-300</posx>
                <
width>200</width>
                <
height>500</height>
                <
font>Segoe UI Light</font>
                <
textcolor>white</textcolor>
                <
align>center</align>
                <
label>$INFO[ListItem.Label]</label>
            </
control>
        </
focusedlayout>
        <
content>
            <
item id="50001">
                <
label>imagens</label>
                <
onclick>ActivateWindow(Pictures)</onclick>
                <
icon>Home\image_nofocus.png</icon>
                <
thumb>Home\image_focus.png</thumb>
            </
item>
        </
content>
    </
control>
</
control

Non-focused layout will then use the <icon> image (we use ActualIcon otherwise it will display the Thumb because we've set one) and the focused layout will use the <thumb> image.
Perfect Hitcher, I can now continue with the skin, thank you for your help!
I have one last question, is there a search engine for pictures, that can be link from the submenu?
in: <onclick> </ onclick>
PHP Code:
Skin.SetImage(string[,value]) 

They're all listed here -

List of built-in functions

Other useful links -

List of Built In Controls
List of Boolean Conditions
InfoLabels
Sorry I must have Expressed myself poorly, it would be this kind of search in the confluence, but That search all the directories added to the "pictures" and not only in the current directory.

Image


Thanks for the links too!
I didn't even know that Pictures had a filter function!
Hitcher, thank you for your help Helped me a lot! Laugh
I managed to finish the menu of my skin.

Image


I'll search the links of these filters then in the manual.
I ask That moderation close the topic because I solved my doubt!
Pages: 1 2