Author Topic: autohide panel does not cover underlying text / 6 requests  (Read 485 times)

hiccup

  • Hero Member
  • *****
  • Posts: 8023
I would appreciate some help with the following:

The theater mode in question should always open with block 1 in view.
When clicking the 'Toggle' button, block 2 should open, covering the contents of block 1.

The problem is that the text of block 1 keeps showing through the contents of block 2.




Here's a test TM that demonstrates the problem:


Code
<?xml version="1.0" encoding="utf-8"?>
<root>

<settings enableScaling="true" />

<!-- hide playerbar -->
<element type="PlayerBar" xAnchor="Panel.Left" x="0" yAnchor="Panel.Top" y="-50" width="200" height="46" ></element>


<!-- block1 lyrics cropped -->

<element type="Block" name="#Block1"
 xAnchor="Panel.Left" x="50" width="500"
 yAnchor="Panel.Top" y="50" height="200" bg="0,20,0">
</element>

<element type="Lyrics"
 xAnchor="#Block1.Left" x="80" widthDock="x:#Block1.Right" width="0"
 yAnchor="#Block1.Top" y="10" heightDock="y:#Block1.Bottom" height="0"
 font="Segoe UI" style="Regular" size="12" fg="180,180,180">
</element>


<!-- block2 lyrics full -->

<autoHide name="#LyricsFull" allowPinning="false">

<element type="Block" name="#Block2"
 xAnchor="Panel.Left" x="50" width="500"
 yAnchor="Panel.Top" y="50" height="800" bg="20,0,0">
</element>

<element type="Lyrics"
 xAnchor="#Block2.Left" x="80" widthDock="x:#Block2.Right" width="0"
 yAnchor="#Block2.Top" y="10" heightDock="y:#Block2.Bottom" height="0"
 font="Segoe UI" style="Regular" size="10" fg="200,100,0">
</element>

</autoHide>


<!-- toggle button -->

<element type="Text"
 xAnchor="#Block1.Left" x="10"
 yAnchor="#Block1.Top" y="10" width="80"
 font="Segoe UI" style="Semibold" size="12" fg="200,100,0"
 mouseOverFg="200,200,200" onClick="OpenAutoHidePanel:#LyricsFull">Toggle</element>

</root>

I have tried a couple of things, such as also making block 1 of the 'autohide' kind.
That partly worked, but I couldn't make that always open the TM with block 1.

Anyone with a clever solution?
Last Edit: April 25, 2024, 04:28:51 PM by hiccup

Mayibongwe

  • Sr. Member
  • ****
  • Posts: 1139
  • Heal The World
I'd came across exactly this hiccup :- when I was designing the Motion Pictures TM.
I'd figured that the only way I could get rid of text overlapping between the different panels was to have no text elements on the main page...so more of a workaround than a clever solution.

The main page served as an introductory view with a single invisible button (text element) leading to other panels.
But this one button itself is active on all autoHide panels when they're selected.
So the last step was to mask it with another invisible click that does nothing.

All the panels in that theater mode are set to open to whichever was the last to be opened when the TM was exited.
So that helps in ensuring that the main dummy page is only seen once (at first selection of this TM).

The above is briefly described on #2 here: https://getmusicbee.com/forum/index.php?topic=35996.msg196924#msg196924
The source code to any of my contributions is available on the same download link as the add-ons

Mayibongwe

  • Sr. Member
  • ****
  • Posts: 1139
  • Heal The World
I have tried a couple of things, such as also making block 1 of the 'autohide' kind.
That partly worked, but I couldn't make that always open the TM with block 1.
I'm not on my pc right now, but another thing you can try is to make the lyrics in block1 autoOpen.
I'm thinking autoOpening the lyrics should consequently open block1 as well.
So if most of ur tracks have lyrics, you might then always see block1 first.
The source code to any of my contributions is available on the same download link as the add-ons

hiccup

  • Hero Member
  • *****
  • Posts: 8023
I'd came across exactly this hiccup :- when I was designing the Motion Pictures TM.
Can you think of a good reason why underlying text still shows when a (non-transparent) block (or image) is opened above it?
I can't, so I may post a request to have that changed.
 
Quote
I'm not on my pc right now, but another thing you can try is to make the lyrics in block1 autoOpen.
Thanks, but
1. That doesn't make a difference
2. In the actual TM I am creating, it is for a custom tag panel, not for lyrics.
    I used lyrics in the example TM so that it would work for everyone trying this.

Mayibongwe

  • Sr. Member
  • ****
  • Posts: 1139
  • Heal The World
Can you think of a good reason why underlying text still shows when a (non-transparent) block (or image) is opened above it?
I don't have a good reason as such, but more often than not, it turns out well having text elements take display priority over other elements.
But if Steven has any control over this behaviour, then I would agree with you that the display priority should be decided by the order of definition in the xml.

