QMK Keymap Carpalx Analyser

This attempts to adapt Carpalx into a JS system that can analyse QMK keymaps in the form of configurator .json files. Some default keymaps are available here, which can be dropped any where on this page (drop multiple files for quick comparing). The textarea below is used as a corpus, and is populated by a section from a book on Project Gutenberg, along with some of the source code for this page.

▶ Adjust overall weights

\[e = {k_{base} \times b_{triad} + k_{penalty} \times p_{triad} + k_{stroke} \times s_{triad} }\] \[b_{triad} = {k_1 \times b_{key,1} \times ( 1 + k_1 \times b_{key,2} \times ( 1 + k_3 \times b_{key,3}))}\] \[b_{key} = \text{distance from closest homerow key in } \frac{1}{2} \text{ key units}\]

Effort Component Weights
$k_{base}$
$k_{penalty}$
$k_{stroke}$

Triad Interaction Weights
$k_{1}$
$k_{2}$
$k_{3}$

▶ Adjust penalties

Penalty Weights
$w_0$
$w_{hand}$
$w_{row}$
$w_{finger}$
$w_{thumb}$

Hand Penalty $p_{hand}$

Finger Penalty $p_{finger}$
Left				Right
Pinky	Ring	Middle	Pointer	Pointer	Middle	Ring	Pinky

Row Penalty $p_{row}$
3 Above
2 Above
1 Above
Homerow
1 Below
2 Below
3 Below

▶ Adjust stroke path

\[s_{triad} = {f_{hand} \times s_{hand} + f_{row} \times s_{row} + f_{finger} \times s_{finger} }\]

Weights
$f_{hand}$
$f_{row}$
$f_{finger}$

Hand Combination Weight $s_{hand}$
Both used, not alternating
Alternating
Same

Row Combination Weight $s_{row}$
Same
Downward progression, with repetition
Upward progression, with repetition
Some different, not monotonic, max row Δ 1
Downward progression
Some different, not monotonic, max row Δ downward >1
Upward progression
Some different, not monotonic, max row Δ upward >1

Finger Combination Weight $s_{finger}$
Double inner roll
Repeat one
Single inner roll
Single outer roll
Double outer roll
Same finger
Alt hands
Bounce
Same key advantage

A consciousness of immortality, sometimes dim and vague, sometimes vivid and clear, seems to be characteristic of the human race. However low man may stand he cannot consider death to be the end of his existence. The conviction that he is immortal is innate to him. Annihilation is contrary to the nature and demands of his spirit. It is true that uncertainty and doubt might arise, but man will never be able wholly to uproot either hope or fear as to the possibility of a future life.

Experiencing such feelings and presentiments, man finds himself amidst a world where death and dissolution everywhere surround him. He sees the objects of his love or fear pass away, and he knows that sooner or later the same fate will befall himself. When he beholds the lifeless body of some near relative, his presentiment of immortality tells him that the selfsame soul that once animated that body is still alive. In such moments even the man of low cultivation is forced into more or less profound contemplation. The following reflection impresses itself with might and wonder upon him: "I feel convinced that the dead is living, but how can he live without his body and what form does his new life take?"

In all ages and stages, men have asked the same or similar questions, and they will go on asking them as long as belief in a future life obtains.

But man does not confine himself to questioning, he wants answers, and especially must this be true where the reply is so intimately connected with himself. And these answers have not been lacking; we find them formulated in those opinions and theories respecting a future life which throughout the ages have gradually appeared and prevailed.

The critically thinking public of the present day takes a decidedly skeptical attitude toward all these theories. They assert, and not without strong arguments, that it is impossible to know anything. But, however convinced the public may be of the fruitlessness of discussing the topic, no one will succeed in pushing it entirely aside. Time and again the same questions reappear as dark and threatening clouds on the horizon of our consciousness; they occupy our thoughts, take hold upon our feelings and color our sentiments. It would undoubtedly be sufficient at such moments to have, were it only one fixed point to stand upon; one established fact to start from and which we could trust would lead our thoughts in the right direction. But such a basis to set out from we have not hitherto been able to find. Will this remain the case forever? Will science concerning a future life always fail to attain aught but negative results? Let us say at once that humanity will probably be able to ascertain as much as it may be necessary or useful for us to know in this world. This hope is founded on our firm belief that at this time a basis such as that above mentioned really exists. Natural science has furnished this basis, though nobody as yet has happened to reflect that the facts upon which this basis rests may have any bearing upon our attitude toward a future life, much less give answer to questions such as the following: How, and in what way, is man to pass from this life into another?

It will be the object of the following pages, then, to develop further the view just intimated.

In prehistoric times men believed in a close relationship between the soul of the deceased and his body in the grave, and this purely instinctive faith is the more remarkable, as it prevailed during stages of civilization when differentiation between spiritual qualities and physical matter was almost unknown.

The contradistinction between soul and body is certainly a fact, a general experience. But neither the individual nor the race realizes this fact suddenly or all at once. The knowledge of the distinction between the physical and the spiritual sphere, with their different characteristics and qualities, proceeds step by step, being the result of slowly advancing evolution.

The child and the savage remain unconscious of any discrimination between soul and body, and even for the more cultivated man, the border between the two is vague and undetermined. According to the psychologic order of man's evolution we might therefore expect that the problem as to this relationship would appear at a comparatively late date, and even then be of importance only to a reduced number of more cultivated individuals. But, on the contrary, experience shows that this question occupies the thoughts of men in very low stages of civilization, and, in fact, that it is of the most general interest.

The reason for this evidently lies in the instinctive belief that the body contains something which is immortal, and which in the life hereafter the soul cannot dispense with.

In its first historic form the question concerning the soul's relation to the body deals with this relation after, not before, the separation of the soul and body. This latter problem emerges only in very high stages of civilization, and even then is of scientific interest to an insignificant minority only, while the question of our existence after death is religious in its nature and of interest to all.

In olden times men were more fully convinced of a continued personal existence after death than civilized mankind seems to be nowadays. The same vivid conviction we find even in our age among people in the natural state. From the prehistoric peoples we have no written communication, but from their graves they speak to the present day intelligibly and plainly of their belief in a life to come. Behold the monuments defying time and decay, which these people have erected in memory of their deceased. The sepulchres of the Egyptian kings to this very day arouse our amazement and admiration.

What was it, then, that induced these peoples of early times to bestow such extraordinary labor on the places of their last rest? It certainly was their belief that the graves contained not only the lifeless body, but also the living soul. The funeral ceremonies evidently show, as Fustel de Coulanges says, that when the body was laid in the grave it was thought that something yet alive was placed there at the same time. The soul was born simultaneously with the body; death did not separate them; they were both enclosed together in the grave. In olden times people felt so fully assured that a man lived in the tomb, that they never failed to bury with him the things of which he was thought to be in want. They poured wine on the grave in order to quench his thirst; they brought food to his tomb in order to appease his hunger; they killed horses and slaves, believing that, if enclosed with the dead, these would serve him in his grave as they had served him during his life.

It was also in this conviction that the positive duty of burying the deceased originated. In order to bring rest to the soul in the subterranean dwelling that fitted its new existence, it was necessary that the body, to which, in some way or another, it still clung, should be covered with earth. The soul, denied a grave, had no dwelling. Drifting about, it sought in vain the desired rest after life's fitful struggle. Without shelter, without offerings or food, it was condemned to everlasting wandering. Therefore, because the deceased was unhappy, he became ill-natured. He tormented the living; sent them diseases; destroyed their harvests; haunted them in uncanny visions in order to remind them of their duty to bury the body and thereby secure peace for himself.
<!DOCTYPE html>
<html lang="en">
<head>

<style>

:root {
  --key-unit: 80px;
  --key-padding: 5px;
  --key-spacing: calc(var(--key-padding));
  --keyboard-width: 0;
  --keyboard-height: 0;
}
#keymap {
  position: relative;
  height: calc(var(--keyboard-height) * (var(--key-unit) + var(--key-spacing)) - var(--key-spacing));
}
.key {
  position: absolute;
  height: calc(var(--key-unit));
  border-radius: 5px;
  /*border: 1px rgba(0, 0, 0, 0.5) solid;*/
  padding: 5px;
  box-sizing: border-box;
  overflow: hidden;
  background: #eee;
}

.key .layer-0 {
  color: rgb(31, 119, 180);
}
.key .layer-1 {
  color: rgb(255, 127, 14);
}
.key .layer-2 {
  color: rgb(44, 160, 44);
}
.key .layer-3 {
  color: rgb(214, 39, 40);
}

.key.selectable:hover {
  background: #ddd;
  cursor: pointer;
}

