Drawing scalable squares

[redwing]

added support for percentage values
e.g. heightDock="x:#Cover.70" would be 70% of the width of element #Cover

The code above does not work, for some reason.
Also "align" attribute for drawing squares does not work properly when used along with percentage values.

With fixed values, it's working fine. For instance, with the following code:

<?xml version="1.0" encoding="utf-8"?>
<root>
<element name="Cover(1)" type="AlbumCover" xAnchor="Panel.Center" x="0" yAnchor="Panel.Center" y="0" width="200" height="200" align="Bottom.Right" min="50" max="500" brightness="1.0" />
<element name="Cover(2)" type="AlbumCover" xAnchor="Panel.Center" x="0" yAnchor="Panel.Center" y="0" width="200" height="200" align="Bottom.Left" min="50" max="500" brightness="1.0" />
<element name="Cover(3)" type="AlbumCover" xAnchor="Panel.Center" x="0" yAnchor="Panel.Center" y="0" width="200" height="200" align="Top.Right" min="50" max="500" brightness="1.0" />
<element name="Cover(4)" type="AlbumCover" xAnchor="Panel.Center" x="0" yAnchor="Panel.Center" y="0" width="200" height="200" align="Top.Left" min="50" max="500" brightness="1.0" />
</root>

You get this:




But how should you code to get the following scalable squares, each side of which is as long as a quarter of panel height?



I tried the following code, but it shows no covers:

<?xml version="1.0" encoding="utf-8"?>
<root>
<element name="Cover(1)" type="AlbumCover" xAnchor="Panel.Center" x="0" yAnchor="Panel.Center" y="0" widthDock="y:Panel.25" width="0" heightDock="y:Panel.25" height="0" align="Bottom.Right" min="50" max="500" brightness="1.0" />
<element name="Cover(2)" type="AlbumCover" xAnchor="Panel.Center" x="0" yAnchor="Panel.Center" y="0" widthDock="y:Panel.25" width="0" heightDock="y:Panel.25" height="0" align="Bottom.Left" min="50" max="500" brightness="1.0" />
<element name="Cover(3)" type="AlbumCover" xAnchor="Panel.Center" x="0" yAnchor="Panel.Center" y="0" widthDock="y:Panel.25" width="0" heightDock="y:Panel.25" height="0" align="Top.Right" min="50" max="500" brightness="1.0" />
<element name="Cover(4)" type="AlbumCover" xAnchor="Panel.Center" x="0" yAnchor="Panel.Center" y="0" widthDock="y:Panel.25" width="0" heightDock="y:Panel.25" height="0" align="Top.Left" min="50" max="500" brightness="1.0" />
</root>

[Steven]

i will look at this probably next week

[Steven]

are you still wanting me to look in this issue?

[redwing]

are you still wanting me to look in this issue?

Yes. Without having this basic issue resolved, writing scalable TM views is quite limited. Whenever trying to write a new TM, I always get stuck with this.

[Steven]

i am still looking at this but i will give you the reason it happens:
- xAnchor="Panel.Center" x="0" yAnchor="Panel.Center" sets the x and y value to the center of the panel
- widthDock="y:Panel.25" (perhaps you meant to use x:  but it wont help) means the plugin will set the width to 25% of the panel minus the y value (which is the center of the panel). That effectively sets a negative width

the problem for me is i dont remember the reasons some things were done the way they are, so even if on first glance the behaviour may seem odd (which it does to me in this case) there might be a sound reason.
If you are able to find another way to acheive this then that might be best but i will have another look at this later today

[Bee-liever]

That still doesn't address the issue that this won't work

added support for percentage values
e.g. heightDock="x:#Cover.70" would be 70% of the width of element #Cover

x:#Cover.70 doesn't calculate 70% of the width value of #Cover and use it as the height value

[redwing]

There are two issues here. One is whether dock attribute is a value or a position. The other is how to allow a square to be drawn backwardly with align attribute.

My suggestion is if widthDock takes y:value (or heightDock takes x:value), treat it as a value instead of a position. This will resolve widthDock="y:Panel.25" issue as it would mean the width would be always 25% of the panel height regardless of the given position.
The second issue can be resolved if it can interpret each value of align attribute properly. Look at the following picture, which shows how a square sometimes gets drawn in reverse direction depending on the align value:



