Elements marked with a star (*) require additional styling (flottplot.css).

Display Elements

Elements that display content on the page.

Cursors*

Mirror the cursor position in multiple elements.

Definition

<fp-cursors id="ID" ...>
  <fp-cursor target="TARGET" cursor="CURSOR" class="CLASS" style="STYLE"></fp-cursor>
  [...]
</fp-cursors>
  • id (optional)
    Own identifier.
  • target
    Identifier of the element included in the cursor group.
  • cursor (optional)
    Cursor type. Choose from:
    • pointer (default): arrow-like pointer.
    • hline: horizontal line with width of target element.
    • vline: vertical line with height of target element.
    • hidden: no mirrored cursor is shown for the target, but the mouse position is still broadcast to the other elements in the cursor group.
  • class (optional)
    Override for the default class name of the mirrored cursor.
  • style (optional)
    Override for the default style of the mirrored cursor. If a custom class is specified to style the cursor, set to empty to remove the default styling which might otherwise override the style specified in the class.
  • ... v2.1+
    Other attributes are attached to the div element containing the cursors.

Demo

<fp-plot id="cursortarget_sin" src="plot/sin-2x.png"></fp-plot>
<fp-plot id="cursortarget_cos" src="plot/cos-2x.png"></fp-plot>
<fp-cursors>
  <fp-cursor target="cursortarget_sin" cursor="pointer"></fp-cursor>
  <fp-cursor target="cursortarget_cos" cursor="vline"></fp-cursor>
  <fp-cursor target="cursortarget_cos" cursor="hline"></fp-cursor>
</fp-cursors>

<fp-cursors> elements should be placed directly into the body of the document as they use absolute positioning to place the additional cursors.

Overlay*

Overlay when clicking on an image (e.g. <fp-plot> or <fp-stack>). In the overlay, the plot will have its native resolution or is scaled to the maximum possible size that fits the browser's viewport if the native size is larger than the viewport. Click anywhere to close the overlay again.

Definition

<fp-overlay id="ID" ...></fp-overlay>
  • id (optional)
    Own identifier.
  • ... v2.1+
    Other attributes are attached to the overlay container.

Actions

  • show
    Show the overlay. Only shows if an element has previously placed content into the overlay.
  • hide
    Hide the overlay.
  • toggle
    Show the overlay if currently hidden, hide if currently shown.

Plot

Controllable image element.

Definition

<fp-plot id="ID" src="SRC" ...></fp-plot>
  • id (optional)
    Own identifier.
  • src
    Path/URL to an image file, can use value substitutions.
  • ... v2.1+
    Other attributes are attached to the created img element.

Value

Provides the current image URL as a Text value.

Demo

Wavenumber: <fp-range type="dropdown" id="plotparam" min="1" max="3" step="1"></fp-range><br>
<fp-plot src="plot/sin-{plotparam}x.png"></fp-plot>

Wavenumber:

Plot Stack*

Display multiple <fp-plot> or <img> elements on top of each other.

Definition

<fp-stack id="ID" ...>
  <fp-plot src="SRC1"></fp-plot>
  <img src="SRC2">
  [...]
</fp-stack>
  • id (optional)
    Own identifier.
  • ... v2.1+
    Other attributes are attached to the stack container element.

Video

Controllable video element.

Definition v2.1+

<fp-video id="ID" src="SRC" ...></fp-plot>
  • id (optional)
    Own identifier.
  • src
    Path/URL to a video file.
  • ...
    Other attributes are attached to the created video element.

Actions

  • reset
    Pause playback and reset the video to the beginning (00:00).
  • play
    Start playback.
  • pause
    Pause playback.
  • toggle
    Start playback if paused or pause if playing.

Value Elements

Elements that provide/generate values for use in value substitutions.

Calendar

Date input field.

Definition v2.2+

<fp-calendar id="ID" init="INIT" ...></fp-calendar>
  • id (optional)
    Own identifier
  • init (optional)
    Initial value. If not given, the element is initialized with the current date.
  • ...
    Other attributes are attached to the created input element.

