[Share] a list of rects distributed around 360 degrees

Phuket2

@cvp , thanks. It works! I will not ask why, but again thank you.

'''
	Pythonista Forum - @Phuket2
'''
import ui, editor
from math import pi, sin, cos, radians, degrees
import calendar

# example, playing around, for 12 items its ok no math :)
_range_12 = [.3, .34, .38, .42, .46 , .5, .55, .6, .63, .7, .85, 1.0]

def rects_on_circle_path(rect_path, obj_width,
							margin = 2, num_objs = 12):

	rects = []
		
	r = ui.Rect(*rect_path).inset((obj_width/2) + margin, (obj_width/2) + margin)
	
	radius = r.width / 2
	for i in range(0, num_objs):
		#a = 2 * pi * (i+1)/num_objs
		#a += radians(-210)
		# thanks @cvp, now the rects start at 0 degrees, yeah!! 
		a = -2 * pi * (i+1)/num_objs # inverse
		a += radians(-150) # change delta
		
		pos = (sin(a)*(radius*1), cos(a)*(radius*1))
		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)
		self.btns = []
		self.make_view()
			
	def make_view(self):
		for i in range(0,12):
			btn = ui.Button()
			btn.title = calendar.month_abbr[i+1]
			btn.bg_color = 'orange'
			btn.tint_color = 'black'
			btn.border_width = .5
			self.add_subview(btn)
			self.btns.append(btn)
		
	def layout(self):
		r = ui.Rect(*self.bounds)
		obj_width = 80
		r, rects = rects_on_circle_path(r, obj_width, margin = 20 ,
											num_objs = 12)
		ui.set_color('orange')
		for i, btn in enumerate(self.btns):
			btn.frame = rects[i]
			btn.corner_radius = btn.width / 2
			btn.text_color = 'black'
			btn.alpha = _range_12[i]
				
if __name__ == '__main__':
	_use_theme = False
	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)

JonB

Look, don't fret about radians/degres. Work all in degrees if it helps., and just convert to radians before using sin or cos.

Here are a few easy tricks to help remember:
sin(0)==0. cos(0)==1
sin(radians(90)) ==1 cos(radians(90)) == 0

In a traditional coordinate system(or scene coordinate system), with positive x pointing right, and positive y pointing up, x,y = sin(a), cos(a) would travel counter clockwise, starting at 3 oclock. In the ui coordinate system, this would also start at 3 oclock, but go clockwise.

If you want equal spacing going clockwise, starting at midnight:
y=-cos(a) # note negative sign
x=sin(a)
which you can check using the two sets of relations above.
This would be the same as
x=sin(a-radians(90) )
y=cos(a-radians(90))
if you prefer to keep a sort of standard form with simply a starting angle offset.

you might like something like
for i in range(0,num_obj):
a_deg=360/num_obj*i # divide circle into N segments, starting at 0
x,y=-cos(radians(a_deg)), sin(radians(a_deg))

The clock example labeled numbers from 1 to 12, rather than 0 to 11, so they needed to start one segment in, and also was probably in the scene coordinate system which is different than

Phuket2

@JonB , thanks. Was not really going for an effect. I just really wanted to experiment with choosing a month a different way in the ui. Then I know I can't just put things on a arc on a circular path at will (meaning my ability). So I thought, look at the AnalogClock.py example from @omz and make a function for myself out of it. That's how it started. My brain is not fresh enough now to digest your comments. I will look again tomorrow and see if I can get my head around it.
I know picking a month like this looks stupid. I just wanted to try it. I thought maybe something might standout. But as usual, I got caught up in the details. But I still think that small function tweaked and written properly could be useful a lot of people, well maybe just me 😱
But again thanks @JonB and @cvp. Not sure it scares me so much. But circles and arcs do.... Of well, I will be fresh again in 12 hours.

ccc

Lots of small changes... See: calculate_a_rect()

'''
    Pythonista Forum - @Phuket2
'''

import calendar
import editor
import math
import ui

# example, playing around, for 12 items its ok no math :)
_range_12 = (.3, .34, .38, .42, .46, .5, .55, .6, .63, .7, .85, 1.0)