.legend {
  position: absolute;
  width: calc((var(--key-unit) - 10px) / 3);
  line-height: calc(var(--key-unit) / 3);
  font-size: 12px;
  text-align: center;
  overflow: hidden;
}
.legend-0 {
  top: 0px;
  left: 0px;
}
.legend-1 {
  top: 0px;
  left: calc(var(--key-unit) / 3);
}
.legend-2 {
  top: 0px;
  left: calc(var(--key-unit) * 2 / 3);
}
.legend-3 {
  top: calc(var(--key-unit) / 3);
  left: 0px;
}
.legend-4 {
  top: calc(var(--key-unit) / 3);
  left: calc(var(--key-unit) / 3);
}
.legend-5 {
  top: calc(var(--key-unit) / 3);
  left: calc(var(--key-unit) * 2 / 3);
}
.legend-6 {
  top: calc(var(--key-unit) * 2 / 3);
  left: 0px;
}
.legend-7 {
  top: calc(var(--key-unit) * 2 / 3);
  left: calc(var(--key-unit) / 3);
}
.legend-8 {
  top: calc(var(--key-unit) * 2 / 3);
  left: calc(var(--key-unit) * 2 / 3);
}

.label {
  width: 100%;
  text-align: center;
  position: absolute;
  left: 0px;
  top: 0px;
  background: aliceblue;
}

.matrix-col {
  color: white;
  position: absolute;
left: 50%;
top: 33%;
width: 50%;
text-align: center;
}

.matrix-row {
  color: white;
  position: absolute;
left: 0px;
top: 33%;
width: 50%;
text-align: center;
}

.heatmap {
  position: absolute;
  width: 100%;
  left: 0px;
  top: calc(var(--key-unit) * 2 / 3);
  text-align: center;
  line-height: calc(var(--key-unit) / 3);
  font-size: 12px;
}

html, body {
  height: 100%;
}

th[data-filter-value]:hover {
  cursor: pointer;
  background: #eee;
}

th[data-filter-value].active {
  color: red;
}

tr[data-item-id].selected {
  color: red;
  background: #f7f7f7;
}

tr[data-item-id]:hover {
  cursor: pointer;
  background: #eee;
}

.radio {
  white-space: nowrap;
}

.radio button {
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 0px;
  margin-left: -1px;
}

.radio button:first-child {
  border-radius: 5px 0px 0px 5px;
  margin-left: 0px;
}
.radio button:last-child {
  border-radius: 0px 5px 5px 0px;
}

button.selected {
  background: #333;
  color: white;
  border-color : #111;
}

td {
    border-bottom: none;
  }

.graphs {
  padding: 0px;
  white-space: nowrap;
  height: 20px;
}

.graph {
  left: 0px;
  bottom: 0px;
  background: red;
  height: 20px;
  display: inline-block;
}
.graph:hover {
  opacity: .8;
}

.base {
 background: #C5C5C5;
}
.base.thumb {
 background: #787878;
}
.penalties {
 background: #168EF3;
}
.penalties.thumb {
 background: #074E89;
}
.path {
 background: #F3C216;
}

.finger-row td {
  padding-top: 0px;
  position: relative;
}

.finger-row summary {
  width: 200px;
}

.finger-row .buttons {
  position: absolute;
  right: 0px;
}

button.small {
  height: 24px;
  line-height: 24px;
  padding: 0px 8px;
  font-size: 10px;
}

.item-button.red {
  background: red;
  color: white;
  border-color: #c00;
}

.finger-usages {
  position: relative;
  padding: 0px;
  white-space: nowrap;
  height: 100px;
}

.hand-usage {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 50%;
  background: red;
  z-index: 1;
  opacity: .1;
}
.hand-usage:last-child {
  left: 50%;
}

.hand-usage:hover {
  opacity: .2;
}

.finger-wrapper {
  height: 100px;
  position: relative;
  display: inline-block;
  width: 10%;
  text-align: center;
}

.finger-name {
  z-index: 2;
  position: relative;
  font-weight: bold;
  padding: 10px;
}

.finger-usage {
  position: absolute;
  bottom: 0px;
  width: 100%;
  background: #eee;
  z-index: 0;
}

.finger-wrapper:hover .finger-usage {
  background: #ddd;
}

.button-wrapper {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
}

.button-wrapper .button {
  margin-bottom: 0px;
}
.button-wrapper:hover .button {
  border-color: #888;
  cursor: pointer;
}

.button-wrapper input[type=file] {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  font-size: 0px;
  height: 100%;
}

input[type=range] {
  width: 100%;
  margin-bottom: 0px;
}

input[type=range][orient=vertical]
{
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 8px;
    height: 92px;
    padding: 0 5px;
}

.center-cells td {
  text-align: center;
}
.model-parameters th, .model-parameters td {
    padding: 2px 5px;
}
summary {
  cursor: pointer;
}

h1, h2, h3, h4 {
  text-align: center;
}

#overall summary {
    left: 0px;
    position: relative;
    width: 33%;
}

#overall[open] {
  padding-bottom: 24px;
}

#penalties summary {
    left: calc(50% - 16.666%);
    position: relative;
    margin-top: -24px;
    width: 33%;
}

#penalties[open] {
  padding-bottom: 24px;
}

#path summary {
    left: calc(100% - 33%);
    position: relative;
    margin-top: -24px;
    width: 33%;
}

#configurator-keyboard {
    margin-top: -1px;
}

.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
    padding: 0 15px;
}

.button[disabled], button[disabled], input[type="submit"][disabled], input[type="reset"][disabled], input[type="button"][disabled] {
  background: #eee;
  color: #ccc;
  border-color: #ccc;
  border-radius: 5px;
}

#corpus {
  margin-bottom: 0px;
  max-width: 100%;
}
.result td {
  position: relative;
}
.result td sup {
  position: absolute;
  top: 16px;
  right: 0px;
  font-size: 65%;
}

.color-legends {
  top: 0px;
  text-align: left;
  height: 100%;
  line-height: 0;
}

.color-legends .legend {
  width: 50%;
  height: 50%;
  display: inline-block;
  position: static;
  text-align: center;
  font-size: calc(var(--key-unit) / 3);
  line-height: calc(var(--key-unit) / 2);
}

.color-legends small {
  vertical-align: bottom;
}

.color-legends .legend-0 {
  background: #eee;
  color: rgb(31, 119, 180);
}
.color-legends .legend-1 {
  background: #e8e8e8;
  color: rgb(255, 127, 14);
}
.color-legends .legend-2 {
  background: #e8e8e8;
  color: rgb(44, 160, 44);
}
.color-legends .legend-3 {
  background: #eee;
  color: rgb(214, 39, 40);
}
.color-legends .legend-4 {
  background: #eee;
  color: rgb(148, 103, 189);
}

.color-legends .layer-0 {
  background: rgb(31, 119, 180);
  color: white;
}
.color-legends .layer-1 {
  background: rgb(255, 127, 14);
  color: white;
}
.color-legends .layer-2 {
  background: rgb(44, 160, 44);
  color: white;
}
.color-legends .layer-3 {
  background: rgb(214, 39, 40);
  color: white;
}
.color-legends .layer-4 {
  background: rgb(148, 103, 189);
  color: white;
}

</style>

</head>
<body>
    <div class="container" id="main-container">
      <br />
      <h1>QMK Keymap Carpalx Analyser</h1>
      <p>This attempts to adapt <a href="http://mkweb.bcgsc.ca/carpalx/?typing_effort">Carpalx</a> into a JS system that can analyse QMK keymaps in the form of configurator .json files. <a href="https://github.com/qmk/qmk_configurator/tree/master/public/keymaps">Some default keymaps are available here</a>, which can be dropped any where on this page (drop multiple files for quick comparing). The textarea below is used as a corpus, and is populated by a <a href="http://www.gutenberg.org/files/60750/60750-h/60750-h.htm">section from a book on Project Gutenberg</a>.</p>
      <details id="overall">
        <summary><strong>Adjust overall weights</strong></summary>
        <div class="model-parameters">

<div class="row">
            <div class="columns six">
              \[e = {k_{base} \times b_{triad} + k_{penalty} \times p_{triad} + k_{stroke} \times s_{triad} }\]
              \[b_{triad} = {k_1 \times b_{key,1} \times ( 1 + k_1 \times b_{key,2} \times ( 1 + k_3 \times b_{key,3}))}\]
              \[b_{key} = \text{distance from closest homerow key in } \frac{1}{2} \text{ key units}\]
            </div>
          <div class="columns three">
            <table class="u-full-width">
              <tr><td colspan="2" class="center">Effort Component Weights</td></tr>
              <tr><td>$k_{base}$</td><td><input type="range" id="K_B" /></td></tr>
              <tr><td>$k_{penalty}$</td><td><input type="range" id="K_P" /></td></tr>
              <tr><td>$k_{stroke}$</td><td><input type="range" id="K_S" /></td></tr>
            </table>
          </div>

<div class="columns three">
              <table class="u-full-width">
                <tr><td colspan="2" class="center">Triad Interaction Weights</td></tr>
                <tr><td>$k_{1}$</td><td><input type="range" id="K_1" /></td></tr>
                <tr><td>$k_{2}$</td><td><input type="range" id="K_2" /></td></tr>
                <tr><td>$k_{3}$</td><td><input type="range" id="K_3" /></td></tr>
              </table>
            </div>
          </div>

</div>

</details>
      <details id="penalties">
        <summary><strong>Adjust penalties</strong></summary>
        <div class="model-parameters">

