this works.. (#23)

Gaardsholt · Mar 12, 2021 · 4f2f012 · 4f2f012
1 parent cd8fb24
commit 4f2f012
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 6 deletions.
diff --git a/barcoder/Controllers/HexController.cs b/barcoder/Controllers/HexController.cs
@@ -10,15 +10,21 @@ public class HexController : ControllerBase
     {
 
         [HttpGet("")]
-        public IActionResult Get(string color, int width = 300, int height = 300)
+        public IActionResult Get(string color, string border, int width = 300, int height = 300)
         {
             try
             {
+                var backgroundColor = ColorTranslator.FromHtml($"#{color}");
+                var borderColor = ColorTranslator.FromHtml($"#{border}");
+
                 var image = new Bitmap(width, height);
                 var graph = Graphics.FromImage(image);
-                var translatedColor = ColorTranslator.FromHtml($"#{color}");
-
-                graph.Clear(translatedColor);
+
+                using (Graphics g = Graphics.FromImage(image))
+                {
+                    g.Clear(backgroundColor);
+                    g.DrawRectangle(new Pen(borderColor, 3), new Rectangle(1, 1, image.Width - 3, image.Height - 3));
+                }
 
                 return File((byte[])(new ImageConverter()).ConvertTo(image, typeof(byte[])), "image/png");
             }

diff --git a/barcoder/Views/Home/Index.cshtml b/barcoder/Views/Home/Index.cshtml
@@ -13,9 +13,13 @@
                 </select>
             </div>
             <div class="form-group">
-                <label for="barcodeText">Text</label>
+                <label for="barcodeText" id="barcodeText-label">Text</label>
                 <input type="text" class="form-control" id="barcodeText" placeholder="Text for the barcode">
             </div>
+            <div class="form-group" id="group-barcodeBorder" style="display:none;">
+                <label for="barcodeBorder">Border color</label>
+                <input type="color" class="form-control" id="barcodeBorder" placeholder="Border color">
+            </div>
             <div class="form-group">
                 <label for="barcodeWidth">Size</label>
                 <input type="number" class="form-control" id="barcodeWidth">

diff --git a/barcoder/wwwroot/js/index.js b/barcoder/wwwroot/js/index.js
@@ -28,24 +28,41 @@ document.querySelectorAll('#barcodeForm input').forEach(item => {
 
 
 function onInputChange(event) {
+    checkIfHex();
     updateBarcodeData();
     updateImage();
 }
 
+function checkIfHex() {
+    if (document.getElementById("barcodeType").selectedOptions[0].value == "99999") {
+        document.getElementById("group-barcodeBorder").style.display = "block";
+        document.getElementById("barcodeText-label").innerText = "Box color";
+        document.getElementById("barcodeText").type = "color";
+
+    } else {
+        document.getElementById("group-barcodeBorder").style.display = "none";
+        document.getElementById("barcodeText-label").innerText = "Text";
+        document.getElementById("barcodeText").type = "text";
+    }
+}
+
 function updateBarcodeData() {
     let barcodeType = parseInt(document.getElementById("barcodeType").selectedOptions[0].value);
     let barcodeText = document.getElementById("barcodeText").value;
     let barcodeWidth = parseInt(document.getElementById("barcodeWidth").value);
     let barcodeHeight = parseInt(document.getElementById("barcodeHeight").value);
     let barcodeRotate = parseInt(document.getElementById("barcodeRotate").value);
+    let borderColor = document.getElementById("barcodeBorder").value;
+
 
     if (barcodeType == "99999") {
         barcode = {
             url: "hex.png?",
             data: {
-                color: barcodeText,
+                color: barcodeText.replace("#", ""),
                 width: barcodeWidth,
                 height: barcodeHeight,
+                border: borderColor.replace("#", "")
             }
         };
     } else {