kirkleon
/
pokemon-color-search


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
							<!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="database.js"></script>
    <script src="nearest.js"></script>
    <script lang="javascript">window.onload = () => { onPageLoad(); }</script>
</head>

<body>
    <noscript>Requires javascript</noscript>
    <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()" />
            <button style="grid-area: rand;" type="button" onclick="onRandomColor()">
                Random Color
            </button>
            <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>
                <select type="checkbox" onchange="onMetricChanged()" id="metric">
                    <option selected>RMS Deviation (σ)</option>
                    <option>Mean Angle (θ)</option>
                    <option>Mean Distance (δ)</option>
                    <option>Hue Angle (ϕ)</option>
                    <option>Max Inertia (I)</option>
                    <option>Chebyshev</option>
                    <option>Custom Metric</option>
                </select>
            </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>