New UI Widgets

Well if the original intention is to use from code then you could simple remove the create menu. it is very misleading. i assumed that an object created that way would work as expected. It's not my intention to have you redo the entire asset. But should you decide to do so, I think it would open it up to a lot more people who do not have the time to roll t heir own elements.

Well again, here I just went to right click->New UIWidgets->Dialogs->DatePicker. If you create that way there is no OK or Done or any button other than Cancel. And clicking a date only selects it but does nothing else. I would assume this issue is related to point #2 above and works as you mentioned if created through code.

In any case thank you for looking into this. Sorry to be a pain about it. I will RTFM and see if I can make due with the code option. Only problem I might have with doing it all through code is how do we style the elements? But let me read the help first. Maybe its in there....

 

Hi @ilih

DialogCustom already has this
public static int Opened
{
get
{
return openedDialogs.Count;
}
}

Please also provide an event when Custom popup is closed, This is required in a case where we want to show custom dialogs when no other custom dialog is on screen.

Thanks

 

Added in v1.15.8b1

• Dialog, Notification, Picker, Popup: added OnBaseInstanceOpen and OnBaseInstanceClose static events
• Dialog, Notification, Picker: added OnInstanceOpen and OnInstanceClose static events for the custom types

Usage:

Code (CSharp):

1.        DialogBase.OnBaseInstanceClose += DialogClosed;
2.  
3.         void DialogClosed(int opened)
4.         {
5.             if (opened == 0)
6.             {
7.                 Debug.Log("all dialogs closed");
8.                 DialogBase.OnBaseInstanceClose -= DialogClosed;
9.             }
10.         }

Added optional OK button to the picker prefabs and made them work without code in v1.15.8b1.

 

Hi @ilih
A Variable Height List View and a Fixed Height ListView, I assume Fixed one will perform better performance wise? or that difference doesnt matter?

 

"List View with Fixed Size" has better performance.
"List View with Variable Size" performance can be improved by disabling "Precalculate Item Sizes".
The actual performance difference is also affected by the DefaultItem layout, nested layouts, and how many of them have enabled control width/height. So, the actual performance can vary from slightly slower to significantly slower for each case.

 

Hi @ilih

Can you provide a RawImage Wrapper component that when we use in variable height ListView where RawImage will fits from left and right but maintains its aspect ratio height wise.

This'd be really helpful.

 

You can use AspectRatioFitter component with

AspectMode = Width Controls Height

.
If images has different aspect ratio then you need to change AspectRatio (width / height) together with RawImage texture.

 

So listview variable height will auto detect it?

 

Yes if DefaultItem has Vertical Layout Group or EasyLayout component, you will need it in any case because of the multiline title and description.

 

Forgive me if this is a stupid question..

We recently updated to URP.
Obviously this affected many of our third party packages.

When Unity performed the upgrade, it updated almost all New UI Widgets assets.
In the New UI Widgets folder almost all the lighting assets were updated.
All the New UI Widget Prefabs have been modified.
There we also some material updates.

From testing things look good and I haven't seen anything not working.

My concern is in being able to get updates to New UI Widgets?
If we do pull new code does it then need another upgrade?
Will you be publishing a URP version as I've noticed some doing?

Thanks for any information.

 

Updates should work without any problem.
Checked URP support again: package import and update work fine, not found any problems with prefabs and assets.
For now, separate URP and HDRP versions are not needed, since there are no differences in code or shaders.

 

Hi @ilih,
I tried this but Image start of ignoring parent layout, this is my setup

ListView with Variable Height

Defaulttem with EasyLayout , notice children width is FitContainer and heigh tis Prefred Height


Here is RawImage Control



However, my title and description are appearing over rawimage as seems like RawImage simply ignore parent layout.
Please advise?

A sample scene would be great

 

Sample scene in attachment.
There are two ListViews (difference only in DefaultItems):

• with AspectRatioFitter: DefaultItem.EasyLayout.ChildrenHeight = Do Nothing, Title and Description have ContentSizeFitter with VerticalFit = Preferred Size.
  But unfortunately, it does not work reliably, sometimes items have incorrect height.
• with LayoutElement: RawImage has LayoutElement instead of AspectRatioFitter. DefaultItem.EasyLayout.ChildrenHeight = Set Preferred.
  This works correctly.

 

Ok great, as you confirm yourself using AspectRatioFitter doesnt work well with the Variable Height ListView, so its out of question

But how do I use LayoutElement in a way that it applies the needed AspecrRatio? I think you will have to create a wrapper component that does the aspect and then set prefered height? or did you create a custom layoutelement?

 

Add LayoutElement to the RawImage, and set

preferredHeight

in

SetData()

Code (CSharp):

