From 2cdeaacd1458e0845749d9bf1677d133bcc8f65b Mon Sep 17 00:00:00 2001 From: Rick Companje Date: Thu, 9 Jan 2014 17:05:03 +0100 Subject: [PATCH] major changes in interface --- Gruntfile.js | 6 + js_src/Button.js | 118 +++++ js_src/Class.js | 64 +++ js_src/Keyboard.js | 18 +- js_src/Popup.js | 11 + js_src/Printer.js | 2 + js_src/Shape.js | 166 +++++- js_src/WordArt.js | 139 +++++ js_src/buttonbehaviors.js | 308 ++++++----- js_src/libs/jquery-fastclick.js | 101 ++++ js_src/main.js | 16 +- js_src/utils.js | 4 + js_src/verticalShapes.js | 36 +- less/base.less | 78 +-- less/base_centerpanel.less | 144 +++-- less/base_centerpanel_drawarea.less | 128 ----- less/base_centerpanel_logo.less | 15 - less/base_leftpanel.less | 36 +- less/base_rightpanel.less | 142 +---- less/buttons.less | 165 ++++++ less/config.less | 3 + less/full.less | 1 - less/mobile.less | 151 ++---- less/popup.less | 74 +++ less/progressbar.less | 44 ++ less/styles.less | 2 +- less/thermometer.less | 56 ++ less/verticalshapes.less | 40 +- www/img/buttons/_btnShape.png | Bin 0 -> 9014 bytes www/img/buttons/_btnWordArt.png | Bin 0 -> 7890 bytes www/img/buttons/btnAdd.png | Bin 0 -> 14909 bytes www/img/buttons/btnAddOpen.png | Bin 0 -> 11903 bytes www/img/buttons/btnConv.png | Bin 0 -> 2831 bytes www/img/buttons/btnDiv.png | Bin 0 -> 2325 bytes www/img/buttons/btnEditClosed.png | Bin 0 -> 16291 bytes www/img/buttons/btnEditOpen.png | Bin 0 -> 29069 bytes www/img/buttons/btnInfo.png | Bin 2187 -> 3718 bytes www/img/buttons/btnMin.png | Bin 0 -> 1140 bytes www/img/buttons/btnMove.png | Bin 0 -> 7751 bytes www/img/buttons/btnPlus.png | Bin 0 -> 1195 bytes www/img/buttons/btnRotate.png | Bin 0 -> 4788 bytes www/img/buttons/btnShape.png | Bin 0 -> 4548 bytes www/img/buttons/btnSine.png | Bin 0 -> 3116 bytes www/img/buttons/btnStraight.png | Bin 0 -> 2346 bytes www/img/buttons/btnTwist.png | Bin 0 -> 5856 bytes www/img/buttons/btnUpDown.png | Bin 0 -> 4530 bytes www/img/buttons/btnWordArt.png | Bin 0 -> 5111 bytes www/img/buttons/btnZoomInOut.png | Bin 0 -> 5188 bytes www/img/font.svg | 635 +++++++++++++++++++++++ www/img/logo/doodle3d.png | Bin 0 -> 9365 bytes www/img/logo/logo_full.png | Bin 19400 -> 0 bytes www/img/logo/old/_logo_full.png | Bin 0 -> 48647 bytes www/img/logo/old/logo_full.png | Bin 0 -> 12298 bytes www/img/logo/{ => old}/logo_small.png | Bin www/img/logo/{ => old}/logo_smaller.png | Bin www/img/logo/{ => old}/logo_smallest.png | Bin www/img/logo/pencil.png | Bin 0 -> 4163 bytes www/index.html | 124 ++--- 58 files changed, 2012 insertions(+), 815 deletions(-) create mode 100644 js_src/Button.js create mode 100644 js_src/Class.js create mode 100644 js_src/Popup.js create mode 100644 js_src/WordArt.js create mode 100644 js_src/libs/jquery-fastclick.js delete mode 100644 less/base_centerpanel_drawarea.less delete mode 100644 less/base_centerpanel_logo.less create mode 100644 less/buttons.less create mode 100644 less/config.less delete mode 100644 less/full.less create mode 100644 less/popup.less create mode 100644 less/progressbar.less create mode 100644 less/thermometer.less create mode 100644 www/img/buttons/_btnShape.png create mode 100644 www/img/buttons/_btnWordArt.png create mode 100644 www/img/buttons/btnAdd.png create mode 100644 www/img/buttons/btnAddOpen.png create mode 100644 www/img/buttons/btnConv.png create mode 100644 www/img/buttons/btnDiv.png create mode 100644 www/img/buttons/btnEditClosed.png create mode 100644 www/img/buttons/btnEditOpen.png create mode 100644 www/img/buttons/btnMin.png create mode 100644 www/img/buttons/btnMove.png create mode 100644 www/img/buttons/btnPlus.png create mode 100644 www/img/buttons/btnRotate.png create mode 100644 www/img/buttons/btnShape.png create mode 100644 www/img/buttons/btnSine.png create mode 100644 www/img/buttons/btnStraight.png create mode 100644 www/img/buttons/btnTwist.png create mode 100644 www/img/buttons/btnUpDown.png create mode 100644 www/img/buttons/btnWordArt.png create mode 100644 www/img/buttons/btnZoomInOut.png create mode 100644 www/img/font.svg create mode 100644 www/img/logo/doodle3d.png delete mode 100644 www/img/logo/logo_full.png create mode 100644 www/img/logo/old/_logo_full.png create mode 100644 www/img/logo/old/logo_full.png rename www/img/logo/{ => old}/logo_small.png (100%) rename www/img/logo/{ => old}/logo_smaller.png (100%) rename www/img/logo/{ => old}/logo_smallest.png (100%) create mode 100644 www/img/logo/pencil.png 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