Kodi Community Forum

Full Version: Some Icon Panel questions
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2
So I want an Icon Panel that fills the screen but doesn't bleed over the edges. I've come up with two possible solutions:

1) Make an Icon panel that's slightly smaller than the screen, leaving space for the outer icons to zoom without going off the edges.

2) Somehow restrict the "selection zone" of the panel, so it draws icons all the way out past the edges of the screen but starts scrolling before it hits them.

There are some problems, though. I'm assuming the second idea would require some changes to XBMC as it's quite a specific feature. My chief problem, though, is that Icon Panels don't wrap their contents. So if I have a fullscreen panel with just a few icons, it only populates part of the screen and looks rubbish. Is there any way to change that?
djh here is somthing I did a while ago that might give you an idea on how to make somthign like you ask

Basically its just fullscreen icons with no gap that expand differently depending on what location you are in thus not ever getting cut off
( I more did it just to test jmarshalls new stuff )
But feel free to take it , get inspired by it , or throw it in the trash, I don't plan to use it myself
My suggestion though is to still have some sort of focused image around it it's hard to pick out as you can see

OH BTW this code is for 720p only you will need to mod it for lower
Here is the screen shots of what it looks like in each section (so you get the idea) and the code is below

Image

Image

Image

Image

Image

Image

PHP Code:
<include name="FullscreenIcons">
    <
control type="panel" id="59">
        <
posx>0</posx>
        <
posy>0</posy>
        <
width>1280</width>
        <
height>720</height>
        <
onleft>9000</onleft>
        <
onright>60</onright>
        <
onup>52</onup>
        <
ondown>52</ondown>
        <
scrolltime>200</scrolltime>
        <
viewtype label="536">icon</viewtype>
        <
pagecontrol>60</pagecontrol>
        <
orientation>vertical</orientation>
        <
itemlayout height="240" width="256">
            <
control type="image">
                <
posx>0</posx>
                <
posy>0</posy>
                <
width>256</width>
                <
height>240</height>
                <
info>ListItem.Icon</info>
                <
aspectratio>stretch</aspectratio>
            </
control>
        </
itemlayout>
        <
focusedlayout height="240" width="256">
            <
control type="image">
                <
posx>0</posx>
                <
posy>0</posy>
                <
width>256</width>
                <
height>240</height>
                <
info>ListItem.Icon</info>
                <
aspectratio>stretch</aspectratio>
                <!-- 
First row of icons animations -->
                <
animation effect="zoom" end="-40,0,336,320" time="100" condition="Container.Row(0) + ![Container.Column(0) | Container.Column(4)]">focus</animation>
                <
animation effect="zoom" end="0,0,336,320" time="100" condition="Container.Position(0)">focus</animation>
                <
animation effect="zoom" end="-80,0,336,320" time="100" condition="Container.Position(4)">focus</animation>
                <!-- 
Second row of icons animations -->
                <
animation effect="zoom" end="-40,-40,336,320" time="100" condition="Container.Row(1) + ![Container.Column(0) | Container.Column(4)]">focus</animation>
                <
animation effect="zoom" end="0,-40,336,320" time="100" condition="Container.Position(5)">focus</animation>
                <
animation effect="zoom" end="-80,-40,336,320" time="100" condition="Container.Position(9)">focus</animation>
                <!-- 
Third row of icons animations -->
                <
animation effect="zoom" end="-40,-80,336,320" time="100" condition="Container.Row(2) + ![Container.Column(0) | Container.Column(4)]">focus</animation>
                <
animation effect="zoom" end="0,-80,336,320" time="100" condition="Container.Position(10)">focus</animation>
                <
animation effect="zoom" end="-80,-80,336,320" time="100" condition="Container.Position(14)">focus</animation>
            </
control>
        </
focusedlayout>
    </
control>
</include> 
Wow. That's pretty special - cheers for the heads up.

One nagging doubt, though: what happens if there aren't enough icons to fill the screen?
Hey that is quite nice looking Jezz-x. Djh, hopefully that helps to bring your vision for the movie wall to fruition. Cheers.
djh_ Wrote:Wow. That's pretty special - cheers for the heads up.

One nagging doubt, though: what happens if there aren't enough icons to fill the screen?

then they don't fill the screen Huh it dosn't change how they animate because its all based on what row or column they are in and if it dosn't sill the screen then say row 3 won't be used
So I've had to conclude that this view isn't going to work. The problems, which amount to more than I'm willing to compromise:

- the only way to stop the icons bleeding off the edge is to have a gap around them or use Jezz's solution, which I wouldn't be happy with once frames were introduced
- I wouldn't want a fullscreen view where much of the screen was empty when there weren't enough icons
- I'm not 100% sure how smoothly the icon panel would scroll

I would, however, return to it if the following could be done:

- introduce a "scroll margin" for icon panels, so the panel scrolls before you ever reach the outer edges. That way, the icons that flowed off the screen would never be selected, removing the problem described above.
- allow the icon panels to wrap their contents. I know they already wrap to a degree, but I'd want there to be no visual gap between the last icon and the first.
Scroll margin magic could be done in the same way as Jezz_X does it I think, except you'd be applying the anim to the control rather than the listitems. I'm not 100% sure if it would work, but it's worth a crack.
Sounds promising, though I only vaguely know what you're talking about. What exactly would I need to do?
This may be totally stupid since I haven't actually tried it, but couldn't you build a "wall" out of multiple wraplist controls that navigated between each other, or off to the menu when you reached the last/first control?
no Smile
The idea is to have 4 conditional slide anims on the panel control, conditional on where you are in the panel.

eg if you are in the first row, you'd slide the panel down. If you are in the last row, you'd slide the panel up. Similarly in the first column you'd slide it to the right, and in the last column you'd slide it to the left.

