Forums | NoesisGUI

Posted: **20 May 2021, 06:42**

We just upgraded to 3.12 from 3.04, and are running into some sizing/scaling issues on iOS 9(iPad) probably centered around ViewBoxes.

We have an overlay window that we put into a ViewBox over our main game window. We generally want to scale this window to as much of the screen as possible.

If you look at the attached screenshots, things are behaving the way we expect in the Editor and on Android, but on iOS something is not working the same, and the overlay window is not expanding vertically in the same way.

Editor:
https://1drv.ms/u/s!AjEAlWO9Yl9unM5_-EXF0dN2Panvmg

Android:
https://1drv.ms/u/s!AjEAlWO9Yl9unM8BvkmlZlX32V13Yw

iPad:
https://1drv.ms/u/s!AjEAlWO9Yl9unM8AkP0z2a6YNS5TbQ

The XAML that runs the sizing here is as follows:

<Grid Visibility="{Binding DataContext.IsVisible, ElementName=LineupView, Converter={StaticResource BoolToVisConverter}}"  Background="{Binding BoundaryColor}" Opacity="{Binding Opacity, ElementName=LineupView}">
  <Grid x:Name="LineupModal">
    <Grid.RowDefinitions>
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
  </Grid>
  <Viewbox Stretch="Uniform" StretchDirection="Both" x:Name="LineupViewbox">
    <views:LineupView x:Name="LineupView" HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="10"
      Visibility="{Binding IsVisible, Converter={StaticResource BoolToVisConverter}}" 
      Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=ActualWidth}"  
      MaxHeight="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=ActualHeight}"                 
      MaxWidth="2000"
      Opponent="False"/>
  </Viewbox>
</Grid>

I cannot easily load the old version onto my iPad right now, but based on our customer complaints when they upgraded today, this was not a problem running on iOS under 3.04. We didn't change any code while doing this upgrade--we were just updating Noesis to get some bug fixes we needed.

Any ideas what might be going on here? Thanks.

Posted: **20 May 2021, 10:50**

Hi Jamieh,

I see that the LineupView binds its Width and MaxHeight to a parent UserControl, is that control filling the entire screen? Can you please attach the Inspector tool to the running application and see the values of those properties and ActualHeight in each platform?

