Cards

Cards implement a central UI metaphor for multiuser applications. They allow users to explore information spaces independently from each other. Most of the time a card lives within a scatter and can be moved, rotated, and scaled. The scatter and it's interaction mapper are also responsible to detect and distinguish tap events form other interactions. But in preview programs and editors this is not necessary. Therefore we provide a central CardWrapper class that turns any DOM node into a card.

The wrapper's main task is to handle tap events and trigger the corresponding actions. There are three main ways to define these actions.

  1. Define onclick handlers in HTML and SVG, e.g. <a onclick="alert(1)">link<a>
  2. Use onTap with a DOM node as event target, e.g. wrapper.onTap(node, event => {})
  3. Use onTap with a CSS selector, e.g. wrapper.onTap('.link', event => {})
The order in which these possibilities are testet is 1, 2, 3.

Note that the objects can also be actived by clicking nearby and not directly on the DOM node. This solves a major problem on large tabletops with a parallaxis in the display.

A Demo Card with onclick

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

A Demo Card with selectors

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Using Cards within Scatters

Cards can be used within scatters. Since the CardWrapper implements the ITapDelegate protocol they can simply be attached to a DOMScatter object. See the Scatter Doctest.

References