New UI Widgets

And yet another story begins...

I needed to generate a new widget for a very simple class..
When I run the widget generator it created some code that couldn't be compiled.

I tracked the generators problem down to line 256 of
\New UI Widgets\Scripts\WidgetGeneration\Editor\ScriptsGenerator.cs
The generated code had a line break in this string.
It looks like it was caused by \r\n not being escaped as \\r\\n in the generator.

//? "The left ListView and TileView display the same list.\r\nYou can Drag-and-Drop items between ListView, TileView and TreeView."
? "The left ListView and TileView display the same list.\\r\\nYou can Drag-and-Drop items between ListView, TileView and TreeView."

Now the code generates without any errors.
Sadly it still seems to have problems generating the scene.

I'm using the simplest class for the generator..

Code (CSharp):

1.  
2.     public class CSectionKeyValue
3.     {
4.         public CSectionKeyValue()
5.         {
6.         }
7.         public virtual string Key { get; set; }
8.     }
9.  

Again.. any help would be great.

 

What Unity version are you using?
In latest versions

PrefabUtility.SaveAsPrefabAsset()

return null if called inside
[DidReloadScripts] callback.
Workaround for this behavior was added in v1.15.4.

 

I am using Unity 3D version is 2021.2.19f1
I got New UI Widgets from package manger yesterday and was Version 1.15.4f1 - March 25, 2022

Okay.. I took the initial black and then white screen as a failure.
When in actuality it was the camera being completely jacked up.

Thank you again for all the help.

 

After playing with the Widget Generator a bit I found this Ignore attribute to be useful.
You place it in the generated classes on fields or properties that you don't want UI generated for.

Code (CSharp):

1.  
2.    using UIWidgets.Attributes;
3.     // example usage
4.     public class CTest
5.     {
6.         public CTest()
7.         {
8.         }
9.  
10.         [WidgetIgnore]
11.         public string Id { get; set; }
12.         [WidgetIgnore]
13.         public string Name { get; set; }
14.    
15.         public string Description { get; set; }    
16.         public float Price { get; set; }
17.     }
18.  

Code (CSharp):

1.  
2. namespace UIWidgets.Attributes
3. {
4.     using System;
5.     /// <summary>
6.     /// Allows fields and properties to be ignores by the widget generator
7.     /// </summary>
8.     [AttributeUsage( AttributeTargets.Property | AttributeTargets.Field )]
9.     public sealed class WidgetIgnoreAttribute : Attribute
10.     {
11.     }
12. }
13.  

in \Assets\New UI Widgets\Scripts\WidgetGeneration\Editor\ClassInfo.cs
you would add a using for System.Link or change the code a bit.

line 428 add

Code (CSharp):

1.  
2.  
3.  if (field.GetCustomAttributes( true ).Any( (ATTRIB) => typeof(UIWidgets.Attributes.WidgetIgnoreAttribute).IsInstanceOfType( ATTRIB ) ) )
4.                     continue;
5.  
6.  

line 442 add

Code (CSharp):

1.  
2.  
3. if(property.GetCustomAttributes( true ).Any( (ATTRIB) => typeof(UIWidgets.Attributes.WidgetIgnoreAttribute).IsInstanceOfType( ATTRIB ) ) )
4.                     continue;
5.  
6.  

It is possible the if should be before the protected names check.
I wasn't sure if they were protected for a bigger reason than what they generate.
If so you could move this up.

Anyways.. just wanted to give something back.

 

I have plans for such a feature, but instead of attributes will be a list of fields and properties to use in the widgets generation window.
I decided that attributes are excessive because in most cases they will be used only once.

 

v1.15.5 released

Changelog:

• improved Unity 2021.3 LTS support
• COMPATIBILITY-BREAKING CHANGES: ListView: methods ComponentCreated, ComponentDestroyed, ComponentActivated, ComponentCached changed to public
• ListView: added SetSharedTemplates() method
• Widgets Generation: fixed bug when data type has a parameterless constructor

 

