- Grunt configured

- first install the dependencies with 'sudo npm install'
- then run with 'grunt'

Gruntfile.js

@@ -0,0 +1,142 @@
+/*global module:false*/
+module.exports = function(grunt) {
+
+  // Project configuration.
+  grunt.initConfig({
+    // Metadata.
+    pkg: grunt.file.readJSON('package.json'),
+    banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' +
+      '<%= grunt.template.today("yyyy-mm-dd") %>\n' +
+      '<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' +
+      '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' +
+      ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */\n',
+    concat: {
+      options: {
+//         separator: ';'
+      },
+      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'
+        ],
+        dest: 'www/js/<%= pkg.name %>.js'
+      }
+    },
+    uglify: {
+      options: {
+//        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
+        mangle: false,
+        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'
+      }
+    },
+    jshint: {
+      options: {
+        globals: {
+          jQuery: true
+        },
+        browser: true,
+        curly: true,
+        eqeqeq: true,
+        immed: true,
+        latedef: true,
+        newcap: true,
+        noarg: true,
+        sub: true,
+        undef: true,
+        unused: true,
+        boss: true,
+        eqnull: true
+      },
+//      gruntfile: {
+//        src: 'Gruntfile.js'
+//      },
+      lib_test: {
+        src: ['www/js/*.js', '!www/js/<%= pkg.name %>.js', '!www/js/<%= pkg.name %>.min.js']
+      }
+    },
+    less: {
+      development: {
+        options: {
+          paths: ["www/css"]
+        },
+        files: {
+          "www/css/styles.css": "less/styles.less"
+        }
+      }
+    },
+    watch: {
+//      javascript: {
+//        files: ["www/js/*", '!www/js/*.min.js'],
+//        //        tasks: ["less", "css_prefix"]
+//        tasks: ["uglify"]
+//      },
+      styles: {
+        files: ["less/*"],
+        tasks: ["less", "autoprefixer", "cssmin"]
+      }
+    },
+    autoprefixer: {
+      options: {
+        browsers: ['> 1%', 'last 2 versions', 'ie 8', 'ie 9', 'ff 17', 'opera 12.1']
+      },
+      // prefix all specified files and save them separately
+      single_file: {
+        options: {},
+        //        expand: true,
+        //        flatten: true,
+        src: 'www/css/styles.css', // -> src/css/file1.css, src/css/file2.css
+        dest: 'www/css/styles.css' // -> dest/css/file1.css, dest/css/file2.css
+      }
+    },
+    cssmin: {
+      minify: {
+        expand: true,
+        cwd: 'www/css/',
+        src: ['*.css', '!*.min.css'],
+        dest: 'www/css/',
+        ext: '.min.css'
+      }
+    }
+  });
+
+  // These plugins provide necessary tasks.
+  grunt.loadNpmTasks('grunt-contrib-less');
+  grunt.loadNpmTasks('grunt-contrib-concat');
+  grunt.loadNpmTasks('grunt-contrib-uglify');
+  grunt.loadNpmTasks('grunt-contrib-jshint');
+  grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-autoprefixer');
+  grunt.loadNpmTasks('grunt-contrib-cssmin');
+
+  // Default task.
+  grunt.registerTask('default', [
+    'less',
+    'autoprefixer',
+    'cssmin',
+//    'concat',
+//    'uglify',
+//    'jshint',
+    'watch'
+  ]);
+
+};

README.md

@@ -0,0 +1 @@
+Doodle3D client app

less/base.less

@@ -5,8 +5,9 @@
 */
 body {
   background-color: #fcfcfc;
-  -moz-user-select: none; /* disable cut copy paste */
+  user-select: none; /* disable cut copy paste */
-  -webkit-user-select: none; /* disable cut copy paste */
+//  -moz-user-select: none; /* disable cut copy paste */
+//  -webkit-user-select: none; /* disable cut copy paste */
   overflow:hidden; /* This chops off any overhanging divs */
 }
 img {

package.json

@@ -0,0 +1,22 @@
+{
+  "name": "doodle3dclient",
+  "version": "0.9.0",
+  "description": "Doodle3D client app",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Doodle3D/doodle3d-client.git"
+  },
+  "author": "Peter Uithoven, Adriaan Wormgoor, Rick Companje",
+  "readmeFilename": "README.md",
+  "devDependencies": {
+    "grunt": "~0.4.1",
+    "grunt-cli": "~0.1.9",
+    "grunt-contrib-less": "~0.7.0",
+    "grunt-contrib-watch": "~0.5.3",
+    "grunt-contrib-uglify": "~0.2.4",
+    "grunt-contrib-jshint": "~0.6.4",
+    "grunt-autoprefixer": "~0.4.0",
+    "grunt-contrib-cssmin": "~0.6.2",
+    "grunt-contrib-concat": "~0.3.0"
+  }
+}

