stele

Web Components for Climbing Guides

These aren't all "Web Components" in the literal sense. They are, however, components you can use on the web. Each is self-contained and dependency free.

Climb Steepness

Visualize climb steepness.

more available on the subpage

A vertical line is a vertical climb
A left-leaning line is an overhung climb
A right-leaning line is slab
This climb gets progressively steeper
This one starts slabby, and becomes verical

Making the diagram is trivial: 

const s = new SteepnessDial();
s.setSteepness([
    {startingAt: 0,   degreesOverhung:  45},
    {startingAt: 0.5, degreesOverhung:  60},
    {startingAt: 0.9, degreesOverhung:   0},
]);
document.querySelector("#example")
    .appendChild(s.container);

This is provided by a single dependency-free class, with the source available.

TESTING
TESTING
A vertical line is a vertical climb
A left-leaning line is an overhung climb
A right-leaning line is slab
This climb gets progressively steeper
This one starts slabby, and becomes verical

Making the diagram is trivial: 

const s = new SteepnessDial();
s.setSteepness([
    {startingAt: 0,   degreesOverhung:  45},
    {startingAt: 0.5, degreesOverhung:  60},
    {startingAt: 0.9, degreesOverhung:   0},
]);
document.querySelector("#example")
    .appendChild(s.container);

This is provided by a single dependency-free class, with the source available.

Climb Terrain

subpage

Climb Duration

Photo Overlay

subpage