Big changes to order and placement of JS files:

- grunt file updated to include automatic production of doodle3d-client.js and doodle3d-client.min.js
- all individual JS files moved to outside scope of 'www' dir to reflect these changes

Gruntfile.js

@@ -16,21 +16,22 @@ module.exports = function(grunt) {
       },
       dist: {
         src: [
-          'www/js/SettingsWindow.js',
-          'www/js/d3dServerInterfacing.js',
-          'www/js/verticalShapes.js',
-          'www/js/buttonbehaviors.js',
-          'www/js/canvasDrawing.js',
-          'www/js/previewRendering.js',
-          'www/js/gcodeGenerating.js',
-          'www/js/init_layout.js',
-          'www/js/Printer.js',
-          'www/js/Progressbar.js',
-          'www/js/Thermometer.js',
-          'www/js/utils.js',
-          'www/js/sidebar.js',
-          'www/js/message.js',
-          'www/js/main.js'
+          'js_src/SettingsWindow.js',
+          'js_src/UpdatePanel.js',
+          'js_src/d3dServerInterfacing.js',
+          'js_src/verticalShapes.js',
+          'js_src/buttonbehaviors.js',
+          'js_src/canvasDrawing.js',
+          'js_src/previewRendering.js',
+          'js_src/gcodeGenerating.js',
+          'js_src/init_layout.js',
+          'js_src/Printer.js',
+          'js_src/Progressbar.js',
+          'js_src/Thermometer.js',
+          'js_src/utils.js',
+          'js_src/sidebar.js',
+          'js_src/Message.js',
+          'js_src/main.js'
         ],
         dest: 'www/js/<%= pkg.name %>.js'
       }
