kirkleon
/
pokemon-color-search


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Pokemon By Color</title>
  <link rel="stylesheet" href="nearest.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="https://unpkg.com/texzilla@1.0.2/TeXZilla.js"></script>
  <script src="math.js"></script>
  <script src="database-v2.js"></script>
  <script src="metrics.js"></script>
  <script src="convert.js"></script>
  <script src="score.js"></script>
  <script src="render.js"></script>
  <script src="listeners.js"></script>
  <script lang="javascript">
    const state = {
      target: null,
      number: 10,
      useCluster: false,
      clusterSettings: {
        sortMetric: "size",
        scaleOption: "none",
        sortOrder: "max",
      },
      space: "jab",
      sortMetric: "inertia",
      scaleOption: "inverse",
      sortOrder: "min",
    };
    window.onload = () => {
      document.getElementById("mu-def").innerHTML = TeXZilla.toMathMLString(String.raw`
          \vec{\mu}\left(P\right) = \frac{1}{\left|P\right|}\sum_{p\in P}{\vec{p}}
      `);
      document.getElementById("nu-def").innerHTML = TeXZilla.toMathMLString(String.raw`
          \vec{\nu}\left(P\right) = \frac{1}{\left|P\right|}\sum_{p\in P}{\hat{p}}
      `);
      onColorChanged(state, "#222222");
    }
  </script>
</head>