I don't see any reason why this wouldn't work, but maybe I'm missing something.

It doesn't solve the wrap issue ofcourse - that needs code stuff, which basically means you have to wait until I (or someone else) has time to do something about that one.

Cheers,
Jonathan
Hey Jezz I have been tinkering around with this wall view and i seem to have hit a snag. For some reason only three columns appear across the screen, however i know there are more columns off the screen because I can hit right twice before it pops up with the options to change views. I know I am running it at 720p (that was my first thought) and i have tried on both the pc and linux builds. Here is a screen shot of what i am talking about.
Image

Can you think of any reason it might be behaving like this? I am modding the Aeon skin so I might ask DJH if there is an include somewhere that might be interfering. Cheers.
yes the reason is Aeon is actually coded in PAL mode not 720p which is what the code is for so all the dimensions are too big
ahh, right my bad. So a resize of the icon dimensions for PAL should do the trick. I should have thought of that myself. Thanks.
@ Jezz_X

I am still having a little trouble with this view. If all of the animations are set to "focus" then randomly some of the images zoom to a much greater size than the rest. Skunkm0nkee suggested that i set them to "conditional" this fixed the issue of the images zooming beyond the specified proportions but now they will only animate once. After you have scrolled over an image once it no longer zooms it just appears in its fully zoomed state. I must be missing something. Do you think you could look at my code?

Code:
<include name="PosterWall2">

    <control type="panel" id="58">
         <viewtype label="PosterWall">Wall</viewtype>
      <posx>0</posx>
        <posy>0</posy>
        <width>727</width>
        <height>576</height>
        <onleft>2</onleft>
        <onright>2</onright>
        <onup>58</onup>
        <ondown>58</ondown>
        <scrolltime>200</scrolltime>
        <pagecontrol>-</pagecontrol>
        <orientation>vertical</orientation>
        <itemlayout height="192" width="103">
            <control type="image">
                <posx>0</posx>
                <posy>0</posy>
                <width>103</width>
                <height>192</height>
                <info>ListItem.Icon</info>
                <aspectratio>stretch</aspectratio>
            </control>
        </itemlayout>
        <focusedlayout height="192" width="103">
            <control type="image">
                  <posx>0</posx>
                  <posy>0</posy>
                  <width>103</width>
                  <height>192</height>
                  <texture>posterglassborder.png</texture>
                <animation effect="zoom" start="0,0,103,192" end="-51,-15,208,385" time="100" condition="Container.Row(0) + ![Container.Column(0) | Container.Column(6)]">conditional</animation>
                <animation effect="zoom" start="0,0,103,192" end="-10,-15,208,385" time="100" condition="Container.Position(0)">conditional</animation>
                <animation effect="zoom" start="0,0,103,192" end="-97,-15,208,385" time="100" condition="Container.Position(6)">conditional</animation>
                <!-- Second row of icons animations -->
                <animation effect="zoom" start="0,0,103,192" end="-51,-96,208,385" time="100" condition="Container.Row(1) + ![Container.Column(0) | Container.Column(6)]">conditional</animation>
                <animation effect="zoom" start="0,0,103,192" end="-10,-96,208,385" time="100" condition="Container.Position(7)">conditional</animation>
                <animation effect="zoom" start="0,0,103,192" end="-97,-96,208,385" time="100" condition="Container.Position(13)">conditional</animation>
                <!-- Third row of icons animations -->
                <animation effect="zoom" start="0,0,103,192" end="-51,-178,208,385" time="100" condition="Container.Row(2) + ![Container.Column(0) | Container.Column(6)]">conditional</animation>
                <animation effect="zoom" start="0,0,103,192" end="-10,-178,208,385" time="100" condition="Container.Position(14)">conditional</animation>
                <animation effect="zoom" start="0,0,103,192" end="-97,-178,208,385" time="100" condition="Container.Position(20)">conditional</animation>
             </control>

            <control type="image">
                <posx>0</posx>
                <posy>0</posy>
                <width>103</width>
                <height>192</height>
                <info>ListItem.Icon</info>
                <aspectratio>stretch</aspectratio>
                <!-- First row of icons animations -->
                <animation effect="zoom" start="0,0,103,192" end="-23,20,152,312" time="100" condition="Container.Row(0) + ![Container.Column(0) | Container.Column(6)]">conditional</animation>
                <animation effect="zoom" start="0,0,103,192" end="17,20,153,312" time="100" condition="Container.Position(0)">conditional</animation>
                <animation effect="zoom" start="0,0,103,192" end="-69,20,153,312" time="100" condition="Container.Position(6)">conditional</animation>
                <!-- Second row of icons animations -->
                <animation effect="zoom" start="0,0,103,192" end="-23,-60,152,312" time="100" condition="Container.Row(1) + ![Container.Column(0) | Container.Column(6)]">conditional</animation>
                <animation effect="zoom" start="0,0,103,192" end="17,-60,153,312" time="100" condition="Container.Position(7)">conditional</animation>
                <animation effect="zoom" start="0,0,103,192" end="-69,-60,153,312" time="100" condition="Container.Position(13)">conditional</animation>
                <!-- Third row of icons animations -->
                <animation effect="zoom" start="0,0,103,192" end="-23,-140,152,312" time="100" condition="Container.Row(2) + ![Container.Column(0) | Container.Column(6)]">conditional</animation>
                <animation effect="zoom" start="0,0,103,192" end="17,-140,153,312" time="100" condition="Container.Position(14)">conditional</animation>
                <animation effect="zoom" start="0,0,103,192" end="-69,-140,153,312" time="100" condition="Container.Position(20)">conditional</animation>
            </control>
        </focusedlayout>
    </control>
</include>
Pages: 1 2