DisplayFab

Version: 1.2.0 | Documentation Last Updated: July 11, 2016| What's new?

Thank you!

Thank you for purchasing this product. If you have any questions that are beyond the scope of this documentation, please feel free to contact us.

About DisplayFab

DisplayFab is a Unity3D Extension by Techooka Labs that lets you display data from Unity Components, PlayerPrefs, Singletons, Game Managers and other scripts and display it on UI elements without writing a single line of code.
Eliminate the need to create scripts (and writing code) to display data on your UI elements. By using DisplayFab, you can speed up your UI design process by up to 400%.
You can display data on your UI elements in as few as three point-and-click steps: Choose your target UIs, choose your source data and link-up the target UI to your source data. That's as simple as it gets!

Or you can reverse the process and save or update the data from your Unity UI elements. You just have to reverse the targets and the sources and you're done!

Unity Asset Store Link

You can download DisplayFab at Unity Asset store: DisplayFab at Asset Store

DisplayFab features

  • Core Features
    • DisplayFab Instantiator : Do you have an array or a list of data that you want to be populated into a list of UI elements? Just add DisplayFab to your list item prefab and you can use DisplayFab Instantiator to automatically pull data from an array or a list between the range you specify and DisplayFab will automatically populate the UI elements with the data, all without writing a single line of code!
    • Auto-converters: DisplayFab will automatically convert the most common recognizable types to display the appropriate information on your Unity UIs without requiring you to manually convert the types by scripting . For example, you can display an integer or a float on a Text UI element, without modifying or writing any code for it.
    • On-the-fly Data Formatting: Using the built-in converters, you can format the data to suit your display needs. For example, you can format a number to display with a prefix (such as a '$' symbol), a suffix, or both a prefix and a suffix, using the available built-in converters
    • Extending the auto-converters: You can extend the converters by writing your own converters - as simple or as complex as you wish.
  • Other Features
    • Extending the Unity Event System callback events using DisplayFab's advanced callback scripts: While the Unity UI Event system callback events (onClick, onSliderValueChanged etc) only let you invoke Methods and Functions, DisplayFab extends the system to allow you to directly modify Properties, Fields (and Static Properties and Static Fields), in addition to the Methods.
    • Supports Static Classes, PlayerPrefs, Singletons : Apart from Components and MonoBehaviours in a GameObject (and from a Prefab), you can fetch data from Singletons, PlayerPrefs and Static Classes.
    • Supports Run-time GameObjects : If a GameObject doesn't exist in edit time, you can let DisplayFab pull reference of a gameObject by name, at runtime.
  • Some Editor Features include:
    • Quick Peek : Lets you peek into the data for a selected source in Edit mode for quick debugging
    • Event Link-up Groups : Lets you group a bunch of link-ups into a group for convenient execution of more than one source-target event links. You can then execute a group using the Unique Group ID or a Unique Group Name.
    • Supports existing Unity Event callbacks: You can execute DisplayFab Event links using Unity's built-in event callbacks from Buttons, sliders, text fields and more. (The alternative is to use DisplayFab's Event callback scripts for more customized control as explained above)
    • plus more.....

Downloading and Installing DisplayFab

  1. Purchase and download DisplayFab from Unity Asset Store or Techooka's website
  2. Once downloaded, you will have to import the package just like any other extension.
  3. Once you import, Unity will take sometime to compile the scripts.

Troubleshooting

  • If you face problems while installing DisplayFab, please post your problem at the discussion area.

Updating DisplayFab

You can update DisplayFab either through the Unity Asset Store (if purchased via Asset Store), or directly via Techooka's website if you downloaded directly from Techooka.

Always make a backup of your project before upgrading to the latest version!

How to add a DisplayFabSystem Component to a UI Panel

Press the Add Component button located on the Inspector of any game object. The most usual objects on which you'd add DisplayFab are, for instance, a root game object of a UI Panel.

Step 1: Press Add Component and select DisplayFab
Step 2: Press on "DisplayFab System"

The DisplayFab Component

This is how an empty DisplayFabSystem Component looks after you add it to a GameObject

The DisplayFabSystem Component

DisplayFabSystem Component Basics

Each DisplayFabSystem Component has three Tab Views.

