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

[jmv38]

Hello folks,

I am not happy with the various solutions to manage my photos on the ipad. I would like to have a panel with

• a container with a thumbnail of my photos, in 1 d, scollable
• several containers in which i can d&d the photos I want to assemble
• for each of those a page in wich i can arrange the selected photos in the layout i want
• save the layout in camera roll when i am happy with it
• save all the containers data so i can rework my choices.

ideally all these is real time. This is to prepare my printed photoalbums before ordering them (the online tools are way too slow and cumbersome and unaccurate to do the preparation work on them - I usually use ‘Print To Size’ app for that).
I think pythonista is able to do that. But i am not (yet).

Could you guys point out for me some existing code bricks you know about that I could re-use and assemble for this project?
I already heave found some excellent gesture repos, but not the scrollable photo container. I could do it myself but considering my poor python skills it is going to take me 2 or 3 weeks, so if i can use already available code, that’s good to spare the effort for the overall app. And i have noticed it is much easier for me to start from someone else good code and bend it to my will, rather than starting from scratch myself.

Please help me!
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

[cvp]

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