lib/m5ui: Add LVGL Spinner widget docs and example.

Signed-off-by: tinyu <[email protected]>

Author: Tinyu-Zhao

docs/en/m5ui/index.rst

@@ -77,6 +77,7 @@ Classes
     scale.rst
     slider.rst
     spinbox.rst
+    spinner.rst
     switch.rst
     textarea.rst
     win.rst

docs/en/m5ui/spinner.rst

@@ -0,0 +1,176 @@
+.. currentmodule:: m5ui
+
+M5Spinner
+==========
+
+.. include:: ../refs/m5ui.spinner.ref
+
+M5Spinner is a spinning arc over a ring, typically used to show some type of activity is in progress.
+
+UiFlow2 Example
+---------------
+
+spinner
+^^^^^^^^^^^^^^
+
+Open the |core2_spinner_example.m5f2| project in UiFlow2.
+
+This example shows a spinning arc over a ring.
+
+UiFlow2 Code Block:
+
+    |example.png|
+
+Example output:
+
+    None
+
+
+MicroPython Example
+-------------------
+
+spinner
+^^^^^^^^^^^^^
+
+This example shows a spinning arc over a ring.
+
+MicroPython Code Block:
+
+    .. literalinclude:: ../../../examples/m5ui/spinner/core2_spinner_example.py
+        :language: python
+        :linenos:
+
+Example output:
+
+    None
+
+
+**API**
+-------
+
+M5Spinner
+^^^^^^^^^
+
+.. autoclass:: m5ui.spinner.M5Spinner
+    :members:
+    :member-order: bysource
+
+    .. py:method:: set_flag(flag, value)
+
+        Set a flag on the object. If ``value`` is True, the flag is added; if False, the flag is removed.
+
+        :param int flag: The flag to set.
+        :param bool value: If True, the flag is added; if False, the flag is removed.
+        :return: None
+
+        UiFlow2 Code Block:
+
+            |set_flag.png|
+
+        MicroPython Code Block:
+
+            .. code-block:: python
+
+                spinner_0.set_flag(lv.obj.FLAG.HIDDEN, True)
+
+    .. py:method:: set_pos(x, y)
+
+        Set the position of the spinner.
+
+        :param int x: The x-coordinate of the spinner.
+        :param int y: The y-coordinate of the spinner.
+
+        UiFlow2 Code Block:
+
+            |set_pos.png|
+
+        MicroPython Code Block:
+
+            .. code-block:: python
+
+                spinner_0.set_pos(100, 100)
+
+    .. py:method:: set_x(x)
+
+        Set the x-coordinate of the spinner.
+
+        :param int x: The x-coordinate of the spinner.
+
+        UiFlow2 Code Block:
+
+            |set_x.png|
+
+        MicroPython Code Block:
+
+            .. code-block:: python
+
+                spinner_0.set_x(100)
+
+    .. py:method:: set_y(y)
+
+        Set the y-coordinate of the spinner.
+
+        :param int y: The y-coordinate of the spinner.
+
+        UiFlow2 Code Block:
+
+            |set_y.png|
+
+        MicroPython Code Block:
+
+            .. code-block:: python
+
+                spinner_0.set_y(100)
+
+    .. py:method:: set_size(width, height)
+
+        Set the size of the spinner.
+
+        :param int width: The width of the spinner.
+        :param int height: The height of the spinner.
+
+        UiFlow2 Code Block:
+
+            |set_size.png|
+
+        MicroPython Code Block:
+
+            .. code-block:: python
+
+                spinner_0.set_size(100, 50)
+
+    .. py:method:: align_to(obj, align, x, y)
+
+        Align the spinner to another object.
+
+        :param lv.obj obj: The object to align to.
+        :param int align: The alignment type.
+        :param int x: The x-offset from the aligned object.
+        :param int y: The y-offset from the aligned object.
+
+        UiFlow2 Code Block:
+
+            |align_to.png|
+
+        MicroPython Code Block:
+
+            .. code-block:: python
+
+                spinner_0.align_to(page_0, lv.ALIGN.CENTER, 0, 0)
+
+    .. py:method:: set_anim_params(anim_t, angle)
+
+        Set the animation parameters of the spinner.
+
+        :param int anim_t: The animation time in milliseconds.
+        :param int angle: The angle of the spinner in degrees.
+
+        UiFlow2 Code Block:
+
+            |set_anim_params.png|
+
+        MicroPython Code Block:
+
+            .. code-block:: python
+
+                spinner_0.set_anim_params(1000, 180)

docs/en/refs/m5ui.spinner.ref

@@ -0,0 +1,20 @@
+.. |align_to.png| image:: https://static-cdn.m5stack.com/mpy_docs/m5ui/spinner/align_to.png
+.. |set_bg_color.png| image:: https://static-cdn.m5stack.com/mpy_docs/m5ui/spinner/set_bg_color.png
+.. |set_indicator_color.png| image:: https://static-cdn.m5stack.com/mpy_docs/m5ui/spinner/set_indicator_color.png
+.. |set_pos.png| image:: https://static-cdn.m5stack.com/mpy_docs/m5ui/spinner/set_pos.png
+.. |set_size.png| image:: https://static-cdn.m5stack.com/mpy_docs/m5ui/spinner/set_size.png
+.. |set_x.png| image:: https://static-cdn.m5stack.com/mpy_docs/m5ui/spinner/set_x.png
+.. |set_y.png| image:: https://static-cdn.m5stack.com/mpy_docs/m5ui/spinner/set_y.png
+.. |set_flag.png| image:: https://static-cdn.m5stack.com/mpy_docs/m5ui/spinner/set_flag.png
+.. |set_anim_params.png| image:: https://static-cdn.m5stack.com/mpy_docs/m5ui/spinner/set_anim_params.png
+
+.. |example.png| image:: https://static-cdn.m5stack.com/mpy_docs/m5ui/spinner/example.png
+
+.. |core2_spinner_example.m5f2| raw:: html
+
+    <a
+        href="https://uiflow2.m5stack.com/?example=https://raw.githubusercontent.com/m5stack/uiflow-micropython/develop/examples/m5ui/spinner/core2_spinner_example.m5f2"
+        target="_blank"
+    >
+        core2_spinner_example.m5f2
+    </a>