henk
-
-
+
+
+ 
+
diff --git a/img/arrows.png b/img/arrows.png
new file mode 100644
index 0000000..5698a21
Binary files /dev/null and b/img/arrows.png differ
diff --git a/img/logo_full.png b/img/logo/logo_full.png
similarity index 100%
rename from img/logo_full.png
rename to img/logo/logo_full.png
diff --git a/img/logo_small.png b/img/logo/logo_small.png
similarity index 100%
rename from img/logo_small.png
rename to img/logo/logo_small.png
diff --git a/img/logo_smaller_wide.png b/img/logo/logo_smaller_wide.png
similarity index 100%
rename from img/logo_smaller_wide.png
rename to img/logo/logo_smaller_wide.png
diff --git a/img/logo/logo_smallest_wide.png b/img/logo/logo_smallest_wide.png
new file mode 100644
index 0000000..c3f2fa1
Binary files /dev/null and b/img/logo/logo_smallest_wide.png differ
diff --git a/img/logo_full_8bit.png b/img/logo_full_8bit.png
deleted file mode 100644
index adba35c..0000000
Binary files a/img/logo_full_8bit.png and /dev/null differ
diff --git a/img/logo_small_8bit.png b/img/logo_small_8bit.png
deleted file mode 100644
index a2c0189..0000000
Binary files a/img/logo_small_8bit.png and /dev/null differ
diff --git a/img/logo_smaller.png b/img/logo_smaller.png
deleted file mode 100644
index f000e5c..0000000
Binary files a/img/logo_smaller.png and /dev/null differ
diff --git a/img/logo_smaller_8bit.png b/img/logo_smaller_8bit.png
deleted file mode 100644
index bd85479..0000000
Binary files a/img/logo_smaller_8bit.png and /dev/null differ
diff --git a/img/logo_smaller_wide_8bit.png b/img/logo_smaller_wide_8bit.png
deleted file mode 100644
index ef193ab..0000000
Binary files a/img/logo_smaller_wide_8bit.png and /dev/null differ
diff --git a/index.html b/index.html
index b4bb100..4804f84 100755
--- a/index.html
+++ b/index.html
@@ -6,39 +6,42 @@
-
-
-
+
+
-
-
-
-
+
+
+
-
+
-
diff --git a/img/arrows.png b/img/arrows.png
new file mode 100644
index 0000000..5698a21
Binary files /dev/null and b/img/arrows.png differ
diff --git a/img/logo_full.png b/img/logo/logo_full.png
similarity index 100%
rename from img/logo_full.png
rename to img/logo/logo_full.png
diff --git a/img/logo_small.png b/img/logo/logo_small.png
similarity index 100%
rename from img/logo_small.png
rename to img/logo/logo_small.png
diff --git a/img/logo_smaller_wide.png b/img/logo/logo_smaller_wide.png
similarity index 100%
rename from img/logo_smaller_wide.png
rename to img/logo/logo_smaller_wide.png
diff --git a/img/logo/logo_smallest_wide.png b/img/logo/logo_smallest_wide.png
new file mode 100644
index 0000000..c3f2fa1
Binary files /dev/null and b/img/logo/logo_smallest_wide.png differ
diff --git a/img/logo_full_8bit.png b/img/logo_full_8bit.png
deleted file mode 100644
index adba35c..0000000
Binary files a/img/logo_full_8bit.png and /dev/null differ
diff --git a/img/logo_small_8bit.png b/img/logo_small_8bit.png
deleted file mode 100644
index a2c0189..0000000
Binary files a/img/logo_small_8bit.png and /dev/null differ
diff --git a/img/logo_smaller.png b/img/logo_smaller.png
deleted file mode 100644
index f000e5c..0000000
Binary files a/img/logo_smaller.png and /dev/null differ
diff --git a/img/logo_smaller_8bit.png b/img/logo_smaller_8bit.png
deleted file mode 100644
index bd85479..0000000
Binary files a/img/logo_smaller_8bit.png and /dev/null differ
diff --git a/img/logo_smaller_wide_8bit.png b/img/logo_smaller_wide_8bit.png
deleted file mode 100644
index ef193ab..0000000
Binary files a/img/logo_smaller_wide_8bit.png and /dev/null differ
diff --git a/index.html b/index.html
index b4bb100..4804f84 100755
--- a/index.html
+++ b/index.html
@@ -6,39 +6,42 @@
-
-
-
+
+
-
-
-
-
+
+
+
-
+
-
-
-
-
-
-
-
+
+
+
+
+
+
-
-
-
-
- 
- 
- 
-
- 
- 
- 
- 
+
+
+
+
-
-
-
-
-
-
-
+
+
+ 
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
- - - - -
+
- - - - -
-
-
-
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
-
-
+
+
-
+
+
+
+
-
-
-
-
+
+
+
+ 
+ 
+
+
+
+
+ 
+ 
+
+
+
+
-
+
-
-
- 
-
+
-
+
"); - $(".agentInfo").append("ratio: " + ratio + "
"); - $(".agentInfo").append("
"); - } else { - // portrait -// $('#Viewport').attr('content', 'initial-scale='+1+',maximum-scale='+1+',minimum-scale='+1+',user-scalable=no'); - $('#Viewport').attr('content', 'width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no'); - } - - } else { - // console.log("else"); - $(".colmask").css("background-color", "#f80"); - - } - - $(".agentInfo").append("$(window).width(): " + $(window).width() + "
"); - $(".agentInfo").append("window.screen.width: " + window.screen.width+ "
"); - $(".agentInfo").append("window.screen.availWidth: " + window.screen.availWidth+ "
"); - $(".agentInfo").append("
"); - $(".agentInfo").append("window.innerWidth: " + window.innerWidth + "
"); - $(".agentInfo").append("window.innerHeight: " + window.innerHeight + "
"); - $(".agentInfo").append("
"); - $(".agentInfo").append("$(window).height(): " + $(window).height() + "
"); - $(".agentInfo").append("window.screen.height: " + window.screen.height+ "
"); - $(".agentInfo").append("window.screen.availHeight: " + window.screen.availHeight+ "
"); - $(".agentInfo").append("
"); - $(".agentInfo").append("user agent: " + navigator.userAgent + "
"); -}; - -function doOnOrientationChange() { - console.log("doOnOrientationChange"); - doClientAndOrientationStuff(); - - // switch(window.orientation) { - // case -90: - // case 90: - // alert('landscape'); - // break; - // default: - // alert('portrait'); - // break; - // } -} - +// 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); - doClientAndOrientationStuff() // <-- is this necessary in this method? + /* 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) { @@ -139,53 +84,38 @@ function initLayouting() { - $("#drawAreaContainer").attr("width", parseInt($("#drawAreaContainer").css("width"), 10)); - $("#drawAreaContainer").attr("height", parseInt($("#drawAreaContainer").css("height"), 10)); - canvas.width = parseInt($canvas.css("width"), 10); - canvas.height = parseInt($canvas.css("height"), 10); - preview.width = parseInt($preview.css("width"), 10); - preview.height = parseInt($preview.css("height"), 10); + +// $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; -// console.log("f:initLayouting() >> canvas height: " + canvas.height); - - - - // imgDims[0] = parseInt($(".container").css("width").match(/[0-9]+/).join("")); - // imgDims[1] = parseInt($(".container").css("height").match(/[0-9]+/).join("")); - - imgDims = [1024, 768]; - /* - if( /Android|webOS|BlackBerry/i.test(navigator.userAgent) ) { - imgDims[1] = parseInt($(".container").css("height").match(/[0-9]+/).join("")); - } else if ( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) { - imgDims[1] = parseInt($(".container").css("width").match(/[0-9]+/).join("")); - } else { - imgDims[1] = parseInt($(".container").css("height").match(/[0-9]+/).join("")); - } - //*/ - - // $(".container").css("height", window.innerHeight); - - // Initial execution if needed - //* 2013-07-26 not doing this resizing stuff now, it's not working well yet - if (!window.addEventListener) { - window.attachEvent('orientationchange', doOnOrientationChange); - window.attachEvent('resize', doOnResize) - } else { - window.addEventListener('orientationchange', doOnOrientationChange); - window.addEventListener('resize', doOnResize) - } - //*/ - doClientAndOrientationStuff(); - doOnResize(); - // doOnOrientationChange(); + $drawAreaContainer.show(); // window.innerHeight console.log("window.innerHeight: " + window.innerHeight); - console.log("$('#drawAreaContainer').innerHeight(): " + $("#drawAreaContainer").innerHeight()); - console.log("$('#drawAreaContainer').offset().top: " + $("#drawAreaContainer").offset().top); + 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 @@ -194,4 +124,17 @@ function initLayouting() { } //*/ + // 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(); } diff --git a/js/main.js b/js/main.js index 76eefe3..be66d4c 100644 --- a/js/main.js +++ b/js/main.js @@ -11,9 +11,14 @@ var settingsWindow = new SettingsWindow(); var firstTimeSettingsLoaded = true; +var $drawAreaContainer, $doodleCanvas, doodleCanvas, doodleCanvasContext, $previewContainer; + $(function() { console.log("ready"); + + //TODO give this a more logical place in code + if (getURLParameter("d") != "null") debugMode = (getURLParameter("d") == "1"); if (getURLParameter("p") != "null") sendPrintCommands = (getURLParameter("p") == "1"); if (getURLParameter("c") != "null") communicateWithWifibox = (getURLParameter("c") == "1"); @@ -35,9 +40,10 @@ $(function() { console.log("wifiboxIsRemote: " + wifiboxIsRemote); console.log("wifibox URL: " + wifiboxURL); - initLayouting(); initDoodleDrawing(); initPreviewRendering(); + initLayouting(); + initSidebars(); initButtonBehavior(); initVerticalShapes(); @@ -47,7 +53,7 @@ $(function() { $(document).on(Printer.UPDATE,update); settingsWindow.init(wifiboxURL); - $(document).on(SettingsWindow.SETTINGS_LOADED,settingsLoaded); + $(document).on(SettingsWindow.SETTINGS_LOADED, settingsLoaded); if(debugMode) { console.log("debug mode is true"); @@ -57,6 +63,8 @@ $(function() { $("#debug_display").css("display", "block"); +// $("#debugContainer").css("display", "block"); + /* TEMP CODE!! -> artificially populates the startgcode and endgcode textareas in the settings window */ // todo remove this temporary code... /* diff --git a/js/previewRendering_v02.js b/js/previewRendering_v02.js index 957e7b1..7cf064f 100644 --- a/js/previewRendering_v02.js +++ b/js/previewRendering_v02.js @@ -3,11 +3,6 @@ var $preview; var preview; var previewCtx; -$preview = $("#preview"); - -preview = document.getElementById('preview'); -previewCtx = preview.getContext('2d'); - var preview_tmp; var previewCtx_tmp; @@ -25,6 +20,10 @@ var redrawInterval = 1000 / 30; // ms function initPreviewRendering() { console.log("f:initPreviewRendering()"); + $preview = $("#preview"); + preview = $preview[0]; + previewCtx = preview.getContext('2d'); + // DEBUG --> mbt preview_tmp (voor de toImageData truc) var _ratio = preview.width / canvas.width; preview_tmp = document.getElementById('preview_tmp'); @@ -34,12 +33,19 @@ function initPreviewRendering() { previewCtx_tmp = preview_tmp.getContext('2d'); + calcPreviewCanvasProperties(); + redrawPreview(); +} + +function calcPreviewCanvasProperties() { + console.log("f:calcPreviewCanvasProperties()"); + + globalScale = preview.width / canvasWidth; layerCX = (canvasWidth / 2) * globalScale; // defined in canvasDrawing_v01.js layerCY = (canvasHeight / 2) * globalScale; // defined in canvasDrawing_v01.js - layerOffsetY = preview.height - 1.75 * layerCY; - yStep = preview.height / 150; - - redrawPreview(); +// layerOffsetY = preview.height - 1.75 * layerCY; + layerOffsetY = preview.height * (1 - previewVerticalPadding.bottom); + yStep = (preview.height - (preview.height * (previewVerticalPadding.top + previewVerticalPadding.bottom))) / maxNumLayers; } // TODO (perhaps) : make the twist limit dynamic, depending on what's printable (w.r.t. overlapping) @@ -52,6 +58,7 @@ var globalScale = 0.3; // global scale of preview (width preview / width canvas var globalAlpha = 0.20; // global alpha of preview var scaleY = 0.4; // additional vertical scale per path for 3d effect var viewerScale = 0.65; // additional scale to fit into preview nicely (otherwise is fills out totally) +var previewVerticalPadding = { "top" : .15, "bottom" : 0.12 }; // % var strokeWidth = 2; //4; //var rStep = Math.PI/40; //Math.PI/40; // var rStep = previewDefaults.rotation; // Math.PI/180; //Math.PI/40; // @@ -119,7 +126,8 @@ function redrawPreview(redrawLess) { previewCtx.save(); - previewCtx.translate(layerCX, layerOffsetY + layerCY + y); +// previewCtx.translate(layerCX, layerOffsetY + layerCY + y); + previewCtx.translate(layerCX, layerOffsetY + y); // previewCtx.setTransform(1, 0, 0, scaleY, layerCX, layerOffsetY+layerCY+y); previewCtx.scale(viewerScale * verticalScaleFactor, scaleY * viewerScale * verticalScaleFactor); previewCtx.rotate(r); @@ -196,7 +204,7 @@ function renderToImageDataPreview() { previewCtx.save(); - previewCtx.translate(layerCX,layerOffsetY+layerCY+y); + previewCtx.translate(layerCX,layerOffsetY+y); // previewCtx.scale(1, scaleY) previewCtx.scale(verticalScaleFactor, scaleY * verticalScaleFactor) previewCtx.rotate(r); @@ -244,7 +252,7 @@ function redrawRenderedPreview(redrawLess) { } previewCtx.save(); - previewCtx.translate(layerCX,layerOffsetY+layerCY+y); + previewCtx.translate(layerCX,layerOffsetY+y); // previewCtx.scale(1, scaleY) previewCtx.scale(verticalScaleFactor, scaleY * verticalScaleFactor); previewCtx.rotate(r); @@ -309,7 +317,8 @@ function updatePreview(_x, _y, redrawLess) { previewCtx.save(); - previewCtx.translate(layerCX, layerOffsetY + layerCY + y); +// previewCtx.translate(layerCX, layerOffsetY + layerCY + y); + previewCtx.translate(layerCX, layerOffsetY + y); previewCtx.scale(viewerScale, scaleY * viewerScale); previewCtx.rotate(r); previewCtx.translate((-doodleTransform[0]) * (globalScale * doodleTransform[2]), (-doodleTransform[1]) * (globalScale * doodleTransform[3])); diff --git a/js/sidebar.js b/js/sidebar.js new file mode 100644 index 0000000..aeefeed --- /dev/null +++ b/js/sidebar.js @@ -0,0 +1,62 @@ +var sidebarLeft; +var sidebarRight; + +function initSidebars() { + console.log("f:initSidebars()"); + + sidebarLeft = new SideBar(); + sidebarLeft.init(".leftpanel", "hideleft", function() { + $(".leftpanel").show(); + }); + + sidebarRight = new SideBar(); + sidebarRight.init(".rightpanel", "hideright", function() { + $(".rightpanel").show(); + }); +} + +function SideBar() { + this.initted = false; + this.$contentTarg = undefined; + this.$sideBtn = undefined; + this.contentHidden = false; + this.hideClass = ""; + + this.init = function(targ, hideClass, callback) { + console.log("SideBar >> f:init >> targ: " , $(targ) , ", hideClass: " + hideClass); + this.$contentTarg = $(targ); + this.hideClass = hideClass; + + this.$contentTarg.addClass(this.hideClass); + this.contentHidden = true; + + this.$contentTarg.append(""); + this.$sideBtn = $(targ +" .sidebutton"); + var self = this; + + this.$sideBtn.on('click', function(e) { + console.log("sidebutton"); + self.toggleShowHide(); + }); + + this.initted = true; + + callback(); + } + + this.toggleShowHide = function() { + if (this.contentHidden) { + this.contentHidden = false; + this.$contentTarg.removeClass(this.hideClass); + // self.$sideBtn.addClass("sidebuttonin"); + this.$sideBtn.addClass("sidebuttonin"); + } else { + this.contentHidden = true; + this.$contentTarg.addClass(this.hideClass); + // self.$sideBtn.removeClass("sidebuttonin"); + this.$sideBtn.removeClass("sidebuttonin"); + + } + } +} + diff --git a/less/base.less b/less/base.less new file mode 100644 index 0000000..70c6abf --- /dev/null +++ b/less/base.less @@ -0,0 +1,115 @@ +/* + + GLOBAL CONTAINER + +*/ +body { + background-color: #fcfcfc; + -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 { + z-index: 5; + /*pointer-events:none;*/ + /*-webkit-touch-callout: none; *//*disable callout, image save panel */ + /*-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;*/ + cursor: pointer +} +#landscape { + position:absolute; + background-color: #fff; + width: 100%; + max-width: 1024px; + max-height: 768px; + top: 0px; + bottom: 0px; + left: 0px; + right: 0px; + z-index: 5; + overflow: hidden; + margin: 0px auto; + outline: 2px solid #5e8c71; + box-shadow: 0 0 8px rgba(8, 8, 8, 0.25); +} +#portrait { + display: none; +} +.bgContainer { + position: absolute; + width: 100%; + height: 100%; + overflow: hidden; +} +.bgTop, .bgMiddle, .bgBottom { + opacity: 1.0; + transition: opacity .35s linear; + position: absolute; + left: 0px; + z-index: -5; +} +.bgTop { + top: 0px; +} +.bgMiddle { + top: 30%; +} +.bgBottom { + bottom: 0px; +} +.rightpanel, .leftpanel { + img { + cursor: pointer; + } +} + +/* + + CENTER PANEL + +*/ +@import "base_centerpanel.less"; + +/* + + LEFT PANEL + +*/ +@import "base_leftpanel.less"; + +/* + + RIGHT PANEL + +*/ +@import "base_rightpanel.less"; + + + + +/* + + REST + +*/ +/* CLEARFIX */ +/* http://nicolasgallagher.com/micro-clearfix-hack/ */ +.clearfix:before, +.clearfix:after { + content: " "; /* 1 */ + display: table; /* 2 */ +} +.clearfix:after { + clear: both; +} + +/* For IE 6/7 only*/ +.clearfix { + *zoom: 1; +} + diff --git a/less/base_centerpanel.less b/less/base_centerpanel.less new file mode 100644 index 0000000..10cac8b --- /dev/null +++ b/less/base_centerpanel.less @@ -0,0 +1,54 @@ +// CENTER PANEL +.centerpanel { + position: absolute; + left: 50%; + margin-left: -33%; + width: 66%; + height: 100%; + z-index: 5; +} + + +// top panel +@import "base_centerpanel_logo.less"; + +// draw area stuff (plus up/down/left/right buttons) +@import "base_centerpanel_drawarea.less"; + + +/* + HEIGHT-related RESPONSIVE STUFF +*/ +@media screen and (max-height: 700px) { + .logopanel { + height: 22%; + } + .doodlecontainer { + height: 68%; + } + .d3dlogo { + top: 25%; + max-width: 399px; + height: 74px; + background-image: url('../img/logo/logo_small.png'); + } +} +@media screen and (max-height: 655px) { + .bgMiddle { opacity: 0; } +} + +@media screen and (max-height: 525px) { + .d3dlogo { + max-width: 399px; + top: 20%; + height: 57px; + background-image: url('../img/logo/logo_smaller_wide.png'); + } +} +@media screen and (max-height: 375px) { + .d3dlogo { + max-width: 399px; + height: 40px; + background-image: url('../img/logo/logo_smallest_wide.png'); + } +} \ No newline at end of file diff --git a/less/base_centerpanel_drawarea.less b/less/base_centerpanel_drawarea.less new file mode 100644 index 0000000..a5b3e90 --- /dev/null +++ b/less/base_centerpanel_drawarea.less @@ -0,0 +1,128 @@ +// import vertical shapes additions +@import "verticalshapes.less"; + +// DRAW AREA +.drawareacontainer { + position: relative; + width: 100%; + height: 65%; + background-color: #fff; + border: 4px solid #000; + border-radius: 15px; + box-sizing: border-box; + z-index: 15px; +} + +#canvasContainers { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; +} + +#mycanvasContainer { + position: absolute; + top: 0; + left: 0; + width: 78%; + height: 100%; +} +#mycanvas { + width: 100%; + height: 100%; + margin: 0; + padding: 0; + border-right: 2px solid #333; +} + +#previewContainer { + position: absolute; + top: 0; + right: 0; + width: 22%; +// max-width: 150px; + height: 100%; +} +#preview { + min-width: 50px; + width: 100%; + height: 100%; + margin: 0; + padding: 0; +} + +/* DEBUG THING */ +#preview_tmp { + position: absolute; + top: 0px; + left: 0px; + z-index: 500; + border: 1px solid #f80; + display: none; +} +.bottompanel { + position: relative; + bottom: 0px; + width: 100%; + height: 10%; +} + +/* + DOODLE UP/DOWN/LEFT/RIGHT buttons +*/ +.manipulationBtns { + margin: 2px 5px; + position: absolute; + right: 0; + top: 0; + max-width: 340px; + max-height: 70px; + width: 45%; +} + +.manipulationBtn { + width: 45%; + height: auto; + cursor: pointer; +} + +#btnsUpDown { + float: left; + width: 45%; +} +#btnsUpDown > div { + float: left; + padding-right: 8px; + background-repeat: no-repeat; +} + +#btnsTurnLeftRight { + float: right; + width: 45%; +} +#btnsTurnLeftRight >div { + float: left; + padding-right: 8px; + background-repeat: no-repeat; +} + +#btnMoveUp { + max-width: 65px; +} + +#btnMoveDown { + max-width: 64px; +} + +#btnTwistLeft { + max-width: 59px; +} + +#btnTwistRight { + max-width: 64px; +} \ No newline at end of file diff --git a/less/base_centerpanel_logo.less b/less/base_centerpanel_logo.less new file mode 100644 index 0000000..a84a3fd --- /dev/null +++ b/less/base_centerpanel_logo.less @@ -0,0 +1,15 @@ +.logopanel { + height: 25%; +} +.d3dlogo { + position: relative; + top: 15%; + width: 100%; + height: 100%; + margin: 0px auto; + max-width: 399px; + height: 139px; + background: url('../img/logo/logo_full.png') no-repeat center center; + cursor: pointer; +} + diff --git a/less/base_leftpanel.less b/less/base_leftpanel.less new file mode 100644 index 0000000..7b5e498 --- /dev/null +++ b/less/base_leftpanel.less @@ -0,0 +1,42 @@ +// LEFT PANEL +.leftpanel { + position: absolute; + width: 17%; +/* background-color: rgba(67, 204, 67, 0.4);*/ + top: 0px; + left: 0px; + bottom: 0px; +} +.btnNew { + margin: 5% 0% 1% 5%; + width: 100%; + max-width: 180px; + height: auto; +} +.btnsPrevNext { + margin: 1% 7%; + max-width: 160px; +} +.btnPrevious { + width: 40%; + max-width: 56px; + height: auto; +} +.btnNext { + width: 40%; + max-width: 56px; + height: auto; + float: right; +} +.btnSave { + margin: 5% 5% 1% 5%; + width: 90%; + max-width: 144px; + height: auto; +} +.btnOops { + margin: 5% 5% 1% 5%; + width: 90%; + max-width: 144px; + height: auto; +} diff --git a/less/base_rightpanel.less b/less/base_rightpanel.less new file mode 100644 index 0000000..5ec7f90 --- /dev/null +++ b/less/base_rightpanel.less @@ -0,0 +1,99 @@ +// RIGHT PANEL +.rightpanel { + position: absolute; + width: 17%; +/* background-color: rgba(255, 0, 254, 0.4);*/ + top: 0px; + right: 0px; + bottom: 0px; +} +.btnPrint { + margin: 1% 5% 5% 0%; + width: 100%; + max-width: 163px; + height: auto; + float: right; +} +.btnStop { + margin: 5% 10% 1% 5%; + float: right; + width: 90%; + max-width: 98px; + height: auto; +} +.btnsSettingsInfo { + position: absolute; + bottom: 25px; + right: 5px; + width: 80%; + margin: 1% 5%; + max-width: 160px; +} +.btnInfo { + width: 40%; + max-width: 53px; + height: auto; +} +.btnSettings { + width: 40%; + max-width: 53px; + height: auto; + float: right; +} + + +/* + + PRINT PROGRESS DISPLAY + +*/ +#printProgressContainer { + position: absolute; + right: 30px; + top: 370px; + width: 110px; + margin: 5px 0px; + font-weight: bold; + display:none; +} +#progressbarContainer { + margin: 3px 0px; + width: inherit; + height: 20px; + background-color: #fff; + border: 2px solid #333; + border-radius: 5px; + -o-border-radius: 5px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; +} +.progressAmount { + margin: 0px 5px; +} +#progressbar { + position: relative; +/*margin-bottom: -20px;*/ + width: 0%; + height: 100%; + background-color: #4c4; + border: 0px solid #f0f; + border-radius: 3px; + -o-border-radius: 3px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; +} + +/* + + THERMOMETER + +*/ +#thermometerContainer { + position: absolute; + right: 25px; + top: 370px; +} +#thermometerCanvas { +/*background: #59b2b8;*/ +/*zoom: 2;*/ +} \ No newline at end of file diff --git a/less/full.less b/less/full.less new file mode 100644 index 0000000..101f62f --- /dev/null +++ b/less/full.less @@ -0,0 +1 @@ +// FULL styles (not sure if going to use...) \ No newline at end of file diff --git a/less/mobile.less b/less/mobile.less new file mode 100644 index 0000000..9ede81f --- /dev/null +++ b/less/mobile.less @@ -0,0 +1,127 @@ +/* + TOP LOGO +*/ +.centerpanel { + left: 0; + margin-left: 0; + width: 100%; +/* background-color: rgba(0, 135, 255, 0.4);*/ +} +.logopanel { + height: 40px; +} +.d3dlogo { + top: 0; + max-width: 399px; + height: 40px; + background-image: url('../img/logo/logo_smallest_wide.png'); +} +.doodlecontainer { +/* position: absolute;*/ + height: 85%; +} +/*.bottompanel { + display: none; +}*/ + +/* + LEFT +*/ +.leftpanel { + width: 100px; + background-color: #fff; + z-index: 50; + transition: left .3s ease-out; +} +.hideleft { + left: -101px; +} +.shadowright { + box-shadow: 2px 0 4px rgba(42, 42, 41, 0.6); +} +.btnNew { + margin: 5% 5% 1% 5%; + width: 90%; +} +.btnSave { + margin-left: 9%; + width: 75%; +} +.btnOops { + margin-left: 6%; + width: 71%; +} + +/* + RIGHT +*/ +.rightpanel { + width: 100px; + background-color: #fff; + z-index: 50; + transition: right .3s ease-out; +} +.hideright { + right: -101px; +} +.shadowleft { + box-shadow: -2px 0 4px rgba(42, 42, 41, 0.6); +} +.btnPrint { + margin: 1% 5% 5% 5%; + width: 90%; +} +.btnStop { + margin: 5% 6% 1% 5%; + width: 70%; +} + + +/* + REST +*/ +.sidebutton { + display: block; + position:absolute; +/* top: 50%;*/ +/* margin-top: -20px;*/ + top: 0px; + /*float:right;*/ + width: 25px; + height: 38px; + border: 1px solid #808; + background: url('../img/arrows.png') no-repeat; + background-color: #eee; + cursor: pointer; + + &:active { + background-color: #aaa; + } + + .leftpanel & { + right: -27px; + background-position: 0px 0px; + } + + .rightpanel & { + left: -27px; + background-position: -25px 0px; + } +} + +.sidebuttonin { + + &:active { + background-color: #888; + } + + .leftpanel & { + background-color: #ccc; + background-position: -25px 0px; + } + + .rightpanel & { + background-color: #ccc; + background-position: -0px 0px; + } +} diff --git a/less/mobile_settingspopup.less b/less/mobile_settingspopup.less new file mode 100644 index 0000000..213cc06 --- /dev/null +++ b/less/mobile_settingspopup.less @@ -0,0 +1,18 @@ +/* + + SETTINGS POPUP - MOBILE + +*/ +#contentOverlay { + z-index: 200; + + #settings { + width: 87%; + height: 82%; + margin: 6% 4%; + + > .right { + width: 14%; + } + } +} \ No newline at end of file diff --git a/css/normalize.css b/less/normalize.css similarity index 92% rename from css/normalize.css rename to less/normalize.css index 823cc10..4617600 100644 --- a/css/normalize.css +++ b/less/normalize.css @@ -501,34 +501,4 @@ textarea { table { border-collapse: collapse; border-spacing: 0; -} - - -/* http://nicolasgallagher.com/micro-clearfix-hack/ */ -/** - * For modern browsers - * 1. The space content is one way to avoid an Opera bug when the - * contenteditable attribute is included anywhere else in the document. - * Otherwise it causes space to appear at the top and bottom of elements - * that are clearfixed. - * 2. The use of `table` rather than `block` is only necessary if using - * `:before` to contain the top-margins of child elements. - */ - -/** - * For IE 6/7 only - * Include this rule to trigger hasLayout and contain floats. - */ -.cf { - *zoom: 1; -} - -.cf:before, -.cf:after { - content: " "; /* 1 */ - display: table; /* 2 */ -} - -.cf:after { - clear: both; -} +} \ No newline at end of file diff --git a/less/normalize.less b/less/normalize.less new file mode 100644 index 0000000..4617600 --- /dev/null +++ b/less/normalize.less @@ -0,0 +1,504 @@ +/*! normalize.css v1.0.2 | MIT License | git.io/normalize */ + +/* ========================================================================== + HTML5 display definitions + ========================================================================== */ + +/* + * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +nav, +section, +summary { + display: block; +} + +/* + * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. + */ + +audio, +canvas, +video { + display: inline-block; + *display: inline; + *zoom: 1; +} + +/* + * Prevents modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/* + * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3, + * and Safari 4. + * Known issue: no IE 6 support. + */ + +[hidden] { + display: none; +} + +/* ========================================================================== + Base + ========================================================================== */ + +/* + * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using + * `em` units. + * 2. Prevents iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-size: 100%; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + -ms-text-size-adjust: 100%; /* 2 */ +} + +/* + * Addresses `font-family` inconsistency between `textarea` and other form + * elements. + */ + +html, +button, +input, +select, +textarea { + font-family: sans-serif; +} + +/* + * Addresses margins handled incorrectly in IE 6/7. + */ + +body { + margin: 0; +} + +/* ========================================================================== + Links + ========================================================================== */ + +/* + * Addresses `outline` inconsistency between Chrome and other browsers. + */ + +a:focus { + outline: thin dotted; +} + +/* + * Improves readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* ========================================================================== + Typography + ========================================================================== */ + +/* + * Addresses font sizes and margins set differently in IE 6/7. + * Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5, + * and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +h2 { + font-size: 1.5em; + margin: 0.83em 0; +} + +h3 { + font-size: 1.17em; + margin: 1em 0; +} + +h4 { + font-size: 1em; + margin: 1.33em 0; +} + +h5 { + font-size: 0.83em; + margin: 1.67em 0; +} + +h6 { + font-size: 0.67em; + margin: 2.33em 0; +} + +/* + * Addresses styling not present in IE 7/8/9, Safari 5, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/* + * Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +blockquote { + margin: 1em 40px; +} + +/* + * Addresses styling not present in Safari 5 and Chrome. + */ + +dfn { + font-style: italic; +} + +/* + * Addresses styling not present in IE 6/7/8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/* + * Addresses margins set differently in IE 6/7. + */ + +p, +pre { + margin: 1em 0; +} + +/* + * Corrects font family set oddly in IE 6, Safari 4/5, and Chrome. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, serif; + _font-family: 'courier new', monospace; + font-size: 1em; +} + +/* + * Improves readability of pre-formatted text in all browsers. + */ + +pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; +} + +/* + * Addresses CSS quotes not supported in IE 6/7. + */ + +q { + quotes: none; +} + +/* + * Addresses `quotes` property not supported in Safari 4. + */ + +q:before, +q:after { + content: ''; + content: none; +} + +/* + * Addresses inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/* + * Prevents `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* ========================================================================== + Lists + ========================================================================== */ + +/* + * Addresses margins set differently in IE 6/7. + */ + +dl, +menu, +ol, +ul { + margin: 1em 0; +} + +dd { + margin: 0 0 0 40px; +} + +/* + * Addresses paddings set differently in IE 6/7. + */ + +menu, +ol, +ul { + padding: 0 0 0 40px; +} + +/* + * Corrects list images handled incorrectly in IE 7. + */ + +nav ul, +nav ol { + list-style: none; + list-style-image: none; +} + +/* ========================================================================== + Embedded content + ========================================================================== */ + +/* + * 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3. + * 2. Improves image quality when scaled in IE 7. + */ + +img { + border: 0; /* 1 */ + -ms-interpolation-mode: bicubic; /* 2 */ +} + +/* + * Corrects overflow displayed oddly in IE 9. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* ========================================================================== + Figures + ========================================================================== */ + +/* + * Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11. + */ + +figure { + margin: 0; +} + +/* ========================================================================== + Forms + ========================================================================== */ + +/* + * Corrects margin displayed oddly in IE 6/7. + */ + +form { + margin: 0; +} + +/* + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/* + * 1. Corrects color not being inherited in IE 6/7/8/9. + * 2. Corrects text not wrapping in Firefox 3. + * 3. Corrects alignment displayed oddly in IE 6/7. + */ + +legend { + border: 0; /* 1 */ + padding: 0; + white-space: normal; /* 2 */ + *margin-left: -7px; /* 3 */ +} + +/* + * 1. Corrects font size not being inherited in all browsers. + * 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5, + * and Chrome. + * 3. Improves appearance and consistency in all browsers. + */ + +button, +input, +select, +textarea { + font-size: 100%; /* 1 */ + margin: 0; /* 2 */ + vertical-align: baseline; /* 3 */ + *vertical-align: middle; /* 3 */ +} + +/* + * Addresses Firefox 3+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +button, +input { + line-height: normal; +} + +/* + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Corrects inability to style clickable `input` types in iOS. + * 3. Improves usability and consistency of cursor style between image-type + * `input` and others. + * 4. Removes inner spacing in IE 7 without affecting normal text inputs. + * Known issue: inner spacing remains in IE 6. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ + *overflow: visible; /* 4 */ +} + +/* + * Re-set default cursor for disabled elements. + */ + +button[disabled], +input[disabled] { + cursor: default; +} + +/* + * 1. Addresses box sizing set to content-box in IE 8/9. + * 2. Removes excess padding in IE 8/9. + * 3. Removes excess padding in IE 7. + * Known issue: excess padding remains in IE 6. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + *height: 13px; /* 3 */ + *width: 13px; /* 3 */ +} + +/* + * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome. + * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/* + * Removes inner padding and search cancel button in Safari 5 and Chrome + * on OS X. + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* + * Removes inner padding and border in Firefox 3+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/* + * 1. Removes default vertical scrollbar in IE 6/7/8/9. + * 2. Improves readability and alignment in all browsers. + */ + +textarea { + overflow: auto; /* 1 */ + vertical-align: top; /* 2 */ +} + +/* ========================================================================== + Tables + ========================================================================== */ + +/* + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} \ No newline at end of file diff --git a/less/normalize.min.css b/less/normalize.min.css new file mode 100644 index 0000000..5fabfd2 --- /dev/null +++ b/less/normalize.min.css @@ -0,0 +1 @@ +/*! normalize.css v1.0.2 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.67em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}blockquote{margin:1em 40px}dfn{font-style:italic}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0} \ No newline at end of file diff --git a/less/normalize.min.less b/less/normalize.min.less new file mode 100644 index 0000000..5fabfd2 --- /dev/null +++ b/less/normalize.min.less @@ -0,0 +1 @@ +/*! normalize.css v1.0.2 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.67em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}blockquote{margin:1em 40px}dfn{font-style:italic}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0} \ No newline at end of file diff --git a/less/portrait.less b/less/portrait.less new file mode 100644 index 0000000..728c21b --- /dev/null +++ b/less/portrait.less @@ -0,0 +1,16 @@ +#landscape { + display: none; +} + +#portrait { + display: block; +} + +.vertImage { + margin: 0px; + padding: 0px; +/*border: 2px solid #f0f;*/ + max-width: 100%; + height: auto; + width: auto; /* for ie9 */ +} diff --git a/less/settingsPopup.less b/less/settingsPopup.less new file mode 100644 index 0000000..b4caf4f --- /dev/null +++ b/less/settingsPopup.less @@ -0,0 +1,85 @@ +/* + + SETTINGS POPUP + +*/ +#contentOverlay { + background-color: rgba(255, 255, 255, 0.65); + z-index: 20; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + display:none; + + #settings { + background-color: #fff; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 15; + max-width: 835px; + max-height: 540px; + width: 80%; + height: 75%; + margin: 7% 8%; + box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65); + border: 2px solid #222; + border-radius: 15px; + overflow: hidden; + display: table; + padding: 2%; + + .settingsLabelContainer { + width: 100%; + height: auto; + margin-bottom: 1%; + } + .settingsLabelImg { + width: 45%; + max-width: 373px; + height: auto; + } + + > .content { + margin: 3% 12%; + margin-top: 12%; + max-height: 388px; + display: table-row; + width: 100%; + + > .settings { + border: 1px solid rgb(187, 187, 187); + border-radius: 5px; + overflow: scroll; + overflow-x: hidden; + } + > .btnContainer { + width: 15%; + position:relative; + display: table-cell; + + > .btnOK { + position: absolute; + bottom: 3%; + right: 3%; + max-width: 85px; + min-width: 42px; + width: 91%; + height: auto; + margin: 0 2% 2% 0; + cursor: pointer; + float: right; + } + } + > div { + height: 100%; + } + } + } +} \ No newline at end of file diff --git a/less/styles.less b/less/styles.less new file mode 100644 index 0000000..ed4d2a5 --- /dev/null +++ b/less/styles.less @@ -0,0 +1,24 @@ +// IMPORTS +//@import "normalize.min.less"; +@import "base.less"; +@import "settingsPopup.less"; + + +// MOBILE +@media only screen and (max-width: 480px), + only screen and (max-width: 720px) and (min-device-pixel-ratio : 1.5), + only screen and (max-width: 720px) and (-webkit-min-device-pixel-ratio : 1.5) { + @import "mobile.less"; + @import "mobile_settingspopup.less"; +} + +// FULL +@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) { + @import "full.less"; +} + +// PORTRAIT +@media only screen and (orientation:portrait) { + @import "portrait.less"; +} diff --git a/less/verticalshapes.less b/less/verticalshapes.less new file mode 100644 index 0000000..90fd25b --- /dev/null +++ b/less/verticalshapes.less @@ -0,0 +1,21 @@ +#verticalShapes { + position:absolute; + right: -56px; + bottom: 15px; + + .verticalshape { + width: 50px; + height: 50px; + border: 2px solid #333; + border-radius: 0px 5px 5px 0px; + margin-top: 4px; + /*background-color: #f0f;*/ + cursor: pointer; + + &.straight { background: url('../img/vertical_shape_icons/straight.png') no-repeat; } + &.diverging { background: url('../img/vertical_shape_icons/diverging.png') no-repeat; } + &.converging { background: url('../img/vertical_shape_icons/converging.png') no-repeat; } + &.sinus { background: url('../img/vertical_shape_icons/sinus.png') no-repeat; } + } + +} \ No newline at end of file diff --git a/lesstocss.sh b/lesstocss.sh new file mode 100755 index 0000000..67ca0d9 --- /dev/null +++ b/lesstocss.sh @@ -0,0 +1,55 @@ +#!/bin/bash + +echo 'converting LESS to CSS...' +# generate CSS from LESS +lessc less/styles.less css/styles.css + +if [ -a css/styles.min.css ]; then + rm css/styles.min.css +fi + +if [ -n "$1" ]; then + if [ $1 = '--prefix' ] || [ $1 = '-p' ]; then + echo 'applying prefixr...' + + # prefixed (-s overwrites existing file) + prefixr --input ./css/styles.css -s + fi + if [ $1 = '--minify' ] || [ $1 = '-m' ]; then + + if [ ! -n "$2" ]; then + echo 'creating minified....' + lessc --yui-compress less/styles.less css/styles.min.css + else + echo 'creating minified and prefixed...' + + # copy to .min.css to create a minified version as well + cp css/styles.css css/styles.min.css + + # prefixed and minified (-s overwrites existing file) + prefixr --input ./css/styles.min.css -s -c + fi + + fi +fi + + + +if [ -n "$2" ]; then + if [ $2 = '--prefix' ] || [ $2 = '-p' ]; then + echo 'applying prefixr...' + + # prefixed (-s overwrites existing file) + prefixr --input ./css/styles.css -s + fi + if [ $2 = '--minify' ] || [ $2 = '-m' ]; then + echo 'creating minified and prefixed...' + + # copy to .min.css to create a minified version as well + cp css/styles.css css/styles.min.css + + # prefixed and minified (-s overwrites existing file) + prefixr --input ./css/styles.min.css -s -c + fi +fi + diff --git a/settings.html b/settings.html index 086d2eb..e78fe96 100755 --- a/settings.html +++ b/settings.html @@ -9,7 +9,7 @@ -
+
+
+
-
@@ -109,6 +128,7 @@
+
diff --git a/js/Thermometer.js b/js/Thermometer.js
index f47792d..2e79fa2 100644
--- a/js/Thermometer.js
+++ b/js/Thermometer.js
@@ -1,3 +1,8 @@
+// TODO assess if this var is still necessary
+var $displayThermometer = $("#thermometerContainer");
+
+
+//TODO 2013-09-18 allow displaying temperatures HIGHER than the targTemp (it's now being capped at targTemp).
function Thermometer() {
this.currentTemperature = 0; // default val
this.targetTemperature = 180; // default val
diff --git a/js/buttonbehaviors.js b/js/buttonbehaviors.js
index c20c24b..72935e4 100644
--- a/js/buttonbehaviors.js
+++ b/js/buttonbehaviors.js
@@ -11,49 +11,50 @@ var btnNew, btnPrevious, btnNext;
var btnOops, btnStop, btnClear;
var btnMoveUp, btnMoveDown, btnTwistLeft, btnTwistRight;
var btnInfo, btnSettings;
-var btnDebug; // debug
-var displayProgress;
+//var btnDebug; // debug
+var displayTemp, displayProgress;
var state;
var prevState;
function initButtonBehavior() {
- console.log("f:initButtonBehavior >> btnNew = " + btnNew);
+ console.log("f:initButtonBehavior");
- btnClear= $("#btnClear");
- btnOops = $("#btnOops");
+// btnClear= $(".btnClear");
+ btnOops = $(".btnOops");
btnMoveUp = $("#btnMoveUp");
btnMoveDown = $("#btnMoveDown");
btnTwistLeft = $("#btnTwistLeft");
btnTwistRight = $("#btnTwistRight");
- btnInfo = $("#btnInfo");
- btnSettings = $("#btnSettings");
- btnNew = $("#btnNew");
- btnPrint= $("#btnPrint");
- btnStop = $("#btnStop");
+ btnInfo = $(".btnInfo");
+ btnSettings = $(".btnSettings");
+ btnNew = $(".btnNew");
+ btnPrint= $(".btnPrint");
+ btnStop = $(".btnStop");
+ displayTemp = $("#thermometerContainer");
displayProgress = $("#printProgressContainer");
-// btnPrevious = $("#btnPrevious");
-// btnNext = $("#btnNext");
+ btnPrevious = $(".btnPrevious");
+ btnNext = $(".btnNext");
//debug
- btnDebug = $(".debugBtn");
+ //btnDebug = $(".debugBtn");
- btnNew.bind('touchstart mousedown',clearDoodle);
- btnPrint.bind('touchstart mousedown',print);
+ btnNew.on('touchstart mousedown', clearDoodle);
+ btnPrint.on('touchstart mousedown', print);
// not using these at the moment
$("#btnPrevious").css("opacity", "0.3");
- $("#btnNext").css("opacity", "0.3");
+ btnNext.css("opacity", "0.3");
$("#btnSave").css("opacity", "0.3");
- $("#btnInfo").css("opacity", "0.3");
+ btnInfo.css("opacity", "0.3");
- btnClear.click(function(e) {
- e.preventDefault();
- // console.log("clear");
-
- clearDoodle();
- });
+// btnClear.click(function(e) {
+// e.preventDefault();
+// // console.log("clear");
+//
+// clearDoodle();
+// });
function startOops(e) {
// console.log("btnOops mouse down");
@@ -174,14 +175,16 @@ function initButtonBehavior() {
});
// DEBUG
+ /*
// $(".agentInfo").css("display", "none");
btnDebug.click(function(e) {
console.log("debugClick");
$(".agentInfo").toggleClass("agentInfoToggle");
e.preventDefault();
})
+ //*/
- btnStop.bind('touchstart mousedown',stopPrint);
+ btnStop.on('touchstart mousedown',stopPrint);
}
function stopPrint() {
console.log("f:stopPrint() >> sendPrintCommands = " + sendPrintCommands);
diff --git a/js/canvasDrawing_v01.js b/js/canvasDrawing_v01.js
index 4c7f48d..2cabcf2 100644
--- a/js/canvasDrawing_v01.js
+++ b/js/canvasDrawing_v01.js
@@ -11,12 +11,8 @@ var svgPathParamsRegExp = /([LM])(\d*) (\d*)/;
var dragging = false;
-var $canvas = $("#mycanvas");
-var canvas = $("#mycanvas")[0];
-var ctx = canvas.getContext('2d');
-
-var canvasWidth = canvas.width;
-var canvasHeight = canvas.height;
+var $canvas, canvas, ctx;
+var canvasWidth, canvasHeight;
var drawCanvas;
var drawCanvasTopLeftCoords = [0, 0];
@@ -41,6 +37,16 @@ var lineweight = 2;
function initDoodleDrawing() {
console.log("f:initDoodleDrawing()");
+ $canvas = $("#mycanvas");
+ canvas = $canvas[0];
+ ctx = canvas.getContext('2d');
+
+ canvasWidth = canvas.width;
+ canvasHeight = canvas.height;
+
+
+ //*
+ //TODO make these jquery eventhandlers (works for all)
if (!canvas.addEventListener) {
canvas.attachEvent('onmousedown',onCanvasMouseDown);
canvas.attachEvent('onmousemove',onCanvasMouseMove);
@@ -56,14 +62,19 @@ function initDoodleDrawing() {
canvas.addEventListener('touchstart',onCanvasTouchDown,false);
canvas.addEventListener('touchmove',onCanvasTouchMove,false);
canvas.addEventListener('touchend',onCanvasTouchEnd,false);
- document.body.addEventListener('touchmove',prevent,false);
}
+ //*/
- drawCanvas = $("#drawAreaContainer");
+// drawCanvas = $(".drawareacontainer");
+ drawCanvas = $("#mycanvasContainer"); // $("#drawAreaContainer")
console.log("drawCanvasTopLeftCoords: " + drawCanvasTopLeftCoords);
- drawCanvasTopLeftCoords[0] = drawCanvas.css("left").match(/[0-9]/g).join("");
- drawCanvasTopLeftCoords[1] = drawCanvas.css("top").match(/[0-9]/g).join("");
+// drawCanvasTopLeftCoords[0] = drawCanvas.css("left").match(/[0-9]/g).join("");
+// drawCanvasTopLeftCoords[1] = drawCanvas.css("top").match(/[0-9]/g).join("");
+ drawCanvasTopLeftCoords[0] = drawCanvas.offset().left;
+ drawCanvasTopLeftCoords[1] = drawCanvas.offset().top;
+// drawCanvasTopLeftCoords[0] = drawCanvas[0].offsetParent.offsetLeft;
+// drawCanvasTopLeftCoords[1] = drawCanvas[0].offsetParent.offsetTop;
console.log("f:initDoodleDrawing() >> canvasWidth: " + canvasWidth);
console.log("f:initDoodleDrawing() >> canvasHeight: " + canvasHeight);
@@ -145,6 +156,8 @@ function clearDoodle() {
doodleBounds = [-1, -1, -1, -1]; // left, top, right, bottom
doodleTransform = [0, 0, 1.0, 1.0]; // [ x, y, scaleX, scaleY ]
+ dragging = false;
+
clearMainView();
resetPreview();
resetVerticalShapes();
@@ -255,11 +268,11 @@ function adjustPreviewTransformation() {
*
* * * * * * * * * */
function onCanvasMouseDown(e) {
-// console.log("onmousedown");
-// console.log("onmousedown >> e.offsetX,e.offsetY = " + e.offsetX+","+e.offsetY);
-// console.log("onmousedown >> e.layerX,e.layerY= " + e.layerX+","+e.layerY);
-// console.log("onmousedown >> e: " + e);
-// console.log(e);
+ // console.log("onmousedown >> e.offsetX,e.offsetY = " + e.offsetX+","+e.offsetY);
+ // console.log("onmousedown >> e.layerX,e.layerY= " + e.layerX+","+e.layerY);
+ // console.log("onmousedown >> e: " + e);
+ // console.log(e);
+// console.log("f:onCanvasMouseDown()");
dragging = true;
prevCountingTime = new Date().getTime();
@@ -288,6 +301,7 @@ function onCanvasMouseDown(e) {
var prevPoint = {x:-1, y:-1};
function onCanvasMouseMove(e) {
+// console.log("f:onCanvasMouseMove()");
if (!dragging) return;
// console.log("onmousemove");
@@ -348,6 +362,7 @@ prevUpdateFullPreview = 0; // 0 is not a timeframe but refers to the _points arr
prevUpdateFullPreviewInterval = 25; // refers to number of points, not a timeframe
function onCanvasMouseUp(e) {
+// console.log("f:onCanvasMouseUp()");
// console.log("onmouseup");
dragging = false;
console.log("doodleBounds: " + doodleBounds);
@@ -368,10 +383,13 @@ function onCanvasMouseUp(e) {
function onCanvasTouchDown(e) {
e.preventDefault();
+ console.log("f:onCanvasTouchDown >> e: " , e);
// var x = e.touches[0].pageX - e.touches[0].target.offsetLeft;
// var y = e.touches[0].pageY - e.touches[0].target.offsetTop;
- var x = e.touches[0].pageX - drawCanvasTopLeftCoords[0];
- var y = e.touches[0].pageY - drawCanvasTopLeftCoords[1];
+// var x = e.touches[0].pageX - drawCanvasTopLeftCoords[0];
+// var y = e.touches[0].pageY - drawCanvasTopLeftCoords[1];
+ var x = e.touches[0].layerX;
+ var y = e.touches[0].layerY;
_points.push([x, y, true]);
adjustBounds(x, y);
@@ -385,10 +403,13 @@ function onCanvasTouchDown(e) {
function onCanvasTouchMove(e) {
e.preventDefault();
+ console.log("f:onCanvasTouchMove >> e: " , e);
// var x = e.touches[0].pageX - e.touches[0].target.offsetLeft;
// var y = e.touches[0].pageY - e.touches[0].target.offsetTop;
var x = e.touches[0].pageX - drawCanvasTopLeftCoords[0];
var y = e.touches[0].pageY - drawCanvasTopLeftCoords[1];
+// var x = e.touches[0].layerX;
+// var y = e.touches[0].layerY;
if (prevPoint.x != -1 || prevPoint.y != -1) {
var dist = Math.sqrt(Math.pow((prevPoint.x - x), 2) + Math.pow((prevPoint.y - y), 2));
diff --git a/js/gcodeGenerating_v01.js b/js/gcodeGenerating_v01.js
old mode 100755
new mode 100644
index 7f9c45c..68cc3dc
--- a/js/gcodeGenerating_v01.js
+++ b/js/gcodeGenerating_v01.js
@@ -130,7 +130,8 @@ function generate_gcode(callback) {
gcode = gcode.concat(startGcode);
//gcode.push("M109 S" + temperature); // set target temperature and wait for the extruder to reach it
-
+
+ var layers = maxObjectHeight / layerHeight; //maxObjectHeight instead of objectHeight
var extruder = 0.0;
var prev = new Point(); prev.set(0, 0);
diff --git a/js/init_layout.js b/js/init_layout.js
index 7034376..63d8859 100644
--- a/js/init_layout.js
+++ b/js/init_layout.js
@@ -1,110 +1,55 @@
-var imgDims = [320, 320]; // width and height of image
-
-function doClientAndOrientationStuff() {
- console.log("doClientAndOrientationStuff");
-
- $(".agentInfo").text("");
-
- /*
- if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
- if (window.orientation == -90 || window.orientation == 90) {
- // landscape
-// $('#Viewport').attr('content', 'width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes');
- } else {
- // portrait
- $('#Viewport').attr('content', 'width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes');
- }
- }
- return;
- //*/
-
- if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
- if (window.orientation == -90 || window.orientation == 90) {
- // landscape
-
- // var ww = ( $(window).width() < window.screen.width ) ? $(window).width() : window.screen.width; //get proper width
- var ww = 0; //get proper width
- if (window.screen.availWidth) {
- ww = window.screen.availWidth;
-// if( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) {
-// ww = window.innerWidth;
-// }
- } else if($(window).width()) {
- ww = $(window).width();
- } else {
-
- }
-
- // ww = 480;
-
- var mw = imgDims[0]; // min width of site
- //*
- if( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) {
- var mw = imgDims[1]; // in landscape: min-width is image width
- }
- //*/
- var ratio = ww / mw; //calculate ratio
- $('#Viewport').attr('content', 'initial-scale='+ratio+',maximum-scale='+ratio+',minimum-scale='+ratio+',user-scalable=no,width='+mw);
- if( ww < mw){ //smaller than minimum size
-// $(".colmask").css("background-color", "#ff0");
- // $('#Viewport').attr('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=yes, width=' + ww);
- // $('#Viewport').attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + ww);
- }else{ //regular size
-// $(".colmask").css("background-color", "#0ff");
- // $('#Viewport').attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + ww);
- }
-
- $(".agentInfo").append("ww: " + ww + ", mw: " + mw + ""); - $(".agentInfo").append("ratio: " + ratio + "
"); - $(".agentInfo").append("
"); - } else { - // portrait -// $('#Viewport').attr('content', 'initial-scale='+1+',maximum-scale='+1+',minimum-scale='+1+',user-scalable=no'); - $('#Viewport').attr('content', 'width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no'); - } - - } else { - // console.log("else"); - $(".colmask").css("background-color", "#f80"); - - } - - $(".agentInfo").append("$(window).width(): " + $(window).width() + "
"); - $(".agentInfo").append("window.screen.width: " + window.screen.width+ "
"); - $(".agentInfo").append("window.screen.availWidth: " + window.screen.availWidth+ "
"); - $(".agentInfo").append("
"); - $(".agentInfo").append("window.innerWidth: " + window.innerWidth + "
"); - $(".agentInfo").append("window.innerHeight: " + window.innerHeight + "
"); - $(".agentInfo").append("
"); - $(".agentInfo").append("$(window).height(): " + $(window).height() + "
"); - $(".agentInfo").append("window.screen.height: " + window.screen.height+ "
"); - $(".agentInfo").append("window.screen.availHeight: " + window.screen.availHeight+ "
"); - $(".agentInfo").append("
"); - $(".agentInfo").append("user agent: " + navigator.userAgent + "
"); -}; - -function doOnOrientationChange() { - console.log("doOnOrientationChange"); - doClientAndOrientationStuff(); - - // switch(window.orientation) { - // case -90: - // case 90: - // alert('landscape'); - // break; - // default: - // alert('portrait'); - // break; - // } -} - +// 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); - doClientAndOrientationStuff() // <-- is this necessary in this method? + /* 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) { @@ -139,53 +84,38 @@ function initLayouting() { - $("#drawAreaContainer").attr("width", parseInt($("#drawAreaContainer").css("width"), 10)); - $("#drawAreaContainer").attr("height", parseInt($("#drawAreaContainer").css("height"), 10)); - canvas.width = parseInt($canvas.css("width"), 10); - canvas.height = parseInt($canvas.css("height"), 10); - preview.width = parseInt($preview.css("width"), 10); - preview.height = parseInt($preview.css("height"), 10); + +// $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; -// console.log("f:initLayouting() >> canvas height: " + canvas.height); - - - - // imgDims[0] = parseInt($(".container").css("width").match(/[0-9]+/).join("")); - // imgDims[1] = parseInt($(".container").css("height").match(/[0-9]+/).join("")); - - imgDims = [1024, 768]; - /* - if( /Android|webOS|BlackBerry/i.test(navigator.userAgent) ) { - imgDims[1] = parseInt($(".container").css("height").match(/[0-9]+/).join("")); - } else if ( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) { - imgDims[1] = parseInt($(".container").css("width").match(/[0-9]+/).join("")); - } else { - imgDims[1] = parseInt($(".container").css("height").match(/[0-9]+/).join("")); - } - //*/ - - // $(".container").css("height", window.innerHeight); - - // Initial execution if needed - //* 2013-07-26 not doing this resizing stuff now, it's not working well yet - if (!window.addEventListener) { - window.attachEvent('orientationchange', doOnOrientationChange); - window.attachEvent('resize', doOnResize) - } else { - window.addEventListener('orientationchange', doOnOrientationChange); - window.addEventListener('resize', doOnResize) - } - //*/ - doClientAndOrientationStuff(); - doOnResize(); - // doOnOrientationChange(); + $drawAreaContainer.show(); // window.innerHeight console.log("window.innerHeight: " + window.innerHeight); - console.log("$('#drawAreaContainer').innerHeight(): " + $("#drawAreaContainer").innerHeight()); - console.log("$('#drawAreaContainer').offset().top: " + $("#drawAreaContainer").offset().top); + 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 @@ -194,4 +124,17 @@ function initLayouting() { } //*/ + // 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(); } diff --git a/js/main.js b/js/main.js index 76eefe3..be66d4c 100644 --- a/js/main.js +++ b/js/main.js @@ -11,9 +11,14 @@ var settingsWindow = new SettingsWindow(); var firstTimeSettingsLoaded = true; +var $drawAreaContainer, $doodleCanvas, doodleCanvas, doodleCanvasContext, $previewContainer; + $(function() { console.log("ready"); + + //TODO give this a more logical place in code + if (getURLParameter("d") != "null") debugMode = (getURLParameter("d") == "1"); if (getURLParameter("p") != "null") sendPrintCommands = (getURLParameter("p") == "1"); if (getURLParameter("c") != "null") communicateWithWifibox = (getURLParameter("c") == "1"); @@ -35,9 +40,10 @@ $(function() { console.log("wifiboxIsRemote: " + wifiboxIsRemote); console.log("wifibox URL: " + wifiboxURL); - initLayouting(); initDoodleDrawing(); initPreviewRendering(); + initLayouting(); + initSidebars(); initButtonBehavior(); initVerticalShapes(); @@ -47,7 +53,7 @@ $(function() { $(document).on(Printer.UPDATE,update); settingsWindow.init(wifiboxURL); - $(document).on(SettingsWindow.SETTINGS_LOADED,settingsLoaded); + $(document).on(SettingsWindow.SETTINGS_LOADED, settingsLoaded); if(debugMode) { console.log("debug mode is true"); @@ -57,6 +63,8 @@ $(function() { $("#debug_display").css("display", "block"); +// $("#debugContainer").css("display", "block"); + /* TEMP CODE!! -> artificially populates the startgcode and endgcode textareas in the settings window */ // todo remove this temporary code... /* diff --git a/js/previewRendering_v02.js b/js/previewRendering_v02.js index 957e7b1..7cf064f 100644 --- a/js/previewRendering_v02.js +++ b/js/previewRendering_v02.js @@ -3,11 +3,6 @@ var $preview; var preview; var previewCtx; -$preview = $("#preview"); - -preview = document.getElementById('preview'); -previewCtx = preview.getContext('2d'); - var preview_tmp; var previewCtx_tmp; @@ -25,6 +20,10 @@ var redrawInterval = 1000 / 30; // ms function initPreviewRendering() { console.log("f:initPreviewRendering()"); + $preview = $("#preview"); + preview = $preview[0]; + previewCtx = preview.getContext('2d'); + // DEBUG --> mbt preview_tmp (voor de toImageData truc) var _ratio = preview.width / canvas.width; preview_tmp = document.getElementById('preview_tmp'); @@ -34,12 +33,19 @@ function initPreviewRendering() { previewCtx_tmp = preview_tmp.getContext('2d'); + calcPreviewCanvasProperties(); + redrawPreview(); +} + +function calcPreviewCanvasProperties() { + console.log("f:calcPreviewCanvasProperties()"); + + globalScale = preview.width / canvasWidth; layerCX = (canvasWidth / 2) * globalScale; // defined in canvasDrawing_v01.js layerCY = (canvasHeight / 2) * globalScale; // defined in canvasDrawing_v01.js - layerOffsetY = preview.height - 1.75 * layerCY; - yStep = preview.height / 150; - - redrawPreview(); +// layerOffsetY = preview.height - 1.75 * layerCY; + layerOffsetY = preview.height * (1 - previewVerticalPadding.bottom); + yStep = (preview.height - (preview.height * (previewVerticalPadding.top + previewVerticalPadding.bottom))) / maxNumLayers; } // TODO (perhaps) : make the twist limit dynamic, depending on what's printable (w.r.t. overlapping) @@ -52,6 +58,7 @@ var globalScale = 0.3; // global scale of preview (width preview / width canvas var globalAlpha = 0.20; // global alpha of preview var scaleY = 0.4; // additional vertical scale per path for 3d effect var viewerScale = 0.65; // additional scale to fit into preview nicely (otherwise is fills out totally) +var previewVerticalPadding = { "top" : .15, "bottom" : 0.12 }; // % var strokeWidth = 2; //4; //var rStep = Math.PI/40; //Math.PI/40; // var rStep = previewDefaults.rotation; // Math.PI/180; //Math.PI/40; // @@ -119,7 +126,8 @@ function redrawPreview(redrawLess) { previewCtx.save(); - previewCtx.translate(layerCX, layerOffsetY + layerCY + y); +// previewCtx.translate(layerCX, layerOffsetY + layerCY + y); + previewCtx.translate(layerCX, layerOffsetY + y); // previewCtx.setTransform(1, 0, 0, scaleY, layerCX, layerOffsetY+layerCY+y); previewCtx.scale(viewerScale * verticalScaleFactor, scaleY * viewerScale * verticalScaleFactor); previewCtx.rotate(r); @@ -196,7 +204,7 @@ function renderToImageDataPreview() { previewCtx.save(); - previewCtx.translate(layerCX,layerOffsetY+layerCY+y); + previewCtx.translate(layerCX,layerOffsetY+y); // previewCtx.scale(1, scaleY) previewCtx.scale(verticalScaleFactor, scaleY * verticalScaleFactor) previewCtx.rotate(r); @@ -244,7 +252,7 @@ function redrawRenderedPreview(redrawLess) { } previewCtx.save(); - previewCtx.translate(layerCX,layerOffsetY+layerCY+y); + previewCtx.translate(layerCX,layerOffsetY+y); // previewCtx.scale(1, scaleY) previewCtx.scale(verticalScaleFactor, scaleY * verticalScaleFactor); previewCtx.rotate(r); @@ -309,7 +317,8 @@ function updatePreview(_x, _y, redrawLess) { previewCtx.save(); - previewCtx.translate(layerCX, layerOffsetY + layerCY + y); +// previewCtx.translate(layerCX, layerOffsetY + layerCY + y); + previewCtx.translate(layerCX, layerOffsetY + y); previewCtx.scale(viewerScale, scaleY * viewerScale); previewCtx.rotate(r); previewCtx.translate((-doodleTransform[0]) * (globalScale * doodleTransform[2]), (-doodleTransform[1]) * (globalScale * doodleTransform[3])); diff --git a/js/sidebar.js b/js/sidebar.js new file mode 100644 index 0000000..aeefeed --- /dev/null +++ b/js/sidebar.js @@ -0,0 +1,62 @@ +var sidebarLeft; +var sidebarRight; + +function initSidebars() { + console.log("f:initSidebars()"); + + sidebarLeft = new SideBar(); + sidebarLeft.init(".leftpanel", "hideleft", function() { + $(".leftpanel").show(); + }); + + sidebarRight = new SideBar(); + sidebarRight.init(".rightpanel", "hideright", function() { + $(".rightpanel").show(); + }); +} + +function SideBar() { + this.initted = false; + this.$contentTarg = undefined; + this.$sideBtn = undefined; + this.contentHidden = false; + this.hideClass = ""; + + this.init = function(targ, hideClass, callback) { + console.log("SideBar >> f:init >> targ: " , $(targ) , ", hideClass: " + hideClass); + this.$contentTarg = $(targ); + this.hideClass = hideClass; + + this.$contentTarg.addClass(this.hideClass); + this.contentHidden = true; + + this.$contentTarg.append(""); + this.$sideBtn = $(targ +" .sidebutton"); + var self = this; + + this.$sideBtn.on('click', function(e) { + console.log("sidebutton"); + self.toggleShowHide(); + }); + + this.initted = true; + + callback(); + } + + this.toggleShowHide = function() { + if (this.contentHidden) { + this.contentHidden = false; + this.$contentTarg.removeClass(this.hideClass); + // self.$sideBtn.addClass("sidebuttonin"); + this.$sideBtn.addClass("sidebuttonin"); + } else { + this.contentHidden = true; + this.$contentTarg.addClass(this.hideClass); + // self.$sideBtn.removeClass("sidebuttonin"); + this.$sideBtn.removeClass("sidebuttonin"); + + } + } +} + diff --git a/less/base.less b/less/base.less new file mode 100644 index 0000000..70c6abf --- /dev/null +++ b/less/base.less @@ -0,0 +1,115 @@ +/* + + GLOBAL CONTAINER + +*/ +body { + background-color: #fcfcfc; + -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 { + z-index: 5; + /*pointer-events:none;*/ + /*-webkit-touch-callout: none; *//*disable callout, image save panel */ + /*-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;*/ + cursor: pointer +} +#landscape { + position:absolute; + background-color: #fff; + width: 100%; + max-width: 1024px; + max-height: 768px; + top: 0px; + bottom: 0px; + left: 0px; + right: 0px; + z-index: 5; + overflow: hidden; + margin: 0px auto; + outline: 2px solid #5e8c71; + box-shadow: 0 0 8px rgba(8, 8, 8, 0.25); +} +#portrait { + display: none; +} +.bgContainer { + position: absolute; + width: 100%; + height: 100%; + overflow: hidden; +} +.bgTop, .bgMiddle, .bgBottom { + opacity: 1.0; + transition: opacity .35s linear; + position: absolute; + left: 0px; + z-index: -5; +} +.bgTop { + top: 0px; +} +.bgMiddle { + top: 30%; +} +.bgBottom { + bottom: 0px; +} +.rightpanel, .leftpanel { + img { + cursor: pointer; + } +} + +/* + + CENTER PANEL + +*/ +@import "base_centerpanel.less"; + +/* + + LEFT PANEL + +*/ +@import "base_leftpanel.less"; + +/* + + RIGHT PANEL + +*/ +@import "base_rightpanel.less"; + + + + +/* + + REST + +*/ +/* CLEARFIX */ +/* http://nicolasgallagher.com/micro-clearfix-hack/ */ +.clearfix:before, +.clearfix:after { + content: " "; /* 1 */ + display: table; /* 2 */ +} +.clearfix:after { + clear: both; +} + +/* For IE 6/7 only*/ +.clearfix { + *zoom: 1; +} + diff --git a/less/base_centerpanel.less b/less/base_centerpanel.less new file mode 100644 index 0000000..10cac8b --- /dev/null +++ b/less/base_centerpanel.less @@ -0,0 +1,54 @@ +// CENTER PANEL +.centerpanel { + position: absolute; + left: 50%; + margin-left: -33%; + width: 66%; + height: 100%; + z-index: 5; +} + + +// top panel +@import "base_centerpanel_logo.less"; + +// draw area stuff (plus up/down/left/right buttons) +@import "base_centerpanel_drawarea.less"; + + +/* + HEIGHT-related RESPONSIVE STUFF +*/ +@media screen and (max-height: 700px) { + .logopanel { + height: 22%; + } + .doodlecontainer { + height: 68%; + } + .d3dlogo { + top: 25%; + max-width: 399px; + height: 74px; + background-image: url('../img/logo/logo_small.png'); + } +} +@media screen and (max-height: 655px) { + .bgMiddle { opacity: 0; } +} + +@media screen and (max-height: 525px) { + .d3dlogo { + max-width: 399px; + top: 20%; + height: 57px; + background-image: url('../img/logo/logo_smaller_wide.png'); + } +} +@media screen and (max-height: 375px) { + .d3dlogo { + max-width: 399px; + height: 40px; + background-image: url('../img/logo/logo_smallest_wide.png'); + } +} \ No newline at end of file diff --git a/less/base_centerpanel_drawarea.less b/less/base_centerpanel_drawarea.less new file mode 100644 index 0000000..a5b3e90 --- /dev/null +++ b/less/base_centerpanel_drawarea.less @@ -0,0 +1,128 @@ +// import vertical shapes additions +@import "verticalshapes.less"; + +// DRAW AREA +.drawareacontainer { + position: relative; + width: 100%; + height: 65%; + background-color: #fff; + border: 4px solid #000; + border-radius: 15px; + box-sizing: border-box; + z-index: 15px; +} + +#canvasContainers { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; +} + +#mycanvasContainer { + position: absolute; + top: 0; + left: 0; + width: 78%; + height: 100%; +} +#mycanvas { + width: 100%; + height: 100%; + margin: 0; + padding: 0; + border-right: 2px solid #333; +} + +#previewContainer { + position: absolute; + top: 0; + right: 0; + width: 22%; +// max-width: 150px; + height: 100%; +} +#preview { + min-width: 50px; + width: 100%; + height: 100%; + margin: 0; + padding: 0; +} + +/* DEBUG THING */ +#preview_tmp { + position: absolute; + top: 0px; + left: 0px; + z-index: 500; + border: 1px solid #f80; + display: none; +} +.bottompanel { + position: relative; + bottom: 0px; + width: 100%; + height: 10%; +} + +/* + DOODLE UP/DOWN/LEFT/RIGHT buttons +*/ +.manipulationBtns { + margin: 2px 5px; + position: absolute; + right: 0; + top: 0; + max-width: 340px; + max-height: 70px; + width: 45%; +} + +.manipulationBtn { + width: 45%; + height: auto; + cursor: pointer; +} + +#btnsUpDown { + float: left; + width: 45%; +} +#btnsUpDown > div { + float: left; + padding-right: 8px; + background-repeat: no-repeat; +} + +#btnsTurnLeftRight { + float: right; + width: 45%; +} +#btnsTurnLeftRight >div { + float: left; + padding-right: 8px; + background-repeat: no-repeat; +} + +#btnMoveUp { + max-width: 65px; +} + +#btnMoveDown { + max-width: 64px; +} + +#btnTwistLeft { + max-width: 59px; +} + +#btnTwistRight { + max-width: 64px; +} \ No newline at end of file diff --git a/less/base_centerpanel_logo.less b/less/base_centerpanel_logo.less new file mode 100644 index 0000000..a84a3fd --- /dev/null +++ b/less/base_centerpanel_logo.less @@ -0,0 +1,15 @@ +.logopanel { + height: 25%; +} +.d3dlogo { + position: relative; + top: 15%; + width: 100%; + height: 100%; + margin: 0px auto; + max-width: 399px; + height: 139px; + background: url('../img/logo/logo_full.png') no-repeat center center; + cursor: pointer; +} + diff --git a/less/base_leftpanel.less b/less/base_leftpanel.less new file mode 100644 index 0000000..7b5e498 --- /dev/null +++ b/less/base_leftpanel.less @@ -0,0 +1,42 @@ +// LEFT PANEL +.leftpanel { + position: absolute; + width: 17%; +/* background-color: rgba(67, 204, 67, 0.4);*/ + top: 0px; + left: 0px; + bottom: 0px; +} +.btnNew { + margin: 5% 0% 1% 5%; + width: 100%; + max-width: 180px; + height: auto; +} +.btnsPrevNext { + margin: 1% 7%; + max-width: 160px; +} +.btnPrevious { + width: 40%; + max-width: 56px; + height: auto; +} +.btnNext { + width: 40%; + max-width: 56px; + height: auto; + float: right; +} +.btnSave { + margin: 5% 5% 1% 5%; + width: 90%; + max-width: 144px; + height: auto; +} +.btnOops { + margin: 5% 5% 1% 5%; + width: 90%; + max-width: 144px; + height: auto; +} diff --git a/less/base_rightpanel.less b/less/base_rightpanel.less new file mode 100644 index 0000000..5ec7f90 --- /dev/null +++ b/less/base_rightpanel.less @@ -0,0 +1,99 @@ +// RIGHT PANEL +.rightpanel { + position: absolute; + width: 17%; +/* background-color: rgba(255, 0, 254, 0.4);*/ + top: 0px; + right: 0px; + bottom: 0px; +} +.btnPrint { + margin: 1% 5% 5% 0%; + width: 100%; + max-width: 163px; + height: auto; + float: right; +} +.btnStop { + margin: 5% 10% 1% 5%; + float: right; + width: 90%; + max-width: 98px; + height: auto; +} +.btnsSettingsInfo { + position: absolute; + bottom: 25px; + right: 5px; + width: 80%; + margin: 1% 5%; + max-width: 160px; +} +.btnInfo { + width: 40%; + max-width: 53px; + height: auto; +} +.btnSettings { + width: 40%; + max-width: 53px; + height: auto; + float: right; +} + + +/* + + PRINT PROGRESS DISPLAY + +*/ +#printProgressContainer { + position: absolute; + right: 30px; + top: 370px; + width: 110px; + margin: 5px 0px; + font-weight: bold; + display:none; +} +#progressbarContainer { + margin: 3px 0px; + width: inherit; + height: 20px; + background-color: #fff; + border: 2px solid #333; + border-radius: 5px; + -o-border-radius: 5px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; +} +.progressAmount { + margin: 0px 5px; +} +#progressbar { + position: relative; +/*margin-bottom: -20px;*/ + width: 0%; + height: 100%; + background-color: #4c4; + border: 0px solid #f0f; + border-radius: 3px; + -o-border-radius: 3px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; +} + +/* + + THERMOMETER + +*/ +#thermometerContainer { + position: absolute; + right: 25px; + top: 370px; +} +#thermometerCanvas { +/*background: #59b2b8;*/ +/*zoom: 2;*/ +} \ No newline at end of file diff --git a/less/full.less b/less/full.less new file mode 100644 index 0000000..101f62f --- /dev/null +++ b/less/full.less @@ -0,0 +1 @@ +// FULL styles (not sure if going to use...) \ No newline at end of file diff --git a/less/mobile.less b/less/mobile.less new file mode 100644 index 0000000..9ede81f --- /dev/null +++ b/less/mobile.less @@ -0,0 +1,127 @@ +/* + TOP LOGO +*/ +.centerpanel { + left: 0; + margin-left: 0; + width: 100%; +/* background-color: rgba(0, 135, 255, 0.4);*/ +} +.logopanel { + height: 40px; +} +.d3dlogo { + top: 0; + max-width: 399px; + height: 40px; + background-image: url('../img/logo/logo_smallest_wide.png'); +} +.doodlecontainer { +/* position: absolute;*/ + height: 85%; +} +/*.bottompanel { + display: none; +}*/ + +/* + LEFT +*/ +.leftpanel { + width: 100px; + background-color: #fff; + z-index: 50; + transition: left .3s ease-out; +} +.hideleft { + left: -101px; +} +.shadowright { + box-shadow: 2px 0 4px rgba(42, 42, 41, 0.6); +} +.btnNew { + margin: 5% 5% 1% 5%; + width: 90%; +} +.btnSave { + margin-left: 9%; + width: 75%; +} +.btnOops { + margin-left: 6%; + width: 71%; +} + +/* + RIGHT +*/ +.rightpanel { + width: 100px; + background-color: #fff; + z-index: 50; + transition: right .3s ease-out; +} +.hideright { + right: -101px; +} +.shadowleft { + box-shadow: -2px 0 4px rgba(42, 42, 41, 0.6); +} +.btnPrint { + margin: 1% 5% 5% 5%; + width: 90%; +} +.btnStop { + margin: 5% 6% 1% 5%; + width: 70%; +} + + +/* + REST +*/ +.sidebutton { + display: block; + position:absolute; +/* top: 50%;*/ +/* margin-top: -20px;*/ + top: 0px; + /*float:right;*/ + width: 25px; + height: 38px; + border: 1px solid #808; + background: url('../img/arrows.png') no-repeat; + background-color: #eee; + cursor: pointer; + + &:active { + background-color: #aaa; + } + + .leftpanel & { + right: -27px; + background-position: 0px 0px; + } + + .rightpanel & { + left: -27px; + background-position: -25px 0px; + } +} + +.sidebuttonin { + + &:active { + background-color: #888; + } + + .leftpanel & { + background-color: #ccc; + background-position: -25px 0px; + } + + .rightpanel & { + background-color: #ccc; + background-position: -0px 0px; + } +} diff --git a/less/mobile_settingspopup.less b/less/mobile_settingspopup.less new file mode 100644 index 0000000..213cc06 --- /dev/null +++ b/less/mobile_settingspopup.less @@ -0,0 +1,18 @@ +/* + + SETTINGS POPUP - MOBILE + +*/ +#contentOverlay { + z-index: 200; + + #settings { + width: 87%; + height: 82%; + margin: 6% 4%; + + > .right { + width: 14%; + } + } +} \ No newline at end of file diff --git a/css/normalize.css b/less/normalize.css similarity index 92% rename from css/normalize.css rename to less/normalize.css index 823cc10..4617600 100644 --- a/css/normalize.css +++ b/less/normalize.css @@ -501,34 +501,4 @@ textarea { table { border-collapse: collapse; border-spacing: 0; -} - - -/* http://nicolasgallagher.com/micro-clearfix-hack/ */ -/** - * For modern browsers - * 1. The space content is one way to avoid an Opera bug when the - * contenteditable attribute is included anywhere else in the document. - * Otherwise it causes space to appear at the top and bottom of elements - * that are clearfixed. - * 2. The use of `table` rather than `block` is only necessary if using - * `:before` to contain the top-margins of child elements. - */ - -/** - * For IE 6/7 only - * Include this rule to trigger hasLayout and contain floats. - */ -.cf { - *zoom: 1; -} - -.cf:before, -.cf:after { - content: " "; /* 1 */ - display: table; /* 2 */ -} - -.cf:after { - clear: both; -} +} \ No newline at end of file diff --git a/less/normalize.less b/less/normalize.less new file mode 100644 index 0000000..4617600 --- /dev/null +++ b/less/normalize.less @@ -0,0 +1,504 @@ +/*! normalize.css v1.0.2 | MIT License | git.io/normalize */ + +/* ========================================================================== + HTML5 display definitions + ========================================================================== */ + +/* + * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +nav, +section, +summary { + display: block; +} + +/* + * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. + */ + +audio, +canvas, +video { + display: inline-block; + *display: inline; + *zoom: 1; +} + +/* + * Prevents modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/* + * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3, + * and Safari 4. + * Known issue: no IE 6 support. + */ + +[hidden] { + display: none; +} + +/* ========================================================================== + Base + ========================================================================== */ + +/* + * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using + * `em` units. + * 2. Prevents iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-size: 100%; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + -ms-text-size-adjust: 100%; /* 2 */ +} + +/* + * Addresses `font-family` inconsistency between `textarea` and other form + * elements. + */ + +html, +button, +input, +select, +textarea { + font-family: sans-serif; +} + +/* + * Addresses margins handled incorrectly in IE 6/7. + */ + +body { + margin: 0; +} + +/* ========================================================================== + Links + ========================================================================== */ + +/* + * Addresses `outline` inconsistency between Chrome and other browsers. + */ + +a:focus { + outline: thin dotted; +} + +/* + * Improves readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* ========================================================================== + Typography + ========================================================================== */ + +/* + * Addresses font sizes and margins set differently in IE 6/7. + * Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5, + * and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +h2 { + font-size: 1.5em; + margin: 0.83em 0; +} + +h3 { + font-size: 1.17em; + margin: 1em 0; +} + +h4 { + font-size: 1em; + margin: 1.33em 0; +} + +h5 { + font-size: 0.83em; + margin: 1.67em 0; +} + +h6 { + font-size: 0.67em; + margin: 2.33em 0; +} + +/* + * Addresses styling not present in IE 7/8/9, Safari 5, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/* + * Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +blockquote { + margin: 1em 40px; +} + +/* + * Addresses styling not present in Safari 5 and Chrome. + */ + +dfn { + font-style: italic; +} + +/* + * Addresses styling not present in IE 6/7/8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/* + * Addresses margins set differently in IE 6/7. + */ + +p, +pre { + margin: 1em 0; +} + +/* + * Corrects font family set oddly in IE 6, Safari 4/5, and Chrome. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, serif; + _font-family: 'courier new', monospace; + font-size: 1em; +} + +/* + * Improves readability of pre-formatted text in all browsers. + */ + +pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; +} + +/* + * Addresses CSS quotes not supported in IE 6/7. + */ + +q { + quotes: none; +} + +/* + * Addresses `quotes` property not supported in Safari 4. + */ + +q:before, +q:after { + content: ''; + content: none; +} + +/* + * Addresses inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/* + * Prevents `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* ========================================================================== + Lists + ========================================================================== */ + +/* + * Addresses margins set differently in IE 6/7. + */ + +dl, +menu, +ol, +ul { + margin: 1em 0; +} + +dd { + margin: 0 0 0 40px; +} + +/* + * Addresses paddings set differently in IE 6/7. + */ + +menu, +ol, +ul { + padding: 0 0 0 40px; +} + +/* + * Corrects list images handled incorrectly in IE 7. + */ + +nav ul, +nav ol { + list-style: none; + list-style-image: none; +} + +/* ========================================================================== + Embedded content + ========================================================================== */ + +/* + * 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3. + * 2. Improves image quality when scaled in IE 7. + */ + +img { + border: 0; /* 1 */ + -ms-interpolation-mode: bicubic; /* 2 */ +} + +/* + * Corrects overflow displayed oddly in IE 9. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* ========================================================================== + Figures + ========================================================================== */ + +/* + * Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11. + */ + +figure { + margin: 0; +} + +/* ========================================================================== + Forms + ========================================================================== */ + +/* + * Corrects margin displayed oddly in IE 6/7. + */ + +form { + margin: 0; +} + +/* + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/* + * 1. Corrects color not being inherited in IE 6/7/8/9. + * 2. Corrects text not wrapping in Firefox 3. + * 3. Corrects alignment displayed oddly in IE 6/7. + */ + +legend { + border: 0; /* 1 */ + padding: 0; + white-space: normal; /* 2 */ + *margin-left: -7px; /* 3 */ +} + +/* + * 1. Corrects font size not being inherited in all browsers. + * 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5, + * and Chrome. + * 3. Improves appearance and consistency in all browsers. + */ + +button, +input, +select, +textarea { + font-size: 100%; /* 1 */ + margin: 0; /* 2 */ + vertical-align: baseline; /* 3 */ + *vertical-align: middle; /* 3 */ +} + +/* + * Addresses Firefox 3+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +button, +input { + line-height: normal; +} + +/* + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Corrects inability to style clickable `input` types in iOS. + * 3. Improves usability and consistency of cursor style between image-type + * `input` and others. + * 4. Removes inner spacing in IE 7 without affecting normal text inputs. + * Known issue: inner spacing remains in IE 6. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ + *overflow: visible; /* 4 */ +} + +/* + * Re-set default cursor for disabled elements. + */ + +button[disabled], +input[disabled] { + cursor: default; +} + +/* + * 1. Addresses box sizing set to content-box in IE 8/9. + * 2. Removes excess padding in IE 8/9. + * 3. Removes excess padding in IE 7. + * Known issue: excess padding remains in IE 6. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + *height: 13px; /* 3 */ + *width: 13px; /* 3 */ +} + +/* + * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome. + * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/* + * Removes inner padding and search cancel button in Safari 5 and Chrome + * on OS X. + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* + * Removes inner padding and border in Firefox 3+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/* + * 1. Removes default vertical scrollbar in IE 6/7/8/9. + * 2. Improves readability and alignment in all browsers. + */ + +textarea { + overflow: auto; /* 1 */ + vertical-align: top; /* 2 */ +} + +/* ========================================================================== + Tables + ========================================================================== */ + +/* + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} \ No newline at end of file diff --git a/less/normalize.min.css b/less/normalize.min.css new file mode 100644 index 0000000..5fabfd2 --- /dev/null +++ b/less/normalize.min.css @@ -0,0 +1 @@ +/*! normalize.css v1.0.2 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.67em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}blockquote{margin:1em 40px}dfn{font-style:italic}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0} \ No newline at end of file diff --git a/less/normalize.min.less b/less/normalize.min.less new file mode 100644 index 0000000..5fabfd2 --- /dev/null +++ b/less/normalize.min.less @@ -0,0 +1 @@ +/*! normalize.css v1.0.2 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.67em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}blockquote{margin:1em 40px}dfn{font-style:italic}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0} \ No newline at end of file diff --git a/less/portrait.less b/less/portrait.less new file mode 100644 index 0000000..728c21b --- /dev/null +++ b/less/portrait.less @@ -0,0 +1,16 @@ +#landscape { + display: none; +} + +#portrait { + display: block; +} + +.vertImage { + margin: 0px; + padding: 0px; +/*border: 2px solid #f0f;*/ + max-width: 100%; + height: auto; + width: auto; /* for ie9 */ +} diff --git a/less/settingsPopup.less b/less/settingsPopup.less new file mode 100644 index 0000000..b4caf4f --- /dev/null +++ b/less/settingsPopup.less @@ -0,0 +1,85 @@ +/* + + SETTINGS POPUP + +*/ +#contentOverlay { + background-color: rgba(255, 255, 255, 0.65); + z-index: 20; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + display:none; + + #settings { + background-color: #fff; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 15; + max-width: 835px; + max-height: 540px; + width: 80%; + height: 75%; + margin: 7% 8%; + box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65); + border: 2px solid #222; + border-radius: 15px; + overflow: hidden; + display: table; + padding: 2%; + + .settingsLabelContainer { + width: 100%; + height: auto; + margin-bottom: 1%; + } + .settingsLabelImg { + width: 45%; + max-width: 373px; + height: auto; + } + + > .content { + margin: 3% 12%; + margin-top: 12%; + max-height: 388px; + display: table-row; + width: 100%; + + > .settings { + border: 1px solid rgb(187, 187, 187); + border-radius: 5px; + overflow: scroll; + overflow-x: hidden; + } + > .btnContainer { + width: 15%; + position:relative; + display: table-cell; + + > .btnOK { + position: absolute; + bottom: 3%; + right: 3%; + max-width: 85px; + min-width: 42px; + width: 91%; + height: auto; + margin: 0 2% 2% 0; + cursor: pointer; + float: right; + } + } + > div { + height: 100%; + } + } + } +} \ No newline at end of file diff --git a/less/styles.less b/less/styles.less new file mode 100644 index 0000000..ed4d2a5 --- /dev/null +++ b/less/styles.less @@ -0,0 +1,24 @@ +// IMPORTS +//@import "normalize.min.less"; +@import "base.less"; +@import "settingsPopup.less"; + + +// MOBILE +@media only screen and (max-width: 480px), + only screen and (max-width: 720px) and (min-device-pixel-ratio : 1.5), + only screen and (max-width: 720px) and (-webkit-min-device-pixel-ratio : 1.5) { + @import "mobile.less"; + @import "mobile_settingspopup.less"; +} + +// FULL +@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) { + @import "full.less"; +} + +// PORTRAIT +@media only screen and (orientation:portrait) { + @import "portrait.less"; +} diff --git a/less/verticalshapes.less b/less/verticalshapes.less new file mode 100644 index 0000000..90fd25b --- /dev/null +++ b/less/verticalshapes.less @@ -0,0 +1,21 @@ +#verticalShapes { + position:absolute; + right: -56px; + bottom: 15px; + + .verticalshape { + width: 50px; + height: 50px; + border: 2px solid #333; + border-radius: 0px 5px 5px 0px; + margin-top: 4px; + /*background-color: #f0f;*/ + cursor: pointer; + + &.straight { background: url('../img/vertical_shape_icons/straight.png') no-repeat; } + &.diverging { background: url('../img/vertical_shape_icons/diverging.png') no-repeat; } + &.converging { background: url('../img/vertical_shape_icons/converging.png') no-repeat; } + &.sinus { background: url('../img/vertical_shape_icons/sinus.png') no-repeat; } + } + +} \ No newline at end of file diff --git a/lesstocss.sh b/lesstocss.sh new file mode 100755 index 0000000..67ca0d9 --- /dev/null +++ b/lesstocss.sh @@ -0,0 +1,55 @@ +#!/bin/bash + +echo 'converting LESS to CSS...' +# generate CSS from LESS +lessc less/styles.less css/styles.css + +if [ -a css/styles.min.css ]; then + rm css/styles.min.css +fi + +if [ -n "$1" ]; then + if [ $1 = '--prefix' ] || [ $1 = '-p' ]; then + echo 'applying prefixr...' + + # prefixed (-s overwrites existing file) + prefixr --input ./css/styles.css -s + fi + if [ $1 = '--minify' ] || [ $1 = '-m' ]; then + + if [ ! -n "$2" ]; then + echo 'creating minified....' + lessc --yui-compress less/styles.less css/styles.min.css + else + echo 'creating minified and prefixed...' + + # copy to .min.css to create a minified version as well + cp css/styles.css css/styles.min.css + + # prefixed and minified (-s overwrites existing file) + prefixr --input ./css/styles.min.css -s -c + fi + + fi +fi + + + +if [ -n "$2" ]; then + if [ $2 = '--prefix' ] || [ $2 = '-p' ]; then + echo 'applying prefixr...' + + # prefixed (-s overwrites existing file) + prefixr --input ./css/styles.css -s + fi + if [ $2 = '--minify' ] || [ $2 = '-m' ]; then + echo 'creating minified and prefixed...' + + # copy to .min.css to create a minified version as well + cp css/styles.css css/styles.min.css + + # prefixed and minified (-s overwrites existing file) + prefixr --input ./css/styles.min.css -s -c + fi +fi + diff --git a/settings.html b/settings.html index 086d2eb..e78fe96 100755 --- a/settings.html +++ b/settings.html @@ -9,7 +9,7 @@ -
+
+