diff --git a/InpaintHTTP/MainMod.cs b/InpaintHTTP/MainMod.cs index b191d68..dd050e1 100644 --- 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(Request.Body.AsString()); + //Console.WriteLine(Request.B .Form['body']); + var data = this.Request.Form["body"]; + if(data != null) + userSettings = JsonConvert.DeserializeObject(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 index d184917..0b14fde 100644 --- 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; + } } \ No newline at end of file diff --git a/InpaintHTTP/TestWebsite/index.html b/InpaintHTTP/TestWebsite/index.html index bec964d..33acb47 100644 --- a/InpaintHTTP/TestWebsite/index.html +++ b/InpaintHTTP/TestWebsite/index.html @@ -23,14 +23,28 @@

Mobile inpainting

- + diff --git a/InpaintHTTP/TestWebsite/js/index.js b/InpaintHTTP/TestWebsite/js/index.js index 027d7b0..bb58d13 100644 --- 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 index 65e29b2..22f2ab4 100644 --- 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 index 0ec2cdc..464bc6d 100644 --- 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 () {