vmario/doodle3d-client
0
0
Fork 0
mirror of https://github.com/Doodle3D/doodle3d-client.git synced 2024-11-22 09:17:56 +01:00
Code Issues Releases Wiki Activity

changes to how the draw and preview canvasses are positioned and initted

Browse Source
This commit is contained in:
Adriaan Wormgoor 2013-10-11 11:42:27 +02:00
parent b6f77fc39e
commit 0a44087989
7 changed files with 153 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
index.html
View File

@ -6,42 +6,42 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!--<link rel="apple-touch-icon-precomposed" href="img/icon.png"/>-->
<!--<link rel="apple-touch-icon" href="img/icon.png"/>-->
<link rel="icon" type="image/ico" href="favicon_alt.ico"/> <link rel="icon" type="image/ico" href="favicon_alt.ico"/>
<link href="./img/webpage_icons/apple-touch-icon-144x144-precomposed.png" rel="apple-touch-icon-precomposed" sizes="144x144" /> <link href="./img/webpage_icons/apple-touch-icon-144x144-precomposed.png" rel="apple-touch-icon-precomposed" sizes="144x144" />
<meta id="Viewport" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> <meta id="Viewport" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<link href="css/normalize.css" rel="stylesheet" media="screen"> <link href="css/styles.css" rel="stylesheet" media="screen">
<link href="css/fixedPosInterface.css" rel="stylesheet" media="screen">
<link href="css/d3d_btns.css" rel="stylesheet" media="screen">
<link href="css/settingsPopup.css" rel="stylesheet" media="screen">
<link href="css/debug.css" rel="stylesheet" media="screen"> <link href="css/debug.css" rel="stylesheet" media="screen">
</head> </head>
<body> <body>
<div class="debugContainer"> <div id="landscape" class="clearfix">
<div class="debugBtn"></div>
<div class="agentInfo"></div> <!-- background images -->
</div> <div class="bgContainer">
<div id="landscape">
<div class="uiButtonsContainer">
<img class="bgTop" src="img/bg_top.png" /> <img class="bgTop" src="img/bg_top.png" />
<img class="bgMiddle" src="img/bg_middle.png" /> <img class="bgMiddle" src="img/bg_middle.png" />
<img class="bgBottom" src="img/bg_bottom.png" /> <img class="bgBottom" src="img/bg_bottom.png" />
<div class="buttons">
<div id="d3dlogo" onclick="location.reload()"></div>
<div class="btn" id="btnNew"></div>
<img class="btn" id="btnPrevious" src="img/buttons/btnLeft.png">
<img class="btn" id="btnNext" src="img/buttons/btnRight.png">
<img class="btn" id="btnSave" src="img/buttons/btnSave.png">
<div class="btn" id="btnOops"></div>
<img class="btn" id="btnPrint" src="img/buttons/btnPrint.png">
<img class="btn disabled" id="btnStop" src="img/buttons/btnStop.png">
<img class="btn" id="btnInfo" src="img/buttons/btnInfo.png">
<img class="btn" id="btnSettings" src="img/buttons/btnSettings.png">
</div> </div>
<!-- left panel -->
<div class="leftpanel shadowright">
<div class='sidebutton shadowright'></div>
<img class="btnNew btn" src="img/buttons/btnNew.png" /><br/>
<div class="btnsPrevNext">
<img class="btnPrevious btn" src="img/buttons/btnLeft.png">
<img class="btnNext btn" src="img/buttons/btnRight.png">
</div>
<img class="btnSave btn" src="img/buttons/btnSave.png" /><br/>
<img class="btnOops btn" src="img/buttons/btnOops.png" /><br/>
</div>
<!-- right panel -->
<div class="rightpanel shadowleft">
<div class='sidebutton shadowleft'></div>
<img class="btnPrint btn" src="img/buttons/btnPrint.png" /><br/>
<img class="btnStop btn disabled" src="img/buttons/btnStop.png" /><br/>
<!-- not now <!-- not now
<div id="printProgressContainer"> <div id="printProgressContainer">
<label for="progressbarContainer">Progress:</label><span class="progressAmount">0%</span> <label for="progressbarContainer">Progress:</label><span class="progressAmount">0%</span>
@ -53,8 +53,18 @@
<div id="thermometerContainer"> <div id="thermometerContainer">
<canvas id="thermometerCanvas" width="100" height="125"></canvas> <canvas id="thermometerCanvas" width="100" height="125"></canvas>
</div> </div>
<div class="btnsSettingsInfo">
<img class="btnSettings btn" src="img/buttons/btnSettings.png">
<img class="btnInfo btn" src="img/buttons/btnInfo.png">
</div> </div>
<div id="drawAreaContainer"> </div>
<!-- center panel -->
<div class="centerpanel">
<div class="logopanel">
<div class="d3dlogo" onclick="location.reload()"></div>
</div>
<div class="drawareacontainer">
<div id="canvasContainers"> <div id="canvasContainers">
<div id="mycanvasContainer"> <div id="mycanvasContainer">
<canvas id="mycanvas"></canvas> <canvas id="mycanvas"></canvas>
@ -64,29 +74,32 @@
</div> </div>
</div> </div>
<canvas id="preview_tmp"></canvas> <canvas id="preview_tmp"></canvas>
<div class="manipulationBtns cf"> </div>
<div class="bottompanel">
<div class="manipulationBtns clearfix">
<div id="btnsUpDown"> <div id="btnsUpDown">
<div class="manipulationBtn" id="btnMoveUp"></div> <img class="manipulationBtn" id="btnMoveUp" src="img/buttons/btnUp.png" />
<div class="manipulationBtn" id="btnMoveDown"></div> <img class="manipulationBtn" id="btnMoveDown" src="img/buttons/btnDown.png" />
</div> </div>
<div id="btnsTurnLeftRight"> <div id="btnsTurnLeftRight">
<div class="manipulationBtn" id="btnTwistLeft"></div> <img class="manipulationBtn" id="btnTwistLeft" src="img/buttons/btnTurnLeft.png" />
<div class="manipulationBtn" id="btnTwistRight"></div> <img class="manipulationBtn" id="btnTwistRight" src="img/buttons/btnTurnRight.png" />
</div>
</div> </div>
</div> </div>
</div> </div>
<div id="debug_textArea"> <div id="debug_textArea">
<textarea rows="5" cols="115" id="textdump"></textarea> <textarea rows="5" cols="60" id="textdump"></textarea>
</div> </div>
<div id="contentOverlay"> <div id="contentOverlay">
<div id="settings"> <div id="settings">
<header> <div class="settingsLabelContainer">
<img src="img/settings_lable.png" alt="settings"/> <img class="settingsLabelImg" src="img/settings_lable.png" alt="settings" />
</header> </div>
<div class="content"> <div class="content">
<div class="settings">henk</div> <div class="settings"></div>
<div class="manipulationBtns"> <div class="btnContainer">
<div class="btnOK"></div> <img src="img/buttons/btnOk_settings.png" class="btnOK" alt="settings"/>
</div> </div>
</div> </div>
</div> </div>
@ -106,6 +119,7 @@
<script src="js/Printer.js"></script> <script src="js/Printer.js"></script>
<script src="js/Thermometer.js"></script> <script src="js/Thermometer.js"></script>
<script src="js/utils.js"></script> <script src="js/utils.js"></script>
<script src="js/sidebar.js"></script>
<script src="js/main.js"></script> <script src="js/main.js"></script>
</body> </body>

