.. DO NOT EDIT. .. THIS FILE WAS AUTOMATICALLY GENERATED BY SPHINX-GALLERY. .. TO MAKE CHANGES, EDIT THE SOURCE PYTHON FILE: .. "auto_examples/07_ui/viz_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_ui.py: =============== User Interfaces =============== 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. First, a bunch of imports. .. GENERATED FROM PYTHON SOURCE LINES 12-18 .. code-block:: Python import numpy as np from fury import actor, ui, window from fury.data import fetch_viz_icons, read_viz_icons .. GENERATED FROM PYTHON SOURCE LINES 19-23 Shapes ====== Let's start by drawing some simple shapes. First, a rectangle. .. GENERATED FROM PYTHON SOURCE LINES 23-26 .. code-block:: Python rect = ui.Rectangle2D(size=(200, 200), position=(400, 300), color=(1, 0, 1)) .. GENERATED FROM PYTHON SOURCE LINES 27-28 Then we can draw a solid circle, or disk. .. GENERATED FROM PYTHON SOURCE LINES 28-31 .. code-block:: Python disk = ui.Disk2D(outer_radius=50, center=(500, 500), color=(1, 1, 0)) .. GENERATED FROM PYTHON SOURCE LINES 32-33 Add an inner radius to make a ring. .. GENERATED FROM PYTHON SOURCE LINES 33-36 .. code-block:: Python ring = ui.Disk2D(outer_radius=50, inner_radius=45, center=(500, 300), color=(0, 1, 1)) .. GENERATED FROM PYTHON SOURCE LINES 37-42 Image ===== Now let's display an image. First we need to fetch some icons that are included in FURY. .. GENERATED FROM PYTHON SOURCE LINES 42-45 .. code-block:: Python fetch_viz_icons() .. GENERATED FROM PYTHON SOURCE LINES 46-47 Now we can create an image container. .. GENERATED FROM PYTHON SOURCE LINES 47-52 .. code-block:: Python img = ui.ImageContainer2D( img_path=read_viz_icons(fname="home3.png"), position=(450, 350) ) .. GENERATED FROM PYTHON SOURCE LINES 53-58 Panel with buttons and text =========================== Let's create some buttons and text and put them in a panel. First we'll make the panel. .. GENERATED FROM PYTHON SOURCE LINES 58-62 .. code-block:: Python panel = ui.Panel2D(size=(300, 150), color=(1, 1, 1), align="right") panel.center = (500, 400) .. GENERATED FROM PYTHON SOURCE LINES 63-65 Then we'll make two text labels and place them on the panel. Note that we specify the position with integer numbers of pixels. .. GENERATED FROM PYTHON SOURCE LINES 65-71 .. code-block:: Python text = ui.TextBlock2D(text="Click me") text2 = ui.TextBlock2D(text="Me too") panel.add_element(text, (50, 100)) panel.add_element(text2, (180, 100)) .. GENERATED FROM PYTHON SOURCE LINES 72-76 Then we'll create two buttons and add them to the panel. Note that here we specify the positions with floats. In this case, these are percentages of the panel size. .. GENERATED FROM PYTHON SOURCE LINES 76-93 .. code-block:: Python button_example = ui.Button2D( icon_fnames=[("square", read_viz_icons(fname="stop2.png"))] ) icon_files = [] icon_files.append(("down", read_viz_icons(fname="circle-down.png"))) icon_files.append(("left", read_viz_icons(fname="circle-left.png"))) icon_files.append(("up", read_viz_icons(fname="circle-up.png"))) icon_files.append(("right", read_viz_icons(fname="circle-right.png"))) second_button_example = ui.Button2D(icon_fnames=icon_files) panel.add_element(button_example, (0.25, 0.33)) panel.add_element(second_button_example, (0.66, 0.33)) .. GENERATED FROM PYTHON SOURCE LINES 94-95 We can add a callback to each button to perform some action. .. GENERATED FROM PYTHON SOURCE LINES 95-110 .. code-block:: Python def change_text_callback(i_ren, _obj, _button): text.message = "Clicked!" i_ren.force_render() def change_icon_callback(i_ren, _obj, _button): _button.next_icon() i_ren.force_render() button_example.on_left_mouse_button_clicked = change_text_callback second_button_example.on_left_mouse_button_pressed = change_icon_callback .. GENERATED FROM PYTHON SOURCE LINES 111-115 Cube and sliders ================ Let's add a cube to the scene and control it with sliders. .. GENERATED FROM PYTHON SOURCE LINES 115-124 .. code-block:: Python cube = actor.cube( centers=np.array([[15, 0, 0]]), colors=np.array([[0, 0, 1]]), scales=np.array([[20, 20, 20]]), directions=np.array([[0, 0, 1]]), ) .. GENERATED FROM PYTHON SOURCE LINES 125-126 Now we'll add three sliders: one circular and two linear. .. GENERATED FROM PYTHON SOURCE LINES 126-147 .. code-block:: Python ring_slider = ui.RingSlider2D( center=(740, 400), initial_value=0, text_template="{angle:5.1f}°" ) line_slider_x = ui.LineSlider2D( center=(500, 250), initial_value=0, min_value=-10, max_value=10, orientation="horizontal", ) line_slider_y = ui.LineSlider2D( center=(650, 350), initial_value=0, min_value=-10, max_value=10, orientation="vertical", ) .. GENERATED FROM PYTHON SOURCE LINES 148-149 We can use a callback to rotate the cube with the ring slider. .. GENERATED FROM PYTHON SOURCE LINES 149-160 .. code-block:: Python def rotate_cube(slider): angle = slider.value previous_angle = slider.previous_value rotation_angle = angle - previous_angle cube.RotateX(rotation_angle) ring_slider.on_change = rotate_cube .. GENERATED FROM PYTHON SOURCE LINES 161-163 Similarly, we can translate the cube with line sliders. We use global variables to keep track of the position of the cube. .. GENERATED FROM PYTHON SOURCE LINES 163-183 .. code-block:: Python cube_x = 0 cube_y = 0 def translate_cube_x(slider): global cube_x, cube_y cube_x = slider.value cube.SetPosition(cube_x, cube_y, 0) def translate_cube_y(slider): global cube_x, cube_y cube_y = slider.value cube.SetPosition(cube_x, cube_y, 0) line_slider_x.on_change = translate_cube_x line_slider_y.on_change = translate_cube_y .. GENERATED FROM PYTHON SOURCE LINES 184-189 Range Slider ============ Finally, we can add a range slider. This element is composed of two sliders. The first slider has two handles which let you set the range of the second. .. GENERATED FROM PYTHON SOURCE LINES 189-218 .. code-block:: Python range_slider_x = ui.RangeSlider( line_width=8, handle_side=25, range_slider_center=(450, 450), value_slider_center=(450, 350), length=150, min_value=0, max_value=10, font_size=18, range_precision=2, value_precision=4, shape="square", ) range_slider_y = ui.RangeSlider( line_width=8, handle_side=25, range_slider_center=(750, 400), value_slider_center=(650, 400), length=150, min_value=0, max_value=10, font_size=18, range_precision=2, value_precision=4, orientation="vertical", shape="square", ) .. GENERATED FROM PYTHON SOURCE LINES 219-226 Select menu ============ We just added many examples. If we showed them all at once, they would fill the screen. Let's make a simple menu to choose which example is shown. We'll first make a list of the examples. .. GENERATED FROM PYTHON SOURCE LINES 226-236 .. code-block:: Python examples = [ [rect], [disk, ring], [img], [panel], [ring_slider, line_slider_x, line_slider_y], [range_slider_x, range_slider_y], ] .. GENERATED FROM PYTHON SOURCE LINES 237-239 Now we'll make a function to hide all the examples. Then we'll call it so that none are shown initially. .. GENERATED FROM PYTHON SOURCE LINES 239-250 .. code-block:: Python def hide_all_examples(): for example in examples: for element in example: element.set_visibility(False) cube.SetVisibility(False) hide_all_examples() .. GENERATED FROM PYTHON SOURCE LINES 251-253 To make the menu, we'll first need to create a list of labels which correspond with the examples. .. GENERATED FROM PYTHON SOURCE LINES 253-263 .. code-block:: Python values = [ "Rectangle", "Disks", "Image", "Button Panel", "Line & Ring Slider", "Range Slider", ] .. GENERATED FROM PYTHON SOURCE LINES 264-265 Now we can create the menu. .. GENERATED FROM PYTHON SOURCE LINES 265-270 .. code-block:: Python listbox = ui.ListBox2D( values=values, position=(10, 300), size=(300, 200), multiselection=False ) .. GENERATED FROM PYTHON SOURCE LINES 271-273 Then we will use a callback to show the correct example when a label is clicked. .. GENERATED FROM PYTHON SOURCE LINES 273-286 .. code-block:: Python def display_element(): hide_all_examples() example = examples[values.index(listbox.selected[0])] for element in example: element.set_visibility(True) if values.index(listbox.selected[0]) == 4: cube.SetVisibility(True) listbox.on_change = display_element .. GENERATED FROM PYTHON SOURCE LINES 287-292 Show Manager ================================== Now that all the elements have been initialised, we add them to the show manager. .. GENERATED FROM PYTHON SOURCE LINES 292-313 .. code-block:: Python current_size = (800, 800) show_manager = window.ShowManager(size=current_size, title="FURY UI Example") show_manager.scene.add(listbox) for example in examples: for element in example: show_manager.scene.add(element) show_manager.scene.add(cube) show_manager.scene.reset_camera() show_manager.scene.set_camera(position=(0, 0, 200)) show_manager.scene.reset_clipping_range() show_manager.scene.azimuth(30) # To interact with the UI, set interactive = True interactive = False if interactive: show_manager.start() window.record(show_manager.scene, size=current_size, out_path="viz_ui.png") .. _sphx_glr_download_auto_examples_07_ui_viz_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_ui.ipynb ` .. container:: sphx-glr-download sphx-glr-download-python :download:`Download Python source code: viz_ui.py ` .. only:: html .. rst-class:: sphx-glr-signature `Gallery generated by Sphinx-Gallery `_