www/css/debug.min.css

@@ -0,0 +1 @@
+.debugContainer{position:absolute;top:0;left:0;z-index:500;background-color:#f0f;display:none}#debug_textArea{position:absolute;bottom:0;z-index:500;display:none}.debugBtn{width:25px;height:25px;background-color:#03b;float:left}.agentInfo{background:#fff;border:1px #333 solid;display:none;float:left;opacity:.7}.agentInfoToggle{display:block}#debug_display{position:absolute;top:0;left:0;display:none;background-color:#fff;opacity:.7;color:#000}

www/css/settings.min.css

@@ -0,0 +1 @@
+form{margin:10px;max-width:600px}form input{margin:1px}body,th,td{font-family:Helvetica,Arial,"Nimbus Sans L",sans-serif;font-size:13px}.settingsContainer{position:relative;width:100%;height:100%}form fieldset{max-width:600px;border:1px solid #bbb;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;margin-bottom:20px;padding:8px}form fieldset fieldset{max-width:580px;margin:15px 0 5px;clear:left;float:left}form fieldset legend{margin-left:10px;font-weight:700}form label{min-width:150px;display:block;float:left;margin:1px 0 0;clear:left}form div{float:left}form input[type=text],form input[type=number],form input[type=password]{border:1px solid #90c0ff;margin-right:5px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}form input[type=text].small,form input[type=number].small,form input[type=password].small{width:50px}form input[type=text].large,form input[type=number].large,form input[type=password].large{width:250px}form input[type=radio]{margin:4px 4px 0 0}form textarea{border:1px solid #90c0ff;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}form .startgcode_left{float:left;margin-right:20px}form textarea.gcode{width:252px;height:150px}form small{margin:3px 0 0;display:block;clear:left}form .button{display:inline-block}form #passwordLabel,form #password{display:none}form input.error,form textarea.error,form select.error{border:red solid 2px}form .errorMsg{color:red;margin:0 0 0 1em}

www/css/styles.css

@@ -3,32 +3,32 @@
   GLOBAL CONTAINER
 
 */
+
 body {
   background-color: #fcfcfc;
-
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
-	user-select: none; /* disable cut copy paste */
+  user-select: none;
   /* disable cut copy paste */
-overflow: hidden; /* This chops off any overhanging divs */
+  overflow: hidden;
+  /* This chops off any overhanging divs */
 }
 
 img {
-	z-index: 5; /*pointer-events: none;
+  z-index: 5;
-	*/
+  /*pointer-events:none;*/
-/*-webkit-touch-callout:  none;
+  /*-webkit-touch-callout: none;               */
-	               */
   /*disable callout, image save panel */
-/*-webkit-tap-highlight-color:  transparent;
+  /*-webkit-tap-highlight-color: transparent; */
-	 */
   /* "turn off" link highlight */
 }
 
 /*  http://stackoverflow.com/questions/5348092/prevent-default-press-but-not-default-drag-in-ios-mobilesafari  */
+
 .btn {
-	background-repeat: no-repeat; /*	-webkit-user-select:  none;
+  background-repeat: no-repeat;
-	*/
+  /*	-webkit-user-select: none;*/
   cursor: pointer;
 }
 
@@ -46,7 +46,6 @@ cursor: pointer;
   overflow: hidden;
   margin: 0px auto;
   outline: 2px solid #5e8c71;
-
   -webkit-box-shadow: 0 0 8px rgba(8, 8, 8, 0.25);
   box-shadow: 0 0 8px rgba(8, 8, 8, 0.25);
 }
@@ -62,15 +61,11 @@ cursor: pointer;
   overflow: hidden;
 }
 