def rects_on_circle_path(rect_path, obj_width, margin=2, num_objs=12):
    def calculate_a_rect(i):
        a = -2 * math.pi * (i + 1) / num_objs + math.radians(-150)
        pos = math.sin(a) * radius, math.cos(a) * radius
        r1 = ui.Rect(*pos, obj_width, obj_width)
        r1.x += r.width / 2 - obj_width / 2 + r.x
        r1.y += r.height / 2 - obj_width / 2 + r.y
        return r1
    
    r = ui.Rect(*rect_path).inset(obj_width / 2 + margin,
                                  obj_width / 2 + margin)
    radius = r.width / 2
    return r, [calculate_a_rect(i) for i in range(num_objs)]


def make_button(i):
    def button_action(sender):
        print('Button {} was pressed.'.format(sender.title))

    btn = ui.Button(title=calendar.month_abbr[i+1])
    btn.action = button_action
    btn.alpha = _range_12[i]
    btn.border_width = .5
    btn.bg_color = 'orange'
    btn.text_color = btn.tint_color = 'black'
    return btn


class MyClass(ui.View):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        for i in range(12):
            self.add_subview(make_button(i))
        
    def layout(self):
        r, rects = rects_on_circle_path(self.bounds, obj_width=80, margin=20,
                                        num_objs=12)
        for i, btn in enumerate(self.subviews):
            btn.frame = rects[i]
            btn.corner_radius = btn.width / 2

                
if __name__ == '__main__':
    _use_theme = False
    w = h = 600
    f = (0, 0, w, h)
    mc = MyClass(frame=f, bg_color='white', name='Silly Demo')
    
    if not _use_theme:
        mc.present('sheet', animated=False)
    else:
        editor.present_themed(mc, theme_name='Oceanic', style='sheet',
                              animated=False)

Phuket2

@ccc , thanks. I know I over use parentheses. But I have read numerous times it's not Pythonetic to rely on operator precedence, better to be explicit with the use of parentheses. Sort of makes sense, a little of hard to find bugs can creep with small mistakes/understanding.

In my classes now, just out of habit I always have a make_view method. I know also can iterate though the subviews, I normally don't do it. I need to add one more subview then I need to add something somewhere to take of the anomaly. I also normally have a make_button or make ui_object as you normally do. Cleans up things a lot.

But as far as I know Pythonista Tools GitHub doesn't have a list of useful functions. I think it should have. I think it would be great if you or @JonB or other talented guys rewrote this function and added it the Pythonista Tools Lib. I say rewrite, because I am sure you would normally not use the variable names i am using. Also the function could use a baseline param (or whatever the correct name would be) to alter the center position of the obj. Now it's centered on the rect_path with no adjustment available.

Anyway, it's not I am lazy to submit to Pythonista Tools. But, I make to many simple errors. The code uploaded there should be trust worthy. The other problem I have is, if it's my repo, I can't respond properly to forks etc. Just saying....

Food for thought 🎉😬🎉🎉

Phuket2

@cvp, @ccc hmmmm, it's all gone to sh*t again. 😂😂😂😂 @cvp , the change that returned the shapes in the correct order stopped the distribution of the shapes evenly around the path. In my first post , you can see that items are evenly placed around the path. Odd or even number of objects. Both your and @ccc methods produce different results. But it's not the same as my first post ( you can see in the pic in the first post)Not sure if you guys can see the error or not.

I just seen the problem. I wanted to do like a compass selection rather than a month selection. So eight items, ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW' ]. It should of just worked. But didn't, the distribution part of the function is broken now.

I will try and figure it out, but if you see an easy answer that would be great also. 💋💋💋

Phuket2

So if in @ccc function I put it back the way I had it in my first post, I get the correct rect placements, just out of order. Trying to get the same result, just in order.

