kirkleon
/
pokemon-color-search


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
							<!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="listeners.js"></script>
  <script lang="javascript">
    const state = {
      target: null,
      number: 10,
      useCluster: false,
      clusterSettings: {
        sortMetric: "size",
        scaleOption: "none",
        sortOrder: "min",
      },
      space: "jab",
      sortMetric: "sigma",
      scaleOption: "none",
      sortOrder: "min",
    };
    window.onload = () => {
      // TODO initialize state based on form controls
    }
  </script>
</head>

<body>
  <noscript>Requires javascript</noscript>
  <button style="grid-area: rand;" type="button" onclick="onRandomColor(state); onControlsChanged(state)">Random Color</button>
  <input maxlength="7" id="color-input" oninput="onColorChanged(state, event.target.value); onControlsChanged(state)" />
  <select id="cluster" onchange="state.useCluster = !!(event.target.value); onControlsChanged(state)">
    <option value="" selected>Whole</option>
    <option value="true">Cluster</option>
  </select>
  <select id="color-space" onchange="state.space = event.target.value; onControlsChanged(state)">
    <option value="jab" selected>CIECAM02-UCS (Jab)</option>
    <option value="rgb">sRGB</option>
  </select>
  <select id="sort-metric" onchange="state.sortMetric = event.target.value; onControlsChanged(state)">
    <option value="sigma" selected>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">Size (N)</option>
  </select>
  <select id="scale-option" onchange="state.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>
  <select id="sort-order" onchange="state.sortOrder = event.target.value; onControlsChanged(state)">
    <option value="min" selected>Min</option>
    <option value="max">Max</option>
  </select>
  <br/>
  <select id="cluster-sort-metric" 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>
  <select id="cluster-scale-option" 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>
  <select id="cluster-sort-order" onchange="state.clusterSettings.sortOrder = event.target.value; onControlsChanged(state)">
    <option value="min" selected>Min</option>
    <option value="max">Max</option>
  </select>
  <br/>
  <div id="cluster-metric-display"></div>
  <br/>
  <div id="metric-display"></div>

  <!-- <div class="container start-justified">
    <form id="controls" onsubmit="event.preventDefault()">
      <img style="grid-area: bulb; justify-self: center;" src="https://img.pokemondb.net/sprites/sword-shield/icon/bulbasaur.png" />
      <input style="grid-area: inpt;" maxlength="7" id="color-input" oninput="onColorChanged()" />

      <label for="num-poke" style="grid-area: liml" class="center-text">
        Search limit: <span id="num-poke-display">10</span>
      </label>
      <input
        id="num-poke" style="grid-area: limt;"
        type="range" min="1" max="100" value="10"
        oninput="onLimitChanged(true)" onchange="onLimitChanged()"
      >
      <div style="grid-area: qvec; justify-self: start;">
        <div id="q-vec-jab"></div>
        <div id="q-vec-rgb"></div>
      </div>
      <span id="obj-fn" style="grid-area: objf;"></span>
      <div class="panel" style="grid-area: metr; padding-top: 4px;">
        <label for="metric" style="text-align: center;">
          Scoring Metric:
        </label>
      </div>
      <div class="panel" style="grid-area: clst;">
        <label for="image-mean" class="center-text">
          Cluster:
        </label>
        <select type="checkbox" onchange="onClusterChoiceChanged()" id="image-summary">
          <option selected>All Pixels</option>
          <option>Biggest (M)</option>
          <option>Smallest (m)</option>
          <option>Best (α)</option>
          <option>Worst (ω)</option>
        </select>
      </div>
      <div id="cluster-mean-warning" class="center-text hide" style="grid-area: warn;">
        Warning: Inertia term ignores clusters - consider another metric
      </div>
      <div style="grid-area: scal; align-self: end; padding-bottom: 2px;" class="hide">
        <label for="scale-by-cluster-size">
          Scale measure by cluster size:
        </label>
        <input type="checkbox" checked oninput="onScaleByClusterChanged()" id="scale-by-cluster-size">
      </div>
      <input type="checkbox" id="reveal-definitions" role="button">
      <label
        id="reveal-def-label" for="reveal-definitions"
        style="grid-area: togg;"
      >
        <div id="reveal-def-show">Show Definitions ►</div>
        <div id="reveal-def-hide">Hide Definitions ▼</div>
      </label>
      <div style="grid-area: defs; align-self: start; padding-left: 1em;">
        <div class="definitions" id="main-definition"></div>
      </div>
      <div style="grid-area: clsd; align-self: start;">
        <div class="definitions" id="cluster-definition"></div>
      </div>

      <div class="hideable_control hideable_control--hidden" style="grid-area: iner;">
        <input type="checkbox" checked oninput="onCustomControlsChanged()" id="include-x">
        <label for="include-x">Include Inertia</label>
      </div>

      <div class="hideable_control hideable_control--hidden" style="grid-area: norm;">
        <input type="checkbox" oninput="onCustomControlsChanged()" id="norm-q-y">
        <label for="norm-q-y">Normalize q and μ</label>
      </div>

      <div
        class="hideable_control hideable_control--hidden"
        style="grid-area: coef; flex-direction: column;"
      >
        <label for="close-coeff" class="center-text">
          Alignment: <span id="close-coeff-display">2</span>
        </label>
        <input
          type="range" min="0" max="10" value="2" step="0.1"
          oninput="onCustomControlsChanged(true)"
          onchange="onCustomControlsChanged()"
          id="close-coeff"
        >
      </div>

      <div style="grid-area: btns; display: inline-flex; flex-flow: row nowrap; justify-content: space-between;">
        <button class="padded" type="button" onclick="onRandomPokemon()">
          Random
        </button>
        <button id="search-space-button" type="button" onclick="onSearchSpaceChanged()">
          <span id="search-space-display">RGB</span>
        </button>
      </div>

      <input type="checkbox" checked class="show-list" role="button" id="search-list-toggle">
      <label style="grid-area: srch;" for="search-list-toggle" class="title">
        <div class="show-list-lbl-show">Search By Pokemon ►</div>
        <div class="show-list-lbl-hide">Search By Pokemon ▼</div>
      </label>
      <input style="grid-area: name;" id="pokemon-name" size="15" oninput="onSearchChanged()">
      <ul id="search-list" style="grid-area: rslt;" class="pkmn-list"></ul>
    </form>

    <div class="panel rpanel">
      <div>
        <input type="checkbox" checked class="show-list" role="button" id="jab-list-toggle">
        <label for="jab-list-toggle" class="title">
          <div class="show-list-lbl-show">CIECAM02 Uniform Color Space (Jab) ►</div>
          <div class="show-list-lbl-hide">CIECAM02 Uniform Color Space (Jab) ▼</div>
        </label>
        <ul id="best-list-jab" class="pkmn-list"></ul>
      </div>
      <div>
        <input type="checkbox" class="show-list" role="button" id="rgb-list-toggle">
        <label for="rgb-list-toggle" class="title">
          <div class="show-list-lbl-show">sRGB Color Space ►</div>
          <div class="show-list-lbl-hide">sRGB Color Space ▼</div>
        </label>
        <ul id="best-list-rgb" class="pkmn-list"></ul>
      </div>
    </div>
  </div> -->
</body>

</html>