Working with WidgetGridBox

[ZhbanyFatty]

Hello! I'm trying to make a map manipulator via a GUI. I have an image splitter that splits an image into parts and moves it into a WidgetGridBox. After that, I discovered a problem with the scaling function and grid cells, namely, after scaling the WidgetGridBox object, some of the cells do not display part of the image (Fig. 1, Fig. 2).

The test results indicate that this may be due to the grid cells having a ratio and not being able to fit parts of my image. Following the documentation (https://developer.unigine.com/en/docs/2.17/api/library/gui/class.widgetgridbox?rlang=cs), I can set the ratio using the method: void SetColumnRatio ( int num , int ratio ), but I don't understand the ratio parameter, it is of type int, what about the 16:9 ratio? its ratio is 1.78.

If I open the image in the editor, it has a resolution parameter, there I see the values 32, 64, 128, etc. (Fig. 3). Does this mean the default ratio could be 1 or 2? Another part of the documentation (https://developer.unigine.com/en/docs/2.17/code/gui/ui/ui_containers?rlang=cs#gridbox) says that a ratio parameter is a vector with integer values.

Please help me understand WidgetGridBox and find a solution to my problem with “disappearing” images in grid cells when scaling (zooming) the widget. The code where I split the image and place the pieces into the widget, as well as how I scale the widget is below.

Fig.1

Fig.2

Fig.3

 [ParameterFile]

 public string myImage;

 

Dictionary<int, Image> myImages;

 

private void SplitMyImage()

    {

        Image image = new(myImage);

        int posX = 0;

        int posY = 0;

        float widthF = (float) image.Width / widgetMap.NumColumns;

        float heightF = (float) image.Height / (widgetMap.NumColumns - 1);

        int width = MathLib.CeilToInt(widthF);

        int height = MathLib.CeilToInt(heightF);

 

        for(int index = 0; index < widgetMap.GridNumCells; index++)

        {

            Image cutImage = new();

            cutImage.Create2D(width, height, image.Format);

 

            if (cutImage.Copy(image, 0, 0, posX, posY, width, height, false))

            {

                myImages.Add(index, cutImage);

            }

            else

            {

                for (int i = 0; i < width; i++)

                {

                    for (int j = 0; j < height; j++)

                    {

                        cutImage.Set2D(i, j, Image.ToPixel(image.Format, vec4.WHITE));

                        myImages.Add(index, cutImage);

                    }

                }

            }

 

            if (posX + width < image.Width)

            {

                posX += width;

            }

            else

            {

                posX = 0;

                posY += height;

            }

        }

    }

 

    public void SetGridContent(Dictionary<int, Image> images)

    {

        foreach(var key in gridSprites.Keys)

        {

            gridSprites[key].SetLayerImage(0, images[key]);

        }

    }

 

    private void ScaleGrid()

    {

        gridCellWidth = MathLib.RoundToInt(gridWidth * scale / gridOrigin.NumColumns);

        gridCellHeight = MathLib.RoundToInt(gridHeight * scale / (gridOrigin.NumColumns - 1));

 

        foreach (var key in gridSprites)

        {

            key.Value.Width = gridCellWidth;

            key.Value.Height = gridCellHeight;

        }

 

        gridOrigin.Width = gridCellWidth * NumColumns;

        gridOrigin.Height = gridCellHeight * (NumColumns - 1);

 

        if (gridClone != null)

        {

            foreach (var key in gridSpritesClone)

            {

                key.Value.Width = gridCellWidth;

                key.Value.Height = gridCellHeight;

            }

 

            gridClone.Width = gridOrigin.Width;

            gridClone.Height = gridOrigin.Height;          

        }

    }

 

[nikitagrgv]

Hello!

1. What do you mean by scaling the WidgetGridBox? It does not have any methods for scaling. Are you referring to the `Width` and `Height` properties of WidgetSprite?
2. There is not enough context provided in your code to understand the problem. We attempted to create a minimal reproduction using the following code:

using System;
using System.Collections;
using System.Collections.Generic;
using Unigine;

[Component(PropertyGuid = "85735da4f7848f4d0b4a58eb74b3894ea6fa72e7")]
public class comp1 : Component
{
    [ParameterFile]
    public string imagePath;

    private void Init()
	{
        Input.MouseHandle = Input.MOUSE_HANDLE.USER;
        Gui gui = WindowManager.MainWindow.SelfGui;

        WidgetGridBox gridBoxWidget = new(gui, 2);
        gui.AddChild(gridBoxWidget);

        Image baseImage = new Image(imagePath);
        int baseHeight = baseImage.Height;
        int baseWidth = baseImage.Width;

        {
            WidgetSprite sprite = new(gui);
            Image image = new Image();
            image.Create2D(baseWidth / 2, baseHeight / 2, baseImage.Format);
            image.Copy(baseImage, 0, 0, 0, 0, baseWidth / 2, baseHeight / 2);
            sprite.SetImage(image);
            sprite.Width = 515;
            sprite.Height = 150;
            gridBoxWidget.AddChild(sprite);
        }
        {
            WidgetSprite sprite = new(gui);
            Image image = new Image();
            image.Create2D(baseWidth / 3, baseHeight / 3, baseImage.Format);
            image.Copy(baseImage, 0, 0, baseWidth / 2, baseHeight / 2, baseWidth / 3, baseHeight / 3);
            sprite.SetImage(image);
            sprite.Width = 123;
            sprite.Height = 50;
            gridBoxWidget.AddChild(sprite);
        }
        {
            WidgetSprite sprite = new(gui);
            Image image = new Image();
            image.Create2D(baseWidth / 2, baseHeight / 2, baseImage.Format);
            image.Copy(baseImage, 0, 0, 0, 0, baseWidth / 2, baseHeight / 2);
            sprite.SetImage(image);
            sprite.Width = 60;
            sprite.Height = 120;
            gridBoxWidget.AddChild(sprite);
        }
        {
            WidgetSprite sprite = new(gui);
            Image image = new Image();
            image.Create2D(baseWidth / 2, baseHeight / 2, baseImage.Format);
            image.Copy(baseImage, 0, 0, baseWidth / 2, baseHeight / 2, baseWidth / 2, baseHeight / 2);
            sprite.SetImage(image);
            sprite.Width = 222;
            sprite.Height = 333;
            gridBoxWidget.AddChild(sprite);
        }
    }
}

In this code, original image is splitted into different parts and passed to WidgetSprite, then the sprite is randomly resized by setting Width and Height properties. We got the following result:

All sprites are correctly splitted and resized, and there is not disappeared images. Please try to make minimal reproducing of your problem using this code.

Thanks!

[ZhbanyFatty]

Hello, nikitagrgv!

1. Yes, i'm resize a widget by changing width/height. Sorry for not mentioning this.

2. I wrote a script (TestGridScale) where you can see my problem with disappeared images after scale (by MouseWeel) down below (fig.1). Sorry for the bad set of words that describe my problem. p.s. also add scale and drag&drop to you script (YaScript) there is same problem after scale (scale 1.4 - have a image, scale 1.5 - image is disappered. fig.2-3)

fig. 1

fig.2

fig.3

TestGridScale.cs

YaScirpt.cs

Edited November 14, 2023 by ZhbanyFatty

[bmyagkov]

Hello!

@ZhbanyFattyIt turns out that there is a bug that prevents proper scaling causing this issue. Unfortunately, there's currently no solution or workaround available. Fundamentally, the grid box wasn't designed for this purpose and it's much more recommended to utilize the Unigine::WidgetCanvas class for such tasks.

The good news is that we've already fixed the issue in our internal branch and this fix will be included in the upcoming 2.18 SDK release later this year.

We apologize for any inconvenience caused.

Thanks!