# [Share] a list of rects distributed around 360 degrees browsing

• posted
1

This share is basically for people like me , when they hear circle they think of crop circles not pi. My point being, if you know the math, this share is useless to you.
But it's just about the distribution of rects on a circular path. Personally I think it would be nice if someone could rewrite the function properly and add it to the Pythonista Tools lib.
But I was able to put this together by taking parts of the AnalogClock.py example that comes with Pythonista.

``````'''
Pythonista Forum - @Phuket2
'''
import ui, editor
from math import pi, sin, cos

def rects_on_circle_path(rect_path, obj_width,
margin = 2, num_objs = 12):
'''
rects_on_circle_path
PARAMS:
1. rect_path = the bounding rect of the circle
**Note the rect is inseted half of the shape_width param + the
margin param. the resulting rects are centered on the bounding
circle.

2. obj_width = the width of the shape/rect you are placing on the
path.

3. margin = 2 , additionally insets the rect_path by this value

4. num_objects = 12.  the number of objects to distribute around
rect_path. set to 12 as default, a clock face.  odd and even
numbers are ok.

RETURNS:
tuple(Rect, list)
1. Rect = the adjusted rect_path after transformations in the func.
2. a list[] containing a ui.Rect's. the length of the list is
equal to the num_objs param.

NOTES:
For some reason i can't do the math if my life depended on it.
I copied the math from the AnalogClock.py pythonista example.

ALSO should have a param to shift the basline of the rects, off
the center line of the rect_path.

the reason why i return a list of rects in the tuple is for
flexibility.  in the example, just drawing. but could just as
easily be positioning ui.Button/ui.Label object or whatever.

oh, btw i know its a bit of a mess. hard when you are not sure
of the math to get it as concise as it should be.

'''

rects = []

r = ui.Rect(*rect_path).inset((obj_width/2) + margin, (obj_width/2) + margin)

for i in range(0, num_objs):
a = 2 * pi * (i+1)/num_objs
r1 = ui.Rect(pos[0] , pos[1] , obj_width, obj_width)
r1.x += ((r.width/2) - (obj_width/2)+r.x)
r1.y += ((r.height/2) - (obj_width/2)+r.y)
rects.append(r1)

return (r,rects)

class MyClass(ui.View):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)

def draw(self):
r = ui.Rect(*self.bounds)
r, rects = rects_on_circle_path(r, 10, margin = 20 ,
num_objs = 36 )
s = ui.Path.oval(*r)
ui.set_color('lime')
s.stroke()

ui.set_color('orange')
for r in rects:
s = ui.Path.oval(*r)
s.fill()

r = ui.Rect(*self.bounds)
r, rects = rects_on_circle_path(r, 15, margin = 40 ,
num_objs = 12 )
s = ui.Path.oval(*r)
ui.set_color('yellow')
s.stroke()

ui.set_color('purple')
for r in rects:
s = ui.Path.oval(*r)
s.fill()

r = ui.Rect(*self.bounds)
r, rects = rects_on_circle_path(r, 25, margin = 80 ,
num_objs = 6 )
s = ui.Path.oval(*r)
ui.set_color('orange')
s.stroke()

ui.set_color('lime')
for r in rects:
s = ui.Path.rect(*r)
s.fill()

if __name__ == '__main__':
_use_theme = True
w, h = 600, 600
f = (0, 0, w, h)
name = 'Silly Demo'
mc = MyClass(frame=f, bg_color='white', name = name)

if not _use_theme:
mc.present('sheet', animated=False)
else:
editor.present_themed(mc, theme_name='Oceanic', style='sheet', animated=False)
``````

Output

• posted
0

@Phuket2 I have modified the circular slider code so that you can use it like ui slider. The code and examples are are available in the following repository.

https://github.com/balachandrana/pythonista_circular_slider

In test1.py and test2.py you can control the ui slider with circular slider and vice versa. The test1.py code uses continuous mode and
in test2.py tint_color is set to red and continuous mode sets to false. In test3.py you can change the center image by slider.

Knob like designs (see the examples below) would require more effort and better designer skills. Anyway I will try to do some simple things later.
http://www.hongkiat.com/blog/beautiful-volume-dials-knobs/