We will briefly describe each Tab View below:

Event Link-up Tab

The Event Link-up Tab View

This is how the Event Link-up tab looks like. At the beginning, no events are connected. However, as you link the Source Data to the Target Displays, this tab view will get populated.

Targets Tab

The Targets Panel
  • The + Target button adds a Target entry to the Targets Tab view.
  • Easy Link Mode lets you display the Target and Source Tab in the same view to let you link multiple Sources and Targets easily

Sources Tab

The Source Tab View

The + Source button adds a Source entry to the Source Tab View.

Using DisplayFabSystem: Step-by-step Walk-through

We will learn how to put DisplayFab to use by walking through an introductory tutorial.

In this example, we will use a PlayerManager script and pull some of the information from the PlayerManager Script and display it on a UI Panel.

Tutorial 1 Starter Package

For your convenience, here's the Tutorial 1 Starter package.
This includes the starter scene along with the PlayerManagerDemo.cs script.
You may import this into your project and skip directly to Step 3 (Adding DisplayFab to the UI Panel) by skipping Step 1 & Step 2.

Tutorial Step 1: Setting Up the Scene

  1. Let's create a new scene and add a new GameObject (name it as PlayerManager ).
  2. Download this PlayerManagerDemo.cs script and import it into your Unity Project.
  3. Add the PlayerManager.cs Monobehaviour script on to PlayerManager GameObject

Tutorial Step 2: Design the UI Panel

We are going to display the Player Name (Text Field), player health (Slider), player high score (Text Field) from the PlayerManager. Let's setup a UI Panel with these three fields. Let's rename the game objects as: Text_PlayerName, Slider_Health, Text_HighScore respectively. Once setup, your Hierachy should look something like this:

Step 3: Add DisplayFab component to the UI Panel

Add the DisplayFab System component to the root of the UI Panel. Follow the instructions in the previous section, if you need help.

Step 4: Setting Up the Targets

  1. Switch to the Targets tab under the DisplayFab System
  2. Click on +Target button to add a new target entry
  3. Drag and drop the Text_PlayerName Game Object from the Hierarchy into the 'red' slot that says 'None'.
  4. Once you drag and drop the Game Object, the GameObject field turns green. You will now notice a 'red' drop-down next to it. You can select the component from the drop-down list. In this case, it is the 'Text' component that we need to select.
  5. Once the Text component is selected, note that a button appears next to the
  6. Click the button to add an empty field/property/method entry. This is called a FPM entry
  7. Click the Pick button to select a field/property/method. A popup will appear. Choose text under the property list by clicking on the @ button
  8. Skipping Steps 3-6: The Auto-detect Alternative

    Auto-Detect Feature

    Clicking on the Auto detect button ( icon) lets the DisplayFab System automatically choose the most commonly used Component and property pair.
  9. A new FPM entry will now appear. The 'S' icon to the left of 'text' indicates this is a string
  10. The 'S' icon to the left of 'text' indicates this is a string
    Hovering over the 'S' icon will show you the unique FPM ID. This FPM ID is unique per each target/source in DisplayFab Component
  11. Now Repeat Steps 2-8 to add the Targets for Slider_Health and Text_HighScore. This time, you can use the Auto-Detect to automatically add the fpm Entries. Once you are done, the result will be like this:

Step 5: Setting Up the Sources

  1. Switch to the 'Sources' tab to start adding the Sources. The steps outlined below are almost similar to the way we added Targets in Step 4.
  2. Click on the +Sources button to add a mew source entry.
  3. Drag and drop the PlayerManager Game Object from the hierarchy to the red slot.
  4. Select PlayerManagerDemo from the drop-down.
  5. Click to add a fpm Entry.
  6. Click +Pick button to pick the source data property.
  7. Click @ besides playerName and repeat the above steps for , playerHealth and playerHighScore
  8. After completing the above step, The final result will look like this:

Step 6: Linking the Targets to the Sources

