Adding SpinBoxUI to the UI module

docs/tutorials/02_ui/viz_spinbox.py

@@ -0,0 +1,63 @@
+# -*- coding: utf-8 -*-
+"""
+===========
+SpinBox UI
+===========
+
+This example shows how to use the UI API. We will demonstrate how to create
+a SpinBox UI.
+
+First, some imports.
+"""
+from fury import actor, ui, window
+import numpy as np
+from fury.data import read_viz_icons, fetch_viz_icons
+
+##############################################################################
+# First we need to fetch some icons that are included in FURY.
+
+fetch_viz_icons()
+
+###############################################################################
+# Let's create a Cone.
+
+cone = actor.cone(np.random.rand(1, 3), np.random.rand(1, 3), (1, 1, 1),
+                  np.random.rand(1))
+
+###############################################################################
+# Creating the SpinBox UI.
+
+spinbox = ui.SpinBox(position=(200, 100), size=(300, 100), min_val=0,
+                     max_val=360, initial_val=180, step=10)
+
+###############################################################################
+# Now that all the elements have been initialised, we add them to the show
+# manager.
+
+current_size = (800, 800)
+show_manager = window.ShowManager(size=current_size,
+                                  title="FURY SpinBox Example")
+
+show_manager.scene.add(cone)
+show_manager.scene.add(spinbox)
+
+###############################################################################
+# Using the on_change hook to rotate the scene.
+
+
+def rotate_cone(spinbox):
+    show_manager.scene.azimuth(spinbox.value)
+
+
+spinbox.on_change = rotate_cone
+
+###############################################################################
+# Starting the ShowManager.
+
+interactive = False
+
+if interactive:
+    show_manager.start()
+
+window.record(show_manager.scene, size=current_size,
+              out_path="viz_spinbox.png")

fury/data/files/test_ui_spinbox.json

@@ -0,0 +1 @@
+{"CharEvent": 4, "MouseMoveEvent": 347, "KeyPressEvent": 4, "KeyReleaseEvent": 4, "LeftButtonPressEvent": 43, "LeftButtonReleaseEvent": 43, "RightButtonPressEvent": 0, "RightButtonReleaseEvent": 0, "MiddleButtonPressEvent": 0, "MiddleButtonReleaseEvent": 0}

fury/ui/elements.py

@@ -2,7 +2,8 @@
 
 __all__ = ["TextBox2D", "LineSlider2D", "LineDoubleSlider2D",
            "RingSlider2D", "RangeSlider", "Checkbox", "Option", "RadioButton",
-           "ComboBox2D", "ListBox2D", "ListBoxItem2D", "FileMenu2D"]
+           "ComboBox2D", "ListBox2D", "ListBoxItem2D", "FileMenu2D",
+           "SpinBox"]
 
 import os
 from collections import OrderedDict
@@ -3052,3 +3053,163 @@ def directory_click_callback(self, i_ren, _obj, listboxitem):
                 self.set_slot_colors()
         i_ren.force_render()
         i_ren.event.abort()
