3.0final, small tweak to quality slider.

easytarget · Mar 6, 2021 · 13f193d · 13f193d
1 parent b549c5b
commit 13f193d
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/css.h b/css.h
@@ -87,6 +87,10 @@ section#buttons {
   display: flex
 }
 
+#quality {
+    transform: rotateY(180deg);
+}
+
 .input-group {
   display: flex;
   flex-wrap: nowrap;

diff --git a/index_ov2640.h b/index_ov2640.h
@@ -65,9 +65,11 @@ const uint8_t index_ov2640_html[] = R"=====(<!doctype html>
               </div>
               <div class="input-group" id="quality-group">
                 <label for="quality">Quality</label>
-                <div class="range-min">10</div>
-                <input type="range" id="quality" min="10" max="63" value="10" class="default-action">
-                <div class="range-max">63</div>
+                <div class="range-min">63</div>
+                <!-- Note; the following element is 'flipped' in CSS so that it slides from High to Low
+                     As a result the 'min' and 'max' values are reversed here too -->
+                <input type="range" id="quality" min="10" max="63" value="10" class="default-action" title="Lower is Better">
+                <div class="range-max">10</div>
               </div>
               <div class="input-group" id="brightness-group">
                 <label for="brightness">Brightness</label>

diff --git a/index_ov3660.h b/index_ov3660.h
@@ -66,9 +66,11 @@ const uint8_t index_ov3660_html[] = R"=====(<!doctype html>
               </div>
               <div class="input-group" id="quality-group">
                 <label for="quality">Quality</label>
-                <div class="range-min">4</div>
+                <div class="range-min">63</div>
+                <!-- Note; the following element is 'flipped' in CSS so that it slides from High to Low
+                     As a result the 'min' and 'max' values are reversed here too -->
                 <input type="range" id="quality" min="4" max="63" value="10" class="default-action">
-                <div class="range-max">63</div>
+                <div class="range-max">4</div>
               </div>
               <div class="input-group" id="brightness-group">
                 <label for="brightness">Brightness</label>