eDriven Q&A

Thanks for the quick reply, layouts working fine.

Getting very good results with your demo's on the Nexus 7, Asus Transformer Pad 2, Galaxy Tab 7.7 Galaxy S2 with Unity 4 beta.

The GUI is snappy, but Unity still need to sort out the amount of draw calls when there are lots of GUI elements.

I can't get the keyboard to work on mobiles, (well the return key).

In Unity I use

Code (csharp):

1. void Update()
2.     {
3.             if (Input.GetKey(KeyCode.Escape))
4.             {
5.                 Application.Quit();
6.                 return;
7.             }
8.     }

Your frame work I use

Code (csharp):

1. protected override void OnInitialize()
2.     {
3.         base.OnInitialize();
4.  
5.         KeyboardMapper.Instance.Map(
6.             new KeyCombination(KeyboardEvent.KEY_DOWN, KeyCode.Escape, false, false, false),
7.             delegate { QuitMobile(); }
8.         );
9.     }
10. private void QuitMobile()
11.     {
12.         Application.Quit();
13.         Debug.Log("Quitting Application");
14.     }
15.  

It does quit if I use a button.

 

Im using OnGUI events internally. Please check out is this working at all:

Code (csharp):

1. void OnGUI()
2. {
3.     Event e = Event.current;
4.     if (e.isKey  e.type == EventType.KeyUp) {
5.         Debug.Log("KeyUp: " + e.keyCode);
6.     }
7. }

ps. I thought of using Input.anyKeyDown and stuff, but Input system is not very elegant for this purpose since there's no notification of the key pressed, so you have to know in advance for which key to check.

 

Works fine on desktop, not working on mobile.

I think the problem is that mobiles don't fire the KeyDown, KeyUp events.

 

Oh, well then, seems OnGUI() isn't consistent across platforms. Could you file a bug to Unity?

The alternative would be using Input.anyKeyDown and then loop through all the possible keys using Input.GetKey(key). Which is not very nice.

 

This is interesting and perhaps could be used: http://docs.unity3d.com/Documentation/ScriptReference/Input-inputString.html

Tell me, do text fields work as expected (writing text into them)?

 

This works on mobile.

Text fields are fine.

 

HI dkozar,

I'm trying to improve my Application which is a mess and want to use the MVP pattern.

What is the best way to subscribe to events from the Presenter class from the Viewer Class.

Code (csharp):

1.  
2. public class UserView : eDriven.Gui.Gui, IUserView
3. {
4.     private Button mbutSave;
5.     private UserPresenter mUserPresenter;
6.  
7.     protected override void OnStart()
8.     {
9.         base.OnStart();
10.         mUserPresenter = new UserPresenter(this);
11.     }
12.     protected override void CreateChildren()
13.     {
14.         base.CreateChildren();
15.         mbutSave = new Button
16.                       {
17.                           Text = "Save"
18.                       };
19.         mbutSave.AddEventListener(MouseEvent.CLICK, ButtonSaveClickHandler);
20.     }
21.     public void ButtonSaveClickHandler(Event e)
22.     {
23.         //Debug.Log("ButtonSaveClickHandler");
24.     }
25. }
26.  
27. public class UserPresenter
28. {
29.         private IUserView mView;
30.         public UserPresenter(IUserView view)
31.         {
32.             mView = view;
33.             this.Initialize();
34.         }
35.         private void Initialize()  
36.         {
37.                //How do I listen to Viewer Class events here?
38.         }
39.         public void ButtonSaveClickHandler(Event e)
40.         {
41.             Debug.Log("ButtonSaveClickHandler"); //need this to handle the viewer event
42.         }
43. }
44.  

 

Since eDriven.Gui.Gui is IEventDispatcher, you just need to define your type of event which should be listened for from UserPresenter:

Code (csharp):

