Kodi Community Forum

Full Version: Two list control in sync
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
I have two lists ( <control type="list"> ) with 20 items in each for example.

I want that when user has focused 1st item of first list then 1st item of second list should be focused as well, when user moves to 2nd item of first list then 2nd item of second list should get focused and so on, means they should be in sync.
I want to represent that item in first list is related to item in the second list of same position.
Also both list should scroll together.

how can I do that?


Thanks for help in advance.


not really possible in a nice way with list containers I think, better use grouplists with buttons if possible. (they allow onfocus events)

describing exactly what you have in mind (including screenshots perhaps) would make helping much easier. Smile
Use this in the first list -

PHP Code:
<onleft>Control.Move(SECOND_LIST_ID,-1)</onleft>
<
onright>Control.Move(SECOND_LIST_ID,1)</onright
(2012-10-15, 16:59)Hitcher Wrote: [ -> ]Use this in the first list -

PHP Code:
<onleft>Control.Move(SECOND_LIST_ID,-1)</onleft>
<
onright>Control.Move(SECOND_LIST_ID,1)</onright

ok, i was wrong probably Big Grin
that wouldn´t work with mouse/touch though i think.
(2012-10-15, 17:00)phil65 Wrote: [ -> ]
(2012-10-15, 16:59)Hitcher Wrote: [ -> ]Use this in the first list -

PHP Code:
<onleft>Control.Move(SECOND_LIST_ID,-1)</onleft>
<
onright>Control.Move(SECOND_LIST_ID,1)</onright

ok, i was wrong probably Big Grin
that wouldn´t work with mouse/touch though i think.

No, but then Alaska HD wont support mouse which is where I'm using it. Wink
Also it wouldn't work if you go 5 items down in the left list and then move to the right list.

Add this to the focusedlayout of your container:
PHP Code:
<control type="button">
    <
onfocus condition="Container(id1).OnNext">Control.Move(id2,1)</onfocus>
    <
onfocus condition="Container(id1).OnPrevious">Control.Move(id2,-1)</onfocus>
</
control

I have no idea if it works with mouse (I don't think so) because I don't use it and I don't think you ever need to use a mouse. Either remote on a tv or touch screen on a smartphone/tablet.
I didn't realise he wanted to navigate to the other list, sorry.
Thanks for replies friends but it could not solve the problem, here is screen shot of what I want:

Image

I also tried to use "Container(id).Position" to get focused index of left list and then doing , "Control.SetFocus(id,position)" on right list so that same position item would be focused each time for both list, but the "Container(id).Position" returns only visible position even if actually 11th item is focused out of 20 items and if only 10 can be visible at a time then Container(id).Position will return 10 ( I think ) so it fails.

Control.Move(id,1) seems to work but only if initially both list's same position item is focused which user may alter, but if we don't consider this situation even then if I keep holding "down" arrow on left list then it quickly goes to last item in first list but in right list's last item is not reached.




Well, you can't do it if you want to use a mouse. Without a mouse my solution is working fine.

Edit: By looking at your screenshot, you don't need 2 list controls, you can do what you want with a grouplist.
there is no much info about grouplist on wiki.
I created two lists inside grouplist and set it's <orientation>horizontal</orientation> then it looked like above but still the same problem of syncing , they scroll independently.
I created two lists inside grouplist and set it's <orientation>horizontal</orientation> then it looked like above but still the same problem of syncing , they scroll independently.
Here's an example (2 items) how I would do it:

PHP Code:
<control type="grouplist" id="1">
    [...]
    <
orientation>vertical</orientation>
    
# First list entry
    
<control type="group" id="10">
        
# This is your focus image
        
<control type="image">
            [...]
            <
visible>ControlGroup(10).HasFocus</visible>
        <
control>
        
# This is your radio button
        
<control type="radiobutton" id="100">
            [...]
            <
onleft>101</onleft>
            <
onright>101</onright>
            <
onup>200</onup>
            <
ondown>200</ondown>
        </
control>
        
# I assume you use a fake spin control, so this would be the group for it
        
<control type="group" id="101">
            
# label for spin control
            
<control type="label">
                [...]
            </
control>
            
# left button for spin control
            
<control type="button" id="102">
                [...]
                <
onleft>100</onleft>
                <
onright>103</onright>
                <
onup>202</onup>
                <
ondown>202</ondown>
            </
control>
            
# right button for spin control
            
<control type="button" id="103">
                [...]
                <
onleft>102</onleft>
                <
onright>100</onright>
                <
onup>203</onup>
                <
ondown>203</ondown>
            </
control>
        </
control>
    </
control>
    
# Second list entry
    
<control type="group" id="20">
        <
control type="image">
            [...]
            <
visible>ControlGroup(20).HasFocus</visible>
        </
control>
        <
control type="radiobutton" id="200">
            [...]
            <
onleft>201</onleft>
            <
onright>201</onright>
            <
onup>100</onup>
            <
ondown>100</ondown>
        </
control>
        <
control type="group" id="201">
            <
control type="label">
                [...]
            </
control>
            <
control type="button" id="202">
                [...]
                <
onleft>200</onleft>
                <
onright>203</onright>
                <
onup>102</onup>
                <
ondown>102</ondown>
            </
control>
            <
control type="button" id="203">
                [...]
                <
onleft>202</onleft>
                <
onright>200</onright>
                <
onup>103</onup>
                <
ondown>103</ondown>
            </
control>
        </
control>
    </
control>
</
control

It might be more work than with 2 list controls but it should work.