Glider is structured around a 3-part model
Parts
are put into
Places
and activated by
Phases
which turn parts off and on
over time
The following are pages that demonstrate the basics of the Glider architecture.
Glider is structured around a 3-part model:
Parts
are put into
Places
and activated by
Phases
which turn parts off and on
over time
Places are are devices with displays. For example, a Place could be a display wall, or a presenter’s laptop, or an audience’s smartphones.
Places come in different Place Types, which are tailored for genres of display (such as display walls or smartphones).
Currently, there are just two defined Place Types:
There will most certainly be other Place Types introduced in the future, for example a Type to handle non-contiguous displays.
A Place can have Regions, which are selected areas of a Place.
What exactly constitutes a "region" depends on the Place Type.
For example, a
FixedGridPlace considers regions to
be rectangular cell ranges, and the region
names specify the row, column, width, and height
within the grid.
The following buttons link to the same Glider flight
(located at place-example.html) —
the only difference is that
the URL takes the browser to 3 different Places, which
are specified according to the
following pattern:
#/<FLIGHT INSTANCE ID>/<PLACE ID>
(We've arbitrarily assigned the Flight Instance ID to 1234)
Please view the source HTML code to see how each is expressed in markup.
Parts are modules/objects/components that have state and function. All elements in a Glider flight are Parts (even simple HTML elements have a Part assigned to them).
Parts are active or inactive,
depending on the associated Phase (see below).
Parts do not appear in the page; their Part Views do. Part Views are the expression of the Part, and a single Part can have many Part Views — for example, a slide carousel Part may have one Part View for viewing the images (e.g. on a display wall) and another Part View for a user to advance the slides using their mobile device.
Note that Parts are VueJS components. As such, Glider is meant to be easily extended by leveraging this popular library.
The following simple example is a color selector. The
controller Part View is the controller,
while the display Part View shows the
result. In order to see the Part in action, you need to
view both Places (either in two different devices or two
browser windows).
Please view the source HTML code to see how each is expressed in markup.
Phases define periods of time during which Parts are active.
Some are simple periods that start and end. Others are compound Phases that contain other Phases. These compound Phases (the SMIL standard calls them Time Containers) are either parallel (that is, the child Phases run concurrently) or sequential (the child Phases run in order, from the first to the last child).
Phases have duration (specified in seconds by the
phase-duration attribute) — if
unspecified, the duration is INFINITY.
Phases also can be delayed (specified in seconds by the
phase-begin attribute).
This is a simple example of Phases being used to display different text over time.
The main Phase (a sequence), contains a parallel Phase, which in turn contains a sequence Phase.
Please view the source HTML code to see how each is expressed in markup.
This is a quirky and ugly example of how Parts, Places, and Phases all work together in concert (a better specimen is on its way).
Open the three Places in three different windows (or devices) and use the "next" button in the instructor Place to advance.
Glider is under (very) active development at the moment, so please don't be put off by glitchiness; while it's ready to try out now, we are working towards a stable rollout for winter 2019–20.
We welcome your comments, thoughts, and participation. Please reach out if you're curious!
Glider's main home is its github repo, and there is also background information at its home at Brown University.