1.         public override void SetData(Item item)
2.         {
3.             var ar = item.Texture != null
4.                 ? item.Texture.width / item.Texture.height
5.                 : 0f;
6.             textureLayoutElement.preferredHeight = ar != 0f ? Texture.rectTransform.rect.width / ar : 0f;
7.             // ...
8.         }

 

Question for you:

I've been noticing that Unity's UI compiled code seems to behave differently than code run in the editor.
Particularly, I'm having issues with EasyLayout which I use for a Ribbon.
When run in the editor everything look correct.



After I run compiled code, notice that all the images are outside their parents space.
This only happens if you build the code..



These are the settings for the top ribbon which constrains the children by their height. I will mention the AccordianTop sits inside another container that restricts the height to 38, which you can see when running in the editor.



It is really frustrating that we are seeing more and more differences with code run in the editor and compiled code.
I will mention that we are having similar issue with TMP when compiled.
I realize this is most likely a Unity issue but I am curious if you've noticed the issue?
Possibly I have done something terribly wrong?
We are using Unity 2020.1.17f1.

 

Wow... this seems to have to do with the Initial resolution of the window.
The buttons are always setup for a maximal resolution.. in my case 1920x1200
Unity stores the resolution the app was closed at.
If the application starts with a small windows then buttons are distorted.
However, if I start with a maximized screen then everything looks good.
Even after resize things are okay.

Something must get initialized with bad values when the initial window is small.

It still sucks that this is so different in the Editor

 

Please try to resize a Game window to the 1276*830 in Editor (click on "Free Aspect" and add custom resolution to check how it will look).

I noticed that icons are not reduced in height in Editor.
Will be free space between icons if they are reduced:

Or they will have an incorrect aspect ratio.

Maybe Icons background and EasyLayout for Icons sizes are independent of each other.

Please, can you make are simple scene with just a background, EasyLayout, and one icon to test it?

Update.: When testing screen resizes or EasyLayout in Editor you need to select Camera or EventSystem in the Hierarchy window (or any other unrelated object), because of layout is updated every frame when it is displayed in the Inspector window.

 

Keep in mind, that inside the editor everything is working perfectly.
The icons reduce correctly if you look at the old screen shots.
This all resizes in the editor perfectly.
I will note that I'm using Button in here in the test.

In our full scene, the problem seems to be initialization when the window resolution is smaller than the Scalar's Reference Resolution. EasyLayout seems to scale things as though you are at the reference resolution.
I swear the Scalar seems to be the root of so many evils.

When the resolution is smaller then, after compiled, buttons are as though you are at the reference resolution.
They also rescale after this proportional to their initial size.

If you open the window full screen everything is good.
As you resize the window down every rescales correctly.

Here is the example you wanted.

 

Sorry, I was asking for the scene as .unitypackage to download it and check it myself because I tried to reproduce this behavior, but without success.

Also, I now see:

• the icons are not just a game object with an Image component, but three game objects: "Command Button", Mask, and Texture.
  Are Mask and Texture have RectTransfrom settings to stretch width and height or it is done in some other way?
• icons preserve aspect ratio on resizing (width changed with height).
  How is it done?

 

Creating a small project was a great idea and I got the same results you dd.

The problem resides in the code we use to loads button based on a list of command Ids.
I did notice that static buttons seem to work but the code loaded buttons are the ones with issues.
We dynamically load much of the UI from prefabs and I have never seen this behavior before.

As a note, I am calling NeedUpdateLayout() and UpdateLayout() after all buttons are loaded.

I am noticing that this does seem to have something to do with the order things are initialized in.
This would sadly indicate that built code and editor code initialize differently.

 

Are you using AspectRatioFitter for the icons?
It does not work correctly with any LayoutGroup.

 

Nope... although I did try it for a very brief period.

 

I finally did get it working and its definitely an order of initialization issue.
Its almost impossible to know what code is actually causing the problem.
I moved the tool bars into their own prefab to push their initialization down stream.
I used a StartCoroutine to push the button initialization down the road.as well.

When it comes to initialization issues like this its often code in static variables.
While C# does provide some order to statics inside a class, when you look at statics across the system, its a mess.
I'm grasping at straws here to explain this.

I still have the underlying feeling its something in Unity itself.

Thank you for all the help.
I couldn't have gotten this done without your ideas.

Chris

 

Hi.
Thanks for the amazing new ui widgets. I have a question. i think it could be simple, but i can't figure out the answer. I have the following code:

Code (CSharp):

1.             ObservableList<string> ds = new ObservableList<string>();
2.  
3.             string nombrePac;
4.             backendApi.Root listaPac = backApi.listaPacientes;
5.             for (int i=0;i< listaPac.data.Count;i++)
6.             {
7.                 nombrePac = listaPac.data[i].patientData.nombre;
8.                 ds.Add(nombrePac);
9.  
10.             }
11.  
12.             if (lv != null)
13.             {
14.                 lv.DataSource = ds;
15.             }
16.  
17.  