You will link the targets to the sources in this step.

  1. Switch to the tab
  2. Under the Text_Player GameObject, locate the 'Text' fpm Entry. Click on the 'Link Icon X'. This will switch the view to the Sources Tab.
  3. Click on the 'Link' button besides the playerName to complete the link.
  4. If you switch to the Event Link-up tab, you will notice that a new event link entry has appeared.
  5. Congratulations! You have added your first event link!
  6. You can continue linking the rest by following the above steps. However, there's an easier way to setup multiple links without switching the tabs frequently.
    1. Switch back to the tab
    2. Turn on the 'Easy Link Mode'
    3. Now the Targets view and the Sources view are displayed in a single window.
    4. Click on the link button and link the rest of the two targets to their corresponding sources.
    5. When you now switch to the 'event link-up' tab, the final result is as follows

Step 7: Executing the Events


Let's say we want to execute those event links upon clicking the 'Get Data' button. Here's how we can do it in 3 different ways:
  1. Using Unity Event onClick
    1. Click on the 'Get Data' button.
    2. Add '+' Entry and setup the events like below:
    3. By invoking DisplayFabSystem.ExecuteEventList function, you will invoke all the three links setup in step 6 above.
  2. Using DisplayFab Event Group
    1. Alternatively, you can invoke an event by using a group. Here's how you'd setup a group:
    2. The DisplayFabEventGroup component must be added (preferably on the same GameObject as the DisplayFab System) and you must add all the event links that you need. You can also name the group to your liking.
    3. Once the above component is added, you'd switch to the 'Get Data' button, and invoke the DisplayFabEventGroup.ExecuteGroup function.
    4. You can either execute a group by its name or execute using the group Unique ID.
  3. Using DisplayFab's Unity OnClick Event
    1. You'll have to add the DisplayFab DSFOnButtonClicked component first and drag and drop the reference to the DisplayFabSystem component.
    2. You now have three options by which you can execute something when the button is clicked.
    3. Event Link: Lets you pick an event link to execute from the DisplayFabSystem
    4. Event Group: Lets you pick a event group to execute from the DisplayFabEventGroup (if there's one on the gameObject)
    5. This will invoke all event links under 'Group 0'. Since the Start() is checked, this event will get executed once in the Start() function as well.
    6. Direct Source: Lets you directly modify some information, or to call a method

Tutorial 1 Walkthrough : DisplayFab Basics

This is an interactive walkthrough of the tutorial covered in the above section.

The first step is to open the project

Click UnityEditor.SceneHierarchyWindow

Click UnityEditor.SceneHierarchyWindow

Click UnityEditor.InspectorWindow

Click UnityEditor.AddComponentWindow

Click UnityEditor.AddComponentWindow

Click UnityEditor.InspectorWindow

Click UnityEditor.InspectorWindow

Click UnityEditor.InspectorWindow

Click UnityEditor.InspectorWindow

Click UnityEditor.InspectorWindow

Click UnityEditor.SceneHierarchyWindow

Click UnityEditor.InspectorWindow

Click UnityEditor.InspectorWindow

Click UnityEditor.InspectorWindow

Click UnityEditor.InspectorWindow

Click UnityEditor.InspectorWindow

Click UnityEditor.InspectorWindow

Click UnityEditor.InspectorWindow

Click UnityEditor.InspectorWindow

Click UnityEditor.InspectorWindow

Click UnityEditor.InspectorWindow

Click UnityEditor.InspectorWindow

Click PlayerManagerDemo

Click UnityEditor.InspectorWindow

Click UnityEditor.InspectorWindow

Click green highlight

Click UnityEditor.InspectorWindow

Click UnityEditor.InspectorWindow

Click UnityEditor.PopupWindow

Click UnityEditor.InspectorWindow

Click UnityEditor.InspectorWindow

Click UnityEditor.PopupWindow

Click UnityEditor.InspectorWindow

Click UnityEditor.InspectorWindow

Click UnityEditor.InspectorWindow

Click UnityEditor.InspectorWindow

Click UnityEditor.InspectorWindow

Click UnityEditor.InspectorWindow

Click UnityEditor.InspectorWindow

Click UnityEditor.InspectorWindow

Click UnityEditor.InspectorWindow

Click UnityEditor.InspectorWindow

Click UnityEditor.SceneHierarchyWindow

Click UnityEditor.InspectorWindow

Click UnityEditor.InspectorWindow

Click DisplayFabSystem

Click ExecuteEventList ()

Click UnityEditor.InspectorWindow

That's it. You're done.

DisplayFab Instantiator: Overview

DisplayFab Instantiator allows you to quickly populate data into a list, from an array or a list. You can use it, for instance, to populate a scrollable panel with a list of data elements, to display high score tables, to populate a drop-down lists and more.


How to use a DisplayFab Instantiator

To use a DisplayFab Instantiator, you will first need to setup the display target and sources for one template item, that will be used as a guideline to populate more items. You will add the DisplayFabSystem component on a template item. You will specify an array as a source on the DisplayFabSystem component, and expose the array's accessor/indexer as an 'Exposed Variable'.

This is a screenshot from Example Tutorial 2 Scene that shows an array as the source. Note that the array's indexer is 'Exposed'.


DisplayFab Instantiator Parameters

This is a screenshot from Example Tutorial 2 Scene.
Parameter Description
Selected DisplayFab Prefab/Template This is a prefab item or a template that contains a DisplayFabSystem component with all link-ups setup. It could also be a non-prefab template.
Selected Parent Container This is the GameObject under which the instantiated items will be populated.
Selected Iterator EV (Exposed Variable) Click 'Pick' button to select or change the Iterator Exposed Variable. If you exposed an array/list's indexer/iterator in the template item, it will be available to pick up here. The Instantiator will loop basically iterate through that particular array between the ranges specified below.
Start Range Index This is the start range index from which you want to pull the data from. If you want to start pulling data from the 0th index, then enter 0.
End Range Index If you want to explicitly specify an end index, specify here. Or see below
Get End Range from DisplayFab If you want to loop all the way to the end of the array, check this option. The end range index will automatically be chosen from the array.
Use Delay? By default, the instantiator populates the entire range all at once. If you want to instead populate each array index after some delay, check this and specify the delay time (in seconds)
Retain DisplayFab Component Once Done? With effect from v1.2.0, this option is true by default. By default, the DisplayFab component on the populated/instantiated item is destroyed once the item is populated,as you don't require the DisplayFab Component after population(in most cases). Choosing this option will retain the DisplayFab Component. You will need to retain the DisplayFab component for instance, if you wish to share the index with another target (using DisplayFabShareInteger Component)
Instantiate At Start? If checked, the Instantiator will instantiate/populate the above ranges right at Start of the scene. If this is not checked, you will have to manually call the Instantiator to start the instantiation process (either by SendMessage("Instantiate"), or by calling the DisplayFabInstantiator.Instantiate() function by code)
Use Delay Start? use this to delay the instantiation by X seconds at start. The instantiator will execute at start but only after the specified delay (in seconds).
Retain Instantiator Once Done? With effect from v1.1.3, this option is true by default By default, the DisplayFabInstantiator component is destroyed once the the job is done. population(in most cases). Choosing this option will retain the DisplayFabInstantiator Component. This should be done, for instance, if you want to repeatedly populate something.
Share Instantiated Index? Shares the instantiated index value by setting the DisplayFabShareInteger's 'value' field to the instantiated index value. Note: Your prefab or template item should have a DisplayFabShareInteger component on it. Otherwise, it will throw 'Null reference exception' error. (Update: Version 1.0.9 automatically adds DisplayFabShareInteger component if not already added.)
(v1.2.0+) Share Some Value (Integer Only) from DisplayFab on Instantiated Entry? Share any value from the prefab item/template's DisplayFab sources by setting the DisplayFabShareInteger's 'value' field to the your desired value from the DisplayFab sources.
(v1.2.0+) Force-Enable Instantiated Entry Visibility? This option is most useful when you inadverdently forget to enable visibility of your template item and/or forget to turn off your template item (or do not want to turn off the template item). By enabling this option, the Instantiator will automatically turn on the instantiated entries (even if the template item was turned off) and if there's a reference template item visible in the parent container, it will turn that off too. Note: This option does not currently work for prefabs as a template.
(v1.2.0+) Clear all instantiated entries in container upon next call? Selecting this option will clear all instantiated entries within the parent container when you call DisplayFabInstantiator.Instantiate() function. Typical usage: When you want to use the same UI list to display different data. If this option is not selected and still Instantiator is called repeatedly, then the parent container will retain the old instantiated entries while instantiating new ones.

DisplayFab Exposed Variable (EV) Executor: Overview

DisplayFab's Exposed Variable Executor basically lets you increment or decrement an 'Exposed Variable' on a DisplayFabSystem component.

You'd normally use an Exposed Variable to pull data from a particular index of an array/list when you click a button (could be a navigating button to change a page, for instance). By using Exposed Variables, you can create panels that display data from different indices of an array.

How to Add DisplayFab Exposed Variable Executor

You will find the DisplayFabExposedVariableExecutor under DisplayFab-> Modules. To use the EV Executor, you'll also need a DisplayFabSystem component setup with the link-ups, and an array indexer/accessor/iterator marked as 'Exposed Variable'.

DisplayFab EV Executor Parameters

This is a screenshot of an ExposedVariable Executor from the How-to-examples folder in the DisplayFab Demo
Parameter Description
Selected DisplayFab Comp. This is a GameObject that contains a DisplayFabSystem component with all link-ups setup. Once specified, you can change the component, by clicking 'Change'. However, you will have to re-pick any 'ExposedVariable' reference you may have picked earlier.
Pick Exposed Variable Click this to select or pick an Exposed Variable from the above referenced DisplayFabSystem component. In most use cases, this ExposedVariable is an array's indexer.
Selected EV Modifier You can either select Increment OR DECREMENT. Increment will increase the ExposedVariable by +1 and Decrement will decrease the ExposedVariable by -1.
What happens when you reach 0 or end of an array? The ExposedVariable's settings define what happens when you reach the extents. It could either be limited to 'Stay within Range', or be 'Wrapped-Around'.To learn more about these, refer to the Array Selector Popup Options.

DisplayFab Event Executors

Publish Status: Pending

Version 1.2.0: Major Update

DisplayFab Instantiator:
  • Instantiator can now expose any INTEGER value from a DisplayFab Source. Previously, you were only allowed to expose the index of the instantiated entry only.
  • Added support for Instantiator to clear up previously instantiated entries.
  • Added 'Force-enable instantiated entry visibility'. This will let you keep the 'template' disabled and keep the actual instantiated entries enabled.
DisplayFab Event Executor
  • Enabled support for 0-argument functions from displayfab event executors
  • Added support for Displayfab event executors of other arguments. Now you can pass arguments of types/basetypes of 'UnityEngine.Object', 'Component', MonoBehaviour, GameObject, Prefab, Texture.
  • Added double, char and Quaternion. Previously, only primitive types (int, floatenum, bool, string, Vector2,Vector3, Color,Texture2D were supported)
DisplayFab General:
  • Function arguments can now be retrieved from another source value within the same DisplayFab. (Tutorial 5 uses this technique.)
DisplayFab Console
  • Added a button to enable 'Debug Logs' in Unity's console window. Warning: This must be used for sending logs to the Developer for troubleshooting purposes only. Keeping this option ON will drastically slow down the performance.
Known issues
  • Changing event executor while in runtime, duplicates the event execution list. Therefore, making changes to the event execution list is disabled while running the game.

Version 1.1.1

  • New (Runtime): Event executors can now have a Direct Source mode's target GameObject retrieved at Runtime by Tag
  • New (Example): Added Tutorial Example 4 to demonstrate how to trigger data binding on one panel from another panel. When you click on a button on one panel (which itself was instantiated using DisplayFab Instantiator), you should be able to show specific information on that array's index. See example 4 for more info.

Version 1.1.0

  • New (Runtime): Event executors now have a 'Delay' feature associated with any execution that you want to run at 'Start'. You can set a delay. You have to click on the small 'down-arrow' button next to Start() checkbox under the executors to access the delay options.
  • Fixed: (Changed) Static fields, properties or methods (F.P.M.s) will now only be accessible from 'Static type' GameObject selection. Earlier, the system let you add static FPMs from any MonoBehaviour Component. To avoid any confusion, DisplayFabSystem will no longer let you select static FPMs from a MonoBehaviour Component. You can select any static field, property or method from static or non-static classes. Click the small 'down-arrow' to the left of the GameObject fields in the DisplayFabSystem to access GameObject Selector options.

Version 1.0.9

  • New (Editor):Experimental DisplayFab Console Window added to display logs, warnings and errors that originate from DisplayFab-related components. You can access it from Window -> DisplayFab Console.
  • New (Runtime): Added OnEndEdit Event executor for InputField
  • New (Runtime): (Experimental) - added 2 new Event Executors for non-event triggers - DSFOnStart and DSFOnEnable. You can now execute events at Start() & OnEnable().
  • Fixed: (Editor) 'Auto-Check for updates' feature would freeze Unity Editor for 1-2 minutes while it checks for updates. This feature has been disabled. Instead, you can check manually by clicking on the DisplayFab icon in the DisplayFabSystem component.
  • Fixed: (Editor) Event Executors: Changes made in runtime don't show up, forcing you to make changes in edit mode and switch back to play mode to see the changes. That has been fixed now, for rapid testing & debugging.
  • Fixed: (Editor) Event Executors: Assembly reload/Script compilation during runtime would lead Event executors to stop working. That has been fixed. 'The referenced script on this behaviour is missing' warning will still show up due to Script reload during runtime, but that is a harmless warning.
  • Fixed: (Runtime) DisplayFabSystem: Singleton, Static classes and PlayerPrefs used as a target won't get executed due to a typo. That's been fixed now. It had no impact on source types though.
  • Fixed: (Runtime) DisplayFabInstantiator's 'Share integer' option will throw a 'Null reference exception' error if a DisplayFabShareInteger component is not explicitly added to the template item. That has been fixed now - Instantiator will automatically add the component if not found, and set the value to the added component's value property.

Version 1.0.8

  • New Example: Added an example on how to use a data source from a Singleton Manager - i) inherited from a Generic Singleton MonoBehaviour class ii) a simple Singleton MonoBehaviour class.
  • Fixed: Source Type won't get registered properly when using 'Data Source' from a DisplayFab, in the Event Executors.

