|
|
@@ -17,115 +17,110 @@
|
|
|
<body>
|
|
|
<noscript>Requires javascript</noscript>
|
|
|
<div class="container start-justified">
|
|
|
- <div id="left-panel" class="padded panel">
|
|
|
- <form class="panel config" onsubmit="event.preventDefault()">
|
|
|
- <div class="container control config">
|
|
|
- <div id="bulba-wrapper">
|
|
|
- <img src="https://img.pokemondb.net/sprites/sword-shield/icon/bulbasaur.png" />
|
|
|
- </div>
|
|
|
- <button class="padded" type="button" onclick="onRandomColor()">Random Color</button>
|
|
|
- <input size="7" maxlength="7" id="color-input" oninput="onColorChanged()" />
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="container dropdowns">
|
|
|
- <div class="panel dropdown">
|
|
|
- <label for="metric">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>Custom Metric</option>
|
|
|
- </select>
|
|
|
- </div>
|
|
|
- <div class="panel dropdown">
|
|
|
- <label for="image-mean">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 class="panel dropdown">
|
|
|
- <label for="num-poke">
|
|
|
- Search limit: <span id="num-poke-display">10</span>
|
|
|
- </label>
|
|
|
- <input type="range" min="1" max="100" value="10" oninput="onLimitChanged(true)" onchange="onLimitChanged()" id="num-poke">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div id="cluster-mean-warning" class="container center-justified hide">
|
|
|
- Warning: RMS and inertia have little meaning when clusters are used
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="container control 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>
|
|
|
-
|
|
|
- <div class="hideable_control hideable_control--hidden">
|
|
|
- <label for="include-x">Include inertia:</label>
|
|
|
- <input type="checkbox" checked oninput="onCustomControlsChanged()" id="include-x">
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="hideable_control hideable_control--hidden">
|
|
|
- <label for="norm-q-y">Normalize q and μ:</label>
|
|
|
- <input type="checkbox" oninput="onCustomControlsChanged()" id="norm-q-y">
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="hideable_control hideable_control--hidden">
|
|
|
- <label for="close-coeff">Closeness coefficient: <span id="close-coeff-display">2</span></label>
|
|
|
- <input type="range" min="0" max="10" value="2" step="0.1" oninput="onCustomControlsChanged()" id="close-coeff">
|
|
|
- </div>
|
|
|
- </form>
|
|
|
-
|
|
|
- <div class="panel math-section">
|
|
|
- <input type="checkbox" checked id="reveal-definitions" role="button">
|
|
|
-
|
|
|
- <label id="reveal-def-label" for="reveal-definitions" style="width: 300px">
|
|
|
- <div id="reveal-def-show">Show Definitions ►</div>
|
|
|
- <div id="reveal-def-hide">Hide Definitions ▼</div>
|
|
|
+ <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">
|
|
|
+ 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; align-self: end;">
|
|
|
+ <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;">
|
|
|
+ <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>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: RMS and inertia have little meaning when clusters are used
|
|
|
+ </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="definitions">Statistics</div>
|
|
|
- <div class="container definitions">
|
|
|
- <div id="main-definition"></div>
|
|
|
- <div id="angle-definition"></div>
|
|
|
- </div>
|
|
|
- <div id="rms-definition" class="container center-aligned center-justified definitions"></div>
|
|
|
- <hr class="definitions">
|
|
|
- <div class="definitions">Clusters</div>
|
|
|
- <div id="cluster-definition" class="definitions"></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="panel math-section">
|
|
|
- <div class="container center-aligned">
|
|
|
- <div id="q-vec-jab"></div>
|
|
|
- <div id="q-vec-rgb"></div>
|
|
|
- </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="container center-aligned start-justified">
|
|
|
- <span class="eqn-label">Optimizing:</span>
|
|
|
- <span id="obj-fn"></span>
|
|
|
- </div>
|
|
|
+ <div
|
|
|
+ class="hideable_control hideable_control--hidden"
|
|
|
+ style="grid-area: coef; flex-direction: column;"
|
|
|
+ >
|
|
|
+ <label for="close-coeff">
|
|
|
+ Closeness: <span id="close-coeff-display">2</span>
|
|
|
+ </label>
|
|
|
+ <input
|
|
|
+ type="range" min="0" max="10" value="2" step="0.1"
|
|
|
+ oninput="onCustomControlsChanged()" id="close-coeff"
|
|
|
+ >
|
|
|
</div>
|
|
|
|
|
|
- <div class="panel bypkmn">
|
|
|
- <form class="container control" onsubmit="event.preventDefault()">
|
|
|
- <label for="pokemon-name">Search By Pokemon</label>
|
|
|
- <button class="padded" type="button" onclick="onRandomPokemon()">Random</button>
|
|
|
- <input id="pokemon-name" size="15" oninput="onSearchChanged()">
|
|
|
- <button id="search-space-button" type="button" onclick="onSearchSpaceChanged()">
|
|
|
- <span id="search-space-display">RGB</span>
|
|
|
- </button>
|
|
|
- </form>
|
|
|
- <ul id="search-list" class="pkmn-list"></ul>
|
|
|
+ <label style="grid-area: srch;" for="pokemon-name">Search By Pokemon</label>
|
|
|
+ <input style="grid-area: name;" id="pokemon-name" size="15" oninput="onSearchChanged()">
|
|
|
+ <div style="grid-area: btns;">
|
|
|
+ <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>
|
|
|
- </div>
|
|
|
+ <ul id="search-list" style="grid-area: rslt;" class="pkmn-list"></ul>
|
|
|
+ </form>
|
|
|
+
|
|
|
<div class="padded panel">
|
|
|
<div class="title">CIECAM02 Uniform Color Space (Jab)</div>
|
|
|
<ul id="best-list-jab" class="pkmn-list"></ul>
|