+
+
+class SpinBox(UI):
+    """SpinBox UI.
+    """
+
+    def __init__(self, position=(350, 400), size=(300, 100), padding=10,
+                 panel_color=(1, 1, 1), min_val=0, max_val=100,
+                 initial_val=50, step=1):
+        """Init this UI element.
+
+        Parameters
+        ----------
+        position : (float, float), optional
+            Absolute coordinates (x, y) of the lower-left corner of this
+            UI component.
+        size : (float, float), optional
+            Width and height in pixels of this UI component.
+        padding : float, optional
+            Distance between  and background.
+        bg_color : (float, float, float), optional
+            Background color of progress bar.
+        min_val: float, optional
+            Minimum value of SpinBoxUI.
+        max_val: float, optional
+            Maximum value of SpinBoxUI.
+        initial_val: float, optional
+            Initial value of SpinBoxUI.
+        step: float, optional
+            Step value of SpinBoxUI.
+        """
+        self.panel_size = size
+        self.padding = padding
+        self.panel_color = panel_color
+        self.min_val = min_val
+        self.max_val = max_val
+        self.value = initial_val
+        self.step = step
+
+        super(SpinBox, self).__init__(position)
+
+        self.resize(size)
+
+        self.on_change = lambda ui: None
+
+    def _setup(self):
+        """Setup this UI component.
+
+        Create the SpinBoxUI with Background (Panel2D) and InputBox (TextBox2D)
+        and Increment,Decrement Button (Button2D).
+        """
+        self.panel = Panel2D(size=self.panel_size, color=self.panel_color)
+
+        self.textbox = TextBox2D(width=10, height=2)
+        self.textbox.set_message(str(self.value))
+        self.increment_button = Button2D(
+            icon_fnames=[("up", read_viz_icons(fname="circle-up.png"))])
+        self.decrement_button = Button2D(
+            icon_fnames=[("down", read_viz_icons(fname="circle-down.png"))])
+
+        self.panel.add_element(self.textbox, (0, 0))
+        self.panel.add_element(self.increment_button, (0, 0))
+        self.panel.add_element(self.decrement_button, (0, 0))
+
+        # Adding button click callbacks
+        self.increment_button.on_left_mouse_button_pressed = \
+            self.increment_callback
+        self.decrement_button.on_left_mouse_button_pressed = \
+            self.decrement_callback
+
+    def resize(self, size):
+        """Resize SpinBox.
+
+        Parameters
+        ----------
+        size : (float, float)
+            SpinBox size(width, height) in pixels.
+        """
+        self.panel_size = size
+        self.textbox_size = (int(0.7 * size[0]), int(0.8 * size[1]))
+        self.button_size = (int(0.2 * size[0]), int(0.3 * size[1]))
+
+        self.panel.resize(size)
+        self.textbox.text.resize(self.textbox_size)
+        self.increment_button.resize(self.button_size)
+        self.decrement_button.resize(self.button_size)
+
+        textbox_pos = (self.padding, int((size[1] - self.textbox_size[1])/2))
+        inc_btn_pos = (size[0] - self.padding - self.button_size[0],
+                       int((1.5*size[1] - self.button_size[1])/2))
+        dec_btn_pos = (size[0] - self.padding - self.button_size[0],
+                       int((0.5*size[1] - self.button_size[1])/2))
+
+        self.panel.update_element(self.textbox, textbox_pos)
+        self.panel.update_element(self.increment_button, inc_btn_pos)
+        self.panel.update_element(self.decrement_button, dec_btn_pos)
+
+    def _get_actors(self):
+        """Get the actors composing this UI component."""
+        return self.panel.actors
+
+    def _add_to_scene(self, scene):
+        """Add all subcomponents or VTK props that compose this UI component.
+
+        Parameters
+        ----------
+        scene : Scene
+
+        """
+        self.panel.add_to_scene(scene)
+
+    def _get_size(self):
+        return self.panel.size
+
+    def _set_position(self, coords):
+        """Set the lower-left corner position of this UI component.
+
+        Parameters
+        ----------
+        coords: (float, float)
+            Absolute pixel coordinates (x, y).
+        """
+        self.panel.center = coords
+
+    def increment_callback(self, i_ren, _obj, _button):
+        self.increment()
+        i_ren.force_render()
+        i_ren.event.abort()
+
+    def decrement_callback(self, i_ren, _obj, _button):
+        self.decrement()
+        i_ren.force_render()
+        i_ren.event.abort()
+
+    @property
+    def value(self):
+        return self._value
+
+    @value.setter
+    def value(self, value):
+        if value > self.max_val:
+            self._value = self.max_val
+        elif value < self.min_val:
+            self._value = self.min_val
+        else:
+            self._value = value
+
+    def increment(self):
+        current_val = int(self.textbox.message)
+        self.value = current_val + self.step
+
+        self.textbox.set_message(str(self.value))
+        self.on_change(self)
+
+    def decrement(self):
+        current_val = int(self.textbox.message)
+        self.value = current_val - self.step
+
+        self.textbox.set_message(str(self.value))
+        self.on_change(self)

fury/ui/tests/test_elements.py

@@ -789,6 +789,36 @@ def test_ui_combobox_2d(interactive=False):
     npt.assert_equal((450, 210), combobox.drop_menu_size)
 
 
+def test_ui_spinbox(interactive=False):
+    filename = "test_ui_spinbox"
+    recording_filename = pjoin(DATA_DIR, filename + ".log.gz")
+    expected_events_counts_filename = pjoin(DATA_DIR, filename + ".json")
+
+    spinbox = ui.SpinBox(size=(300, 200), min_val=-20, max_val=10, step=2)
+
+    # Assign the counter callback to every possible event.
+    event_counter = EventCounter()
+    event_counter.monitor(spinbox)
+
+    current_size = (800, 800)
+    show_manager = window.ShowManager(
+        size=current_size, title="SpinBox UI Example")
+    show_manager.scene.add(spinbox)
+
+    if interactive:
+        show_manager.record_events_to_file(recording_filename)
+        print(list(event_counter.events_counts.items()))
+        event_counter.save(expected_events_counts_filename)
+
+    else:
+        show_manager.play_events_from_file(recording_filename)
+        expected = EventCounter.load(expected_events_counts_filename)
+        event_counter.check_counts(expected)
+
+    spinbox.resize((450, 200))
+    npt.assert_equal((315, 160), spinbox.textbox_size)
+    npt.assert_equal((90, 60), spinbox.button_size)
+
 def test_frame_rate_and_anti_aliasing():
     """Testing frame rate with/out anti-aliasing"""