def rects_on_circle_path(rect_path, obj_width, margin=2, num_objs=12):
	def calculate_a_rect(i):
		'''
		a = -2 * math.pi * (i + 1) / num_objs + math.radians(-150)
		pos = math.sin(a) * radius, math.cos(a) * radius
		r1 = ui.Rect(*pos, obj_width, obj_width)
		r1.x += r.width / 2 - obj_width / 2 + r.x
		r1.y += r.height / 2 - obj_width / 2 + r.y
		'''
		a = 2 * math.pi * (i+1)/num_objs
		pos = (math.sin(a)*(radius*1), math.cos(a)*(radius*1))
		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)
	
		return r1
		
	r = ui.Rect(*rect_path).inset(obj_width / 2 + margin,
	obj_width / 2 + margin)
	radius = r.width / 2
	return r, [calculate_a_rect(i) for i in range(num_objs)]

cvp

a = -2 * math.pi * (i + 1) / num_objs + math.radians(-135)
pos = math.sin(a) * radius, math.cos(a) * radius

cvp

Or, if you want to keep always my formulae,

a = 2 * math.pi * i/num_objs - math.pi/2
pos = (math.cos(a)*(radius*1), math.sin(a)*(radius*1)) # careful: cos,sin! not sin,cos

cvp

Why pos = cos,sin or pos = sin,cos
to better understand x,y coordinates with radius,angle

Phuket2

@cvp , thanks the below code is working now. I can't be sure everything I reported above was correct. Is possible I had some mis matched Params 😂 I still the the code below is cool. That one function just makes it so easy to put/draw objects in a circular shape, many interfaces could require this....well maybe. I just wanted to get that function working, I didn't try to make the class generic. Maybe I am dreaming. But thanks again for your help and diagrams. I was still 14 when I left school and I was a trouble maker. So, it's difficult to understand your diagrams, just because I have no real foundation. I was also looking at wiki for radians, it has some great diagrams and animations, hmmm but still it doesn't sink in. But I am going to try to find a math tutor. But it will not be easy in Thailand. We're I live and language barrier.
But again thanks....


'''
    Pythonista Forum - @Phuket2
'''

import calendar
import editor
import math
import ui

# example, playing around, for 12 items its ok no math :)
_range_12 = (.3, .34, .38, .42, .46, .5, .55, .6, .63, .7, .85, 1.0)

def css_clr_to_rgba(css_name, a):
	c = ui.parse_color(css_name)
	return (c[0], c[1], c[2], a)
	
def rects_on_circle_path(rect_path, obj_width, margin=2, num_objs=12):
	def calculate_a_rect(i):
		a = 2 * math.pi * i/num_objs - math.pi/2
		# careful: cos,sin! not sin,cos
		pos = (math.cos(a)*(radius*1), math.sin(a)*(radius*1)) 
		r1 = ui.Rect(*pos, obj_width, obj_width)
		r1.x += r.width / 2 - obj_width / 2 + r.x
		r1.y += r.height / 2 - obj_width / 2 + r.y
		
		return r1
		
	r = ui.Rect(*rect_path).inset(obj_width / 2 + margin,
	obj_width / 2 + margin)
	radius = r.width / 2
	return r, [calculate_a_rect(i) for i in range(num_objs)]
	
	
def make_button(idx, title):
	def button_action(sender):
		print('Button {} was pressed.'.format(sender.title))
		
	#btn = ui.Button(title=calendar.month_abbr[i+1])
	btn = ui.Button(title=title)
	btn.action = button_action
	#btn.alpha = _range_12[idx]
	btn.border_width = .5
	btn.bg_color = 'white'
	btn.text_color = btn.tint_color = 'black'
	return btn
	
class MyClass(ui.View):
	# some ideas
	_list=['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW' ]
	#_list=['N', 'E' , 'S' , 'W']
	#_list=['1st', '2nd', '3rd', '4th', '5th']
	#_list=['0', '90', '180', '270' ]
	#_list= [str(d) for d in range(0, 12)]
	_list = [calendar.month_abbr[i] for i in range(1,12)]
	
	def __init__(self, *args, **kwargs):
		super().__init__(*args, **kwargs)
		self.cir_rect = None
		self.make_view()
	def make_view(self):
		for i in range(len(self._list)):
			self.add_subview(make_button(i, title=self._list[i]))
			
	def layout(self):
		r, rects = rects_on_circle_path(self.bounds, obj_width=70, 								margin=20, num_objs=len(self._list))
		self.cir_rect = r
		for i, btn in enumerate(self.subviews):
			btn.frame = rects[i]
			btn.title = self._list[i]
			btn.corner_radius = btn.width / 2
		
	def draw(self):
		s = ui.Path.oval(*self.cir_rect)
		with ui.GState():
			ui.set_color(css_clr_to_rgba('lime', .4))
			s.line_width = 1
			s.stroke()
			