If those are addressed, then the following code should work:

<?xml version="1.0" encoding="utf-8"?>
<root>
<element name="Cover(1)" type="AlbumCover" xAnchor="Panel.Center" x="0" yAnchor="Panel.Center" y="0" widthDock="y:Panel.25" width="0" heightDock="y:Panel.25" height="0" align="Bottom.Right" min="50" max="500" brightness="1.0" />
<element name="Cover(2)" type="AlbumCover" xAnchor="Panel.Center" x="0" yAnchor="Panel.Center" y="0" widthDock="y:Panel.25" width="0" heightDock="y:Panel.25" height="0" align="Bottom.Left" min="50" max="500" brightness="1.0" />
<element name="Cover(3)" type="AlbumCover" xAnchor="Panel.Center" x="0" yAnchor="Panel.Center" y="0" widthDock="y:Panel.25" width="0" heightDock="y:Panel.75" height="0" align="Top.Right" min="50" max="500" brightness="1.0" />
<element name="Cover(4)" type="AlbumCover" xAnchor="Panel.Center" x="0" yAnchor="Panel.Center" y="0" widthDock="y:Panel.25" width="0" heightDock="y:Panel.75" height="0" align="Top.Left" min="50" max="500" brightness="1.0" />
</root>

[Steven]

on reflection i think widthDock and heightDock are doing what they were supposed to do and I cant change the behavior as other TM skins are using it eg. the xbox music skin
In your case setting the value to .75 should have worked but trying myself and as you suggest there is more to the issue so i will investigate this further

edit:
i can see why its not aligning so i should be able to address that

[redwing]

on reflection i think widthDock and heightDock are doing what they were supposed to do and I cant change the behavior as other TM skins are using it eg. the xbox music skin

I don't understand. It won't affect any existing skins as no skin is using y:value for widthDock or x:value for heightDock.

[redwing]

Maybe you don't understand why I want to use y:value for widthDock in the first place. It's for drawing a square that has the same length for width and height.

[Steven]

yes i guessed the reason afterwards. In any case i think this will need some new way to express what you want to achieve as the align setting conflicts/ has circular dependency issues with the width/height dock settings

[redwing]

OK. Now I think you fully understand the issue. I'll look forward to the solution. Thanks!

[Steven]

http://www.mediafire.com/download/2fcq0c05qche3jv/mb_TheaterModePlugin.zip

use this:

Code

<?xml version="1.0" encoding="utf-8"?>
<root>
<element name="Cover(1)" type="AlbumCover" xAnchor="Panel.Center" x="0" yAnchor="Panel.Center" y="0" widthDock="Panel.Height.25" width="0" heightDock="Panel.Height.25" height="0" align="Bottom.Right" min="50" max="500" brightness="1.0" />
<element name="Cover(2)" type="AlbumCover" xAnchor="Panel.Center" x="0" yAnchor="Panel.Center" y="0" widthDock="Panel.Height.25" width="0" heightDock="Panel.Height.25" height="0" align="Bottom.Left" min="50" max="500" brightness="1.0" />
<element name="Cover(3)" type="AlbumCover" xAnchor="Panel.Center" x="0" yAnchor="Panel.Center" y="0" widthDock="Panel.Height.25" width="0" heightDock="Panel.Height.25" height="0" align="Top.Right" min="50" max="500" brightness="1.0" />
<element name="Cover(4)" type="AlbumCover" xAnchor="Panel.Center" x="0" yAnchor="Panel.Center" y="0" widthDock="Panel.Height.25" width="0" heightDock="Panel.Height.25" height="0" align="Top.Left" min="50" max="500" brightness="1.0" />-->
</root>

[redwing]

Thanks, it works!

[redwing]

Currently the following align settings are supported:

Top.Left
Top.Center
Top.Right
Bottom.Left
Bottom.Center
Bottom.Right

Please support the following three more settings:

Center.Left
Center.Center
Center.Right

Without this, it's not possible to draw some scalable squares, the side length of which is based on either panel width or panel height.