Making a Checkbox Widget

The following discussion walks through the steps required to customize the graphics of the DemoToggleButton widget. We will create a checkbox-style widget, but you can use the same techniques to create any kind of two-state button. After creating a checkbox, we will hook up the button to the Render.enabled property of a game object so that the object is only shown when the button is checked.

Create a Scene for Constructing the Widget

First create a new project and scene for constructing the checkbox. You can save the end result as a prefab and use it in other projects. For convenience, we will start with the existing Widget scene because it already has a DemoToggleButton and camera setup. We will be revising this button object to create the checkbox-style button.

  1. Create a new project

  2. Import the latest Leap Motion Core Asset package.

  3. Locate and open the Widgets scene under Assets/LeapMotion/Widgets/Scenes.

  4. Rename the scene.

  5. Delete the DemoSlider object. We won’t be using it.

    At this point, your scene should look like this:

    unity/../../../images/unity/Widget_Checkbox_Start.png

Customize the Graphic elements of the Button

For our Checkbox, we are only going to use the OnGraphics and BotGraphics layers, replacing the existing prefab’s graphic elements with our own.

  1. Delete all the child graphic elements of the button’s graphics layers. Don’t delete the OffGraphics or MidGraphics containers themselves; these are required for the button to function.

  2. Add the button background:

    1. Select the BotGraphics object in the hierarchy.

    2. Add a 2D Object > Sprite.

    3. Rename the new Spite as “Background”.

    4. In the Sprite Renderer Inspector, click the object picker button next to the Sprite property to open the Select Sprite dialog. Choose the sprite named “Background” (which is a built-in sprite automatically included with Unity).

      Note: to use your own background, first create it as a bitmap and then import it as a Sprite asset into Unity.

  3. Add the check mark sprite as the OnGraphics element.

    1. Select the OnGraphics object in the hierarchy.
    2. Add a 2D Object > Sprite.
    3. Rename the new Spite as “Checkmark”.
    4. Set the Sprite property in the inspector panel to the sprite named “Checkmark”.
  4. Scale the button graphics up a bit to make the button an appropriate size:

    1. Select the Canvas element in the hierarchy.
    2. Set the x and y scale to 3.
  5. Add a label. Since we want the label text to be the same for both the on and off states of the button and do want the color to change, we will add the text to the BotGraphics layer.

    1. Select the BotGraphics object in the hierarchy.
    2. Add a UI > Text object.
    3. Rename the new Text object as “Label”.
    4. In the Inspector, set the text to “Label” and set the position and scale as desired.

Your button should look like the following (when checked on):

unity/../../../images/unity/Widget_Checkbox_Finished.png
  1. Rename the altered DemoToggleButton object to “Checkbox”.
  2. Save the Checkbox as a prefab by dragging it to the project panel.

Connect a Checkbox to the Property of a GameObject

In order to actually use the button, we need to bind it to a property of another object. For this tutorial, we will simply enable and disable the renderer of a cube object according to the state of the checkbox.

  1. Add a 3D Cube and position it so that you can see the cube in the Game view.

  2. Add a new script component to the cube and name it “CheckboxDataBinder”.

  3. Edit the CheckboxDataBinder script:

    1. Add the “using LMWidgets” declaration

    2. Change the class so that it extends DataBinderToggle rather than MonoBehavior.

      Note that there is a specific DataBinder class for each type of widget. These are defined at the end of the DataBinder.cs file.

    3. Add the override for setDataModel():

      override protected void setDataModel(bool value) {
         Renderer target = GetComponent<Renderer> ();
         if (target) {
              target.enabled = value;
          }
      }
      
    4. Add the override for GetCurrentData:

      override public bool GetCurrentData() {
          Renderer target = GetComponent<Renderer> ();
          if (target) {
              return target.enabled;
          } else {
              return false;
          }
      }
      
  4. Connect the widget to the data binding script.

    The DataBinding class requires that the widgets bound to your data model to be hooked up through the Inspector panel. To do this, drag the Button object, which has the ButtonDemoToggle script, to the Widgets property of your data binding script.

    1. Open the Checkbox object in the hierarchy, if necessary, so that the Button object is visible.

    2. Select the Cube object.

    3. Drag the Button object over the Widgets property. Release when the mouse cursor displays the green + icon.

      unity/../../../images/unity/Widget_AddToDataBinder.png

    The Button object is added to the Widgets list. You can add multiple widgets to the list and they will all reflect the value of the data model.