Value

Provides the selected date as a DateValue.

Actions

  • reset
    Select the initial value.
  • prev
    Select the previous day.
  • next
    Select the next day.
  • prevMonth
    Select the previous month.
  • nextMonth
    Select the next month.
  • prevYear
    Select the previous year.
  • nextYear
    Select the next year.

Demo

<fp-button action="cal.prevYear">-Y</fp-button>
<fp-calendar id="cal"></fp-calendar>
<fp-button action="cal.nextYear">+Y</fp-button>

-Y +Y

Range

Control elements that represent ranged values.

Definition

<fp-range id="ID" type="TYPE" step="STEP" min="MIN" max="MAX" init="INIT" wrap="WRAP" format="FORMAT"></fp-range>
  • id
    Own identifier.
  • type (optional)
    Type of control element used to represent the range on the page. Choose from:
    • counter (default): text box with forward and backwards buttons.
    • slider: draggable slider (only finite ranges).
    • dropdown: dropdown menu (only finite ranges).
    • radio: radio buttons (only finite ranges).
  • step
    Value of increment.
  • min (optional*)
    Lower bound of range.
  • max (optional*)
    Upper bound of range.
  • init (optional*)
    Initial value.
  • wrap (optional)
    Boundaries at which values wrap around. Choose from both, max or min.
  • format (optional)
    Format specification used for labelling of the element (e.g. in the text box or a counter).
  • min-wrap-action (optional) v2.1+
    Action(s) invoked when wrapping at the lower bound.
  • max-wrap-action (optional) v2.1+
    Action(s) invoked when wrapping at the upper bound.

* At least one of min, max and init has to be specified. If no upper and/or lower bound is specified the range is non-finite and wrapping is not possible.

Value

Provides the selected value.

Actions

  • reset
    Select the initial value.
  • prev
    Select the previous value.
  • next
    Select the next value.

Demo: Numeric Counter

<fp-range id="wrapped_range" type="counter" min="-5" max="5" step="2" init="0" wrap="max"></fp-range>

Demo: Linked Ranges

<fp-range id="link_range" type="counter" min="0" max="2" step="1" wrap="both"
          min-wrap-action="link_target.prev" max-wrap-action="link_target.next"></fp-range>
<fp-range id="link_target" type="counter" init="0" step="1"></fp-range>

Demo: Date Counter

<fp-range id="date_range" type="counter" min="2020-01-01" step="3h" format="%Y-%m-%d %H UTC"></fp-range>

Demo: Slider

<fp-range id="slider_range" type="slider" min="-5" max="5" step="1" init="-2"></fp-range>

Demo: Dropdown

<fp-range id="select_range" type="dropdown" min="-30" max="30" step="6" format="+04"></fp-range>

Select & Option

Dropdown menu for enumerated values.

Definition

<fp-select id="ID" type="TYPE" wrap="WRAP">
  <fp-option ATTRIBUTE="VALUE" [...]>LABEL</fp-option>
  [...]
</fp-select>
  • id (optional)
    Own identifier.
  • type (optional)
    Type of control element used to represent the selection. Choose from:
    • counter: text box with forward and backwards buttons.
    • slider: draggable slider.
    • dropdown (default): dropdown menu.
    • radio: labelled radio buttons.
  • wrap (optional)
    Boundaries at which values wrap around. Choose from both, max or min. Wrapping is disabled by default.
  • min-wrap-action (optional) v2.1+
    Action(s) invoked when wrapping from the first to the last option.
  • max-wrap-action (optional) v2.1+
    Action(s) invoked when wrapping from the last to the first option.

Value

Provides the LABEL of the currently selected option.

Additional VALUEs can be attached via custom ATTRIBUTEs. All options should generally have the same attributes specified to avoid attribute access errors during value substitution.

Actions

  • reset
    Select the initial value.
  • prev
    Select the previous value.
  • next
    Select the next value.

Demo: Dropdown With Custom Attribute