Hi @ilih,
You already have banner example , but can you add this effect where left and right items (which are hidden) but placed and scroll like zoomed (bigger on centre) way
Thanks

 

Please check Examples / ListView / Paginator / Paginator scene at v1.15.6b1
There are two versions: one for ListView and another for ScrollRect (ScrollView).
DefaultItem content is moved to the new nested Container game object (same for the ScrollRect slides), this is done to prevent layout rebuild after scale change.
Container scale changed on movement.

 

Thanks appreciate that

 

I agree the UI would be nice. I did want to mention one or two points about attributes . People are used to attributes like this from Json.net. Additionally, it leaves a history in the code about why the UI looks the way it does. If a different developer needs to regenerate widgets you don't have to worry they will select different options. I think you could actually do both when you build the UI and just auto deselect fields with the attribute. Please don't take this as an argument or me being pushy. Just wanted to mention the virtues of attributes.

 

Hi @ilih . I'd like to have a panel that shows the data as in the Unity hierarchy. I wanna see nodes as parents and their child components just like Unity hierarchy tab. I'm using treeview for this purpose. How can I add the data from the hierarchy into this treeview panel on runtime ? Checking sample treeview code but feel kinda lost and don't know what to start with. Thanks !

 

You check New UI Widgets / Examples / TreeView / TreeViewDataFromHierarchy.cs script and New UI Widgets / Examples / TreeView / HierarchyView folder.

TreeViewDataFromHierarchy script uses default TreeView and displays the entire hierarchy by default (you can use

NestedGameObject(parent)

to display only part of it).
HierarchyView uses custom TreeView, but it can reflect changes in TreeView to the actual hierarchy (drag&drop to reorder).

 

I got a generated widget working finally (I think), but now when I start my game in the editor I get the following error in the console RIGHT at start up (before the main menu screen even comes up).

Code (CSharp):

1. Some objects were not cleaned up when closing the scene. (Did you spawn new GameObjects from OnDestroy?)
2. The following scene GameObjects were found:
3. Prefabs Generator.

No callstack or anything, of course. Thanks, Unity. And Google was pretty useless so far. Did a search in the code for "Prefabs Generator." and found something in the editor portion of my generator widget classes. In "Editor/PrefabsGeneratorEmpire.cs", there is a suspicous code section that DOES get run right at game load:

Code (CSharp):

1.         [UnityEditor.Callbacks.DidReloadScripts]
2.         public static void Wrapper()
3.         {
4.             var go = new UnityEngine.GameObject("Prefabs Generator.");
5.             var gen = go.AddComponent<UIWidgets.WidgetGeneration.PrefabsGeneratorStarter>();
6.             gen.Generator = UIWidgets.UtilitiesEditor.GetFriendlyTypeName(typeof(PrefabGeneratorEmpire));
7.             gen.Start();
8.             UnityEditor.Selection.activeObject = go;
9.         }
10.  

Has anyone seen this or know how to fix it? I'm using Unity 2020.3.

 

Most probably widgets generation was not completed successfully for some reason.
Possible solutions:

1. restart widgets generation, to do this you can:
   • add an empty string (or do any other valid code change) in the script file to invoke scripts reload
   • or uncomment line

     [UnityEditor.MenuItem("Tools/Test Empire generator")]

     (right after

     public static void Wrapper()

     method) and use this menu option
2. if you think that widgets are generated successfully then you can manually delete PrefabGenerator*.cs files from WidgetsEmpire / Editor folder (those scripts are self-deleted after successful prefabs generation)

Explanation:
Widgets generation is done in two steps:

1. scripts generation
2. prefabs generation

Originally prefabs generation was started right away with

[UnityEditor.Callbacks.DidReloadScripts]

.
But with recent Unity changes

PrefabUtility.SaveAsPrefabAsset()

return null inside

[DidReloadScripts]

calls.
So now on

[DidReloadScripts]

callback created an only "Prefabs Generator" game object with a special component to start generation (this game object is also self-deleted).

But for some reason prefabs generation was not successful, there should be some initial error about it in the console log, without it, I cannot figure out why it happens.

 