-.bgTop,.bgMiddle,.bgBottom {
+.bgTop,
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+.bgMiddle,
-	filter: alpha(opacity=100);
+.bgBottom {
   opacity: 1.0;
-
   -webkit-transition: opacity .35s linear;
-	-moz-transition: opacity .35s linear;
-	-o-transition: opacity .35s linear;
-	-ms-transition: opacity .35s linear;
   transition: opacity .35s linear;
   position: absolute;
   left: 0px;
@@ -94,6 +89,7 @@ cursor: pointer;
   CENTER PANEL
 
 */
+
 .centerpanel {
   position: absolute;
   left: 50%;
@@ -149,10 +145,8 @@ CENTER PANEL
   background-color: #fff;
   border: 4px solid #000;
   border-radius: 15px;
-
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
-	-ms-box-sizing: border-box;
   box-sizing: border-box;
   z-index: 15;
 }
@@ -202,6 +196,7 @@ CENTER PANEL
 }
 
 /* DEBUG THING */
+
 #preview_tmp {
   position: absolute;
   top: 0px;
@@ -221,6 +216,7 @@ CENTER PANEL
 /*
   DOODLE UP/DOWN/LEFT/RIGHT buttons
 */
+
 .manipulationBtns {
   margin: 2px 5px;
   position: absolute;
@@ -278,6 +274,7 @@ DOODLE UP/DOWN/LEFT/RIGHT buttons
 /*
 	HEIGHT-related RESPONSIVE STUFF
 */
+
 @media screen and (max-height: 700px) {
   .logopanel {
     height: 22%;
@@ -293,16 +290,12 @@ HEIGHT-related RESPONSIVE STUFF
     height: 74px;
     background-image: url('../img/logo/logo_small.png');
   }
-
 }
 
 @media screen and (max-height: 655px) {
   .bgMiddle {
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-	filter: alpha(opacity=0);
     opacity: 0;
   }
-
 }
 
 @media screen and (max-height: 525px) {
@@ -312,7 +305,6 @@ HEIGHT-related RESPONSIVE STUFF
     max-width: 307px;
     background-image: url('../img/logo/logo_smaller.png');
   }
-
 }
 
 @media screen and (max-height: 375px) {
@@ -321,7 +313,6 @@ HEIGHT-related RESPONSIVE STUFF
     max-width: 216px;
     background-image: url('../img/logo/logo_smallest.png');
   }
-
 }
 
 /*
@@ -329,10 +320,11 @@ HEIGHT-related RESPONSIVE STUFF
   LEFT PANEL
 
 */
