.. DO NOT EDIT. .. THIS FILE WAS AUTOMATICALLY GENERATED BY SPHINX-GALLERY. .. TO MAKE CHANGES, EDIT THE SOURCE PYTHON FILE: .. "auto_examples/07_ui/viz_tab_ui.py" .. LINE NUMBERS ARE GIVEN BELOW. .. only:: html .. note:: :class: sphx-glr-download-link-note :ref:`Go to the end ` to download the full example code. .. rst-class:: sphx-glr-example-title .. _sphx_glr_auto_examples_07_ui_viz_tab_ui.py: ===== TabUI ===== This example shows how to use :class:`fury.ui.TabUI` to organize multiple 2D UI panels inside the same window. Left click on a tab header to show its content. Left click on the active tab again to hide that tab's content. Right click on a tab header to collapse the tab UI. The whole widget can be dragged from the tab header or panel background. .. GENERATED FROM PYTHON SOURCE LINES 16-17 First, a bunch of imports. .. GENERATED FROM PYTHON SOURCE LINES 17-22 .. code-block:: Python from fury.ui import Disk2D, LineSlider2D, Rectangle2D, TabUI, TextBlock2D from fury.window import Scene, ShowManager .. GENERATED FROM PYTHON SOURCE LINES 23-24 Creating a Scene. .. GENERATED FROM PYTHON SOURCE LINES 24-28 .. code-block:: Python scene = Scene() .. GENERATED FROM PYTHON SOURCE LINES 29-30 Create a TabUI with three tabs. The first tab is visible on startup. .. GENERATED FROM PYTHON SOURCE LINES 30-42 .. code-block:: Python tab_ui = TabUI( position=(80, 80), size=(420, 320), tab_titles=["Shapes", "Slider", "Notes"], startup_tab_id=0, font_size=16, draggable=True, active_color=(0.95, 0.95, 1.0), inactive_color=(0.45, 0.48, 0.56), ) .. GENERATED FROM PYTHON SOURCE LINES 43-44 Add content to the first tab. .. GENERATED FROM PYTHON SOURCE LINES 44-59 .. code-block:: Python rect = Rectangle2D(size=(90, 70), color=(0.9, 0.25, 0.35)) disk = Disk2D(outer_radius=45, color=(0.2, 0.75, 0.95)) caption = TextBlock2D( text="The first tab contains simple 2D shapes.", size=(340, 40), color=(1, 1, 1), font_size=16, ) tab_ui.add_element(0, rect, (45, 75)) tab_ui.add_element(0, disk, (285, 110), anchor="center") tab_ui.add_element(0, caption, (40, 205)) .. GENERATED FROM PYTHON SOURCE LINES 60-61 Add content to the second tab. .. GENERATED FROM PYTHON SOURCE LINES 61-81 .. code-block:: Python slider_label = TextBlock2D( text="A LineSlider2D can live inside a tab content panel.", size=(350, 40), color=(1, 1, 1), font_size=16, ) slider = LineSlider2D( initial_value=35, min_value=0, max_value=100, length=300, orientation="horizontal", text_template="Value: {value:.0f}", ) tab_ui.add_element(1, slider_label, (35, 65)) tab_ui.add_element(1, slider, (55, 150)) .. GENERATED FROM PYTHON SOURCE LINES 82-83 Add content to the third tab. .. GENERATED FROM PYTHON SOURCE LINES 83-98 .. code-block:: Python notes = TextBlock2D( text=( "TabUI groups several UI panels behind tab headers.\n" "Use TabUI.add_element(tab_index, element, coords)\n" "to place UI components in a specific tab." ), size=(360, 150), color=(1, 1, 1), font_size=15, ) tab_ui.add_element(2, notes, (35, 70)) .. GENERATED FROM PYTHON SOURCE LINES 99-101 Add a status text outside the TabUI. The callbacks update this text when the active tab changes or the TabUI is collapsed. .. GENERATED FROM PYTHON SOURCE LINES 101-128 .. code-block:: Python status = TextBlock2D( text="Active tab: Shapes", position=(80, 430), size=(420, 35), color=(1, 1, 1), font_size=16, ) def update_status(ui): """Update status text after selecting a tab.""" if ui.active_tab_idx is None: status.message = "TabUI collapsed" else: status.message = f"Active tab: {ui.tabs[ui.active_tab_idx].title}" def collapse_status(ui): """Update status text after collapsing the TabUI.""" status.message = "TabUI collapsed" tab_ui.on_change = update_status tab_ui.on_collapse = collapse_status .. GENERATED FROM PYTHON SOURCE LINES 129-132 TabUI can also use an accordion layout. In this mode each tab title spans the widget width. The active tab expands below its title while the other titles remain visible below the expanded content. .. GENERATED FROM PYTHON SOURCE LINES 132-190 .. code-block:: Python accordion_tab_ui = TabUI( position=(560, 80), size=(340, 320), tab_titles=["Info", "Color", "Help"], startup_tab_id=0, tab_bar_pos="accordion", font_size=15, draggable=True, active_color=(0.95, 0.95, 1.0), inactive_color=(0.45, 0.48, 0.56), ) accordion_info = TextBlock2D( text="The active tab expands below its title.", size=(280, 80), color=(1, 1, 1), font_size=15, ) accordion_square = Rectangle2D(size=(90, 90), color=(0.2, 0.8, 0.45)) accordion_help = TextBlock2D( text="Other tab titles stay visible\nbelow the expanded content.", size=(260, 90), color=(1, 1, 1), font_size=15, ) accordion_tab_ui.add_element(0, accordion_info, (30, 45)) accordion_tab_ui.add_element(1, accordion_square, (125, 55)) accordion_tab_ui.add_element(2, accordion_help, (40, 45)) accordion_status = TextBlock2D( text="Accordion active tab: Info", position=(560, 430), size=(340, 35), color=(1, 1, 1), font_size=16, ) def update_accordion_status(ui): """Update status text after selecting an accordion tab.""" if ui.active_tab_idx is None: accordion_status.message = "Accordion TabUI collapsed" else: title = ui.tabs[ui.active_tab_idx].title accordion_status.message = f"Accordion active tab: {title}" def collapse_accordion_status(ui): """Update status text after collapsing the accordion TabUI.""" accordion_status.message = "Accordion TabUI collapsed" accordion_tab_ui.on_change = update_accordion_status accordion_tab_ui.on_collapse = collapse_accordion_status .. GENERATED FROM PYTHON SOURCE LINES 191-192 The tab bar can also be placed at the bottom of the widget. .. GENERATED FROM PYTHON SOURCE LINES 192-243 .. code-block:: Python bottom_tab_ui = TabUI( position=(80, 500), size=(420, 300), tab_titles=["Bottom Tab 1", "Bottom Tab 2"], startup_tab_id=0, tab_bar_pos="bottom", font_size=15, draggable=True, active_color=(0.95, 0.95, 1.0), inactive_color=(0.45, 0.48, 0.56), ) bottom_text = TextBlock2D( text="This TabUI uses tab_bar_pos='bottom'.", size=(330, 45), color=(1, 1, 1), font_size=15, ) bottom_rect = Rectangle2D(size=(120, 80), color=(0.9, 0.65, 0.2)) bottom_tab_ui.add_element(0, bottom_text, (40, 55)) bottom_tab_ui.add_element(1, bottom_rect, (145, 65)) bottom_status = TextBlock2D( text="Bottom active tab: Bottom Tab 1", position=(80, 820), size=(420, 35), color=(1, 1, 1), font_size=16, ) def update_bottom_status(ui): """Update status text after selecting a bottom tab.""" if ui.active_tab_idx is None: bottom_status.message = "Bottom TabUI collapsed" else: title = ui.tabs[ui.active_tab_idx].title bottom_status.message = f"Bottom active tab: {title}" def collapse_bottom_status(ui): """Update status text after collapsing the bottom TabUI.""" bottom_status.message = "Bottom TabUI collapsed" bottom_tab_ui.on_change = update_bottom_status bottom_tab_ui.on_collapse = collapse_bottom_status .. GENERATED FROM PYTHON SOURCE LINES 244-247 The tab bar can also be vertical. In this mode the tab headers stack along the left or right side of the widget and the content panel uses the remaining horizontal space. .. GENERATED FROM PYTHON SOURCE LINES 247-300 .. code-block:: Python vertical_tab_ui = TabUI( position=(560, 500), size=(340, 300), tab_titles=["Left Side Tab 1", "Left Side Tab 2", "Left Side Tab 3"], startup_tab_id=0, tab_bar_pos="left", font_size=14, draggable=True, active_color=(0.95, 0.95, 1.0), inactive_color=(0.45, 0.48, 0.56), ) vertical_text = TextBlock2D( text="This TabUI uses tab_bar_pos='left'.", size=(250, 45), color=(1, 1, 1), font_size=15, ) vertical_disk = Disk2D(outer_radius=42, color=(0.55, 0.35, 0.95)) vertical_rect = Rectangle2D(size=(105, 75), color=(0.15, 0.8, 0.75)) vertical_tab_ui.add_element(0, vertical_text, (35, 60)) vertical_tab_ui.add_element(1, vertical_disk, (150, 120), anchor="center") vertical_tab_ui.add_element(2, vertical_rect, (105, 90)) vertical_status = TextBlock2D( text="Vertical active tab: Left Side Tab 1", position=(560, 820), size=(340, 35), color=(1, 1, 1), font_size=16, ) def update_vertical_status(ui): """Update status text after selecting a vertical tab.""" if ui.active_tab_idx is None: vertical_status.message = "Vertical TabUI collapsed" else: title = ui.tabs[ui.active_tab_idx].title vertical_status.message = f"Vertical active tab: {title}" def collapse_vertical_status(ui): """Update status text after collapsing the vertical TabUI.""" vertical_status.message = "Vertical TabUI collapsed" vertical_tab_ui.on_change = update_vertical_status vertical_tab_ui.on_collapse = collapse_vertical_status .. GENERATED FROM PYTHON SOURCE LINES 301-302 Now that all elements have been initialized, add them to the scene. .. GENERATED FROM PYTHON SOURCE LINES 302-313 .. code-block:: Python scene.add(tab_ui) scene.add(status) scene.add(accordion_tab_ui) scene.add(accordion_status) scene.add(bottom_tab_ui) scene.add(bottom_status) scene.add(vertical_tab_ui) scene.add(vertical_status) .. GENERATED FROM PYTHON SOURCE LINES 314-315 Starting the ShowManager. .. GENERATED FROM PYTHON SOURCE LINES 315-323 .. code-block:: Python current_size = (980, 900) show_manager = ShowManager( scene=scene, size=current_size, title="FURY TabUI Example", ) show_manager.start() .. _sphx_glr_download_auto_examples_07_ui_viz_tab_ui.py: .. only:: html .. container:: sphx-glr-footer sphx-glr-footer-example .. container:: sphx-glr-download sphx-glr-download-jupyter :download:`Download Jupyter notebook: viz_tab_ui.ipynb ` .. container:: sphx-glr-download sphx-glr-download-python :download:`Download Python source code: viz_tab_ui.py ` .. container:: sphx-glr-download sphx-glr-download-zip :download:`Download zipped: viz_tab_ui.zip ` .. only:: html .. rst-class:: sphx-glr-signature `Gallery generated by Sphinx-Gallery `_