vmario/doodle3d-client
0
0
Fork 0
mirror of https://github.com/Doodle3D/doodle3d-client.git synced 2024-11-25 18:47:57 +01:00
Code Issues Releases Wiki Activity

first implementation of different layouting. Doesn't work well yet..

Browse Source
This commit is contained in:
Adriaan Wormgoor 2013-09-18 10:46:36 +02:00
parent 5d29d099ab
commit 6eddb1835c
8 changed files with 201 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

176
css/fixedPosInterface.css
View File

@ -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 */ /* Portrait */
@media screen and (orientation:portrait) { @media screen and (orientation:portrait) {
body { body {
@ -74,39 +31,73 @@ body {
} }
} }
.container { /*
position: fixed;
top: 0px; Containers and content blocks
left: 0px;
border: 2px solid #333; */
width: 1024px; #landscape {
min-height: 500px; position: absolute;
max-height: 768px; top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
max-width: 1024px;
height: 100%; 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;
}
.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;*/ /* 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 { #drawAreaContainer {
/*position: absolute;*/
/*top: 193px;*/
/*left: 193px;*/
/*width: 650px;*/
/*height: 450px;*/
/*background-color: #fff;*/
/*border: 4px solid #000;*/
/*border-radius: 15px;*/
position: absolute; position: absolute;
top: 193px; top: 50%;
left: 193px; left: 50%;
width: 650px; /*margin: -225px 0 0 -325px;*/
height: 450px;
background-color: #fff; background-color: #fff;
width: 75%;
min-width: 150px;
max-width: 650px;
height: 70%;
min-height: 150px;
border: 4px solid #000; border: 4px solid #000;
border-radius: 15px; border-radius: 15px;
} }
@ -126,10 +117,20 @@ body {
} }
#mycanvas { #mycanvas {
width: 500px; /*width: 500px;*/
height: 450px; /*height: 450px;*/
border: 0px solid #333; /*border: 0px solid #333;*/
border-right: 2px 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 { #preview {
@ -137,8 +138,32 @@ body {
position: absolute; position: absolute;
right: 0px; right: 0px;
top: 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 { .vertImage {
@ -150,7 +175,6 @@ body {
width: auto; /* for ie9 */ width: auto; /* for ie9 */
} }
.bgTop { .bgTop {
position: absolute; position: absolute;
top: 0px; top: 0px;

12
index.html
View File

@ -6,9 +6,12 @@
<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-precomposed" href="img/icon.png"/>-->
<link rel="icon" type="image/ico" href="favicon.ico"/> <!--<link rel="apple-touch-icon" href="img/icon.png"/>-->
<meta id="Viewport" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes"> <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/normalize.css" rel="stylesheet" media="screen">
<link href="css/fixedPosInterface.css" rel="stylesheet" media="screen"> <link href="css/fixedPosInterface.css" rel="stylesheet" media="screen">
@ -53,9 +56,6 @@
</div> </div>
<div id="drawAreaContainer"> <div id="drawAreaContainer">
<canvas id="mycanvas"></canvas> <canvas id="mycanvas"></canvas>
<!--<svg id="svg">-->
<!--<path id="path" d="M200 100 L450 100 L450 350 L200 350 L200 100" fill="none" stroke="black" stroke-width="3"/>-->
<!--</svg>-->
<canvas id="preview"></canvas> <canvas id="preview"></canvas>
<canvas id="preview_tmp"></canvas> <canvas id="preview_tmp"></canvas>
<div class="manipulationBtns cf"> <div class="manipulationBtns cf">

2
js/Thermometer.js
View File

@ -1,3 +1,5 @@
var $displayThermometer = $("#thermometerContainer");
function Thermometer() { function Thermometer() {
this.currentTemperature = 0; // default val this.currentTemperature = 0; // default val
this.targetTemperature = 180; // default val this.targetTemperature = 180; // default val

4
js/buttonbehaviors.js
View File

@ -297,7 +297,7 @@ function previewTwistRight(redrawLess) {
function update() { function update() {
if(!displayTempEnabled && printer.alive) { if(!displayTempEnabled && printer.alive) {
displayTemp.show(); //displayTemp.show();
$displayThermometer.show(); $displayThermometer.show();
displayTempEnabled = true; displayTempEnabled = true;
} else if(displayTempEnabled && !printer.alive) { } else if(displayTempEnabled && !printer.alive) {
@ -307,7 +307,7 @@ function update() {
} }
if(displayTempEnabled) { if(displayTempEnabled) {
displayTemp.text(printer.temperature+"/"+printer.targetTemperature); //displayTemp.text(printer.temperature+"/"+printer.targetTemperature);
thermometer.update(printer.temperature, printer.targetTemperature); thermometer.update(printer.temperature, printer.targetTemperature);
} }

13
js/canvasDrawing_v01.js
View File

@ -41,6 +41,7 @@ var lineweight = 2;
function initDoodleDrawing() { function initDoodleDrawing() {
console.log("f:initDoodleDrawing()"); console.log("f:initDoodleDrawing()");
//TODO make these jquery eventhandlers (works for all)
if (!canvas.addEventListener) { if (!canvas.addEventListener) {
canvas.attachEvent('onmousedown',onCanvasMouseDown); canvas.attachEvent('onmousedown',onCanvasMouseDown);
canvas.attachEvent('onmousemove',onCanvasMouseMove); canvas.attachEvent('onmousemove',onCanvasMouseMove);
@ -254,11 +255,11 @@ function adjustPreviewTransformation() {
* *
* * * * * * * * * */ * * * * * * * * * */
function onCanvasMouseDown(e) { function onCanvasMouseDown(e) {
// console.log("onmousedown"); // console.log("onmousedown >> e.offsetX,e.offsetY = " + e.offsetX+","+e.offsetY);
// 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.layerX,e.layerY= " + e.layerX+","+e.layerY); // console.log("onmousedown >> e: " + e);
// console.log("onmousedown >> e: " + e); // console.log(e);
// console.log(e); console.log("f:onCanvasMouseDown()");
dragging = true; dragging = true;
prevCountingTime = new Date().getTime(); prevCountingTime = new Date().getTime();
@ -287,6 +288,7 @@ function onCanvasMouseDown(e) {
var prevPoint = {x:-1, y:-1}; var prevPoint = {x:-1, y:-1};
function onCanvasMouseMove(e) { function onCanvasMouseMove(e) {
console.log("f:onCanvasMouseMove()");
if (!dragging) return; if (!dragging) return;
// console.log("onmousemove"); // 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 prevUpdateFullPreviewInterval = 25; // refers to number of points, not a timeframe
function onCanvasMouseUp(e) { function onCanvasMouseUp(e) {
console.log("f:onCanvasMouseUp()");
// console.log("onmouseup"); // console.log("onmouseup");
dragging = false; dragging = false;
console.log("doodleBounds: " + doodleBounds); console.log("doodleBounds: " + doodleBounds);

6
js/gcodeGenerating_v01.js
View File

@ -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 = 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 // 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) // 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 :) // // -> 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. // 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) { if (layer == 0) {
//gcode.push("M107"); //fan off //gcode.push("M107"); //fan off

83
js/init_layout.js
View File

@ -1,7 +1,7 @@
var imgDims = [320, 320]; // width and height of image var imgDims = [320, 320]; // width and height of image
function doClientAndOrientationStuff() { function doClientAndOrientationStuff() {
console.log("doClientAndOrientationStuff"); console.log("f:doClientAndOrientationStuff()");
$(".agentInfo").text(""); $(".agentInfo").text("");
@ -19,13 +19,18 @@ function doClientAndOrientationStuff() {
//*/ //*/
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) { 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) { if (window.orientation == -90 || window.orientation == 90) {
console.log(" landscape");
// landscape // landscape
// var ww = ( $(window).width() < window.screen.width ) ? $(window).width() : window.screen.width; //get proper width // var ww = ( $(window).width() < window.screen.width ) ? $(window).width() : window.screen.width; //get proper width
var ww = 0; //get proper width var ww = 0; //get proper width
if (window.screen.availWidth) { if (window.innerWidth) {
ww = window.screen.availWidth; ww = window.innerWidth;
// if (window.screen.availWidth) {
// ww = window.screen.availWidth;
// if( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) { // if( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) {
// ww = window.innerWidth; // 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); // $('#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 + "<br/>"); $(".agentInfo").append("ww: " + ww + ", mw: " + mw + "<br/>");
$(".agentInfo").append("ratio: " + ratio + "<br/>"); $(".agentInfo").append("ratio: " + ratio + "<br/>");
$(".agentInfo").append("<br/>"); $(".agentInfo").append("<br/>");
} else { } else {
console.log(" portrait");
// portrait // portrait
// $('#Viewport').attr('content', 'initial-scale='+1+',maximum-scale='+1+',minimum-scale='+1+',user-scalable=no'); // $('#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'); $('#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() + "<br/>"); $(".agentInfo").append("$(window).width(): " + $(window).width() + "<br/>");
$(".agentInfo").append("window.screen.width: " + window.screen.width+ "<br/>"); $(".agentInfo").append("window.screen.width: " + window.screen.width+ "<br/>");
$(".agentInfo").append("window.screen.availWidth: " + window.screen.availWidth+ "<br/>"); $(".agentInfo").append("window.screen.availWidth: " + window.screen.availWidth+ "<br/>");
@ -104,7 +113,22 @@ function doOnResize() {
// console.log("doOnResize() >> " + new Date().getTime()); // console.log("doOnResize() >> " + new Date().getTime());
// $(".container").css("height", window.innerHeight); // $(".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); // console.log("f:doOnResize() >> $('#canvascontainer').innerHeight: " + window.innerHeight);
if (window.innerHeight < 768) { if (window.innerHeight < 768) {
@ -139,14 +163,20 @@ function initLayouting() {
<!--div drawAreaContainer 650,450--> <!--div drawAreaContainer 650,450-->
<!--canvas mycanvas 500, 450--> <!--canvas mycanvas 500, 450-->
<!--canvas preview 150, 450--> <!--canvas preview 150, 450-->
$("#drawAreaContainer").attr("width", parseInt($("#drawAreaContainer").css("width"), 10));
$("#drawAreaContainer").attr("height", parseInt($("#drawAreaContainer").css("height"), 10)); // code from new layouting approach... //TODO give this a more logical spot
canvas.width = parseInt($canvas.css("width"), 10); $drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height"))/2);
canvas.height = parseInt($canvas.css("height"), 10); 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.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;
// console.log("f:initLayouting() >> canvas height: " + canvas.height); // console.log("f:initLayouting() >> canvas height: " + canvas.height);
@ -167,23 +197,9 @@ function initLayouting() {
// $(".container").css("height", window.innerHeight); // $(".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 // window.innerHeight
console.log("window.innerHeight: " + window.innerHeight); console.log("window.innerHeight: " + window.innerHeight);
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);
@ -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();
} }

19
js/main.js
View File

@ -8,9 +8,28 @@ var printer = new Printer();
var thermometer = new Thermometer(); var thermometer = new Thermometer();
var settingsWindow = new SettingsWindow(); var settingsWindow = new SettingsWindow();
var $drawAreaContainer, $doodleCanvas, doodleCanvas, doodleCanvasContext, $previewContainer;
$(function() { $(function() {
console.log("ready"); 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("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");