Tab layout

[FoamyGuy]

This adds a new TabLayout class with a simpletest example illustrating it's usage.

Also changed _page_content_list inside page_layout to be public (no leading underscore) because its reasonable for code outside of it to make use of that attribute, which the TabLayout does.

Also noticed page_layout wasn't include in api.rst for the docs so I added that as well.

[FoamyGuy]

I think this is ready for review now. Here is a quick video showing the new touch example:

tab_layout_touch.mp4

Requires CircuitPython Version 7.3.0-beta.2 or newer.

[ladyada]

@makermelissa wanna try this out?

[makermelissa]

This works nicely in CircuitPython 7.3.0 Beta 2, but fails on anything earlier with this error including 7.2.5:

code.py output:
creating tab 0
Traceback (most recent call last):
  File "code.py", line 114, in <module>
  File "/lib/adafruit_displayio_layout/layouts/tab_layout.py", line 195, in add_content
  File "/lib/adafruit_displayio_layout/layouts/tab_layout.py", line 170, in _draw_tabs
AttributeError: 'TileGrid' object has no attribute 'bitmap'

Code done running.

[makermelissa]

This should work for the latest "stable" release.

[FoamyGuy]

This should work for the latest "stable" release.

I don't think there is an easy way to make it work with current stable because it utilizes the new bitmap setter property on TileGrid that came from #6270 which was merged after current stable.

We could try to add a more prominent warning in the meantime, or hold off until there is a new stable release made.

[makermelissa]

We could try to add a more prominent warning in the meantime, or hold off until there is a new stable release made.

A more prominent warning would be fine. That way it doesn't look like a bug.

[FoamyGuy]

Latest commit re-raises the error with a more specific message about the required version.

Also adds a warning to the docs page:

[makermelissa]

Tested and looks good. Thanks.

[aioue]

For folks who want to help test future PRs out, as a newbie I struggled to figure out the practical steps to test this example. Eventually figured it out.

Steps to test

• Check out the PR branch (pr/70) and copy the adafruit_displayio_layout and examples directories to your PyPortal

• Edit code.py in the root directory and add code to import the libraries and run the example:

  import adafruit_displayio_layout.layouts
  import os
  os.chdir("examples")
  import displayio_layout_tab_layout_touchtest

  Without the chdir, the 'bmps' referenced by the example are not found.

Tree view for reference

Click here to expand my file tree view

/Volumes/CIRCUITPY
├── adafruit_displayio_layout
│   ├── __init__.py
│   ├── layouts
│   │   ├── __init__.py
│   │   ├── grid_layout.py
│   │   ├── page_layout.py
│   │   └── tab_layout.py
│   └── widgets
│       ├── __init__.py
│       ├── cartesian.py
│       ├── control.py
│       ├── easing.py
│       ├── flip_input.py
│       ├── icon_animated.py
│       ├── icon_widget.py
│       ├── switch_round.py
│       └── widget.py
├── boot_out.txt
├── code.py
├── examples
│   ├── bmps
│   │   ├── active_tab_sprite.bmp
│   │   ├── active_tab_sprite.bmp.license
│   │   ├── inactive_tab_sprite.bmp
│   │   └── inactive_tab_sprite.bmp.license
│   ├── displayio_layout_cartesian_advanced_test.py
│   ├── displayio_layout_cartesian_lineplot.py
│   ├── displayio_layout_cartesian_simpletest.py
│   ├── displayio_layout_flip_input_simpletest.py
│   ├── displayio_layout_grid_layout_get_cell_test.py
│   ├── displayio_layout_gridlayout_dividers.py
│   ├── displayio_layout_gridlayout_pygame_display_simpletest.py
│   ├── displayio_layout_gridlayout_simpletest.py
│   ├── displayio_layout_icon_animated_simpletest.py
│   ├── displayio_layout_page_layout_advancedtest.py
│   ├── displayio_layout_page_layout_simpletest.py
│   ├── displayio_layout_pygame_display_switch_round.py
│   ├── displayio_layout_simpletest.py
│   ├── displayio_layout_switch_multiple.py
│   ├── displayio_layout_switch_simpletest.py
│   ├── displayio_layout_tab_layout_simpletest.py
│   ├── displayio_layout_tab_layout_touchtest.py
│   ├── fonts
│   │   ├── DSEG14Classic-Regular-64-ModS.pcf
│   │   └── DSEG14Classic-Regular-64-ModS.pcf.license
│   └── icons
│       ├── Play_48x48_small.bmp
│       └── Play_48x48_small.bmp.license

Test results

CircuitPython 7.3.0-beta.2
Board ID: pyportal_titano

import displayio_layout_tab_layout_touchtest All 4 tabs render and touch works.
import displayio_layout_tab_layout_simpletest Shows interface tab 3 (index 2) briefly (about half a second) and then drops to text Code done running.

[FoamyGuy]

@aioue thanks again for posting these details for other folks to find.

Here is the process I usually use for testing:

Check out the pr branch (the gh command line tool makes this super easy gh pr checkout 70 but there are other ways to do it too.

Copy the modified library from the PR branch to your device inside of lib directory. So in this case you'd end up with:

CIRCUITPY/lib/adafruit_displayio_layout/

If there are other requisite files copy them into the root of your CIRCUITPY drive (including any containing directories). So in this case you'd have:

CIRCUITPY/bmps/inactive_tab_sprite.bmp
CIRCUITPY/bmps/active_tab_sprite.bmp

Lastly we want to get the example script onto the device and named code.py So there are two ways you could do it.

Either 1) copy displayio_layout_tab_layout_touchtest.py and paste it in CIRCUITPY then rename it code.py

Or 2) open displayio_layout_tab_layout_touchtest.py in a text editor, select all and copy all of it's contents then open code.py in a text editor and paste all of those contents into it.

I don't think either way is really more proper than the other. I'd say go with whatever feels best / easiest / most convenient to you.