vmario/doodle3d-client
0
0
Fork 0
mirror of https://github.com/Doodle3D/doodle3d-client.git synced 2025-06-11 09:23:17 +02: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
Download Patch File Download Diff File Expand all files Collapse all files

2
js/Thermometer.js
View File

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

4
js/buttonbehaviors.js
View File

@ -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);
}

13
js/canvasDrawing_v01.js
View File

@ -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);

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 = 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

83
js/init_layout.js
View File

@ -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
View File

@ -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");