SwipePanel Demo and Documentation

Display sketch code: SwipePanelDemo.pde.
Display Clickable library code: Clickable.pde.

The demo features a swipe panel that allows user to swipe the panel to change the contents of the boxes. It works fine when one swipes with the mouse on a standard screen but unfortunately, it probably will not work with touch screens because they intercept drags and use them to move the contents of the entire screen instead of letting the sketch process them.

Initially, the swipe panel is the aqua rectangle. Each vertical or horizontal swipe moves the boxes one unit vertically or horizontally. (Diagonal swipes are ignored.) Swipes have to have a small movement to count as a swipe. If the mouse is not moved that small distance after being pressed, it counts as a tap (i.e. a click). If "Increment on tap" is checked, then clicking the swipe panel results in the same action as a right swipe instead of being ignored. In this mode, clicking one of the colored rectangles assigns the color to the small rectangle containing the title at the top of the sketch.

If "Full Screen" is checked, then most of screen becomes a touch panel. Then if "Allow tap Through" is selected, then taps on one of the colored rectangles will cause the box around the sketch title to change to the color of the rectangle. "Increment on tap" is no longer available.

Because swiping on touch panels may not work, there is an option to have the swipe panel to process clicks as if they were swipes. Touch panels typically interpret taps as clicks. If "Process clicks" is checked, clicks on the swipe panel will adjust the x or y values. Clicking near the right edge increments x, clicking near the bottom increments y while clicking near the left edge decrements x and clicking near the top decrements y. Selecting "Show Process clicks region" shows the 4 clickable regions and their interpretation.

A Simpler Example

Display sketch code:
    SimpleSwipePanelDemo.pde.
Display Clickable library code: Clickable.pde.

The above example is rather complicated so this example is included to suggest the type of coding that is needed for a SwipePanel. It includes an aqua SwipePanel and Checkboxes to implement tapping to increment xVal and tap through. The radio button is under the SwipePanel which is semitransparent using color 0x8000FFFF. In real applications, when tap through is used, you may prefer a completely transparent panel using 0x00FFFFFF.

You can swipe on the aqua panel. By default, tapping (clicking) the panel will be ignored. But if you select "Increment on tap", just tapping (clicking) the panel will increment xVal. On the other hand, if "Allow tap through" is selected, then clicking the radio button will cause it to toggle. Only one of these two Checkboxes can be selected at the same time because both options cannot be active at the same time.

There are two things to note about the code for SimpleSwipePanelDemo. First, the radio button is listed in clickArray before the SwipePanel so that the radio button is underneath the SwipePanel. Second, the mousePressed() method is used to allow the sketch to record the beginning of possible swipes. This allows the using mouseReleased() to determine if the panel has been swiped, and if so, the direction of the swipe.

This examples does not use the "processClicks" option. If you want to allow clicking as an additional alternative to swiping, just include
    setProcessClicks(true);
in the setup() method and don't use the "Increment X on tap" and "Allow tap through" options.

class SwipePanel
extends ClickablePanel
which extends Clickable

The SwipePanel was originally intended to allow swiping on a touch screen to control the sketch. Unfortunately normally when using a touch screen, dragging operations are intercepted by the operating system and not passed on to the application unless special, system dependent technics are used. The class requires uses of mousePressed() and mouseReleased() methods.

Additional fields

int xVal, yVal - Current values of the swipe controlled variables. (Defaults: 1.)
int xMax, yMax - The maximum values of xVal and yVal. (Defaults: 1000.)
int xMin, yMin - The minimum values of xVal and yVal (Defaults: 1.)
int xStart, yStart - The starting values of xVal and yVal. (Defaults: 0.)
int minSwipe - The minimum distance for a drag to be counted as a swipe. (Default: 10.)
boolean incXOnTap - When true, a tap (click) increments xVal. Ignored if tapHole is true. (Default: false.)
boolean tapHole - When true, clicks are ignored by the SwipePanel and allows a Clickable below the panel to process them. (Default: false.)
boolean processClicks - When true, allow clicks near the edge of the swipe panel to act like swipes.
** SwipePanel(int leftX, int topY, int theWidth, int theHeight,
                    String theLabel, color stdColor);
