mirror of
https://github.com/Doodle3D/doodle3d-client.git
synced 2024-11-22 01:07:56 +01:00
first implementation of different layouting. Doesn't work well yet..
This commit is contained in:
Adriaan Wormgoor
parent
5d29d099ab
commit
6eddb1835c
@ -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;
|
||||
border: 2px solid #333;
|
||||
width: 1024px;
|
||||
min-height: 500px;
|
||||
max-height: 768px;
|
||||
/*
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
12
index.html
12
index.html
@ -6,9 +6,12 @@
|
||||
<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="icon" type="image/ico" href="favicon.ico"/>
|
||||
<meta id="Viewport" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes">
|
||||
<!--<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">
|
||||
@ -53,9 +56,6 @@
|
||||
</div>
|
||||
<div id="drawAreaContainer">
|
||||
<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_tmp"></canvas>
|
||||
<div class="manipulationBtns cf">
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
var $displayThermometer = $("#thermometerContainer");
|
||||
|
||||
function Thermometer() {
|
||||
this.currentTemperature = 0; // default val
|
||||
this.targetTemperature = 180; // default val
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
|
||||
@ -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("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);
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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 + "<br/>");
|
||||
$(".agentInfo").append("ratio: " + ratio + "<br/>");
|
||||
$(".agentInfo").append("<br/>");
|
||||
} 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() + "<br/>");
|
||||
$(".agentInfo").append("window.screen.width: " + window.screen.width+ "<br/>");
|
||||
$(".agentInfo").append("window.screen.availWidth: " + window.screen.availWidth+ "<br/>");
|
||||
@ -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() {
|
||||
<!--div drawAreaContainer 650,450-->
|
||||
<!--canvas mycanvas 500, 450-->
|
||||
<!--canvas preview 150, 450-->
|
||||
$("#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();
|
||||
}
|
||||
|
||||
19
js/main.js
19
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");
|
||||
|
||||
Loading…
Reference in New Issue
Block a user