New UI Widgets

Hi @ilih

I supplied an image which is inside slide for scaling, and now that image becomes bigger 1.5
It should be other way around, so when slide is entering then scaling starts from 1.5 and end at 1.0


I tried swaping scaling positions but it didnt work
var scale = Mathf.Lerp(1f, carousel.Scale, ratio);


Please let me know if its clear

 

I'll add the generic version. But

GetComponent<T>()

does not allocate memory so no garbage.

In both cases, you can move more than one slide.
You just need to have a wide enough screen resolution to do this: more than 1.5x of the slide width.
Move the browser window to the right side of the screen, place the cursor to the most right position, and drag to the left side to move to the last slide.
FullHD resolution is enough to check this (without scale).

You want to move only one slide at a time then make the slide fit screen width.

 

I'll test it on mobile so i can stop worrying after your explanation
please do provide answer to this one

https://forum.unity.com/threads/new-ui-widgets.297353/page-45#post-7591363

 

I need a full code or demo package to check why.
Please check the demo scene at v1.15.2b8

 

Thank you very much, I'm now using Generic version with a small change in double customized, please add it back on your side

Code (CSharp):

1.     public class DoubleCarouselCustomized<TDoubleCarousel, TSlide> : MonoBehaviour
2.         where TSlide:DoubleCarouselCustomizedSlide
3.         where TDoubleCarousel: DoubleCarousel<TSlide>
4.     {
5.         /// <summary>
6.         /// Double carousel.
7.         /// </summary>
8.         [SerializeField]
9.         protected TDoubleCarousel carousel;
10.  

 

Hi @ilih,
Here is the video,
https://we.tl/t-9iKzn6xcLY

i have attached image to "Labels" field because labels field does the scaling, image (mobile) is actually child of slide
What happens it , as you can see in video when slide is set image is scaled to 1.5x and when slide goes away it goes back to original size = 1

What i want is, reverse behaviour, so child image scales from 1.5x (slide start sliding inside view) to scale 1 when its "set" or when its

So lets say i have slide 1,2,3
Slide 1 will appear instantly with child image as 1 scale, now i start moving to slide 2, and slide 2 image appears as scaled and start becoming 1, and now i see only slide 2 and image is on 1 scale.

i can create an animation for better explanation

Thanks

=========



Q2: I also noticed another bug (maybe its due to making doublecarouselcustomized generic on my side) is that now there is extra 4th slide and 4th pagiantor which is buggy
but when i start recording using unity's recorder then it becomes fine, here is the video
https://we.tl/t-dX0xKyk8I4

 

DoubleCarouselCustomized and DoubleCarouselCustomizedSlide is just the examples how to use

CustomSetDirectSlideState

and

CustomSetReverseSlideState

.

Use

DoubleCarouselCustomizedSlide.BackgroundRectTransform

instead of Labels for the Image.

I'll think about what can cause this.

 

@ilih, Update 3,
Please check carousel problem, 4th extra slide and image becoming bigger when a slide is set (rather than opposite of it)

 

Cannot reproduce, also have missing scripts errors and missing prefabs.

Please try to add the following code to the

ScrollRectPaginator

and use

SetPages()

to change pages to 3.

Code (CSharp):

1.         public virtual void SetPages(int pages)
2.         {
3.             SetScrollRectMaxDrag();
4.  
5.             Pages = pages;
6.  
7.             UpdateLastPageMargin();
8.  
9.             if (currentPage >= Pages)
10.             {
11.                 GoToPage(Pages - 1);
12.             }
13.             else if (ForcedPosition != PaginatorPagePosition.None)
14.             {
15.                 SetPage(CurrentPage);
16.             }
17.         }

 

Because you have 3 slides DirectScrollView and only 1 in ReverseScrollView.
If both slides count is the same then the image scale will be correct.

 

Does this work properly with the new input system? Just noticed on 2022.1a12 things are little broken.. latest package, but custom image cursors don't show properly. And seems only works if Standalone Input Module on... Touch Input Module (Deprecated) with Force Module Active on...

 

Yes. But InputFields does not with new InputSystem, it is a known uGUI limitation.

Since v1.15.1 cursors fields are deprecated and replaced with Cursors assets. You should get a warning about this in the console.
You can add the CursorsDPISelector component to the scene, or specify Cursors for each component separately.

Can you give more details about this?

 

"The new input system cannot yet feed text input into uGUI and TextMesh Pro input field components. This means that text input ATM is still picked up directly and internally from the Unity native runtime."

That?

Anyway yeah what event component stuff is meant to be in the scene to work properly.. seems in 2022.1 the old input system is gone... looking at the new ui widget example scenes.. they kinda work but when I try making a new scene with some drag/resize stuff they don't work right and the cursors don't change consistently..

 

Yes.

You need to add the single

CursorsDPISelector

component for the new scenes.
I'll add the automatic addition of this component to the scene in the next update.

 

oh ok.. I was a version behind didn't see the CursorsDPISelector..but even adding it to the scene.. it doesn't fix the issue of the drag/resize things not working anymore... I'm really not sure what happening

 

As far as I know, the problem was solved by transferring to a new project.
I think removing Library and obj folders from the project would have worked the same way.

 

yeah things are working now in a new project.

is there anything for grid snapping for drag/resizing..seems like it would be a useful addition for the interactions part of new widgets ui...

Like general grid snapping that worked with drag/resize where you can define the grid sizes being used.
And another for snapping something back to its original defined area? or selected areas where it can be snapped back to if dragged close enough? Often used for inventory system for drag dropping items from bag/inventory slots etc

 

Not available in the current version; maybe be added in the next update.

 

Hi @ilih,
Double Carousel "swiping" on mobile seems slow, how can i make it fast?
Let me know if you need to see a video for understanding it better
Thanks

 

Any update on this? this'd open so many opportunities like providing interactive tutorials

Update 2:
BTW, it'd be great if this new tooltip also share same base Custom generic class like notify and dialog/popup so we can show buttons and other custom stuff too

Update 3:
Along with optional modal and color

 

You can change DirectPaginator.Movement.
The horizontal axis is time, by default, it is 1 second, drag the endpoint to the left to decrease time, it will make swipe faster.

Almost done, I need to make tests to make sure it works correctly and create a demo scene.

It will be generic.

It is a tooltip, it cannot be modal.

 

Reason i suggested modal, for a toolip with buttons is that we can use it for tutorials
https://stackblitz.com/edit/angular-material-ngx-onboarding

For example, we show tooltip progrmmatically either top or bottom or right or left (including alignment) with 2 buttons skip tutorial, move next tutorial, we handle those buttons just like we handle on notification or dialog and show another tooltip on some other control with modal

 

Generic tooltips added in v1.15.2b10

Script usage:

Code (CSharp):

1. // add tooltip
2. var settings = new TooltipSettings(
3.    TooltipPosition.TopRight,
4.    delay: 0.3f,
5.    parent: target.transform as RectTransform);
6. Tooltip.Register(target, "Tooltip Text", settings);
7.  
8. // remove tooltip
9. Tooltip.Unregister(target);

The same can be done with the

TooltipStringViewer

component.

Check

TooltipString

and

TooltipStringViewer

scripts to how generic tooltips are done.

Check Examples / Tooltip / TutorialsTooltips script and scene.

 

Amazing
You are not just making new ui widgets great but also all of that experience and features will play huge role AFTER UITookit is launched, and then you create an entirely new version for that with the best features, performance optimizations and usecases. You are Number 1 UI Library for Unity and you will be Number 1 for UITookit too

 

SnapGrid added in v1.15.2b12

Demo scene at Examples / SnapGrid folder.

You need the following components:

• SnapGrid or SnapLines to define lines
• SnapDrawer to display lines; (snapping will work without it)
• specify SnapGrid for the Resizable and Draggable components or add SnapGridDetector component (this will detect SnapGrid under the cursor and change SnapGrid option of Resizable and Draggable components)

 

Awesome will try it out thanks!

 

Hi @ilih
Creating ListView in recent versions no longer has inertia/elastiticy in scrolling list, they feel "stiff"
What settings do i need to change to make them elastic like a simple scroll view?

 

ListView.ScrollRect:

• change Movement Type to Elastic
• enable Inertia

 

Its already enable like that, but still scrolling doesnt show any elasticity

 

Maybe enabled LiseView.ScrollInertiaUntilItemCenter? This can affect ScrollRect.Inertia.

Or it can be caused by some other script: try to check just ListView at the new scene.

 

please check this


Is there any sample scene with lets say 100 items i can see for elasticily?

 

add ListViewIcons, then change DataSource size to 100 in the Inspector Window: the last item will be duplicated, but it does not matter in this case.

 

Here it is, please check, issue is clearly visible.
So what happens is when i'm in playmode, interia on ScrollRect gets unchecked
So which settings disable it in listview?

https://we.tl/t-raKeGt3HvS

 

I found a bug: if ScrollInertiaUntilItemCenter is disabled then ScrollRect.inertia changed to its original value, but the original value was not saved, so it was always set to false.

Fix:
Replace

Enable()

method in ListViewTypeRectangle.cs

Code (CSharp):

1.             public override void Enable()
2.             {
3.                 if (isEnabled)
4.                 {
5.                     return;
6.                 }
7.  
8.                 if (Owner.ScrollRect != null)
9.                 {
10.                     DefaultInertia = Owner.ScrollRect.inertia;
11.                     Owner.ScrollRect.onValueChanged.AddListener(OnScroll);
12.                     isEnabled = true;
13.                 }
14.             }

 

Thanks for fixing it on such short notice

 

Tried out the snapping it works pretty well and as it is I'll have some good use for it now.. ..though some more options would be good.. like currently whatever is defined for the SnapGrid works everywhere with the dragging anyway (I noticed if there defined grid was only 1 side of the screen and resized the object it stopped snapping once past the visual grid area).. Anyway it would be good if there was a way to define areas (like a way to manually provide defined list of snap grids that will work for that dragged object) with an option that if dragging out of those defined grid areas will just cause the dragged object to snap back to inside the nearest grid?

.. so if you had 2 grids either side of the screen as the snap grid areas the object is allowed on anything else would just cause it to snap back? ..well anyway probably plenty of features for snap grids, more event options for snap grids?

 

Currently, Resizable/Draggable support snapping only for one grid.
Support of multiple grids is done with SnapGridDetector: it detects SnapGrid under the cursor and replaces SnapGrid used by Resizable/Draggable, without SnapGridDetector snapping will work with only one predefined dgrid.
I'll replace a single SnapGrid for the Resizable/Draggable with the list of SnapGrid's.

You can change the SnapDistance field of Resizable/Draggable to the width and height of the screen.
In this case, it will always snap will always work.

I'll think about events.

 

"I'll replace a single SnapGrid for the Resizable/Draggable with the list of SnapGrid's."

That would be good (mainly so that different objects could be assigned to different grids without having to use a SnapGridDetector that would use them all.

Also currently the snapping takes place while the mouse is held down, could there be an option to have it so that the snapping only takes place once the mouse is let go? And then another option for when an object is dropped on area without any snap grid area under it? Then it will just go back to where it was last picked up and dragged from?

"I'll think about events. "

Thanks maybe it is a little out of scope, just looking at other addons that handle inventory slots etc, it seems like this support would pretty much make it a viable alternative.

 

Hi @ilih
How should i check inside a ListViewcomponent setData that this is the last item?

 

Index == Owner.GetItemsCount() - 1;

 

Hi @ilih

Unity 2021.2.2f1 is showing these errors when compiling for Android

 

Fixed in v1.15.2b14.
Those errors were only in beta versions.

 

Hi @ilih
How do i get scroll position of ListView, so i can set it back in future?

 

Code (CSharp):

1. // get scroll position
2. var pos = ListView.GetScrollPosition();
3. // set scroll position
4. ListView.ScrollToPosition(pos);
5. // or with animation
6. ListView.ScrollToPositionAnimated(pos);

 

Hi @ilih

Can you please create an example of a GroupList where

- Group will have title and description
- Items will be multiple templates, for example some items will be simple list items and some will be like list items with radio buttons, and some will be with check boxes

Thanks

 

OK.

 

Thanks and Really appreciate that

 

Hi @ilih

I have an issue with ListView(TreeViewCustom.cs) when MultipleSelect is enabled and selecting elements with Shift key:

• First element is selected:
  

• Using Shift to select from index 0 to 2. All good:
  
  
• Continue selecting with Shift key, instead of having index 0 to 5 I get index 2 to 5 selected:
  
  

And selecting objects with shift key from bottom to top behaves differently, you get index 0 to 5.
We are using Unity 2020.3.20 and package version 1.14.1.

Is it the expected behavior? I haven't seen a change in change-log from version 1.15.1, do you have any plan to change it?

Thanks in advance.

 

Yes, this is how it should work in the current version.
But I'll add an option to specify the how range should start: from the last selected item (current behavior) or from the first selected item.

 

An option would be awesome, thank you!