is working, but i need some way to identify every list item, by means an id. ¿Is there some property or way to add such id to list view item, in order to diferentiate every one of them ?

Thanks

 

There are different ways to do it:

• Use the widgets generator to create ListView for the patientData type, this ListView will have all necessary data, not just

  nombre

  .
  (Or you can create a custom data type and use it instead of the patientData type).
  
  Code (CSharp):

  1. ObservableList<type of patientData> ds = new ObservableList<type of patientData>();
  2. backendApi.Root listaPac = backApi.listaPacientes;
  3. for (int i = 0; i < listaPac.data.Count; i++)
  4. {
  5.    ds.Add(listaPac.data[i].patientData);
  6. }
• if the id is

  int

  type then you can use ListViewIcons instead of the ListViewString
  (DefaultItem.Icon game object can be deleted or disabled):
  
  Code (CSharp):

  1. ObservableList<ListViewIconsItemDescription> ds = new ObservableList<ListViewIconsItemDescription>();
  2. backendApi.Root listaPac = backApi.listaPacientes;
  3. for (int i = 0; i < listaPac.data.Count; i++)
  4. {
  5.    ds.Add(new ListViewIconsItemDescription() {
  6.       Name = listaPac.data[i].patientData.nombre,
  7.       Value = listaPac.data[i].patientData.id,
  8.    });
  9. }

 

Thanks ilih. That was a very fast reply. I'll give it a try. Thanks, and have a very nice day.

 

Hi. I have a little question. I have some code (lv is a listview):

Code (CSharp):

1.             if (lv != null)
2.             {
3.                 lv.DataSource = ds;
4.                 if (ds.Count > 0)  // tiene pacientes asociados
5.                 {
6.                     // revisamos si las credenciales se habían guardado anteriormente, y si es así dejamos seleccionado al mismo paciente que la vez anterior, de lo contrario
7.                     // dejamos seleccionado al primero de la lista
8.                     int indice = -1;
9.                     if (idPacPerfil.Trim() != "")
10.                     {
11.                         indice = buscarPacientePorIdEnLista(idPacPerfil, listaPac);
12.                     }
13.                     if (indice != -1)
14.                         lv.SelectedIndex = indice;
15.                     else
16.                         lv.SelectedIndex = 0;
17.                    
18.  
19.                     // HERE I WANT THE LISTVIEW SHOWS THE SELECTED ITEM ¿ HOW ?
20.  
21.                 }
22.             }
23.  

Like you can see i assign to selectedIndex property a value, but i need the selected item get visible to the user (auto scroll to the item). ¿Is there some way to do that?

Thanks in advance.

 

You can use any of those functions:

• lv.ScrollTo(lv.SelectedIndex)

  immediately scroll to position

• lv.ScrollToAnimated(lv.SelectedIndex)

  scroll to position with animation

• lv.ScrollToPosition(position)

  or

  lv.ScrollToPositionAnimated(position)

  
  How to get a position:

  lv.GetItemPosition(index)

  ,

  lv.GetItemPositionMiddle(index)

  , and

  lv.GetItemPositionBottom(index)

  .

 

@ilih . Thanks for your fast reply. Have a nice day.

 

Hi @ilih,
It seems that StartScrolling method gets called multiple times
In my assumption, it should only gets called once when you start scrolling and then similarly end scrolling should only call once u stop scrolling
Can you look into that?

Secondly I also want to check when list is slow enough that i know it next 2 seconds it will stop scrolling so i can send image loading request

please advise

 

The

StartScrolling()

method can be called multiple times, but the event OnStartScrolling is raised only once. If you override this method then you need to check the

Scrolling

field to ensure that code is executed only once.

Code (CSharp):

1.         protected override void StartScrolling()
2.         {
3.             if (!Scrolling)
4.             {
5.                 // do something
6.             }
7.  
8.             base.StartScrolling();
9.         }

Here, you can get the time required to stop, then use a coroutine to wait (time - 2) seconds or do something else if the time less then 2 seconds.

 

Thanks @ilih
I actually didnt understand the old solution at that time, but ill try it wiith fresh mind and let you know

 

Hi @ilih
How can i detect scrolling speed? there was something like velocity?

 

There is ScrollRect.velocity.
But calculating the time until scrolling stops is not easy.
I made a function for this:

Code (CSharp):

1. var time = UtilitiesScrollRect.TimeToStop(scrollRect, StopVelocity, TimeStep);

StopVelocity: consider scrolling stopped if the velocity is lower than the specified value (because its does not worth calculating until the velocity became 0); you can use 1f.
TimeStep is time between frames used in calculation, you can use

1f / 30

or

1f / 60

or

Time.deltaTime

.

 

Thank you v much

 