I have tried a couple of things, such as also making block 1 of the 'autohide' kind.
That partly worked, but I couldn't make that always open the TM with block 1.
After messing around with it, it would appear that the above is the best compromise around.
Did you have something like this? It won't always open with block1 though. If you exit the theater mode on block2, then that's where it'll open to.
Code
<?xml version="1.0" encoding="utf-8"?>
<root>

<!-- hide playerbar -->
<element type="PlayerBar" xAnchor="Panel.Left" x="0" yAnchor="Panel.Top" y="-50" width="200" height="46" ></element>

<!-- global toggle button -->
<element type="Text" xAnchor="#Block1.Left" x="10" yAnchor="#Block1.Top" y="10" width="80" font="Segoe UI" style="Semibold" size="12" fg="200,100,0" mouseOverFg="200,200,200" onClick="OpenAutoHidePanel:#LyricsCropped">Toggle</element>


<!-- block1 lyrics cropped -->
<autoHide name="#LyricsCropped" allowPinning="true">

<element type="Block" name="#Block1" xAnchor="Panel.Left" x="50" width="500" yAnchor="Panel.Top" y="50" height="200" bg="0,20,0"></element>
<element type="Lyrics" xAnchor="#Block1.Left" x="80" widthDock="x:#Block1.Right" yAnchor="#Block1.Top" y="10" heightDock="y:#Block1.Bottom" font="Segoe UI" style="Regular" size="12" fg="180,180,180"></element>
<element type="Text" xAnchor="#Block1.Left" x="10" yAnchor="#Block1.Top" y="10" width="80" font="Segoe UI" style="Semibold" size="12" fg="200,100,0" mouseOverFg="200,200,200" onClick="OpenAutoHidePanel:#LyricsFull">Toggle</element>

</autoHide>


<!-- block2 lyrics full -->
<autoHide name="#LyricsFull" allowPinning="true">

<element type="Block" name="#Block2" xAnchor="Panel.Left" x="50" width="500" yAnchor="Panel.Top" y="50" height="800" bg="20,0,0"></element>
<element type="Lyrics" xAnchor="#Block2.Left" x="80" widthDock="x:#Block2.Right" yAnchor="#Block2.Top" y="10" heightDock="y:#Block2.Bottom" font="Segoe UI" style="Regular" size="10" fg="200,100,0"></element>

</autoHide>

</root>

Edit:
Some late thought which features a dirty hack...
Adding the following to the original LyricsFull panel should 'hide' the underlying text:

Code
<element type="Text"
 xAnchor="#Block1.Left" x="-84" widthDock="x:#Block1.Right" width="500"
 yAnchor="#Block1.Top" heightDock="y:#Block1.Bottom"
 font="webdings" size="375" fg="20,0,0">g
</element>
Last Edit: April 21, 2024, 07:15:57 AM by Mayibongwe
The source code to any of my contributions is available on the same download link as the add-ons

hiccup

  • Hero Member
  • *****
  • Posts: 8023
Did you have something like this? It won't always open with block1 though. If you exit the theater mode on block2, then that's where it'll open to.
Thanks. Yes that was one of the things that I have tried. But as you say, that does not make block 1 the default one that is always opened when the TM starts.

I'm going to post a request for solving the issue by having text that is underneath a newly opened panel to be invisible and not 'shine through'.

hiccup

  • Hero Member
  • *****
  • Posts: 8023
Some requests:

1.
When a panel/block is opened covering an existing text field, the underlying text will remain visible and will interfere with what is in the covering panel.
I can't think of a good reason for that behaviour, so the request is to hide text fields when covered by non-transparent blocks or images.
See here for an example and a brief discussion/confirmation of the matter.


2.
When having different sizes for 'loved' and 'rating', they become misaligned:



I can think of a couple of ways this may be solved:

- Allow 'Rating' to have an yAnchor, so something like this would work:

Code
<element name="#Loved" type="Field" id="RatingLove"
 xAnchor="Panel.10" x="0" width="140"
 yAnchor="Panel.10" y="0"
 visible="MusicBeeSetting"
 fg="50,50,50" fg2="180,180,180" size="10" rightMargin="16" >
    <child id="Rating"
     fg="180,180,180" fg2="50,50,50" size="14"
     yAnchor="#Loved.Top" y="-2"
     visible="MusicBeeSetting">
    </child>
</element>

- Allow for having completely separate entries for 'loved' and 'rating'
   If I am not mistaken, at the moment 'love' and 'rating' are Siamese twins that will only function properly when using the <child> function.

- Have 'love' and 'rating' automagically align vertically whatever the sizes of each.


3.
For lyrics there is the option: 'autoOpen'
My request is to have 'autoOpen' being a generic function, so that it can be used for any field.
(i.e. when the referenced tag is empty, do not show the field/panel)



And finally, bumping some older issues/requests to keep things together:

4.
making Instruments: Performers available as a list

5.
toggle status not being refreshed

6.
independent autohide panels