Dimensions

diff --git a/public_html/breakdown.html b/public_html/breakdown.html
index 2e3c3c0..cb9689a 100644 (file)
--- a/public_html/breakdown.html
+++ b/public_html/breakdown.html
@@ -28,8 +28,34 @@
                 clear: both;
             }
             
-            td.line-right {
-                border-right: 2px solid black;
+            .sprite td.line-left {
+                border-left: 2px solid transparent;
+            }
+            
+            .sprite td.line-top {
+                border-top: 2px solid transparent;
+            }
+            
+            .sprite.measurements td.line-left {
+                border-left: 2px solid black;
+            }
+            
+            .sprite.measurements td.line-top {
+                border-top: 2px solid black;
+            }
+            
+            .sprite .height {
+                visibility: hidden;
+                padding-left: 5px;
+            }
+            
+            .sprite .width {
+                visibility: hidden;
+                text-align:center;
+            }
+            
+            .sprite.measurements .height, .sprite.measurements .width {
+                visibility: visible;
             }
                         
             /*.sprite {
@@ -91,8 +117,32 @@
         </div>
         
         <script>
-            //$(".sprite").width());
-            $(".measurements tr").append("<td class='line-right'></td>")
+            padSprite = function(sprite) {
+                var height = $(".sprite:first table tr").length;
+                var width = $(".sprite:first table tr:first td").length;
+                
+                $(sprite).find('tr').each(function() {
+                    $(this).append("<td></td>");
+                });
+                
+                $(sprite).find('tr').each(function(){
+                    $(this).find('td').eq(0).before('<td></td>');
+                });
+            
+                for (var i=0; i<$(sprite).find("tr:last td").length; i++) {
+                    var cells = cells ? cells + '<td></td>' : '<tr><td></td>';
+                }
+                cells += "<td></td></tr><tr><td></td><td class=\"line-top width\" colspan=\"" + width + "\"><?php echo $sprite_width_cm; ?></td></tr>";
+                $(sprite).find("tr:last").after(cells);
+                        
+                $(sprite).find("tr:first td:last").after("<td class=\"line-left\ height\" rowspan=\"" + height + "\"><?php echo $sprite_height_cm; ?></td>")
+            };
+            
+            padSprite($(".measurements"));
+            $(".sprite:not(.measurements").each(function() {
+                padSprite(this);
+            });
+            
             var pixelSize = Math.floor($(".sprite:first").width()*0.75 / $(".sprite:first table tr:first td").length);
                         
             $(".sprite td").width(pixelSize);

diff --git a/public_html/upload.php b/public_html/upload.php
index 95dcdb7..777c5f7 100644 (file)
--- a/public_html/upload.php
+++ b/public_html/upload.php
@@ -330,8 +330,8 @@ if(isset($_POST["submit"])) {
     );
     
     $pixel_array = image_to_array($_FILES["fileToUpload"]["tmp_name"]);
-    $sprite_width_px = count($pixel_array[0]);
-    $sprite_height_px = count($pixel_array);
+    $sprite_width_cm = count($pixel_array[0]) * $_POST['wood_size'] * 100 . "cm";
+    $sprite_height_cm = count($pixel_array) * $_POST['wood_size'] * 100 . "cm";
     $colour_map = generate_colourmap($pixel_array, $ironlak_colours);
     $original_sprite = array_to_sprite($pixel_array);
     $ironlak_sprite =  array_to_sprite($pixel_array, $colour_map);