if __name__ == '__main__':
	_use_theme = True
	w = h = 500
	f = (0, 0, w, h)
	mc = MyClass(frame=f, bg_color='white', name='Silly Demo')
	
	if not _use_theme:
		mc.present('sheet', animated=False)
	else:
		editor.present_themed(mc, theme_name='Solarized Dark', style='sheet',
		animated=False)

cvp

You're welcome for any mathematic/geometric question, but only if you accept an answer in a very poor English 🙄

Phuket2

@cvp , not trying to be smart. But there is nothing wrong with your English

abcabc

@Phuket2 I have implemented the circulartextlayout module to support circular layout. It is a slight modification of the textlayout module. Now the rows in layout text represents circular rings. Columns represent angular positions (Columns are not used for size calculations . Only rows are used for size calculations.) I hope it is useful. There is no need to calculate positions and size. The following git repository contains the code and examples:
https://github.com/balachandrana/textlayout
You can do a git pull if you have already got this.

In the following example, the month buttons are displayed in the outer ring and the images (imageview) are displayed
in the inner ring.

import circulartextlayout
import ui


layout_text = '''
************
************
bbbbbbbbbbbb
************
i*i*i*i*i*i*
************
************
'''

image_list = [ ui.Image.named(i) for i in 'Rabbit_Face Mouse_Face Cat_Face Dog_Face Octopus Cow_Face'.split()]
_range_12 = (.3, .34, .38, .42, .46, .5, .55, .6, .63, .7, .85, 1.0)

def button_action(sender):
    print('Button {} was pressed.'.format(sender.title))
        
titles = 'jan feb mar apr may jun jul aug sep oct nov dec'.split()

attributes = {'b': [{'action':button_action, 'font' :('Helvetica', 20),
                     'bg_color':'orange', 'alpha':_range_12[i],
                     'border_width':.5, 'text_color':'black', 'tint_color':'black',
                     'title':j } for i, j in enumerate(titles)],
             'i': [{'image':i,  'bg_color':'gray'} for i in image_list ]                  
             }
                       
v = circulartextlayout.BuildView(layout_text, width=600, height=600, view_name='Counter',
    attributes=attributes).build_view()
    
for i in range(1, len(titles)+1):
    v['button'+str(i)].corner_radius = v['button'+str(i)].width*.5
for i in range(1, len(image_list)+1):
    v['imageview'+str(i)].corner_radius = v['imageview'+str(i)].width*.5
v.present('popover')

The screeshot for this example is given below:
http://imgur.com/a/WUwc5

I have also included an example (circular_directions.py) that is similar to your direction example.

cvp

If you want an alpha property to your button, but independent of the list length, you can do

btn = make_button(i, title=self._list[i])
btn.alpha = (1+i) * (1/len(self._list)) # will go from 1/n to 1.0, where n = Len of list
self.add_subview(btn)

Thus, no need of _range_12

abcabc

Just coped the @ccc's code and wanted to set the attributes as in @ccc's code.

cvp

@abcabc you're right but this code was only valuable for 12 items, not for 8, for instance in the code for N,....,E,.....,S,....W,..., or for any range

abcabc

Yes. You are right. I will update the code as suggested by you. Thanks for the suggestion.

Phuket2

@abcabc , @cvp , _range_12 is ok. Just a list of 12 numbers between 0.0 and 1.0. But purposely not done linearly. That's why I put values into the list. To do it without constants you need some math. You can't start a zero or even .1 or even .2 for that matter, the resulting alpha is too faint. Also depending on what you want to do, the progression normally will look better if its not linear.

Phuket2

@abcabc , ran your code. Works well. But you are not centered in the view. Maybe there is a param I can't see. But on my iPad Pro 12 inch I get the below.

Edit: your x,y are off. Too much added somewhere