\[p_{triad} = {k_1 \times p_{key,1} \times ( 1 + k_1 \times p_{key,2} \times ( 1 + k_3 \times p_{key,3}))}\]
              \[p_{fingerkey} = {w_0 + w_{hand} \times p_{hand} + w_{finger} \times p_{finger} + w_{row} \times p_{row}}\]
              \[p_{thumbkey} = {w_0 + w_{hand} \times p_{hand} + w_{thumb}}\]
        </div>
            <div class="columns six">
              <table class="u-full-width">
                <tr><td colspan="2" class="center">Penalty Weights</td></tr>
                <tr><td width="80">$w_0$</td><td><input type="range" id="W_0" /></td></tr>
                <tr><td>$w_{hand}$</td><td><input type="range" id="W_HAND" /></td></tr>
                <tr><td>$w_{row}$</td><td><input type="range" id="W_ROW" /></td></tr>
                <tr><td>$w_{finger}$</td><td><input type="range" id="W_FINGER" /></td></tr>
                <tr><td>$w_{thumb}$</td><td><input type="range" id="W_THUMB" /></td></tr>
              </table>
            </div>
      </div>

<div class="row">
        <div class="columns five">
            <table class="u-full-width">
              <tr><td class="center">Hand Penalty $p_{hand}$</td></tr>
              <tr><td><input type="range" id="P_HAND" /></td></tr>
            </table>          
            <table class="center-cells u-full-width">
            <tr><td colspan="8">Finger Penalty $p_{finger}$</td></tr>
            <tr><td colspan="4">Left</td><td colspan="4">Right</td></tr>
            <tr>
              <td>Pinky</td><td>Ring</td><td>Middle</td><td>Pointer</td>
              <td>Pointer</td><td>Middle</td><td>Ring</td><td>Pinky</td>
            </tr>
            <tr>
              <td><input type="range" orient="vertical" id="P_FINGER.0" /></td>
              <td><input type="range" orient="vertical" id="P_FINGER.1" /></td>
              <td><input type="range" orient="vertical" id="P_FINGER.2" /></td>
              <td><input type="range" orient="vertical" id="P_FINGER.3" /></td>
              <td><input type="range" orient="vertical" id="P_FINGER.4" /></td>
              <td><input type="range" orient="vertical" id="P_FINGER.5" /></td>
              <td><input type="range" orient="vertical" id="P_FINGER.6" /></td>
              <td><input type="range" orient="vertical" id="P_FINGER.7" /></td>
            </tr>
          </table>
            </div>
        <div class="columns seven">
          <table class="u-full-width">
            <tr><td colspan="2" class="center">Row Penalty $p_{row}$</td></tr>
            <tr><td width="90">3 Above</td><td><input type="range" id="P_ROW.0" /></td></tr>
            <tr><td>2 Above</td><td><input type="range" id="P_ROW.1" /></td></tr>
            <tr><td>1 Above</td><td><input type="range" id="P_ROW.2" /></td></tr>
            <tr><td>Homerow</td><td><input type="range" id="P_ROW.3" /></td></tr>
            <tr><td>1 Below</td><td><input type="range" id="P_ROW.4" /></td></tr>
            <tr><td>2 Below</td><td><input type="range" id="P_ROW.5" /></td></tr>
            <tr><td>3 Below</td><td><input type="range" id="P_ROW.6" /></td></tr>
          </table>
        </div>
      </div>

</details>
      <details id="path">
        <summary><strong>Adjust stroke path</strong></summary>
        <div class="model-parameters">

\[s_{triad} = {f_{hand} \times s_{hand} + f_{row} \times s_{row} + f_{finger} \times s_{finger} }\]

<div class="row">
        <div class="columns six">
          <table class="u-full-width">
            <tr><td colspan="2" class="center">Weights</td></tr>
            <tr><td>$f_{hand}$</td><td><input type="range" id="F_HAND" /></td></tr>
            <tr><td>$f_{row}$</td><td><input type="range" id="F_ROW" /></td></tr>
            <tr><td>$f_{finger}$</td><td><input type="range" id="F_FINGER" /></td></tr>
          </table>
        </div>
        <div class="columns six">
          <table class="u-full-width">
            <tr><td colspan="2" class="center">Hand Combination Weight $s_{hand}$</td></tr>
            <tr><td>Both used, not alternating</td><td><input type="range" id="STROKE_PATH_HAND_WEIGHT.0" /></td></tr>
            <tr><td>Alternating</td><td><input type="range" id="STROKE_PATH_HAND_WEIGHT.1" /></td></tr>
            <tr><td>Same</td><td><input type="range" id="STROKE_PATH_HAND_WEIGHT.2" /></td></tr>
          </table>
        </div>
      </div>

<div class="row">
        <div class="columns seven">
          <table class="u-full-width">
            <tr><td colspan="2" class="center">Row Combination Weight $s_{row}$</td></tr>
            <tr><td>Same</td><td><input type="range" id="STROKE_PATH_ROW_WEIGHT.0" /></td></tr>
            <tr><td>Downward progression, with repetition</td><td><input type="range" id="STROKE_PATH_ROW_WEIGHT.1" /></td></tr>
            <tr><td>Upward progression, with repetition</td><td><input type="range" id="STROKE_PATH_ROW_WEIGHT.2" /></td></tr>
            <tr><td>Some different, not monotonic, max row Δ 1</td><td><input type="range" id="STROKE_PATH_ROW_WEIGHT.3" /></td></tr>
            <tr><td>Downward progression</td><td><input type="range" id="STROKE_PATH_ROW_WEIGHT.4" /></td></tr>
            <tr><td>Some different, not monotonic, max row Δ downward >1</td><td><input type="range" id="STROKE_PATH_ROW_WEIGHT.5" /></td></tr>
            <tr><td>Upward progression</td><td><input type="range" id="STROKE_PATH_ROW_WEIGHT.6" /></td></tr>
            <tr><td>Some different, not monotonic, max row Δ upward >1</td><td><input type="range" id="STROKE_PATH_ROW_WEIGHT.7" /></td></tr>
          </table>
        </div>
        <div class="columns five">
          <table class="u-full-width">
            <tr><td colspan="2" class="center">Finger Combination Weight $s_{finger}$</td></tr>
            <tr><td>Double inner roll</td><td><input type="range" id="STROKE_PATH_FINGER_WEIGHT.0" /></td></tr>
            <tr><td>Repeat one</td><td><input type="range" id="STROKE_PATH_FINGER_WEIGHT.1" /></td></tr>
            <tr><td>Single inner roll</td><td><input type="range" id="STROKE_PATH_FINGER_WEIGHT.2" /></td></tr>
            <tr><td>Single outer roll</td><td><input type="range" id="STROKE_PATH_FINGER_WEIGHT.3" /></td></tr>
            <tr><td>Double outer roll</td><td><input type="range" id="STROKE_PATH_FINGER_WEIGHT.4" /></td></tr>
            <tr><td>Same finger</td><td><input type="range" id="STROKE_PATH_FINGER_WEIGHT.5" /></td></tr>
            <tr><td>Alt hands</td><td><input type="range" id="STROKE_PATH_FINGER_WEIGHT.6" /></td></tr>
            <tr><td>Bounce</td><td><input type="range" id="STROKE_PATH_FINGER_WEIGHT.7" /></td></tr>
            <tr><td>Same key advantage</td><td><input type="range" id="STROKE_PATH_SAME_KEY_WEIGHT" /></td></tr>
          </table>
        </div>
      </div>

</details>

<p></p>
  <div class="row">
    <div class="columns nine">
      <select id="configurator-keyboard">
      </select>
      <button id="load-default">Load Keymap</button>
    </div>
    <div class="columns three" style="text-align: right;">
      <div class="button-wrapper">
        <button class="button">Upload Keymap</button>
        <input id="file" type="file" multiple="multiple" />
      </div>
    </div>
  </div>

<textarea id="corpus" class="u-full-width">A consciousness of immortality, sometimes dim and vague, sometimes vivid and clear, seems to be characteristic of the human race. However low man may stand he cannot consider death to be the end of his existence. The conviction that he is immortal is innate to him. Annihilation is contrary to the nature and demands of his spirit. It is true that uncertainty and doubt might arise, but man will never be able wholly to uproot either hope or fear as to the possibility of a future life.

In all ages and stages, men have asked the same or similar questions, and they will go on asking them as long as belief in a future life obtains.

It will be the object of the following pages, then, to develop further the view just intimated.

The reason for this evidently lies in the instinctive belief that the body contains something which is immortal, and which in the life hereafter the soul cannot dispense with.

