Screen Filters!

package.nw/gt_roster.html

@@ -519,6 +519,121 @@
         </table>
       </div>
       <br />
+      <div class="mapItem">
+        <table align="center">
+          <tr align="center">
+            <td align="center">Screen Filters</td>
+          </tr>
+
+          <tr align="center">
+            <td align="center">
+          
+        <div class="mapItem">
+          <table align="center">
+            <tr align="center">
+              <td align="center">Brightness</td>
+            </tr>
+            <tr align="center">
+              <td align="center" id="filterbrightnessTd"></td>
+            </tr>
+            <tr align="center">
+              <td colspan="2">
+                <input type="range" min="10" max="100" value="100" step="1" class="slider" id="filterbrightnessSlider" oninput="filtersChanged()" />
+              </td>
+            </tr>
+          </table>
+        </div>
+        <div class="mapItem">
+          <table align="center">
+            <tr align="center">
+              <td align="center">Contrast</td>
+            </tr>
+            <tr align="center">
+              <td align="center" id="filtercontrastTd"></td>
+            </tr>
+            <tr align="center">
+              <td colspan="2">
+                <input type="range" min="10" max="100" value="100" step="1" class="slider" id="filtercontrastSlider" oninput="filtersChanged()" />
+              </td>
+            </tr>
+          </table>
+        </div>
+        <div class="mapItem">
+          <table align="center">
+            <tr align="center">
+              <td align="center">Saturate</td>
+            </tr>
+            <tr align="center">
+              <td align="center" id="filtersaturateTd"></td>
+            </tr>
+            <tr align="center">
+              <td colspan="2">
+                <input type="range" min="0" max="200" value="100" step="1" class="slider" id="filtersaturateSlider" oninput="filtersChanged()" />
+              </td>
+            </tr>
+          </table>
+        </div>
+        <br/>
+        <div class="mapItem">
+          <table align="center">
+            <tr align="center">
+              <td align="center">Invert</td>
+            </tr>
+            <tr align="center">
+              <td align="center" id="filterinvertTd"></td>
+            </tr>
+            <tr align="center">
+              <td colspan="2">
+                <input type="range" min="0" max="100" value="0" step="1" class="slider" id="filterinvertSlider" oninput="filtersChanged()" />
+              </td>
+            </tr>
+          </table>
+        </div>
+        <div class="mapItem">
+          <table align="center">
+            <tr align="center">
+              <td align="center">Sepia</td>
+            </tr>
+            <tr align="center">
+              <td align="center" id="filtersepiaTd"></td>
+            </tr>
+            <tr align="center">
+              <td colspan="2">
+                <input type="range" min="0" max="100" value="0" step="1" class="slider" id="filtersepiaSlider" oninput="filtersChanged()" />
+              </td>
+            </tr>
+          </table>
+        </div>
+        <div class="mapItem">
+          <table align="center">
+            <tr align="center">
+              <td align="center">Hue Rotate</td>
+            </tr>
+            <tr align="center">
+              <td align="center" id="filterhuerotateTd"></td>
+            </tr>
+            <tr align="center">
+              <td colspan="2">
+                <input type="range" min="0" max="359" value="0" step="1" class="slider" id="filterhuerotateSlider" oninput="filtersChanged()" />
+              </td>
+            </tr>
+          </table>
+        </div>
+        </td>
+        </tr>
+        <tr>
+          <td>
+            <div class="mapItem">
+              <div class="button" style="margin: 10px" onclick="resetFilters()">Reset Filters (Ctrl-R)</div>
+              
+              
+            </div>
+          </td>
+        </tr>
+        </table>
+
+
+      </div>
       <div style="top: 1px; right: 1px; position: absolute">
         <button class="Xbutton" onclick="closeSettings()">X</button>
       </div>

package.nw/lib/roster.js

@@ -145,10 +145,10 @@ var g_defaultSettings = {
     brightness: 100,
     contrast: 100,
     saturate: 100,
-    hueRotate: 0,
     invert: 0,
+    grayscale: 0,
     sepia: 0,
-    grayscale: 0
+    huerotate: 0
   },
   reference: 0,
   controls: true,
@@ -168,10 +168,9 @@ g_def_displayFilters = {
   brightness: 100,
   contrast: 100,
   saturate: 100,
-  hueRotate: 0,
   invert: 0,
   sepia: 0,
-  grayscale: 0
+  huerotate: 0
 };
 
 const LOGBOOK_LIVE_BAND_LIVE_MODE = "0";
@@ -1062,7 +1061,7 @@ function setVisual()
 
   if (window.opener.g_callsignLookups.eqslUseEnable == true)
   {
-    useseQSLDiv.style.display = ""; 
+    useseQSLDiv.style.display = "";
   }
   else
   {
@@ -1195,9 +1194,58 @@ function valuesChanged()
   window.opener.goProcessRoster();
 }
 
+function loadFilterSettings()
+{
+  var filters = "";
+  for (const filter in g_rosterSettings.displayFilters)
+  {
+    var slider = document.getElementById("filter" + filter + "Slider");
+
+    if (slider)
+    {
+      slider.value = g_rosterSettings.displayFilters[filter];
+      var td = document.getElementById("filter" + filter + "Td");
+      if (filter != "huerotate")
+      {
+        td.innerHTML = slider.value + "%";
+        filters += filter + "(" + slider.value + "%) ";
+      }
+      else
+      {
+        td.innerHTML = slider.value + " deg";
+        filters += "hue-rotate(" + slider.value + "deg) ";
+      }
+    }
+  }
+  document.documentElement.style.filter = filters;
+}
+
 function filtersChanged()
 {
+  for (const filter in g_rosterSettings.displayFilters)
+  {
+    var slider = document.getElementById("filter" + filter + "Slider");
 
+    if (slider)
+    {
+      g_rosterSettings.displayFilters[filter] = slider.value;
+    }
+    else
+    {
+      // no longer a filter, get rid of it
+      delete g_rosterSettings.displayFilters[filter];
+    }
+  }
+  loadFilterSettings();
+}
+
+function resetFilters()
+{
+  for (const filter in g_rosterSettings.displayFilters)
+  {
+    g_rosterSettings.displayFilters[filter] = g_def_displayFilters[filter];
+  }
+  loadFilterSettings();
 }
 
 function getBuffer(file_url, callback, flag, mode, port, cookie)
@@ -1617,6 +1665,10 @@ function onMyKeyDown(event)
     {
       openSettings();
     }
+    else if (event.code == "KeyR" && event.ctrlKey == true)
+    {
+      resetFilters();
+    }
     else
     {
       window.opener.onMyKeyDown(event);
@@ -1665,6 +1717,7 @@ function init()
     );
   }
   loadSettings();
+  loadFilterSettings();
   updateInstances();
 
   // callback to addControls();