Skip to content

Commit bad154b

Browse files
lbuquelbuque
committed
libs/m5ui: Add m5ui.M5Canvas support.
Signed-off-by: lbuque <[email protected]>
1 parent 29909cc commit bad154b

File tree

9 files changed

+1580
-0
lines changed

9 files changed

+1580
-0
lines changed

‎docs/en/m5ui/canvas.rst

Lines changed: 251 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,251 @@
1+
.. currentmodule:: m5ui
2+
3+
M5Canvas
4+
========
5+
6+
.. include:: ../refs/m5ui.canvas.ref
7+
8+
M5Canvas is a powerful graphics widget that provides a drawable surface for creating custom graphics, animations, and visual effects in the user interface. It supports drawing operations, sprite management, and advanced graphics rendering.
9+
10+
11+
UiFlow2 Example
12+
---------------
13+
14+
draw basic shapes
15+
^^^^^^^^^^^^^^^^^
16+
17+
Open the |cores3_canvas_basic_example.m5f2| project in UiFlow2.
18+
19+
This example demonstrates how to create a canvas and draw basic shapes like rectangles, circles, and lines.
20+
21+
UiFlow2 Code Block:
22+
23+
|cores3_canvas_basic_example.png|
24+
25+
Example output:
26+
27+
A canvas with various colored shapes including rectangles, circles, and lines.
28+
29+
30+
MicroPython Example
31+
-------------------
32+
33+
draw basic shapes
34+
^^^^^^^^^^^^^^^^^
35+
36+
This example demonstrates how to create a canvas and draw basic shapes programmatically.
37+
38+
MicroPython Code Block:
39+
40+
.. literalinclude:: ../../../examples/m5ui/canvas/cores3_canvas_basic_example.py
41+
:language: python
42+
:linenos:
43+
44+
Example output:
45+
46+
A canvas displaying various geometric shapes with different colors.
47+
48+
49+
**API**
50+
-------
51+
52+
M5Canvas
53+
^^^^^^^^
54+
55+
.. autoclass:: m5ui.canvas.M5Canvas
56+
:members:
57+
:member-order: bysource
58+
59+
.. py:method:: set_flag(flag, value)
60+
61+
Set a flag on the object. If ``value`` is True, the flag is added; if False, the flag is removed.
62+
63+
:param int flag: The flag to set.
64+
:param bool value: If True, the flag is added; if False, the flag is removed.
65+
:return: None
66+
67+
UiFlow2 Code Block:
68+
69+
|set_flag.png|
70+
71+
MicroPython Code Block:
72+
73+
.. code-block:: python
74+
75+
canvas_0.set_flag(lv.obj.FLAG.HIDDEN, True)
76+
77+
.. py:method:: toggle_flag(flag)
78+
79+
Toggle a flag on the object. If the flag is set, it is removed; if not set, it is added.
80+
81+
:param int flag: The flag to toggle.
82+
:return: None
83+
84+
UiFlow2 Code Block:
85+
86+
|toggle_flag.png|
87+
88+
MicroPython Code Block:
89+
90+
.. code-block:: python
91+
92+
canvas_0.toggle_flag(lv.obj.FLAG.HIDDEN)
93+
94+
95+
.. py:method:: set_pos(x, y)
96+
97+
Set the position of the canvas.
98+
99+
:param int x: The x-coordinate of the canvas.
100+
:param int y: The y-coordinate of the canvas.
101+
:return: None
102+
103+
UiFlow2 Code Block:
104+
105+
|set_pos.png|
106+
107+
MicroPython Code Block:
108+
109+
.. code-block:: python
110+
111+
canvas_0.set_pos(100, 100)
112+
113+
.. py:method:: set_x(x)
114+
115+
Set the x-coordinate of the canvas.
116+
117+
:param int x: The x-coordinate of the canvas.
118+
:return: None
119+
120+
UiFlow2 Code Block:
121+
122+
|set_x.png|
123+
124+
MicroPython Code Block:
125+
126+
.. code-block:: python
127+
128+
canvas_0.set_x(100)
129+
130+
.. py:method:: set_y(y)
131+
132+
Set the y-coordinate of the canvas.
133+
134+
:param int y: The y-coordinate of the canvas.
135+
:return: None
136+
137+
UiFlow2 Code Block:
138+
139+
|set_y.png|
140+
141+
MicroPython Code Block:
142+
143+
.. code-block:: python
144+
145+
canvas_0.set_y(100)
146+
147+
.. py:method:: align_to(obj, align, x, y)
148+
149+
Align the canvas to another object.
150+
151+
:param lv.obj obj: The object to align to.
152+
:param int align: The alignment type.
153+
:param int x: The x-offset from the aligned object.
154+
:param int y: The y-offset from the aligned object.
155+
:return: None
156+
157+
UiFlow2 Code Block:
158+
159+
|align_to.png|
160+
161+
MicroPython Code Block:
162+
163+
.. code-block:: python
164+
165+
canvas_0.align_to(page_0, lv.ALIGN.CENTER, 0, 0)
166+
167+
.. py:method:: set_size(width, height)
168+
169+
Set the size of the canvas.
170+
171+
:param int width: The width of the canvas.
172+
:param int height: The height of the canvas.
173+
:return: None
174+
175+
UiFlow2 Code Block:
176+
177+
|set_size.png|
178+
179+
MicroPython Code Block:
180+
181+
.. code-block:: python
182+
183+
canvas_0.set_size(200, 100)
184+
185+
.. py:method:: set_width(width)
186+
187+
Set the width of the canvas.
188+
189+
:param int width: The width of the canvas.
190+
:return: None
191+
192+
UiFlow2 Code Block:
193+
194+
|set_width.png|
195+
196+
MicroPython Code Block:
197+
198+
.. code-block:: python
199+
200+
canvas_0.set_width(200)
201+
202+
.. py:method:: set_height(height)
203+
204+
Set the height of the canvas.
205+
206+
:param int height: The height of the canvas.
207+
:return: None
208+
209+
UiFlow2 Code Block:
210+
211+
|set_height.png|
212+
213+
MicroPython Code Block:
214+
215+
.. code-block:: python
216+
217+
canvas_0.set_height(100)
218+
219+
.. py:method:: get_width()
220+
221+
Get the width of the canvas.
222+
223+
:return: The width of the canvas.
224+
:rtype: int
225+
226+
UiFlow2 Code Block:
227+
228+
|get_width.png|
229+
230+
MicroPython Code Block:
231+
232+
.. code-block:: python
233+
234+
width = canvas_0.get_width()
235+
236+
.. py:method:: get_height()
237+
238+
Get the height of the canvas.
239+
240+
:return: The height of the canvas.
241+
:rtype: int
242+
243+
UiFlow2 Code Block:
244+
245+
|get_height.png|
246+
247+
MicroPython Code Block:
248+
249+
.. code-block:: python
250+
251+
height = canvas_0.get_height()

