Visibility based on row position
#1
Hi!

I just began coding a mockup I did for fun. It started well, but soon I came across a problem. If you look at the image, you see that the bottom row has reflections but the top row doesn't. I was pretty confident I saw something in the skinning manual about a boolean condition based on row or column. When I looked it up I realized it was this: "Container(id).Row(row)" but it's for the focused item only. Sad

Is there a way to get the position an unfocused item to make a visibility condition based on it?

Image
Reply
#2
If your background colour is constant I'd just hide the first row's reflections by adding a texture matching the background to the top of the item layout.
Reply
#3
That's so clever. Thanks! It works great. It's a bit sad that I have to settle for a plain colour, though. But you can't have everything, and one might even argue it looks better that way. Now the code looks like this:

Code:
<itemlayout width="180" height="262">
            
<control type="image">
<posx>108</posx>
<posy>319</posy>
<width>164</width>
<height>246</height>
<aspectratio>stretch</aspectratio>
<texture diffuse="mockup/prefs.png" flipy="true">$INFO[ListItem.Icon]</texture>
</control>
                
<control type="image">
<posx>108</posx>
<posy>55</posy>
<width>164</width>
<height>262</height>
<aspectratio>stretch</aspectratio>
<texture>mockup/test.png</texture>
</control>

<control type="image">
<posx>108</posx>
<posy>71</posy>
<width>164</width>
<height>246</height>
<aspectratio>stretch</aspectratio>
<colordiffuse>99FFFFFF</colordiffuse>
<bordertexture>mockup/semiwhite.png</bordertexture>
<bordersize>1</bordersize>
<texture>$INFO[ListItem.Icon]</texture>
</control>

</itemlayout>

I had to put the reflection at the top to make sure it stays behind the color texture, which I put beneath and resized to the poster size + 16 px to also cover the item gaps. Was this what you had in mind?

BTW, is there a preferable method for when using textures of a single colour? The way I do it now is to use a small picture (24x24px) with the colour and then resize it in the xml, because I reckon it takes less cpu to handle a small file like that, as opposed to, say picture with a resolution of 1280x720. Or does the resizing itself cause more cpu usage?
Reply
#4
8x8 is the smallest you can go, any smaller and it gets messed up when packed in an XBT.
Reply
#5
Ok, thanks! That's good to know.
Reply
#6
Think I'm going to give up on his one. The workaround you came up with works really well but only when the container has an even number of items. Otherwise it ends with a single item at the top row, and since there's no item below it, there's no texture to cover the reflection.

So I came up with a solution that's comparing the strings of Container.NumItems, Container.CurrentPage, Container.NumPages and Container.Position to determine the visibility of a texture outside the item layout for covering the reflection. Then I realized that this worked only when the panel consisted of more than one page. So I think it becomes too much ugly code just for the sake of these reflections.

I'll try a different layout keeping these things in mind instead. Though first I'm going to try and fix some things in the way the container displays the items that are partly out of screen. There are some glitches in the animations were some posters start blinking when moving. Might be just on my mac... have to test in on my OE build.
Reply
#7
Does Container(id).Position honor pages? I.e. does the counter reset when you navigate to a new page?
Image
Reply
#8
Position is based only on the items you can see on a page.
Reply
#9
Then can't you set up the reflections with Container(id).Position and Container(id).ListItem(offset).Thumb?

Container(id).Position = 1 (top left)
Container(id).ListItem(1).Thumb, Container(id).ListItem(3).Thumb, Container(id).ListItem(5).Thumb, ...

Container(id).Position = 2 (bottom left)
Container(id).ListItem(0).Thumb, Container(id).ListItem(2).Thumb, Container(id).ListItem(4).Thumb, ...

Container(id).Position = 3 (2nd item from the left, first row)
Container(id).ListItem(-1).Thumb, Container(id).ListItem(1).Thumb, Container(id).ListItem(3).Thumb, ...

It's super ugly, I know, but it should get the job done if I'm not missing something crucial.
Image
Reply
#10
It's possible that way but will need a lot of code as you're basically making a coverflow view - a group scrolling left, a group for scrolling right and a group for static items.
Reply

Logout Mark Read Team Forum Stats Members Help
Visibility based on row position0