1. public class UserView : eDriven.Gui.Gui, IUserView
2. {
3.     public const string SAVE_CLICKED = "saveClicked";
4.     // .......
5.     public void ButtonSaveClickHandler(Event e)
6.     {
7.         DispatchEvent(new Event(SAVE_CLICKED));
8.     }
9. }

(note: the purpose of a constant is to avoid spelling errors which are not easy to find. You could of course dispatch events with string as type, but what happens if dispatching "saveClicked" and subscribing to "saveClick". The compiler doesn't mark this as an error)

And then in UserPresenter:

Code (csharp):

1. public class UserPresenter
2. {
3.         private IUserView mView;        
4.         private void Initialize()  
5.         {
6.                mView.AddEventListener(SAVE_CLICKED, ButtonSaveClickHandler);
7.         }
8.         public void ButtonSaveClickHandler(Event e)
9.         {
10.             Debug.Log("ButtonSaveClickHandler");
11.         }
12. }

A few things:

1. You could also re-dispatch the original button event without the need of creating your own event type:

Code (csharp):

1. public void ButtonSaveClickHandler(Event e)
2. {
3.         DispatchEvent(e);
4. }

2. Although the best thing for decoupling is to dispatch your own events (ask yourself should UserPresenter class know about the button existance? The best way is to dispatch events specific to your (complex) component (in this case UserView)

3. To have reusable components, you don't really need to extend Gui. You'd rather extend Container and setup your component there; this way you could reuse it everywhere; Gui class really is the adapter of Stage (root Container) to MonoBehaviour, so it could be attached to game object). Check out this video on how to extract your functionality to a component (note: ignore this kind of styling cos it's obsolete, by that time there were no style mappers ).

4. Since mouse events bubble, and button is child of your Gui (which is adapter to Stage which is a Container containing your Button), you could take advantage of event bubbling and subscribe to Gui itself for event (right from UserPresenter class). You just have to make mbutSave public. Try it! (of course, this is a bit dirty). Note: your handler could in the case of redispatching the same event (as in point 1.) fire twice. This happens when not canceling the original event.

5. When in need to dispatch additional data from your component, you just have to extend Event class so making your own event, like this:

Code (csharp):

1. public class MyEvent : Event {
2.         public const string MY_EVENT_TYPE = "myEventType";
3.         public int MyProperty;
4. }

... and then passing your data throught the additional properties. In event handler you get "Event e", and you need to cast it to MyEvent to read its properties.

6. I'm very proud of yourself and your advanced coding skills (and eDriven usage)

 

Additionally, when building your component, you could expose the multicast delegate notation ("+=" and "-=") for adding and removing listeners.

To implement it in your component, use the following snippet:

Code (csharp):

1. using MulticastDelegate=eDriven.Core.Events.MulticastDelegate;
2.  
3. public class UserView : eDriven.Gui.Gui, IUserView
4. {
5.     // ...
6.     private MulticastDelegate _saveClicked;
7.     public MulticastDelegate SaveClicked
8.     {
9.         get
10.         {
11.             if (null == _saveClicked)
12.                 _saveClicked = new MulticastDelegate(this, UserView.SAVE_CLICKED);
13.             return _saveClicked;
14.         }
15.         set
16.         {
17.             _saveClicked = value;
18.         }
19.     }
20. }

You can see the lazy instantiation involved here, i.e. the instantiation is being run the first time the multicast delegate is actually being used from the code (that is because of the optimization).

To use this notation, your components of course must extend EventDispatcher (not necessarily Component or Container).

Now, when subscribing to event, you could write it the following way:

Code (csharp):

1.  
2. private void Initialize()  
3. {
4.     mView.SaveClicked += ButtonSaveClickHandler;
5. }

 

Thanks for the help.

It works, and now I can test the pattern(s) when I get the time

The problem that I have been trying solve is, I initially had a project that I coded in WPF which I tried porting to Unity3D using BitGUI framework however it was too slow. Then NGUI came along and I got it to work great on mobiles/Pads but a lot of the code was tied to GUI.

So now I'm testing your framework I will leave out the GUI and put all the user interaction in the Presenter classes and use Interfaces to test that it is working correct (well that's the plan) before I code the GUI part.

 

OK. Keep in mind that the best way to setup your GUI is: "Properties in - events out". Meaning you should change the state of your components by setting component properties (or calling methods), and you get data from the component out by listening its events. This is the best way to decouple things in general.

 

I am still lost here. We are using Unity 4 pro and could not find a way to change the font settings inside any edriven example to get rid of the following error:

Should I import the third party fonts?

 

This thing sometimes tends to happen. Please try to Reimport All the assets for start:

 

Tadeo, another user already had this problem. Here's the fix in case the reimport doesn't help:

Please report back was that a solution for your problem. Thanks!

 

Thanks for your fast reply!
Already set it to Unicode unfortunately I get this:
The font Assets/eDriven.Gui/Demo/_shared/Fonts/px_sans_nouveaux.ttf could not be imported because it couldn't be read
UnityEditor.DockArea:OnGUI()

BTW I am using unity 4 on windows.

 

OK, please wait, let me try to re-import the online version...

 

Same for olney_light.otf

 

I installed Unity 4.0.0f5, then downloaded the package from the Asset Store, installed, run the LoadImage demo and didn't have any problem.

I'm using Windows7 (64-bit).

Could you please try to create a new project and then import the package?

 

Could you please try downloading the original fonts separately and reapply them?

Olney Light
Sans Nouveaux

You should save both fonts to desktop, rename them to "olney_light" and "px_sans_nouveaux" and overwrite fonts inside the "Assets/eDriven.Gui/_shared/Fonts" folder.

 

Already created a brand new project, downloaded edriven from the asset store, imported again and still the fonts seem to be unreadable to unity:

 

Some guys already had this problem. Could you try these?

http://forum.unity3d.com/threads/24689-Font-import-problem
http://forum.unity3d.com/threads/24471-Font-problem

Seems that project path meters (no special characters etc.)

Thanks

 

Solved. This was the problem. The project path contained a non standard character (spanish "Ñ").
Thanks Danko, Please keep up posted about upgrades and new features.
Tadeo Gutierrez

 

Muchas gracias!

For Asset Store update notifications, please subscribe to this thread.

Many cool things coming up, stay tuned!

 

Curious error after importing Easytouch 2.5 package:

"
Removing either eDriven or Easytouch from the project gets rid of the errors. Both work ok by themselves.

 

It means that the second plugin also has a Photo class.

Just put this on top of the LoadImages.cs file:

Code (csharp):

1.  
2. using Photo=eDriven.Playground.Demo.Gui.Flickr.Photo

 

Thanks.
It fixes most errors but this one remains since the namespace conflict is not solved:

 

Pls try this combo:

Code (csharp):

1. private void LoadBigPhoto(eDriven.Playground.Demo.Gui.Flickr.Photo photo)
2. {
3.     // ...
4. }

 

thanks,
it solved the Photo conflict.
new Errors with last fix

now this errors appear with edriven alone ( without easytouch. )
Maybe renaming the whole "Photo" type?...

 

tadeo, just wrap the right side inside the EventHandler signature:

Code (csharp):

1. += eDriven.Core.Events.EventHandler(delegate (/* .. your old anonymous method here .. */))

You have to replace Photo to eDriven.Playground.Demo.Gui.Flickr.Photo in each place where it appears.

 

When using 3rd party libraries ensure that they are precompiled libraries or that you are on Unity 4 with them using namespaces.

Unity 3 does not support namespaces so if some 3rd party plugin is badly written with 'non-unique class names' or generic class names you will get clashes, small to massive ones.

The error implies that the demo has a using xxxx at the top to import the edriven playground with the very demo specific Photo class, yet another project you imported has a totally sluggish class naming with just a 'Photo class' instead of '<systemname>_Photo' (U3) or proper namespacing (U4 as UT didn't offer namespace support in U3) to prevent this kind of collisions.

 

I made a small research (with dreamora's help of course ).

Two things first:

1. Everything inside a Demo folder is available for your manipulation (and deletion), so you can easily rename each class in it - both Stage classes (extending Gui extending monoBehaviour) and standard classes.

2. Everything inside DLLs is properly namespaced. For instance, this class:

Code (csharp):

1. eDriven.Core.Events.MulticastDelegate

... it has a same name as this .NET framework class:

Code (csharp):

1. System.MulticastDelegate

These classes don't clash, because each class is inside its own namespace (all eDriven classes - except a few - are inside eDriven namespace).

So, what's going on here?

When using namespaces while defining classes in scripts, Unity doesn't handle them properly if another class with the same name appears in the project (as Visual Studio and Mono Develop do). Demo classes are defined in scripts, not in DLLs (they are open for learning purposes and use as a starting point for Your further development).

Now, although there's a "using eDriven.Photo" statement on the top of the script - and inside the script the "Photo" class is being used - the moment you put another Photo class inside the project - Unity doesn't know which one to use.

I would suggest filling this as a bug to Unity, so perhaps we will have this problem solved in the future. In the meantime, you should rename "problematic" classes by yourself. Solutions are:

1. Rename eDriven.Demo.Photo to eDriven.Demo.DemoPhoto or so.
2. Rename your another library photo to AnotherLibrary.Photo or something else
3. Use strongly typed names in each place where using Photo:

Code (csharp):

1. private void YourMethodUsing Photo(eDriven.Playground.Demo.Gui.Flickr.Photo photo)
2. {
3.     // ...
4. }

Additionally, I will look into demo scripts and eventually rename some of the "problematic" classes in future builds.

 

Hi!

What I got when adding the "Height=200" line is shown in the following image:



Now, what you see here is normal eDriven.Gui behavior.

Every component in eDriven.Gui is being measured by the system inside out. Meaning: from leaves to the root (Stage). Each of the list items is being asked to measure itself (basically its label) for preferred height, and then the list itself is asked to measure itself (this measurement is based on the size of its children - list items).

So, when omitting Height, the list will have its measured (preferred) height.

However, when setting the explicit height (Height=200), the List is also going to be measured (needed for rendering scrollbars), but it's preferred size won't be respected, since it's being overridden with explicit height.

Setting AlwaysShowHorizontalScrollbar and AlwaysShowVerticalScrollbar has no influence, except: when no scrollbar needed (meaning the content is smaller than the outer size) this introduces the strange behaviour described here (this is UnityGUI bug). So, I'm suggesting not to use these properties. They are waiting for better times when the "AlwaysShow" bug gets solved.

ps. If you wanted to make a list smaller, you have to style the list item using ListStyleMapper, because the list height is basically the sum of item heights.

 

Just to give you an idea how you can size GUI elements (their measured height) using style mappers.

Here's an example of using the global (default) ListStyleMapper, which has its ListItemStyle and CaretItemStyle routed to custom styles (that have custom font, which is bigger than the default one, and is centered inside each item).




GUIStyle definitions:




Style mapper:

 

Thank you for your incredibly fast reply. I really appreciate it.

Just to follow up, the problem I reported went away when I updated Unity for V4. Here is a screenshot of what was happening showing a white area in the upper left corner. In the script “DemoForm2”, I only added Height = 200. It seems the problem occurred anytime I would change a List property that would cause the need for a scroll bar such as reducing the height to a value less than the total height of the list items.


Also, thank you for the explanation of the list and line style mappers.

I am new to eDriven and the reason for my experimenting with eDriven.Gui.Components.List is that I ultimately need to display a table. I was hoping it was possible that the ListItem’s in a List could be composed of an HBox that has some child components such as Labels and CheckBoxes inside, so I can display something like a list of check boxes. Currently, I see no way of making a line in a list being anything other than a string. Do you have any suggestions?

Thanks again for your quick reply.

 

1. White area bug is fixed in the last version. Check out that you have eDriven.Gui 1.5 installed; if not - please download the new version from the Asset Store.

2. Working on grid, but I don't want to make promisses on how and when.
You could not put anything but labels in this (simple) type of list, but you could build your own.
It's just the VBox container having HBoxes as children. Each HBox has then your given children (checkbox etc.).

Cheers!

 

I made a demo on child controls going into the 1.6 build. Attaching it as a package here. Code is very well documented, also there are switches for scrolling, clipping and background - just for learning how stuff works.

Enjoy!

Note to users: you got to have eDriven.Gui package installed prior to installing this package.

A few screenshots:

With scrolling:




No scrolling, no clipping:




With clipping:




No background:




Reading the state:

 

Additionally, you could extract the whole VBox into a separate component, and reuse it throughout projects as a control.

There are 3 videos in the series covering this topic, so suggesting to take a look at them (note: videos are pretty old, so some stuff has been renamed):

Part 1:

Part 2:

Part 3:

 

Thank you very much for your help and for the demo. I am unable to download the attachments properly. They come up as blank screens.

Thank you again for your prompt replies.

 

Here, I've re-uploaded the files as a zip file.

Thanks for comments! If you like the package - you might rate and review it on the Asset Store: it really needs some love.

 

Hi,

can you show how to resize a dialog box. I have writen code like under but resize is ok for width,not for height. Is it a bug or should resize to be applied, not on the dialog itself but on its contentchild container ? if so how to adress the content child container.

Code (csharp):

1.  
2. Dialog _dialogMainMenu = new Dialog {Width = 350, Padding = 10, ScrollContent = true,Title = "Form Demo"};
3. _dialogMainMenu.Plugins.Add(new Resizable());
4. _canvas.AddChild(_dialogMainMenu);
5.  

Are panels draggable ?

can you publish the code of your website's top animated menu (demo,news,comments ...), i think it could be good learning support. (event,twee,gui style..)

i have reproduce it but i had some problem with roll_over event, the buttons (when tweening) were ejected from their container and i didn't understand why so i had to put each button in a proper container with same size.and all of these inside the top menu container.
with that,it's ok but i have to manage with parent/ child on event... not a good way,i'm sure

 

Hi!

Resizing extensively depends on parent container's layout. There is the AutoLayout property on parent which has to be turned off (temporarily) when resizing, because if not turned off, the container layout itself reacts and overrides your changes.

You can see this property being turned off in LoadImages demo, just before child thumbnails are instantiated and started to animate, and being turned on again after the last thumbnail animation is finished.

Also, you could find it in AbsoluteLayout demo, where you could turn this property off on the container, and then clicking the children resizes or moves them, without parent layout reaction.

Since a dialog is a complex component (having children etc.) there might be other problems, I'll look at them and post back when I have the solution.

Not by default, but you could make each component draggable by plugging in Draggable. This plugin has DraggableArea property - just put in your drag-sensitive component (that would be panel's HeaderGroup).

This is already done in Dialog, which extends Panel, having the Draggable property (boolean) which internally turns on and off the Draggable plugin on a header area. So, consider using the Dialog class instead.

You're right! I'll do that, meanwhile you can play with the "OptionsToolbar" source attached to this post.

 

Here's what I found (about resizing the dialog):

1. There is actually no problem with nested components when resizing the window. You could try this by using the button (instantiated inside, or outside of the dialog):

Code (csharp):

1. Button btnResize = new Button { Text  = "Click to resize" };
2. btnResize.Press += delegate
3. {
4.    dialog.Width += 50;
5.    dialog.Height += 50;
6. };
7.  

2. Resizable plugin evidently doesn't resize it vertically. I have to look into this problem...

3. Horizontal resizing using Resizable seems to work fine though.

4. Just for info, Resizable has the AutoExcludeFromLayout property, which auto-excludes the component from parent's layout (making cmp.IncludeInLayout = false ):

Code (csharp):

1. cmp.Plugins.Add(new Resizable { AutoExcludeFromLayout = true})

This was not documented properly, and the docs will say:

Code (csharp):

1. /// <summary>
2. /// Should we exclude component from layout on border mousedown
3. /// </summary>
4. public bool AutoExcludeFromLayout;

5. Also, there's an additional useful property:

Code (csharp):

1.  
2. /// <summary>
3. /// Should we bring the component to front on border mousedown
4. /// </summary>
5. public bool AutoBringToFront = true; // true by default

I hope I'd address the resizable dialog issue as soon as I get time. I'd also like to have resizable dialogs I guess I'd do it by implementing the bottom-right "triangle" button and monitor mouse moves after the button is mouse-down-ed (a classic mouse-drag approach). You could also do it yourself, by adding the button to Dialogs' ButtonGroup, making it align bottom-right.

 

Hi,

thanks for your reply. I have done some test with dialog form panel ...

for the dialog, i can resize vertically with plugin but with tips and tricks : you can't do this as expected with the window's corners or top/bottom borders.

If you put dialog.Draggable = false, then you can resize vertically as expected with top corners / border so drag tools seems to have priority over resize tool. So you have to reduce the size of the drag area sensor (i think).

If you put dialog.Draggable = false,or let it to true (no matter), you can resize vertically if you click just under the top bar (title bar ?). it looks like the bottom corners and border are on top of Dialog Content,not at bottom.


Another problem, AutoBringToFront is ok if you click on title bar, not if you click on content of the Dialog box.

after another test, AutoBringToFront doesn't work at all if the dialog has.Draggable = false and no resizable plugin.

(same problem for the others containers)

 

Oh... AutoBringToFront of Resizable plugin isn't really used for handling dialog depths.

What you need to use is PopupManager to popup your dialogs:

Code (csharp):

1. PopupManager.Instance.AddPopup(yourComponent, false); // modal = false

This manager adds your components (any component) to the special layer (Stage) that is in front of all other GUI layers. It also takes care of depths. You could try popping up few of these, but in non-modal mode (no overlay behind dialog) so you can see you could "switch" between them by clicking everywhere inside each dialog.

You can remove the popup using:

Code (csharp):

1. PopupManager.Instance.RemovePopup(yourComponent); // modal = false

 

Hi,

i have better result by adding :

Code (csharp):

1.  
2. dialog.Click += delegate
3.         {
4.             AudioPlayerMapper.GetDefault().PlaySound("test_sound", new AudioOption[0]);
5.             dialog.BringToFront();
6.         };
7.  

this do the job (for bringing container to front when clicking inside dialog or other container)

Where is declared ? :

Code (csharp):

1. public bool AutoBringToFront = true;

 

ok, i will try popup, it look like it rocks!!!

can you join your scene as demo file ? (to save time and perhaps learning more

 

Hi,

i use draggrigidbody script. if a popup is over a gameobject and if i click on the popup, the click event propagate to popup and draggrigidbody script so i can select a gameobject even under a button or popup.

is there a way to know if the screen point (for the raycasthit) is recover by one of the Edriven Gui Component (or more simple, a way to stop propagation of the click event) ?

i had play long time ago with unityform and manage to have this.

 

Use FocusManager.IsFocused to find out is there an eDriven.Gui component in focus.

Note: this works for focusable controls only (TextFields etc.) It is exposed for arrow keys mainly, so they don't do the world space walking while GUI in focus.

About finding out is there a GUI element under the mouse - I'll look at it and how to expose it (this stuff is internal).

 

Seems I've made it public already: eDriven.Gui.Managers.MouseEventDispatcher.MouseTarget.

Try it ads see if it suits your needs. This property should contain a reference to the mouse-enabled component under the mouse when mouse moved for the last time (or null otherwise, I guess).

 

hi,

it's perfect and so easy

I don't know if unity GUI has such mecanism but if someone know, please tell me