Adam's Lair Forum

game development and casual madness
It is currently 2018/08/18, 23:49

All times are UTC + 1 hour [ DST ]




Post new topic Reply to topic  [ 5 posts ] 
Author Message
PostPosted: 2018/03/03, 09:06 
Newbie
Newbie

Joined: 2017/08/13, 16:10
Posts: 8
Role: Hobbyist
I have downloaded "Yet Another UI Plugin" by SnowyPeak. But I can't figure out how to use it. I tried the example code from this page (https://github.com/SirePi/duality-ui/wi ... e-Showcase):

Code:
using Duality;
using Duality.Resources;
using SnowyPeak.Duality.Plugins.YAUI;
using SnowyPeak.Duality.Plugins.YAUI.Controls;
using SnowyPeak.Duality.Plugins.YAUI.Controls.Configuration;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Duality_
{
    public class ShowcaseUI : UI
    {
        protected override ControlsContainer CreateUI()
        {
            DockPanel root = new DockPanel();

            // Grid: 4 rows, 2 columns
            GridPanel grid = new GridPanel()
            {
                Docking = DockPanel.Dock.Left,
                Rows = new float[] { "1*", "1*", "1*", "1*" },
                Columns = new float[] { "1*", "1*" },
                Margin = new Border(5),
                Size = new Size(200)
            };

            // some grouped radiobuttons
            for (int r = 0; r < grid.Rows.Length - 1; r++)
            {
                for (int c = 0; c < grid.Columns.Length; c++)
                {
                    RadioButton rb = new RadioButton()
                    {
                        RadioGroup = "RadioGroup",
                        Text = String.Format("Radio/n@Cell {0},{1}", r, c),
                        Cell = new GridPanel.Cell()
                        {
                            Row = r,
                            Column = c
                        }
                    };

                    // don't forget to clone the configuration when you want to set specific values
                    // it's shared with all controls otherwise!
                    rb.TextConfiguration = rb.TextConfiguration.Clone();
                    rb.TextConfiguration.Alignment = Alignment.Center;
                    rb.GlyphConfiguration = rb.GlyphConfiguration.Clone();
                    rb.GlyphConfiguration.Alignment = Alignment.Top;

                    grid.Add(rb);
                }
            }

            // A column-spanning listbox
            ListBox listBox = new ListBox()
            {
                MultiSelection = true,
                Cell = new GridPanel.Cell()
                {
                    Row = grid.Rows.Length - 1,
                    ColSpan = 2
                }
            };
            listBox.SetItems(new string[] { "One", "Two", "3", "Four", "5!", "Six", "Seven", "Even 8" });

            grid.Add(listBox);

            // Vertical stack
            StackPanel stackV = new StackPanel()
            {
                Docking = DockPanel.Dock.Right,
                Direction = Direction.UpToDown,
                Margin = new Border(5),
                Size = new Size(200)
            };

            // Buttons to change skin.
            // Notice: once you change skin, you lose all the preferences you set in this one
            // Supported but not that useful IMHO
            stackV.Add(new Button()
            {
                Text = "Apply Light Skin",
                Size = new Size(30),
                MouseButtonEventHandler = (sender, e) =>
                {
                    root.ApplySkin(Skin.YAUI_ROUNDED);
                }
            });
            stackV.Add(new Separator() { Size = new Size(5) });
            stackV.Add(new Button()
            {
                Text = "Apply Dark Skin",
                Size = new Size(30),
                MouseButtonEventHandler = (sender, e) =>
                {
                    root.ApplySkin(Skin.YAUI_DARK);
                }
            });
            stackV.Add(new Separator() { Size = new Size(5) });
            stackV.Add(new Button()
            {
                Text = "Apply Fathoms Skin",
                Size = new Size(30),
                MouseButtonEventHandler = (sender, e) =>
                {
                    root.ApplySkin(Skin.YAUI_FATHOMS);
                }
            });
           
            // Some textboxes now.. disabled, enabled and password
            stackV.Add(new Separator() { Size = new Size(15) });
            TextBox textBoxDisabled = new TextBox() {
                Text = "This is disabled.. :(",
                Size = new Size(30) ,
                Status = Control.ControlStatus.Disabled,
            };
            textBoxDisabled.TextConfiguration = textBoxDisabled.TextConfiguration.Clone();
            textBoxDisabled.TextConfiguration.Alignment = Alignment.Right;
            stackV.Add(textBoxDisabled);
            stackV.Add(new Separator() { Size = new Size(5) });
            TextBox textBox = new TextBox() {
                Text = "This is not :)",
                Size = new Size(30)
            };
            stackV.Add(textBox);
            stackV.Add(new Separator() { Size = new Size(5) });
            stackV.Add(new TextBox()
            {
                Text = "Password!",
                IsPassword = true,
                MaxLength = 15,
                Size = new Size(30),
            });

            // Make some space
            stackV.Add(new Separator() { Size = new Size(15) });

            // Auto-increasing progress bar
            ProgressBar pBar = new ProgressBar()
            {
                Size = new Size(30),
                UpdateHandler = (sender, ms) =>
                {
                    ProgressBar p = sender as ProgressBar;
                    p.Value += (ms / 1000 / 10);
                    if (p.Value == 1) p.Value = 0;

                    p.Text = String.Format("Restart in {0:0}...", (1 - p.Value) * 10);
                }
            };
            pBar.TextConfiguration = pBar.TextConfiguration.Clone();
            pBar.TextConfiguration.Alignment = Alignment.Center;
            stackV.Add(pBar);
            stackV.Add(new Separator() { Size = new Size(15) });

            // A textblock
            stackV.Add(new TextBlock()
                {
                    Size = new Size(80),
                    Text = "Text/nNewLine/nAnd Another"
                });

            // Horizontal stack...
            StackPanel stackH = new StackPanel()
            {
                Docking = DockPanel.Dock.Bottom,
                Direction = Direction.LeftToRight,
                Margin = new Border(5),
                Size = new Size(80)
            };

            // ... with 3 togglebuttons
            for (int i = 0; i < 3; i++)
            {
                ToggleButton b = new ToggleButton()
                {
                    Text = "Toggle/nButton",
                    Size = new Size(120)
                };

                b.TextConfiguration = b.TextConfiguration.Clone();
                b.TextConfiguration.Alignment = Alignment.Right;

                stackH.Add(b);
                stackH.Add(new Separator() { Size = new Size(5) });
            }

            // This togglebutton controls the following progressbar
            ToggleButton stopAndGo = new ToggleButton()
            {
                Text = "Stop&Go",
                Size = new Size(80)
            };
            stackH.Add(stopAndGo);

            // and this progressbar won't increase unless the previous togglebutton is Toggled
            ProgressBar vBar = new ProgressBar()
            {
                Size = new Size(40),
                UpdateHandler = (sender, ms) =>
                {
                    if (stopAndGo.Toggled)
                    {
                        ProgressBar p = sender as ProgressBar;
                        p.Value += (ms / 1000 / 8); // takes 8 seconds to fill
                        if (p.Value == 1) p.Value = 0;
                    }
                }
            };
            vBar.ProgressConfiguration = vBar.ProgressConfiguration.Clone();
            vBar.ProgressConfiguration.Direction = Direction.DownToUp;

            stackH.Add(vBar);

            // Central panel: canvas w/ scrollbars!
            DockPanel central = new DockPanel();
            CanvasPanel canvas = new CanvasPanel();

            HorizontalScrollBar hScrollBar = new HorizontalScrollBar()
            {
                ValueChangedEventHandler = (sender, e) => {
                    canvas.Offset.X = -(sender.Value * 2);
                }
            };

            VerticalScrollBar vScrollBar = new VerticalScrollBar()
            {
                Docking = DockPanel.Dock.Right,
                ValueChangedEventHandler = (sender, e) => {
                    canvas.Offset.Y = -(sender.Value * 2);
                }
            };

            // Stupid function checkbutton.. makes things move
            CheckButton funButton = new CheckButton()
            {
                Size = new Size(150, 50),
                Position = new Vector2(100, 200),
                Text = "Checked = fun!",
                UpdateHandler = (sender, ms) => {
                    if((sender as CheckButton).Checked)
                    {
                        bool growing = Convert.ToBoolean(sender.Tag);

                        stackV.Size.X += (ms * .1f * (growing ? 1 : -1));
                        if (stackV.Size.X > 300) sender.Tag = false;
                        if (stackV.Size.X < 150) sender.Tag = true;
                    }
                }
            };

            canvas.Add(funButton);

            // Pack it all up together
            DockPanel cBottom = new DockPanel() { Docking = DockPanel.Dock.Bottom, Size = new Size(20) };
            cBottom.Add(new Separator() { Docking = DockPanel.Dock.Right, Size = new Size(20) });
            cBottom.Add(hScrollBar);

            central
                .Add(cBottom)
                .Add(vScrollBar)
                .Add(canvas);

            return root.Add(stackH)
                .Add(grid)
                .Add(stackV)
                .Add(central);
        }
    }
}


