From 965119de33c5e41d00136d5b96df09d033c1dbd2 Mon Sep 17 00:00:00 2001 From: peteruithoven Date: Sun, 1 Dec 2013 18:38:02 +0100 Subject: [PATCH 1/2] First version of new PrinterPanel. --- Gruntfile.js | 1 + js_src/PrinterPanel.js | 73 +++++++++++++++++++++++++++++++++++++++ js_src/SettingsWindow.js | 54 +++++++++-------------------- js_src/gcodeGenerating.js | 15 ++------ www/settings.html | 66 ++++++++++++----------------------- 5 files changed, 115 insertions(+), 94 deletions(-) create mode 100644 js_src/PrinterPanel.js diff --git a/Gruntfile.js b/Gruntfile.js index 05b2e5c..a008876 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -18,6 +18,7 @@ module.exports = function(grunt) { src: [ '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/js_src/PrinterPanel.js b/js_src/PrinterPanel.js new file mode 100644 index 0000000..0e50997 --- /dev/null +++ b/js_src/PrinterPanel.js @@ -0,0 +1,73 @@ +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); + }); + } + 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..952d143 100644 --- a/js_src/SettingsWindow.js +++ b/js_src/SettingsWindow.js @@ -90,6 +90,7 @@ function SettingsWindow() { this.networkMode = SettingsWindow.NETWORK_MODE_NEITHER; this.updatePanel = new UpdatePanel(); + this.printerPanel = new PrinterPanel(); var self = this; @@ -109,7 +110,7 @@ function SettingsWindow() { 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"); @@ -118,8 +119,6 @@ function SettingsWindow() { 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); @@ -127,14 +126,18 @@ function SettingsWindow() { 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); + + // printer panel + var $printerPanelElement = self.form.find("#printerPanel"); + self.printerPanel.init(wifiboxURL,$printerPanelElement); + self.printerPanel.fillForm = self.fillForm; + }); } this.submitwindow = function(e) { @@ -185,7 +188,7 @@ function SettingsWindow() { console.log("Settings:loadSettings response: ",response); settings = response.data; console.log(" settings: ",settings); - self.fillForm(); + self.fillForm(settings); $(document).trigger(SettingsWindow.SETTINGS_LOADED); if(complete) complete(); } @@ -198,16 +201,16 @@ function SettingsWindow() { this.refreshNetworks(); this.retrieveNetworkStatus(false); } - this.fillForm = function() { - console.log("SettingsWindow:fillForm"); - + this.fillForm = function(settings,form) { + if(!form) form = this.form; // if no form specified, fill whole form + //fill form with loaded settings - var selects = this.form.find("select"); + var selects = form.find("select"); selects.each( function(index,element) { var element = $(element); element.val(settings[element.attr('name')]); }); - var inputs = this.form.find("input"); + var inputs = form.find("input"); inputs.each( function(index,element) { var element = $(element); //console.log("printer setting input: ",index,element.attr("type"),element.attr('name')); //,element); @@ -221,13 +224,12 @@ function SettingsWindow() { break; } }); - var textareas = this.form.find("textarea"); + var textareas = form.find("textarea"); textareas.each( function(index,element) { var element = $(element); var value = settings[element.attr('name')]; element.val(value); }); - self.printerSelectorChanged(); } this.saveSettings = function(newSettings,complete) { @@ -288,7 +290,7 @@ function SettingsWindow() { } else { settings = response.data; console.log(" settings: ",settings); - self.fillForm(); + self.fillForm(settings); $(document).trigger(SettingsWindow.SETTINGS_LOADED); self.btnRestoreSettings.removeAttr("disabled"); @@ -345,30 +347,6 @@ function SettingsWindow() { //console.log(settings); return settings; } - - this.printerSelectorChanged = function(e) { - var selectedOption = self.printerSelector.find("option:selected"); - if(self.isMarlinPrinter(selectedOption.val())) { - self.x3gSettings.hide(); - self.gcodeSettings.show(); - } else { - self.gcodeSettings.hide(); - self.x3gSettings.show(); - } - } - - this.isMarlinPrinter = function(printer) { - switch(printer) { - case "makerbot_generic": - case "makerbot_replicator2": - case "makerbot_thingomatic": - return false; - break; - default: - return true; - break; - } - } this.signin = function() { $.ajax({ diff --git a/js_src/gcodeGenerating.js b/js_src/gcodeGenerating.js index 8d19f59..e41d95f 100644 --- a/js_src/gcodeGenerating.js +++ b/js_src/gcodeGenerating.js @@ -261,12 +261,7 @@ function generate_gcode() { function generateStartCode() { var printerType = settings["printer.type"]; - var startCode = ""; - if(settingsWindow.isMarlinPrinter(printerType)) { - startCode = settings["printer.startcode.marlin"]; - } else { - startCode = settings["printer.startcode.x3g"]; - } + var startCode = settings["printer.startcode"]; startCode = subsituteVariables(startCode); startCode = startCode.split("\n"); return startCode; @@ -274,12 +269,7 @@ function generateStartCode() { function generateEndCode() { var printerType = settings["printer.type"]; - var endCode = ""; - if(settingsWindow.isMarlinPrinter(printerType)) { - endCode = settings["printer.endcode.marlin"]; - } else { - endCode = settings["printer.endcode.x3g"]; - } + var endCode = settings["printer.endcode"]; endCode = subsituteVariables(endCode); endCode = endCode.split("\n"); return endCode; @@ -296,6 +286,7 @@ function subsituteVariables(gcode) { switch (printerType) { case "makerbot_replicator2": printerType = "r2x"; break; case "makerbot_thingomatic": printerType = "t6"; break; + case "makerbot_generic": printerType = "r2"; break; } gcode = gcode.replace(/{printingTemp}/gi ,temperature); diff --git a/www/settings.html b/www/settings.html index aac0987..a4323c7 100644 --- a/www/settings.html +++ b/www/settings.html @@ -12,7 +12,7 @@
-
+
3D printer
mm
mm
+
+ GCODE settings +
+
+ +
+
+
+ +
+ + The following texts are replaced: +
+
{printingTemp}
Printing temperature
+
{printingBedTemp}
Printing bed temperature
+
{preheatTemp}
Preheat temperature
+
{preheatBedTemp}
Preheat bed temperature
+
{printerType}
Printer type
+
+ +
@@ -133,49 +154,6 @@
-
- GCODE settings - GCode settings for all printers that use Marlin firmware -
-
- -
-
-
- -
- - The following texts are replaced: -
-
{printingTemp}
Printing temperature
-
{printingBedTemp}
Printing bed temperature
-
{preheatTemp}
Preheat temperature
-
{preheatBedTemp}
Preheat bed temperature
-
- -
-
- GCODE settings - GCODE settings for Makerbots. -
-
- -
-
-
- -
- - The following texts are replaced: -
-
{printingTemp}
Printing temperature
-
{printingBedTemp}
Printing bed temperature
-
{preheatTemp}
Preheat temperature
-
{preheatBedTemp}
Preheat bed temperature
-
{printerType}
Printer type
-
- -
Debug From ff397700b7556620669d93a6bad36fb2e83ec88f Mon Sep 17 00:00:00 2001 From: peteruithoven Date: Wed, 4 Dec 2013 13:42:37 +0100 Subject: [PATCH 2/2] Made gcodePanel collapsible using coolfieldset --- js_src/PrinterPanel.js | 3 ++ js_src/libs/jquery-coolfieldset.js | 57 +++++++++++++++++++++++++++++ www/css/settings.css | 24 ++++++++++++ www/img/buttons/collapsed.gif | Bin 0 -> 106 bytes www/img/buttons/expanded.gif | Bin 0 -> 107 bytes www/index.html | 1 + www/settings.html | 36 +++++++++--------- 7 files changed, 104 insertions(+), 17 deletions(-) create mode 100644 js_src/libs/jquery-coolfieldset.js create mode 100644 www/img/buttons/collapsed.gif create mode 100644 www/img/buttons/expanded.gif diff --git a/js_src/PrinterPanel.js b/js_src/PrinterPanel.js index 0e50997..00663cc 100644 --- a/js_src/PrinterPanel.js +++ b/js_src/PrinterPanel.js @@ -23,6 +23,9 @@ function PrinterPanel() { 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"); diff --git a/js_src/libs/jquery-coolfieldset.js b/js_src/libs/jquery-coolfieldset.js new file mode 100644 index 0000000..d0976a5 --- /dev/null +++ b/js_src/libs/jquery-coolfieldset.js @@ -0,0 +1,57 @@ +/** + * jQuery Plugin for creating collapsible fieldset + * @requires jQuery 1.2 or later + * + * Copyright (c) 2010 Lucky + * Licensed under the GPL license: + * http://www.gnu.org/licenses/gpl.html + * + * "animation" and "speed" options are added by Mitch Kuppinger + */ + +(function($) { + function hideFieldsetContent(obj, options){ + if(options.animation==true) + obj.find('div').slideUp(options.speed); + else + obj.find('div').hide(); + + obj.removeClass("expanded"); + obj.addClass("collapsed"); + } + + function showFieldsetContent(obj, options){ + if(options.animation==true) + obj.find('div').slideDown(options.speed); + else + obj.find('div').show(); + + obj.removeClass("collapsed"); + obj.addClass("expanded"); + } + + $.fn.coolfieldset = function(options){ + var setting={collapsed:false, animation:true, speed:'medium'}; + $.extend(setting, options); + + this.each(function(){ + var fieldset=$(this); + fieldset.addClass("collapsible"); + var legend=fieldset.children('legend'); + + if(setting.collapsed==true){ + hideFieldsetContent(fieldset, setting); + } else { + showFieldsetContent(fieldset, setting); + } + + legend.bind('touchstart mousedown', function() { + if(fieldset.hasClass("collapsed")) { + showFieldsetContent(fieldset, setting); + } else { + hideFieldsetContent(fieldset, setting); + } + }); + }); + } +})(jQuery); \ No newline at end of file diff --git a/www/css/settings.css b/www/css/settings.css index cf5d48a..8e80f71 100644 --- a/www/css/settings.css +++ b/www/css/settings.css @@ -35,10 +35,34 @@ form fieldset fieldset{ clear: left; float: left; } +form fieldset.collapsed { + border-radius: 0; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-width: 1px 0 0 0; + float:none; +} +form fieldset.collapsible { + padding: 0; +} +form fieldset.collapsible div{ + margin: 8px; +} form fieldset legend { margin-left: 10px; font-weight: bold; } +form fieldset.collapsible legend { + padding-left: 10px; + cursor: pointer; +} +form fieldset.expanded legend { + background: transparent url(../img/buttons/expanded.gif) no-repeat center left; +} +form fieldset.collapsed legend { + background: transparent url(../img/buttons/collapsed.gif) no-repeat center left; +} + form label { min-width: 150px; display: block; diff --git a/www/img/buttons/collapsed.gif b/www/img/buttons/collapsed.gif new file mode 100644 index 0000000000000000000000000000000000000000..108ff044e9623718c005b653b5046a4d947f1f1b GIT binary patch literal 106 zcmZ?wbhEHb-X>9@8IC@|NnoG90pMQ$->A0 n)T#rL0hz(TA}+w`qRo_ggPUoi1BVQoYM<)!#+zojf(+IGAN(2z literal 0 HcmV?d00001 diff --git a/www/img/buttons/expanded.gif b/www/img/buttons/expanded.gif new file mode 100644 index 0000000000000000000000000000000000000000..f520c08d400427536999d6de056be910c955b501 GIT binary patch literal 107 zcmZ?wbhEHbNJv<}etmy`e?dWkfPldM{rm6VzptR6aQ^)H z|NsAk)PaHGPZmZ71|9|-5D#Pq1B=9jlbW16!aW-qCvmF<9G)6*FfkxVa6--> + diff --git a/www/settings.html b/www/settings.html index a4323c7..666c10e 100644 --- a/www/settings.html +++ b/www/settings.html @@ -54,24 +54,26 @@ mm
GCODE settings -
-
- -
-
-
- +
+
+
+ +
+
+
+ +
+ + The following texts are replaced: +
+
{printingTemp}
Printing temperature
+
{printingBedTemp}
Printing bed temperature
+
{preheatTemp}
Preheat temperature
+
{preheatBedTemp}
Preheat bed temperature
+
{printerType}
Printer type
+
+
- - The following texts are replaced: -
-
{printingTemp}
Printing temperature
-
{printingBedTemp}
Printing bed temperature
-
{preheatTemp}
Preheat temperature
-
{preheatBedTemp}
Preheat bed temperature
-
{printerType}
Printer type
-
-