henk
-
-
+
+
+ 
- 
+
+
+
+
+
+
-
-
-
-
- 
- 
- 
-
- 
- 
- 
- 
+
+
+
+
-
-
-
-
-
-
-
+
+
+ 
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
-
-
+
+
+
+
+
+ 
+ 
+
+
+
+
+ 
+ 
+
+
+
-
+
-
- 
-
+
-
+
+
+
-
@@ -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;
}