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.


    Containers for photos, with scroll, drag&drop between them

    Pythonista
    2
    47
    16766
    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.
    • cvp
      cvp @jmv38 last edited by cvp

      @jmv38 Little code, extracted from a big program, to show how to select a grid type.
      Some code may seem strange because used by removed parts.
      My big program, not yet ended, is used by my wife to join pictures in several different grids with moving lines. Program not completely operational and with' French messages.

      import ImageFont
      import ui
      
      def my_list_popover(elements,val=None,x=None,y=None,color='white',multiple=False,title=None,selectable=True):
      	global grids
      	class my_list(ui.View):
      		def __init__(self,selected):
      
      			# In multiple selection mode, an "ok" button is needed
      			if multiple:
      				ok_button = ui.ButtonItem()
      				ok_button.title = 'ok'
      				ok_button.action = self.ok_button_action
      				self.right_button_items = [ok_button]
      				
      			# ListDataSource for clients TableView
      			elements_lst = ui.ListDataSource(items=lst)
      			# ListDataSource has no attribute "name"
      			elements_lst.delete_enabled = False
      			elements_lst.move_enabled = False
      			elements_txt = ui.TableView(name='elements_txt')
      			elements_txt.allows_multiple_selection = multiple
      			elements_txt.allows_selection = selectable
      			elements_txt.text_color = 'black'
      			elements_txt.font= ('Courier',12)
      			if elements == grids:
      				elements_txt.row_height = 128
      			else:
      				elements_txt.row_height = elements_txt.font[1] * 2
      			h = len(lst) *	elements_txt.row_height
      			font = ImageFont.truetype('Courier',16)
      			w = 0
      
      			if elements == grids:
      				ws, hs = ui.get_screen_size()
      				w = int(elements_txt.row_height*ws/hs)
      				h_ele = elements_txt.row_height
      				h_max = h_screen*0.9
      			else:
      				for element in lst:
      					w_ele,h_ele = font.getsize(element)
      					if w_ele > w:
      						w = w_ele
      				w = w + 32
      				h_max = h_screen*0.8
      			elements_txt.content_size = (w,h)
      			if h > h_max:
      				h = h_max
      			w_max = w_screen - 20
      			if w > w_max:
      				w = w_max
      			elements_txt.frame = (4,4,w,h)	
      			#elements_txt.border_color = 'blue'
      			#elements_txt.border_width = 3
      			elements_txt.data_source = elements_lst
      			elements_txt.data_source.tableview_cell_for_row = self.tableview_cell_for_row
      			if not multiple:
      				if selected >= 0:
      					elements_txt.selected_row = (0,selected)
      			else:
      				if selected_lst != []:
      					elements_txt.selected_rows = selected_lst
      						
      			elements_txt.delegate  = self
      			self.add_subview(elements_txt)	
      			self.width = elements_txt.width   + 8
      			self.height = elements_txt.height + 8
      			self.corner_radius = 20
      			self.border_color = 'blue'
      			self.border_width = 2
      			self.background_color = color
      			if title and multiple:
      				# title bar displayed in multiple
      				self.name = title
      			self.pending = []
      
      		def ok_button_action(self,sender):
      			lst.append(str(multiples)) # '['xxxx','yyyy']'
      			v.close()
      			
      		def tableview_did_deselect(self, tableview, section, row):
      			# Called when a row was deselected (multiple only)
      			if multiple:
      				multiples.remove(lst[row])
      				#print(multiples)
      				
      		def tableview_did_select(self, tableview, section, row):
      			# Called when a row was selected
      			if multiple:
      				multiples.append(lst[row]) 				# ['xxxx','yyyy']
      				#print(multiples)
      			else:
      				lst.append(lst[row])
      				v.close()
      		
      		def tableview_accessory_button_tapped(self, tableview, section, row):
      			# Called when the accessory (ex: info) tapped
      			if multiple:
      				multiples.append('tapped'+lst[row])
      				lst.append(str(multiples)) 		# '['xxxx','yyyy','tapped.....']'
      			else:
      				lst.append('tapped'+lst[row]) # 'tapped...'
      			v.close()
      			
      		def tableview_cell_for_row(self, tableview, section, row):
      			cell = ui.TableViewCell()
      			selected_cell = ui.View()
      			selected_cell.border_color = 'black'
      			selected_cell.border_width = 2
      			selected_cell.corner_radius = 10
      			data = tableview.data_source.items[row]
      			if elements == grids:
      				selected_cell.bg_color = 'lightgray'
      			else:
      				selected_cell.bg_color = 'cornflowerblue'
      			cell.selected_background_view = selected_cell
      
      			cell.text_label.text = data
      			cell.text_label.alignment = ui.ALIGN_LEFT
      			ch1 = cell.text_label.text[0]						# 1st char of text
      			if ch1 == '🈸':
      				g = ui.Button()
      				g.background_color = 'white'
      				g.image = ui.Image.named('iob:grid_32')
      				g.width  = 28
      				g.height = 28
      				g.x = 12
      				g.y = 0
      				cell.content_view.add_subview(g)	
      			cell.text_label.text_color = 'black'
      			cell.bg_color = color
      				
      			if elements == grids:
      				cell.text_label.text = ''
      				h = tableview.row_height
      				w = tableview.width
      				rows = data.split('/')
      				ny = len(rows)
      				x0 = 2
      				y0 = 5
      				dy = int((h-2*y0)/ny)	
      				y = y0
      				bs = {}
      				for iy in range(0,ny):				# loop on rows
      					x = x0
      					nx = len(rows[iy])					# should be equal on each row
      					dx = int((w-2*x0)/nx)	
      					for ix in range(0,nx):
      						c = rows[iy][ix]					# cell n°
      						if c not in bs:
      							b = ui.Button()
      							b.enabled = False
      							if ix < (nx-1):
      								wx = dx
      							else:
      								wx = (w-2*x0) - x # force all last right same
      							b.border_width = 1
      							b.border_color = 'blue'
      							b.title = c
      							b.tint_color ='blue'
      							b.frame = (x,y,wx,dy)
      						else:
      							# split cell on several rows or columns: dx or dy will change
      							b = bs[c]
      							if b.y == y:
      								b.width = (x + wx - 1) - b.x + 1 # same row
      							else:
      								b.height = (y + dy - 1) - b.y + 1 # same col
      						bs[c] = b							
      						k = 'Photo ' + c
      						cell.content_view.add_subview(b)
      						x = x + dx - 1
      					y = y + dy - 1
      				del bs
      			return cell		
      	
      	lst = []
      	i = 0
      	selected = -1
      	if type(elements) is dict:
      		elements_list = sorted(elements.keys())
      	elif type(elements) is list:
      		elements_list = elements
      	if multiple:
      		# val = ['xxx','yyy']
      		if val:  # not None
      			val_lst = ast.literal_eval(val) # convert str -> dict
      		else:
      			val_lst = []
      		selected_lst = []
      		multiples = []
      	for element in elements_list:
      		lst.append(element)
      		if not multiple:
      			if element == val:
      				selected = i
      		else:
      			if element in val_lst:
      				selected_lst.append((0,i))
      				multiples.append(element)
      		i = i + 1
      	w_screen,h_screen = ui.get_screen_size()
      	if not x:
      		x = int(w_screen/2)
      	if not y:
      		y = int(h_screen/2)
      	v = my_list(selected)
      	# lst already copied into elements_lst, thus we can change lst
      	# to contain iniital value in case of tap outside
      	if selected == -1:
      		lst.append('')
      	else:
      		lst.append(lst[selected])
      	if not multiple:
      		v.present('popover',popover_location=(x,y),hide_title_bar=True)
      	else:
      		v.present('popover',popover_location=(x,y),hide_title_bar=False)
      	v.wait_modal()
      	return lst[len(lst)-1]	# return last
      	
      def main():
      	global grids
      	w,h = ui.get_screen_size()
      	mi = min(w,h)*0.9
      	mv = ui.View()
      	mv.frame = (0,0,mi,mi)
      	mv.name = 'Example of grids button'
      	mv.background_color = 'white'
      	grid = ui.ButtonItem()
      	grid.image = ui.Image.named('iob:grid_32')
      	grids = ['1', '12', '1/2','123', '11/23', '12/33',  '1/2/3', '12/32', '12/13', '1234', '111/234', '12/34', '123/444', '11/22/34', '12/33/44', '11/23/44', '1/2/3/4', '12/13/14', '12/32/42', '11/23/43', '123/143', '123/425', '1234/5678/9abc/defg', '12345/67890/abcde/fghij/klmno'] #, '5', '1/4', '4/1', '2/3', f'3/2', '1/1/3', '1/3/1', '2/1/2', '2/2/1', '1/2/2', '3/1/1','1/1/1/2', '1/1/2/1', '1/2/1/1', '2/1/1/1', '1/1/1/1/1']		
      	def grid_action(sender):
      		x = mi - 50
      		y = 50
      		g = my_list_popover(grids,-1,x=x,y=y,color='white')
      	grid.action = grid_action
      	mv.right_button_items = (grid,)	
      	mv.present('sheet')
      	
      # Protect against import	
      if __name__ == '__main__':
      	main()
      
      1 Reply Last reply Reply Quote 0
      • cvp
        cvp last edited by cvp

        I could agree to put in GitHub my program but I don't want to provide any support because it often crashes with big or multiple photos 😢 and I don't have enough free time to debug it.

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

          See also PhotosPickerView.py

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

            @cvp thanks for the 2nd example, it is inspiring.

            Actually i dont use grids i prefer to place and zoom and cut each photo manually.

            If you put your whole program in github i certainly wont demand support!

            I think I’ll post my work step by step in gists and this forum as I progress. Not sure how fast I’ll go though...

            Btw, I am french too (Grenoble) so no pb with the langage. I’ll continue anyway to write in english by respect for people in this forum.

            Thanks.

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

              @cvp from the doc, it seems the tableView is vertical only. Is there a way to have is horizontal too? Initially i wanted my camera roll container to be vertical, but the photo group containers to be horizontal (and themselves inside a scrollable vertical container too).
              So i should pbly use a scrollview instead for my base photo container?

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

                @cvp mmm PhotosPickerView.py seems a bit over my head, with all this objC functions...

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

                  @jmv38 said:

                  f you put your whole program in github i certainly wont demand support!

                  here

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

                    @jmv38 said:

                    seems a bit over my head, with all this objC functions...

                    It is not so complex as it seems...

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

                      @cvp thanks for juxtapositionDePhotos.py
                      all the bricks i need are there
                      => this is really going to help me.
                      thanks.

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

                        @jmv38 quick and dirty horizontal scroll view

                        import photos
                        import ui
                        
                        def main():
                        	assets = photos.get_assets()
                        	#assets = photos.pick_asset(assets=assets,multi=True)
                        	d = 100
                        	wsv = min(400,d * len(assets))
                        	sv = ui.ScrollView()
                        	sv.frame = (0,0,wsv,d)
                        	x = 0
                        	for i in range(0,len(assets)):
                        		b = ui.Button(name=str(i))
                        		#b = ui.ImageView(name=str(i))
                        		b.border_color = 'blue'
                        		b.border_width = 1
                        		ui_image = assets[i].get_ui_image().with_rendering_mode(ui.RENDERING_MODE_ORIGINAL)
                        		w,h = ui_image.size
                        		w = d * w/h
                        		b.frame = (x,0,w,d)
                        		b.image = ui_image
                        		def b_action(sender):
                        			sender.superview.name = 'tapped=' + sender.name
                        		b.action = b_action
                        		sv.add_subview(b)
                        		x = x + w
                        	sv.content_size = (x,d)
                        	sv.present('sheet')
                        
                        if __name__ == '__main__':
                        	main()
                        

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

                          @cvp excellent! thanks.
                          It is nice to have the function in a really small piece of code.
                          I had to limit the number of photos because i have 1600 and that crashes my app. I’ll manage that.

                          Another thing: for the interractions between panels i learned (from coding in Codea) that it is much easier to wire things together via a register/trigger message system. Do you have something available?

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

                            @jmv38 said:

                            it is much easier to wire things together via a register/trigger message system. Do you have something available?

                            No, never done like that. I always use normal way of ui. Good luck

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

                              @jmv38 said:

                              limit the number of photos because i have 1600

                              Perhaps, use collections or get_moments

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

                                @cvp here an example of a very simple event class i found on google and modified for my needs. I also added an example of usage.

                                class EventHook(object):
                                
                                    def __init__(self):
                                        self.__handlers = []
                                
                                    def __iadd__(self, handler):
                                        self.__handlers.append(handler)
                                        return self
                                
                                    def __isub__(self, handler):
                                        self.__handlers.remove(handler)
                                        return self
                                
                                    def __call__(self, *args, **keywargs):
                                        for handler in self.__handlers:
                                            handler(*args, **keywargs)
                                
                                    def clearObjectHandlers(self, inObject):
                                        for theHandler in self.__handlers:
                                            if theHandler.im_self == inObject:
                                                self -= theHandler
                                                
                                if __name__ == '__main__':
                                  class Watcher():
                                      def __init__(self):
                                          self.incoming = EventHook()
                                          self.leaving = EventHook()
                                  
                                  class Greeter():
                                    def __init__(self,me):
                                      self.me = me
                                    def sayHello(self, name):
                                      print('{}: hello Mister {}'.format(self.me,name))
                                    def sayGoodbye(self, name):
                                      print('{}: goobye Mister {}'.format(self.me,name))
                                      
                                  class Maid():
                                    def __init__(self,me):
                                      self.me = me
                                    def sayHello(self, name):
                                      print('{}: hello Mister {}'.format(self.me,name))
                                    def sayGoodbye(self, name):
                                      if name != 'DSK':
                                        print('{}: goobye Mister {}'.format(self.me,name))
                                      else:
                                        print('{}: You f... s.. o. a b...!'.format(self.me))
                                  
                                  from console import clear
                                  clear()
                                  Isee = Watcher()
                                  deskMan = Greeter('desk man Georges')
                                  maid = Maid('maid Sandra')
                                  
                                  # make the connections:
                                  Isee.incoming += lambda name: print('\nM. {} is comming...'.format(name))
                                  Isee.incoming += deskMan.sayHello
                                  Isee.incoming += maid.sayHello
                                  
                                  Isee.leaving += lambda name: print('\nM. {} is leaving...'.format(name))
                                  Isee.leaving += maid.sayGoodbye
                                  Isee.leaving += deskMan.sayGoodbye
                                  
                                  # remove listener from the event
                                  
                                  # fire event
                                  Isee.incoming('Clinton')
                                  Isee.leaving('Clinton')
                                
                                  
                                
                                cvp 1 Reply Last reply Reply Quote 0
                                • cvp
                                  cvp @jmv38 last edited by

                                  @jmv38 Too complex for me 😀

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

                                    @cvp i can understand what you feel: it is exactly what i thought the first time saw this! It took me several months to start to understand it, but once i did, bam!, it opened a huge box of possibilties because it made a complex project so much simpler. But I wont try to convert you, you’ll see for yourself as i use it in my project if you think it is usefull...
                                    Thanks.

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

                                      @cvp i am in the final polishing phase of my project.
                                      I have pb with button icons: they render in color when i want a gray rendering (the one shown in the editor).
                                      my code:

                                      img = ui.Image('iow:refresh_32').with_rendering_mode(ui.RENDERING_MODE_TEMPLATE)
                                          clear_button.image = img
                                      

                                      any suggestion?
                                      thanks.

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

                                        @jmv38 did you try ui.RENDERING_MODE_ORIGINAL

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

                                          @jmv38 this is ok, I think

                                          img = ui.Image('iow:refresh_32')#.with_rendering_mode(ui.RENDERING_MODE_ORIGINAL)
                                          b.image = img
                                          b.tint_color = 'gray'
                                          
                                          jmv38 2 Replies Last reply Reply Quote 0
                                          • jmv38
                                            jmv38 @cvp last edited by

                                            @cvp thanks.
                                            but it still doesnt work: now the button shows in gray, not white, and is not visible on my gray background.
                                            I wonder how to get it simply as it shows in the editor?

                                            cvp 1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post
                                            Powered by NodeBB Forums | Contributors