Keyshape Diagram

JavaScript support for stepping through animated SVG diagrams produced by Keyshape.

What you get:

• three buttons for stepping, running, and stopping (or resetting) the animation
• captions displayed as the animation progresses

1. The example starts with a call to example.com/cat.html
2. The client (browser) makes a GET request for the resource (cat.html)
3. The webserver serves the GET request: it sends a response with code 200 (“success”) and cat.html as the payload.
4. The browser parses the HTML page and tries to display it. The page contains CSS and an image, so the browser requests each of these with new GET requests.
5. The server responds to each request with code 200 (“success”) and the requested file as the payload.
6. The CSS arrives and is applied (the page goes pink). The image arrives and is displayed (the cat appears).

An interactive version of this diagram is available with JavaScript enabled.

How you get it:

• create diagram in Keyshape with named timeline markers
• export as SVG (with embedded or external JS)
• add it either as <svg> or <object> element with class="ksd"
• drop in a sibling element (e.g., <div> or <ol>) whose children are captions, one per timeline marker
• add the JavaScript (ksd.js or its contents)
• add the styling for the buttons (ksd.css or its contents)
• tweak some options (e.g., layout order of buttons/captions/diagram)
• optionally add no-JavaScript fallback

Files

• documentation in docs.md
• examples in examples/ (more to come)
• JavaScript and CSS in src/

Sample HTML

<link href="ksd.css" rel="stylesheet" type="text/css" />
<div>
  <object class="ksd" data="my-diagram.svg" type="image/svg+xml">
  </object>
  <ol class="ksd-captions">
    <li>
      This caption is shown before you press
      <em>step</em> or <em>run</em>.
    </li>
    <li>
      This is displayed while the animation runs,
      starting from the first timeline marker to
      the next one (say, "middle").
    </li>
    <li>
      This caption is shown as the animation
      runs from "middle" to "end".
    </li>
  </ol>
  <div class="ksd-no-js">
    This content is displayed if JavaScript (and hence
    animation) is not supported on this page load.
  </div>
</div>
<script src="ksd.js"></script>