.. _sphx_glr_auto_examples_07_ui:

User Interface Elements
-----------------------

These tutorials show how to create user interfaces elements.



.. raw:: html

    <div class="sphx-glr-thumbnails">

.. thumbnail-parent-div-open

.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example shows how to use the UI API. We will demonstrate how to draw some geometric shapes from FURY UI elements.">

.. only:: html

  .. image:: /auto_examples/07_ui/images/thumb/sphx_glr_viz_shapes_thumb.png
    :alt:

  :ref:`sphx_glr_auto_examples_07_ui_viz_shapes.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Simple Shapes</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example shows how to use the DrawPanel UI. We will demonstrate how to create Various shapes and transform them.">

.. only:: html

  .. image:: /auto_examples/07_ui/images/thumb/sphx_glr_viz_drawpanel_thumb.png
    :alt:

  :ref:`sphx_glr_auto_examples_07_ui_viz_drawpanel.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">DrawPanel</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example shows how to create a card.">

.. only:: html

  .. image:: /auto_examples/07_ui/images/thumb/sphx_glr_viz_card_thumb.png
    :alt:

  :ref:`sphx_glr_auto_examples_07_ui_viz_card.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Card</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example shows how to use the UI API. We will demonstrate how to create a SpinBox UI.">

.. only:: html

  .. image:: /auto_examples/07_ui/images/thumb/sphx_glr_viz_spinbox_thumb.png
    :alt:

  :ref:`sphx_glr_auto_examples_07_ui_viz_spinbox.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">SpinBox UI</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example shows how to use the Combobox UI. We will demonstrate how to create ComboBoxes for selecting colors for a label.">

.. only:: html

  .. image:: /auto_examples/07_ui/images/thumb/sphx_glr_viz_combobox_thumb.png
    :alt:

  :ref:`sphx_glr_auto_examples_07_ui_viz_combobox.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">ComboBox</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example shows how to use the UI API. We will create a list some geometric shapes from FURY UI elements.">

.. only:: html

  .. image:: /auto_examples/07_ui/images/thumb/sphx_glr_viz_ui_listbox_thumb.png
    :alt:

  :ref:`sphx_glr_auto_examples_07_ui_viz_ui_listbox.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">ListBox</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example shows how to place different UI elements in different Layouts. The Layouts used here is GridLayout (with different cell shapes).">

.. only:: html

  .. image:: /auto_examples/07_ui/images/thumb/sphx_glr_viz_layout_thumb.png
    :alt:

  :ref:`sphx_glr_auto_examples_07_ui_viz_layout.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Using Layouts with different UI elements</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example shows how to use the UI API. We will demonstrate how to create a Sphere and control its color using radio buttons.">

.. only:: html

  .. image:: /auto_examples/07_ui/images/thumb/sphx_glr_viz_radio_buttons_thumb.png
    :alt:

  :ref:`sphx_glr_auto_examples_07_ui_viz_radio_buttons.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Sphere Color Control using Radio Buttons</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example shows how to use the UI API. We will demonstrate how to create panel having buttons with callbacks.">

.. only:: html

  .. image:: /auto_examples/07_ui/images/thumb/sphx_glr_viz_buttons_thumb.png
    :alt:

  :ref:`sphx_glr_auto_examples_07_ui_viz_buttons.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Buttons & Text</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example shows how to create a card and use a sprite sheet to update the image in the card.">

.. only:: html

  .. image:: /auto_examples/07_ui/images/thumb/sphx_glr_viz_card_sprite_sheet_thumb.png
    :alt:

  :ref:`sphx_glr_auto_examples_07_ui_viz_card_sprite_sheet.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Card</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example shows how to use the UI API. We will demonstrate how to create a cube and control with sliders.">

.. only:: html

  .. image:: /auto_examples/07_ui/images/thumb/sphx_glr_viz_ui_slider_thumb.png
    :alt:

  :ref:`sphx_glr_auto_examples_07_ui_viz_ui_slider.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Cube & Slider Control</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example shows how to use the CheckBox UI API. We will demonstrate how to create a cube, sphere, cone and arrow and control its color and visibility using checkboxes.">

.. only:: html

  .. image:: /auto_examples/07_ui/images/thumb/sphx_glr_viz_check_boxes_thumb.png
    :alt:

  :ref:`sphx_glr_auto_examples_07_ui_viz_check_boxes.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Figure and Color Control using Check boxes and Radio Buttons</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example shows how to use the Tab UI. We will demonstrate how to create Tabs for:">

.. only:: html

  .. image:: /auto_examples/07_ui/images/thumb/sphx_glr_viz_tab_thumb.png
    :alt:

  :ref:`sphx_glr_auto_examples_07_ui_viz_tab.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Tab UI</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example shows how to use the UI API. We will demonstrate how to create several FURY UI elements, then use a list box to toggle which element is shown.">

.. only:: html

  .. image:: /auto_examples/07_ui/images/thumb/sphx_glr_viz_ui_thumb.png
    :alt:

  :ref:`sphx_glr_auto_examples_07_ui_viz_ui.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">User Interfaces</div>
    </div>


.. thumbnail-parent-div-close

.. raw:: html

    </div>


.. toctree::
   :hidden:

   /auto_examples/07_ui/viz_shapes
   /auto_examples/07_ui/viz_drawpanel
   /auto_examples/07_ui/viz_card
   /auto_examples/07_ui/viz_spinbox
   /auto_examples/07_ui/viz_combobox
   /auto_examples/07_ui/viz_ui_listbox
   /auto_examples/07_ui/viz_layout
   /auto_examples/07_ui/viz_radio_buttons
   /auto_examples/07_ui/viz_buttons
   /auto_examples/07_ui/viz_card_sprite_sheet
   /auto_examples/07_ui/viz_ui_slider
   /auto_examples/07_ui/viz_check_boxes
   /auto_examples/07_ui/viz_tab
   /auto_examples/07_ui/viz_ui