|
|
@@ -14,9 +14,10 @@
|
|
|
<noscript>Requires javascript</noscript>
|
|
|
|
|
|
<template id="metric-select-template">
|
|
|
- <form bind-to="form">
|
|
|
+ <form action="javascript:void(0)" autocomplete="off">
|
|
|
+ <output hidden name="metric"></output>
|
|
|
<fieldset class="metric-fields | flex col small-gap">
|
|
|
- <legend bind-to="legend">Metric</legend>
|
|
|
+ <legend>Metric</legend>
|
|
|
<label>
|
|
|
<input type="radio" name="metricKind" value="whole" />
|
|
|
<div class="toggle-label | center pill-shape highlight-border">
|
|
|
@@ -35,22 +36,12 @@
|
|
|
Set Statistics
|
|
|
</div>
|
|
|
</label>
|
|
|
- <select
|
|
|
- class="pill-shape highlight-border"
|
|
|
- name="whole"
|
|
|
- bind-to="wholeSelect"
|
|
|
- disabled
|
|
|
- >
|
|
|
+ <select class="pill-shape highlight-border" name="whole" disabled>
|
|
|
<option value="alpha">Geometric Difference (α)</option>
|
|
|
<option value="sigma">RMS Deviation (σ)</option>
|
|
|
<option value="bigTheta">Cosine Difference (Θ)</option>
|
|
|
</select>
|
|
|
- <select
|
|
|
- class="pill-shape highlight-border"
|
|
|
- name="mean"
|
|
|
- bind-to="meanSelect"
|
|
|
- disabled
|
|
|
- >
|
|
|
+ <select class="pill-shape highlight-border" name="mean" disabled>
|
|
|
<option value="theta">Angular Difference (θ)</option>
|
|
|
<option value="phi">Hue Azimuth (ϕ)</option>
|
|
|
<option value="delta">Euclidean (δ)</option>
|
|
|
@@ -58,12 +49,7 @@
|
|
|
<option value="ch">Chebyshev (Ч)</option>
|
|
|
<option value="lightnessDiff">Lightness (ℓ)</option>
|
|
|
</select>
|
|
|
- <select
|
|
|
- class="pill-shape highlight-border"
|
|
|
- name="stat"
|
|
|
- bind-to="statSelect"
|
|
|
- disabled
|
|
|
- >
|
|
|
+ <select class="pill-shape highlight-border" name="stat" disabled>
|
|
|
<option value="importance">Visual Importance (β)</option>
|
|
|
<option value="inertia">Inertia (I)</option>
|
|
|
<option value="variance">Variance (V)</option>
|
|
|
@@ -171,7 +157,7 @@
|
|
|
<div class="center">
|
|
|
<label>
|
|
|
<div class="emphasis">
|
|
|
- Results: <output name="resultsToDisplayOutput">6</output>
|
|
|
+ Results: <output form="colorDisplayForm" name="output">6</output>
|
|
|
</div>
|
|
|
<input
|
|
|
form="colorDisplayForm"
|
|
|
@@ -223,7 +209,7 @@
|
|
|
</label>
|
|
|
</div>
|
|
|
<div class="fn-body | flex">
|
|
|
- <label bind-to="useWholeImageLabel">
|
|
|
+ <label>
|
|
|
<input
|
|
|
form="colorCalculateForm"
|
|
|
type="checkbox"
|
|
|
@@ -231,7 +217,7 @@
|
|
|
checked
|
|
|
/>
|
|
|
<span class="toggle-label | pill-shape highlight-border">
|
|
|
- <output form="colorCalculateForm" name="metricLabel"></output>(P)
|
|
|
+ <output form="colorCalculateForm" name="sortMetricSymbolP"></output>(P)
|
|
|
</span>
|
|
|
</label>
|
|
|
⋅
|
|
|
@@ -243,7 +229,7 @@
|
|
|
checked
|
|
|
/>
|
|
|
<span class="toggle-label | pill-shape highlight-border">
|
|
|
- <output form="colorCalculateForm" name="sortMetricSymbol"></output>(B)
|
|
|
+ <output form="colorCalculateForm" name="sortMetricSymbolB"></output>(B)
|
|
|
</span>
|
|
|
</label>
|
|
|
⋅
|
|
|
@@ -315,7 +301,6 @@
|
|
|
</label>
|
|
|
</div>
|
|
|
<div class="fn-body | flex">
|
|
|
- <input form="colorCalculateForm" type="checkbox" name="clusterUseBestCluster" />
|
|
|
<span class="toggle-label | pill-shape highlight-border">
|
|
|
<output form="colorCalculateForm" name="clusterMetricSymbol"></output>(K)
|
|
|
</span>
|
|
|
@@ -360,7 +345,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<hr />
|
|
|
- <div id="nameSearch" class="flex col small-gap">
|
|
|
+ <div class="flex col small-gap">
|
|
|
<div class="emphasis center">Name Search</div>
|
|
|
<input
|
|
|
form="nameSearchForm"
|
|
|
@@ -369,8 +354,8 @@
|
|
|
autocomplete="off"
|
|
|
name="input"
|
|
|
/>
|
|
|
- <button form="nameSearch" type="button" name="random">Random Pokemon</button>
|
|
|
- <button form="nameSearch" type="button" name="clear">Clear</button>
|
|
|
+ <button form="nameSearchForm" type="button" name="random">Random Pokemon</button>
|
|
|
+ <button form="nameSearchForm" type="button" name="clear">Clear</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