Interesting. I didn't notice any errors in the log when generating, but then, I wasn't looking either. I'll regenerate them and take a look for errors. It's also good to know I can just delete these scripts. What about the MenuOptions*.cs script? Should that get deleted too?

 

No, it is a menu for the generated prefabs.
Similar to this:

 

OMG how could I have not seen this... Thanks a lot, it helps so much. )

 

@ilih Hi again . Yet I have another situation going on and some help might be really dope. As we talked earlier, I've made a panel with hierarchy view and it's all fine. Now what I'm trying to do is run an existing method which selects the game object on the game view when I click on a button. I want the same to happen as if I'm clicking on the button but this time I'm choosing one or more items from my hierarchy panel. Briefly, I'll select items from hierarchy view and they'll be chosen by my existing method. I'm adding listeners to OnSelect but I'm stuck cuz I can't figure out how to pass the info to my method of which item is selected ?

 

You can use

TreeView.Index2Node(index)

to get node and then get gameobject from node.

Code (CSharp):

1.         void ProcessSelect(int index, ListViewItem instance)
2.         {
3.             var node = TreeView.Index2Node(index);
4.             var go = node.Item.Tag as GameObject; // if TreeView
5.             //var go = node.Item; // if HierarchyView
6.             // do something with go
7.         }

Or you can use

NodeSelected

event instead of

OnSelect

.

Code (CSharp):

1.         TreeView.NodeSelected.AddListener(ProcessSelect);
2.  
3.         void ProcessSelect(TreeNode<TreeViewItem> node)
4.         {
5.             var go = node.Item.Tag as GameObject;
6.             // do something with go
7.         }

Also, maybe useful

TreeView.SelectedNode

(last selected node) and

TreeView.SelectedNodes

(all selected nodes).

 

Awesome ! Thank you

 

Seems that I don't run out of questions @ilih . Is there a way to clip game object names when showing them in the hierarchy view panel? The names are too long and I wanna get some custom parts of the names actually. Although I've seen localized name etc. I couldn't find a way around because a part of the name of a game object is a guid which I need. So I must still be able to get that guid but I don'T wanna show them in the panel. Any suggestions ? Thanks already.

 

You can use LocalizedName (if it is specified it will be used instead of Name).
Like this in

TreeViewDataFromHierarchy.Hierarchy2Data()

method:

Code (CSharp):

1.                 var item = new TreeViewItem(go.name);
2.                 item.Tag = go;
3.                 item.LocalizedName = Name2DisplayedLabel(go.name);

Or you can create a class derived from TreeViewComponent and change how the name should be displayed:

Code (CSharp):

1.     public class TreeViewComponentWithCustomName : TreeViewComponent
2.     {
3.         protected override void UpdateName()
4.         {
5.             if (Item == null)
6.             {
7.                 return;
8.             }
9.  
10.             TextAdapter.text = Name2DisplayedLabel(Item.Name);
11.         }
12.  
13.         string Name2DisplayedLabel(string name)
14.         {
15.             return name;
16.         }
17.     }

 

You're such a good guy . Thanks for replying at speed of light.

 

Hi @ilih
Notice how last item gets expanded but outside of scrollview, can you please provide a solution for that
So any item that gets hidden after expansion gets into scroll view
https://we.tl/t-ftHg5intV5

 

Hello @ilih . Is there a way to reverse the things ? Right now I choose a node and then the related game object is chosen as we discussed above. Now the question is: can I come up with something like I choose the game object and the related node is also chosen ? I have a class to choose objects and I guess I wanna reach out to nodes from there with the information of the game object which is chosen.

 

You can modify ListViewSelectedItemResize.cs this way:

Code (CSharp):

