Add slider for outline darkness

daniel-munro · May 13, 2022 · 4c9a4cc · 4c9a4cc
1 parent 6dbdfac
commit 4c9a4cc
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -67,7 +67,7 @@
       <!-- </p> -->
       <br>
       <!-- <p> -->
-        Copyright 2021 Daniel Munro under the MIT free software license</a>.
+        Copyright 2022 Daniel Munro under the MIT free software license</a>.
         <a href="https://github.com/daniel-munro/pbnify" target="_blank">Source code.</a>
       <!-- </p> -->
     </div>

diff --git a/scripts/controllers/main.js b/scripts/controllers/main.js
@@ -116,16 +116,16 @@ angular.module('pbnApp')
   	  c3.height = c2.height;
 
   	  // draw outlines
-	  // gray value was 191, changed to 150.
+	  var gray = Math.round(255 * (1 - document.getElementById("darknessSlider").value / 100));
   	  var bw = [{ r: 255, g: 255, b: 255 },
-		    { r: 150, g: 150, b: 150 }];
+		    { r: gray, g: gray, b: gray }];
   	  var ctx3 = c3.getContext("2d");
   	  var imgData = matToImageData(matLine, bw, ctx3);
   	  ctx3.putImageData(imgData, 0, 0);
 
   	  // draw numbers
   	  ctx3.font = "12px Georgia";
-  	  ctx3.fillStyle = "rgb(150, 150, 150)";
+  	  ctx3.fillStyle = "rgb("+gray+", "+gray+", "+gray+")";
   	  for (var i = 0; i < labelLocs.length; i++) {
   	      ctx3.fillText(labelLocs[i].value + 1,
 			    labelLocs[i].x - 3,

diff --git a/styles/main.css b/styles/main.css
@@ -61,6 +61,16 @@ body {
     max-width: 400px;
 }
 
+#darknessSliderLabel {
+    width: 180px;  /* Use fixed width so slider doesn't jump back and forth. */
+}
+
+#darknessSlider {
+    vertical-align: middle;
+    width: 100%;
+    max-width: 400px;
+}
+
 #loader {
     height: 300px;
     /*border: 4px dashed gray;*/

diff --git a/views/main.html b/views/main.html
@@ -14,6 +14,14 @@
 	 oninput="document.getElementById('widthSliderNumber').innerHTML = this.value;">
 </div>
 
+<div class="col" ng-show="step == 'load'">
+  <label id="darknessSliderLabel" for="darknessSlider">Outline darkness:
+  <span id="darknessSliderNumber" style="color: rgb(153, 153, 153);">40</span></label>
+  <input type="range" min="1" max="100" step="1" value="40" id="darknessSlider"
+	 oninput="document.getElementById('darknessSliderNumber').innerHTML = this.value; var gray = Math.round(255 * (1 - this.value / 100)); document.getElementById('darknessSliderNumber').style.color = 'rgb('+gray+', '+gray+', '+gray+')';">
+</div>
+
+
 <div class="col" id="loader" ng-show="step == 'load'" ng-style="loaderStyle" image-loaded="imageLoaded(img)" load-file>
   <p>Drop image here to load,<br>or browse for image.</p>
   <button type="button" class="btn btn-secondary">