[numerics] enable inversion of images

en/numerics/FJMT.2024/index.md

@@ -16,6 +16,8 @@ math: true
 .manual_center_1500 { margin-left: -367px; margin-top: 1em; width: 1500px; height: 750px; }
 h3 { margin-top: 1em; margin-bottom: 0.5em; font-size: 110%; }
 p { margin-top: 1em; }
+.form { display: flex; align-items: center; margin-bottom: 0.5em; }
+.form input { margin-right: 1em; margin-left: 1em; }
 </style>
 
 <h2>$β$ distribution with $σ² = {{sigma}}$</h2>
@@ -56,6 +58,8 @@ Convergence rates are computed over the time span marked in blue in the first pl
 <div class="form">
   <label>Brightness: </label><input id="slider_LFR301_var={{ sigma }}" type="range" min="1"
     max="10" value="1" step="1" /><span id="brightness_LFR301_var={{ sigma }}">1</span>
+  <input id="check_LFR301_var={{ sigma }}" type="checkbox">
+<label>Invert </label>
 </div>
 <img src="{{ prefix }}/σ²={{ sigma }}/g_init_montage.png" id="g_init_LFR301_var={{ sigma }}"/>{:.manual_center_1500}
 
@@ -68,16 +72,18 @@ Convergence rates are computed over the time span marked in blue in the first pl
     {% endfor %}
   ];
   tags.forEach((tag) => {
-    console.log(tag);
-    console.log("slider_" + tag);
     const slider = document.getElementById("slider_" + tag);
-    console.log(slider);
+    const check = document.getElementById("check_" + tag);
     const img = document.getElementById("g_init_" + tag);
     const disp = document.getElementById("brightness_" + tag);
-    slider.addEventListener("input", (event) => {
+    update = () => {
-      new_value = event.target.value;
+      disp.textContent = slider.value;
-      disp.textContent = new_value;
+      const i_val = check.checked ? "100%" : "0%";
-      img.style.filter = `brightness(${new_value})`
+      const new_value = slider.value;
-    });
+      const new_filter_value =  `brightness(${new_value}) invert(${i_val})`
+      img.style.filter = new_filter_value;
+    }
+    slider.addEventListener("input", update);
+    check.addEventListener("change", update);
   })
 </script>