- Constructor for a SwipePanel. Sets default values for all of the SwipePanel variables (as listed above).
** void mouseDown()
- Called by mousePressed() when the mouse is pressed. It records the starting mouse coordinates.
* boolean isOver()
- Assuming the panel is enabled and visible, it returns true if the mouse cursor is over the panel. However, if allTapHoles is true, a hole is created in the panel so that the cursor is not over the panel when one taps (not swipes) the panel. Returns false if stillSearching_ is false.
* boolean checkForClick()
- Determines if the ClickablePanel has been clicked. If so, it checks to see if the cursor moved far enough to count as a swipe. It also checks to make sure the swipe was not a diagonal movement. If the swipe is to the right, xVal is incremented, if it is to the left, xVal is decremented, if it is upwards, yVal is decremented while if it is downwards, yVal is incremented. If incXOnTap is true clicks will increment xVal.
** int getXVal()
- Returns the x value.
** int getYVal()
- Returns the y value.
** void setXVal(int newXVal)
- Sets the x value subject to the limits of xMin and xMax. The default is 1.
** void setYVal(int newYVal)
- Sets the y value subject to the limits of yMin and yMax. The default is 1.
** void setXMax(int newXMax)
- Sets the maximum value of xVal. newXMax > xMin required. The default is 1000.
** void setYMax(int newYMax)
- Sets the maximum value of yVal. newYMax > yMin required. The default is 1000.
** void setXMin(int newXMin)
- Sets the minimum value of xVal. newXMin < xMax required. The default is 1.
** void setYMin(int newYMin)
- Sets the minimum value of yVal. newYMin < yMax required. The default is 1.
** void setMinSwipe(int newMinSwipe)
- Sets minSwipe, the minimum horizontal or vertical movement needed for swiping. The default is 10;
** void setIncXOnTap(boolean newIncXOnTap)
- Sets incXOnTap true or false. When it is true, just clicking the panel will increment x. The default is false. The value of incXOnTap is ignored if tapHoles is true.
** void setTapHole(boolean newTapHole)
- Sets tapHoles true or false. When it is true, the panel has a "hole" in it if the cursor is not moved far enough for a swipe so that a Clickable item below the panel can panel can be clicked.
** void setProcessClicks(boolean newProcessClicks)
- Sets the processClicks option true or false. When true, clicks (taps) near the left, right, up, or down edges of the swipe panel as if they if they were swipes. (Actually the swipe panel is divided into 4 triangular regions each of which is treated as a directional swipe when clicked.)

Method use codes:

** This constructor or method is designed to be called in the user sketch.

* This method is normally not called in the user's sketch unless the Clickable item was not been included in a ClickableGroup. ClickableGroup automatically uses the method as needed. Exception: This method may be needed if the user is extending Clickable with a new class.

# This constructor or method is rarely used in the user program. In Java, it would probably marked "private". Clickable, ScrollBar, and some other abstract constructors would never be called directly by the user sketch because they do nothing useful unless the user is extending a class.


Inherited from ClickablePanel

Fields
clickX, clickY, invisible, wholeSkectch

Constructors
ClickablePanel, ClickablePanel, ClickablePanel

Methods
adjustPanel, checkForClick, display, drawOnPanel, getClickX, getClickY, getPanelX, getPanelY, isOver, setClickX, setClickY, setColor


Inherited from Clickable

Fields
NOTHING_CLICKED, COMBO_BUTTON, DISABLED_COLOR, borderColor, c, clicked, clickedItemNum, colorState, enabled, h, label, over, overC, scrollable, selected, selectedItemNum, visible, w, x, y

Constructors
Clickable

Methods
checkForClick, display, doNotSelect, getClickedItemNum, getColorState, getH, getItem, getLabel, getSelected, getSelectedItem, getSelectedItemLabel, getSelectedItemNum, getW, getX, getY, hasBeenClicked, hideSomething, isOver, setBorderColor, setColorState, setH, setLabel, setScrollable, setSelected, setSelectedItemNum, setEnabled, setVisible, setW, setX, setY, sX, sY

Return to the top of the page

Revised: 04/11/2014