1.         void StartAnimation(ListViewItem instance, Vector2 size)
2.         {
3.             // ... original code here
4.            
5.             // added code
6.             var size_delta = ListView.IsHorizontal() ? SelectedSize.x - DefaultSize.x : SelectedSize.y - DefaultSize.y;
7.             ScrollIntoView(instance.Index, size_delta);
8.         }
9.  
10.         void ScrollIntoView(int index, float sizeDelta)
11.         {
12.             if (ListView.IsVisible(index, 1f))
13.             {
14.                 return;
15.             }
16.  
17.             var pos = ListView.GetItemPosition(index);
18.             if (pos <= ListView.GetScrollPosition())
19.             {
20.                 return;
21.             }
22.  
23.             var target_pos = ListView.GetItemPositionBottom(index) + sizeDelta;
24.             ListView.ScrollToPositionAnimated(target_pos);
25.         }

 

First get node with

TreeView.FindNode()

and then select it:

Code (CSharp):

1. var node = TreeView.FindNode(node => node.Item.Tag == selectedGameObject);
2. TreeView.Select(node);

 

Hi @ilih
Resizing doesnt seem to work if i have a LayoutElement and i try to set preferedHiegght for expanded result, please advise

For the context, i want to use it in IListViewTemplateSelector based ListView where there will be different heights of template selectors with their own prefered heights via layout element,

please also check issue on scrollling
https://we.tl/t-sV60TIMOnK

 

Then you need to change

ProcessSelected()

to work with layout size instead of fixed size:

Code (CSharp):

1.         void ProcessSelected(int index, ListViewItem instance)
2.         {
3.             var size = new Vector2(
4.                 UnityEngine.UI.LayoutUtility.GetPreferredWidth(instance.RectTransform),
5.                 UnityEngine.UI.LayoutUtility.GetPreferredHeight(instance.RectTransform)
6.             );
7.             StartAnimation(instance, size);
8.         }

Please try to change

ListView.ListType

to ListView with Variable Size.

 

Hi @ilih,
There is another edge case, lets say i expanded an item and now i start to scroll as im using virtualization so another item will appear in expanded size
how do i solve this?

 

Restore default size in

DefaultItem.SetData()

method.

// reset width if ListView has horizontal direction

RectTransform.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, default_size.x);

// or height if vertical direction

RectTransform.SetSizeWithCurrentAnchors(RectTransform.Axis.Vertical, default_size.y);

 

I tried setting data earlier but problem is that when size changes SetData gets called for all the items and so that item become closed again

 

Here is the corrected version, added IsSelected check to detect correct size instead of using DefaultSize:

Code (CSharp):

1. public virtual void SetData(ListViewIconsItemDescription item)
2. {
3.        var resize = Owner != null ? Owner.GetComponent<UIWidgets.Examples.ListViewSelectedItemResize>() : null;
4.        if (resize != null)
5.        {
6.              var size = Owner.IsSelected(Index) ? resize.SelectedSize : resize.DefaultSize;
7.              RectTransform.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, size.x);
8.              RectTransform.SetSizeWithCurrentAnchors(RectTransform.Axis.Vertical, size.y);
9.        }
10.        // .. other code
11. }

 

@ilih I'm trying to limit where in a TreeView an item can be dropped. I am populating it with some "commanders" from an observable list on Start:

And then allowing drag/ drop from the ListView above, but I want to only allow dropping as a child of one of these commanders, not to the "root" of the TreeView. So I want to allow the first "US Rifle Standing" in the screenshot below because it's a child of "BLUE COMMANDER", but I do not want to allow the second one because it's not the child of any existing node in the TreeView:


There's no TreeViewDropSupport script on the TreeView itself, only on the DefaultItem, which I thought should do it, but that second "US Rifle Standing" thinks its parent is "GREEN COMMANDER". How do I force it to draw it as a child of its parent (below its parent, and hide-able by using expand/collapse), or prevent it getting dropped in a way that makes it seem like it doesn't have a parent ?

 

First, please try to make sure the problem is with hierarchy, not with the order or indent:
1. Modify TreeViewComponents.cs to display the parent Node name.
This will show the parent node of the second "US Rifle Standing".

Code (CSharp):

1.         protected virtual void UpdateName()
2.         {
3.             if (Item == null)
4.             {
5.                 return;
6.             }
7.  
8.             TextAdapter.text = Item.LocalizedName ?? Localization.GetTranslation(Item.Name);
9.             // added line
10.             TextAdapter.text += "; Parent: " + (Node.Parent == null ? "null" : Node.Parent.Item.Name);
11.         }

