.. DO NOT EDIT.
.. THIS FILE WAS AUTOMATICALLY GENERATED BY SPHINX-GALLERY.
.. TO MAKE CHANGES, EDIT THE SOURCE PYTHON FILE:
.. "auto_examples/07_ui/viz_layout.py"
.. LINE NUMBERS ARE GIVEN BELOW.

.. only:: html

    .. note::
        :class: sphx-glr-download-link-note

        :ref:`Go to the end <sphx_glr_download_auto_examples_07_ui_viz_layout.py>`
        to download the full example code

.. rst-class:: sphx-glr-example-title

.. _sphx_glr_auto_examples_07_ui_viz_layout.py:


========================================
Using Layouts with different UI elements
========================================

This example shows how to place different UI elements in different Layouts.
The Layouts used here is GridLayout (with different cell shapes).

First, let's import fury.

.. GENERATED FROM PYTHON SOURCE LINES 11-14

.. code-block:: Python


    import fury








.. GENERATED FROM PYTHON SOURCE LINES 15-18

We create some panels and then we arrange them in a grid fashion

First, we create some panels with different sizes/positions

.. GENERATED FROM PYTHON SOURCE LINES 18-23

.. code-block:: Python


    panel_1 = fury.ui.Panel2D(size=(200, 200), color=(0.4, 0.6, 0.3), position=(100, 100))

    panel_2 = fury.ui.Panel2D(size=(250, 250), color=(0.8, 0.3, 0.5), position=(150, 150))








.. GENERATED FROM PYTHON SOURCE LINES 24-25

Now we create two listboxes

.. GENERATED FROM PYTHON SOURCE LINES 25-30

.. code-block:: Python


    listbox_1 = fury.ui.ListBox2D(size=(150, 150), values=["First", "Second", "Third"])

    listbox_2 = fury.ui.ListBox2D(size=(250, 250), values=["First", "Second", "Third"])








.. GENERATED FROM PYTHON SOURCE LINES 31-32

Now we create two different UI i.e. a slider and a listbox

.. GENERATED FROM PYTHON SOURCE LINES 32-36

.. code-block:: Python


    slider = fury.ui.LineSlider2D(length=150)
    listbox = fury.ui.ListBox2D(size=(150, 150), values=["First", "Second", "Third"])








.. GENERATED FROM PYTHON SOURCE LINES 37-38

Now, we create grids with different shapes

.. GENERATED FROM PYTHON SOURCE LINES 38-46

.. code-block:: Python


    rect_grid = fury.layout.GridLayout(position_offset=(0, 0, 0))
    square_grid = fury.layout.GridLayout(cell_shape="square", position_offset=(0, 300, 0))
    diagonal_grid = fury.layout.GridLayout(
        cell_shape="diagonal", position_offset=(0, 600, 0)
    )









.. GENERATED FROM PYTHON SOURCE LINES 47-48

Applying the grid to the ui elements

.. GENERATED FROM PYTHON SOURCE LINES 48-65

.. code-block:: Python


    rect_grid.apply([panel_1, panel_2])
    square_grid.apply([listbox_1, listbox_2])
    diagonal_grid.apply([slider, listbox])

    current_size = (1500, 1500)
    show_manager = fury.window.ShowManager(size=current_size, title="FURY UI Layout")

    show_manager.scene.add(panel_1, panel_2, listbox_1, listbox_2, slider, listbox)

    # To interact with the UI, set interactive = True
    interactive = False

    if interactive:
        show_manager.start()

    fury.window.record(scene=show_manager.scene, out_path="ui_layout.png", size=(400, 400))



.. image-sg:: /auto_examples/07_ui/images/sphx_glr_viz_layout_001.png
   :alt: viz layout
   :srcset: /auto_examples/07_ui/images/sphx_glr_viz_layout_001.png
   :class: sphx-glr-single-img






.. rst-class:: sphx-glr-timing

   **Total running time of the script:** (0 minutes 0.073 seconds)


.. _sphx_glr_download_auto_examples_07_ui_viz_layout.py:

.. only:: html

  .. container:: sphx-glr-footer sphx-glr-footer-example

    .. container:: sphx-glr-download sphx-glr-download-jupyter

      :download:`Download Jupyter notebook: viz_layout.ipynb <viz_layout.ipynb>`

    .. container:: sphx-glr-download sphx-glr-download-python

      :download:`Download Python source code: viz_layout.py <viz_layout.py>`


.. only:: html

 .. rst-class:: sphx-glr-signature

    `Gallery generated by Sphinx-Gallery <https://sphinx-gallery.github.io>`_