<div class="row">
    <div class="columns twelve" style="text-align: right;">
      <button id="recompute-all" class="needs-keyboard">Recompute all</button>
      <button id="recompute-selected" class="needs-keyboard">Recompute selected</button>
      <button id="compute" class="needs-keyboard">Compute selected</button>
    </div>
  </div>
  <div class="row">
    <div class="columns eight radio">
      <button class="heatmap-button" id="heatmap-0" data-heatmap-id="0">base + penalties</button><button class="heatmap-button" id="heatmap-1" data-heatmap-id="1">base</button><button class="heatmap-button" id="heatmap-2" data-heatmap-id="2">penalties</button><button class="heatmap-button selected" id="heatmap-4" data-heatmap-id="3">usage</button><button class="heatmap-button" id="heatmap-4" data-heatmap-id="4">finger</button><button class="heatmap-button" id="heatmap-5" data-heatmap-id="5">layer</button><button class="heatmap-button" id="heatmap-6" data-heatmap-id="6">ghost</button>
    </div>
    <div class="columns four" style="text-align: right;">
      <button id="home-positions" class="needs-keyboard">Select Home Positions</button>
    </div>
  </div>
  <div id="keymap"></div>
  <table id="results" class="u-full-width">
          <thead>
              <tr>
                  <th data-filter-value="keyboard" class="active">Keyboard</th>
                  <th data-filter-value="corpus">Corpus</th>
                  <th data-filter-value="total_effort" title="Total Effort">$e$</th>
                  <th data-filter-value="finger_effort" title="Finger Effort">$e_{finger}$</th>
                  <th data-filter-value="thumb_effort" title="Thumb Effort">$e_{thumb}$</th>
                  <th data-filter-value="finger_base" title="Finger Base">$b_{finger}$</th>
                  <th data-filter-value="thumb_base" title="Thumb Base">$b_{thumb}$</th>
                  <th data-filter-value="finger_penalties" title="Finger Penalties">$p_{finger}$</th>
                  <th data-filter-value="path" title="Stroke Path">$s$</th>
                  <th data-filter-value="unknown_chars" title="Unknown Characters">?</th>
              </tr>
          </thead>
          <tbody>
  </tbody>
  </table>
</div>
</body>

<script src="https://d3js.org/d3.v5.min.js"></script>
<script>

var heatmap_selected = 3;

function textColorFromBackground(bg_color) {
  return d3.lab(bg_color).l >= 50 ? "black": "white";
}

var results = [];
var current_result = 0;

let currentFilter = "",
  prevFilter = "",
  orderAsc = true;

const toggleOrder = () => {
  if (currentFilter === prevFilter) {
    orderAsc = !orderAsc;
  } else {
    orderAsc = true;
  }
};

const sortTable = (array, sortKey) => {
  return array.sort((a, b) => {
    let x = a[sortKey],
      y = b[sortKey];

return orderAsc ? x - y : y - x;
  });
};

function encode(r) {
  return r.replace(/[\x26\x0A\x3c\x3e\x22\x27]/g, function(r) {
  return "&#" + r.charCodeAt(0) + ";";
  });
}

var finger_names = [
  "L Pinky",
  "L Ring",
  "L Middle",
  "L Index",
  "L Thumb",
  "R Thumb",
  "R Index",
  "R Middle",
  "R Ring",
  "R Pinky",
];

const renderTable = tableData => {
  
  updateNeedsKeyboard(tableData.length > 0);

var max_total_effort = 0;
  Array.prototype.forEach.call(tableData, result => {
    if (max_total_effort < result.total_effort) {
      max_total_effort = result.total_effort;
    }
  });

var sr = getSelectedResult();

return `${tableData
    .map(item => {
      var relative_scale = 100 / max_total_effort;
      var distinct_chars = getDistinctArray(item.unknown_chars);
      var max_finger_usage = 0;
      var total_finger_usage = 0;
      var total_hand_usage = [0, 0];
      Array.prototype.forEach.call(item.usage_fingers, (finger, index) => {
        if (max_finger_usage < finger)
          max_finger_usage = finger;
        total_finger_usage += finger;
        if (index < 5)
          total_hand_usage[0] += finger;
        else 
          total_hand_usage[1] += finger;
      });
      var finger_usage_string = "";
      Array.prototype.forEach.call(item.usage_fingers, (finger, index) => {
        finger_usage_string += `<div class="finger-wrapper" title="${finger}"><div class="finger-name">${finger_names[index]}<br />${precise(finger/total_finger_usage*100)}%</div><div class="finger-usage" style="height:${finger/max_finger_usage*100}%"></div></div>`;
      });
      finger_usage_string += `<div class="hand-usage" title="${precise(total_hand_usage[0]/total_finger_usage*100)}%" style="height:${total_hand_usage[0]/total_finger_usage*50}%"></div><div class="hand-usage" title="${precise(total_hand_usage[1]/total_finger_usage*100)}%" style="height:${total_hand_usage[1]/total_finger_usage*50}%"></div>`;
      return `
        <tr data-item-id="${item.id}" class="${(item.id == current_result) ? "selected ":""}result">
          <td><strong>${item.keyboard.keyboard_name}</strong><br />${item.keyboard.filename}</td>
          <td>${encode(item.corpus.slice(0, 12))}...</td>
          <td>${precise(item.total_effort)}${item.id!=current_result?`<sup>${precise(item.total_effort/sr.total_effort*100)}%</sup>`:""}</td>
          <td>${precise(item.finger_effort)}${item.id!=current_result?`<sup>${precise(item.finger_effort/sr.finger_effort*100)}%</sup>`:""}</td>
          <td>${precise(item.thumb_effort)}${item.id!=current_result?`<sup>${precise(item.thumb_effort/sr.thumb_effort*100)}%</sup>`:""}</td>
          <td>${precise(item.finger_base)}${item.id!=current_result?`<sup>${precise(item.finger_base/sr.finger_base*100)}%</sup>`:""}</td>
          <td>${precise(item.thumb_base)}${item.id!=current_result?`<sup>${precise(item.thumb_base/sr.thumb_base*100)}%</sup>`:""}</td>
          <td>${precise(item.finger_penalties)}${item.id!=current_result?`<sup>${precise(item.finger_penalties/sr.finger_penalties*100)}%</sup>`:""}</td>
          <td>${precise(item.path)}${item.id!=current_result?`<sup>${precise(item.path/sr.path*100)}%</sup>`:""}</td>
          <td title="${encode(distinct_chars.join(" "))}">${distinct_chars.length}</td>
        </tr>
        <tr><td colspan="10" class="graphs">
          <div class="graph base" title="Finger Base: ${precise(item.finger_base)}" style="width:${relative_scale * item.finger_base * K_B}%"></div><div class="graph base thumb" title="Thumb Base: ${precise(item.thumb_base)}" style="width:${relative_scale * item.thumb_base * K_B}%"></div><div class="graph penalties" title="Finger Penalties: ${precise(item.finger_penalties)}" style="width:${relative_scale * item.finger_penalties * K_P}%"></div><div class="graph penalties thumb" title="Thumb Penalties: ${precise(item.thumb_penalties)}" style="width:${relative_scale * item.thumb_penalties * K_P}%"></div><div class="graph path" title="Stroke Path: ${precise(item.path)}" style="width:${relative_scale * item.path * K_S}%"></div>
              </td></tr>
              <tr class="finger-row"><td colspan="10">
                <div class="buttons">
                  <span class="radio">
                  <button data-item-id="${item.id}" data-function="changeLayout" data-layout="0" class="item-button small${item.keyboard.layout==0?" selected":""}">Qwerty</button><button data-item-id="${item.id}" data-function="changeLayout" data-layout="1" class="item-button small${item.keyboard.layout==1?" selected":""}">Colemak</button><button data-item-id="${item.id}" data-function="changeLayout" data-layout="2" class="item-button small${item.keyboard.layout==2?" selected":""}">Dvorak</button>
                  </span>
                  <button data-item-id="${item.id}" data-function="removeResult" class="item-button small red">X</button>
                </div>
                <details data-item-id="${item.id}"${item.details?" open":""}>
                <summary><strong>Usage stats</strong></summary>
                <div class="finger-usages">
                  ${finger_usage_string}
                </div>
                </details>
              </td></tr>`;
    })
    .join("")}`;
};
  
const appendTable = (table, destination) => {
  document.querySelector(destination).innerHTML = table;
};

const handleSortClick = () => {
  const filters = document.querySelectorAll("#results th");

Array.prototype.forEach.call(filters, filter => {
    filter.addEventListener("click", () => {
      if (!filter.dataset.filterValue) return false;

Array.prototype.forEach.call(filters, filter => {
        filter.classList.remove("active");
      });
      filter.classList.add("active");
      currentFilter = filter.dataset.filterValue;
      toggleOrder();
      drawTable(false);
    });
  });
};

const getSelectedResult = () => {
  for (var i = 0; i < results.length; i++) {
    if (results[i].id == current_result)
      return results[i];
  }
}

const drawTable = (selectLast) => {
  if (selectLast) {
    current_result = results.length - 1;
  }
  let newTableData = sortTable(results, currentFilter);
  let tableOutput = renderTable(newTableData);

appendTable(tableOutput, "#results tbody");

prevFilter = currentFilter;

const rows = document.querySelectorAll("#results tr");
  Array.prototype.forEach.call(rows, row => {
    row.addEventListener("click", () => {
      if (!row.dataset.itemId) return false;
      current_result = row.dataset.itemId;
      var selected_result = getSelectedResult();
      drawTable(false);
      renderKeyboard(selected_result.keyboard);
      renderLayout(selected_result.keyboard);
    });
  });

const details = document.querySelectorAll("#results tr details");
  Array.prototype.forEach.call(details, detail => {
    detail.addEventListener("click", () => {
      if (!detail.dataset.itemId) return false;
      var result = getResult(detail.dataset.itemId);
      result.details = !detail.open;
    });
  });

const buttons = document.querySelectorAll("#results tr .item-button");
  Array.prototype.forEach.call(buttons, button => {
    button.addEventListener("click", () => {
      if (!button.dataset.function) return false;
      window[button.dataset.function](button);
    });
  });

};

