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

[jmv38]

@cvp wow! that was fast!!!
thanks a lot. This is pretty much exactly the first container i needed.
Now i should add other empty containers (perpendicular) and the drag and drop mechanism.
This really a good kickstart, thanks!

[cvp]

@jmv38 That has been fast because I already had written it 😂

[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()

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

[cvp]

See also PhotosPickerView.py

[jmv38]

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

[jmv38]

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

[jmv38]

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

[cvp]

@jmv38 said:

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

here

[cvp]

@jmv38 said:

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

It is not so complex as it seems...

[jmv38]

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

[cvp]

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

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

@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

[cvp]

@jmv38 said:

limit the number of photos because i have 1600

Perhaps, use collections or get_moments

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

@jmv38 Too complex for me 😀

[jmv38]

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

[jmv38]

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

@jmv38 did you try ui.RENDERING_MODE_ORIGINAL