[Icerat]

I have a simple layout I'm playing with / learning from that I use to display my album covers in 3 rows of 6 covers but I'm having an issue with borders for these covers.

For some reason the borders don't appear to be uniform, I'm after a simple 2 pixel border around each cover and from my understanding I think I set them up right but when I look at them the top row looks fine but the 2 following rows don't.

On these rows the top and left edge look thinner then the right and bottom edge, what am I missing, what have I done wrong?

Some assistance from the skinning gods would be appreciated

Code:

<include name="AlbumCoverWall">
        <control type="group">
            <visible>Control.IsVisible(504)</visible>
            <include>VisibleFadeEffect</include>
            <control type="panel" id="504">
                <left>93</left>
                <top>52</top>
                <width>1092</width>
                <height>546</height>
                <onleft>2</onleft>
                <onright>60</onright>
                <onup>504</onup>
                <ondown>504</ondown>
                <viewtype label="31982">grid</viewtype>
                <pagecontrol>60</pagecontrol>
                <scrolltime>200</scrolltime>
                <preloaditems>2</preloaditems>
                <visible>Container.Content(Albums)</visible>
                <itemlayout height="182" width="182">
                    <control type="image">
                        <left>0</left>
                        <top>0</top>
                        <width>180</width>
                        <height>180</height>
                        <align>center</align>
                        <aligny>center</aligny>
                        <aspectratio>stretch</aspectratio>                        
                        <texture background="true">$INFO[Listitem.Icon]</texture>
                        <bordertexture border="2,2,2,2">generic_grey.png</bordertexture>
                        <bordersize>2</bordersize>
                    </control>
                </itemlayout>
                <focusedlayout height="182" width="182">
                    <control type="image">
                        <left>0</left>
                        <top>0</top>
                        <width>180</width>
                        <height>180</height>
                        <align>center</align>
                        <aligny>center</aligny>
                        <aspectratio>stretch</aspectratio>                        
                        <texture background="true">$INFO[Listitem.Icon]</texture>
                        <bordertexture border="2,2,2,2">generic_orange.png</bordertexture>
                        <bordersize>2</bordersize>
                    </control>
                </focusedlayout>
            </control>
            <!--Bottom Info-->
            <control type="group">
                <top>582</top>
                <visible>Container.Content(Albums)</visible>
                <control type="label">
                    <description> Artist (Year) - Title</description>
                    <left>100</left>
                    <top>35</top>
                    <width>400</width>
                    <height>25</height>
                    <align>left</align>
                    <aligny>center</aligny>
                    <font>prom22</font>                    
                    <label>$INFO[ListItem.Artist][COLOR=orange]$INFO[listitem.Year, (,)][/COLOR] $INFO[ListItem.Album,- ,] </label>
                    <scroll>true</scroll>
                    <textcolor>white</textcolor>
                    <shadowcolor>black</shadowcolor>
                </control>
                <control type="label">
                    <description>Genre</description>
                    <left>397r</left>
                    <top>35</top>
                    <width>300</width>
                    <height>25</height>
                    <align>right</align>
                    <aligny>top</aligny>
                    <font>prom22</font>                    
                    <label>$INFO[ListItem.Genre, [COLOR=orange]Genre:[/COLOR] ]</label>
                    <scroll>true</scroll>
                    <textcolor>white</textcolor>
                    <shadowcolor>black</shadowcolor>
                    <wrapmultiline>false</wrapmultiline>
                </control>
            </control>    
            <control type="scrollbar" id="60">
                <left>95r</left>
                <top>52</top>
                <width>5</width>
                <height>544</height>
                <texturesliderbackground>ScrollBarV.png</texturesliderbackground>
                <texturesliderbar>ScrollBarV_bar.png</texturesliderbar>
                <texturesliderbarfocus>ScrollBarV_bar_focus.png</texturesliderbarfocus>
                <textureslidernib>ScrollBarNib.png</textureslidernib>
                <textureslidernibfocus>ScrollBarNib.png</textureslidernibfocus>
                <onleft>504</onleft>
                <onright>504</onright>
                <onup>504</onup>
                <showonepage>false</showonepage>
                <orientation>Vertical</orientation>
                <visible>Control.IsVisible(504)</visible>
            </control>
        </control>
    </include>

[Hitcher]

What resolution are you coding (1080p?) and what are you testing it at (windowed 720p?).

If so, your positions and dimensions must be divisible by 3 so they line up correctly at the lower resolution.

[Icerat]

My main machine at home I use a resolution of 1920x1080 (1080p) and whilst at work I use my laptop, not user on the resolution on that but its not same as home, both used windowed mode.

Im learning and building upon a confluence base so that's 720p i think.

Can you explain what you mean by "If so, your positions and dimensions must be divisible by 3 so they line up correctly at the lower resolution. "

I think I know what your saying just want to to be sure.

[pecinko]

Your item is 182 while thumb is 180. It has to be 178 if you want 2px border around it otherwise it will get cropped.

[Icerat]

Your item is 182 while thumb is 180. It has to be 178 if you want 2px border around it otherwise it will get cropped.

Did as you suggested can see why now forgot to account for the second set of 2 pixels.

There has been some improvement, the middle row now looks great and the top and bottom rows have improved.

On the top row the top edge looks thicker and on the bottom row the bottom edge looks thicker.

Any ideas what I'm doing wrong, Is it a scaling issue to do with cover-art? Each album has a front.jpg cover image in it.

Also the the gap in between the covers has increase from what it was, I presume this is because we made the icon smaller, how do i close this gap back to what it was?

@Hitcher an update on you question the laptop I work on at work resolution is 1366x768

[nessus]

Since you work on Confluence, which is 720p, add this to your Advancedsettings.xml and XBMC window mode will always start at 720p resolution regardless of your screen resolution.

PHP Code:

<window>
  <width>1280</width>
  <height>720</height>
</window> 


Cheers
Nessus

[Icerat]

Stupid question time, will this correct the issue I'm having then.

Try to learn from why I'm getting the border issue

[Hitcher]

@Hitcher an update on you question the laptop I work on at work resolution is 1366x768

182*182 at 720 then becomes 194.13*194.13 at 768.

Try what Nessus suggested to see them at the correct height/width.

[Icerat]

Since you work on Confluence, which is 720p, add this to your Advancedsettings.xml and XBMC window mode will always start at 720p resolution regardless of your screen resolution.

PHP Code:

<window>
  <width>1280</width>
  <height>720</height>
</window> 


Cheers
Nessus

Seems to have sorted it on the laptop everything is in proportion also showed a few positioning errors for a few of my elements that looked fine on the laptop but when I pulled the changed to my main machine in full screen mode it showed gaps in the art and text in wrong places.

Also applied the above on main machine when working in windowed mode.

Only issue with the fixed window size on laptop is that I cant see the bottom of the window full properly and I'm unable to drag window up as Windows 7 full screens the xbmc window if I do that.

Any tips on working within this restriction.

Is it worth learning how to convert the skin to 1080p, only issue I see with this I would working on the laptop could be problematic.