|
|
@@ -0,0 +1,127 @@
|
|
|
+<!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="database-v3.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" hidden />
|
|
|
+ <output name="sortOrderLabel"></output>
|
|
|
+ (click to toggle)
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ <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>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <form action="javascript:void(0);" id="sortControl" autocomplete="off">
|
|
|
+ <div>Target Color</div>
|
|
|
+ <div>
|
|
|
+ <input
|
|
|
+ name="colorText"
|
|
|
+ type="text"
|
|
|
+ maxlength="7"
|
|
|
+ oninput="syncColorInputs(event.target.value)"
|
|
|
+ />
|
|
|
+ <input
|
|
|
+ name="colorPicker"
|
|
|
+ type="color"
|
|
|
+ onchange="syncColorInputs(event.target.value)"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div>Color Space</div>
|
|
|
+ <div>
|
|
|
+ <label>
|
|
|
+ <input type="radio" name="color-space" value="jab" checked />
|
|
|
+ CIECAM
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label>
|
|
|
+ <input type="radio" name="color-space" value="rgb" />
|
|
|
+ sRGB
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ <fieldset name="metric" onchange="onMetricChange(event.target.form.elements)">
|
|
|
+ <legend>Distance Metric</legend>
|
|
|
+ <!-- template mount point -->
|
|
|
+ </fieldset>
|
|
|
+ </form>
|
|
|
+
|
|
|
+ <form action="javascript:void(0);" id="clusterControl" autocomplete="off">
|
|
|
+ <fieldset
|
|
|
+ onchange="
|
|
|
+ const elements = event.target.form.elements;
|
|
|
+ elements.metric.hidden = elements.useClusters.value === 'off';
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <legend>Compare With</legend>
|
|
|
+ <div>
|
|
|
+ <label>
|
|
|
+ <input type="radio" name="useClusters" value="off" />
|
|
|
+ Whole Image
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label>
|
|
|
+ <input type="radio" name="useClusters" value="on" checked />
|
|
|
+ Best Cluster
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ <fieldset name="metric" onchange="onMetricChange(event.target.form.elements)">
|
|
|
+ <legend>Cluster Ranking</legend>
|
|
|
+ <!-- template mount point -->
|
|
|
+ </fieldset>
|
|
|
+ </fieldset>
|
|
|
+ </form>
|
|
|
+ </body>
|
|
|
+</html>
|