• posted
0

@abcabc , thanks. I didn't really get the self.a property though. I was thinking if it set that to -90 it would basically set things to 0 on the clock. However it's set at 270 degrees. I tried a few values, but stopped because it was clear I didn't understand it. Btw, i did not download your test .py and pyui files yet. Will get later. But anyway, I did use the action/continuous attrs. Works really well. The results from the self.value appear to be spot on to what I would expect. But I still think a few attrs a little less mathy would be nice 😁 Starting point for example. I am sure it's there, but I think it's ok to assume the users of your class are totally dumb to any math you be using internally in your class. Not to say, you need to block access to attrs that could be set directly by people who,understand the math. I just say this, because a class like this with a nice/easy API would allow people like me to make animated interface items that would otherwise would be hard to make.
Btw, I love the link to the knobs and dials. But I disagree with you a little. If your class just handled the movements/tracking/queries it would be very flexible to be able create the knobs/dials in that link. Some of those fancy dials could be made by just manipulating an array of pics in a container like a ui.Button/ui.Image etc. meaning the effects don't have to real time to get a nice result , but they could also be real time effects if fast enough. I guess what I am saying your class does not need to draw anything and probably shouldn't unless for debugging help. Rather, you could overlay your class transparently on other ui objects and control the underlying objects from from class.
I hope you don't mind my me giving my opinion. I say it because I would love something like this. Of course I think about other functionality, like being able to supply a list of degrees as the only stop points etc. if I could write it, I would offer some code. One thing to mention, you also use inheritance. Have your base class and create different types of user controllers/Guestures whatever to call them off the base. Could keep it a bit cleaner as your ideas exapand.
Ok, that's my 5 cents worth of feedback 😬😬😬

• posted
0

Please look at the tests. You need to use self.value (and not self.a which is internal' it varies from -pi tp +pi returned by atan2 function).

• posted
0

@abcabc , ok, I will do. But still I prefer not to have to know about atan etc... Just saying...

I just did this, it's bit of a mess, but just to illustrate what I was saying in my previous post. You circular_slider is just visible, but when using some graphics it would not be, just there as an overlay/controller. Again, sorry, I does nothing other than combine a number of things together. Also would hope to have multiple instances of your circular_slider on the view. For instances when you have a inner and outer control points

• posted
0

Sorry the last gist in the layout should have been. Not a big deal, just trying to show something.

``````def layout(self):
r , rects = rects_on_circle_path(self.bounds, self.obj_w, margin=self.margin, N=len(self.obj_list))
self.r = r

if not self.cs:
print('in here')
self.cs = CS.CircularSlider(frame = r, name = 'CS')
self.cs.action = self.cs_action
self.cs.continuous = True
self.cs.alpha = .05

for i, r in enumerate(rects):
self.obj_list[i].frame = r
``````

• posted
0

I have changed two lines in your program to make it work. See the following gist

https://gist.github.com/5e7b8beb9a0b35aaafbcd06b0cd30340

line 81:
self.degree = 90

line 183
self.degree = sender.value *360 -90

• posted
0

Sorry. Typo. line 103 not 183.

• posted
0

@abcabc , thanks. It makes it work. I was not so worried about that. More worried bout you need to know the math inside to get it to work. The reason I tried -90, was because often from what I can see anyway , the geometry done in Pythonista is based on radians. But the point is does not matter what math you use, but as a consumer of your class, the less I have to know the better. Just because you know the math back the front, nothing to say I should have to know it. But something like degrees is pretty understandable for most people. Again, look it's your code and effort. I am just pushing in the case you want to make consumable class that the majority could use with ease. It's like cooking (which I love) you want as many people as possible to try your food. That's what makes the effort worth while and gives you a buzz when you get it right. I think writing classes/functions here is the same thing. Well, for me it's like that.

• posted
0

@abcabc , a small update to the gist. Its not suppose to present an ideal case. But combining the views/funcs can start to get something that looks ok. Have numbers around the outer ring in this example, would look more realistic with major and minor tick marks for example. But for me your circular_slider makes this possible.

Edit: of course the outter ring not even needed

Internal error.

Oops! Looks like something went wrong!