From 6eddb1835cfe7b1f461d1a936258351b9f992463 Mon Sep 17 00:00:00 2001 From: Adriaan Wormgoor Date: Wed, 18 Sep 2013 10:46:36 +0200 Subject: [PATCH] first implementation of different layouting. Doesn't work well yet.. --- css/fixedPosInterface.css | 176 ++++++++++++++++++++++---------------- index.html | 12 +-- js/Thermometer.js | 2 + js/buttonbehaviors.js | 4 +- js/canvasDrawing_v01.js | 13 +-- js/gcodeGenerating_v01.js | 6 +- js/init_layout.js | 83 +++++++++++++----- js/main.js | 19 ++++ 8 files changed, 201 insertions(+), 114 deletions(-) diff --git a/css/fixedPosInterface.css b/css/fixedPosInterface.css index 49c43f9..c56f968 100644 --- a/css/fixedPosInterface.css +++ b/css/fixedPosInterface.css @@ -4,49 +4,6 @@ body { } -.button { - display: table; -} - -/*.big {*/ - /*background: #a6e19c;*/ - /*border: 1px solid #222;*/ - /*height: 64px;*/ - /*width: 64px;*/ - /*display: table-cell;*/ - /*vertical-align: middle;*/ - /*text-align: center;*/ - /*border-radius: 32px;*/ - /*-moz-border-radius: 32px;*/ - /*-webkit-border-radius: 32px;*/ -/*}*/ -/*.small {*/ - /*background: #a3d5f7;*/ - /*border: 1px solid #222;*/ - /*height: 40px;*/ - /*width: 40px;*/ - /*display: table-cell;*/ - /*vertical-align: middle;*/ - /*text-align: center;*/ - /*border-radius: 20px;*/ - /*-moz-border-radius: 20px;*/ - /*-webkit-border-radius: 20px;*/ -/*}*/ - -#logo { - position: absolute; - /*left: 50%;*/ - /*margin-left: -220px;*/ - top: 20px; - left: 315px; - width: 400px; - height: 140px; -} - -/*ha {*/ - /*background: #f5f5f5 url('../images/bg.jpg') no-repeat;*/ -/*}*/ - /* Portrait */ @media screen and (orientation:portrait) { body { @@ -74,39 +31,73 @@ body { } } -.container { - position: fixed; - top: 0px; - left: 0px; +/* + + Containers and content blocks + +*/ +#landscape { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + width: 100%; + max-width: 1024px; + height: 100%; + margin: 0px auto; +} +/* http://stackoverflow.com/questions/8129524/simulate-inner-border-in-css */ +#landscape:after { + content:' '; + display:block; + position:absolute; + left:0; + top:0; + right:0; + bottom:0; border: 2px solid #333; - width: 1024px; - min-height: 500px; - max-height: 768px; - height: 100%; +} + +.container { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + width: 100%; + height: 100%; + /*margin: 0px auto;*/ + + /*position: fixed;*/ + /*top: 0px;*/ + /*left: 0px;*/ + /*width: 1024px;*/ + /*min-height: 500px;*/ + /*max-height: 768px;*/ + /*height: 100%;*/ /* height: 768px;*/ } -#d3dlogo { - position: absolute; - top: 15px; - left: 31%; - width: 399px; - height: 139px; - background-image: url('../img/logo_full.png'); - cursor: pointer; -} - -#svg { - cursor: pointer; -} - #drawAreaContainer { + /*position: absolute;*/ + /*top: 193px;*/ + /*left: 193px;*/ + /*width: 650px;*/ + /*height: 450px;*/ + /*background-color: #fff;*/ + /*border: 4px solid #000;*/ + /*border-radius: 15px;*/ position: absolute; - top: 193px; - left: 193px; - width: 650px; - height: 450px; + top: 50%; + left: 50%; + /*margin: -225px 0 0 -325px;*/ background-color: #fff; + width: 75%; + min-width: 150px; + max-width: 650px; + height: 70%; + min-height: 150px; border: 4px solid #000; border-radius: 15px; } @@ -126,10 +117,20 @@ body { } #mycanvas { - width: 500px; - height: 450px; - border: 0px solid #333; - border-right: 2px solid #333; + /*width: 500px;*/ + /*height: 450px;*/ + /*border: 0px solid #333;*/ + /*border-right: 2px solid #333;*/ + /*background-color: #f0f;*/ + + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + width: 80%; + height: 100%; + background: #808; } #preview { @@ -137,8 +138,32 @@ body { position: absolute; right: 0px; top: 0px; - width: 150px; - height: 450px; + + /*width: 150px;*/ + /*height: 450px;*/ + + width: 20%; + height: 100%; +} + + +/* + + Buttons and logo's + +*/ +.button { + display: table; +} + +#d3dlogo { + position: absolute; + top: 15px; + left: 31%; + width: 399px; + height: 139px; + background-image: url('../img/logo_full.png'); + cursor: pointer; } .vertImage { @@ -150,7 +175,6 @@ body { width: auto; /* for ie9 */ } - .bgTop { position: absolute; top: 0px; diff --git a/index.html b/index.html index 9e234f4..4e462dd 100755 --- a/index.html +++ b/index.html @@ -6,9 +6,12 @@ - - - + + + + + + @@ -53,9 +56,6 @@
- - -
diff --git a/js/Thermometer.js b/js/Thermometer.js index 687b94f..fc5188a 100644 --- a/js/Thermometer.js +++ b/js/Thermometer.js @@ -1,3 +1,5 @@ + var $displayThermometer = $("#thermometerContainer"); + function Thermometer() { this.currentTemperature = 0; // default val this.targetTemperature = 180; // default val diff --git a/js/buttonbehaviors.js b/js/buttonbehaviors.js index 17c7a5c..83fadb3 100644 --- a/js/buttonbehaviors.js +++ b/js/buttonbehaviors.js @@ -297,7 +297,7 @@ function previewTwistRight(redrawLess) { function update() { if(!displayTempEnabled && printer.alive) { - displayTemp.show(); + //displayTemp.show(); $displayThermometer.show(); displayTempEnabled = true; } else if(displayTempEnabled && !printer.alive) { @@ -307,7 +307,7 @@ function update() { } if(displayTempEnabled) { - displayTemp.text(printer.temperature+"/"+printer.targetTemperature); + //displayTemp.text(printer.temperature+"/"+printer.targetTemperature); thermometer.update(printer.temperature, printer.targetTemperature); } diff --git a/js/canvasDrawing_v01.js b/js/canvasDrawing_v01.js index f6bd21a..b20c231 100644 --- a/js/canvasDrawing_v01.js +++ b/js/canvasDrawing_v01.js @@ -41,6 +41,7 @@ var lineweight = 2; function initDoodleDrawing() { console.log("f:initDoodleDrawing()"); + //TODO make these jquery eventhandlers (works for all) if (!canvas.addEventListener) { canvas.attachEvent('onmousedown',onCanvasMouseDown); canvas.attachEvent('onmousemove',onCanvasMouseMove); @@ -254,11 +255,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(); @@ -287,6 +288,7 @@ function onCanvasMouseDown(e) { var prevPoint = {x:-1, y:-1}; function onCanvasMouseMove(e) { + console.log("f:onCanvasMouseMove()"); if (!dragging) return; // console.log("onmousemove"); @@ -347,6 +349,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); diff --git a/js/gcodeGenerating_v01.js b/js/gcodeGenerating_v01.js index 7a4908f..4996d61 100755 --- a/js/gcodeGenerating_v01.js +++ b/js/gcodeGenerating_v01.js @@ -91,7 +91,7 @@ function generate_gcode(callback) { //*/ objectHeight = Math.ceil(numLayers / 5); // in settings objectHeight = 20, in previewRendering_v01.js numLayers is 100, hence the / 5 - objectHeight = numLayers; // in settings objectHeight = 20, in previewRendering_v01.js numLayers is 100, hence the / 5 + objectHeight = (numLayers / maxNumLayers) * maxObjectHeight; // in settings objectHeight = 20, in previewRendering_v01.js numLayers is 100, hence the / 5 // todo hier een array van PATHS maken wat de losse paths zijn @@ -147,7 +147,9 @@ function generate_gcode(callback) { // sort-of in de buurt van (360/2.5) // // -> aight.. er zijn 750 lines vs 1000 in de d3d app. 135 = .75 * 180... dit kan je nog rechttrekken als je NET wat slimmer nadenkt :) // update: NEE, het is niet .75 * 180 want 135 was niet de beste value. //TODO dus. - pointsRotate(p, rStep * progress * 139); + var radToDeg = 180/Math.PI; + //pointsRotate(p, (rStep * radToDeg) * progress); + pointsRotate(p, (rStep * 139) * progress); if (layer == 0) { //gcode.push("M107"); //fan off diff --git a/js/init_layout.js b/js/init_layout.js index 7034376..b18fc78 100644 --- a/js/init_layout.js +++ b/js/init_layout.js @@ -1,7 +1,7 @@ var imgDims = [320, 320]; // width and height of image function doClientAndOrientationStuff() { - console.log("doClientAndOrientationStuff"); + console.log("f:doClientAndOrientationStuff()"); $(".agentInfo").text(""); @@ -19,13 +19,18 @@ function doClientAndOrientationStuff() { //*/ if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) { + console.log("PHONE OR TABLET! --> window.orientation = " + window.orientation); if (window.orientation == -90 || window.orientation == 90) { + console.log(" landscape"); // 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 (window.innerWidth) { + ww = window.innerWidth; + // if (window.screen.availWidth) { +// ww = window.screen.availWidth; + // if( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) { // ww = window.innerWidth; // } @@ -54,10 +59,13 @@ function doClientAndOrientationStuff() { // $('#Viewport').attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + ww); } + console.log(" ww: " + ww + ", mw: " + mw + ", ratio: " + ratio); + $(".agentInfo").append("ww: " + ww + ", mw: " + mw + "
"); $(".agentInfo").append("ratio: " + ratio + "
"); $(".agentInfo").append("
"); } else { + console.log(" portrait"); // 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'); @@ -69,6 +77,7 @@ function doClientAndOrientationStuff() { } + $(".agentInfo").append("$(window).width(): " + $(window).width() + "
"); $(".agentInfo").append("window.screen.width: " + window.screen.width+ "
"); $(".agentInfo").append("window.screen.availWidth: " + window.screen.availWidth+ "
"); @@ -104,7 +113,22 @@ function doOnResize() { // console.log("doOnResize() >> " + new Date().getTime()); // $(".container").css("height", window.innerHeight); - doClientAndOrientationStuff() // <-- is this necessary in this method? + // code from new layouting approach... //TODO give this a more logical spot + $drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height"))/2); + doodleCanvas.width = doodleCanvas.clientWidth; + doodleCanvas.height = doodleCanvas.clientHeight; + // $("#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); + canvasWidth = canvas.width; + canvasHeight = canvas.height; + + //return; + +// doClientAndOrientationStuff() // <-- is this necessary in this method? // console.log("f:doOnResize() >> $('#canvascontainer').innerHeight: " + window.innerHeight); if (window.innerHeight < 768) { @@ -139,14 +163,20 @@ 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); + + // code from new layouting approach... //TODO give this a more logical spot + $drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height"))/2); + doodleCanvas.width = doodleCanvas.clientWidth; + doodleCanvas.height = doodleCanvas.clientHeight; +// $("#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); canvasWidth = canvas.width; canvasHeight = canvas.height; + // console.log("f:initLayouting() >> canvas height: " + canvas.height); @@ -167,23 +197,9 @@ function initLayouting() { // $(".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(); - - // 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); @@ -194,4 +210,25 @@ 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); + +// if (!window.addEventListener) { +// window.attachEvent('orientationchange', doOnOrientationChange, false); +// window.attachEvent('resize', doOnResize, false); +// } else { +// window.addEventListener('orientationchange', doOnOrientationChange, false); +// window.addEventListener('resize', doOnResize, false); +// } + + // 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 4d5ca0d..5bf35f7 100644 --- a/js/main.js +++ b/js/main.js @@ -8,9 +8,28 @@ var printer = new Printer(); var thermometer = new Thermometer(); var settingsWindow = new SettingsWindow(); +var $drawAreaContainer, $doodleCanvas, doodleCanvas, doodleCanvasContext, $previewContainer; + $(function() { console.log("ready"); + + //TODO give more logical place in code + $drawAreaContainer = $("#drawAreaContainer"); + $doodleCanvas = $("#mycanvas"); + doodleCanvas = $("#mycanvas")[0]; + doodleCanvasContext = doodleCanvas.getContext('2d'); + + $drawAreaContainer.css("margin", 0); + $drawAreaContainer.css("marginLeft", -parseInt($drawAreaContainer.css("width"))/2); + $drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height"))/2); + + doodleCanvas.width = doodleCanvas.clientWidth; + doodleCanvas.height = doodleCanvas.clientWidth; + + + + if (getURLParameter("d") != "null") debugMode = (getURLParameter("d") == "1"); if (getURLParameter("p") != "null") sendPrintCommands = (getURLParameter("p") == "1"); if (getURLParameter("c") != "null") communicateWithWifibox = (getURLParameter("c") == "1");