@@ -38,15 +39,21 @@ module.exports = function(grunt) {
     uglify: {
       options: {
 //        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
-        mangle: false,
+        mangle: true,
         beautify: false,
         compress: {},
         report: 'min',
         preserveComments: 'false'
       },
       build: {
-        src: ['www/js/*.js', '!www/js/<%= pkg.name %>.min.js'],
-        dest: 'www/js/<%= pkg.name %>.min.js'
+        files: {
+//          'www/js/<%= pkg.name %>.min.js' : ['www/js/*.js', '!www/js/<%= pkg.name %>.min.js', '!www/js/<%= pkg.name %>.js']
+          'www/js/<%= pkg.name %>.min.js' : ['www/js/<%= pkg.name %>.js']
+        }
+//        src: 'www/js/*.js',
+//        dest: 'www/js/min/blabla.js'
+//        src: ['www/js/*.js', '!www/js/<%= pkg.name %>.min.js'],
+//        dest: 'www/js/<%= pkg.name %>.min.js'
       }
     },
     jshint: {
@@ -85,11 +92,11 @@ module.exports = function(grunt) {
       }
     },
     watch: {
-//      javascript: {
-//        files: ["www/js/*", '!www/js/*.min.js'],
-//        //        tasks: ["less", "css_prefix"]
-//        tasks: ["uglify"]
-//      },
+      javascript: {
+        files: ["js_src/*", '!www/js/<%= pkg.name %>.min.js', '!www/js/<%= pkg.name %>.js'],
+        tasks: ["concat", "uglify"]
+//        tasks: ["jshint", "concat", "uglify"]
+      },
       styles: {
         files: ["less/*"],
         tasks: ["less", "autoprefixer", "cssmin"]
@@ -133,8 +140,8 @@ module.exports = function(grunt) {
     'less',
     'autoprefixer',
     'cssmin',
-//    'concat',
-//    'uglify',
+    'concat',
+    'uglify',
 //    'jshint',
     'watch'
   ]);

js_src/init_layout.js

@@ -0,0 +1,62 @@
+// TODO refactor this stuff, there's much to wipe
+var drawAreaContainerMinHeight = 300;
+var drawAreaContainerMaxHeight = 450;
+
+function doOnResize() {
+  //    console.log("doOnResize() >> " + new Date().getTime());
+  canvas.width = $canvas.width();
+  canvas.height = $canvas.height(); // canvas.clientHeight;
+
+  preview.width = $preview.width();
+  preview.height = $drawAreaContainer.height();
+
+  canvasWidth = canvas.width;
+  canvasHeight = canvas.height;
+
+  console.log("   preview.width: " + preview.width + ", $preview.width(): " + $preview.width());
+
+  calcPreviewCanvasProperties();
+
+  drawCanvasTopLeftCoords[0] = drawCanvas.offset().left;
+  drawCanvasTopLeftCoords[1] = drawCanvas.offset().top;
+
+  redrawDoodle();
+  redrawPreview();
+
+}
+
+function initLayouting() {
+  console.log("f:initLayouting()");
+
+  $drawAreaContainer = $(".drawareacontainer");
+
+  canvas.width = $canvas.width();
+  canvas.height = $canvas.height(); // canvas.clientHeight;
+
+  preview.width = $preview.width();
+  preview.height = $drawAreaContainer.height();
+
+  canvasWidth = canvas.width;
+  canvasHeight = canvas.height;
+
+  $drawAreaContainer.show();
+
+  // window.innerHeight
+  console.log("window.innerHeight: " + window.innerHeight);
+  console.log("window.innerWidth: " + window.innerWidth);
+  console.log("$drawAreaContainer.innerHeight(): " + $drawAreaContainer.innerHeight());
+  console.log("$drawAreaContainer.offset().top: " + $drawAreaContainer.offset().top);
+
+  // timeout because it SEEMS to be beneficial for initting the layout
+  // 2013-09-18 seems beneficial since when?
+  setTimeout(_startOrientationAndChangeEventListening, 1000);
+}
+
+function _startOrientationAndChangeEventListening() {
+  // Initial execution if needed
+
+  $(window).on('resize', doOnResize);
+
+  // is it necessary to call these? Aren't they called by the above eventhandlers?
+  doOnResize();
+}

js_src/main.js

@@ -17,6 +17,9 @@ var wifiboxCGIBinURL; // CGI-bin, for some network stuff, where it needs to rest
 
 var $drawAreaContainer, $doodleCanvas, doodleCanvas, doodleCanvasContext, $previewContainer;
 
+var showhideInterval;
+var showOrHide = false;
+
 $(function() {
   console.log("ready");
 
@@ -103,9 +106,6 @@ $(function() {
   }
 });
 
-var showhideInterval;
-var showOrHide = false;
-
 function showOrHideThermo() {
   console.log("f:showOrHideThermo()");
   if (showOrHide) {

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "doodle3dclient",
+  "name": "doodle3d-client",
   "version": "0.9.0",
   "description": "Doodle3D client app",
   "repository": {

www/index.html

@@ -130,22 +130,24 @@
   <img class="vertImage" src="img/bg_vertical.png"/>
 </div>
 <script src="js/libs/jquery-1.8.3.min.js"></script>
-<script src="js/SettingsWindow.js"></script>
-<script src="js/UpdatePanel.js"></script>
-<script src="js/d3dServerInterfacing.js"></script>
-<script src="js/verticalShapes.js"></script>
-<script src="js/buttonbehaviors.js"></script>
-<script src="js/canvasDrawing.js"></script>
-<script src="js/previewRendering.js"></script>
-<script src="js/gcodeGenerating.js"></script>
-<script src="js/init_layout.js"></script>
-<script src="js/Printer.js"></script>
-<script src="js/Progressbar.js"></script>
-<script src="js/Thermometer.js"></script>
-<script src="js/utils.js"></script>
-<script src="js/sidebar.js"></script>
-<script src="js/Message.js"></script>
-<script src="js/main.js"></script>
+<script src="js/doodle3d-client.js"></script>
+<!--<script src="js/doodle3d-client.min.js"></script>-->
+<!--<script src="js/SettingsWindow.js"></script>-->
+<!--<script src="js/UpdatePanel.js"></script>-->
+<!--<script src="js/d3dServerInterfacing.js"></script>-->
+<!--<script src="js/verticalShapes.js"></script>-->
+<!--<script src="js/buttonbehaviors.js"></script>-->
+<!--<script src="js/canvasDrawing.js"></script>-->
+<!--<script src="js/previewRendering.js"></script>-->
+<!--<script src="js/gcodeGenerating.js"></script>-->
+<!--<script src="js/init_layout.js"></script>-->
+<!--<script src="js/Printer.js"></script>-->
+<!--<script src="js/Progressbar.js"></script>-->
+<!--<script src="js/Thermometer.js"></script>-->
+<!--<script src="js/utils.js"></script>-->
+<!--<script src="js/sidebar.js"></script>-->
+<!--<script src="js/Message.js"></script>-->
+<!--<script src="js/main.js"></script>-->
 
 </body>
 </html>

www/js/init_layout.js

@@ -1,140 +0,0 @@
-// TODO refactor this stuff, there's much to wipe
-var drawAreaContainerMinHeight = 300;
-var drawAreaContainerMaxHeight = 450;
-
-function doOnResize() {
-  //    console.log("doOnResize() >> " + new Date().getTime());
-//  $(".container").css("height", window.innerHeight);
-
-  /* 2013-10-09 commented out -> no more need with new layouting
-   $drawAreaContainer.css("marginLeft", -$drawAreaContainer.width()/2);
-  $drawAreaContainer.css("marginTop", -$drawAreaContainer.height() *.45);
-//  $drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height")) * 0.45);
-//*/
-
-  //  canvas.width = $drawAreaContainer.width() - preview.width; // canvas.clientWidth;
-  //  canvas.width = $("#mycanvasContainer").width();
-  canvas.width = $canvas.width();
-  canvas.height = $canvas.height(); // canvas.clientHeight;
-  //  canvas.height = $drawAreaContainer.height(); // canvas.clientHeight;
-
-  preview.width = $preview.width();
-  preview.height = $drawAreaContainer.height();
-
-  canvasWidth = canvas.width;
-  canvasHeight = canvas.height;
-
-  console.log("   preview.width: " + preview.width + ", $preview.width(): " + $preview.width());
-
-  calcPreviewCanvasProperties();
-
-//  layerOffsetY = preview.height - 1.75 * layerCY;
-//  yStep = preview.height / 150;
-//  preview.width = parseInt($preview.css("width"), 10);
-//  preview.height = parseInt($preview.css("height"), 10);
-
-//  canvasWidth = canvas.width;
-//  canvasHeight = canvas.height;
-
-  drawCanvasTopLeftCoords[0] = drawCanvas.offset().left;
-  drawCanvasTopLeftCoords[1] = drawCanvas.offset().top;
-//  drawCanvasTopLeftCoords[0] = drawCanvas[0].offsetParent.offsetLeft;
-//  drawCanvasTopLeftCoords[1] = drawCanvas[0].offsetParent.offsetTop;
-
-//  preview.height = $("#previewContainer").height();
-//  console.log("f:doOnResize() >> preview.height: " + preview.height);
-
-  redrawDoodle();
-  redrawPreview();
-
-  return;
-
-//  doClientAndOrientationStuff() // <-- is this necessary in this method?
-
-//  console.log("f:doOnResize() >> $('#canvascontainer').innerHeight: " + window.innerHeight);
-  if (window.innerHeight < 768) {
-//    $('#drawAreaContainer').innerHeight(window.innerHeight - $("#drawAreaContainer").offset().top - 70);
-    var newVal = window.innerHeight - $("#drawAreaContainer").offset().top - 100; // what's the 70 ??
-    newVal = Math.max(newVal, drawAreaContainerMinHeight);
-    newVal = Math.min(newVal, drawAreaContainerMaxHeight);
-
-    $('#drawAreaContainer').innerHeight(newVal);
-
-    // canvas drawing area
-    $canvas.css("height", newVal);
-    canvas.height = newVal;
-    canvasWidth = canvas.width;
-    canvasHeight = canvas.height;
-
-    // preview area
-    $preview.css("height", newVal);
-    preview.height = newVal;
-    layerOffsetY = preview.height - 1.75 * layerCY;
-    yStep = preview.height / 150;
-
-    redrawDoodle();
-    redrawPreview();
-  }
-}
-
-function initLayouting() {
-  console.log("f:initLayouting()");
-
-  // first set the css width/height and actual width/height of the drawing area
-  <!--div drawAreaContainer 650,450-->
-  <!--canvas mycanvas       500, 450-->
-  <!--canvas preview      150, 450-->
-
-//  $doodleCanvas = $("#mycanvas");
-//  doodleCanvas = $("#mycanvas")[0];
-//  doodleCanvasContext = doodleCanvas.getContext('2d');
-
-  $drawAreaContainer = $(".drawareacontainer");
-  /* 2013-10-09 commented out -> no more need with new layouting
-  $drawAreaContainer.css("margin", 0);
-  $drawAreaContainer.css("marginLeft", -$drawAreaContainer.width()/2);
-  $drawAreaContainer.css("marginTop", -$drawAreaContainer.height() *.45);
-  //*/
-
-//  console.log("   preview.width: " + preview.width + ", $preview.width(): " + $preview.width());
-//  canvas.width = $drawAreaContainer.width() - preview.width; // canvas.clientWidth;
-//  canvas.width = $("#mycanvasContainer").width();
-  canvas.width = $canvas.width();
-  canvas.height = $canvas.height(); // canvas.clientHeight;
-//  canvas.height = $drawAreaContainer.height(); // canvas.clientHeight;
-
-  preview.width = $preview.width();
-  preview.height = $drawAreaContainer.height();
-
-  canvasWidth = canvas.width;
-  canvasHeight = canvas.height;
-
-  $drawAreaContainer.show();
-
-  // window.innerHeight
-  console.log("window.innerHeight: " + window.innerHeight);
-  console.log("window.innerWidth: " + window.innerWidth);
-  console.log("$drawAreaContainer.innerHeight(): " + $drawAreaContainer.innerHeight());
-  console.log("$drawAreaContainer.offset().top: " + $drawAreaContainer.offset().top);
-
-
-  /*  2013-07-26 not doing this resizing stuff now, it's not working well yet
-  if (window.innerHeight < 768) {
-    $('#drawAreaContainer').innerHeight(window.innerHeight - $("#drawAreaContainer").offset().top - 70);
-  }
-  //*/
-
-  // timeout because it SEEMS to be beneficial for initting the layout
-  // 2013-09-18 seems beneficial since when?
-  setTimeout(_startOrientationAndChangeEventListening, 1000);
-}
-
-function _startOrientationAndChangeEventListening() {
-  // Initial execution if needed
-
-  $(window).on('resize', doOnResize);
-
-  // is it necessary to call these? Aren't they called by the above eventhandlers?
-//  doClientAndOrientationStuff();
-  doOnResize();
-}