Also, can I see the XAML for the LineupView (you can create a private ticket in our bugtracker if you don't want to share it here), because the Height of the control is determined by the contents, so I want to understand how it is being layout inside.

Posted: **20 May 2021, 16:50**

Yes the parent UserControl is full-screen.

We have seen some additional screen shots from customers that make me believe this is a bad height/width issue as well. I'm guessing we are failing to get the proper size of that parent control for some reason. We're seeing other windows (that are also based on the size of the parent) displaying in weird/inconsistent ways on iOS.

However it is working on Android and in the editor. I'm assuming it is working in WebAssembly too but I haven't tried that yet.

How would I attach the inspector tool to this running on iOS? iOS is the only platform that seems to be showing the problem.

Thanks.

Posted: **20 May 2021, 16:57**

So we have a Scale Function in a base class and I think this is where things are breaking.
If I had to guess, ParentContainer.ActualWidth and ParentContainer.ActualHeight are getting bad data here and it is throwing a bunch of stuff off for us. But I haven't done any direct iOS debugging yet. As I said, in the Unity editor everything is working, and we were working on iOS under Noesis 3.0.4.

        private void SetupScaling()
        {
            var x = ParentContainer?.ActualWidth ?? 1024F;
            var y = ParentContainer?.ActualHeight ?? 768F;

            _windowSize = new Point(x, y);

            if (Widescreen)
            {
                x = y * 4 / 3;
            }

            ScaleY = y / 768F;

            if (x / y >= 1.33F)   //1.27
            {
                ScaleX = ScaleY;
            }
            else
            {
                ScaleX = x / 1024F;
            }

            if (ScaleAdditional.HasValue)
            {
                ScaleX *= ScaleAdditional.Value;
                ScaleY *= ScaleAdditional.Value;
            }

            if (ScaleByAspectRatio.HasValue)
            {
                float additionalScale;
                var aspectRatio = x / y;
                if (Widescreen || aspectRatio >= ScaleByAspectRatio.Value.Value.X)
                {
                    additionalScale = ScaleByAspectRatio.Value.Value.Y;
                }
                else if (aspectRatio <= ScaleByAspectRatio.Value.Key.X)
                {
                    additionalScale = ScaleByAspectRatio.Value.Key.Y;
                }
                else
                {
                    var range = ScaleByAspectRatio.Value.Value.X - ScaleByAspectRatio.Value.Key.X;
                    var ratio = (aspectRatio - ScaleByAspectRatio.Value.Key.X) / range;
                    var scaleDifference = ScaleByAspectRatio.Value.Value.Y - ScaleByAspectRatio.Value.Key.Y;
                    additionalScale = ScaleByAspectRatio.Value.Key.Y + (ratio * scaleDifference);
                }

                ScaleX *= additionalScale;
                ScaleY *= additionalScale;
            }

            _locationModifier = new Point(x / 1024F, y / 768F);
            _parentSize = new Point(x, y);

            UpdateLocation();
        }

Posted: **20 May 2021, 18:15**

If you look at the attached screenshots, things are behaving the way we expect in the Editor and on Android, but on iOS something is not working the same

Looking again at the screenshots I see that the overlay window is not covering the available screen in the Editor either, the only difference with iOS is that iPad vertical resolution is a lot bigger (1620px) than the Editor viewport (1122px in that screenshot) so in the iPad it has more available space. And both have the same text size (same scale?). Android screenshot on the other hand has bigger text, so some scale has been applied to that overlay window.

So we have a Scale Function in a base class and I think this is where things are breaking.

Can you add some logs to that SetupScaling() function to see if the ParentContainer is null? My guess is that is null in the Editor and iOS so no scale is being applied to the overlay window.

How would I attach the inspector tool to this running on iOS? iOS is the only platform that seems to be showing the problem.

If you have your iPad connected to the same network than your PC, you can launch our Inspector tool and then you should be able to connect to your running application.

Posted: **20 May 2021, 20:50**

Ok cool, thanks for the info about the inspector tool. I will fire that up and see if I can figure out what sizing is wrong. I can also do some debug messages about that parent container being null. I suspect that may be what is happening too, however it does only seem to be happening under iOS. I should have taken another editor picture with it sized like the IPad--it's definitely different in some way.

I will do more digging and give you the results.

Edit: The ParentControl is definintely NOT null in the editor--it is a Noesis.Canvas. But I agree with you that the screenshot on iOS looks like what I would expect if it was null.

Posted: **22 May 2021, 08:05**

Ok, so after digging a ton more, you were right on the screen ratio. In fact, I don't think the original "problem" was actually a problem at all. I had misunderstood what our customer was saying was wrong. (I did update our scaling to work better on 4:3 ratio with large resoution)

After getting a screen shot from the customer, his problem was with a TOOLTIP. And yes, when I looked at it, the scaling on the tooltip was all messed up in 3.0.12 vs 3.0.4. I believe this is because before, Noesis (incorrectly?) applied the underlying scaling of a viewbox to to tooltips that had the viewbox in their parent chain. So we were using a layout transform to counteract that stretching/scaling that was going on. This appears to be different (fixed?) in 3.0.12, so tooltips are not scaling based on the underlying ViewBox.

HOWEVER.

I've run into a different problem. After changing the ScaleTransform to ignore the viewbox settings and just scale based on main window resolution, I got everything working great in the editor. But when I run on iOS now, the bottom of our tool-tip is getting cut off. See the two pics:

Editor: https://1drv.ms/u/s!AjEAlWO9Yl9unM8E-jlSVA7YWPg_iQ
iOS: https://1drv.ms/u/s!AjEAlWO9Yl9unM8FR0H1Rad0_35eoA

You can see the last several lines of the player card in the iOS version are truncated.

I thought maybe I could override this size by binding in the Grid for the tooltip and setting the size manually where I do the Scale Transform, but that did not work. In fact, the Inspector says the Grid has the right height. However the parent Border and Tooltip elements do NOT have the right height, despite being an Auto height. They are not sizing to hold the Grid that is their child.

This is the tooltip XAML:
Note the ParnetContainer is being used to handle the ScaleTransform inside of the code. The ToolTipRoot is what I added to try and manually set the size of the Grid, but even when I do that the parent Border and ToolTip have a smaller height (on iOS only)

<Border.ToolTip>
<ToolTip Placement="Left">
<Grid x:Name="ToolTipGrid">
<controls:BatterCard Player="{Binding Player}" ParentContainer="{Binding ElementName=DynastyMainWindow}" ToolTipRoot="{Binding ElementName=ToolTipGrid}"
Visibility="{Binding IsPitcher, Converter={StaticResource BoolToCollapsedConverter}}"/>
<controls:PitcherCard Player="{Binding Player}" ParentContainer="{Binding ElementName=DynastyMainWindow}" ToolTipRoot="{Binding ElementName=ToolTipGrid}
Visibility="{Binding IsPitcher, Converter={StaticResource BoolToVisConverter}}" />
</Grid>
</ToolTip>
</Border.ToolTip>

So.....Help! What do I need to do to get this ToolTip to size properly on iOS? Is there a reason the ToolTip item would be a different size than it's child content?

Thanks.

Posted: **23 May 2021, 07:21**

Ok, I tracked the problem down. There seems to be a Noesis issue with displaying ToolTips that contain content that has a LayoutTransform/ScaleTransform on it.

The problem gets worse as the scale values go up. We were only seeing it on iOS because with a scale of 1.75 or lower the problem is not that obvious. Due to the larger resolution of the iPad the scale value was getting larger and thus exposing the problem.

I checked WPF and the problem is not there.

I have created a bug. I uploaded demo projects to show the problem. I marked it minor, but it does block us from upgrading to the new version of Noesis, so perhaps I should mark is more serious? I didn't want to be hyperbolic about it.

Thanks!

https://www.noesisengine.com/bugs/view.php?id=2027

Posted: **25 May 2021, 12:13**

Thanks for the report. It will be solved as soon as possible.

Posted: **25 May 2021, 17:24**

Thank you!

Forums | NoesisGUI

Unity: Issue with ViewBox/Sizing on iOS after upgrading to 3.12

Unity: Issue with ViewBox/Sizing on iOS after upgrading to 3.12

Re: Unity: Issue with ViewBox/Sizing on iOS after upgrading to 3.12

Re: Unity: Issue with ViewBox/Sizing on iOS after upgrading to 3.12

Re: Unity: Issue with ViewBox/Sizing on iOS after upgrading to 3.12

Re: Unity: Issue with ViewBox/Sizing on iOS after upgrading to 3.12

Re: Unity: Issue with ViewBox/Sizing on iOS after upgrading to 3.12

Re: Unity: Issue with ViewBox/Sizing on iOS after upgrading to 3.12

Re: Unity: Issue with ViewBox/Sizing on iOS after upgrading to 3.12

Re: Unity: Issue with ViewBox/Sizing on iOS after upgrading to 3.12

Re: Unity: Issue with ViewBox/Sizing on iOS after upgrading to 3.12