Hooking up the crushed bead marking for the front end

Patrick7321 · Sep 22, 2019 · 2e3a8fb · 2e3a8fb
1 parent 3e38451
commit 2e3a8fb
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 15 deletions.
diff --git a/Server/resources/js/mapInspector.js b/Server/resources/js/mapInspector.js
@@ -39,7 +39,8 @@ var imageObj = undefined; //the stitched map image
         ctx.arc(x,y,radius,0,2*Math.PI);
         if(bead[1]){
             ctx.strokeStyle=$("#waterBeadOutline").val();
-        }else{
+        }
+        else{
             ctx.strokeStyle=$("#colorBeadOutline").val();
         }
         ctx.lineWidth=5;
@@ -71,9 +72,9 @@ var imageObj = undefined; //the stitched map image
     @param ctx - the canvas context.
     */
    var handleHover = function(clientX,clientY,ctx) {
-       var allBeads = beads.colorBeads.concat(beads.waterBeads),
+       var allBeads = beads.colorBeads.concat(beads.waterBeads).concat(beads.crushedBeads),
        toolTipBead = undefined;
-       allBeads.forEach(function(bead){
+       allBeads.forEach((bead) => {
            var x = bead[2][0],
                y = bead[2][1],
                radius = bead[2][2];
@@ -136,12 +137,15 @@ var redraw = function(ctx) {
     ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);//clear the canvas before redrawing
     ctx.drawImage(imageObj,0,0,ctx.canvas.width,ctx.canvas.height); //draw the image first
 
-    beads.colorBeads.forEach(function(bead){
+    beads.colorBeads.forEach((bead) => {
         drawBead(bead,ctx);
     });
-    beads.waterBeads.forEach(function(bead){
+    beads.waterBeads.forEach((bead) => {
         drawBead(bead,ctx);
     });
+    beads.crushedBeads.forEach((bead) => {
+        drawBead(bead, ctx);
+    });
 };
 
 $(window).ready(function() {
@@ -160,13 +164,17 @@ $(window).ready(function() {
         ctx.drawImage(imageObj, 0, 0,width,height); //draw the image first
         beads.colorBeads = translateBeads(beads.colorBeads,height,width); //translate bead coordinates to fit new canvas
         beads.waterBeads = translateBeads(beads.waterBeads,height,width);
+        beads.crushedBeads = translateBeads(beads.crushedBeads, height, width);
 
-        beads.colorBeads.forEach(function(bead){
+        beads.colorBeads.forEach((bead) => {
             drawBead(bead,ctx);
         });
-        beads.waterBeads.forEach(function(bead){
+        beads.waterBeads.forEach((bead) => {
             drawBead(bead,ctx);
         });
+        beads.crushedBeads.forEach((bead) => {
+            drawBead(bead, ctx);
+        });
     };
 
     $("#colorBeadOutline").change(function(){

diff --git a/Server/templates/results.html b/Server/templates/results.html
@@ -20,7 +20,7 @@
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE. -->
 
-<!DOCTYPE html> 
+<!DOCTYPE html>
 <html>
     <head>
         <meta charset='utf-8'>
@@ -394,18 +394,18 @@ <h1>Results</h1>
                 </div>
             </div>
         </div>
-        
+
         <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
         <script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js' integrity='sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49' crossorigin='anonymous'></script>
         <script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js' integrity='sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy' crossorigin='anonymous'></script>
         <script src='https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/jquery.canvasjs.min.js'></script>
 
         <script>
             var mapLocation = "/resources/uploads/{{mapLocation}}",
-                beads = '{ "colorBeads": {{colorBeads}}, "waterBeads": {{waterBeads}} }';
+                beads = '{ "colorBeads": {{colorBeads}}, "waterBeads": {{waterBeads}}, "crushedBeads": {{crushedBeads}} }';
                 beads = beads.replace(/False/g, "false");
                 beads = beads.replace(/True/g,"true");
-                beads = JSON.parse(beads);                
+                beads = JSON.parse(beads);
         </script>
         <script src='/resources/js/mapInspector.js'></script>
         <script src='/resources/js/results.js'></script>

diff --git a/lib/counting.py b/lib/counting.py
@@ -148,10 +148,7 @@ def getCrushedBeads(self, image, circles):
             else:
                 cX, cY = 0, 0
             cv2.circle(image, (cX, cY), 5, (0, 0, 255), -1)
-            self.crushedBeads.append((cX, cY))
-
-
-
+            self.crushedBeads.append([[0, 0, 0], False, [cX, cY, 35]])
 
     """
         Description: a function that takes an array representing a circle's[x-coord of center, y-coord of center, radius]