Aligning Images

[peternm22]

I have a few ideas for STVi's, so I've been working through the Studio tutorials trying to figure things out.

I'm having trouble getting images aligned the way I want them. I have 2 images (a genre icon, and a poster image), and I want the genre icon to be overlayed at just the right position on top of the poster (see attachment right.jpg for an example).

I've messed around with all the settings I can think of, but I can't see to make the poster stay in the right position when the UI is resized (see attachment wrong.jpg).

The only way I've found to keep them aligned to one another is to specify all the coordinates/widths/heights in pixels. The problem with this though, is that nothing scales at all when the UI is resized.

Any ideas what I'm doing wrong?


Thanks.

[GKusnick]

Hard to say for sure without seeing your code, but I'm guessing what's happening is that you have the image width set to a fixed fraction of the container width. As the container shrinks, the image width shrinks in proportion, dragging the height down with it to maintain the source image's aspect ratio.

But it's not really the width you want to control, it's the height. You want the height to be a fixed fraction of the container height, and the width to be as wide as it needs to be to accomplish that.

Probably the simplest approach is to make the width much wider than you need, and right-align the image within its bounding box, so that it grows to the left as needed.

If you want to get more compicated, you can use GetFullUIWidth() and GetFullUIHeight() to calculate the UI's aspect ratio and factor that into your image width calculation, so that the width becomes a fixed fraction of the overall UI height.

[peternm22]

Thanks for the reply.