That code gave me compilation errors.. My guess is it's for an earlier version of the plugin (I downloaded 2.0). I fixed some of them, but not all, so I couldn't get the example to compile.

But anyway, forget about that sample. I'm having a hard time to even understand the basic concept with this plugin. How do I display just a simple button on the screen?

The class from the example above inherits from UI, not from Component that I am used to. What is that? And there seems to be an override method CreateUI(), in which I should place all my UI controls used in the scene, right? But.... I don't get it.... How do I get those controls to my scene?

Could someone give me a step-by-step instruction on how I can get a simple button on my screen, and have it react to clicks, that would be awesome... And then I maybe can take it from there myself...


Top
 Profile  
 
PostPosted: 2018/03/03, 18:10 
Site Admin
Site Admin
User avatar

Joined: 2013/05/11, 22:30
Posts: 2055
Location: Germany
Role: Professional
Hey there,

I think SirePi is a lot more qualified to answer your questions on this, but in the meantime, maybe you could clarify this?

tufduck wrote:
That code gave me compilation errors.. My guess is it's for an earlier version of the plugin (I downloaded 2.0). I fixed some of them, but not all, so I couldn't get the example to compile.


What compiler errors are you getting exactly? Which ones did you fix, and where are you stuck?

_________________
Blog | GitHub | Twitter (@Adams_Lair)