function changeLayout(element) {
  var result = getResult(element.dataset.itemId);
  result.keyboard.layout = element.dataset.layout;
  computeResult(result);
  drawTable(false);
  if (current_result == result.id) {
    renderLayout(result.keyboard);
  }
}

function removeResult(element) {
  var result = getResult(element.dataset.itemId);
  var id = result.id;

results.splice(getResultCurrentIndex(id), 1);
  
  if (current_result == id) {
    current_result = 0;
    renderKeyboard(getSelectedResult().keyboard);
    renderLayout(getSelectedResult().keyboard);
  }
  drawTable(false);
}

handleSortClick();

// layout lookup - qwerty, colemak, dvorak
var keyboard_layout = {
  "q": ["q","q","'"],
  "w": ["w","w",","],
  "e": ["e","f","."],
  "r": ["r","p","p"],
  "t": ["t","g","y"],
  "y": ["y","j","f"],
  "u": ["u","l","g"],
  "i": ["i","u","c"],
  "o": ["o","y","r"],
  "p": ["p",";","m"],
  "a": ["a","a","a"],
  "s": ["s","r","o"],
  "d": ["d","s","e"],
  "f": ["f","t","i"],
  "g": ["g","d","u"],
  "h": ["h","h","d"],
  "j": ["j","n","h"],
  "k": ["k","e","t"],
  "l": ["l","i","n"],
  ";": [";","o","s"],
  "'": ["'","'","-"],
  "z": ["z","z",";"],
  "x": ["x","x","q"],
  "c": ["c","c","j"],
  "v": ["v","v","k"],
  "b": ["b","b","x"],
  "n": ["n","k","b"],
  "m": ["m","m","l"],
  ",": [",",",","w"],
  ".": [".",".","v"],
  "/": ["/","/","z"],
  "[": ["[","[","/"],
  "]": ["]","]","="],
  "-": ["-","-","["],
  "=": ["=","=","]"],

"Q": ["Q","Q","\""],
  "W": ["W","W","<"],
  "E": ["E","F",">"],
  "R": ["R","P","P"],
  "T": ["T","G","Y"],
  "Y": ["Y","J","F"],
  "U": ["U","L","G"],
  "I": ["I","U","C"],
  "O": ["O","Y","R"],
  "P": ["P",":","M"],
  "A": ["A","A","A"],
  "S": ["S","R","O"],
  "D": ["D","S","E"],
  "F": ["F","T","I"],
  "G": ["G","D","U"],
  "H": ["H","H","D"],
  "J": ["J","N","H"],
  "K": ["K","E","T"],
  "L": ["L","I","N"],
  ":": [":","O","S"],
  "\"": ["\"","\"","_"],
  "Z": ["Z","Z",";"],
  "X": ["X","X","Q"],
  "C": ["C","C","J"],
  "V": ["V","V","K"],
  "B": ["B","B","X"],
  "N": ["N","K","B"],
  "M": ["M","M","L"],
  "<": ["<","<","W"],
  ">": [">",">","V"],
  "|": ["|","|","Z"],
  "{": ["{","{","|"],
  "}": ["}","}","+"],
  "_": ["_","_","{"],
  "+": ["+","+","}"],
};

var legend_lookup = {
  "KC_LEFT": "<i class='fas fa-arrow-left'></i>",
  "KC_DOWN": "<i class='fas fa-arrow-down'></i>",
  "KC_UP": "<i class='fas fa-arrow-up'></i>",
  "KC_RGHT": "<i class='fas fa-arrow-right'></i>",
  "KC_BSPC": "<i class='fas fa-backspace'></i>",
  "KC_DEL": "<small>Del</small>",
  "KC_LALT": "<small>Alt</small>",
  "KC_LCTL": "<small>Ctrl</small>",
  "KC_LGUI": "<small>Os</small>",
  "KC_LSFT": "<small>Shft</small>",
  "KC_ESC": "<small>Esc</small>",
  "KC_F1": "<small>F1</small>",
  "KC_F2": "<small>F2</small>",
  "KC_F3": "<small>F3</small>",
  "KC_F4": "<small>F4</small>",
  "KC_F5": "<small>F5</small>",
  "KC_F6": "<small>F6</small>",
  "KC_F7": "<small>F7</small>",
  "KC_F8": "<small>F8</small>",
  "KC_F9": "<small>F9</small>",
  "KC_F10": "<small>F10</small>",
  "KC_F11": "<small>F11</small>",
  "KC_F12": "<small>F12</small>",
};

var unicode_lookup = {
  "KC_NO": "",
  "KC_TRNS": "",
  "KC_SPC": " ",
  "KC_TAB": "⭾",
  "KC_A": "a",
  "KC_B": "b",
  "KC_C": "c",
  "KC_D": "d",
  "KC_E": "e",
  "KC_F": "f",
  "KC_G": "g",
  "KC_H": "h",
  "KC_I": "i",
  "KC_J": "j",
  "KC_K": "k",
  "KC_L": "l",
  "KC_M": "m",
  "KC_N": "n",
  "KC_O": "o",
  "KC_P": "p",
  "KC_Q": "q",
  "KC_R": "r",
  "KC_S": "s",
  "KC_T": "t",
  "KC_U": "u",
  "KC_V": "v",
  "KC_W": "w",
  "KC_X": "x",
  "KC_Y": "y",
  "KC_Z": "z",
  "KC_SCLN": ";",
  "KC_COMM": ",",
  "KC_DOT": ".",
  "KC_SLSH": "/",
  "KC_GRV": "`",
  "KC_TILD": "~",
  "KC_BSLS": "\\",
  "KC_PIPE": "|",
  "KC_QUOT": "'",
  "KC_LSFT": "⇧",
  "KC_RSFT": "⇧",
  "KC_ENT": "↵",
  "KC_BSPC": "⌫",
  "KC_DEL": "⌦",
  "KC_ESC": "⎋",
  "KC_F1": "F1",
  "KC_F2": "F2",
  "KC_F3": "F3",
  "KC_F4": "F4",
  "KC_F5": "F5",
  "KC_F6": "F6",
  "KC_F7": "F7",
  "KC_F8": "F8",
  "KC_F9": "F9",
  "KC_F10": "F10",
  "KC_F11": "F11",
  "KC_F12": "F12",
  "KC_1": "1",
  "KC_2": "2",
  "KC_3": "3",
  "KC_4": "4",
  "KC_5": "5",
  "KC_6": "6",
  "KC_7": "7",
  "KC_8": "8",
  "KC_9": "9",
  "KC_0": "0",
  "KC_EXLM": "!",
  "KC_AT": "@",
  "KC_HASH": "#",
  "KC_DLR": "$",
  "KC_PERC": "%",
  "KC_CIRC": "^",
  "KC_AMPR": "&",
  "KC_ASTR": "*",
  "KC_LPRN": "(",
  "KC_RPRN": ")",
  "KC_MINS": "-",
  "KC_UNDS": "_",
  "KC_EQL": "=",
  "KC_PLUS": "+",
  "KC_DQUO": "\"",
  "KC_LT": "<",
  "KC_GT": ">",
  "KC_QUES": "?",
  "KC_COLN": ":",
  "KC_LBRC": "[",
  "KC_RBRC": "]",
  "KC_LCBR": "{",
  "KC_RCBR": "}",
  "KC_LEFT": "←",
  "KC_DOWN": "↓",
  "KC_UP": "↑",
  "KC_RGHT": "→",
  "KC_HOME": "⤒",
  "KC_END": "⤓",
  "KC_PGUP": "⇞",
  "KC_PGDN": "⇟",
  "KC_LCTL": "Ⓒ",
  "KC_RCTL": "Ⓒ",
  "KC_LALT": "Ⓐ",
  "KC_RALT": "Ⓐ",
  "KC_LGUI": "Ⓖ",
  "KC_RGUI": "Ⓖ",
  "KC_MPLY": "⏯",
  "KC_MNXT": "⏭",
  "KC_VOLU": "🕪",
  "KC_VOLD": "🕩",
  "MO(1)": "▲1",
  "MO(2)": "▲2",
  "MO(3)": "▲3",
  "MO(4)": "▲4",
  "MO(5)": "▲5",
  "MO(6)": "▲6",
  "LT(1,KC_GRV)": "▲1",
};