+
 .leftpanel {
   position: absolute;
-	width: 17%; /*  background-color:  rgba(67, 204, 67, 0.4);
+  width: 17%;
-	*/
+  /*  background-color: rgba(67, 204, 67, 0.4);*/
   top: 0px;
   left: 0px;
   bottom: 0px;
@@ -382,10 +374,11 @@ top: 0px;
   RIGHT PANEL
 
 */
+
 .rightpanel {
   position: absolute;
-	width: 17%; /*  background-color:  rgba(255, 0, 254, 0.4);
+  width: 17%;
-	*/
+  /*  background-color: rgba(255, 0, 254, 0.4);*/
   top: 0;
   right: 0;
   bottom: 0;
@@ -434,15 +427,14 @@ top: 0;
   PROGRESSGUAGE AND THERMOMETER SHARED STYLES
 
 */
+
 .progressbarAppear {
-	/*margin-right:  1.5% !important;
+  /*margin-right: 1.5% !important;*/
-	*/
   right: -0.5% !important;
 }
 
 .thermometerAppear {
-	/*margin-right:  1.5% !important;
+  /*margin-right: 1.5% !important;*/
-	*/
   right: -6.5% !important;
 }
 
@@ -451,6 +443,7 @@ right: -6.5% !important;
   PROGRESS GUAGE
 
 */
+
 .progressbarCanvasContainerParent {
   position: relative;
   width: 100%;
@@ -462,18 +455,13 @@ PROGRESS GUAGE
   float: right;
   border: solid #000;
   border-width: 2px 0 2px 2px;
-	border-radius: 15px 0 0 15px; /*padding:  5px 0px 5px 5px;
+  border-radius: 15px 0 0 15px;
-	*/
+  /*padding: 5px 0px 5px 5px;*/
   padding: 5px;
   background-color: #fff;
-
   -webkit-box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
   box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
-
   -webkit-transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-	-moz-transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-	-o-transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-	-ms-transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
   transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
   right: -60%;
   margin-top: 5%;
@@ -494,6 +482,7 @@ padding: 5px;
   THERMOMETER
 
 */
+
 .thermometerContainerParent {
   position: relative;
   width: 100%;
@@ -509,14 +498,9 @@ THERMOMETER
   border-width: 2px 0 2px 2px;
   border-radius: 15px 0 0 15px;
   padding: 5px;
-
   -webkit-box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
   box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
-
   -webkit-transition: right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-	-moz-transition: right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-	-o-transition: right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-	-ms-transition: right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
   transition: right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
   right: -55%;
 }
@@ -534,9 +518,8 @@ THERMOMETER
 /*
   under all the above styles w.r.t. the cascading effect
 */
+
 .disabled {
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
-	filter: alpha(opacity=30);
   opacity: 0.3;
   cursor: default;
 }
@@ -550,11 +533,17 @@ under all the above styles w.r.t. the cascading effect
   REST
 
 */
+
 /* CLEARFIX */
+
 /* http://nicolasgallagher.com/micro-clearfix-hack/ */
-.clearfix:before,.clearfix:after {
+
-	content: " "; /* 1 */
+.clearfix:before,
-display: table; /* 2 */
+.clearfix:after {
+  content: " ";
+  /* 1 */
+  display: table;
+  /* 2 */
 }
 
 .clearfix:after {
@@ -562,6 +551,7 @@ display: table; /* 2 */
 }
 
 /* For IE 6/7 only*/
+
 .clearfix {
   *zoom: 1;
 }
@@ -571,6 +561,7 @@ display: table; /* 2 */
   SETTINGS POPUP
 
 */
+
 #contentOverlay {
   background-color: rgba(255, 255, 255, 0.65);
   z-index: 20;
@@ -597,7 +588,6 @@ SETTINGS POPUP
   width: 80%;
   height: 75%;
   margin: 7% 8%;
-
   -webkit-box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
   box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
   border: 2px solid #222;
@@ -631,9 +621,8 @@ SETTINGS POPUP
   width: 83%;
   height: 98%;
   margin: .5%;
-
-	-ms-overflow-y: scroll;
   overflow-y: scroll;
+  overflow-x: hidden;
   border: 1px solid #bbbbbb;
   border-radius: 5px;
 }
@@ -667,7 +656,6 @@ SETTINGS POPUP
   border: 2px solid #333;
   border-width: 0 0 2px 2px;
   font-weight: bold;
-
   -webkit-box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
   box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
   color: #333;
@@ -696,11 +684,12 @@ SETTINGS POPUP
   /*
     TOP LOGO
   */
+
   .centerpanel {
     left: 0;
     margin-left: 0;
-	width: 100%; /*  background-color:  rgba(0, 135, 255, 0.4);
+    width: 100%;
-	*/
+    /*  background-color: rgba(0, 135, 255, 0.4);*/
   }
 
   .logopanel {
@@ -715,8 +704,7 @@ SETTINGS POPUP
   }
 
   .drawareacontainer {
-	/*	position:  absolute;
+    /*	position: absolute;*/
-	*/
     height: 70%;
   }
 
@@ -733,15 +721,12 @@ height: 70%;
   /*
     LEFT
   */
+
   .leftpanel {
     width: 100px;
     background-color: #fff;
     z-index: 50;
-
     -webkit-transition: left 0.3s ease-out;
-	-moz-transition: left 0.3s ease-out;
-	-o-transition: left 0.3s ease-out;
-	-ms-transition: left 0.3s ease-out;
     transition: left 0.3s ease-out;
   }
 
@@ -772,15 +757,12 @@ height: 70%;
   /*
     RIGHT
   */
+
   .rightpanel {
     width: 100px;
     background-color: #fff;
     z-index: 50;
-
     -webkit-transition: right 0.3s ease-out;
-	-moz-transition: right 0.3s ease-out;
-	-o-transition: right 0.3s ease-out;
-	-ms-transition: right 0.3s ease-out;
     transition: right 0.3s ease-out;
   }
 
@@ -806,14 +788,14 @@ height: 70%;
   /*
     REST
   */
+
   .sidebutton {
     display: block;
-	position: absolute; /*  top:  50%;
+    position: absolute;
-	*/
+    /*  top: 50%;*/
-/*  margin-top:  -20px;
+    /*  margin-top: -20px;*/
-	*/
+    top: 40px;
-top: 40px; /*float: right;
+    /*float:right;*/
-	*/
     width: 25px;
     height: 38px;
     border: 1px solid #808;
@@ -855,6 +837,7 @@ width: 25px;
     SETTINGS POPUP - MOBILE
   
   */
+
   #contentOverlay {
     z-index: 200;
   }
@@ -868,6 +851,9 @@ width: 25px;
   #contentOverlay #settings > .right {
     width: 14%;
   }
+}
+
+@media only screen and (min-width: 1000px) and (max-device-pixel-ratio: 1.5), only screen and (min-width: 1000px) and (-webkit-max-device-pixel-ratio: 1.5) {
 
 }
 
@@ -882,11 +868,11 @@ width: 25px;
 
   .vertImage {
     margin: 0px;
-	padding: 0px; /*border:  2px solid #f0f;
+    padding: 0px;
-	*/
+    /*border: 2px solid #f0f;*/
     max-width: 100%;
     height: auto;
-	width: auto; /* for ie9 */
+    width: auto;
+    /* for ie9 */
   }
-
 }