2. Add LayoutElement component with specified MinWidth to the DefaultItem.Icon.
This way node name will have the same indent independent (by default icon width is 0 if the sprite is not specified, so the name will have different indents).

 

Not sure that's done everything you asked, but "US Rifle Kneeling" is not a child of "BLUE COMMANDER"


I managed to get some of what I wanted by commenting out lines in TreeViewCustomNodeDropSupport.GetDropType such that it never returns TreeDropNodeType.Before or .After, only .Child. That forces the dropped item to appear as the child of its parent, so the above "US Rifle Kneeling" would be nested under "GREEN COMMANDER" rather than seeming not to have a parent.

So now all I need to do is stop the Commanders being draggable, without that breaking all their children being draggable. Is that possible ?

 

Yes, create class derived from

TreeViewNodeDragSupport

and override

CanDrag()

method.
Then replace the

TreeViewNodeDragSupport

component at TreeView.DefaultItem with the new class.

Code (CSharp):

1.     public class TreeViewNodeDragSupportNestedOnly : TreeViewNodeDragSupport
2.     {
3.         public override bool CanDrag(PointerEventData eventData)
4.         {
5.             if (base.CanDrag(eventData))
6.             {
7.                 return Node.Parent != null;
8.             }
9.  
10.             return false;
11.         }
12.     }

Sorry, completely forgot about that setting.
It's better to do such changes as an overridden method in a derived class than modify the original code because changes will be lost if you decide to update the package.

Code (CSharp):

1.         protected override TreeNodeDropType GetDropType(PointerEventData eventData)
2.         {
3.             return TreeNodeDropType.Child;
4.         }

 

Hmm. Node is null, so it throws an error trying to evaluate Node.Parent

 

This will fix the error

return Node?.Parent != null;

But I cannot find a reason why Node can be null. Is

TreeViewNodeDragSupportNestedOnly

component added to the DefaultItem?
Because Node property is shorthand for the

GetComponent<TreeViewComponent>().Node

;

 

Yes to all those things. I put the code in TreeViewCustomNodeDragSupport instead and it works, so it must be an inheritance thing.

 

Hi @ilih
When List View is scrolling and lets say our list item is similar to a social media item then scrolling default items sort of vibrate, blurry or motion sickness feeling,
I believe this is due to maybe list view items not using rounded values when you posiiton them? or something else?
Please check behaviour on andorid and let me know if you understand

 

Hi! Is it possible to increase the number of rows you can add to a context menu? After maybe 30 rows it throws a load of editor related errors…
We are creating an rts and the context menu is the heart of its ui where we enable/disable menu items based on the unit selected and we need to add quite a few more entries
Let me know if you need any more info
Thanks!

 

What are canvas scaler settings?
Are you tried to enable Canvas.PixelPerfect? If the problem because not rounded values then it should disappear.

 

Can you show those errors? And what Unity version are you using?

 

Isnt pixel perfect causes slow performancE?

 

Yes, but now it needed to check if the problem was caused by not rounded values.

 

ok so it looks like the errors actually happen when you have the event window open for the menu items and then try to add more, rather than because there were too many items. As an aside, you cant copy/paste the contents of those OnClick event event windows without the editor hanging and eventually crashing

 

Ok, but what about error messages and Unity versions? I tried to reproduce it with different versions (except alpha and beta versions) but did not got any errors.

 

I was able to reproduce it: enter play mode with opened "ContextMenu Items Editor" or open it during play mode.
Temporary fix:
add the following lines to the start of

OnGUI()

method in New UI Widgets / Editor / ListView / TreeListEditorWindow.cs

Code (CSharp):

1.         protected virtual void OnGUI()
2.         {
3.             // new lines
4.             if (Application.isPlaying)
5.             {
6.                 Close();
7.                 return;
8.             }

This will close the window in play mode to prevent errors.
I'll look for a more proper fix.

 

Please try v1.15.6b6.
The problem should be fixed in that version.