omz:forum

    • Register
    • Login
    • Search
    • Recent
    • Popular

    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.


    [Share] a list of rects distributed around 360 degrees

    Pythonista
    circle rects share 360
    5
    44
    29530
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Phuket2
      Phuket2 last edited by

      @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. 💋💋💋

      1 Reply Last reply Reply Quote 0
      • Phuket2
        Phuket2 last edited by

        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)]
        

        1 Reply Last reply Reply Quote 0
        • cvp
          cvp last edited by cvp

          a = -2 * math.pi * (i + 1) / num_objs + math.radians(-135)
          pos = math.sin(a) * radius, math.cos(a) * radius
          
          1 Reply Last reply Reply Quote 0
          • cvp
            cvp last edited by 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
            
            1 Reply Last reply Reply Quote 0
            • cvp
              cvp last edited by cvp

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

              Phuket2 1 Reply Last reply Reply Quote 1
              • Phuket2
                Phuket2 @cvp last edited by 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)
                
                1 Reply Last reply Reply Quote 0
                • cvp
                  cvp last edited by

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

                  Phuket2 1 Reply Last reply Reply Quote 1
                  • Phuket2
                    Phuket2 @cvp last edited by

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

                    1 Reply Last reply Reply Quote 0
                    • abcabc
                      abcabc last edited by

                      @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.

                      1 Reply Last reply Reply Quote 0
                      • cvp
                        cvp last edited by 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

                        1 Reply Last reply Reply Quote 0
                        • abcabc
                          abcabc last edited by

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

                          Phuket2 2 Replies Last reply Reply Quote 0
                          • cvp
                            cvp last edited by

                            @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

                            1 Reply Last reply Reply Quote 0
                            • abcabc
                              abcabc last edited by

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

                              1 Reply Last reply Reply Quote 0
                              • Phuket2
                                Phuket2 @abcabc last edited by

                                @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.

                                1 Reply Last reply Reply Quote 0
                                • Phuket2
                                  Phuket2 @abcabc last edited by 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

                                  1 Reply Last reply Reply Quote 0
                                  • Phuket2
                                    Phuket2 last edited by

                                    Sorry a little out of sync with some of my comments. I am not sure it's just me or not, but I have had a hard time replying the last 40 mins or so.

                                    1 Reply Last reply Reply Quote 0
                                    • abcabc
                                      abcabc last edited by

                                      @Phuket2 There could be some problem with centering. I will look into that. Anyway I have to do some more testing.

                                      1 Reply Last reply Reply Quote 0
                                      • Phuket2
                                        Phuket2 last edited by

                                        Below is a pretty nice adaptation of using the shared function here, after it's been fixed up 😱

                                        But for use in this function or not, the get_rotated_icon function is nice or let's say functional. Simple function, code comes from help from omz on a similar subject. Probably not for 60fps stuff, but I think good for ui stuff.

                                        import editor
                                        import math
                                        import ui
                                        
                                        # this is a pretty funky function...
                                        def get_rotated_icon(named_icon_name, wh = 32, degree = 0):
                                        	'''
                                        		help from @omz
                                        		https://forum.omz-software.com/topic/3180/understanding-ui-transform-rotation
                                        	'''
                                        	r = ui.Rect(0, 0, wh, wh)
                                        	img = ui.Image.named(named_icon_name)
                                        	with ui.ImageContext(wh, wh) as ctx:
                                        		ui.concat_ctm(ui.Transform.translation(*r.center()))
                                        		ui.concat_ctm(ui.Transform.rotation(math.radians(degree)))
                                        		ui.concat_ctm(ui.Transform.translation(*r.center() * -1))
                                        		img.draw()
                                        		return ctx.get_image()
                                        		
                                        def make_button(idx, title, name = None):
                                        	def button_action(sender):
                                        		print('Button {} was pressed.'.format(sender.name))
                                        		
                                        	#btn = ui.Button(title=calendar.month_abbr[i+1])
                                        	name = name if name else title
                                        	btn = ui.Button(name = name, 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
                                        	
                                        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)]
                                        
                                        class MyClass(ui.View):
                                        	# some ideas
                                        	_list=['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW' ]
                                        	
                                        	def __init__(self, *args, **kwargs):
                                        		super().__init__(*args, **kwargs)
                                        		self.cir_rect = None
                                        		self.obj_list = []
                                        		self.mid_btn = None
                                        		
                                        		self.make_view()
                                        		
                                        	def make_view(self):
                                        		for i in range(len(self._list)):
                                        			obj = make_button(i, title=self._list[i])
                                        			obj.image = get_rotated_icon('iob:arrow_up_a_256', wh = 256, degree = i * 45)
                                        			self.obj_list.append(obj)
                                        			self.add_subview(obj)
                                        		
                                        		btn = make_button(i, title='C')
                                        		self.mid_btn = btn
                                        		self.add_subview(btn)
                                        		
                                        			
                                        	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.obj_list):
                                        			btn.frame = rects[i]
                                        			btn.title = ''
                                        			btn.corner_radius = btn.width / 2
                                        		
                                        		btn = self.mid_btn
                                        		btn.center = r.center()
                                        		btn.corner_radius = btn.width / 2
                                        		
                                        	def draw(self):
                                        		# just to see the path when testing...
                                        		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 = 600
                                        	f = (0, 0, w, h)
                                        	
                                        	mc = MyClass(frame=f, bg_color='white')
                                        	
                                        	if not _use_theme:
                                        		mc.present('sheet', animated=False)
                                        	else:
                                        		editor.present_themed(mc, theme_name='Oceanic', style='sheet', animated=False)
                                        				
                                        

                                        1 Reply Last reply Reply Quote 0
                                        • JonB
                                          JonB last edited by

                                          FWIW,
                                          https://gist.github.com/6fc02b7d75eb22111b826cfdb2394697
                                          is an example using ui.Transform to simulate your last imagE. Probably not as useful, but compact in this case.

                                          Phuket2 1 Reply Last reply Reply Quote 0
                                          • abcabc
                                            abcabc last edited by

                                            @JonB very nice. I have changed your code slightly to do a "semi-circular layout" which seems to be used in some of the ios applications.

                                            import ui, calendar
                                            from math import pi, sin, radians
                                            
                                            def make_button(i, v, N):
                                                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.height=btn.width=64
                                                btn.alpha = sin(radians(15.+75.0/(N-1)*i))
                                                btn.border_width = .5
                                                btn.corner_radius = btn.width *.5
                                                btn.bg_color = 'orange'
                                                btn.text_color = btn.tint_color = 'black'
                                                center_x, center_y = v.bounds.center()
                                                btn.center = (btn.width/2+5.0, center_y) #v.bounds.center()
                                                btn.transform=ui.Transform.translation(0,-(v.height/2-btn.height/2)
                                                                    ).concat(ui.Transform.rotation(2.*pi*i/N))
                                                return btn
                                                
                                            v=ui.View(frame=(0,0,576,576))
                                            v.bg_color=(1,1,1)
                                            N = 12
                                            N1 = 7
                                            for i in range(0,N1):
                                                v.add_subview(make_button(i, v, N))
                                            v.present('sheet')
                                            
                                            1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post
                                            Powered by NodeBB Forums | Contributors