Bug or feature? UIElements updating trouble.

[imaewyn]

In example im use unity 2019.3.0f1

Hello again. Im still trying to learn UI Elements. At the moment, I have the following problem.
An custom editor built on UI Elements does not allow me to dynamically change content in the editor. For an example, I created a similar solution on imgui in which I carry out similar manipulations. Namely, loading a texture with a background image by loading it using a formatted string. When adding a prefix, the texture with the desired index is loaded. In imgui everything works instantly, but not in uie

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEditor;
using UnityEngine.UIElements;
using UnityEditor.UIElements;

[CustomEditor(typeof(imguiOver))]
public class imguiTest : Editor
{
    Texture2D texture, none;
    int index;
    public override void OnInspectorGUI()
    {
        texture = AssetDatabase.LoadAssetAtPath<Texture2D>($"Assets/Models/Resources/icon{index}.png");
        none = AssetDatabase.LoadAssetAtPath<Texture2D>("Assets/Models/Resources/none.png");
     
        index = EditorGUILayout.IntField(index);
        if (texture != null)
        {
            GUILayout.Box(texture);
            GUILayout.Label($"IMGUI Testing, texture {texture.name} is load");
        }
        else
        {
            GUILayout.Box(none);
            GUILayout.Label("Nothing is loaded");
        }
         
    }
}

[CustomEditor(typeof(monoOverride))]
public class img_testing : Editor
{
    Texture2D texture, none;
    int index;
 
    public override VisualElement CreateInspectorGUI()
    {
        texture = AssetDatabase.LoadAssetAtPath<Texture2D>($"Assets/Models/Resources/icon{index}.png");
        none = AssetDatabase.LoadAssetAtPath<Texture2D>("Assets/Models/Resources/none.png");
        var root = new VisualElement();
        var lbl = new Label();
        var img = new Image ();
        img.scaleMode = ScaleMode.ScaleToFit;
        if (texture != null)
        {
            lbl.text = $"texture {texture.name} is load";
            img.image = texture;
        }
        else
        {
            lbl.text = "Nothing is loaded";
            img.image = none;
        }
        root.Add(img);
        root.Add(lbl);
        var intField = new IntegerField();
        index = intField.value;
        root.Add(intField);        
        return root;
    }
}

this is my code, for example. How i can fix it? Ho to force update/repaint ui?

[antoine-unity]

Hello,

UIElements is a retained mode UI system therefore you’ll have to handle events yourself to update the UI state.
In this specific example, this means that you need to listen for changes on the IntField and and change the image reference.

This should to the trick:

[CustomEditor(typeof(monoOverride))]
public class img_testing : Editor
{
    Texture2D texture, none;
    int index;
    public override VisualElement CreateInspectorGUI()
    {
        texture = AssetDatabase.LoadAssetAtPath<Texture2D>($"Assets/Models/Resources/icon{index}.png");
        none = AssetDatabase.LoadAssetAtPath<Texture2D>("Assets/Models/Resources/none.png");
        var root = new VisualElement();
        var lbl = new Label();
        var img = new Image ();
        img.scaleMode = ScaleMode.ScaleToFit;
        if (texture != null)
        {
            lbl.text = $"texture {texture.name} is load";
            img.image = texture;

        }
        else
        {
            lbl.text = "Nothing is loaded";
            img.image = none;
        }
        root.Add(img);
        root.Add(lbl);
        var intField = new IntegerField();
        // Update image when IntField changes
        intField.RegisterValueChangedCallback(evt => {
            index = evt.newValue;
            texture = AssetDatabase.LoadAssetAtPath<Texture2D>($"Assets/Models/Resources/icon{index}.png");
            lbl.text = $"texture {texture.name} is loaded";
            img.image = texture;
        });
        index = intField.value;
        root.Add(intField);     
        return root;
    }
}

Of course this introduces some duplication so it probably makes sense to create a method to initialize a texture from an index.

[imaewyn]

@antoine-unity

Hello,

UIElements is a retained mode UI system therefore you’ll have to handle events yourself to update the UI state.
In this specific example, this means that you need to listen for changes on the IntField and and change the image reference.

This should to the trick:

[CustomEditor(typeof(monoOverride))]
public class img_testing : Editor
{
    Texture2D texture, none;
    int index;
    public override VisualElement CreateInspectorGUI()
    {
        texture = AssetDatabase.LoadAssetAtPath<Texture2D>($"Assets/Models/Resources/icon{index}.png");
        none = AssetDatabase.LoadAssetAtPath<Texture2D>("Assets/Models/Resources/none.png");
        var root = new VisualElement();
        var lbl = new Label();
        var img = new Image ();
        img.scaleMode = ScaleMode.ScaleToFit;
        if (texture != null)
        {
            lbl.text = $"texture {texture.name} is load";
            img.image = texture;

        }
        else
        {
            lbl.text = "Nothing is loaded";
            img.image = none;
        }
        root.Add(img);
        root.Add(lbl);
        var intField = new IntegerField();
        // Update image when IntField changes
        intField.RegisterValueChangedCallback(evt => {
            index = evt.newValue;
            texture = AssetDatabase.LoadAssetAtPath<Texture2D>($"Assets/Models/Resources/icon{index}.png");
            lbl.text = $"texture {texture.name} is loaded";
            img.image = texture;
        });
        index = intField.value;
        root.Add(intField);    
        return root;
    }
}

Of course this introduces some duplication so it probably makes sense to create a method to initialize a texture from an index.

Oh, thx for so fast answer. Need to learn more, thx so much

[antoine-unity]

This video is a bit lengthy but does a good job at covering the differences with IMGUI:
https://www.youtube.com/watch?v=MNNURw0LeoQ

[imaewyn]

@antoine-unity

This video is a bit lengthy but does a good job at covering the differences with IMGUI:
https://www.youtube.com/watch?v=MNNURw0LeoQ

im try this way, so it works good. Added minor changes for cleaner work. I hope this is useful to someone else.

public class img_testing : Editor
{
    int index;  
   
    public override VisualElement CreateInspectorGUI()
    {
       
        var root = new VisualElement();
        var lbl = new Label();
        var img = new Image ();
        img.scaleMode = ScaleMode.ScaleToFit;
        IconLoader(lbl, img);
        root.Add(img);
        root.Add(lbl);
        var intField = new IntegerField();       
        intField.RegisterValueChangedCallback(evt =>
        {
            index = evt.newValue;
            IconLoader(lbl, img);
        });
        index = intField.value;
        root.Add(intField);          
        return root;
    }
    public void IconLoader(Label lbl, Image img)
    {
        var icon = AssetDatabase.LoadAssetAtPath<Texture2D>($"Assets/Models/Resources/icon{index}.png");
        var noIcon = AssetDatabase.LoadAssetAtPath<Texture2D>("Assets/Models/Resources/none.png");
        if (icon != null)
        {
            lbl.text = $"texture {icon.name} is load";
            img.image = icon;
        }
        else
        {
            lbl.text = "Nothing is loaded";
            img.image = noIcon;
        }
    }