<fp-select id="select_demo">
  <fp-option letter="C">Entry No. 1</fp-option>
  <fp-option letter="D">Entry No. 2</fp-option>
  <fp-option letter="E">Entry No. 3</fp-option>
</fp-select>
<fp-text>{select_demo} with letter {select_demo.letter}</fp-text>

Entry No. 1 Entry No. 2 Entry No. 3 {select_demo} with letter {select_demo.letter}

Demo: Radio Options

<fp-select id="select_demo_radio" type="radio">
  <fp-option>Option 1</fp-option>
  <fp-option>Another Option</fp-option>
  <fp-option>Choose me!</fp-option>
</fp-select>

Option 1 Another Option Choose me!

Control Elements

Elements that control other elements with actions.

Animation

Forward/backward animation controls for other elements. Works with all elements that have reset, prev and next actions.

Definition

<fp-animation id="ID" target="TARGET[;TARGET ...]" ...></fp-animation>
  • id (optional)
    Own identifier.
  • target
    Identifier(s) of the element(s) to be animated.
  • ... v2.1+
    Other attributes are attached to the container of the control elements.

Actions

  • reset
    Stop the animation and reset all targets.
  • start
    Start the animation if not running.
  • stop
    Stop the animation if not stopped.
  • toggle
    Start the animation if stopped of stop if running.
  • slower
    Reduce the speed of the animation.
  • faster
    Increase the speed of the animation.

Demo

<fp-animation target="anim_target"></fp-animation>
<fp-range type="slider" id="anim_target" min="0" max="10" step="1" wrap="both"></fp-range>

Button

Trigger actions of other elements.

Definition

<fp-button id="ID" action="ELEMENT.ACTION[;ELEMENT.ACTION ...]" ...>LABEL</fp-button>
  • id (optional)
    Own identifier.
  • action
    ACTION to trigger on the ELEMENT.
  • ... v2.1+
    Other attributes are attached to the created button element.

Actions

  • trigger
    Trigger the action(s) bound to the button.

Demo

<fp-button action="button_target.next">go to the next</fp-button>
<fp-range type="dropdown" id="button_target" min="0" max="10" step="1" wrap="both"></fp-range>

go to the next

Controls

Auto-generated buttons for all available actions of an element.

Definition v2.2+

<fp-controls id="ID" target="TARGET"></fp-controls>
  • id (optional)
    Own identifier.
  • target
    Identifier of the target element for which controls are generated.
  • ...
    Other attributes are attached to the span element that wraps the controls.

Demo

<fp-range id="controlled" type="slider" min="0" max="9" step="1" wrap="both"></fp-range>
<fp-controls target="controlled"></fp-controls>

Key Binding

Trigger action on key press. Keys are bound with a (hidden) element:

Definition

<fp-bind key="KEY" action="ELEMENT.ACTION[;ELEMENT.ACTION ...]"></fp-bind>
  • key
    Value of the key to bind, e.g. f or ArrowRight.
  • action
    ACTION to trigger on the ELEMENT.

To avoid conflicts with browser-defined key bindings, key presses are not intercepted when a form element (text field, button, etc.) has focus. Click elsewhere on the page to reset the focus to allow Flottplot to intercept keys again if the bindings don't work.

State

Save and restore snapshots of the current state of all Flottplot elements. Configure automatic save/restore of the Flottplot state into the URL hash (the bit after #).

Definition

<fp-state id="ID" url="true"></fp-state>
  • id (optional)
    Own identifier.
  • url (optional) v2.2+
    If set to true, the state of all Flottplot elements is stored in the URL hash and will be automatically updated with every change. When the page is loaded from an URL with a hash present, the contained state will be recovered. If the page was changed between saving and loading (elements added, changed, removed), the recovery might fail.

Actions

  • save v2.2+
    Make a copy of the current state of all Flottplot elements and store it for later restoration.
  • restore v2.2+
    Restore the saved copy of the Flottplot state to all elements. If no copy is stored, nothing happens.