Search Unity

  1. Welcome to the Unity Forums! Please take the time to read our Code of Conduct to familiarize yourself with the forum rules and how to post constructively.

New UI Widgets

Discussion in 'Assets and Asset Store' started by ilih, Feb 11, 2015.

  1. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,751
    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

    upload_2021-10-21_21-27-55.png
     
  2. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,242
    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.
     
    jGate99 likes this.
  3. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,751
    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
     
  4. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,242
    I need a full code or demo package to check why.
    Please check the demo scene at v1.15.2b8
     
    jGate99 likes this.
  5. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,751
    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.  
     
  6. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,751
    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
     
    Last edited: Oct 22, 2021
  7. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,242
    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.
     
  8. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,751
    @ilih, Update 3,
    Please check carousel problem, 4th extra slide and image becoming bigger when a slide is set (rather than opposite of it)
     

    Attached Files:

    Last edited: Oct 22, 2021
  9. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,242
    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.         }
     
  10. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,242
    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.
    upload_2021-10-22_22-31-18.png
     
  11. Slashbot64

    Slashbot64

    Joined:
    Jun 15, 2020
    Posts:
    184
    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...
     
  12. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,242
    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?
     
  13. Slashbot64

    Slashbot64

    Joined:
    Jun 15, 2020
    Posts:
    184
    "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..
     
  14. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,242
    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.
     
  15. Slashbot64

    Slashbot64

    Joined:
    Jun 15, 2020
    Posts:
    184
    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
     
  16. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,242
    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.
     
  17. Slashbot64

    Slashbot64

    Joined:
    Jun 15, 2020
    Posts:
    184
    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
     
  18. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,242
    Not available in the current version; maybe be added in the next update.
     
  19. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,751
    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
     
  20. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,751
    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
     
    Last edited: Oct 31, 2021
  21. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,242
    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.
    upload_2021-10-31_21-12-28.png

    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.
     
    jGate99 likes this.
  22. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,751
    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
     
  23. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,242
    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.
     
    jGate99 likes this.
  24. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,751
    Amazing :D
    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 :)
     
    Last edited: Nov 2, 2021
  25. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,242
    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)
     
    Slashbot64 likes this.
  26. Slashbot64

    Slashbot64

    Joined:
    Jun 15, 2020
    Posts:
    184
    Awesome will try it out thanks!
     
  27. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,751
    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?
     
  28. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,242
    ListView.ScrollRect:
    • change Movement Type to Elastic
    • enable Inertia
     
    jGate99 likes this.
  29. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,751
    Its already enable like that, but still scrolling doesnt show any elasticity
    upload_2021-11-8_21-10-29.png
     
  30. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,242
    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.
     
    jGate99 likes this.
  31. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,751
    please check this
    upload_2021-11-8_21-56-16.png

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

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,242
    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.
    upload_2021-11-8_20-3-37.png
     
    jGate99 likes this.
  33. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,751
    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
     
  34. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,242
    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.             }
     
    jGate99 likes this.
  35. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,751
    Thanks for fixing it on such short notice :)
     
  36. Slashbot64

    Slashbot64

    Joined:
    Jun 15, 2020
    Posts:
    184
    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?
     
  37. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,242
    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.
     
  38. Slashbot64

    Slashbot64

    Joined:
    Jun 15, 2020
    Posts:
    184
    "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.
     
  39. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,751
    Hi @ilih
    How should i check inside a ListViewcomponent setData that this is the last item?
     
  40. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,242
    Index == Owner.GetItemsCount() - 1;
     
    jGate99 likes this.
  41. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,751
    Hi @ilih

    Unity 2021.2.2f1 is showing these errors when compiling for Android

    upload_2021-11-15_20-32-12.png
     
  42. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,242
    Fixed in v1.15.2b14.
    Those errors were only in beta versions.
     
    jGate99 likes this.
  43. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,751
    Hi @ilih
    How do i get scroll position of ListView, so i can set it back in future?
     
  44. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,242
    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);
     
    jGate99 likes this.
  45. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,751
    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

    upload_2021-11-16_15-40-32.png
     
  46. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,242
    OK.
     
    jGate99 likes this.
  47. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,751
    Thanks and Really appreciate that
     
  48. mushroomrisotto

    mushroomrisotto

    Joined:
    Dec 9, 2013
    Posts:
    24
    Hi @ilih

    I have an issue with ListView(TreeViewCustom.cs) when MultipleSelect is enabled and selecting elements with Shift key:
    • First element is selected:
      1.JPG
    • Using Shift to select from index 0 to 2. All good:
      ShiftSelect.JPG
    • Continue selecting with Shift key, instead of having index 0 to 5 I get index 2 to 5 selected:
      ShiftSelect2.JPG
    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.
     
  49. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,242
    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.
     
  50. mushroomrisotto

    mushroomrisotto

    Joined:
    Dec 9, 2013
    Posts:
    24
    An option would be awesome, thank you!