var shift_keys = {
  "'": "\"",
  ";": ":",
  "/": "?",
  ",": "<",
  ".": ">",
  "a": "A",
  "b": "B",
  "c": "C",
  "d": "D",
  "e": "E",
  "f": "F",
  "g": "G",
  "h": "H",
  "i": "I",
  "j": "J",
  "k": "K",
  "l": "L",
  "m": "M",
  "n": "N",
  "o": "O",
  "p": "P",
  "q": "Q",
  "r": "R",
  "s": "S",
  "t": "T",
  "u": "U",
  "v": "V",
  "w": "W",
  "x": "X",
  "y": "Y",
  "z": "Z",
  "1": "!",
  "2": "@",
  "3": "#",
  "4": "$",
  "5": "%",
  "6": "^",
  "7": "&",
  "8": "*",
  "9": "(",
  "0": ")",
  "[": "{",
  "]": "}",
  "-": "_",
  "=": "+",
  "`": "~",
  "\\": "|",
};

var shifted_keys = {
  "\"": "'", 
  ":": ";",
  "?": "/",
  "<": ",",
  ">": ".",
  "A": "a",
  "B": "b",
  "C": "c",
  "D": "d",
  "E": "e",
  "F": "f",
  "G": "g",
  "H": "h",
  "I": "i",
  "J": "j",
  "K": "k",
  "L": "l",
  "M": "m",
  "N": "n",
  "O": "o",
  "P": "p",
  "Q": "q",
  "R": "r",
  "S": "s",
  "T": "t",
  "U": "u",
  "V": "v",
  "W": "w",
  "X": "x",
  "Y": "y",
  "Z": "z",
  "!": "1",
  "@": "2",
  "#": "3",
  "$": "4",
  "%": "5",
  "^": "6",
  "&": "7",
  "*": "8",
  "(": "9",
  ")": "0",
  "{": "[",
  "}": "]",
  "_": "-",
  "+": "=",
  "~": "`",
  "|": "\\",
};

var keyboard = {};
var HOMEROW_OFFSET = 3;

function guessThumbs(keyboard, homerow) {
  var key_lp = keyboard.keymap[homerow.leftPointer.index];
  var key_rp = keyboard.keymap[homerow.rightPointer.index];
  var left = findKeyAtCoords(keyboard, key_lp.x + 0, key_lp.y + 2);
  var right = findKeyAtCoords(keyboard, key_rp.x - 0, key_lp.y + 2);
  return {left: left, right: right}; 
}

function guessFingerLocations(keyboard) {
  keyboard.fingers = [];
  var homerow = guessHomerow(keyboard);
  var thumbs = guessThumbs(keyboard, homerow);
  keyboard.fingers[0] = homerow.leftPointer.index - 3;
  keyboard.fingers[1] = homerow.leftPointer.index - 2;
  keyboard.fingers[2] = homerow.leftPointer.index - 1;
  keyboard.fingers[3] = homerow.leftPointer.index;
  keyboard.fingers[4] = thumbs.left.index;
  keyboard.fingers[5] = thumbs.right.index;
  keyboard.fingers[6] = homerow.rightPointer.index;
  keyboard.fingers[7] = homerow.rightPointer.index + 1;
  keyboard.fingers[8] = homerow.rightPointer.index + 2;
  keyboard.fingers[9] = homerow.rightPointer.index + 3;
}

function calcPenalty(key) {
  if (key.thumb)
    return (parseFloat(W_0) + W_HAND * Math.max((key.hand?2:-2) * (P_HAND - 0.5), 0) + W_THUMB);
  else
    return (parseFloat(W_0) + W_HAND * Math.max((key.hand?2:-2) * (P_HAND - 0.5), 0) + W_FINGER * P_FINGER[key.finger] + W_ROW * P_ROW[Math.max(Math.min(Math.round(key.row), 6), 0)]);
}

function loadLayout(info) {
  var keymap = [];

for (var i = 0; i < info.layout.length; i++) {
    var w = 1, h = 1;
    if (info.layout[i].w)
      w = info.layout[i].w;
    if (info.layout[i].h)
      h = info.layout[i].h;
    keymap[i] = {};
    keymap[i] = info.layout[i];
    keymap[i].x = parseFloat(keymap[i].x);
    keymap[i].y = parseFloat(keymap[i].y);
    if (keymap[i].matrix) {
      keymap[i].matrix_row = parseInt(keymap[i].matrix[0]);
      keymap[i].matrix_col = parseInt(keymap[i].matrix[1]);
    } else {
      keymap[i].matrix_row = parseInt(keymap[i].y);
      keymap[i].matrix_col = parseInt(keymap[i].x);
    }
    keymap[i].w = parseFloat(w);
    keymap[i].h = parseFloat(h);
    keymap[i].i = i;
    keymap[i].layers = [];
  }
  return keymap;
}

function precise(x) {
  return Number.parseFloat(x).toPrecision(4);
}

function keyLookup(character, layout) {
  if (keyboard_layout[character])
    return keyboard_layout[character][layout];
  return character;
}

function renderLayout(keyboard) {
  var layout_element = document.getElementById("keymap");
  var inner = "";
  var keymap = keyboard.keymap;

var base = precise(keymap[i].base);
    var base_bg = d3.interpolatePuBuGn(1 - keymap[i].base/max_base);
    var base_fg = textColorFromBackground(base_bg);

var penalties = precise(keymap[i].penalty);
    var penalties_bg = d3.interpolatePuBuGn(1 - keymap[i].penalty/max_penalties);
    var penalties_fg = textColorFromBackground(penalties_bg);

var usage = precise(keymap[i].usage * 100);
    var usage_bg = d3.interpolatePuBuGn(keymap[i].count / max_count);
    var usage_fg = textColorFromBackground(usage_bg);

var finger = (keyboard.fingers.includes(i)?`<strong>( ${keymap[i].raw_finger} )</strong>`:keymap[i].raw_finger);
    var finger_bg = d3.schemeCategory10[keymap[i].raw_finger];
    var finger_fg = textColorFromBackground(finger_bg);

var ghosts =  keymap[i].ghost;
    var ghosts_bg = d3.interpolateSinebow(keymap[i].ghost / max_ghost);
    if (ghosts == 0) {
      ghosts_bg = d3.interpolatePuBuGn(0.0);
    }
    var ghosts_fg = textColorFromBackground(ghosts_bg);

var matrix_col_bg = d3.interpolateSinebow(keymap[i].matrix_col / (keyboard.matrix_size.cols + keyboard.matrix_size.rows));
    var matrix_row_bg = d3.interpolateSinebow((keyboard.matrix_size.cols + keymap[i].matrix_row) / (keyboard.matrix_size.cols + keyboard.matrix_size.rows));

inner += `<div id="key-${i}" class="key${selecting_keys?" selectable":""}" data-key="${i}" style="left: calc(${keymap[i].x} * (var(--key-spacing) + var(--key-unit))); top: calc(${keymap[i].y} * (var(--key-spacing) + var(--key-unit))); width: calc(${keymap[i].w} * (var(--key-unit) + var(--key-spacing)) - var(--key-spacing));">${key_html}
      <div class="heatmap-6 label" style="display: ${heatmap_selected == 6 ? "block": "none"}">${keymap[i].label}</div>
      <div class="heatmap-6 matrix-row" style="background:${matrix_row_bg}; display: ${heatmap_selected == 6 ? "block": "none"}">${keymap[i].matrix_row}</div>
      <div class="heatmap-6 matrix-col" style="background:${matrix_col_bg}; display: ${heatmap_selected == 6 ? "block": "none"}">${keymap[i].matrix_col}</div>
    <div class="heatmap heatmap-0" style="background:${effort_bg}; color: ${effort_fg}; display: ${heatmap_selected == 0 ? "block": "none"}">${effort}</div>
    <div class="heatmap heatmap-1" style="background:${base_bg}; color: ${base_fg}; display: ${heatmap_selected == 1 ? "block": "none"}">${base}</div>
    <div class="heatmap heatmap-2" style="background:${penalties_bg}; color: ${penalties_fg}; display: ${heatmap_selected == 2 ? "block": "none"}">${penalties}</div>
    <div class="heatmap heatmap-3" style="background:${usage_bg}; color: ${usage_fg}; display: ${heatmap_selected == 3 ? "block": "none"}">${usage}</div>
    <div class="heatmap heatmap-4" style="background:${finger_bg}; color: ${finger_fg}; display: ${heatmap_selected == 4 ? "block": "none"}">${finger}</div>
    <div class="heatmap heatmap-5 color-legends" style="display: ${heatmap_selected == 5 ? "block": "none"}">${key_html}</div>
    <div class="heatmap heatmap-6" style="background:${ghosts_bg}; color: ${ghosts_fg}; display: ${heatmap_selected == 6 ? "block": "none"}">${ghosts}</div>
    </div>`;
  }

layout_element.innerHTML = inner;

var selecting_home_position = 0;

const lsft = /LSFT$(.+)$/;

var result_id = results.length;
    results[result_id] = {};
    results[result_id].id = result_id;
    results[result_id].keyboard = keyboard;
    results[result_id].corpus = document.getElementById("corpus").value;
    computeResult(results[result_id]);
    renderLayout(keyboard);
    drawTable(true);
  });
}