50
js/buttonbehaviors.js
View File

@ -11,7 +11,7 @@ var btnNew, btnPrevious, btnNext;
var btnOops, btnStop, btnClear; var btnOops, btnStop, btnClear;
var btnMoveUp, btnMoveDown, btnTwistLeft, btnTwistRight; var btnMoveUp, btnMoveDown, btnTwistLeft, btnTwistRight;
var btnInfo, btnSettings; var btnInfo, btnSettings;
var btnDebug; // debug //var btnDebug; // debug
var displayTemp, displayProgress; var displayTemp, displayProgress;
var displayTempEnabled = false; var displayTempEnabled = false;
@ -23,43 +23,43 @@ var state = IDLE_STATE;
var prevState = state; var prevState = state;
function initButtonBehavior() { function initButtonBehavior() {
console.log("f:initButtonBehavior >> btnNew = " + btnNew); console.log("f:initButtonBehavior");
btnClear= $("#btnClear"); // btnClear= $(".btnClear");
btnOops = $("#btnOops"); btnOops = $(".btnOops");
btnMoveUp = $("#btnMoveUp"); btnMoveUp = $("#btnMoveUp");
btnMoveDown = $("#btnMoveDown"); btnMoveDown = $("#btnMoveDown");
btnTwistLeft = $("#btnTwistLeft"); btnTwistLeft = $("#btnTwistLeft");
btnTwistRight = $("#btnTwistRight"); btnTwistRight = $("#btnTwistRight");
btnInfo = $("#btnInfo"); btnInfo = $(".btnInfo");
btnSettings = $("#btnSettings"); btnSettings = $(".btnSettings");
btnNew = $("#btnNew"); btnNew = $(".btnNew");
btnPrint= $("#btnPrint"); btnPrint= $(".btnPrint");
btnStop = $("#btnStop"); btnStop = $(".btnStop");
displayTemp = $("#displayTemp"); displayTemp = $("#thermometerContainer");
displayProgress = $("#printProgressContainer"); displayProgress = $("#printProgressContainer");
// btnPrevious = $("#btnPrevious"); btnPrevious = $(".btnPrevious");
// btnNext = $("#btnNext"); btnNext = $(".btnNext");
//debug //debug
btnDebug = $(".debugBtn"); //btnDebug = $(".debugBtn");
btnNew.bind('touchstart mousedown',clearDoodle); btnNew.on('touchstart mousedown', clearDoodle);
btnPrint.bind('touchstart mousedown',print); btnPrint.on('touchstart mousedown', print);
// not using these at the moment // not using these at the moment
$("#btnPrevious").css("opacity", "0.3"); $("#btnPrevious").css("opacity", "0.3");
$("#btnNext").css("opacity", "0.3"); btnNext.css("opacity", "0.3");
$("#btnSave").css("opacity", "0.3"); $("#btnSave").css("opacity", "0.3");
$("#btnInfo").css("opacity", "0.3"); btnInfo.css("opacity", "0.3");
btnClear.click(function(e) { // btnClear.click(function(e) {
e.preventDefault(); // e.preventDefault();
// console.log("clear"); // // console.log("clear");
//
clearDoodle(); // clearDoodle();
}); // });
function startOops(e) { function startOops(e) {
// console.log("btnOops mouse down"); // console.log("btnOops mouse down");
@ -180,14 +180,16 @@ function initButtonBehavior() {
}); });
// DEBUG // DEBUG
/*
// $(".agentInfo").css("display", "none"); // $(".agentInfo").css("display", "none");
btnDebug.click(function(e) { btnDebug.click(function(e) {
console.log("debugClick"); console.log("debugClick");
$(".agentInfo").toggleClass("agentInfoToggle"); $(".agentInfo").toggleClass("agentInfoToggle");
e.preventDefault(); e.preventDefault();
}) })
//*/
btnStop.bind('touchstart mousedown',stopPrint); btnStop.on('touchstart mousedown',stopPrint);
} }
function stopPrint() { function stopPrint() {
console.log("f:stopPrint() >> sendPrintCommands = " + sendPrintCommands); console.log("f:stopPrint() >> sendPrintCommands = " + sendPrintCommands);

20
js/canvasDrawing_v01.js
View File

@ -11,12 +11,8 @@ var svgPathParamsRegExp = /([LM])(\d*) (\d*)/;
var dragging = false; var dragging = false;
var $canvas = $("#mycanvas"); var $canvas, canvas, ctx;
var canvas = $("#mycanvas")[0]; var canvasWidth, canvasHeight;
var ctx = canvas.getContext('2d');
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var drawCanvas; var drawCanvas;
var drawCanvasTopLeftCoords = [0, 0]; var drawCanvasTopLeftCoords = [0, 0];
@ -41,6 +37,14 @@ var lineweight = 2;
function initDoodleDrawing() { function initDoodleDrawing() {
console.log("f: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) //TODO make these jquery eventhandlers (works for all)
if (!canvas.addEventListener) { if (!canvas.addEventListener) {
@ -61,8 +65,8 @@ function initDoodleDrawing() {
} }
//*/ //*/
drawCanvas = $("#drawAreaContainer"); // drawCanvas = $(".drawareacontainer");
// drawCanvas = $("#mycanvasContainer"); // $("#drawAreaContainer") drawCanvas = $("#mycanvasContainer"); // $("#drawAreaContainer")
console.log("drawCanvasTopLeftCoords: " + drawCanvasTopLeftCoords); console.log("drawCanvasTopLeftCoords: " + drawCanvasTopLeftCoords);
// drawCanvasTopLeftCoords[0] = drawCanvas.css("left").match(/[0-9]/g).join(""); // drawCanvasTopLeftCoords[0] = drawCanvas.css("left").match(/[0-9]/g).join("");

43
js/init_layout.js
View File

@ -1,26 +1,37 @@
var drawAreaContainerMinHeight = 300; var drawAreaContainerMinHeight = 300;
var drawAreaContainerMaxHeight = 450; var drawAreaContainerMaxHeight = 450;
function doOnResize() { function doOnResize() {
// console.log("doOnResize() >> " + new Date().getTime()); // console.log("doOnResize() >> " + new Date().getTime());
// $(".container").css("height", window.innerHeight); // $(".container").css("height", window.innerHeight);
/* 2013-10-09 commented out -> no more need with new layouting
$drawAreaContainer.css("marginLeft", -$drawAreaContainer.width()/2); $drawAreaContainer.css("marginLeft", -$drawAreaContainer.width()/2);
$drawAreaContainer.css("marginTop", -$drawAreaContainer.height() *.45); $drawAreaContainer.css("marginTop", -$drawAreaContainer.height() *.45);
// $drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height")) * 0.45); // $drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height")) * 0.45);
//*/
canvas.width = $drawAreaContainer.width() - 150; // canvas.clientWidth; // canvas.width = $drawAreaContainer.width() - preview.width; // canvas.clientWidth;
canvas.height = $drawAreaContainer.height(); // canvas.clientHeight; // 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(); preview.height = $drawAreaContainer.height();
canvasWidth = $canvas.width();
canvasHeight = $canvas.height();
calcPreviewCanvasProperties(); calcPreviewCanvasProperties();
// layerOffsetY = preview.height - 1.75 * layerCY; // layerOffsetY = preview.height - 1.75 * layerCY;
// yStep = preview.height / 150; // yStep = preview.height / 150;
// preview.width = parseInt($preview.css("width"), 10); // preview.width = parseInt($preview.css("width"), 10);
// preview.height = parseInt($preview.css("height"), 10); // preview.height = parseInt($preview.css("height"), 10);
canvasWidth = canvas.width; // canvasWidth = canvas.width;
canvasHeight = canvas.height; // canvasHeight = canvas.height;
drawCanvasTopLeftCoords[0] = drawCanvas.offset().left; drawCanvasTopLeftCoords[0] = drawCanvas.offset().left;
drawCanvasTopLeftCoords[1] = drawCanvas.offset().top; drawCanvasTopLeftCoords[1] = drawCanvas.offset().top;
@ -75,27 +86,33 @@ function initLayouting() {
// doodleCanvas = $("#mycanvas")[0]; // doodleCanvas = $("#mycanvas")[0];
// doodleCanvasContext = doodleCanvas.getContext('2d'); // 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("margin", 0);
$drawAreaContainer.css("marginLeft", -$drawAreaContainer.width()/2); $drawAreaContainer.css("marginLeft", -$drawAreaContainer.width()/2);
$drawAreaContainer.css("marginTop", -$drawAreaContainer.height() *.45); $drawAreaContainer.css("marginTop", -$drawAreaContainer.height() *.45);
//*/
canvas.width = $drawAreaContainer.width() - 150; // canvas.clientWidth; // console.log(" preview.width: " + preview.width + ", $preview.width(): " + $preview.width());
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(); preview.height = $drawAreaContainer.height();
canvasWidth = canvas.width; canvasWidth = $canvas.width();
canvasHeight = canvas.height; canvasHeight = $canvas.height();
$drawAreaContainer.show(); $drawAreaContainer.show();
// window.innerHeight // window.innerHeight
console.log("window.innerHeight: " + window.innerHeight); console.log("window.innerHeight: " + window.innerHeight);
console.log("window.innerWidth: " + window.innerWidth); console.log("window.innerWidth: " + window.innerWidth);
console.log("$('#drawAreaContainer').innerHeight(): " + $("#drawAreaContainer").innerHeight()); console.log("$drawAreaContainer.innerHeight(): " + $drawAreaContainer.innerHeight());
console.log("$('#drawAreaContainer').offset().top: " + $("#drawAreaContainer").offset().top); console.log("$drawAreaContainer.offset().top: " + $drawAreaContainer.offset().top);
/* 2013-07-26 not doing this resizing stuff now, it's not working well yet /* 2013-07-26 not doing this resizing stuff now, it's not working well yet

7
js/main.js
View File

@ -16,9 +16,6 @@ $(function() {
//TODO give this a more logical place in code //TODO give this a more logical place in code
if (getURLParameter("d") != "null") debugMode = (getURLParameter("d") == "1"); if (getURLParameter("d") != "null") debugMode = (getURLParameter("d") == "1");
if (getURLParameter("p") != "null") sendPrintCommands = (getURLParameter("p") == "1"); if (getURLParameter("p") != "null") sendPrintCommands = (getURLParameter("p") == "1");
if (getURLParameter("c") != "null") communicateWithWifibox = (getURLParameter("c") == "1"); if (getURLParameter("c") != "null") communicateWithWifibox = (getURLParameter("c") == "1");
@ -40,9 +37,10 @@ $(function() {
console.log("wifiboxIsRemote: " + wifiboxIsRemote); console.log("wifiboxIsRemote: " + wifiboxIsRemote);
console.log("wifibox URL: " + wifiboxURL); console.log("wifibox URL: " + wifiboxURL);
initLayouting();
initDoodleDrawing(); initDoodleDrawing();
initPreviewRendering(); initPreviewRendering();
initLayouting();
initSidebars();
initButtonBehavior(); initButtonBehavior();
thermometer.init($("#thermometerCanvas"), $("#thermometerContainer")); thermometer.init($("#thermometerCanvas"), $("#thermometerContainer"));
@ -58,6 +56,7 @@ $(function() {
$("body").css("overflow", "auto"); $("body").css("overflow", "auto");
$("#debug_textArea").css("display", "block"); $("#debug_textArea").css("display", "block");
$("#preview_tmp").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 */ /* TEMP CODE!! -> artificially populates the startgcode and endgcode textareas in the settings window */
// todo remove this temporary code... // todo remove this temporary code...

9
js/previewRendering_v02.js
View File

@ -3,11 +3,6 @@ var $preview;
var preview; var preview;
var previewCtx; var previewCtx;
$preview = $("#preview");
preview = document.getElementById('preview');
previewCtx = preview.getContext('2d');
var preview_tmp; var preview_tmp;
var previewCtx_tmp; var previewCtx_tmp;
@ -25,6 +20,10 @@ var redrawInterval = 1000 / 30; // ms
function initPreviewRendering() { function initPreviewRendering() {
console.log("f:initPreviewRendering()"); console.log("f:initPreviewRendering()");
$preview = $("#preview");
preview = $preview[0];
previewCtx = preview.getContext('2d');
// DEBUG --> mbt preview_tmp (voor de toImageData truc) // DEBUG --> mbt preview_tmp (voor de toImageData truc)
var _ratio = preview.width / canvas.width; var _ratio = preview.width / canvas.width;
preview_tmp = document.getElementById('preview_tmp'); preview_tmp = document.getElementById('preview_tmp');

22
less/base_centerpanel_drawarea.less
View File

@ -7,10 +7,10 @@
border: 4px solid #000; border: 4px solid #000;
border-radius: 15px; border-radius: 15px;
box-sizing: border-box; box-sizing: border-box;
z-index: 15; z-index: 15px;
} }
#canvasContainers { #canvasContainers {
display:table;
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -23,8 +23,10 @@
} }
#mycanvasContainer { #mycanvasContainer {
display:table-cell; position: absolute;
width: auto; top: 0;
left: 0;
width: 78%;
height: 100%; height: 100%;
} }
#mycanvas { #mycanvas {
@ -32,19 +34,21 @@
height: 100%; height: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
/*float: left;*/
border-right: 2px solid #333; border-right: 2px solid #333;
} }
#previewContainer { #previewContainer {
display:table-cell; position: absolute;
width: 150px; top: 0;
right: 0;
width: 22%;
// max-width: 150px;
height: 100%; height: 100%;
} }
#preview { #preview {
width: 150px; min-width: 50px;
width: 100%;
height: 100%; height: 100%;
float: right;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }