Grid entity - using picture-based assets (image, video, sprite)
Click here to show/hide the Grid contents controls
Columns
Rows
Column gutter
Row gutter
Grid width
n%
n
Grid height
n%
n
Base fill
Highlight fill
Grid lines stroke
Click here to show/hide the Grid position controls
Starts ('n%')
X:
Y:
Handles ('n%')
X:
Y:
Starts (n)
X:
Y:
Handles (n)
X:
Y:
Starts ('str')
X:
Y:
Handles ('str')
X:
Y:
Offset ('n%')
X:
Y:
Offset (n)
X:
Y:
Roll
Scale
Flip-upend
Flip-reverse
To note: Javascript is not running in this browser environment. Our apologies, but this demo has not yet been updated to support progressive enhancement.
Test purpose
Create, update and interact with a Grid entity
Create picture entitys (image, video, sprite) to be used by the Grid entity
Create the Grid entity
Animate so that the Grid responds to mouse movements to highlight the tile under the mouse pointer
Add controls to manipulate the number of rows and columns in the Grid
Add controls to vary the width of column and row gutters
Add controls to vary the Grid's dimensions
Add selectors so tester can change the 'base' fill, and the 'highlight' fill
Check that Picture fills can be constrained to the Tile, or be applied Grid-wide
Add a selector so tester can change the guttering fill (by String, by object, by index number)
Add controls to manipulate the Grid's positioning (start, handle, offset)
Add controls to manipulate the Grid's roll, scale and flip attributes