Hi @ilih
Is there a Stars / Rating component?
https://github.com/BioPhoton/angular-star-rating

 

added in v1.15.8b2
Examples / Rating or context menu "New UI Widgets / Input / Rating"

 

You are amazing

 

Is this easy to theme?

 

It is called Styles in the documentation.
There are no significant problems, and toggling between styles is easy.
The problem with creating the style because the usability is bad. I have plans to remake it, but it not does happen in the near future.

 

yeah I tried it out.. the usability is a bit bad.. having to have canvas select> ui > apply etc...

also on URP StyleText.cs
line 403: Font = Resources.GetBuiltinResource<Font>("Arial.ttf");
needs changing to: Font = Resources.GetBuiltinResource<Font>("LegacyRuntime.ttf");
otherwise you get some console error and style doesn't apply.. maybe ifdef for URP I dunno

so could there not be some example scene with all the widgets and way to make changes to a custom style with the changes applied directly something quicker to actually see the changes made faster...is also some things like the 'Table' scene example where the header image have a background color that is not changed by the style applied.

 

is there any thing like this in the examples? https://stackoverflow.com/questions/46651974/swipe-list-item-for-more-options-flutter

I was certain I saw something similar but can't find it so not so sure now.. the examples there showing slide either right or left for different options and sometimes more than one button option...

 

Thanks, I'll fix it in the next update.

Probably Table does not have enabled the "Style Table" property.

Please check Examples / ObjectSliding / ObjectSliding scene.

 

ah cool..yeah that was the example I had seen

 

Feature suggestion/Request:
Please make the default item in listboxes and combo boxes have a text that stretches to the width of the item! I can't count how many times I've added a listbox and changed its width, only to discover that while the listbox item grows to match the text item within it does not. Then all the entries are truncated and I inevitably have to go back and dig through Combobox->ListviewString->ScrollRect->Viewport->List->DefaultItem->Text and change it to stretch with a small border. I honestly can't think of a use case where you wouldn't want your text to fill the item, so it would make more sense for that to be the default.

Thanks!

 

OK, I'll fix it in the next update.
As a temporary fix, you can edit the following prefabs in the Prefabs folder.

 

Hi, Thanks for the really great package.
I'm trying to use the track demo and noticed that the drag handle and the dragging proxy is not in sync.
I tried to fix it be moving the drag handle to the left but it's giving a strange behaviour.
Would love to be able to use this cool example to build on.

https://drive.google.com/file/d/1WhymEcjlaT3n0EMpOw-uk7UP1fq3gW3j/view?usp=sharing

 

1. Proxy is always at fixed distance from the cursor position
You need to change

DragInfoOffset

to 0.


2. Probably incorrect RectTransform settings for the handle:
Please try the following settings if you want to move the handle to the left side.


3. Minimum distance to drag is 1 hour. So proxy can be at any position, but the item (or handle) will be at a position rounded to the nearest hour.

Here are changes to replace the "1-hour" step with a custom value:
Add the following code in Examples / TracksView / ScheduleView.cs

Code (CSharp):

1.         TimeSpan step;
2.  
3.         public TimeSpan Step
4.         {
5.             get
6.             {
7.                 if (step.TotalSeconds == 0)
8.                 {
9.                     step = new TimeSpan(MinHours, 0, 0);
10.                 }
11.  
12.                 return step;
13.             }
14.  
15.             set
16.             {
17.                 step = value;
18.             }
19.         }
20.  
21.         protected readonly int SecondsInDay = 24 * 60 * 60;

And replace those methods:

Code (CSharp):

1.         protected override float Point2Base(DateTime point)
2.         {
3.             var delta = point - ValueAtCenter;
4.             return (float)delta.TotalSeconds / SecondsInDay;
5.         }
6.  
7.         protected override DateTime Base2Point(float baseValue)
8.         {
9.             var seconds = baseValue * SecondsInDay;
10.             var step = (float)Step.TotalSeconds;
11.             seconds = Mathf.RoundToInt(seconds / step) * step;
12.  
13.             return ValueAtCenter.AddSeconds(seconds);
14.         }
15.  
16.         protected override float GetItemMinWidth()
17.         {
18.             return GetPointHeaderWidth() * (float)Step.TotalSeconds / SecondsInDay;
19.         }

Now you can change the drag step to 1 second or any other value:

scheduleView.Step = new TimeSpan(0, 0, 1);

 

Wow, it's working now. The drag handle is behaving correctly.
Question: Where to set "scheduleView.Step = new TimeSpan(0, 0, 1);" in the inspector?

Also I recorded the screen where I tried to drag and drop a clip to the track above and. It keeps on jumping to the top row and there is no way to drop it in the track above. How to fix this. Thanks

https://drive.google.com/file/d/1IpmGp8pdQjIyXYr5d6TE9oACkTnCEXIB/view?usp=sharing