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. MarcOrion

    MarcOrion

    Joined:
    Nov 27, 2014
    Posts:
    14
    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....
     
  2. jGate99

    jGate99

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

    ilih

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

    jGate99

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

    ilih

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

    jGate99

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


    upload_2022-9-9_4-40-46.png
     
  7. ilih

    ilih

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

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,796
    So listview variable height will auto detect it?
     
  9. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,278
    Yes if DefaultItem has Vertical Layout Group or EasyLayout component, you will need it in any case because of the multiline title and description.
     
    jGate99 likes this.
  10. cgrow67

    cgrow67

    Joined:
    May 31, 2016
    Posts:
    52
    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.
     
  11. ilih

    ilih

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

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,796
    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
    upload_2022-9-10_5-45-36.png

    Here is RawImage Control
    upload_2022-9-10_5-47-8.png


    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
     
  13. ilih

    ilih

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

    Attached Files:

    jGate99 likes this.
  14. jGate99

    jGate99

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

    ilih

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

    cgrow67

    Joined:
    May 31, 2016
    Posts:
    52
    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.

    upload_2022-9-22_14-56-39.png

    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.
     
    Last edited: Sep 23, 2022
  17. cgrow67

    cgrow67

    Joined:
    May 31, 2016
    Posts:
    52
    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 :(
     
  18. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,278
    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:
    upload_2022-9-23_0-37-53.png
    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.
     
    Last edited: Sep 22, 2022
  19. cgrow67

    cgrow67

    Joined:
    May 31, 2016
    Posts:
    52

    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.

    upload_2022-9-22_18-14-51.png


    upload_2022-9-22_18-15-21.png

    upload_2022-9-22_18-16-51.png
     
  20. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,278
    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?
     
  21. cgrow67

    cgrow67

    Joined:
    May 31, 2016
    Posts:
    52
    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.
     
    ilih likes this.
  22. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,278
    Are you using AspectRatioFitter for the icons?
    It does not work correctly with any LayoutGroup.
     
  23. cgrow67

    cgrow67

    Joined:
    May 31, 2016
    Posts:
    52
    Nope... although I did try it for a very brief period. ;)
     
  24. cgrow67

    cgrow67

    Joined:
    May 31, 2016
    Posts:
    52
    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
     
    ilih likes this.
  25. alex_1302

    alex_1302

    Joined:
    Aug 20, 2019
    Posts:
    48
    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
     
  26. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,278
    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. }
     
    alex_1302 likes this.
  27. alex_1302

    alex_1302

    Joined:
    Aug 20, 2019
    Posts:
    48
    Thanks ilih. That was a very fast reply. I'll give it a try. Thanks, and have a very nice day.:)
     
  28. alex_1302

    alex_1302

    Joined:
    Aug 20, 2019
    Posts:
    48
    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.
     
  29. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,278
    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)
      .
     
    alex_1302 likes this.
  30. alex_1302

    alex_1302

    Joined:
    Aug 20, 2019
    Posts:
    48
    @ilih . Thanks for your fast reply. Have a nice day. ;)
     
  31. jGate99

    jGate99

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

    ilih

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

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,796
    Thanks @ilih
    I actually didnt understand the old solution at that time, but ill try it wiith fresh mind and let you know
     
  34. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,796
    Hi @ilih
    How can i detect scrolling speed? there was something like velocity?
     
  35. ilih

    ilih

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

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,796
    Thank you v much
     
  37. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,796
  38. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,278
    jGate99 likes this.
  39. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,796
    You are amazing :D
     
  40. Slashbot64

    Slashbot64

    Joined:
    Jun 15, 2020
    Posts:
    208
    Is this easy to theme?
     
  41. ilih

    ilih

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

    Slashbot64

    Joined:
    Jun 15, 2020
    Posts:
    208
    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.
     
  43. Slashbot64

    Slashbot64

    Joined:
    Jun 15, 2020
    Posts:
    208
  44. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,278
    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.
    upload_2022-10-17_5-5-45.png
     
  45. Slashbot64

    Slashbot64

    Joined:
    Jun 15, 2020
    Posts:
    208
    ah cool..yeah that was the example I had seen
     
  46. RickSaada1

    RickSaada1

    Joined:
    Mar 9, 2015
    Posts:
    15
    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!
     
  47. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,278
    OK, I'll fix it in the next update.
    As a temporary fix, you can edit the following prefabs in the Prefabs folder.
     
  48. EmeralLotus

    EmeralLotus

    Joined:
    Aug 10, 2012
    Posts:
    1,434
  49. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,278
    1. Proxy is always at fixed distance from the cursor position
    You need to change
    DragInfoOffset
    to 0.
    upload_2022-10-19_21-25-24.png

    2. Probably incorrect RectTransform settings for the handle:
    Please try the following settings if you want to move the handle to the left side.
    upload_2022-10-19_21-27-11.png

    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);
     
    EmeralLotus likes this.
  50. EmeralLotus

    EmeralLotus

    Joined:
    Aug 10, 2012
    Posts:
    1,434
    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