‎docs/en/m5ui/index.rst

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ Classes
3737
bar.rst
3838
button.rst
3939
calendar.rst
40+
canvas.rst
4041
checkbox.rst
4142
image.rst
4243
label.rst

‎docs/en/refs/m5ui.canvas.ref

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
.. |cores3_canvas_basic_example.m5f2| raw:: html
2+
3+
<a href="https://flow.m5stack.com/f/1730346745645/cores3_canvas_basic_example.m5f2" target="_blank">cores3_canvas_basic_example.m5f2</a>
4+
5+
.. |cores3_canvas_basic_example.png| image:: https://static-cdn.m5stack.com/image/m5-docs/docs-en/tutorial/m5ui/canvas/cores3_canvas_basic_example.png
6+
7+
.. |align_to.png| image:: https://static-cdn.m5stack.com/mpy_docs/m5ui/canvas/align_to.png
8+
.. |draw_arc.png| image:: https://static-cdn.m5stack.com/mpy_docs/m5ui/canvas/draw_arc.png
9+
.. |draw_image.png| image:: https://static-cdn.m5stack.com/mpy_docs/m5ui/canvas/draw_image.png
10+
.. |draw_label.png| image:: https://static-cdn.m5stack.com/mpy_docs/m5ui/canvas/draw_label.png
11+
.. |draw_line.png| image:: https://static-cdn.m5stack.com/mpy_docs/m5ui/canvas/draw_line.png
12+
.. |draw_rect.png| image:: https://static-cdn.m5stack.com/mpy_docs/m5ui/canvas/draw_rect.png
13+
.. |draw_triangle.png| image:: https://static-cdn.m5stack.com/mpy_docs/m5ui/canvas/draw_triangle.png
14+
.. |get_height.png| image:: https://static-cdn.m5stack.com/mpy_docs/m5ui/canvas/get_height.png
15+
.. |get_px_color.png| image:: https://static-cdn.m5stack.com/mpy_docs/m5ui/canvas/get_px_color.png
16+
.. |get_px_opa.png| image:: https://static-cdn.m5stack.com/mpy_docs/m5ui/canvas/get_px_opa.png
17+
.. |get_width.png| image:: https://static-cdn.m5stack.com/mpy_docs/m5ui/canvas/get_width.png
18+
.. |set_bg_color.png| image:: https://static-cdn.m5stack.com/mpy_docs/m5ui/canvas/set_bg_color.png
19+
.. |set_border_color.png| image:: https://static-cdn.m5stack.com/mpy_docs/m5ui/canvas/set_border_color.png
20+
.. |set_flag.png| image:: https://static-cdn.m5stack.com/mpy_docs/m5ui/canvas/set_flag.png
21+
.. |set_height.png| image:: https://static-cdn.m5stack.com/mpy_docs/m5ui/canvas/set_height.png
22+
.. |set_pos.png| image:: https://static-cdn.m5stack.com/mpy_docs/m5ui/canvas/set_pos.png
23+
.. |set_px.png| image:: https://static-cdn.m5stack.com/mpy_docs/m5ui/canvas/set_px.png
24+
.. |set_size.png| image:: https://static-cdn.m5stack.com/mpy_docs/m5ui/canvas/set_size.png
25+
.. |set_style_border_width.png| image:: https://static-cdn.m5stack.com/mpy_docs/m5ui/canvas/set_style_border_width.png
26+
.. |set_style_radius.png| image:: https://static-cdn.m5stack.com/mpy_docs/m5ui/canvas/set_style_radius.png
27+
.. |set_width.png| image:: https://static-cdn.m5stack.com/mpy_docs/m5ui/canvas/set_width.png
28+
.. |set_x.png| image:: https://static-cdn.m5stack.com/mpy_docs/m5ui/canvas/set_x.png
29+
.. |set_y.png| image:: https://static-cdn.m5stack.com/mpy_docs/m5ui/canvas/set_y.png
30+
.. |toggle_flag.png| image:: https://static-cdn.m5stack.com/mpy_docs/m5ui/canvas/toggle_flag.png

0 commit comments

Comments
 (0)