Top
 Profile  
 
PostPosted: 2018/03/03, 21:10 
Forum Addict
Forum Addict
User avatar

Joined: 2013/09/19, 14:31
Posts: 872
Location: Italy
Role: Hobbyist
Hi there!

It's very well possible that something changed in the code that is not sitting well with what's written in the wiki (also, thanks for pointing it out..)

The idea behind the plugin is that the only Component you have is your entire UI, which sits as an overlay over your scene.
The definition of the UI itself is done via code; as you noticed, CreateUI has to be implemented in order to tell the plugin what actually needs to be drawn and where. You need to return a ControlsContainer for this (Grid, Stack, etc...)

The plugin doesn't assume anything in terms of overlapping or screen size (unless you set your UI to work in FullScreen - highly reccomended, in which case it does some work for you), so you must take care to set the right sizes to the Components that build your UI.

Finally, to have a button sitting in the center of the screen, you can try with this:
Code:
protected override ControlsContainer CreateUI()
{
  this.IsFullScreen = true;
 
  GridPanel grid = new GridPanel();
  grid.Columns = new string[] { "*", "100", "*" };
  grid.Rows = new string[] { "*", "50", "*" };
 
  Button btn = new Button();
  btn.Text = "Click";
  btn.Cell = new CellInfo() { Column = 1, Row = 1 };
  btn.OnMouseButton += Btn_OnMouseButton;

  grid.Add(btn);
 
  return grid;
}

private void Btn_OnMouseButton(Button button, Duality.Input.MouseButtonEventArgs args)
{
if(args.Button == Duality.Input.MouseButton.Left && args.IsPressed)
  {
    //you clicked the button
  }
}


After compiling, you should be able to simply add your UI class to the Scene, and you should see a 100x50pixels button in the middle of the screen.

Let me know if you need more help, and good luck! :mrgreen:

_________________
Come on Duality's Discord channel. We have cookies! :mrgreen:


Top
 Profile  
 
PostPosted: 2018/03/03, 21:14 
Newbie
Newbie