function renderKeyboard(keyboard) {
    var width = parseInt(getComputedStyle(document.getElementById("main-container")).getPropertyValue("width"));
    var padding = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--key-padding'));
    var spacing = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--key-spacing'));
    var scale = width / keyboard.width;
    document.documentElement.style.setProperty('--key-unit', (scale-padding+(padding/keyboard.width))+'px');
    document.documentElement.style.setProperty('--keyboard-height', keyboard.height);
    document.documentElement.style.setProperty('--keyboard-width', keyboard.width);
}

if (window.File && window.FileReader && window.FileList && window.Blob) {

function handleChooseFile(event) {
    handleFiles(event.target.files);
  }

function handleJSONDrop(event) {
    event.stopPropagation();
    event.preventDefault();
    handleFiles(event.dataTransfer.files);
  }

function handleDragOver(event) {
    event.stopPropagation();
    event.preventDefault();
    event.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
  }

// Setup the dnd listeners.
  var dropZone = document.getElementsByTagName('body')[0];
  dropZone.addEventListener('dragover', handleDragOver, false);
  dropZone.addEventListener('drop', handleJSONDrop, false);
  document.getElementById('file').addEventListener('change', handleChooseFile);
 
}

function recalculateResults() {
  for (var i = 0; i < results.length; i++) {
    computeResult(results[i]);
    drawTable(false);
  } 
  renderLayout(getSelectedResult().keyboard);
}

for (var i = 0; i < elements.length; i++) {
    if (!elements[i]) {
      console.log("Loose parameter");
      continue;
    }
    elements[i].min = 0.000;
    elements[i].max = 1.000;
    elements[i].step = 0.001;
    elements[i].value = initial_values[i];
    elements[i].title = initial_values[i];
    elements[i].onchange = e => {
      var id = e.target.id.split(".");
      if (id.length > 1)
        window[id[0]][id[1]] = e.target.value;
      else
        window[id[0]] = e.target.value;
      e.target.title = e.target.value;
      recalculateResults();
    }
  }
  
}

register_param("K_B", 0.2218);
register_param("K_P", 1.0000);
register_param("K_S", 0.2663);

register_param("K_1", 1.000);
register_param("K_2", 0.367);
register_param("K_3", 0.235);

register_param("P_HAND", 0.5);
register_param("P_ROW", [ 1.0, 0.666, 0.333, 0.0, 0.666, 0.8, 1.0]);
register_param("P_FINGER", [ 1.0, 0.5, 0.0, 0.0, 0.0, 0.0, 0.5, 1.0 ]);

register_param("W_0",      0.0000);
register_param("W_HAND",   0.1142);
register_param("W_ROW",    0.7869);
register_param("W_FINGER", 1.0000);
register_param("W_THUMB",  0.0000);

register_param("F_HAND", 1.0);
register_param("F_ROW", 0.3);
register_param("F_FINGER", 0.3);

register_param("STROKE_PATH_HAND_WEIGHT", [
  0.0,
  0.5,
  1.0,
]);

register_param("STROKE_PATH_ROW_WEIGHT", [
  0.0000,
  0.1428,
  0.2857,
  0.4285,
  0.5714,
  0.7142,
  0.8571,
  1.0000 
]);

register_param("STROKE_PATH_FINGER_WEIGHT", [
  0.0000, // 0 double inner roll
  0.2857, // 1 repeat one
  0.1428, // 2 single inner roll
  0.4285, // 3 single outer roll
  0.2857, // 4 double outer roll
  0.2857, // 5 same finger
  0.4285, // 6 alt hands
  0.2857  // 7 bounce
]);

register_param("STROKE_PATH_SAME_KEY_WEIGHT", 0.5000);

// 0b000 format where each bit is a hand, left=0 right=1
// write out elements manually, then sort by index
var STROKE_PATH_HAND_INDEX = [2, 0, 1, 0, 0, 1, 0, 2];

// 3 bits per row, 0b011 is homerow, higher numbers are higher rows
// write out elements manually, then sort by index
// neat pattern forms based around 3,3
var STROKE_PATH_ROW_INDEX = [
  1, 5, 5, 3, 7, 7, 7, 7, 
  4, 1, 5, 3, 7, 7, 7, 7, 
  4, 4, 1, 3, 7, 7, 7, 7, 
  1, 1, 1, 0, 2, 2, 2, 2, 
  5, 5, 5, 3, 2, 6, 6, 6, 
  5, 5, 5, 3, 7, 2, 6, 6, 
  5, 5, 5, 3, 7, 7, 2, 6, 
  5, 5, 5, 3, 7, 7, 7, 2
];

// 3 bits per finger, 0 is left pinky, 7 right pinky
// https://docs.google.com/spreadsheets/d/14FXg6m0PgpJf6eSjiu0r1wzG-G45J_H6WQEIGcLrODM/edit?usp=sharing
// 0 double inner roll
// 1 repeat one
// 2 single inner roll
// 3 single outer roll
// 4 double outer roll
// 5 same key
// 6 alt hands
// 7 bounce
var STROKE_PATH_FINGER_INDEX = [ 5, 1, 1, 1, 1, 1, 1, 1, 7, 1, 0, 0, 2, 2, 2, 2, 7, 3, 1, 0, 2, 2, 2, 2, 7, 3, 3, 1, 2, 2, 2, 2, 6, 6, 6, 6, 1, 3, 3, 3, 6, 6, 6, 6, 2, 1, 3, 3, 6, 6, 6, 6, 2, 2, 1, 3, 6, 6, 6, 6, 2, 2, 2, 1, 1, 7, 3, 3, 3, 3, 3, 3, 1, 5, 1, 1, 1, 1, 1, 1, 2, 7, 1, 0, 2, 2, 2, 2, 2, 7, 3, 1, 2, 2, 2, 2, 6, 6, 6, 6, 1, 3, 3, 3, 6, 6, 6, 6, 2, 1, 3, 3, 6, 6, 6, 6, 2, 2, 1, 3, 6, 6, 6, 6, 2, 2, 2, 1, 1, 3, 7, 3, 3, 3, 3, 3, 4, 1, 7, 3, 3, 3, 3, 3, 1, 1, 5, 1, 1, 1, 1, 1, 2, 2, 7, 1, 2, 2, 2, 2, 6, 6, 6, 6, 1, 3, 3, 3, 6, 6, 6, 6, 2, 1, 3, 3, 6, 6, 6, 6, 2, 2, 1, 3, 6, 6, 6, 6, 2, 2, 2, 1, 1, 3, 3, 7, 3, 3, 3, 3, 4, 1, 3, 7, 3, 3, 3, 3, 4, 4, 1, 7, 3, 3, 3, 3, 1, 1, 1, 5, 1, 1, 1, 1, 6, 6, 6, 6, 1, 3, 3, 3, 6, 6, 6, 6, 2, 1, 3, 3, 6, 6, 6, 6, 2, 2, 1, 3, 6, 6, 6, 6, 2, 2, 2, 1, 1, 2, 2, 2, 6, 6, 6, 6, 3, 1, 2, 2, 6, 6, 6, 6, 3, 3, 1, 2, 6, 6, 6, 6, 3, 3, 3, 1, 6, 6, 6, 6, 1, 1, 1, 1, 5, 1, 1, 1, 3, 3, 3, 3, 7, 1, 4, 4, 3, 3, 3, 3, 7, 3, 1, 4, 3, 3, 3, 3, 7, 3, 3, 1, 1, 2, 2, 2, 6, 6, 6, 6, 3, 1, 2, 2, 6, 6, 6, 6, 3, 3, 1, 2, 6, 6, 6, 6, 3, 3, 3, 1, 6, 6, 6, 6, 2, 2, 2, 2, 1, 7, 2, 2, 1, 1, 1, 1, 1, 5, 1, 1, 3, 3, 3, 3, 3, 7, 1, 4, 3, 3, 3, 3, 3, 7, 3, 1, 1, 2, 2, 2, 6, 6, 6, 6, 3, 1, 2, 2, 6, 6, 6, 6, 3, 3, 1, 2, 6, 6, 6, 6, 3, 3, 3, 1, 6, 6, 6, 6, 2, 2, 2, 2, 1, 3, 7, 2, 2, 2, 2, 2, 0, 1, 7, 2, 1, 1, 1, 1, 1, 1, 5, 1, 3, 3, 3, 3, 3, 3, 7, 1, 1, 2, 2, 2, 6, 6, 6, 6, 3, 1, 2, 2, 6, 6, 6, 6, 3, 3, 1, 2, 6, 6, 6, 6, 3, 3, 3, 1, 6, 6, 6, 6, 2, 2, 2, 2, 1, 3, 3, 7, 2, 2, 2, 2, 0, 1, 3, 7, 2, 2, 2, 2, 0, 0, 1, 7, 1, 1, 1, 1, 1, 1, 1, 5 ];

function clone(obj) {
    if (null == obj || "object" != typeof obj) return obj;
    var copy = obj.constructor();
    for (var attr in obj) {
        if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr];
    }
    return copy;
}

function updateNeedsKeyboard(exists) {
  var buttons = document.querySelectorAll(".needs-keyboard");
  Array.prototype.forEach.call(buttons, button => {
    button.disabled = !exists;
  });
}

