UIPageControl (Paging scrollview with page indicators)

stephen

Layout

pythonista Docs


def layout(self):
        # This will be called when a view is resized. You should typically set the
        # frames of the view's subviews here, if your layout requirements cannot
        # be fulfilled with the standard auto-resizing (flex) attribute.
        pass

often used to signal when screen orientation has changed.

also in scene Module

def did_change_size(self):
	pass

stephen

@Samer Heres a scene example being used to adust the gui when orientation changes. i apologize about the clutter i just grabbed from a current project so the codevwont run as is. just a visual use example. hope it helps..


class UICanvas(GameObject):
	def __init__(ns, size,  *args, **kwargs):
		GameObject.__init__(ns)
		ns.size=size
		ns.OverlaySize=Point(0.0, 0.0)
		ns.joySize=Point(128, 128)
		
	def awake(ns):
		pass
		
	def start(ns):
		w, h = ns.size
		

	def OnEvent(ns, e):
		return
		
	def fixed_update(ns):
		pass
		
	def JoyStick(ns, w, h):
		zp=0
		xs=1.0
		ys=1.0
		a=1.0
		spd=1.0
		par=ns
		sz=Size(64, 64) if w > 700 else Size(40, 40)
		pos=Point(0,0)
		
		if  w > h:
			if w > 700:
				pos=Point(w-w/8, h/6)
			else:
				pos=Point(w-w/8, h/6)
		elif w < h:
			if w > 700:
				pos=Point(w-w/6, h/8) 
			else:
				pos=Point(w-w/6, h/10) 
		
		
		col=(0.91, 0.99, 1.0, 1.0)
		bm=0
		ap=Point(0.5, 0.5)
		TJoy=cache['overlay-joy']
		if 'joy' in UIObjects.keys() and UIObjects['overlay'].size != size:
			UIObjects['joy'].remove_from_parent()
			UIObjects.pop('joy', None)
		elif 'joy' not in UIObjects.keys():
			UIObjects['joy']=None
		else:
			return True
		UIObjects['joy']=UIComponent(TJoy, position=pos, z_position=zp,
					alpha=a, speed=spd, parent=par, size=sz, color=col,
					blend_mode=bm, anchor_point=ap)
	
	def Overlay(ns, w, h):
		pos=Point(0.0, 0.0)
		zp=0
		xs=1.0
		ys=1.0
		a=1.0
		spd=1.0
		par=ns
		sz=Size(w, h)
		col=(0.91, 0.99, 1.0, 1.0)
		bm=0
		ap=Point(0.0, 0.0)

		TLand=cache['overlay-land']
		TPort=cache['overlay-port']
		
		if 'overlay' in UIObjects.keys() and UIObjects['overlay'].size != size:
			UIObjects['overlay'].remove_from_parent()
			UIObjects.pop('overlay', None)
		elif 'overlay' not in UIObjects.keys():
			UIObjects['overlay']=None
		else:
			return True
		if w < h:
			if w<700:
		 		sz=Size(w, h/10*8)
			UIObjects['overlay']=UIComponent(TPort, position=pos, z_position=zp,
					alpha=a, speed=spd, parent=par, size=sz, color=col,
					blend_mode=bm, anchor_point=ap)
		elif w > h:
			UIObjects['overlay']=UIComponent(TLand, position=pos, z_position=zp,
					alpha=a, speed=spd, parent=par, size=sz, color=col, 
					blend_mode=bm, anchor_point=ap)
	
	def AddUIObject(ns, k, v):
		ns.add_child(v)
		UIObjects[k]=v
		ns.tally.components+=1

	def refresh(ns, ss):
		w, h=ss
		ns.Overlay(w, h)
		ns.JoyStick(w, h)
	


class Loop(Scene):
	__name__='GameLoop'
	def setup(ns):
		ns.background_color=(0.5, 0.5, 0.5)
		PopulateCache()
		for k,v in cache.items():
			cache[k]=Texture(v)
			
		ns.canvas=UICanvas(ns)
		ns.canvas.refresh(ns.size)
		ns.add_child(ns.canvas)
		
		ns.actor1=Actor(cache['hitbox-solid'], 'test, Actor1', size=ns.size/10,
						 position=ns.size/2, parent=ns)
		ns.tally=Tally(['gameobjects', 'giobjects', 'resources', 'mobs', 'npcs'])
		
	def update(ns):
		pass
	
	def did_change_size(ns):
		SCREEN_RESOLUTION=ns.size
		ns.canvas.refresh(ns.size)
	
	def AddObject(ns, k, v):
		pass

	def LoadWorld(ns):
		pass

