mirror of
https://github.com/Doodle3D/doodle3d-client.git
synced 2024-11-22 01:07:56 +01:00
changes to how the draw and preview canvasses are positioned and initted
This commit is contained in:
Adriaan Wormgoor
parent
b6f77fc39e
commit
0a44087989
112
index.html
112
index.html
@ -6,42 +6,42 @@
|
||||
<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-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 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">
|
||||
|
||||
<link href="css/normalize.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/styles.css" rel="stylesheet" media="screen">
|
||||
<link href="css/debug.css" rel="stylesheet" media="screen">
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="debugContainer">
|
||||
<div class="debugBtn"></div>
|
||||
<div class="agentInfo"></div>
|
||||
</div>
|
||||
<div id="landscape">
|
||||
<div class="uiButtonsContainer">
|
||||
<img class="bgTop" src="img/bg_top.png" />
|
||||
<div id="landscape" class="clearfix">
|
||||
|
||||
<!-- background images -->
|
||||
<div class="bgContainer">
|
||||
<img class="bgTop" src="img/bg_top.png" />
|
||||
<img class="bgMiddle" src="img/bg_middle.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>
|
||||
|
||||
<!-- 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
|
||||
<div id="printProgressContainer">
|
||||
<label for="progressbarContainer">Progress:</label><span class="progressAmount">0%</span>
|
||||
@ -53,40 +53,53 @@
|
||||
<div id="thermometerContainer">
|
||||
<canvas id="thermometerCanvas" width="100" height="125"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div id="drawAreaContainer">
|
||||
<div id="canvasContainers">
|
||||
<div id="mycanvasContainer">
|
||||
<canvas id="mycanvas"></canvas>
|
||||
</div>
|
||||
<div id="previewContainer">
|
||||
<canvas id="preview"></canvas>
|
||||
</div>
|
||||
<div class="btnsSettingsInfo">
|
||||
<img class="btnSettings btn" src="img/buttons/btnSettings.png">
|
||||
<img class="btnInfo btn" src="img/buttons/btnInfo.png">
|
||||
</div>
|
||||
<canvas id="preview_tmp"></canvas>
|
||||
<div class="manipulationBtns cf">
|
||||
<div id="btnsUpDown">
|
||||
<div class="manipulationBtn" id="btnMoveUp"></div>
|
||||
<div class="manipulationBtn" id="btnMoveDown"></div>
|
||||
</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="mycanvasContainer">
|
||||
<canvas id="mycanvas"></canvas>
|
||||
</div>
|
||||
<div id="previewContainer">
|
||||
<canvas id="preview"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div id="btnsTurnLeftRight">
|
||||
<div class="manipulationBtn" id="btnTwistLeft"></div>
|
||||
<div class="manipulationBtn" id="btnTwistRight"></div>
|
||||
<canvas id="preview_tmp"></canvas>
|
||||
</div>
|
||||
<div class="bottompanel">
|
||||
<div class="manipulationBtns clearfix">
|
||||
<div id="btnsUpDown">
|
||||
<img class="manipulationBtn" id="btnMoveUp" src="img/buttons/btnUp.png" />
|
||||
<img class="manipulationBtn" id="btnMoveDown" src="img/buttons/btnDown.png" />
|
||||
</div>
|
||||
<div id="btnsTurnLeftRight">
|
||||
<img class="manipulationBtn" id="btnTwistLeft" src="img/buttons/btnTurnLeft.png" />
|
||||
<img class="manipulationBtn" id="btnTwistRight" src="img/buttons/btnTurnRight.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="debug_textArea">
|
||||
<textarea rows="5" cols="115" id="textdump"></textarea>
|
||||
<textarea rows="5" cols="60" id="textdump"></textarea>
|
||||
</div>
|
||||
<div id="contentOverlay">
|
||||
<div id="settings">
|
||||
<header>
|
||||
<img src="img/settings_lable.png" alt="settings"/>
|
||||
</header>
|
||||
<div class="settingsLabelContainer">
|
||||
<img class="settingsLabelImg" src="img/settings_lable.png" alt="settings" />
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="settings">henk</div>
|
||||
<div class="manipulationBtns">
|
||||
<div class="btnOK"></div>
|
||||
<div class="settings"></div>
|
||||
<div class="btnContainer">
|
||||
<img src="img/buttons/btnOk_settings.png" class="btnOK" alt="settings"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -106,6 +119,7 @@
|
||||
<script src="js/Printer.js"></script>
|
||||
<script src="js/Thermometer.js"></script>
|
||||
<script src="js/utils.js"></script>
|
||||
<script src="js/sidebar.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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("");
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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...
|
||||
|
||||
@ -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');
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user