updateNeedsKeyboard(false);

var selecting_keys = false;

document.getElementById("recompute-all").onclick = event => { 
  for (var i = 0; i < results.length; i++) {
    results[i].corpus = document.getElementById("corpus").value;
    computeResult(results[i]);
  }
  renderLayout(getSelectedResult().keyboard);
  drawTable(false);
};

document.getElementById("compute").onclick = event => { 
  if (results.length == 0)
    return; 
  var result_id = results.length;
  results[result_id] = {};
  results[result_id].id = result_id;
  results[result_id].keyboard = getSelectedResult().keyboard;
  results[result_id].corpus = document.getElementById("corpus").value;
  computeResult(results[result_id]);
  renderLayout(results[result_id].keyboard);
  drawTable(false);
};

loadConfiguratorKeyboards();

const heatmaps = document.querySelectorAll(".heatmap-button");

Array.prototype.forEach.call(heatmaps, heatmap => {
  heatmap.addEventListener("click", () => {
    if (!heatmap.dataset.heatmapId) return false;
    heatmap_selected = heatmap.dataset.heatmapId;

Array.prototype.forEach.call(heatmaps, hm => {
      if (hm.dataset.heatmapId == heatmap_selected) {
        hm.classList.add("selected");
        var divs = document.querySelectorAll(".key .heatmap-"+hm.dataset.heatmapId);
        Array.prototype.forEach.call(divs, div => {
          div.style.display = "block";
        });
      } else {
        hm.classList.remove("selected");
        var divs = document.querySelectorAll(".key .heatmap-"+hm.dataset.heatmapId);
        Array.prototype.forEach.call(divs, div => {
          div.style.display = "none";
        });
      }
    });

});
});

function computeResult(result) {
  var finger_effort = 0;
  var thumb_effort = 0;
  var finger_base = 0;
  var finger_penalty = 0;
  var thumb_base = 0;
  var thumb_penalty = 0;
  var total_stroke_path = 0;
  var keys = [], thumbs = [], fingers = [];
  var unknown_chars = [];
  var keyboard = result.keyboard;
  var keymap = keyboard.keymap;
  var text = result.corpus;
  var usage_fingers = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];

for (var i = 0; i < keymap.length; i++) {
    keymap[i].count = 0;
    keymap[i].ghost = 0;
    keymap[i].penalty = calcPenalty(keymap[i]);
  }

// convert to lut/switch eventually
  text = text.replace(/(?:\r\n|\r|\n)/g, '↵');
  for (var i = 0; i < text.length; i++) {
    var key = findKey(keyboard, text[i]);
    // skip keys we can't find
    if (key != -1) {
      if (key.layer != 0) {
        var layer_key = findKey(keyboard, "▲"+key.layer);
        if (layer_key != -1)
          keys.push(keymap[layer_key.index])
      }
      keys.push(keymap[key.index]);
    } else {
      // check for shifted keys
      key = findKey(keyboard, shifted_keys[text[i]]);
      if (key != -1) {
        var shift_key = findKey(keyboard, "⇧");
        if (shift_key != -1) {
          keys.push(keymap[shift_key.index]);
          keys.push(keymap[key.index]);
        }
      } else {
        unknown_chars.push(text[i]);
      }
    }
  }
  for (var i = 0; i < keys.length; i++) {
    keys[i].count++;
    if (keys[i].thumb) {
      thumbs[fingers.length] = keys[i];
      usage_fingers[keys[i].hand + 4]++;
    } else {
      fingers.push(keys[i]);
      if (keys[i].hand)
        usage_fingers[keys[i].finger + 2]++;
      else
        usage_fingers[keys[i].finger]++;
    }
  }
  // save for later incase we need to remove some for calculations
  var num_triads = fingers.length - 2;
  for (var i = 0; i < fingers.length - 2; i++) {

// very basic thumb model. should account for previous states
    if (thumbs[i] != null && thumbs[i+1] != null && thumbs[i+2] != null) {
      var t_base = thumbs[i].base * K_1 *
                 (1 + thumbs[i+1].base * K_2 * 
                 (1 + thumbs[i+2].base * K_3));
      var t_penalty = thumbs[i].penalty * K_1 *
                    (1 + thumbs[i+1].penalty * K_2 *
                    (1 + thumbs[i+2].penalty * K_3));
      thumb_base += t_base;
      thumb_penalty += t_penalty;
      thumb_effort += K_B * t_base + K_P * t_penalty;
    } else if (thumbs[i] != null && thumbs[i+1] != null) {
      var t_base = thumbs[i].base * K_1 *
                 (1 + thumbs[i+1].base * K_2);
      var t_penalty = thumbs[i].penalty * K_1 *
                    (1 + thumbs[i+1].penalty * K_2);
      thumb_base += t_base;
      thumb_penalty += t_penalty;
      thumb_effort += K_B * t_base + K_P * t_penalty;
    } else if (thumbs[i] != null) {
      var t_base = thumbs[i].base * K_1;
      var t_penalty = thumbs[i].penalty * K_1;
      thumb_base += t_base;
      thumb_penalty += t_penalty;
      thumb_effort += K_B * t_base + K_P * t_penalty;
    }

if (thumbs[i+1])
      checkForPhantom(keyboard, fingers[i], thumbs[i+1], fingers[i+1]);
    if (thumbs[i] && thumbs[i+1])
      checkForPhantom(keyboard, thumbs[i], fingers[i], thumbs[i+1]);

var base = fingers[i].base * K_1 *
                      (1 + fingers[i+1].base * K_2 * 
                      (1 + fingers[i+2].base * K_3));

var penalty = fingers[i].penalty * K_1 *
                  (1 + fingers[i+1].penalty * K_2 *
                  (1 + fingers[i+2].penalty * K_3));

var stroke_path_hand = STROKE_PATH_HAND_INDEX[(fingers[i].hand << 2) | (fingers[i+1].hand << 1) | (fingers[i+2].hand)];
    
    var row_diff_1 = Math.max(Math.min(parseInt(Math.round(fingers[i].row - fingers[i+1].row + HOMEROW_OFFSET)), 3), 0);
    var row_diff_2 = Math.max(Math.min(parseInt(Math.round(fingers[i].row - fingers[i+2].row + HOMEROW_OFFSET)), 3), 0);
    var stroke_path_row = STROKE_PATH_ROW_INDEX[(row_diff_1 << 3) | row_diff_2];

var stroke_path = stroke_path_hand * F_HAND + 
                      stroke_path_row * F_ROW + 
                      stroke_path_finger * F_FINGER;

finger_base += base;
    finger_penalty += penalty;
    total_stroke_path += stroke_path;

finger_effort += K_B * base +
                     K_P * penalty +
                     K_S * stroke_path;
  }

var usage = [];
  for (var i = 0; i < keymap.length; i++) {
    keymap[i].usage = keymap[i].count / fingers.length;
  }

var total_effort = thumb_effort + finger_effort;

result.total_effort = total_effort / num_triads;
  result.thumb_effort = thumb_effort / num_triads;
  result.thumb_base = thumb_base / num_triads;
  result.thumb_penalties = thumb_penalty / num_triads;
  result.finger_effort = finger_effort / num_triads;
  result.finger_base = finger_base / num_triads;
  result.finger_penalties = finger_penalty / num_triads;
  result.path = total_stroke_path / num_triads;
  result.unknown_chars = unknown_chars.slice(0);
  result.usage_fingers = usage_fingers;
  if (result.details == null)
    result.details = false;
}

</script>

</html>

ⒸⒶS

ⒸA

Ⓒr

ⒼR

Keyboard	Corpus	$e$	$e_{finger}$	$e_{thumb}$	$b_{finger}$	$b_{thumb}$	$p_{finger}$	$s$	?

Effort Component Weights
\(k_{base}\)
\(k_{penalty}\)
\(k_{stroke}\)

Triad Interaction Weights
\(k_{1}\)
\(k_{2}\)
\(k_{3}\)

Penalty Weights
\(w_0\)
\(w_{hand}\)
\(w_{row}\)
\(w_{finger}\)
\(w_{thumb}\)

Weights
\(f_{hand}\)
\(f_{row}\)
\(f_{finger}\)

Finger Penalty \(p_{finger}\)
Left				Right
Pinky	Ring	Middle	Pointer	Pointer	Middle	Ring	Pinky

Row Penalty \(p_{row}\)
3 Above
2 Above
1 Above
Homerow
1 Below
2 Below
3 Below

Hand Combination Weight \(s_{hand}\)
Both used, not alternating
Alternating
Same

Row Combination Weight \(s_{row}\)
Same
Downward progression, with repetition
Upward progression, with repetition
Some different, not monotonic, max row Δ 1
Downward progression
Some different, not monotonic, max row Δ downward >1
Upward progression
Some different, not monotonic, max row Δ upward >1

Finger Combination Weight \(s_{finger}\)
Double inner roll
Repeat one
Single inner roll
Single outer roll
Double outer roll
Same finger
Alt hands
Bounce
Same key advantage