.. 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, some imports.

.. GENERATED FROM PYTHON SOURCE LINES 11-15

.. code-block:: Python


    from fury import ui, window
    from fury.layout import GridLayout








.. GENERATED FROM PYTHON SOURCE LINES 16-19

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 19-24

.. code-block:: Python


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

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








.. GENERATED FROM PYTHON SOURCE LINES 25-26

Now we create two listboxes

.. GENERATED FROM PYTHON SOURCE LINES 26-31

.. code-block:: Python


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

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








.. GENERATED FROM PYTHON SOURCE LINES 32-33

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

.. GENERATED FROM PYTHON SOURCE LINES 33-37

.. code-block:: Python


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








.. GENERATED FROM PYTHON SOURCE LINES 38-39

Now, we create grids with different shapes

.. GENERATED FROM PYTHON SOURCE LINES 39-45

.. code-block:: Python


    rect_grid = GridLayout(position_offset=(0, 0, 0))
    square_grid = GridLayout(cell_shape='square', position_offset=(0, 300, 0))
    diagonal_grid = GridLayout(cell_shape='diagonal', position_offset=(0, 600, 0))









.. GENERATED FROM PYTHON SOURCE LINES 46-47

Applying the grid to the ui elements

.. GENERATED FROM PYTHON SOURCE LINES 47-64

.. 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 = 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()

    window.record(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.059 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>`_