mikael

@Samer, what @stephen said. It is a method you override in your ui.View subclass to react to changes in the view's size, usually due to rotation.

Samer

I have a quick question about:

The color properties are convenient, but return None if the defaults are not changed. I would prefer just to use a "reverse" color function, see below. It would have the additional benefit of removing the extra internal variables.
def _py_color(self, objc_color):
   return tuple([c.floatValue() for c in objc_color.arrayFromRGBAComponents()])

Specifically what you were referring to with arrayFromRGBAComponents() I wasn’t able to find a reference to it anywhere. Also i’m assuming that by objc_color I would be passing in the UIColor that _objc_color creates.
Scratch that, Turns out I was passing in the wrong thing.

Thank you everyone for all the help, I really appreciate it!

Samer

I have just edited the post with a new version. (v0.3 as i’m calling it).

mikael

@Samer, thanks.

Couple of bug fixes:

After moving changePage out of the init, it no longer works, because target goes out of scope. This is easily fixed by retaining the reference, i.e. using self.target everywhere where you had target, or maybe self._target since it is not exactly part of your component's "public API".
As a property, tint_color conflicts with ui.View's property by the same name, so we need to give it another name. To make them easier to remember and consistent, I would suggest indicator_tint_color and indicator_current_color – a bit verbose, but maybe we prioritize clarity over brevity as they are unlikely to be typed a lot.
On phones the control moves just outside the screen when the phone is rotated – and even if we change the multiplier to a smaller value, there is a chance that it hits the "swipe up from the bottom" indicator that the phones have. To make this more robust, I suggest we let iOS handle it by:
- Using the safe area to avoid any on-screen extras.
- Letting the control calculate the right size for it.
  ... but especially the safe area is a bit tricky, let me get back to you when I have more time.

Simplification suggestions:

contentOffset looks to me like maybe outdated code, as it is set to 0, in add_subview and is thus harmless, but if developer set the view's x to some value before adding the subview, would cause problems. Recommend removing if you did not have some specific idea for it.
ui.Views have a handy feature where they apply all keyword arguments to self. Combined with having properties this means that we do not need to explicitly include those in our init parameters, or have the ifsections of code, as long as we add **kwargs to the init parameters and call super().__init__(**kwargs) somewhere in the init code. (I use this so often that I have made it into a Pythonista snippet.) In the case of your component, the super()... call needs to be at the end of the init to have self.pageControl created and available.
Not a necessary change for this code, but an idea for future projects: the same keyword-setting idea works with other views, so you could avoid typing self.scrollView n times and make the ScrollView creation more readable by changing it to:
```
  self.scrollView = ui.ScrollView(
      delegate=self,
      paging_enabled=True,
      shows_horizontal_scroll_indicator=False,
      bounces=False,
      frame=self.bounds, flex='WH',
  )
```
Also, note the suggestion on how to set the frame and flex above – this removes the need to manually keep the ScrollView's size in sync with your component in the layout method. (Also used so often that I have snippet for the frame/flex combo.)

And feature suggestions:

Exposing a page_changed callback with a delegate parameter for self.
Including a set_page method to scroll to a specific page programmatically. To keep things neat, changePage could also call the same method.
Adding a property to hide the control when there is only one page (hidesForSinglePage), and going against Apple, I would say the default should be True.

mikael

@Samer, ok, here’s how to set the control size and position safely on all devices:

safe_bottom = self.bounds.max_y - self.objc_instance.safeAreaInsets().bottom
size = self.pageControl.sizeForNumberOfPages_(
    self.pageControl.numberOfPages())
self.pageControl.frame = CGRect(
    (self.bounds.center().x - size.width/2,
    safe_bottom - size.height),
    (size.width, size.height))

ccc

size.width / 2 --> size.width // 2 to deal with size.width being odd?

mikael

@ccc, screen coordinates are floats.

Samer

@mikael Thank you again for this feedback.

What do you mean by:

Exposing a page_changed callback with a delegate parameter for self.

I have not played around with callbacks very much and would appreciate some guidance on how to implement something like this.

mikael

@Samer, I guess it sounds grander than it is.

What I meant is that in the scrollview_did_scroll method, you could check if self has an attribute delegate, and if that object has a callable attribute called page_changed, then we call that with some suitable parameters. Following the other Pythonista UI classes, parameters could be self and page_number.