<body>
  <noscript>Requires javascript</noscript>
  <div style="display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: stretch;">
    <div style="display: inline-block;" class="toggle-box">
      <input autocomplete="off" type="checkbox" checked id="all-control-toggle" class="toggle-button" role="button">
      <label for="all-control-toggle" style="min-width: 1.1em; display: inline-block;">
        <div class="toggle-off" style="writing-mode: vertical-rl">► Controls</div>
        <div class="toggle-on">▼ Controls</div>
      </label>
      <div class="toggle-on">
        <!-- TODO control for results returned -->
        <div class="control-grid">
          <img style="grid-area: bulb; justify-self: center;"
            src="https://img.pokemondb.net/sprites/sword-shield/icon/bulbasaur.png" />
          <div style="grid-area: qvec" id="qvec"></div>
          <div class="toggle-box" style="grid-area: cspc;">
            <input autocomplete="off" type="checkbox" class="toggle-button" id="space-toggle" role="button"
              onchange="state.space = event.target.checked ? 'rgb' : 'jab'; onControlsChanged(state); rerenderSearch(state)">
            <label for="space-toggle"
              style="display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: flex-start; padding-bottom: 0.5em;">
              Color space:&nbsp;
              <span class="toggle-off">CIECAM02-UCS (Jab)</span>
              <span class="toggle-on">sRGB</span>
            </label>
          </div>
          <div class="toggle-box" style="grid-area: sort">
            <input autocomplete="off" type="checkbox" class="toggle-button" id="sort-order" role="button"
              onchange="state.sortOrder = event.target.checked ? 'max' : 'min'; onControlsChanged(state)">
            <label for="sort-order">
              <span class="toggle-off">Minimize</span>
              <span class="toggle-on">Maximize</span>
            </label>
          </div>
          <select style="grid-area: metr" autocomplete="off" id="sort-metric"
            onchange="state.sortMetric = event.target.value; onControlsChanged(state)">
            <option value="sigma">RMS Deviation (σ)</option>
            <option value="bigTheta">Mean of Angular Difference (Θ)</option>
            <option value="theta">Angular Difference of Mean (θ)</option>
            <option value="phi">Hue Difference of Mean (ϕ)</option>
            <option value="delta">Euclidean Distance to Mean (δ)</option>
            <option value="ch">Chebyshev Distance to Mean (Ч)</option>
            <option value="inertia" selected>Inertia (I)</option>
            <option value="size">Size (N)</option>
          </select>
          <div style="grid-area: disp; padding-bottom: 0.5em; justify-self: center;" id="metric-display"></div>
          <div
            style="grid-area: munu; padding-top: 0.5em; justify-self: center; display: flex; flex-flow: row nowrap; justify-content: space-between; width: 90%;">
            <div id="mu-def"></div>
            <div id="nu-def"></div>
          </div>
        </div>
        <div class="toggle-box cluster-grid">
          <input autocomplete="off" type="checkbox" class="toggle-button" id="cluster-toggle" role="button"
            onchange="state.useCluster = event.target.checked; onControlsChanged(state)">
          <label for="cluster-toggle"
            style="grid-area: albl; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; padding-bottom: 0.5em;">
            Across&nbsp;
            <span class="toggle-off">whole image</span>
            <span class="toggle-on">best cluster by...</span>
          </label>
          <div style="grid-area: sort; justify-self: end;" class="toggle-on toggle-box">
            <input autocomplete="off" checked type="checkbox" class="toggle-button" id="cluster-sort-order"
              role="button"
              onchange="state.clusterSettings.sortOrder = event.target.checked ? 'max' : 'min'; onControlsChanged(state)">
            <label for="cluster-sort-order">
              <span class="toggle-off">Minimizing</span>
              <span class="toggle-on">Maximizing</span>
            </label>
          </div>
          <select style="grid-area: metr" autocomplete="off" id="cluster-sort-metric" class="toggle-on"
            onchange="state.clusterSettings.sortMetric = event.target.value; onControlsChanged(state)">
            <option value="sigma">RMS Deviation (σ)</option>
            <option value="bigTheta">Mean of Angular Difference (Θ)</option>
            <option value="theta">Angular Difference of Mean (θ)</option>
            <option value="phi">Hue Difference of Mean (ϕ)</option>
            <option value="delta">Euclidean Distance to Mean (δ)</option>
            <option value="ch">Chebyshev Distance to Mean (Ч)</option>
            <option value="inertia">Inertia (I)</option>
            <option value="size" selected>Size (N)</option>
          </select>
          <span style="grid-area: blbl; justify-self: end;" class="toggle-on">Rescaled by</span>
          <select style="grid-area: clus" autocomplete="off" id="cluster-scale-option" class="toggle-on"
            onchange="state.clusterSettings.scaleOption = event.target.value; onControlsChanged(state)">
            <option value="none" selected>None</option>
            <option value="direct">Cluster size</option>
            <option value="inverse">Inverse cluster size</option>
          </select>
          <span style="grid-area: slbl" class="toggle-on">And scale result by</span>
          <select style="grid-area: scal" autocomplete="off" id="scale-option" class="toggle-on"
            onchange="state.scaleOption = event.target.value; onControlsChanged(state)">
            <option value="none">None</option>
            <option value="direct">Cluster size</option>
            <option value="inverse" selected>Inverse cluster size</option>
          </select>
          <div
            style="grid-area: disp; padding-top: 0.5em; padding-bottom: 0.5em; padding-top: 0.5em; padding-bottom: 0.5em; justify-self: center;"
            id="cluster-metric-display" class="toggle-on"></div>
        </div>
        <div
          style="width: 100%; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center;">
          <span style="align-self: flex-start;">Final metric:</span>
          <div id="final-metric-display" style="padding-top: 0.5em; padding-bottom: 0.5em;"></div>
        </div>
      </div>
    </div>
    <div class="divider"></div>
    <div class="list-container">
      <div class="search-container">
        <button type="button" onclick="onRandomColor(state)">Random Color</button>
        <input autocomplete="off" maxlength="7" id="color-input" value="#222222"
          oninput="onColorChanged(state, event.target.value)" />
      </div>
      <ul id="result-list" class="pkmn-list"></ul>
    </div>
    <div class="divider"></div>
    <div class="list-container">
      <div class="search-container">
        <button type="button" onclick="onRandomName(state)">Random Pokemon</button>
        <input autocomplete="off" size="15" oninput="onSearch(state, event.target.value)">
      </div>
      <ul id="search-list" class="pkmn-list"></ul>
    </div>
  </div>
</body>

</html>