Panels

Under construction.

• Widget demo’s
• Usage in github.io markdown
• Widget description
  • GF_panel.load(options)
  • GF_panel.diagramSVG(options)
  • GF_panel.nudge(id)

This widget is intended to replace hardcoded content on the pages stitches, nets, droste and the snow mixer.

Widget demo’s

1

2

3

4

Usage in github.io markdown

See source.

This example assumes you have a fork of this repository and its docs folder configured to be published as GitHub pages. Otherwise, you need to copy the scripts and images used by the panel.js and adjust all their paths.

Widget description

To use the widget functions on your own page, include (copies of) the following scripts: d3.v4.min.js, GroundForge-opt.js, nudgePairs.js and panel.js.

GF_panel.load(options)

Genrerates the panel structure:

<figure class="gf-panel"><figcaption>...</figcaption><div id="..."></div></figure>

Options:

• caption: mandatory string, plain text or HTML string generated at the start of the figcaption.
• id: mandatory string, id for the generated div.
• wnadHref: typlicaly javascript:... to generate the diagram. Creates the controls and the latter calls nudge with diagramType ‘thread’ if control color is specified.
• controls: optional array of strings, default empty, specifies buttons to generate in the figcaption:
  • cleanup: removes overridden stitch definitions in a textarea.
  • color: color chooser, looks and dialog may vary per browser. Its value is used to highlight threads or stitches in thread diagrams.
  • resize: For a div with CSS style overflow: auto; resize: both;. A border makes the hot corner at the right bottom easy to find, even when a browser hides scroll bars.
• size: optional, object with width and height properties, e.g. {width: "400px", height: "200px"}.
• parent: optional, DOM element to append the generated panel to. If omitted, the panel is appended to document.body.

GF_panel.diagramSVG(options)

Generates an SVG diagram inside the div with the specified id.

Also to be called by the wand button. The page context determines where to get the query and droste steps.

Options:

• id: optional string, id of a panel previously created with GF_panel.load. If omitted, an SVG is returned as string to be used outside a panel context, no nudging is applied.
• query: mandatory string with the pattern definition and stitches.
• type: optional string, either thread or pair, default is pair.
• steps: array of strings, default empty, droste stitch definitions: for each element a pair diagram is created from the (previous) thread diagram.

Note that the URL query keys droste2 and droste3 are the equivalent of steps[0] and steps[1] respectively. The widget uses the values of the steps option. The pages of GroundForge use the query parameters to pass a pattern back and forth between pattern, stitches and droste. The query keys were numbered with 2nd and 3rd pair diagram in mind.

GF_panel.nudge(id, diagramType)

Nudges the stitch positions in the panel with the given id.

Default for diagramType is pair.

Called by default for all diagrams except for a primary pair diagram (type pair, no steps), also called by . A page may call this function explicitly for its primary pair diagram as well.