diff --git a/Gruntfile.js b/Gruntfile.js index ea14fac..fcbee2c 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -16,6 +16,12 @@ module.exports = function(grunt) { }, js: { src: [ + 'js_src/Events.js', + 'js_src/Class.js', + 'js_src/Button.js', + 'js_src/Popup.js', + 'js_src/btnMove.js', + 'js_src/WordArt.js', 'js_src/Shape.js', 'js_src/Svg.js', 'js_src/Keyboard.js', diff --git a/js_src/Button.js b/js_src/Button.js new file mode 100644 index 0000000..ea3a3ad --- /dev/null +++ b/js_src/Button.js @@ -0,0 +1,118 @@ +(function($) { + + + $.fn.Button = function() { + return $(this).each(function(){ + $.Button($(this)[0]); + }); + }; + + $.Button = function(element) { + var downTimerFPS = 20; + var _timer = undefined; + var _x,_y; + var isDown = false; + var hoi = "fijn"; + + var updateCursor = function(e) { + // console.log(e.offsetX); + if (e.offsetX!=undefined) _x = e.offsetX; + if (e.offsetY!=undefined) _y = e.offsetY; + } + + var startDownTimer = function() { + if (_timer==undefined) { + _timer = setInterval(onDownTimerInterval, 1000/downTimerFPS); + isDown = true; + } + } + + var stopDownTimer = function() { + clearInterval(_timer); + _timer = undefined; + isDown = false; + // _x = undefined; + // _y = undefined; + } + + var onDownTimerInterval = function() { + if (_x!=undefined && _y!=undefined) { + $(element).trigger("onButtonHold",{x:_x,y:_y}); + } else { + console.log("_x") + //warning... _x or _y not set... + } + } + + var onTouchStart = function(e) { + updateCursor(e); + startDownTimer(); + } + + var onTouchEnd = function(e) { + updateCursor(e); + stopDownTimer(); + } + + var onTouchMove = function(e) { + updateCursor(e); + startDownTimer(); + } + + var onMouseDown = function(e) { + updateCursor(e); + startDownTimer(); + } + + var onMouseUp = function(e) { + updateCursor(e); + stopDownTimer(); + } + + var onMouseMove = function(e) { + updateCursor(e); + if (isDown) onMouseDrag(e); + } + + var onMouseDrag = function(e) { + updateCursor(e); + } + + var onDocumentMouseUp = function(e) { + stopDownTimer(); + } + + var onClick = function(e) { + updateCursor(e); + stopDownTimer(); + $(element).trigger("onButtonClick",{x:_x,y:_y}); + } + + var onStartDrag = function(e) { + console.log("onStartDrag"); + } + + var onContextMenu = function(e) { + e.preventDefault(); + } + + //this needs to be done after the function declarations + + $(element).bind({ + touchstart: onTouchStart, + touchend: onTouchEnd, + touchmove: onTouchMove, + mousedown: onMouseDown, + mouseup: onMouseUp, + mousemove: onMouseMove, + contextmenu: onContextMenu, + click: onClick + }); + + $(document).on("mouseup", onDocumentMouseUp); + $(element).css("-webkit-user-select","none"); + $(element).css("-webkit-touch-callout","none"); + + } + +}(jQuery)); diff --git a/js_src/Class.js b/js_src/Class.js new file mode 100644 index 0000000..afa6f1c --- /dev/null +++ b/js_src/Class.js @@ -0,0 +1,64 @@ +/* Simple JavaScript Inheritance + * By John Resig http://ejohn.org/ + * MIT Licensed. + */ +// Inspired by base2 and Prototype +(function(){ + var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/; + + // The base Class implementation (does nothing) + this.Class = function(){}; + + // Create a new Class that inherits from this class + Class.extend = function(prop) { + var _super = this.prototype; + + // Instantiate a base class (but only create the instance, + // don't run the init constructor) + initializing = true; + var prototype = new this(); + initializing = false; + + // Copy the properties over onto the new prototype + for (var name in prop) { + // Check if we're overwriting an existing function + prototype[name] = typeof prop[name] == "function" && + typeof _super[name] == "function" && fnTest.test(prop[name]) ? + (function(name, fn){ + return function() { + var tmp = this._super; + + // Add a new ._super() method that is the same method + // but on the super-class + this._super = _super[name]; + + // The method only need to be bound temporarily, so we + // remove it when we're done executing + var ret = fn.apply(this, arguments); + this._super = tmp; + + return ret; + }; + })(name, prop[name]) : + prop[name]; + } + + // The dummy class constructor + function Class() { + // All construction is actually done in the init method + if ( !initializing && this.init ) + this.init.apply(this, arguments); + } + + // Populate our constructed prototype object + Class.prototype = prototype; + + // Enforce the constructor to be what we expect + Class.prototype.constructor = Class; + + // And make this class extendable + Class.extend = arguments.callee; + + return Class; + }; +})(); \ No newline at end of file diff --git a/js_src/Keyboard.js b/js_src/Keyboard.js index cef211c..e9522a5 100644 --- a/js_src/Keyboard.js +++ b/js_src/Keyboard.js @@ -13,12 +13,9 @@ function initKeyboard() { case 'n': clearDoodle(); break; case 'p': print(); break; case 'u': oopsUndo(); break; - case 'e': settingsWindow.downloadGcode(); break; + case 'g': settingsWindow.downloadGcode(); break; case 'q': stopPrint(); break; case ',': openSettingsWindow(); break; - case 'C': drawCircle(250,180,80,64); break; //x,y,r,res - case 'T': drawCircle(250,180,80,3); break; //triangle - case 'X': drawCircle(250,180,80,6); break; //hexagon case 'h': previewUp(true); break; case 'H': previewDown(true); break; case 's': saveSketch(); break; @@ -26,9 +23,20 @@ function initKeyboard() { case 'l': prevDoodle(); break; case '[': previewTwistLeft(); break; case ']': previewTwistRight(); break; - case '\'': resetTwist(); break; + case '|': resetTwist(); break; + case 't': showWordArtDialog(); break; + case 'i': showShapeDialog(); break; + + case ';': moveShape(-5,0); break; + case '\'': moveShape(5,0); break; + case '-': zoomShape(.95); break; + case '+': zoomShape(1.05); break; + case 'r': rotateShape(.1); break; + case 'R': rotateShape(-.1); break; + default: console.log("Key: '" + ch + "' (" + event.which + ")"); } + event.preventDefault(); //prevents the character to end up in a focussed textfield }) } \ No newline at end of file diff --git a/js_src/Popup.js b/js_src/Popup.js new file mode 100644 index 0000000..4bc6187 --- /dev/null +++ b/js_src/Popup.js @@ -0,0 +1,11 @@ +function showPopup(popup) { + $(".popupMask").show(); + popup.show(); + keyboardShortcutsEnabled=false; +} + +function hidePopup(popup) { + $(".popupMask").hide(); + popup.hide(); + keyboardShortcutsEnabled=true; +} \ No newline at end of file diff --git a/js_src/Printer.js b/js_src/Printer.js index dcae80c..aa7733f 100644 --- a/js_src/Printer.js +++ b/js_src/Printer.js @@ -146,6 +146,8 @@ function Printer() { var firstOne = (sendIndex == 0)? true : false; var start = firstOne; // start printing right away + message.set("Sending doodle to printer..."+sendIndex,Message.NOTICE); + var completed = false; if (this.gcode.length < (sendIndex + sendLength)) { console.log(" sending less than max sendLength (and last)"); diff --git a/js_src/Shape.js b/js_src/Shape.js index 4d3ac17..4263152 100644 --- a/js_src/Shape.js +++ b/js_src/Shape.js @@ -1,13 +1,96 @@ +var shapeResolution=3; + +function initShapeDialog() { + $(".btnShapeOk").on("onButtonClick",onShapeOk); + $(".btnShapeCancel").on("onButtonClick",onShapeCancel); + $(".btnShapePlus").on("onButtonHold",onShapePlus); + $(".btnShapeMin").on("onButtonHold",onShapeMin); + updateShapePreview(); +} + +function showShapeDialog() { + showPopup(popupShape); +} + +function onShapeCancel() { + hidePopup(popupShape); +} + +function onShapeOk() { + hidePopup(popupShape); + + var res = shapeResolution; + + if (res!=undefined) { + if (isNaN(res)) res=3; + if (res<2) res=2; + if (res>100) res=100; + drawCircle(canvasWidth/2,canvasHeight/2,80,res); + } +} + +function onShapePlus() { + shapeResolution++; + if (shapeResolution>50) shapeResolution=50; + updateShapePreview(); +} + +function onShapeMin() { + shapeResolution--; + if (shapeResolution<2) shapeResolution=2; + updateShapePreview(); +} + +function updateShapePreview() { + $(".lblShapeResolution").text(shapeResolution + " sides"); + + var canvas = $(".shapePreview")[0]; + var c = canvas.getContext('2d'); + var w = canvas.width; + var h = canvas.height; + console.log(w,h); + var r = w/2 - 20; + var x0 = w/2; + var y0 = h/2; + var res = shapeResolution; + var step = Math.PI * 2.0 / res; + + c.save(); + c.clearRect(0,0,canvas.width, canvas.height); + c.restore(); + c.beginPath(); + for (var a=0; a