getmusicbee.com

Support => Developers' Area => TheaterMode => Topic started by: redwing on May 01, 2016, 05:58:10 PM

Title: Drawing scalable squares
Post by: redwing on May 01, 2016, 05:58:10 PM
Quote from: Steven on October 28, 2013, 07:17:57 PM
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:

(http://i.imgur.com/a0mv9yH.png)


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

(http://i.imgur.com/XIFv6fA.png)

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>
Title: Re: Drawing scalable squares
Post by: Steven on May 04, 2016, 09:50:42 PM
i will look at this probably next week
Title: Re: Drawing scalable squares
Post by: Steven on May 11, 2016, 05:38:07 PM
are you still wanting me to look in this issue?
Title: Re: Drawing scalable squares
Post by: redwing on May 11, 2016, 07:00:35 PM
Quote from: Steven on May 11, 2016, 05:38:07 PM
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.
Title: Re: Drawing scalable squares
Post by: Steven on May 12, 2016, 11:27:26 AM
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
Title: Re: Drawing scalable squares
Post by: Bee-liever on May 12, 2016, 12:13:24 PM
That still doesn't address the issue that this won't work

Quote from: Steven on October 28, 2013, 07:17:57 PM
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
Title: Re: Drawing scalable squares
Post by: redwing on May 12, 2016, 01:37:29 PM
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:

(http://i.imgur.com/G1UK78f.png)

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>
Title: Re: Drawing scalable squares
Post by: Steven on May 12, 2016, 03:33:45 PM
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
Title: Re: Drawing scalable squares
Post by: redwing on May 12, 2016, 03:41:04 PM
Quote from: Steven on May 12, 2016, 03:33:45 PM
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.
Title: Re: Drawing scalable squares
Post by: redwing on May 12, 2016, 03:46:22 PM
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.
Title: Re: Drawing scalable squares
Post by: Steven on May 12, 2016, 03:50:31 PM
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
Title: Re: Drawing scalable squares
Post by: redwing on May 12, 2016, 04:01:29 PM
OK. Now I think you fully understand the issue. I'll look forward to the solution. Thanks!
Title: Re: Drawing scalable squares
Post by: Steven on May 12, 2016, 05:46:52 PM
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>
Title: Re: Drawing scalable squares
Post by: redwing on May 12, 2016, 06:00:16 PM
Thanks, it works!
Title: Re: Drawing scalable squares
Post by: redwing on May 13, 2016, 08:31:32 AM
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.
Title: Re: Drawing scalable squares
Post by: Steven on May 13, 2016, 09:42:30 AM
Quote from: redwing on May 13, 2016, 08:31:32 AM
Please support the following three more settings:

Center.Left
Center.Center
Center.Right
these are already supported:
Middle.Left
Middle.Center
Middle.Right
Title: Re: Drawing scalable squares
Post by: redwing on May 13, 2016, 09:45:46 AM
You're right! Thanks!
Title: Re: Drawing scalable squares
Post by: redwing on May 22, 2016, 03:43:09 AM
Two more wishes related to this:

1. Expressions like widthDock="Panel.Height.25" support only panel and album cover type. Can you support block type too?

2. If you use the following:
 
widthDock="Panel.Height.75" width="0" heightDock="Panel.Height.25" height="0"

it draws a square with each side length of "Panel.Height.25". Can you make it draw a non-square rectangle when different values are used?