Improve drawing (#18)

Bunch of improvements * fixed sizing after inpainting started * fixed merge + gallery size glitch * add dot back for Mobile * add responsive css for mobile * add badass background * fixed side note footer * updated UI buttons * add JSON stuff * fixed button+slider divs * add quick legend * add label updating
zavolokas · Oct 24, 2020 · 22b0c27 · 22b0c27
1 parent 2966179
commit 22b0c27
Show file tree

Hide file tree

Showing 6 changed files with 170 additions and 46 deletions.
diff --git a/InpaintHTTP/MainMod.cs b/InpaintHTTP/MainMod.cs
@@ -19,6 +19,7 @@ namespace InpaintHTTP
 {
     public class ApiSettings
     {
+        public string SelectedAlgorithm { get; set; } // only used in incomming requests from users
         public static ApiSettings _Instance { get; private set; }
         public InpaintSettings InpaintSettings { get; set; }
 
@@ -100,19 +101,25 @@ public MainMod()
                     var inpainter = new Inpainter();
 
                     // Convert body request to settings
-                    InpaintSettings userSettings = new InpaintSettings();
+                    ApiSettings userSettings = new ApiSettings();
                     try
                     {
-                        userSettings = JsonConvert.DeserializeObject<InpaintSettings>(Request.Body.AsString());
+                        //Console.WriteLine(Request.B .Form['body']);
+                        var data = this.Request.Form["body"];
+                        if(data != null)
+                            userSettings = JsonConvert.DeserializeObject<ApiSettings>(data);
+                    }
+                    catch (Exception e) 
+                    {
+                        Console.WriteLine(e.ToString());
                     }
-                    catch { }
 
                     // Now merge then, giving priority to the default
-                    if (userSettings.PatchSize > ApiSettings._Instance.InpaintSettings.PatchSize)
-                        userSettings.PatchSize = ApiSettings._Instance.InpaintSettings.PatchSize;
+                    if (userSettings.InpaintSettings.PatchSize > ApiSettings._Instance.InpaintSettings.PatchSize)
+                        userSettings.InpaintSettings.PatchSize = ApiSettings._Instance.InpaintSettings.PatchSize;
 
-                    if (userSettings.MaxInpaintIterations > ApiSettings._Instance.InpaintSettings.MaxInpaintIterations)
-                        userSettings.MaxInpaintIterations = ApiSettings._Instance.InpaintSettings.MaxInpaintIterations;
+                    if (userSettings.InpaintSettings.MaxInpaintIterations > ApiSettings._Instance.InpaintSettings.MaxInpaintIterations)
+                        userSettings.InpaintSettings.MaxInpaintIterations = ApiSettings._Instance.InpaintSettings.MaxInpaintIterations;
 
 
                     Image finalResult = null;
@@ -126,7 +133,7 @@ public MainMod()
                         Console.WriteLine("[" + DateTime.Now.ToString("HH:mm:ss.fffff") + "] call on inpainter.IterationFinished (Level " + eventArgs.LevelIndex + ", Iteration " + eventArgs.InpaintIteration + ")"); //Debugging
                     };
 
-                    await Task.Factory.StartNew(() => inpainter.Inpaint(imageArgb, markupArgb, userSettings, donors));
+                    await Task.Factory.StartNew(() => inpainter.Inpaint(imageArgb, markupArgb, userSettings.InpaintSettings, donors));
 
                     Console.WriteLine("[" + DateTime.Now.ToString("HH:mm:ss.fffff") + "] Processing finished");
 #if DEBUG

diff --git a/InpaintHTTP/TestWebsite/css/style.css b/InpaintHTTP/TestWebsite/css/style.css
@@ -6,12 +6,9 @@ body {
 	width: 100%;
 	/* height: 100%; buggy */
 	margin: auto;
-	background-color: #bdbdbd;
-	/* Add cool background and some crayons to fill the empty space? 
-	background-color: #fff;
-	background-image: linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), linear-gradient(#eee .1em, transparent .1em);
+	background-color: #e5e5e5;
+	background-image: linear-gradient(90deg, transparent 79px, #5f9ea0 79px, #5f9ea0 81px, transparent 81px), linear-gradient(#d4d4d4 .1em, transparent .1em);
 	background-size: 100% 1.2em;
-	*/
 }
 .content {
 	width: auto;
@@ -46,14 +43,14 @@ body {
 }
 .slider-orange {
 	-webkit-appearance: none;
-	width: 99%;
+	width: auto;
 	height: 15px;
 	border-radius: 5px;
 	background: grey;
 	outline: none;
 	-webkit-transition: .2s;
 	transition: opacity .2s;
-	margin-bottom: 8px;
+	margin: 2px;
 }
 .slider-orange::-webkit-slider-thumb {
 	-webkit-appearance: none;
@@ -79,12 +76,25 @@ body {
 	border-radius: 10px;
 	padding: 3px;
 }
-#footer{
-	text-align: center;
+#footer-side {
 	position: absolute;
-	bottom: 0;
-	left:0;
+	top: 2px;
+	left: 4px;
+	text-decoration: none;
+	line-height: 19px;
+	font-family: cursive;
+	width: 80px;
+	text-align: left;
+	overflow-wrap: break-word;
+}
+#footer {
+	position: absolute;
+	top: 2px;
+	left: 84px;
 	text-decoration: none;
+	line-height: 19px;
+	font-family: cursive;
+	text-align: left;
 }
 h1{
 	text-align: left;
@@ -106,13 +116,11 @@ h1{
 	color: #5f9ea0;
 	background-color: #353535;
 }
-.preview-galery
-{
+.preview-galery {
 	overflow-y: scroll;
 	height: 80vh;
-	width: 750px;
+	width: 70vw;
 }
-
 .preview-note 
 {
 	position: absolute;
@@ -146,14 +154,30 @@ li{
 	list-style: none;
 }
 .polaroid-frame {
-	/* TODO: Remove below on mobile? */
 	border-color: grey;
 	border-style: solid;
 	border-radius: 6px;
 	border-width: 3px;
 	background-color: #fefefe;
-	/* TODO: Remove above on mobile? */
 	padding: 3px;
+	box-shadow: 6px 6px 5px #000000ad;
+}
+.polaroid-buttons {
+
+}
+.button-box {
+	margin: auto;
+	position: relative;
+	height: 100%;
+	width: 70%;
+	float: left;
+	margin-left: 30%;
+}
+.slider-box {
+	margin: auto;
+	position: absolute;
+	float: left;
+	width: 30%;
 }
 #polaroid-footer
 {
@@ -200,7 +224,7 @@ li{
 {
 	display: block;
 	height: 500px;
-	width: 500px;
+	width: 470px;
 	outline: none;
 	opacity: 0;
 }
@@ -271,4 +295,56 @@ li{
 	width: 300px;
 	height: 250px;
 	margin:auto;
+}
+
+/* Full-screen on mobile for optimal screen usage */
+@media screen and (max-width: 480px) {
+	.content
+	{
+		max-height: 100%;
+		padding: 0;
+	}
+	#content {
+		padding: 0;
+		width: 100%;
+	}
+	#canvas {
+		max-width: 100%;
+		max-height: 100%;
+	}
+	.preview-galery {
+		height: 100%;
+		width: 100%;
+		border-style: none;
+		padding: 2px;
+	}
+	.preview {
+		border-radius: 0;
+		border-width: 0;
+	}
+	#Image{
+		width: 95vw;
+	}
+	.polaroid-frame {
+		box-shadow: 0px 0px 0px #000000ad;
+		background-color: inherit;
+		border-style: none;
+		padding: 0;
+	}
+	#footer-side {
+		top: auto;
+		left: 4px;
+		bottom: 4px;
+		width: auto;
+	}
+	#footer {
+		top: auto;
+		left: 4px;
+		bottom: 4px;
+		width: auto;
+	}
+	body {
+		background-color: #d4d4d4;
+		background-image: none;
+	}
 }
diff --git a/InpaintHTTP/TestWebsite/index.html b/InpaintHTTP/TestWebsite/index.html
@@ -23,14 +23,28 @@ <h1>Mobile inpainting</h1>
 						</div>
 						<!-- <div id="polaroid-footer"> -->
 						<div id="polaroid-footer">
-							<div class="polaroid-slider">
-								<input class="slider-orange masksize-slider" type="range" min="10" max="70" value="20" id="masksize-slider">
-							</div>
-							<div class="polaroid-buttons">
-								<input type="button" class="button-orange" id="inpaint" value="inpaint" />
-								<input type="button" class="button-orange" id="reset" value="reset" />
-								<input type="button" class="button-orange" id="undo" value="undo" />
-								<input type="button" class="button-orange" id="galery" value="galery" />
+							<div class="polaroid-buttons" style="height: 152px; position: relative">
+								<div class="slider-box">
+									<input class="slider-orange masksize-slider" orient="vertical" type="range" min="10" max="70" value="20" id="masksize-slider">
+									<input style="background-color: darkred" class="slider-orange max-iterations-slider" orient="vertical" type="range" min="2" max="15" value="5" id="max-iterations-slider">
+									<input style="background-color: darkblue" class="slider-orange patch-size-slider" orient="vertical" type="range" min="2" max="11" value="5" id="patch-size-slider">
+									<p style="font-family: sans-serif; font-size: 14px;">
+										<span style="color: gray">■ Paint Size <span id="paint-size-value">(20)</span></span><br />
+										<span style="color: darkred">■ Max Iterations <span id="max-iterations-value">(5)</span></span><br />
+										<span style="color: darkblue">■ Patch Size <span id="patch-size-value">(5)</span></span>
+									</p>
+								</div>
+								<div class="button-box">
+									<input style="width: 50%;margin: auto;display: block;float: left;margin-bottom 4px;" type="button" class="button-orange" id="inpaint" value="Inpaint" />
+									<input disabled style="width: 50%;margin: auto;display: block;float: left;margin-bottom: 4px;" type="button" class="button-orange" id="inpaint" value="Seam Carve" />
+									<input style="width: 50%;margin: auto;display: block;float: left;margin-bottom: 4px;" type="button" class="button-orange" id="reset" value="Reset" />
+									<input style="width: 50%;margin: auto;display: block;float: left;margin-bottom: 4px;" type="button" class="button-orange" id="undo" value="Undo" />
+									<input style="width: 50%;margin: auto;display: block;float: left;margin-bottom: 4px;" type="button" class="button-orange" id="galery" value="Gallery" />
+									<select style="width: 50%;margin: auto;display: block;float: left;margin-bottom: 4px;" class="patch-distance-calculator" id="patch-distance-calculator">
+										<option value="Cie2000">Cie2000</option>
+										<option value="Cie76">Cie76</option>
+									</select>
+								</div>
 							</div>
 						</div>
 					</form>
@@ -51,7 +65,7 @@ <h1>Mobile inpainting</h1>
 				</div>
 			</div>
 		</div>
-		<div id="footer">version 2.0.4.5</div>
+		<div id="footer">version<br />2.0.4.6</div>
 		<script class="jsbin" src="js/jquery.min.js"></script>
 		<script defer src="js/index.js"></script>
 		<script defer src="js/inpaint.js"></script>

diff --git a/InpaintHTTP/TestWebsite/js/index.js b/InpaintHTTP/TestWebsite/js/index.js
@@ -46,6 +46,15 @@ $(function(){
 
     $("#masksize-slider").change(function(){
         maskHandler.setLineWidth(this.value);
+        $('#paint-size-value').text('(' + this.value + ')');
+    });
+
+    $("#max-iterations-slider").change(function () {
+        $('#max-iterations-value').text('(' + this.value + ')');
+    });
+
+    $("#patch-size-slider").change(function () {
+        $('#patch-size-value').text('(' + this.value + ')');
     });
 
     $("#reset").click(function(){
@@ -107,8 +116,8 @@ $(function(){
         console.log("mouseleave " + maskHandler.paints());
         maskHandler.OnMouseLeave(e);
     }).mouseup(function (e) {
-        console.log("mouseleave " + maskHandler.paints());
-        maskHandler.OnMouseUp(e);
+        console.log("mouseup " + maskHandler.paints());
+        maskHandler.OnMouseUp(e); 
     }
     // Mobile Mouse Movement Events
     ).on({'touchstart': function (e) {

diff --git a/InpaintHTTP/TestWebsite/js/inpaint.js b/InpaintHTTP/TestWebsite/js/inpaint.js
@@ -14,7 +14,7 @@ var Inpaint = function () {
 
         if(result == null)
         {
-            //Do correct error handeling... or prevent user from clicking #Inpaint when no img is selected
+            //TODO: Do correct error handeling... or prevent user from clicking #Inpaint when no img is selected
             callback();
             return;
         }
@@ -37,8 +37,16 @@ var Inpaint = function () {
         fd.append('file',imagefile);
         fd.append('file', maskfile);
 
-        // params
-        // TODO: add JSON parameters to body
+        fd.append('body', JSON.stringify({
+            SelectedAlgorithm: "Inpaint",
+            InpaintSettings: {
+                // PatchDistanceCalculator: $('#patch-distance-calculator').val(), // NOTE: backend cant deserialise this
+                MaxInpaintIterations: parseInt($('#max-iterations-slider').val()),
+                PatchMatch: {
+                    PatchSize: parseInt($('#patch-size-slider').val())
+                }
+            }
+        }));
 
         console.log("Started Request");
 

diff --git a/InpaintHTTP/TestWebsite/js/maskHandler.js b/InpaintHTTP/TestWebsite/js/maskHandler.js
@@ -117,7 +117,7 @@ let maskHandler = function () {
             context.beginPath();
             context.lineWidth = dotWidth[i];
             if (clickX[i] === dotX && clickY[i] === dotY)
-                context.strokeStyle = color;
+                context.strokeStyle = "#5f9ea0";
             if (clickDrag[i] && i) {
                 context.moveTo(clickX[i - 1], clickY[i - 1]);
             } else {
@@ -197,7 +197,11 @@ let maskHandler = function () {
                 _addClick(lastClickX, lastClickY);
                 _initDot(lastClickX, lastClickY);
             } else {
-                _killDot();
+                let dist = Math.sqrt(((lastClickX - dotX) * (lastClickX - dotX)) + ((lastClickY - dotY) * (lastClickY - dotY))); _killDot();
+                if (dist <= sLineWidth * 0.55) {
+                    _killDot();
+                    console.log("kill");
+                }
             }
             _reDraw();
         } else if (e.originalEvent.changedTouches) // mobile detected
@@ -223,7 +227,7 @@ let maskHandler = function () {
         if (paint) {
             if (e.pageX) {
                 if (_isDotActive()) {
-                    //Do math :D
+                    //Do math :D - Desktop
                     let newDotX = dotX + (((e.pageX - offsetLeft) * f) - lastClickX);
                     let newDotY = dotY + (((e.pageY - offsetTop) * f) - lastClickY);
 
@@ -238,7 +242,7 @@ let maskHandler = function () {
                 _reDraw();
             } else if (e.originalEvent.changedTouches) {
                 if (_isDotActive()) {
-                    //Do Math :D
+                    //Do Math :D - Mobile (With Dot)
                     let newDotX = dotX + (((e.originalEvent.changedTouches[0].pageX - offsetLeft) * f) - lastClickX);
                     let newDotY = dotY + (((e.originalEvent.changedTouches[0].pageY - offsetTop) * f) - lastClickY);
 
@@ -256,12 +260,18 @@ let maskHandler = function () {
 
     let _OnMouseUp = function (e) {
         paint = false;
-        _killDot();
+        if (e.pageX) {
+            _killDot(); // desktop detected
+            _reDraw(); // visually remove dot
+        }
     };
 
     let _OnMouseLeave = function (e) {
         paint = false;
-        _killDot();
+        if (e.pageX) {
+            _killDot(); // desktop detected
+            _reDraw(); // visually remove dot
+        }
     };
 
     let _getCanvas = function () {