Patterns Tutorial - UNC-Project-Open-AAC/OS-DPI GitHub Wiki

Simple Patterns Tutorial

There are countless ways to simulate scanning patterns in OS-DPI. Here are step-by-step directions to get you started with a few sample scanning patterns.

First, decide how you want the scanning pattern to operate. Examples:

  1. Every button on the screen gets scanned linearly.
  2. Scanning occurs row by row.
  3. Scanning occurs column by column.
  4. Scanning occurs in sections (e.g., keyboard, then the control buttons, then the word prediction buttons).

You might find it helpful to sketch out potential scanning patterns using a tool like Excalidraw.

For this step-by-step guide, we will be working within a keyboard with word prediction design.

Download and open the file to follow along. The spreadsheet for this design is viewable by clicking File, --> Save Sheet in the OS-DPI toolbar. You will see that the sheet is organized into two sheets (1) keyboard; (2) predictions. The keyboard sheet is where the content for the keyboard is arranged. On the predictions sheet, we've listed possible word predictions that will populate in the design.

For more information on how data is managed within sheets, check out this resource.

Let’s get oriented with the design.

There are several layout components for this keyboard with word prediction design:

  1. Display (or Message Window)
  2. Word prediction grid (i.e., ‘grid predict’)
  3. Keyboard grid with letters and controls (i.e., ‘grid kb’)
  4. Button (i.e., ‘Button spacebar)

This simple keyboard UI supports use of word prediction, toggling between upper and lower case, adding spaces, and clearing the display. The example is used to emulate multiple scanning patterns, including:

  1. Scanning Pattern #1 – Every Button Linearly
  2. Scanning Pattern #2 – Keyboard Then Word Prediction
  3. Scanning Pattern #3 – Keyboard Row by Row
  4. Scanning Pattern #4 – Grouped Components

Scanning Pattern #1 - Linear

Scanning Pattern #1 enables 2-switch scanning and scans each location on the screen one by one. As illustrated in the screenshot below (icon "a" is scanned first and has a yellow cue), the scanning pattern starts in the first location in the word prediction grid and then moves linearly through all parts of the layout in this example UI.

To achieve Scanning Pattern #1:

  1. Click on the Patterns tab.
  2. You can edit any of the pre-loaded patterns, but for this tutorial we will edit “None”.
  3. Click on None.
  4. In the Name box, type Linear.
  5. Check Default box.

Note: This Default pattern will be referenced in the Methods tab.

  1. Specify a preferred Cue (e.g., yellow overlay).

Note: The Default Cue is specified in the Cues tab. Cue options can be expanded using Cascading Style Sheets (CSS). For a more detailed explanation on the Cues and Methods settings refer to the Wiki pages Cues and Methods.

  1. Click on the Methods tab. In a new design, there are default Methods for your use. However, these are totally customizable. The default Methods can be deleted and replaced, or adapted to fit your design. For this simple patterns tutorial, we are adapting a default Method.
  2. Click on Switch.
  3. Check Default box to be sure that this pattern is activated. You may have other scanning patterns loaded into the design, but the one specified as Default will be activated.
  4. For this example, we are enabling 2-switch (i.e., 2-key) scanning. The Key Handler(s) define the signals, keys, conditions and responses used. The Key signal dropdown defines if activation is on the key being released (e.g., Key Up) or when depressed (e.g., Key Down). The Keys dropdown defines the key associated with the specified Responses (e.g., next, activate) and any Conditions that must be met.

Video tutorial of above steps: [link needed]

Scanning Pattern #2

Next, let’s look at the steps to create a scanning pattern that scans the keyboard (letter-by-letter) and then scans the word prediction bar.

To achieve this scanning pattern:

  1. Click on the Patterns tab.
  2. You can edit any of the pre-loaded patterns. For this tutorial we will edit None. Click on None.
  3. In the Name box, type Keyboard then Prediction.
  4. Check Default box to be sure that this pattern is activated. You may have other scanning patterns loaded into the design, but the one specified as Default will be activated.
  5. Specify a preferred Cue (e.g., yellow overlay).

This scanning pattern differs from Scanning Pattern #1 because in this pattern, we need to specify the components of the screen to be scanned by adding Selectors to the pattern.

The example UI includes a keyboard grid with letters and controls, a word prediction grid, and a space button. We will define a Pattern using Selectors to first scan the keyboard grid, then space bar, then word prediction grid. For this design we need 3 different Selectors.

Follow these steps to add Selectors to the Pattern:

  1. Click on Add in the toolbar, then Selector. Repeat so that you have a total of 3 Selectors.
  2. We are only using the Filter in this design, not the Group By or Order By pieces. Those can be deleted by clicking on each, then Edit, Delete. Or, you can choose to leave them empty.
  3. Add a Filter by clicking on Add, then Filter.
  4. In the Filter box, type #ComponentName = 'kb'. “#ComponentName” is a built-in Filter in the OS-DPI which specifies the Name property of the component. Here, kb stands for keyboard as it was named kb in Layout. (see screenshot below)
  1. In the second Selector box, add another Filter.
  2. In the Filter box, type #ComponentName = 'spacebar'. In this example layout, the spacebar was defined as a separate Button component, separate from the keyboard and word prediction grids.
  3. In the third Selector box, add another Filter.
  4. In the Filter box, type #ComponentName = 'predict'.

Video tutorial of above steps: [link needed]

Scanning Pattern #3

Next, we will look at how to create a scanning pattern that scans the keyboard grid (row-by-row instead of letter-by-letter as we did previously), then the spacebar button, then the word prediction grid.

To achieve this scanning pattern:

  1. Click on Patterns tab.
  2. You can edit any of the pre-loaded patterns, but for this tutorial we will edit Row Column. Click on Row Column.
  3. In the Name box, type Keyboard with Rows then Prediction.
  4. Check Default box.
  5. Specify the Cue according to your own design.

Just like Scanning Pattern #2 described previously, this pattern requires the use of Selectors to determine areas of the screen to be scanned. For this design we again need 3 different Selectors.

  1. Click on Add, then Selector. Repeat for a total of 3 Selectors.
  2. Add a Filter by clicking on Add, then Filter.
  3. In the Filter box, type #ComponentName = 'kb'.
  4. Group By – from the dropdown box select #row.
  5. Specify the Cue according to your own design. You may decide to make the Cues differ so that components are highlighted in different colors. For example, make the Cue for the keyboard yellow and the other cues red.
  6. In the next Filter box, type #ComponentName = 'spacebar'.
  7. In the third Selector box, add another Filter.
  8. In the Filter box, type #ComponentName = 'predict'. NOTE: The order of the Filters determines the order of scanning components.

Scanning Pattern #4

Lastly, we will look at how to create a scanning pattern that scans groups of components within the design. The defined groups include (1) word prediction, (2) keyboard and (3) space.

For this design, we want the keyboard to be scanned as a group, then the spacebar, and lastly the word prediction row as a group.

To achieve this scanning pattern:

  1. Click on Patterns tab.
  2. You can edit any of the pre-loaded patterns, but for this tutorial we will edit **Row ** Column.
  3. Click on Row Column.
  4. In the Name box, type Components.
  5. Check Default box.
  6. Specify the Cue according to your own design.
  7. You will need a Selector box and a Group By box. First, add a Selector box by clicking Add, then Selector. Next, add a Group by in the same manner.
  8. For Group By, select #ComponentName from the dropdown menu.
  9. Specify the Cue according to your own design.