diff --git a/Gruntfile.js b/Gruntfile.js index 05b2e5c..ea14fac 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -16,8 +16,12 @@ module.exports = function(grunt) { }, js: { src: [ + 'js_src/Shape.js', + 'js_src/Svg.js', + 'js_src/Keyboard.js', 'js_src/SettingsWindow.js', 'js_src/UpdatePanel.js', + 'js_src/PrinterPanel.js', 'js_src/Help.js', 'js_src/d3dServerInterfacing.js', 'js_src/verticalShapes.js', diff --git a/Makefile b/Makefile index 84a769a..f4ed59f 100644 --- a/Makefile +++ b/Makefile @@ -4,7 +4,7 @@ include $(TOPDIR)/rules.mk PKG_NAME := doodle3d-client -PKG_VERSION := 0.9.0 +PKG_VERSION := 0.9.2 PKG_RELEASE := 1 PKG_BUILD_DIR := $(BUILD_DIR)/$(PKG_NAME) @@ -22,6 +22,16 @@ define Package/doodle3d-client/description This package provides the Doodle3D web client, which interacts with the wifibox package using a REST API. endef +define Package/doodle3d-client/config + config DOODLE3D_CLIENT_MINIFY_JS + depends on PACKAGE_doodle3d-client + bool "Minify javascript" + default y + help + All javascript files are concatenated into one file; this file enables minification + of that file. Disable this to make on-the-fly modifications easier. +endef + define Build/Prepare mkdir -p $(PKG_BUILD_DIR) $(CP) less $(PKG_BUILD_DIR)/ @@ -35,7 +45,11 @@ endef define Build/Compile npm install - grunt less autoprefixer cssmin concat uglify +ifeq ($(CONFIG_DOODLE3D_CLIENT_MINIFY_JS),y) + grunt less autoprefixer cssmin concat uglify +else + grunt less autoprefixer cssmin concat +endif endef define Package/doodle3d-client/install @@ -56,7 +70,16 @@ define Package/doodle3d-client/install $(CP) $(PKG_BUILD_DIR)/www/img/* $(1)/www/img/ - $(CP) $(PKG_BUILD_DIR)/www/js/doodle3d-client.min.js $(1)/www/js/ +ifeq ($(CONFIG_DOODLE3D_CLIENT_MINIFY_JS),y) + $(CP) $(PKG_BUILD_DIR)/www/js/doodle3d-client.min.js $(1)/www/js/ +else + #NOTE: if using a symlink here installation with openwrt make fails + # when trying to build with minification after package has been built + # without minification (dangling symlink breaks openwrt's final copy command) + $(CP) $(PKG_BUILD_DIR)/www/js/doodle3d-client.js $(1)/www/js/doodle3d-client.min.js + #$(LN) -s /www/js/doodle3d-client.js $(1)/www/js/doodle3d-client.min.js +endif + $(CP) $(PKG_BUILD_DIR)/www/js/libs/* $(1)/www/js/libs/ $(CP) $(PKG_BUILD_DIR)/www/library $(1)/www/ diff --git a/js_src/Keyboard.js b/js_src/Keyboard.js new file mode 100644 index 0000000..cef211c --- /dev/null +++ b/js_src/Keyboard.js @@ -0,0 +1,34 @@ +var keyboardShortcutsEnabled = true; + +function initKeyboard() { + + $(document).keypress(function(event) { + + if (!keyboardShortcutsEnabled) return; + + var ch = String.fromCharCode(event.which); + + switch (ch) { + case 'c': clearDoodle(); break; + case 'n': clearDoodle(); break; + case 'p': print(); break; + case 'u': oopsUndo(); break; + case 'e': 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; + case 'L': nextDoodle(); break; + case 'l': prevDoodle(); break; + case '[': previewTwistLeft(); break; + case ']': previewTwistRight(); break; + case '\'': resetTwist(); break; + default: console.log("Key: '" + ch + "' (" + event.which + ")"); + } + }) + +} \ No newline at end of file diff --git a/js_src/Printer.js b/js_src/Printer.js index aedb569..dcae80c 100644 --- a/js_src/Printer.js +++ b/js_src/Printer.js @@ -11,7 +11,7 @@ function setPrintprogress(val) { //*/ function Printer() { - + Printer.WIFIBOX_DISCONNECTED_STATE = "wifibox disconnected"; Printer.UNKNOWN_STATE = "unknown"; // happens when a printer is connection but there isn't communication yet Printer.DISCONNECTED_STATE = "disconnected"; // printer disconnected @@ -21,40 +21,40 @@ function Printer() { Printer.STOPPING_STATE = "stopping"; // when you stop (abort) a print it prints the endcode Printer.ON_BEFORE_UNLOAD_MESSAGE = "You're doodle is still being send to the printer, leaving will result in a incomplete 3D print"; - + this.temperature = 0; this.targetTemperature = 0; this.currentLine = 0; this.totalLines = 0; this.bufferedLines = 0; this.state = Printer.UNKNOWN_STATE; - this.hasControl = true; // whether this client has control access - - this.wifiboxURL; - + this.hasControl = true; // whether this client has control access + + this.wifiboxURL; + this.checkStatusInterval = 3000; this.checkStatusDelay; this.timeoutTime = 3000; this.sendPrintPartTimeoutTime = 5000; - + this.gcode; // gcode to be printed - this.sendLength = 1500; // max amount of gcode lines per post (limited because WiFi box can't handle to much) + this.sendLength = 500; // max amount of gcode lines per post (limited because WiFi box can't handle to much) this.retryDelay = 2000; // retry setTimout delay this.retrySendPrintPartDelay; // retry setTimout instance this.retryCheckStatusDelay; // retry setTimout instance this.retryStopDelay; // retry setTimout instance this.retryPreheatDelay; // retry setTimout instance - + Printer.MAX_GCODE_SIZE = 10; // max size of gcode in MB's (estimation) - + this.stateOverruled = false; - + // Events Printer.UPDATE = "update"; - + var self = this; - + this.init = function() { console.log("Printer:init"); //this.wifiboxURL = "http://" + window.location.host + "/cgi-bin/d3dapi"; @@ -62,21 +62,21 @@ function Printer() { this.wifiboxURL = wifiboxURL; //this.wifiboxURL = "proxy5.php"; console.log(" wifiboxURL: ",this.wifiboxURL); - + if(autoUpdate) { this.startStatusCheckInterval(); } } - + this.preheat = function() { console.log("Printer:preheat"); - + if( this.state == Printer.BUFFERING_STATE || this.state == Printer.PRINTING_STATE || this.state == Printer.STOPPING_STATE) { return; } - + var self = this; if (communicateWithWifibox) { $.ajax({ @@ -91,7 +91,7 @@ function Printer() { self.retryPreheatDelay = setTimeout(function() { self.preheat() },self.retryDelay); // retry after delay } } - }).fail(function() { + }).fail(function() { console.log("Printer:preheat: failed"); clearTimeout(self.retryPreheatDelay); self.retryPreheatDelay = setTimeout(function() { self.preheat() },self.retryDelay); // retry after delay @@ -100,41 +100,41 @@ function Printer() { console.log ("Printer >> f:preheat() >> communicateWithWifibox is false, so not executing this function"); } } - + this.print = function(gcode) { console.log("Printer:print"); console.log(" gcode total # of lines: " + gcode.length); - + message.set("Sending doodle to printer...",Message.NOTICE); self.addLeaveWarning(); - + /*for (i = 0; i < gcode.length; i++) { gcode[i] += " (" + i + ")"; }*/ - + this.sendIndex = 0; this.gcode = gcode; - + //console.log(" gcode[20]: ",gcode[20]); var gcodeLineSize = this.byteSize(gcode[20]); //console.log(" gcodeLineSize: ",gcodeLineSize); var gcodeSize = gcodeLineSize*gcode.length/1024/1024; // estimate gcode size in MB's console.log(" gcodeSize: ",gcodeSize); - + if(gcodeSize > Printer.MAX_GCODE_SIZE) { alert("Error: Printer:print: gcode file is probably too big ("+gcodeSize+"MB) (max: "+Printer.MAX_GCODE_SIZE+"MB)"); console.log("Error: Printer:print: gcode file is probably too big ("+gcodeSize+"MB) (max: "+Printer.MAX_GCODE_SIZE+"MB)"); - + this.overruleState(Printer.IDLE_STATE); this.startStatusCheckInterval(); message.hide(); self.removeLeaveWarning(); - + return; } - + //this.targetTemperature = settings["printer.temperature"]; // slight hack - + this.sendPrintPart(this.sendIndex, this.sendLength); } this.byteSize = function(s){ @@ -142,10 +142,10 @@ function Printer() { } this.sendPrintPart = function(sendIndex,sendLength) { console.log("Printer:sendPrintPart sendIndex: " + sendIndex + "/" + this.gcode.length + ", sendLength: " + sendLength); - + var firstOne = (sendIndex == 0)? true : false; var start = firstOne; // start printing right away - + var completed = false; if (this.gcode.length < (sendIndex + sendLength)) { console.log(" sending less than max sendLength (and last)"); @@ -154,7 +154,7 @@ function Printer() { completed = true; } var gcodePart = this.gcode.slice(sendIndex, sendIndex+sendLength); - + var postData = { gcode: gcodePart.join("\n"), first: firstOne, start: start}; var self = this; if (communicateWithWifibox) { @@ -166,7 +166,7 @@ function Printer() { timeout: this.sendPrintPartTimeoutTime, success: function(data){ console.log("Printer:sendPrintPart response: ",data); - + if(data.status == "success") { if (completed) { console.log("Printer:sendPrintPart:gcode sending completed"); @@ -177,8 +177,8 @@ function Printer() { //self.targetTemperature = settings["printer.temperature"]; // slight hack } else { // only if the state hasn't bin changed (by for example pressing stop) we send more gcode - - console.log("Printer:sendPrintPart:gcode part received (state: ",self.state,")"); + + console.log("Printer:sendPrintPart:gcode part received (state: ",self.state,")"); if(self.state == Printer.PRINTING_STATE || self.state == Printer.BUFFERING_STATE) { console.log("Printer:sendPrintPart:sending next part"); self.sendPrintPart(sendIndex + sendLength, sendLength); @@ -186,22 +186,22 @@ function Printer() { } } // after we know the first gcode packed has bin received or failed - // (and the driver had time to update the printer.state) + // (and the driver had time to update the printer.state) // we start checking the status again if(sendIndex == 0) { self.startStatusCheckInterval(); } } - }).fail(function() { + }).fail(function() { console.log("Printer:sendPrintPart: failed"); clearTimeout(self.retrySendPrintPartDelay); self.retrySendPrintPartDelay = setTimeout(function() { console.log("request printer:sendPrintPart failed retry"); - self.sendPrintPart(sendIndex, sendLength) + self.sendPrintPart(sendIndex, sendLength) },self.retryDelay); // retry after delay - + // after we know the gcode packed has bin received or failed - // (and the driver had time to update the printer.state) + // (and the driver had time to update the printer.state) // we start checking the status again self.startStatusCheckInterval(); }); @@ -209,7 +209,7 @@ function Printer() { console.log ("Printer >> f:sendPrintPart() >> communicateWithWifibox is false, so not executing this function"); } } - + this.stop = function() { console.log("Printer:stop"); endCode = generateEndCode(); @@ -225,19 +225,19 @@ function Printer() { timeout: this.timeoutTime, success: function(data){ console.log("Printer:stop response: ", data); - + // after we know the stop has bin received or failed - // (and the driver had time to update the printer.state) + // (and the driver had time to update the printer.state) // we start checking the status again self.startStatusCheckInterval(); } - }).fail(function() { + }).fail(function() { console.log("Printer:stop: failed"); clearTimeout(self.retryStopDelay); self.retryStopDelay = setTimeout(function() { self.stop() },self.retryDelay); // retry after delay - + // after we know the stop has bin received or failed - // (and the driver had time to update the printer.state) + // (and the driver had time to update the printer.state) // we start checking the status again self.startStatusCheckInterval(); }); @@ -269,9 +269,9 @@ function Printer() { timeout: this.timeoutTime, success: function(response){ //console.log(" Printer:status: ",response.data.state); //," response: ",response); - + self.handleStatusUpdate(response); - + clearTimeout(self.checkStatusDelay); clearTimeout(self.retryCheckStatusDelay); self.checkStatusDelay = setTimeout(function() { self.checkStatus() }, self.checkStatusInterval); @@ -300,11 +300,11 @@ function Printer() { self.state = data.state; //console.log(" state > ",self.state); } - + // temperature self.temperature = data.hotend; self.targetTemperature = data.hotend_target; - + // progress self.currentLine = data.current_line; self.totalLines = data.total_lines; @@ -312,7 +312,7 @@ function Printer() { // access self.hasControl = data.has_control; - + if(self.state == Printer.PRINTING_STATE || self.state == Printer.STOPPING_STATE) { console.log("progress: ",self.currentLine+"/"+self.totalLines+" ("+self.bufferedLines+") ("+self.state+")"); } @@ -322,14 +322,14 @@ function Printer() { this.overruleState = function(newState) { this.stateOverruled = true; console.log(" stateOverruled: ",this.stateOverruled); - + self.state = newState; - + $(document).trigger(Printer.UPDATE); - + this.stopStatusCheckInterval(); } - + this.removeLeaveWarning = function() { window.onbeforeunload = null; } @@ -339,4 +339,4 @@ function Printer() { return Printer.ON_BEFORE_UNLOAD_MESSAGE; }; } -} \ No newline at end of file +} diff --git a/js_src/PrinterPanel.js b/js_src/PrinterPanel.js new file mode 100644 index 0000000..00663cc --- /dev/null +++ b/js_src/PrinterPanel.js @@ -0,0 +1,76 @@ +function PrinterPanel() { + this.wifiboxURL; + this.element; + + this.retryDelay = 1000; + this.retryDelayer; // setTimout instance + //this.timeoutTime = 3000; + + this.printerType; + this.printerSettingsNames; + + var self = this; + + this.init = function(wifiboxURL,element) { + self.wifiboxURL = wifiboxURL; + self.element = element; + + self.printerSelector = element.find("#printerType"); + self.printerSelector.change(self.printerSelectorChanged); + + var formElements = element.find("[name]"); + self.printerSettingsNames = []; + formElements.each( function(index,element) { + self.printerSettingsNames.push(element.name); + }); + + var gcodePanel = element.find("#gcodePanel"); + gcodePanel.coolfieldset({collapsed:true}); + } + this.printerSelectorChanged = function(e) { + console.log("PrinterPanel:printerSelectorChanged"); + console.log("self: ", self); + self.printerType = self.printerSelector.find("option:selected").val(); + self.savePrinterType(self.loadPrinterSettings); + } + + this.savePrinterType = function(complete) { + console.log("PrinterPanel:savePrinterType"); + var postData = {}; + postData[self.printerSelector.attr("name")] = self.printerType; + console.log("postData: ",postData); + $.ajax({ + url: self.wifiboxURL + "/config/", + type: "POST", + dataType: 'json', + data: postData, + success: function(response){ + console.log("PrinterPanel:savePrinterType response: ",response); + if(complete) complete(); + } + }).fail(function() { + console.log("PrinterPanel:savePrinterType: failed"); + }); + } + this.loadPrinterSettings = function() { + console.log("PrinterPanel:loadPrinterSettings"); + console.log(" self.printerSettingsNames: ",self.printerSettingsNames); + var getData = {}; + $.each(self.printerSettingsNames, function(key, val) { + getData[val] = ""; + }); + console.log("getData: ",getData); + $.ajax({ + url: self.wifiboxURL + "/config/", + dataType: 'json', + data: getData, + success: function(response){ + console.log("PrinterPanel:loadPrinterSettings response: ",response); + + self.fillForm(response.data,self.element); + } + }).fail(function() { + console.log("PrinterPanel:loadPrinterSettings: failed"); + }); + } +} \ No newline at end of file diff --git a/js_src/SettingsWindow.js b/js_src/SettingsWindow.js index 4b38378..f38c8b4 100644 --- a/js_src/SettingsWindow.js +++ b/js_src/SettingsWindow.js @@ -1,30 +1,5 @@ //these settings are defined in the firmware (conf_defaults.lua) and will be initialized in loadSettings() -var settings = { -"network.ap.ssid": "d3d-ap-%%MAC_ADDR_TAIL%%", -"network.ap.address": "192.168.10.1", -"network.ap.netmask": "255.255.255.0", -"printer.temperature": 220, -"printer.maxObjectHeight": 150, -"printer.layerHeight": 0.2, -"printer.wallThickness": 0.7, -"printer.screenToMillimeterScale": 0.3, -"printer.speed": 50, -"printer.travelSpeed": 200, -"printer.filamentThickness": 2.85, -"printer.enableTraveling": true, -"printer.useSubLayers": true, -"printer.firstLayerSlow": true, -"printer.autoWarmUp": true, -"printer.simplify.iterations": 10, -"printer.simplify.minNumPoints": 15, -"printer.simplify.minDistance": 3, -"printer.retraction.enabled": true, -"printer.retraction.speed": 50, -"printer.retraction.minDistance": 1, -"printer.retraction.amount": 5, -"printer.autoWarmUpCommand": "M104 S220 (hardcoded temperature)" -} - +var settings = { } //wrapper to prevent scoping issues in showSettings() function openSettingsWindow() { @@ -45,51 +20,52 @@ function SettingsWindow() { this.retrySaveSettingsDelay; // retry setTimout instance this.retryResetSettingsDelay // retry setTimout instance this.retryRetrieveNetworkStatusDelay;// retry setTimout instance - + this.apFieldSet; this.clientFieldSet; this.networks; this.currentNetwork; // the ssid of the network the box is on - this.selectedNetwork; // the ssid of the selected network in the client mode settings - this.currentLocalIP = ""; - this.clientModeState = SettingsWindow.NOT_CONNECTED; - this.currentAP; - this.apModeState = SettingsWindow.NO_AP; + this.selectedNetwork; // the ssid of the selected network in the client mode settings + this.currentLocalIP = ""; + this.clientModeState = SettingsWindow.NOT_CONNECTED; + this.currentAP; + this.apModeState = SettingsWindow.NO_AP; - // after switching wifi network or creating a access point we delay the status retrieval - // because the webserver needs time to switch - this.retrieveNetworkStatusDelay; // setTimout delay - this.retrieveNetworkStatusDelayTime = 1000; + // after switching wifi network or creating a access point we delay the status retrieval + // because the webserver needs time to switch + this.retrieveNetworkStatusDelay; // setTimout delay + this.retrieveNetworkStatusDelayTime = 1000; // Events SettingsWindow.SETTINGS_LOADED = "settingsLoaded"; - // network client mode states - SettingsWindow.NOT_CONNECTED = "not connected"; // also used as first item in networks list - SettingsWindow.CONNECTED = "connected"; - SettingsWindow.CONNECTING = "connecting"; - SettingsWindow.CONNECTING_FAILED = "connecting failed" + // network client mode states + SettingsWindow.NOT_CONNECTED = "not connected"; // also used as first item in networks list + SettingsWindow.CONNECTED = "connected"; + SettingsWindow.CONNECTING = "connecting"; + SettingsWindow.CONNECTING_FAILED = "connecting failed" - // network access point mode states - SettingsWindow.NO_AP = "no ap"; - SettingsWindow.AP = "ap"; - SettingsWindow.CREATING_AP = "creating ap"; + // network access point mode states + SettingsWindow.NO_AP = "no ap"; + SettingsWindow.AP = "ap"; + SettingsWindow.CREATING_AP = "creating ap"; - SettingsWindow.API_CONNECTING_FAILED = -1 - SettingsWindow.API_NOT_CONNECTED = 0 - SettingsWindow.API_CONNECTING = 1 - SettingsWindow.API_CONNECTED = 2 - SettingsWindow.API_CREATING = 3 - SettingsWindow.API_CREATED = 4 + SettingsWindow.API_CONNECTING_FAILED = -1 + SettingsWindow.API_NOT_CONNECTED = 0 + SettingsWindow.API_CONNECTING = 1 + SettingsWindow.API_CONNECTED = 2 + SettingsWindow.API_CREATING = 3 + SettingsWindow.API_CREATED = 4 - // network mode - SettingsWindow.NETWORK_MODE_NEITHER = "neither"; - SettingsWindow.NETWORK_MODE_CLIENT = "clientMode"; - SettingsWindow.NETWORK_MODE_ACCESS_POINT = "accessPointMode"; + // network mode + SettingsWindow.NETWORK_MODE_NEITHER = "neither"; + SettingsWindow.NETWORK_MODE_CLIENT = "clientMode"; + SettingsWindow.NETWORK_MODE_ACCESS_POINT = "accessPointMode"; - this.networkMode = SettingsWindow.NETWORK_MODE_NEITHER; + this.networkMode = SettingsWindow.NETWORK_MODE_NEITHER; - this.updatePanel = new UpdatePanel(); + this.updatePanel = new UpdatePanel(); + this.printerPanel = new PrinterPanel(); var self = this; @@ -100,43 +76,61 @@ function SettingsWindow() { this.window = $("#settings"); this.btnOK = this.window.find(".btnOK"); enableButton(this.btnOK,this.submitwindow); - - this.window.find(".settingsContainer").load("settings.html", function() { - console.log("Settings:finished loading settings.html, now loading settings..."); - self.form = self.window.find("form"); + this.window.find(".settingsContainer").load("settings.html", function() { + console.log("Settings:finished loading settings.html, now loading settings..."); + + self.form = self.window.find("form"); self.form.submit(function (e) { self.submitwindow(e) }); - self.loadSettings(); - - self.printerSelector = self.form.find("#printerType"); - var btnAP = self.form.find("label[for='ap']"); - var btnClient = self.form.find("label[for='client']"); - var btnRefresh = self.form.find("#refreshNetworks"); - var btnConnect = self.form.find("#connectToNetwork"); - var btnCreate = self.form.find("#createAP"); - var networkSelector = self.form.find("#network"); - self.apFieldSet = self.form.find("#apSettings"); - self.clientFieldSet = self.form.find("#clientSettings"); - self.gcodeSettings = self.form.find("#gcodeSettings"); - self.x3gSettings = self.form.find("#x3gSettings"); - self.btnRestoreSettings = self.form.find("#restoreSettings"); - - btnAP.on('touchstart mousedown',self.showAPSettings); - btnClient.on('touchstart mousedown',self.showClientSettings); - btnRefresh.on('touchstart mousedown',self.refreshNetworks); - btnConnect.on('touchstart mousedown',self.connectToNetwork); - btnCreate.on('touchstart mousedown',self.createAP); - self.printerSelector.change(self.printerSelectorChanged); - networkSelector.change(self.networkSelectorChanged); - self.btnRestoreSettings.on('touchstart mousedown',self.resetSettings); - - - // update panel - var $updatePanelElement = self.form.find("#updatePanel"); - self.updatePanel.init(wifiboxURL,$updatePanelElement); - }); - } + $.ajax({ + url: self.wifiboxURL + "/printer/listall", + dataType: 'json', + timeout: self.timeoutTime, + success: function(response) { + console.log("Settings:printer/listall response: ",response.data.printers); + + $.each(response.data.printers, function(key, value) { + // console.log(key,value); + $('#printerType').append($('