kirkleon
/
pokemon-color-search


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Pokemon By Color</title>
    <link rel="stylesheet" href="styles.css" />
    <script src="https://unpkg.com/d3-color@3.0.1/dist/d3-color.min.js"></script>
    <script src="https://unpkg.com/d3-cam02@0.1.5/build/d3-cam02.min.js"></script>
    <script src="https://unpkg.com/fuse.js@6.5.3/dist/fuse.min.js"></script>
    <script src="database-v3.js"></script>
    <script src="math.js"></script>
    <script src="form.js"></script>
  </head>
  <body>
    <noscript>Requires javascript</noscript>

    <template id="metric-form-template">
      <div>
        <label>
          <input type="checkbox" name="sortOrder" role="button" hidden />
          <output name="sortOrderLabel"></output>
          (click to toggle)
        </label>
      </div>

      <fieldset>
        <legend>Evaluation Function</legend>
        <div>
          <label>
            <input type="radio" name="metricKind" value="whole" />
            Set Comparison
          </label>
        </div>
        <div>
          <label>
            <input type="radio" name="metricKind" value="mean" />
            Mean Comparison
          </label>
        </div>
        <div>
          <label>
            <input type="radio" name="metricKind" value="statistic" />
            Set Statistics
          </label>
        </div>
        <select name="whole" disabled>
          <option value="sigma">RMS Deviation (σ)</option>
          <option value="bigTheta">Cosine Difference (Θ)</option>
          <option value="alpha">Geometric Difference (α)</option>
        </select>
        <select name="mean" disabled>
          <option value="theta">Angular Difference (θ)</option>
          <option value="phi">Hue Azimuth (ϕ)</option>
          <option value="delta">Euclidean (δ)</option>
          <option value="manhattan">Manhattan (M)</option>
          <option value="ch">Chebyshev (Ч)</option>
          <option value="lightnessDiff">Lightness (ℓ)</option>
        </select>
        <select name="statistic" disabled>
          <option value="inertia">Inertia (I)</option>
          <option value="variance">Variance (V)</option>
          <option value="muNuAngle">Mu-Nu Angle (Φ)</option>
          <option value="size">Size (N)</option>
          <option value="lightness">Mean Lightness (L)</option>
          <option value="chroma">Mean Chroma (C)</option>
          <option value="importance">Visual Importance (β)</option>
        </select>
        <output name="sortMetric" hidden aria-hidden="true"></output>
      </fieldset>

      <fieldset>
        <legend>Cardinality Terms</legend>
        <div>
          <label>
            <input type="checkbox" name="clusterSize" />
            Cluster Size
          </label>
        </div>
        <div>
          <label>
            <input type="checkbox" name="invClusterSize" />
            Inverse Cluster Size
          </label>
        </div>
        <div>
          <label>
            <input type="checkbox" name="totalSize" />
            Image Size
          </label>
        </div>
        <div>
          <label>
            <input type="checkbox" name="invTotalSize" />
            Inverse Image Size
          </label>
        </div>
      </fieldset>
    </template>

    <template id="scale-form-template">
      <div>
        <label>
          <input type="radio" name="rescaleFactor" value="none" />
          None
        </label>
      </div>
      <div>
        <label>
          <input type="radio" name="rescaleFactor" value="direct" />
          Cluster Size
        </label>
      </div>
      <div>
        <label>
          <input type="radio" name="rescaleFactor" value="inverse" />
          Inverse Cluster Size
        </label>
      </div>
      <div>
        <label>
          <input type="radio" name="rescaleFactor" value="size" />
          Image Size
        </label>
      </div>
      <div>
        <label>
          <input type="radio" name="rescaleFactor" value="inverseSize" />
          Inverse Image Size
        </label>
      </div>
    </template>

    <template id="pkmn-template">
      <div class="pkmn">
        <img />
        <div class="pkmn-name"></div>
        <div class="pkmn-total"></div>
        <div class="pkmn-score"></div>
        <div class="pkmn-cls pkmn-cls1"><span></span><span></span></div>
        <div class="pkmn-cls pkmn-cls2"><span></span><span></span></div>
        <div class="pkmn-cls pkmn-cls3"><span></span><span></span></div>
        <div class="pkmn-cls pkmn-cls4"><span></span><span></span></div>
      </div>
    </template>

    <form action="javascript:void(0);" id="sortFunction" autocomplete="off">
      <div class="fn-group fn-group-outer">
        <label class="fn-minmax">
          <input type="checkbox" name="sortOrder" role="button" hidden />
          <div class="fn-minmax-toggle">
            <span>min</span>
            <span>max</span>
          </div>
        </label>
        <span class="fn-bracket">[</span>
        <div
          class="fn-group"
          onchange="event.target.parentNode.classList.toggle('fn-part--disabled')"
        >
          <label class="fn-part">
            <input type="checkbox" name="useBestCluster" checked />
            <output name="metricSymbolP">α</output>(P)
          </label>
          ⋅
          <label class="fn-part">
            <input type="checkbox" name="useWholeImage" checked />
            <output name="metricSymbolB">α</output>(B)
          </label>
          ⋅
          <label class="fn-part fn-part--disabled">
            <input type="checkbox" name="clusterSize" />
            |B|
          </label>
          ⋅
          <label class="fn-part">
            <input type="checkbox" name="invClusterSize" checked />
            |B|<sup>-1</sup>
          </label>
          ⋅
          <label class="fn-part">
            <input type="checkbox" name="totalSize" checked />
            |P|
          </label>
          ⋅
          <label class="fn-part fn-part--disabled">
            <input type="checkbox" name="invTotalSize" />
            |P|<sup>-1</sup>
          </label>
        </div>
        <span class="fn-bracket">]</span>
      </div>
    </form>

    <form action="javascript:void(0);" id="clusterFunction" autocomplete="off">
      <div class="fn-group">
        <span>where B =&nbsp;</span>
        <label class="fn-minmax fn-minmax--wide">
          <input type="checkbox" name="sortOrder" role="button" checked hidden />
          <div class="fn-minmax-toggle">
            <span>argmin</span>
            <span>argmax</span>
          </div>
        </label>
        <span class="fn-bracket">[</span>
        <div
          class="fn-group"
          onchange="event.target.parentNode.classList.toggle('fn-part--disabled')"
        >
          <span class="fn-part fn-part--fixed">
            <output name="metricSymbol">β</output>(K)
          </span>
          ⋅
          <label class="fn-part fn-part--disabled">
            <input type="checkbox" name="clusterSize" />
            |K|
          </label>
          ⋅
          <label class="fn-part fn-part--disabled">
            <input type="checkbox" name="invClusterSize" />
            |K|<sup>-1</sup>
          </label>
          ⋅
          <label class="fn-part fn-part--disabled">
            <input type="checkbox" name="totalSize" />
            |P|
          </label>
          ⋅
          <label class="fn-part fn-part--disabled">
            <input type="checkbox" name="invTotalSize" />
            |P|<sup>-1</sup>
          </label>
        </div>
        <span class="fn-bracket">]</span>
      </div>
    </form>

    <form action="javascript:void(0);" id="colorSelect" autocomplete="off">
      <label for="color-input-text">Target Color</label>
      <input
        id="color-input-text"
        name="colorText"
        type="text"
        maxlength="7"
        oninput="onColorChange(event.target.value)"
      />
      <button type="button" onclick="onColorChange(randomColor())">Random Color</button>
      <input
        name="colorPicker"
        type="color"
        onchange="onColorChange(event.target.value)"
      />
    </form>

    <form action="javascript:void(0);" id="sortControl" autocomplete="off">
      <div>
        <label>
          <div>Results:&nbsp;<output name="resultsToDisplayOutput">10</output></div>
          <input
            name="resultsToDisplay"
            type="range"
            min="1"
            max="100"
            value="10"
            oninput="
              event.target.form.elements.resultsToDisplayOutput.value = event.target.value
            "
            onchange="showResults()"
          />
        </label>
      </div>
      <div>
        <label>
          <input
            type="radio"
            onchange="updateSort()"
            name="colorSpace"
            value="jab"
            checked
          />
          CIECAM
        </label>
      </div>
      <div>
        <label>
          <input type="radio" onchange="updateSort()" name="colorSpace" value="rgb" />
          sRGB
        </label>
      </div>
      <div>Best Match</div>
      <fieldset name="metric" onchange="onMetricChange(event.target.form.elements)">
        <!-- template mount point -->
        <legend>Sort By</legend>
        <div>
          <label>
            <input type="checkbox" name="useBestCluster" />
            Best Cluster
          </label>
        </div>
        <div>
          <label>
            <input type="checkbox" name="useWholeImage" />
            Whole Image
          </label>
        </div>
      </fieldset>
      <fieldset
        onchange="
          const elements = event.target.form.elements;
          document.forms.sortControl.elements.rescaleSection.hidden = elements.useClusters.value === 'off';
          document.forms.clusterControl.hidden = elements.useClusters.value === 'off';
          onMetricChange(elements);
        "
      >
        <legend>Comparison Value</legend>
        <div>
          <label>
            <input type="radio" name="useClusters" value="off" />
            Distance of Whole Image
          </label>
        </div>
        <div>
          <label>
            <input type="radio" name="useClusters" value="on" />
            Distance of Best Cluster
          </label>
        </div>
        <div>
          <label>
            <input type="radio" name="useClusters" value="mult" checked />
            Product of Distance Values
          </label>
        </div>
      </fieldset>
      <fieldset name="rescaleSection" onchange="updateSort()">
        <legend>Scaled By</legend>
        <!-- template mount point -->
      </fieldset>
    </form>

    <form action="javascript:void(0);" id="clusterControl" autocomplete="off">
      <div>Best Cluster</div>
      <fieldset name="metric" onchange="onMetricChange(event.target.form.elements)">
        <legend>Distance Metric</legend>
        <!-- template mount point -->
      </fieldset>
      <fieldset name="rescaleSection" onchange="updateSort()">
        <legend>Scaled By</legend>
        <!-- template mount point -->
      </fieldset>
    </form>

    <div id="color-results"></div>

    <input
      type="text"
      autocomplete="off"
      id="name-search"
      oninput="searchByName(event.target.value)"
    />
    <button type="button" onclick="randomPokemon()">Random Pokemon</button>

    <div id="name-results"></div>

    <div>
      <div>Previous Colors</div>
      <div id="prev-colors"></div>
    </div>
  </body>
</html>