scrollview_did_scroll gets called a lot, not just once per page, so we would need to keep track of the previous page number and only call the delegate when there is a change.

End result, people can set a delegate on your component to get notified when the page changes.

stephen

@mikael are you talking about somthing like this?

class MyDel:
	def __init__(self, sv):
		self.sv=sv
		self.current_page=sv.current_page
		self.prev_page=None
        self._refresh()

	def page_changed(self, scroll_view, page):
		pass
		
	def _refresh(self):
		if self.sv:
			if self.current_page != self.sv.current_page:
				self.page_changed(self.sv, self.sv.current_page)
				self.prev_page=self.current_page
				self.current_page=self.sv.current_page
			self.sv.refresh()
			
		
class MyScroll(ui.View):
	def __init__(self):
		self.delegate=MyDel(self)
		self.current_Page=0
		
	def _refresh(self):
		if self.delegate:
			self.delegate.refresh()

mikael

@stephen, not quite. The delegate (or the developer using the page control component) should not need to think about whether the page has changed; it only gets a notification when the page has changed.

Thus no _refresh, no book-keeping in the user's side, just a self.previous_page to compare to in the scrollview_did_scroll method of @Samer's component.

stephen

@mikael ok i didnt click we are using an already exsisting callback method. i was thinking of a Base Class form implemention.

so like this?


class MyDel:
    def __init__(self, sv):
        self.current_page=sv.current_page
        self.prev_page=None
       

    def page_changed(self, sv, new-page):
        pass
        
    def scrollview_did_scroll(self, scrollview):
        if self.sv == scrollview:
            if self.current_page != scrollview.current_page:
                self.page_changed(scrollview, scrollview.current_page)
                self.prev_page=self.current_page
                self.current_page=self.sv.current_page
            self.sv.refresh()
            
        
class MyScroll(ui.View):
    def __init__(self):
        self.delegate=MyDel(self)
        self.current_Page=0

but what happends if self.current_page changes with no call to delegate scrollview_did_scroll due to button activation or key entry? wouldnt that delay any needed action on a method, for example, called page_opend or page_should_open?

i dont mean to over think i just want to make sure i understand completely 😅

EDIT:

wnted to clerify i do understand you mean use self as delegate and not other object i just separated for clearity. 😊

Samer

I just edited the post with v0.4. Let me know what you people think!

stephen

@Samer Good work brother 😊 is this for exploration of ui module or project?

Samer

@stephen A bit of both, I have a project in the works that started out as a way to explore the ui module, it then morphed into learning about the objc_utils module a bit (MapView, ProgressView, UIPageControl) and then finally into wanting to create an app for the app store. This is just one part of a larger project. However I have probably had the most fun on this one part then all the others combined.

mikael

@Samer, good job!

Just a few more things come to mind. Seems like this fun is coming to an end.

Recommend adding an explicit call to self.layout() at the end of add_subview. Layout does get called without it, but only later, triggered by the UI loop, which can cause flickering when a view is momentarily visible in the wrong place.
_trigger_delegate is called both in set_page and scrollview_did_scroll. Since set_page sets the content_offset which then triggers scrollview_did_scroll, you should not need to call _trigger_delegate in set_page at all.
Also, it would make more sense to me to call _trigger_delegate last in scrollview_did_scroll, after the new page number has been set. The way it is now works only, I think, because there is so many scrolling events in every move from page to page.
Recommend moving sampleDelegate (should be upper case) and example within the if __name__ block. That way they do not unnecessarily get imported in "prudction use", and pollute the component's namespace.

Samer

@mikael And with that all the changes are implemented.

mikael

@Samer, tried it out, just to get the ”developer experience”.

image_names = ['test:Boat', 'test:Lenna', 'test:Mandrill', 'test:Peppers']

pages = PageControl(
    background_color='black',
    indicator_tint_color='grey',
    indicator_current_color='white'
)

for image_name in image_names:
    pages.add_subview(ui.ImageView(
        image=ui.Image(image_name),
        content_mode=ui.CONTENT_SCALE_ASPECT_FIT))
        
pages.present('fullscreen', 
    hide_title_bar=True
)

Nice and tight, with nothing extra.

But, noticed a problem where on the first scroll the images jump down a little bit. I also tried changing the content size to the actual vertical content size, but then ended up having vertical scrolling, and images below the vertical center.

@Samer, which device are you using, are you seeing the same?