Page changer¶

If you have more than a couple matrix pages, you probably want to dedicate a group of buttons as a page changer, letting you switch to any page instantly. Each demo config has a page changer already, but in this lesson we'll learn how to build one from scratch and customise it.

Instructions¶

In this example we'll dedicate eight named controls to the changer. but you may use any number of controls. Instead of named controls, you may use a matrix section with a section template, but make sure the section appears on every page!

Create the group¶

We'll start by grouping our eight controls. If you have less than eight pages, you may choose to use fewer controls. Alternatively, leave it at eight, and when you add a page in the future, there will already be a button assigned to it.

named_controls.yaml

__page_changer:
  includes: [state_1, state_2, state_3, state_4, state_5, state_6, state_7, state_8]

These control names come from the Ableton Push. If you're unsure which names to use, check the hardware reference.

Assign the pages¶

To get LED feedback about the active page, we'll set type: page to make these controls page controls.

Every page control has a mandatory page option, so we'll use a template string to set that dynamically:

named_controls.yaml

__page_changer:
  includes: [state_1, state_2, state_3, state_4, state_5, state_6, state_7, state_8]
  type: page
  page: ${me.index}

You'll see stuff like page: ${me.index} all the time. This just means that state_1 will be page: 0, state_2 will be page: 1, and so on (pages are zero-indexed). If we didn't use templates here, we'd have to type out the page for each control.

Assign gestures¶

Ok, now each control is assigned to a page, but pressing the control doesn't do anything. That's because we still need to set the gestures:

named_controls.yaml

__page_changer:
  includes: [state_1, state_2, state_3, state_4, state_5, state_6, state_7, state_8]
  type: page
  page: ${me.index}
  gestures:
    pressed:
      page: ${me.index}

By using the page command, our controls are now functional!

Peeking at pages¶

With a small addition to our gestures, we can hold a page control to "peek" at its page, and then release it to return to whatever page we were on before:

named_controls.yaml

__page_changer:
  includes: [state_1, state_2, state_3, state_4, state_5, state_6, state_7, state_8]
  type: page
  page: ${me.index}
  gestures:
    pressed:
      page: ${me.index}
    released_delayed:
      page: last

Assigning colors¶

We can customise the changer by setting the options active_color and inactive_color:

named_controls.yaml

__page_changer:
  includes: [state_1, state_2, state_3, state_4, state_5, state_6, state_7, state_8]
  type: page
  page: ${me.index}
  gestures:
    pressed:
      page: ${me.index}
    released_delayed:
      page: last
  active_color: white
  inactive_color: dark_grey

Individual colors¶

By overriding the group definition, we can set a particular color for some or all of the controls:

named_controls.yaml

__page_changer:
    # ... config as above
    active_color: white
    inactive_color: dark_grey
    controls:
      state_1:
        inactive_color: pink
      state_6:
        inactive_color: red
    # etc...

Final output¶

Named controls version¶

named_controls.yaml

__page_changer:
  includes: [state_1, state_2, state_3, state_4, state_5, state_6, state_7, state_8]
  type: page
  page: ${me.index}
  gestures:
    pressed:
      page: ${me.index}
    released_delayed:
      page: last
  active_color: white
  inactive_color: dark_grey

Matrix section version¶

matrix_sections.yaml

page_changer_section:
  row_start: 0 # the top matrix row
  row_end: 0
  col_start: 0
  col_end: 7
  template:
      type: page
      page: ${me.index}
      gestures:
        pressed:
          page: ${me.index}
        released_delayed:
          page: last
      active_color: white
      inactive_color: dark_grey

No need to create matrix_sections/page_changer_section.yaml