From 0a44087989a7448079163cdd956f937e4413d68a Mon Sep 17 00:00:00 2001 From: Adriaan Wormgoor Date: Fri, 11 Oct 2013 11:42:27 +0200 Subject: [PATCH] changes to how the draw and preview canvasses are positioned and initted --- index.html | 112 ++++++++++++++++------------ js/buttonbehaviors.js | 50 +++++++------ js/canvasDrawing_v01.js | 20 +++-- js/init_layout.js | 45 +++++++---- js/main.js | 9 +-- js/previewRendering_v02.js | 9 +-- less/base_centerpanel_drawarea.less | 22 +++--- 7 files changed, 153 insertions(+), 114 deletions(-) diff --git a/index.html b/index.html index 3e0fbdb..53317df 100755 --- a/index.html +++ b/index.html @@ -6,42 +6,42 @@ - - - - - - + - + -
-
-
-
-
-
- +
+ + +
+ -
- -
- - - -
- - - - +
+ + +
+
+
+
+ +
+
+
+
+ + +
+
+
+
+
+
+ +
+
+
+
+ +
+
+ +
-
-
-
+ +
+
+
+
+ + +
+
+ + +
- +
-
- settings -
+
+ settings +
-
henk
-
-
+
+
+ settings
@@ -106,6 +119,7 @@ + diff --git a/js/buttonbehaviors.js b/js/buttonbehaviors.js index a335815..0c8fa4f 100644 --- a/js/buttonbehaviors.js +++ b/js/buttonbehaviors.js @@ -11,7 +11,7 @@ var btnNew, btnPrevious, btnNext; var btnOops, btnStop, btnClear; var btnMoveUp, btnMoveDown, btnTwistLeft, btnTwistRight; var btnInfo, btnSettings; -var btnDebug; // debug +//var btnDebug; // debug var displayTemp, displayProgress; var displayTempEnabled = false; @@ -23,43 +23,43 @@ var state = IDLE_STATE; var prevState = state; 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"); - displayTemp = $("#displayTemp"); + 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"); @@ -180,14 +180,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 aee80dc..6ecadc7 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,14 @@ 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) { @@ -61,8 +65,8 @@ function initDoodleDrawing() { } //*/ - drawCanvas = $("#drawAreaContainer"); -// drawCanvas = $("#mycanvasContainer"); // $("#drawAreaContainer") +// drawCanvas = $(".drawareacontainer"); + drawCanvas = $("#mycanvasContainer"); // $("#drawAreaContainer") console.log("drawCanvasTopLeftCoords: " + drawCanvasTopLeftCoords); // drawCanvasTopLeftCoords[0] = drawCanvas.css("left").match(/[0-9]/g).join(""); diff --git a/js/init_layout.js b/js/init_layout.js index 2ab02c9..8150cb5 100644 --- a/js/init_layout.js +++ b/js/init_layout.js @@ -1,26 +1,37 @@ var drawAreaContainerMinHeight = 300; var drawAreaContainerMaxHeight = 450; + function doOnResize() { // console.log("doOnResize() >> " + new Date().getTime()); // $(".container").css("height", window.innerHeight); - $drawAreaContainer.css("marginLeft", -$drawAreaContainer.width()/2); + /* 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() - 150; // canvas.clientWidth; - canvas.height = $drawAreaContainer.height(); // canvas.clientHeight; + // canvas.width = $drawAreaContainer.width() - preview.width; // canvas.clientWidth; + // canvas.width = $("#mycanvasContainer").width(); + canvas.width = drawCanvas.width(); + canvas.height = drawCanvas.height(); // canvas.clientHeight; + // canvas.height = $drawAreaContainer.height(); // canvas.clientHeight; - preview.width = 150; + // preview.width = 150; preview.height = $drawAreaContainer.height(); + + canvasWidth = $canvas.width(); + canvasHeight = $canvas.height(); + 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; +// canvasWidth = canvas.width; +// canvasHeight = canvas.height; drawCanvasTopLeftCoords[0] = drawCanvas.offset().left; drawCanvasTopLeftCoords[1] = drawCanvas.offset().top; @@ -75,27 +86,33 @@ function initLayouting() { // doodleCanvas = $("#mycanvas")[0]; // doodleCanvasContext = doodleCanvas.getContext('2d'); - $drawAreaContainer = $("#drawAreaContainer"); + $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); + //*/ - canvas.width = $drawAreaContainer.width() - 150; // canvas.clientWidth; - canvas.height = $drawAreaContainer.height(); // canvas.clientHeight; +// console.log(" preview.width: " + preview.width + ", $preview.width(): " + $preview.width()); +// canvas.width = $drawAreaContainer.width() - preview.width; // canvas.clientWidth; +// canvas.width = $("#mycanvasContainer").width(); + canvas.width = drawCanvas.width(); + canvas.height = drawCanvas.height(); // canvas.clientHeight; +// canvas.height = $drawAreaContainer.height(); // canvas.clientHeight; - preview.width = 150; +// preview.width = 150; preview.height = $drawAreaContainer.height(); - canvasWidth = canvas.width; - canvasHeight = canvas.height; + canvasWidth = $canvas.width(); + canvasHeight = $canvas.height(); $drawAreaContainer.show(); // window.innerHeight console.log("window.innerHeight: " + window.innerHeight); console.log("window.innerWidth: " + window.innerWidth); - console.log("$('#drawAreaContainer').innerHeight(): " + $("#drawAreaContainer").innerHeight()); - console.log("$('#drawAreaContainer').offset().top: " + $("#drawAreaContainer").offset().top); + 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 diff --git a/js/main.js b/js/main.js index 6de3776..48eec0d 100644 --- a/js/main.js +++ b/js/main.js @@ -16,9 +16,6 @@ $(function() { //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"); @@ -40,9 +37,10 @@ $(function() { console.log("wifiboxIsRemote: " + wifiboxIsRemote); console.log("wifibox URL: " + wifiboxURL); - initLayouting(); initDoodleDrawing(); initPreviewRendering(); + initLayouting(); + initSidebars(); initButtonBehavior(); thermometer.init($("#thermometerCanvas"), $("#thermometerContainer")); @@ -51,13 +49,14 @@ $(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"); $("body").css("overflow", "auto"); $("#debug_textArea").css("display", "block"); $("#preview_tmp").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 52709df..24a4333 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'); diff --git a/less/base_centerpanel_drawarea.less b/less/base_centerpanel_drawarea.less index e5cfbc7..7838325 100644 --- a/less/base_centerpanel_drawarea.less +++ b/less/base_centerpanel_drawarea.less @@ -7,10 +7,10 @@ border: 4px solid #000; border-radius: 15px; box-sizing: border-box; - z-index: 15; + z-index: 15px; } + #canvasContainers { - display:table; position: absolute; top: 0; bottom: 0; @@ -23,8 +23,10 @@ } #mycanvasContainer { - display:table-cell; - width: auto; + position: absolute; + top: 0; + left: 0; + width: 78%; height: 100%; } #mycanvas { @@ -32,19 +34,21 @@ height: 100%; margin: 0; padding: 0; -/*float: left;*/ border-right: 2px solid #333; } #previewContainer { - display:table-cell; - width: 150px; + position: absolute; + top: 0; + right: 0; + width: 22%; +// max-width: 150px; height: 100%; } #preview { - width: 150px; + min-width: 50px; + width: 100%; height: 100%; - float: right; margin: 0; padding: 0; }