I was using fixed width, like you thought. I switched to fixed height and it fixes the moving up/down problem, but now it drifts slightly left/right (not a lot, but it's noticeable). Here's the code as it currently is:

<?xml version="1.0" encoding="UTF-8"?>
<Module xmlns="urn:tv.sage/stv" Name="export">
<Image ID="export:73" Name="Poster" Sym="TGGMI-142928">
<File>C:\Documents and Settings\Peter\Desktop\76290-4.jpg</File>
<AnchorX>1.0</AnchorX>
<AnchorY>0.52</AnchorY>
<FixedWidth>1.0</FixedWidth>
<FixedHeight>0.41</FixedHeight>
<HorizontalAlignment>0.95</HorizontalAlignment>
<PreserveAspectRatio>true</PreserveAspectRatio>
<ResizeImage>true</ResizeImage>
<AutoRepeatAction>false</AutoRepeatAction>
<BackgroundComponent>false</BackgroundComponent>
<MouseTransparency>false</MouseTransparency>
</Image>
<Image ID="export:74" Name="Genre" Sym="TGGMI-142927">
<File>C:\Documents and Settings\Peter\Desktop\Genre_Folders_v1.1\Action_folder.png</File>
<AnchorX>1.0</AnchorX>
<AnchorY>0.0</AnchorY>
<FixedWidth>1.0</FixedWidth>
<FixedHeight>0.35</FixedHeight>
<HorizontalAlignment>0.96</HorizontalAlignment>
<PreserveAspectRatio>true</PreserveAspectRatio>
<ResizeImage>true</ResizeImage>
<AutoRepeatAction>false</AutoRepeatAction>
<BackgroundComponent>false</BackgroundComponent>
<MouseTransparency>false</MouseTransparency>
</Image>
</Module>

Working with Studio is a lot harder than I thought it would be...

[GKusnick]

You have a HorizontalAlignment of 0.95 on one image and 0.96 on the other, so that could account for some discrepancy as the overall width changes. Personally I'd suggest aligning them both at 1.0 to make them immune to width changes, and using insets on the container if you need more space to the right.

[peternm22]

If I align them both to 1.0, then they don't line up (the genre image has a small transparent gap on the right side). I tried using insets for spacing, but it creates the exact same problems when resizing.

Any other ideas?

Thanks for the help.

[GKusnick]

Can't you edit the image to trim away any blank border, so that the bounding box fits tight to the visible edges? Then aligning to 0.0 or 1.0 should do what you'd expect, i.e. flush the visible edge of the image up against the edge of the container.

The alternative is going to be to do a lot of explicit calculations on image widths and heights, taking the UI aspect ratio into account, in order to get things exactly where you want them.

[jaminben]

Originally Posted by GKusnick

The alternative is going to be to do a lot of explicit calculations on image widths and heights, taking the UI aspect ratio into account, in order to get things exactly where you want them.

Is their any chance you could give an example of what these calculations would look like and mean?

I currently use a few in some of my imports but to be honest I don't know what they mean I've looked around the forums, Studio tutorials and searched google but nothing explains what they mean.

A few examples of what I've used/seen:

=.5625*GetFullUIWidth()/GetFullUIHeight()

=If(Height != null, Height, null)

=If( 0.5625*GetFullUIWidth()/GetFullUIHeight() < 0.75 , 1.0 - 0.5625*GetFullUIWidth()

=GetProperty( "amis/jaminben/menuadvancedposition/X" , 0.05 )*GetFullUIWidth()/GetFullUIHeight()

The one that bugs me the most is:

Fixed Width = 1.0 *GetFullUIHeight() / GetFullUIWidth() * GetProperty( "amis/jaminben/menuadvanced/SX" , 2.0 )

Fixed Height = 1.0 * GetProperty( "amis/jaminben/menuadvanced/SY" , 0.08 )

The above code seems to work ok but to make the menu stretch the full length of the screen it has to be set to 2.0. However to me the full length of the screen is actually 1.0. If I set the value to 1.0 it only fills 50% of the available screen.

Any help would be greatly appreciated even if its a link to a tutorial or guide. However I'm shooting completely in the dark and have no idea about programming so if its just too complicated to explain don't worry. I'll keep plodding on until I break something drastically and then give up.

Many Thanks

Ben

[GKusnick]

Originally Posted by jaminben

The above code seems to work ok but to make the menu stretch the full length of the screen it has to be set to 2.0. However to me the full length of the screen is actually 1.0. If I set the value to 1.0 it only fills 50% of the available screen.

If you want the width of your panel (or whatever) to be a specified fraction of the screen width, with 1.0 being full width, then you don't need to do any aspect ratio calculations. Get rid of the GetFullUIHeight()/GetFullUIWidth() and just enter the desired fraction directly, the way you're doing for the height. (The 1.0 * business is to convert the property value from a text string into a number.)

If you want the width of your panel to be a specified fraction of the screen height, that's when you'd need to scale your values by GetFullUIHeight()/GetFullUIWidth(). Assuming a 16x9 screen, an input value of 1.0 would translate to ~0.56 of the screen width, making the panel width equal to the screen height. To get full screen width, you'd need to specify an input value of 1.777.

For the rest of your examples, it's hard to say what the right calculation ought to be without knowing what those specific examples are trying to achieve.

[jaminben]

Originally Posted by GKusnick

If you want the width of your panel to be a specified fraction of the screen height, that's when you'd need to scale your values by GetFullUIHeight()/GetFullUIWidth(). Assuming a 16x9 screen, an input value of 1.0 would translate to ~0.56 of the screen width, making the panel width equal to the screen height. To get full screen width, you'd need to specify an input value of 1.777.

Ah, that bit makes sense now. So where I had:

Fixed Width = 1.0 *GetFullUIHeight() / GetFullUIWidth() * GetProperty( "amis/jaminben/menuadvanced/SX" , 2.0 )

I could actually use:

Fixed Width = 1.0 *GetFullUIHeight() / GetFullUIWidth() * GetProperty( "amis/jaminben/menuadvanced/SX" , 1.777 )

For use with a 16:9 wide screen TV.

However their is no real need to do that as the object was to make sure the menu stretched the full length of the screen when someone imported it for the first time. So setting a value of 2.0 maybe overkill for general use but its not strictly wrong. Or am I getting it wrong?

Cheers

Ben