Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

GUIForms Library

Discussion in 'Immediate Mode GUI (IMGUI)' started by marceloroca, Oct 14, 2009.

  1. marceloroca

    marceloroca

    Joined:
    Feb 24, 2009
    Posts:
    53
    Hi,

    In my learning of Unity and I have reached the moment I need to use the GUI, but unfortunately is a bit archaic to use, so I decided to write a library that allows me to use the Unity GUI of a simpler way, with a structure see in WinForms from the .Net Framework, has preliminary name of GUIForms, is developed in C # because that is what I know.

    I have decided to release it to the community with a open source MIT license , so they can use for any project. What I am asking you is to place a reference of the author (me).

    This library is incomplete and there are many things to develop, so if there are interested can tell me or just send me by this forum the bugs and improvements and additions have been implemented.

    That is developed:
    - Modal and Modeless Forms
    - Form window and without window
    - Events (mouse over, mouse out, click, change value)
    - Basic controls (missing a couple of controls to be implemented soon)
    - Works with GUISkins, but is supposed to work with GUIStyles but I have not tried

    What I see is pending is:
    - Complete the messagebox form
    - Clean the code
    - Implement som alignment (top, middle, bottom, right, left, center, etc.), fonts
    - Find and eliminate bugs
    - Implement more complex controls: ListBox, DropDownBox, ImageList, MenuBar, and so on.
    - Document and make some tutorials
    - In the latter case if necessary to improve the architecture

    I leave the entire project to test and revise it a bit, contains a test scene and all the source code

    Cheers!
    Marcelo Roca


    ----

    Hola a todos,

    En mi aprendizaje de Unity he llegado al momento que necesito utilizar el GUI, pero lamentablemente es un poco arcaico de utilizar, por lo que decidí escribir una librería que me permita utilizar el GUI de Unity de una manera más sencilla, tratándola de estructurar de una manera perecida a lo que es WinForms de Net Framework, como nombre preliminar tiene GUIForms, está desarrollado en C# ya que es lo que conozco.

    Debido a que me parece que es algo que se necesita bastante he decidido liberarla con código abierto para la comunidad, por lo que pueden utilizar para cualquier tipo de proyecto. Lo que les pido que es que coloquen una referencia a la librería y el autor.

    Esta librería está bastante incompleta y hay muchas cosas que hay que desarrollar, para lo cual si hay interesados me pueden avisar o simplemente mandarme por este foro los bugs o mejoras y adiciones que hayan implementado.

    Que está desarrollado:

    - Formularios Modal y Modeless
    - Formulario en ventana y sin ventana
    - Eventos (mouse over, mouse out, click, change value)
    - Controles básicos del GUI (faltan un par de controles que los implementare pronto)
    - Funciona basado en GUISkins, se supone que funciona con GUIStyles pero no lo he probado

    Lo que veo que está pendiente es:
    - Completar el formulario de messagebox
    - Limpiar el código
    - Implementar dentro de los controles
    - alineamiento(top, middle, bottom, right, left, center, etc.)
    - uso de fonts
    - Buscar y eliminar bugs
    - Implementar controles más complejos: ListBox, DropDownBox, ImageList, MenuBar, etc.
    - Documentar y hacer algunos tutoriales
    - En último caso si es necesario mejorar la arquitectura

    Les dejo el proyecto completo para que lo prueben y revisen un poco, contiene una escena de prueba y todo el código fuente

    Saludos

    Marcelo Roca
     

    Attached Files:

  2. marceloroca

    marceloroca

    Joined:
    Feb 24, 2009
    Posts:
    53
    For use the library you need:

    1.- copy the folder GUIForms to your project.
    2.- Create a script with the definition of the form

    example:

    TestControlsForm.cs
    Code (csharp):
    1.  
    2. using System;
    3. using UnityEngine;
    4. using GUIForms;
    5.  
    6. public partial class TestControlsForm : Form
    7. {
    8.     // define the controls of the form
    9.     private Button ButtonClose;
    10.     private Button ButtonShowMessage;
    11.     private Label LabelTooltip;
    12.  
    13.     private Box Box1;
    14.     private Button Button1;
    15.     private Label Label1;
    16.     private TextArea TextArea1;
    17.     private TextField TextField1;
    18.     private PasswordField PasswordField1;
    19.     private Toggle Toggle1;
    20.     private VerticalSlider VerticalSlider1;
    21.     private HorizontalSlider HorizontalSlider1;
    22.    
    23.     // initialize the form
    24.     public override void Initialize()
    25.     {
    26.         // set form variables
    27.         // the title
    28.         Text = "Test Controls";
    29.         // if is or not draggable
    30.         Draggable = true;
    31.         // if use window or not
    32.         WindowMode = WindowModes.Window;
    33.         // the size
    34.         Size = new Size(500, 400);
    35.         // location of the form
    36.         Location = FormsUtility.CenterScreen(this);
    37.  
    38.         // create the first control a label to show tooltips and messages
    39.         LabelTooltip = (Label)AddControl(new Label());
    40.         // the size
    41.         LabelTooltip.Size = new Size(400, 20);
    42.         // the location
    43.         LabelTooltip.Location = new Point(5, 5);
    44.  
    45.         // create an button control
    46.         ButtonClose = (Button)AddControl(new Button());
    47.         // the caption
    48.         ButtonClose.Text = "Close";
    49.         // the tooltip message
    50.         ButtonClose.ToolTip = "Press here to close this window";
    51.         ButtonClose.Size = new Size(100, 20);
    52.         ButtonClose.Location =
    53.             FormsUtility.AlignControl
    54.             (
    55.             Point.Empty, ButtonClose.Size, ViewSize,
    56.             HorizontalAlignment.Left, VerticalAlignment.Botton,
    57.             5, 5, 5, 5
    58.             );
    59.         // assign event handlers
    60.         ButtonClose.ButtonClick += ButtonClose_OnClick;
    61.         ButtonClose.MouseOver += Control_MouseOver;
    62.         ButtonClose.MouseOut += Control_MouseOut;
    63.  
    64.         // the others controls are in the same maner
    65.  
    66.         ButtonShowMessage = (Button)AddControl(new Button());
    67.         ButtonShowMessage.Text = "Show Message";
    68.         ButtonShowMessage.ToolTip = "Press here to test MessageBox";
    69.         ButtonShowMessage.Size = new Size(100, 20);
    70.         ButtonShowMessage.Location =
    71.             FormsUtility.AlignControl
    72.             (
    73.             Point.Empty, ButtonClose.Size, ViewSize,
    74.             HorizontalAlignment.Left, VerticalAlignment.Botton,
    75.             5, 5, 5, 40
    76.             );
    77.         ButtonShowMessage.ButtonClick += ButtonShowMessage_OnClick;
    78.         ButtonShowMessage.MouseOver += Control_MouseOver;
    79.         ButtonShowMessage.MouseOut += Control_MouseOut;
    80.  
    81.         Box1 = (Box)AddControl(new Box());
    82.         Box1.Text = "Box";
    83.         Box1.ToolTip = "Box";
    84.         Box1.Size = new Size(70, 50);
    85.         Box1.Location = new Point(5, 30);
    86.         Box1.MouseOver += Control_MouseOver;
    87.         Box1.MouseOut += Control_MouseOut;
    88.  
    89.         Button1 = (Button)AddControl(new Button());
    90.         Button1.Text = "Button";
    91.         Button1.ToolTip = "Button";
    92.         Button1.Size = new Size(70, 20);
    93.         Button1.Location = new Point(80, 30);
    94.         Button1.MouseOver += Control_MouseOver;
    95.         Button1.MouseOut += Control_MouseOut;
    96.  
    97.         Label1 = (Label)AddControl(new Label());
    98.         Label1.Text = "Label";
    99.         Label1.ToolTip = "Label";
    100.         Label1.Size = new Size(70, 20);
    101.         Label1.Location = new Point(80, 60);
    102.         Label1.MouseOver += Control_MouseOver;
    103.         Label1.MouseOut += Control_MouseOut;
    104.  
    105.         TextArea1 = (TextArea)AddControl(new TextArea());
    106.         TextArea1.Text = "TextArea";
    107.         TextArea1.ToolTip = "TextArea";
    108.         TextArea1.Size = new Size(100, 50);
    109.         TextArea1.Location = new Point(150, 30);
    110.         TextArea1.MouseOver += Control_MouseOver;
    111.         TextArea1.MouseOut += Control_MouseOut;
    112.  
    113.         TextField1 = (TextField)AddControl(new TextField());
    114.         TextField1.Text = "TextField";
    115.         TextField1.ToolTip = "TextField";
    116.         TextField1.Size = new Size(100, 20);
    117.         TextField1.Location = new Point(255, 30);
    118.         TextField1.MouseOver += Control_MouseOver;
    119.         TextField1.MouseOut += Control_MouseOut;
    120.  
    121.         PasswordField1 = (PasswordField) AddControl(new PasswordField());
    122.         PasswordField1.ToolTip = "PasswordField";
    123.         PasswordField1.Size = new Size(100, 20);
    124.         PasswordField1.Location = new Point(255, 60);
    125.         PasswordField1.MouseOver += Control_MouseOver;
    126.         PasswordField1.MouseOut += Control_MouseOut;
    127.  
    128.         Toggle1 = (Toggle) AddControl (new Toggle());
    129.         Toggle1.Text = "Toggle";
    130.         Toggle1.ToolTip = "Toggle";
    131.         Toggle1.Size = new Size(100, 20);
    132.         Toggle1.Location = new Point(360, 30);
    133.         Toggle1.MouseOver += Control_MouseOver;
    134.         Toggle1.MouseOut += Control_MouseOut;
    135.  
    136.         VerticalSlider1 = (VerticalSlider)AddControl(new VerticalSlider());
    137.         VerticalSlider1.Max = 20;
    138.         VerticalSlider1.Max = 50;
    139.         VerticalSlider1.ValueType = GUIForms.ValueType.Float;
    140.         VerticalSlider1.Size = new Size(20, 100);
    141.         VerticalSlider1.Location = new Point(5, 120);
    142.         VerticalSlider1.MouseOver += Control_MouseOver;
    143.         VerticalSlider1.MouseOut += Control_MouseOut;
    144.         VerticalSlider1.ValueChanged += new ValueChangedEventHandler(VerticalSlider1_ValueChanged);
    145.  
    146.         HorizontalSlider1 = (HorizontalSlider)AddControl(new HorizontalSlider());
    147.         HorizontalSlider1.Min = 0;
    148.         HorizontalSlider1.Max = 10;
    149.         HorizontalSlider1.ValueType = GUIForms.ValueType.Integer;
    150.         HorizontalSlider1.Size = new Size(100, 20);
    151.         HorizontalSlider1.Location = new Point(5, 100);
    152.         HorizontalSlider1.MouseOver += Control_MouseOver;
    153.         HorizontalSlider1.MouseOut += Control_MouseOut;
    154.         HorizontalSlider1.ValueChanged += new ValueChangedEventHandler(HorizontalSlider1_ValueChanged);
    155.     }
    156.  
    157.  
    158.     // event handler for the slider, if wee change the value, this event is hired
    159.     void VerticalSlider1_ValueChanged(object sender, ValueChangedEventArgs e)
    160.     {
    161.         LabelTooltip.Text = string.Format("VerticalSlider1={0}", e.Value);
    162.     }
    163.  
    164.     private void HorizontalSlider1_ValueChanged(object sender, ValueChangedEventArgs e)
    165.     {
    166.         LabelTooltip.Text = string.Format("HorizontalSlider1={0}", e.Value);
    167.     }
    168.  
    169.  
    170.     // the event for the button, when the user click the button this event is hired
    171.     private void ButtonClose_OnClick(object source, MouseClickEventArgs e)
    172.     {
    173.         if (e.MouseButton == MouseButtons.Left)
    174.         {
    175.             Close();
    176.         }
    177.     }
    178.  
    179.     private void ButtonShowMessage_OnClick(object source, MouseClickEventArgs e)
    180.     {
    181.  
    182.         // show a messagebox (popup modal form)
    183.         MessageBox.Show(gameObject, "Title Message", "this is a test this is a test this is a test", DefaultSkin);
    184.     }
    185.  
    186.     // the mouseover and mouseout events shows the tooltip on the labeltooltip
    187.     private void Control_MouseOver(object source, EventArgs e)
    188.     {
    189.         LabelTooltip.Text = ((Control)source).ToolTip;
    190.     }
    191.  
    192.     private void Control_MouseOut(object source, EventArgs e)
    193.     {
    194.         LabelTooltip.Text = "";
    195.     }
    196.  
    197. }
    198.  
    3.- Call your form

    example:

    TestControls.cs
    Code (csharp):
    1.  
    2.  
    3. using System;
    4. using UnityEngine;
    5. using GUIForms;
    6.  
    7. // put this script on a component of your scene
    8.  
    9. public class TestControls : MonoBehaviour
    10. {
    11.     public GUISkin Skin;
    12.  
    13.     private TestControlsForm Form;
    14.  
    15.     public void Awake()
    16.     {
    17.         // instantiate the form
    18.         Form = (TestControlsForm)FormsManager.LoadForm(gameObject, typeof(TestControlsForm), Skin);
    19.         // set the title
    20.         Form.Text = "Test Controls";
    21.         // and display it
    22.         Form.Show(); // this is if you want a modeless form
    23.         //Form.ShowModal(); // this is if you want a modal form
    24.     }
    25. }
    26.  
    27.  
     
  3. marceloroca

    marceloroca

    Joined:
    Feb 24, 2009
    Posts:
    53
  4. JanHelleman

    JanHelleman

    Joined:
    Oct 11, 2009
    Posts:
    116
    Where can i find the download for this project??
     
  5. marceloroca

    marceloroca

    Joined:
    Feb 24, 2009
    Posts:
    53
  6. JanHelleman

    JanHelleman

    Joined:
    Oct 11, 2009
    Posts:
    116
    Is there any possibility that you will develop any measurement tools for font sizes? The one thing i am currently having is that when I use a label I need to set the correct size of the height, in order to make it wrap and visible. I would like to:

    OR measure my strings so that i can set the height according to calculations

    OR that the gui does that itself :p

    Btw, some comments:
    VerticalScrollbar is right now spelled wrong, you have:
    VerticalScroolbar

    ContainerControl is spelled wrong, you have:
    ContainerControll

    just some small things heh

    Jan
     
  7. KEMBL

    KEMBL

    Joined:
    Apr 16, 2009
    Posts:
    181
  8. marceloroca

    marceloroca

    Joined:
    Feb 24, 2009
    Posts:
    53
    Jan:

    Thanks i will correct the spelling error for the next version, and work on the autosizable controls.

    KEMBL

    Some Unirty GUI controles support tooltip and are already implemented in the framework, if you put the mouse cursor over a button hires and event mouseover. For more graphics effec is posible to show an label over the control with the tooltip text like are in winforms.

    I'm developing some controls for the next week:

    toolbar, matrixbuttons, listbox, droopdownlist, dropdownbox, autisize for some controls, and if is possible the tooltip message




    marce
     
  9. KEMBL

    KEMBL

    Joined:
    Apr 16, 2009
    Posts:
    181
    wow! Thx! Great news, will try to use your soft!
     
  10. liverolA

    liverolA

    Joined:
    Feb 10, 2009
    Posts:
    347
    nice work,keep up!!
     
  11. liverolA

    liverolA

    Joined:
    Feb 10, 2009
    Posts:
    347
    nice work,keep up!!
     
  12. marceloroca

    marceloroca

    Joined:
    Feb 24, 2009
    Posts:
    53
    Included new controls in the GUIForms library:

    - Toolbar
    - Selectiongrid
    - ListBox (select one, multiselect)
    - DropDownList (select one, multiselect)

    I'm working in others controls:

    - Tabcontrol / tabpanel
    - DropDownBox
    - Tooltip
    - AutoSize

    You can view the new demo here:

    http://files.marceware.com/guiforms/guiForms_test3.html

    Marce
     
  13. duke

    duke

    Joined:
    Jan 10, 2007
    Posts:
    763
    This is really fantastic. I much prefer coding this way for UI elements than:

    MakeBox(a tonne of parameters that make the code pretty damn confusing to read)

    The only thing i'd change is to call it UnityForms :)
     
  14. marceloroca

    marceloroca

    Joined:
    Feb 24, 2009
    Posts:
    53
    Yes, this is the reason to write the library, and because in the future is very simple to build a GUI designer over this framework.

    In this moment I'm evaluating how to develop the designer tool, I think is more simple to create an external winform application, something like FarPy a GUI editor for Phyton (open source) http://farpy.holev.com/

    I like the name UnityForms, I think I can change to these name for the next version.

    Marce
     
  15. marceloroca

    marceloroca

    Joined:
    Feb 24, 2009
    Posts:
    53
    Demo: http://files.marceware.com/guiforms/guiForms_test4.html

    History:

    25/10/2009
    - Add tooltips to Toolbar and DropDownList
    - Add custom control: TabControl, TabPanel (preliminar)

    24/10/2009

    - Add formpanel and implementation SingleFormPanel
    - Delete Window control (not necesary)
    - Add GUI missing controls: Toolbar, SelectionGrid
    - Add custom controls: ListBox, DropDownList
    - Add autosize for Label control
    - Rewrite the Form code
    - Resolve some problems with Style and Skin

    13/10/2009

    - Modal and Modeless Forms
    - Form window and without window
    - Events (mouse over, mouse out, click, change value)
    - Basic controls the GUI (missing a couple of controls as soon implementare)
    - Operates based GUISkins, is supposed to work with GUIStyles but I have not tried
     

    Attached Files:

  16. KEMBL

    KEMBL

    Joined:
    Apr 16, 2009
    Posts:
    181
    small problems

    1) in Test Controls, labels very close to border. Needs to be as in textarea.

    2) In listbox, when I try to check main check box, none of daughter check boxes was selected. When I check out main check box, all checks on daughter success cleared.

    and big hopes )

    3) Still no realisation of tooltips :(

    4) How about OOP interface for colour scheme changing or Font properties changing?

    All other looks good and solid.
     
  17. marceloroca

    marceloroca

    Joined:
    Feb 24, 2009
    Posts:
    53
    Thanks KEMBL,

    Yes is in my ToDo list, I need to write some code to calculate the inner size of container controls.

    The main check box if for test the single and multi select behaviour, not for select all/unselect all. But the library has these methods to select: select all, clear selection, invert selection

    Is working now, you can see in the new demo a preliminar work of this.

    Yes is how this must work, you can change the color and other properties in the Style of control (GUIStyle), but I have some problems and I need to rewrite all the Style and Skin stuff.

    Please see the new demo and download the source code.

    Thanks

    Marce

    Demo: http://files.marceware.com/guiforms/guiForms_test5.html

    ////////////

    To do:

    - Custom controls: MenuBar, ComboBox
    - Add Clip with correct size (using style) to container controls (tabs, forms, etc.)
    - Revise all GUISkin and GUIStyle stuff (is not working Ok)
    - Control autosize (like Label control)
    - Control alignment
    - Form alignment
    - MultiPanel FormPanel
    - Working MessageBox like on WinForms

    History:

    26/10/2009
    - Solved overlaying controls, now I can write now the MenuBar control
    - Add tooltip (preliminar)

    25/10/2009
    - Add tooltips to Toolbar and DropDownList
    - Add custom control: TabControl, TabPanel (preliminar)

    24/10/2009

    - Add formpanel and implementation SingleFormPanel
    - Delete Window control (not necesary)
    - Add GUI missing controls: Toolbar, SelectionGrid
    - Add custom controls: ListBox, DropDownList
    - Add autosize for Label control
    - Rewrite the Form code
    - Resolve some problems with Style and Skin

    13/10/2009

    - Modal and Modeless Forms
    - Form window and without window
    - Events (mouse over, mouse out, click, change value)
    - Basic controls the GUI (missing a couple of controls as soon implementare)
    - Operates based GUISkins, is supposed to work with GUIStyles but I have not tried
     

    Attached Files:

  18. KEMBL

    KEMBL

    Joined:
    Apr 16, 2009
    Posts:
    181
    >The main check box if for test the single and multi select behaviour, not for select all/unselect all.

    Thanks for clear explanation! It is some kind of radio-button realisation, that I was misunderstood.

    Very nice tooltips!
    What if object in object in object and all have got they own tooltip, аs in listbox, which will be shown when mouse over last of it?
     
  19. marceloroca

    marceloroca

    Joined:
    Feb 24, 2009
    Posts:
    53
    Yes this is how is work for almost all controls, but not for ListBox and ComboListBox controls.

    I think I can change for the next version, and the tooltips be working with listbox and combo box.

    Marce
     
  20. JanHelleman

    JanHelleman

    Joined:
    Oct 11, 2009
    Posts:
    116
    am i required to make a form with content or can you also randomly place a label somewhere on the screen?
     
  21. marceloroca

    marceloroca

    Joined:
    Feb 24, 2009
    Posts:
    53
    Yes, you need to create a form, but the form can be not a window and be borderless. You only need to change this property on the form:

    Code (csharp):
    1. // windowless without border or background
    2. WindowMode = FormBorderStyle.None;
    3.  
    4. // window with border and background
    5. WindowMode = FormBorderStyle.Window;
    6.  
    see this test:
    http://files.marceware.com/guiforms/guiForms_test6.html

    The property doesn't works in the upload code, but will work in the next version
     
  22. JanHelleman

    JanHelleman

    Joined:
    Oct 11, 2009
    Posts:
    116
    Right now i have the following script:

    Code (csharp):
    1.  
    2. using UnityEngine;
    3. using System.Collections;
    4. using System.Collections.Generic;
    5.  
    6. public class Console : MonoBehaviour
    7. {
    8.       /* Example level loader */
    9.    public bool menu = false;
    10.    public int consoleHeight = (Screen.height / 2);
    11.    public int consoleInputBoxHeight = 25;
    12.  
    13.    public int  scrollWidth =20;
    14.  
    15.    public int consoleMarge = 2;
    16.  
    17.    // text field
    18.    public string textField = "";
    19.  
    20.    // needs to be global? or a function to "add" stuff
    21.    public string consoleText = "";
    22.  
    23.    public int verticalScrollValue;
    24.  
    25.    public Vector2 scrollViewVector = Vector2.zero;
    26.    
    27.    private Queue history = new Queue();
    28.    
    29.    public int maxStack = 80;
    30.    
    31.    private  float vec;
    32.      
    33.    void OnGUI ()
    34.    {
    35.       if(menu == true)
    36.       {    
    37.          // Make a background box
    38.          GUI.Box (new Rect (0,0,Screen.width, consoleHeight), "Console");
    39.    
    40.          //    if the previous heightVector is the same as the amount of the scrollbar, make sure it "moves"  along with the new text
    41.          if(vec - ((consoleHeight - (consoleMarge * 3)  - 20    ) - consoleInputBoxHeight) == scrollViewVector.y)
    42.          {
    43.             //calculate the new vec to make sure nothing "new"  is added that is missed
    44.             calcVec();
    45.              
    46.             // change the scrollbar vector to the new text. the scrollViewVector is the size of the vec minus the height of the scrollView          
    47.             scrollViewVector.y = vec - ((consoleHeight - (consoleMarge * 3)  - 20    ) - consoleInputBoxHeight);
    48.          }
    49.  
    50.          // heh double, to make sure it is done xD
    51.          calcVec();
    52.                
    53.          // Begin the ScrollView
    54.          scrollViewVector = GUI.BeginScrollView (new Rect(consoleMarge,consoleMarge + 20,Screen.width - consoleMarge * 3, (consoleHeight - (consoleMarge * 3)  - 20    ) - consoleInputBoxHeight), scrollViewVector, new Rect(consoleMarge,consoleMarge + 20,Screen.width - (consoleMarge * 3) - scrollWidth, vec), false, true);
    55.          
    56.          // Put something inside the ScrollView
    57.          GUI.TextArea (new Rect(consoleMarge,consoleMarge + 20,Screen.width - (consoleMarge * 3) - scrollWidth, vec), consoleText);
    58.  
    59.          // End the ScrollView
    60.          GUI.EndScrollView();
    61.                  
    62.          // the inputfield          
    63.          textField = GUI.TextField (new Rect(consoleMarge, (consoleHeight - consoleInputBoxHeight - consoleMarge), Screen.width - consoleMarge * 2, consoleInputBoxHeight), textField);
    64.       }
    65.    }
    66.    
    67.    private void calcVec()
    68.    {
    69.       System.Collections.IEnumerator myEnumerator = history.GetEnumerator();
    70.        
    71.       consoleText = "";
    72.       bool first = true;
    73.              
    74.       // loop the history queue and build up the consoleText
    75.       while ( myEnumerator.MoveNext() )
    76.       {
    77.          // the first one needs no enter at first
    78.          if(first)
    79.          {
    80.             first = false;
    81.             consoleText = " >>\t"+myEnumerator.Current;
    82.          }
    83.          else
    84.          {
    85.             consoleText = consoleText + "\n >>\t" + myEnumerator.Current  ;
    86.          }
    87.       }
    88.        
    89.       // calculate the height of the TextArea for the scrollbar
    90.       vec = GUI.skin.GetStyle("TextArea").CalcHeight(new GUIContent(consoleText), Screen.width - (consoleMarge * 3) - scrollWidth);
    91.    
    92.       // if the calculated vector is smaller then the height of the scrollView, use that height instead to make sure no conflicts occur
    93.       if(vec < (float)((consoleHeight - (consoleMarge * 3)  - 20    ) - consoleInputBoxHeight))
    94.       {
    95.          vec = (float)((consoleHeight - (consoleMarge * 3)  - 20    ) - consoleInputBoxHeight);
    96.       }
    97.    }
    98.  
    99.    void AddStringToConsole(string str)
    100.    {
    101.       if(str != "")
    102.       {
    103.          history.Enqueue(str);
    104.        
    105.          // if the history count is larger then the stack, dequeue one
    106.          if(history.Count > maxStack)
    107.             history.Dequeue();
    108.       }
    109.    }
    110.  
    111.    void Update()
    112.    {
    113.       if(Input.GetKeyDown(KeyCode.BackQuote))
    114.       {
    115.          if(menu == true)
    116.          {
    117.             menu = false;
    118.          }
    119.          else
    120.          {
    121.             menu =true;
    122.          }
    123.       }
    124.        
    125.       if(menu)
    126.       {
    127.          if(Input.GetKeyDown(KeyCode.Return))
    128.          {
    129.             AddStringToConsole(textField);
    130.             textField = "";
    131.          }
    132.       }
    133.    }
    134. }
    135.  
    In my understanding your source doesn't prvovide the needs that i have to more automatically resize the ScrollView based on it's content, right?
     
  23. lazalong

    lazalong

    Joined:
    Oct 13, 2009
    Posts:
    139
    Nice.

    Will you add transparency (in %)?
    And a "viewport form"? (not sure how to call it where you put for example a minimap or an avatar image or even an animated mesh)
     
  24. marceloroca

    marceloroca

    Joined:
    Feb 24, 2009
    Posts:
    53
    JanHelleman

    Is not impelemented for now, but is very simple to implement. The advantage to use an OOP library to create the GUI is the reusability, write the code one time and reuse a lot of times. I'm impeleting a customcontrol with the same behaviour of your console, to show how simple is write a custom control (ex. implement chat control, console control, etc.).

    lazalong
    You can change the transparency in the Skin property (GUISkin), and for a specific control with Style property (GUIStyle). But I thinking in add a global transparency to the form if is not too slow (added to my to-do list).

    For future versions I will writing a tutorial or help on how to write a CustomControl

    -----------
    mru[/b]
     
  25. JanHelleman

    JanHelleman

    Joined:
    Oct 11, 2009
    Posts:
    116
    Ah, i just meant the fact that the viewrect it's scroll region doesn't need to be told how big it is, i'd love to see the scrollview calculate it's own inner region based on the content of it...

    do you get what i mean? The label has an autosize function now, but i would need that for for example a text area as well... based on the viewRect it's width..

    but please, show me as soon as possible
     
  26. duke

    duke

    Joined:
    Jan 10, 2007
    Posts:
    763
    FYI, i've continued working on the source of this over the past week, and may have something to show for it in another weeks time :) It's mainly been cleanup and workflow stuff, so that it can be neatly packaged in a .dll, with only the things relevant to Unity users as scripts (like the forms themselves, and which ones to draw and when).
     
  27. marceloroca

    marceloroca

    Joined:
    Feb 24, 2009
    Posts:
    53
    This is the last version, I'm rewrite all, you can use like a DLL or add the code of unityforms project.

    And you can use the UnityFormsDesigner to design the form with the VIsual Studio Forms Designer (a little complex but works OK)
     

    Attached Files:

  28. duke

    duke

    Joined:
    Jan 10, 2007
    Posts:
    763
    Great! Thanks for posting :)
     
  29. dkozar

    dkozar

    Joined:
    Nov 30, 2009
    Posts:
    1,410
    Marcelo,

    Since you are really making an effort here, I'd like to recomend a few design patterns to make your framework work better:

    1) Composite pattern - the most important design pattern for GUIs. It allows adding/removing children to/from containers and treating them as one object. For instance, when a container is moved, it has to call 'move' on each child, then each child moves it's children and so on. Yes, that's right: 'GUI.BeginGroup' isn't a solution for this problem, however it is usefull when we need clipping done.

    Basically, you should treat controls and containers differently, because native Unity controls should extend Control, and containers should do layout etc:

    Code (csharp):
    1.  
    2. public class Container : Control {
    3.     public List<Control> Children {
    4.  
    5.     }
    6. }
    7.  
    It also allows traversing the tree (of controls) in 2 directions:

    1) Top-down (from 'root' to 'leaves', useful for setting properties, moving, layouting):

    Code (csharp):
    1. public void Update(){
    2.     base.Update(); // me first
    3.     Children.ForEach(delegate (Control c){ // then children
    4.         c.Update();
    5.     })
    6. }
    2) Bottom-up (from 'leaves' to 'root', useful for measuring):

    Code (csharp):
    1. public void Update(){
    2.     Children.ForEach(delegate (Control c){ // children first
    3.         c.Update();
    4.     })
    5.     base.Update(); // then me
    6. }
    2) Decorator pattern - You can wrap your controls in a Decorator, this way you avoid class expansion. You can for instance add a window behaviour to a container (dinamically), and it becomes draggable.

    3) You should examine some existing (open source) frameworks like Java Swing or Flex. Examine the component lifecycle (I've seen you have some invalidation methods, but...)

    Cheers! :)

    ps Tell me what do you think about my gui framework.
     
  30. duke

    duke

    Joined:
    Jan 10, 2007
    Posts:
    763
    I just finished the UnityGUI to mesh procedural system thingymajiggy, which i'll start to cleanup tomorrow night and plug into this as an option.
     
  31. duke

    duke

    Joined:
    Jan 10, 2007
    Posts:
    763
    Wow that's gorgeous! Standard UnityGUI or did you do some things to it behind the scenes?
     
  32. Marv

    Marv

    Joined:
    May 26, 2009
    Posts:
    85
    That's really amazing 8)

    Looking forward to see what you're going to do with it.
     
  33. marceloroca

    marceloroca

    Joined:
    Feb 24, 2009
    Posts:
    53
    dkozar,

    1.- Composite pattern

    The controlcontainer is a control and are implemented like you say.

    I change the Containers behaviours and now you can move a control/containtercontrol to another containercontrol in the same form or to another form. All container controls now works the same manner (listbox, dropdownlist, selectiongrid, toolbar).

    2.- Decorator pattern

    I really like this, I will work to implement something of this

    3.- Before create this library I'm search some libraries, but they are too complex to my knowledge, and I need something simple to be implemented faster. But, yes it is important to solve some problems, and read and learn for others libraries can help.

    For the moment I'm working to add the EditorGUI (to use this library in editor mode) and learn how to use the decorator pattern.

    I realy like your gui work, I will try to implement something like that.

    I'm uploading the project to google code, if any wants to help with the architecture, code or anything you are welcome (or with the english).

    http://code.google.com/p/unityforms/

    Thanks :D
     
  34. sperry

    sperry

    Joined:
    Apr 24, 2009
    Posts:
    13
    Marcelo,

    I changed your code a little, added a few editors and ended up with a visual editor inside the Unity editor.

    In the Scene tab, components can be moved, resized and duplicated.
    There are guidelines for alignment, snap to grid.
    The component properties can be edited with the inspector.
    The resulting window is showed in the Game tab.

    Kleber, a fellow programmer, made a toolbar to add new components with a button click.
    Rafael Cobra helped with some components.

    It is also possible to animate components using the animation tool. Our GUI designer guy loved it.

    I think this is not what you have bem pursuing, but every component was changed to be a MonoBehavior attached to a game object.

    The idea is to use mainly the unity editor to generate a prefab for every window in the interface.

    How this cope with your current development?


    Regards,

    Daniel Sperry
     

    Attached Files:

  35. marceloroca

    marceloroca

    Joined:
    Feb 24, 2009
    Posts:
    53
    I believe It's not a little change :eek:, but if it works then I think I need to rethink all :(. But this is good, because is more simple to have an internal editor.

    I like what you say, of the animation tool, I don't use, but I think is only possible if the control is a component.

    If you can, please send me the code or post here, my email is marcelo.roca.urioste@gmail.com, and tell me if you agree to share your code with the community.

    Thanks 8)
     
  36. duke

    duke

    Joined:
    Jan 10, 2007
    Posts:
    763
    ...and don't forget QT!
     
  37. duke

    duke

    Joined:
    Jan 10, 2007
    Posts:
    763
    I have to say I prefer it being decoupled from Unity so everything isn't a MonoBehaviour or Prefab. The idea of having a Unity editor is great though!

    I'm working on a VisualBrowser EditorWindow at the moment that requires a filter and object script (that implement an interface) which shows a vertical list of those objects-as-buttons. So a GUI filter would show available GUI controls (via attributes probably so it doesn't just show everything that exists in your project).

    The general concept you have there for the editor is good:
    -A control browser
    -Form heirarchy
    -Property editor

    ..and then there's everybodies dream of an integrated script editor, so you could have your form script side-by-side with your control script (event logic, etc.).

    Also, you could use:
    [ExecuteInEditMode] Attribute to render GUI components in the editor, although I haven't tested it myself.

    http://unity3d.com/support/documentation/ScriptReference/ExecuteInEditMode.html
     
  38. duke

    duke

    Joined:
    Jan 10, 2007
    Posts:
    763
    nevermind!
     
  39. sperry

    sperry

    Joined:
    Apr 24, 2009
    Posts:
    13
    I am getting my boss approval to post the code (some of the code was done during work hours). It seens ok by him, but I must wait for a written response.

    Anyway the main change was to let Control to extend MonoBehaviour, and creating the editors.

    Instead of calling the OnGUI from Control the OnGUI from Form calls the Draw method of its child controls and so on.

    We still have not ported the FormsManager.
    We have already implemented anchoring.
    Docking will be necessary.

    For us the main advantage is that we can let our GUI Design Team work directly with the unity editor.
    No more layout change requests for us!

    And the windows can be treated as one more resource (prefab) in our asset pipeline.

    The programmer just instantiates the prefab and finds the components he wants to deal. All other positioning and layouting concerns are handled by the designers.

    They can edit the layout and the skin at the same time.

    Position and size animation work just fine.
    We added a color property that can be animated as well (parent color blends with child color).
    We intend to handle boolean properties with animation "messages".
    But animation is likely more a prototyping tool than something that we realy intend to use on the runtime (mainly due to positioning concerns).

    Our code is based on the old GUIForms_20091013_01.
    We look forward to update it to a newer version.


     
  40. marceloroca

    marceloroca

    Joined:
    Feb 24, 2009
    Posts:
    53
    Hi,

    I'm playing with the UnityEditor.EditorWindow for the creation of the designer, and I'm thinking that is not too complex to create a complete WYSIWYG form designer with no changes of the architecture of my library,

    I'm only have one problem and this is the generation and parsing of the c# file containing the controls. Is simple to create a XML representing the form, but I don't like that solution, I prefer the current solution representing the controls in code.

    For that I'm need parse the c# and generate a tree of controls to show in the designer, and if have changes in the designer, actualize the c# source code. I'm need to search some libraries for parsing c# files.

    I'm attached a project with some test editing controls, you can select, move and resize controls, change the skin all in WYSIWYG editor.

    Tell me what do you think
     

    Attached Files:

  41. sperry

    sperry

    Joined:
    Apr 24, 2009
    Posts:
    13
    Hi again Marcelo.

    I got my company permission to publish our approach to the editor.

    As I mentioned it started as a port of guiforms to use the editor.

    Attached is the unitypackage with the initial version.

    To use this visual editor you must use the Scene view with a Bottom perspective and select any gui component in the hierarchy window.

    We are stabilizing a more recent version with a better editor and layouting (anchor and dock).

    We also started a google code project for the source: http://code.google.com/p/bitverse-unity-gui/
     

    Attached Files:

  42. jdyeager

    jdyeager

    Joined:
    Aug 18, 2008
    Posts:
    29
    Wow, this seems very cool. I played with the demo and it was very easy to build (and animate) a gui.

    I'm not quite following how to set up a listener for button click events though... When I look at the BitButton source, it doesn't seem like an event will be fired when the button is pressed. Any chance of seeing an example of how that works?

    Thanks for any help. And good work :)
     
  43. sperry

    sperry

    Joined:
    Apr 24, 2009
    Posts:
    13
    Hi jdyeager!

    Thanks! The first version is just a demo for the editor, the packaged source is based on a code from december 2008. The event system was overlooked.

    We are on active development, but we use mainly our company svn.

    This weekend, we intent to commit a new public release and deploy a new package. This time with a better event system and some samples.


     
  44. jdyeager

    jdyeager

    Joined:
    Aug 18, 2008
    Posts:
    29
    Aha, so I wasn't just crazy...

    Glad to hear there is another release coming soon though, that's awesome. I'm sure that's what I'll be playing with next week :)

    Thanks again!
     
  45. lazalong

    lazalong

    Joined:
    Oct 13, 2009
    Posts:
    139
    If I understood correctly your editor is based on unityforms.

    Do you intent to make bitverse-unity-gui and unityforms evolve together?

    How about a merge between both projects?
     
  46. dkozar

    dkozar

    Joined:
    Nov 30, 2009
    Posts:
    1,410
    Last edited: Sep 24, 2011
  47. sperry

    sperry

    Joined:
    Apr 24, 2009
    Posts:
    13
    lazalong,

    bitverse-unity-gui components wrap GUI.* calls.
    For example: BitLabel calls GUI.label().
    This wrapping was initially based on guiforms code.

    However our components extend MonoBehaviour.
    And they are tuned to work inside the unity3d editor.

    Bitverse-unity-gui focus on a pipeline that contains a gui designer creating the interface as prefabs.

    Bitverse-unity-gui intends do allow designers to create GUI using all the tools the editor provides and turning windows and components into prefabs.
    With bitverse-unity-gui you never write "new BitLabel()", but you can create a new label inside the unity editor and use the editor to change its properties.

    Guiforms focus in interfaces coded by programmers.

    The way I understand, Guiforms intends to allow WinForms developers to write code the same way they do in visual studio. As of now, Guiforms components do not extend MonoBehaviour, you can write "new Label()", but you cannot edit then with the default unity editor, and you cannot save our gui as a prefabs. Guiforms project intends to generate code and xml to describe the interface.

    As of now, the projects have different goals.

    That may change, we are open to talk.



     
  48. dkozar

    dkozar

    Joined:
    Nov 30, 2009
    Posts:
    1,410
    I get a lot of questions on building a GUI framework, so I uploaded these two videos to to inspire you. It's about API usage of my Unity GUI framework written in C#.

    Part 1
    Part 2

    Unfortunatelly the framework isn't currently free. But if you do your own framework (the object-oriented way), you should consider this:

    - Basically, what you should do is to build components which hold state (properties: x, y, width, height, label, color, alpha... ), and whose Draw() routine does Unity's "OnGUI()" stuff.
    - What you need is a base class which is extended by each different component.
    - You should have one private Rect property which gets set when changing public properties above, and is used by Draw().
    - Composite pattern is the most important here: you should make a container class that has Children collection, and AddChild/RemoveChild methods.
    - You build the hierarchy using those methods in Start() routine. You create a control and add it as a child to the container. Then you add this container to some other container and so on. What you get is a tree.
    - You should implement invalidation methods for setting properties (basically setting a "dirty" flag on components and recalculating them just before the next update).
    - Examine existing open-source frameworks. Google for "Flex invalidation methods". You should look into InvalidateProperties()/CommitProperties() and two other invalidation/validation method pairs.
    - Without the use of invalidation your framework is doomed (because of the processing cost).
    - Also, your component should extend an EventDispatcher (Flex has a handy one to look into), so you could use event flow in your components.
    - Your Stage (top container) should on OnGUI() iterate trough children of each container in the hierarchy and call Draw().
    - Your Stage should on Update() iterate through validation methods recursivelly.
    If you do stuff on the container first, and then on children, you get a top-down processing.
    - If you process children first and then the container, you get a bottom-up processing (from leaves to root) - this is used for measuring cycle.

    Danko Kozar, dankokozar.com
     
    TwoBitMachines likes this.
  49. nikko

    nikko

    Joined:
    Mar 20, 2009
    Posts:
    436
    Just a stupid question, but how do you add a control to the form?
    When I click on a control in the toolbox, the checkbox change but nothing else.
    Also I can select only one checkbox at a time in the toolbox.
     
  50. duke

    duke

    Joined:
    Jan 10, 2007
    Posts:
    763
    Thanks for those videos and the overview dkozar. Very insightful, and it makes it ever more incredible that Unity went with the route that it did!