Welcome!
This is the community forum for my apps Pythonista and Editorial.
For individual support questions, you can also send an email. If you have a very short question or just want to say hello — I'm @olemoritz on Twitter.
Making arcs and filling them with in ui.Path
-
Hmmm, well this is embarrassing 😰😱
I really can't figure out how to use the ui.Path functions to create arcs or filled segments for a circle. From what I can see I have to understand how to correctly use sin and cos at minimum to be able to do it. I looked it up on wiki tried, but was just getting a headache.Would be fantastic if someone had time to write a small func or class so I can do this. I want it to make custom views / indicators. Like a progress indicator for a download etc. I want to do one like apples app updates where a thinker arc is drawn around a circle and another style where the segments are filled in. I think I need back the the params for Path.add_arc(center_x, center_y, radius, start_angle, end_angle[, clockwise=True]). Assume I have to pass a Rect and the required angle, hopefully 12 o'clock being 0 degrees.
-
An angle of 0 is "3 o'clock". The angles are also expected in radians, so you'll probably want to convert them from degrees first using
math.radians
.(What I haven't quite figured out yet is how to stop an ugly line from going from (0, 0) to the start of the curve.)
-
@dgelessus , yes i seen 3 o'clock is 0 on wiki. But in the real world for real people I am sure we can offset that, so we can think in terms of a clock. I got so lost with these extra lines I almost created a Da Vinci illustration 😋😱😋
Had had friends turn up, so have. It had a chance to try radians.
-
The starting point will be at x_center + radiuscos(theta) , y_center +/- radius sin(theta)
where theta is the starting angle, and the sign on the y term depends on whether you are going counter clockwise (+) or clockwise (-)
a move_to this position before adding the arc should eliminate the line from the center.
-
Below is a little example that draws a simple pie chart of the sort that's sometimes used for progress indicators. You simply pass the progress (between 0.0 and 1.0) to the
draw_pie()
function, and it'll return an image with a filled pie segment.It would be pretty easy to use similar code in the
draw
method of a custom view instead of creating an image. Hope this helps.import ui from math import pi, sin, cos, radians def draw_pie(p, r, fill_color='black'): p = max(0.0, min(1.0, p)) with ui.ImageContext(r * 2, r * 2) as ctx: ui.set_color(fill_color) path = ui.Path() center = ui.Point(r, r) path.move_to(center.x, center.y) start = radians(-90) end = start + p * radians(360) path.add_arc(r, r, r, start, end) path.close() ui.set_color(fill_color) path.fill() return ctx.get_image() pie_img = draw_pie(0.75, 200) pie_img.show()
-
@omz , works perfectly thanks. These are the times I wished I had a proper education.
Will share it later. Just fixing up the test class. -
@omz , is there a way to get a reference to the ImageContext for a custom view class? I would like to be able to write to the ImageContext in a function outside the class if possible. I thought self.get_image() might have done it. But it doesn't
-
@Phuket2 To use the
draw_pie
function in thedraw
method of a custom view, just remove theImageContext
entirely, like this:def draw_pie(p, r, fill_color='black'): p = max(0.0, min(1.0, p)) ui.set_color(fill_color) path = ui.Path() center = ui.Point(r, r) path.move_to(center.x, center.y) start = radians(-90) end = start + p * radians(360) path.add_arc(r, r, r, start, end) path.close() ui.set_color(fill_color) path.fill()
You can then just call it as-is in the
draw
method of a custom view, e.g.:class PieView (ui.View): def __init__(self, *args, **kwargs): ui.View.__init__(*args, **kwargs) self._progress = 0.0 @property def progress(self): return self._progress @progress.setter def progress(self, value): self._progress = value self.set_needs_display() def draw(self): draw_pie(self.progress, self.width*0.5)
If you also want to use this for creating images (outside of a view), you can simply wrap it like this:
def draw_pie_image(p, r, fill_color='black'): with ui.ImageContext(r*2, r*2) as ctx: draw_pie(p, r, fill_color) return ctx.get_image()
-
@omz , thanks. Just gives different options for design. To inherit from a class and override draw or to point to a function or class that will draw
-
@omz , oh! Just found out I can not use another custom view to embed my draw method in, which makes sense. But back to the first question then. Is there a way to get/set the ImageContext object. I can see I can return a ImageContext but would be nicer if I can just explicitly set or use an existing ImageContext
Equivalent of
MyImageContext = v.xxx
With MyImageContext as current:
Drawing cmds going to this view -
oh! Just found out I can not use another custom view to embed my draw method in, which makes sense.
It should be possible to do that. What does your code look like?
Is there a way to get/set the ImageContext object.
Not really. An
ImageContext
is basically just a way to redirect drawing code into an image (for example, to save a drawing as a file). You don't really need anImageContext
for drawing in custom views. Views have a drawing context of their own, but it doesn't correspond to anImageContext
object, and you can't really access it (nor should you actually need to).When the
draw()
method (of a custom view) is called (by the system), a drawing context is already set up, and all drawing functions affect the current context. So it's perfectly fine to do something like this:# ... def draw(self): SomeOtherViewClass.draw(self)
to use the drawing functionality of a different view class.
-
@omz , thanks. You are right it does work. Not worth posting the code now, it's all over the place. Trying to work around many issues. But this will help simply a lot. Thanks again 😱
-
-
@omz The default
ui.View
doesn't seem to have adraw
method. I assume this is special-cased internally to not cause errors, but it would be nice to have a defaultdraw
method (even if empty) so we can always usesuper
in thedraw
method.For example, this code currently fails, because
ui.View
doesn't have adraw
method:import ui class CustomView(ui.View): def draw(self): super().draw() ui.Path.rect(5, 5, 45, 45).fill()
But if we'd write a subclass of
CustomView
, we would need to callsuper().draw()
, otherwise the custom drawing code inCustomView.draw
wouldn't be executed.This isn't a big issue - currently you just have to leave out the
super
call when the base class isui.View
- but I am a fan of consistency.:)
-
@dgelessus , I am not sure I follow you 100% here. But in this case wouldn't you just do something like
If v.superview:
Do something...I know your statement was directed at @omz , but just curious
-
@Phuket2 I'm not talking about superviews of a view, but about the superclass (base class) of a custom view class. What I mean is that currently when you subclass
ui.View
directly, you cannot callsuper().draw()
, but when you subclass another custom view class (that has a customdraw
method), you have to callsuper().draw()
. Ifui.View
had an emptydraw
method, you could always callsuper().draw()
no matter what. -
@dgelessus , I don't have a fraction of your knowledge. I knew you were not talking about superviews directly. I only mention that, because what I understand is if there is not superview it's the root view object.
But I have read some docs on Python objects. I can't remember exactly what it says, but I think it's something like there is always a base class. I think it said something like that.
So, I guess you are saying when super is called on the base class it should point to itself , just to be consistent and compatible will other Python patterns.
Hmmm, I am already regretting this post. I am in the deep end of the pool and need floaties 😱
Look if I am so wrong, it's ok. No need to waste your time to respond. -
Yes, if you write a class and don't set any superclass(es) yourself, its superclass is automatically
object
. (In Python 3 at least - the situation is more complicated in Python 2.)This isn't really important here though. I mean that
ui.View
should have adraw
method, so that subclasses can usesuper().draw()
in their owndraw
methods. (Currently this fails sometimes becauseui.View.draw
doesn't exist.) -
@dgelessus , ok I think I see. Actually draw also does not exist in a custom class unless you have a draw method. I was just doing some print dir(obj) to understand your post.
If you print dir(custom_class) without a draw method defined it does not show up. So I guess it's just added at runtime as required. Not sure that's normal or not. I would have thought the method would be there, but not the ImageContext etc...not sure if it's normal or not . But seems like maybe @omz took a logic short cut 😱😈😈😈Sure I will regret this post also, I am probably way off course. I will learn to keep my big mouth shut one day.