Version1.0.7

  • New Feature:: Data Sharing Feature (Experimental). Allows you to share data between an instantiated prefab item and other components.
    • i. Instantiator has a new property to expose the instantiated prefab's index using a DispFabShareInteger Component.
    • ii. DispFabShareInteger is the first Data Share Add-on Component added to DisplayFab to start with.
  • Multiple Bug Fixes.

Version 1.0.6

  • Fixed a bug where the Exposed Variable Executor won't automatically add the 'Event Executor' on a button.

Version 1.0.5

  • Fixed a Null error message that pops up with the 'Apply Changes' feature when DisplayFabSystem component is added to a prefab.
  • Fixed a critical bug that occurs when you click 'Pick This' button to try pick an EV from the Instantiator and ExposedVariable Executor Modules.

Version 1.0.2

  • Fixed: A Bug in Calling Exposed Variable in DisplayFabSystem
  • EventExecutors:: DisplayFab EventExecutors moved to DLL version for extended support.
  • EventExecutors:: Older EventExecutors left as it is for backward compatibility but marked as obsolete.
  • EventExecutors: Fixed a bug in 'Direct Source' option throwing error
  • EventExecutors: Fixed 'delete button' not showing up when 'not selected' event type is active.

Version 1.0.0

  • Initial Release

Before reporting an issue

Please try the following before reporting an issue:

  • Always use the latest version of your extension!
    Make sure you are using the latest version of DisplayFab by updating it via AssetStore
  • Do basic troubleshooting
    Have you checked whether your method, property or field is still valid? Did you add or remove arguments from a method?
  • Try to search through the discussion area
    Try to find a solution in the documentation or online by searching through the documentation section.

How to Contact Us

If you didn't find answer to your problem, please ask your question on the discussion page or send us an email to displayfab@techooka.com OR via Support section

IMPORTANT! For fast troubleshooting, please send us detailed information about the issue you're experiencing. Also send us a screenshot of the issue you are facing and/or copy/paste the log from the Console whenever it's possible.

DisplayFab Resources

Link You can find here...
The DisplayFab Website DisplayFab Website can be found at http://displayfab.techooka.com/
DisplayFab Documentation DisplayFab Documentation can be found here http://displayfab.techooka.com/documentation
Discussion and Q&A Area You can ask questions and participate in discussion at Unity DisplayFab Discussion Thread