Merge pull request #424 from Diegiwg/knob-element

QKnob

nicegui/elements/icon.py

@@ -1,16 +1,31 @@
+from typing import Optional
+
 from ..element import Element
 
 
 class Icon(Element):
 
-    def __init__(self, name: str) -> None:
+    def __init__(self,
+                 name: str,
+                 *,
+                 size: Optional[str] = None,
+                 color: Optional[str] = None,
+                 ) -> None:
         """Icon
 
-        Displays an icon.
+        This element is based on Quasar's `QIcon <https://quasar.dev/vue-components/icon>`_ component.
 
         `Here <https://material.io/icons/>`_ is a reference of possible names.
 
-        :param name: the name of the icon
+        :param name: name of the icon
+        :param size: size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl), examples: 16px, 2rem
+        :param color: color name for component, examples: primary, teal-10
         """
         super().__init__('q-icon')
         self._props['name'] = name
+
+        if size:
+            self._props['size'] = size
+
+        if color:
+            self._props['color'] = color

nicegui/elements/knob.py

@@ -0,0 +1,56 @@
+from typing import Optional
+
+from .label import Label
+from .mixins.value_element import ValueElement
+
+
+class Knob(ValueElement):
+
+    def __init__(self,
+                 value: float = 0.0,
+                 *,
+                 min: float = 0.0,
+                 max: float = 1.0,
+                 step: float = 0.01,
+                 color: Optional[str] = 'primary',
+                 center_color: Optional[str] = None,
+                 track_color: Optional[str] = None,
+                 size: Optional[str] = None,
+                 show_value: bool = False,
+                 ) -> None:
+        """Knob
+
+        This element is based on Quasar's `QKnob <https://quasar.dev/vue-components/knob>`_ component.
+        The element is used to take a number input from the user through mouse/touch panning.
+
+        :param value: the initial value (default: 0.0)
+        :param min: the minimum value (default: 0.0)
+        :param max: the maximum value (default: 1.0)
+        :param step: the step size (default: 0.01)
+        :param color: color name for component, examples: primary, teal-10 (default: "primary")
+        :param center_color: color name for the center part of the component, examples: primary, teal-10
+        :param track_color: color name for the track of the component, examples: primary, teal-10
+        :param size: size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl), examples: 16px, 2rem
+        :param show_value: whether to show the value as text
+        """
+        super().__init__(tag='q-knob', value=value, on_value_change=None, throttle=0.05)
+
+        self._props['min'] = min
+        self._props['max'] = max
+        self._props['step'] = step
+        self._props['color'] = color
+        self._props['show-value'] = True  # NOTE: enable default slot, e.g. for nested icon
+
+        if center_color:
+            self._props['center-color'] = center_color
+
+        if track_color:
+            self._props['track-color'] = track_color
+
+        if size:
+            self._props['size'] = size
+
+        self.label: Optional[Label] = None
+        if show_value:
+            with self:
+                self.label = Label().bind_text_from(self, 'value')

nicegui/ui.py

@@ -26,6 +26,7 @@ from .elements.input import Input as input
 from .elements.interactive_image import InteractiveImage as interactive_image
 from .elements.joystick import Joystick as joystick
 from .elements.keyboard import Keyboard as keyboard
+from .elements.knob import Knob as knob
 from .elements.label import Label as label
 from .elements.link import Link as link
 from .elements.link import LinkTarget as link_target

website/reference.py

@@ -155,6 +155,13 @@ def create_full(menu: ui.element) -> None:
                   on_change=lambda e: result.set_text(f'you entered: {e.value}'))
         result = ui.label()
 
+    @example(ui.knob, menu)
+    def knob_example():
+        knob = ui.knob(0.3, show_value=True)
+
+        with ui.knob(color='orange', track_color='grey-2').bind_value(knob, 'value'):
+            ui.icon('volume_up')
+
     @example(ui.color_input, menu)
     def color_input_example():
         label = ui.label('Change my color!')