Joined: 2017/08/13, 16:10
Posts: 8
Role: Hobbyist
Sure!

Code:
// Grid: 4 rows, 2 columns
            GridPanel grid = new GridPanel()
            {
                Docking = DockPanel.Dock.Left,
                Rows = new float[] { "1*", "1*", "1*", "1*" },
                Columns = new float[] { "1*", "1*" },
                Margin = new Border(5),
                Size = new Size(200)
            };


gave these two compilation errors:

Quote:
DockPanel' does not contain a definition for 'Dock

and

Cannot implicitly convert type 'string' to 'float'


This was fixed by changing to:

Code:
 // Grid: 4 rows, 2 columns
            GridPanel grid = new GridPanel()
            {
                Docking = Dock.Left,
                Rows = new string[] { "1*", "1*", "1*", "1*" },
                Columns = new string[] { "1*", "1*" },
                Margin = new Border(5),
                Size = new Size(200)
            };




And this code:

Code:
// some grouped radiobuttons
            for (int r = 0; r < grid.Rows.Length - 1; r++)
            {
                for (int c = 0; c < grid.Columns.Length; c++)
                {



gave this compilation error:

Quote:
'IEnumerable<string>' does not contain a definition for 'Length' and no extension method 'Length' accepting a first argument of type 'IEnumerable<string>' could be found (are you missing a using directive or an assembly reference?)


Fixed by changing to:

Code:
// some grouped radiobuttons
            for (int r = 0; r < grid.Rows.Count<string>() - 1; r++)
            {
                for (int c = 0; c < grid.Columns.Count<string>(); c++)
                {



But the errors still left are these:

Code:
RadioButton rb = new RadioButton()
                    {
                        RadioGroup = "RadioGroup",
                        Text = String.Format("Radio/n@Cell {0},{1}", r, c),
                        Cell = new GridPanel.Cell()
                        {
                            Row = r,
                            Column = c
                        }
                    };


Quote:
The type name 'Cell' does not exist in the type 'GridPanel'




and


Code:
// Buttons to change skin.
            // Notice: once you change skin, you lose all the preferences you set in this one
            // Supported but not that useful IMHO
            stackV.Add(new Button()
            {
                Text = "Apply Light Skin",
                Size = new Size(30),
                MouseButtonEventHandler = (sender, e) =>
                {
                    root.ApplySkin(Skin.YAUI_ROUNDED);
                }
            });



Quote:
'Button' does not contain a definition for 'MouseButtonEventHandler'


Top
 Profile  
 
PostPosted: 2018/03/03, 21:24 
Newbie
Newbie

Joined: 2017/08/13, 16:10
Posts: 8
Role: Hobbyist
SirePi, thank's for responding to my questions!

SirePi wrote:
The idea behind the plugin is that the only Component you have is your entire UI, which sits as an overlay over your scene.
Ah! Yeah, that was what I kind of figured out as well. Like the Canvas object in Unity, which also contains the entire UI.

SirePi wrote:
Finally, to have a button sitting in the center of the screen, you can try with this:
Code:
protected override ControlsContainer CreateUI()
{
  this.IsFullScreen = true;
 
  GridPanel grid = new GridPanel();
  grid.Columns = new string[] { "*", "100", "*" };
  grid.Rows = new string[] { "*", "50", "*" };
 
  Button btn = new Button();
  btn.Text = "Click";
  btn.Cell = new CellInfo() { Column = 1, Row = 1 };
  btn.OnMouseButton += Btn_OnMouseButton;

  grid.Add(btn);
 
  return grid;
}

private void Btn_OnMouseButton(Button button, Duality.Input.MouseButtonEventArgs args)
{
if(args.Button == Duality.Input.MouseButton.Left && args.IsPressed)
  {
    //you clicked the button
  }
}

Thanks so much for the code snippet! I just tried it and it worked! :+1: Now I'm going to play more with your plugin. Learning by doing!


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 5 posts ] 

All times are UTC + 1 hour [ DST ]


Who is online

Users browsing this forum: Google [Bot] and 7 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum

Jump to:  
cron
Powered by phpBB® Forum Software © phpBB Group