New web GUI based on bootstrap.js

Marlin/src/feature/host_actions.cpp

@@ -113,12 +113,20 @@ void host_action(PGM_P const pstr, const bool eol) {
   void host_action_prompt_button(PGM_P const pstr) { host_action_prompt_plus(PSTR("button"), pstr); }
   void host_action_prompt_end() { host_action_prompt(PSTR("end")); }
   void host_action_prompt_show() { host_action_prompt(PSTR("show")); }
-  void host_prompt_do(const PromptReason reason, PGM_P const pstr, PGM_P const btn1/*=nullptr*/, PGM_P const btn2/*=nullptr*/) {
-    host_action_prompt_begin(reason, pstr);
+
+  void _host_prompt_show(PGM_P const btn1/*=nullptr*/, PGM_P const btn2/*=nullptr*/) {
     if (btn1) host_action_prompt_button(btn1);
     if (btn2) host_action_prompt_button(btn2);
     host_action_prompt_show();
   }
+  void host_prompt_do(const PromptReason reason, PGM_P const pstr, PGM_P const btn1/*=nullptr*/, PGM_P const btn2/*=nullptr*/) {
+    host_action_prompt_begin(reason, pstr);
+    _host_prompt_show(btn1, btn2);
+  }
+  void host_prompt_do(const PromptReason reason, PGM_P const pstr, const char extra_char, PGM_P const btn1/*=nullptr*/, PGM_P const btn2/*=nullptr*/) {
+    host_action_prompt_begin(reason, pstr, extra_char);
+    _host_prompt_show(btn1, btn2);
+  }
 
   void filament_load_host_prompt() {
     const bool disable_to_continue = TERN0(HAS_FILAMENT_SENSOR, runout.filament_ran_out);

Marlin/src/feature/host_actions.h

@@ -71,6 +71,7 @@ void host_action(PGM_P const pstr, const bool eol=true);
   void host_action_prompt_end();
   void host_action_prompt_show();
   void host_prompt_do(const PromptReason reason, PGM_P const pstr, PGM_P const btn1=nullptr, PGM_P const btn2=nullptr);
+  void host_prompt_do(const PromptReason reason, PGM_P const pstr, const char extra_char, PGM_P const btn1=nullptr, PGM_P const btn2=nullptr);
   inline void host_prompt_open(const PromptReason reason, PGM_P const pstr, PGM_P const btn1=nullptr, PGM_P const btn2=nullptr) {
     if (host_prompt_reason == PROMPT_NOT_DEFINED) host_prompt_do(reason, pstr, btn1, btn2);
   }

Marlin/src/feature/pause.cpp

@@ -199,17 +199,18 @@ bool load_filament(const float &slow_load_length/*=0*/, const float &fast_load_l
     first_impatient_beep(max_beep_count);
 
     KEEPALIVE_STATE(PAUSED_FOR_USER);
+
     #if ENABLED(HOST_PROMPT_SUPPORT)
       const char tool = '0'
         #if NUM_RUNOUT_SENSORS > 1
           + active_extruder
         #endif
       ;
-      host_action_prompt_begin(PROMPT_USER_CONTINUE, PSTR("Load Filament T"), tool);
-      host_action_prompt_button(CONTINUE_STR);
-      host_action_prompt_show();
+      host_prompt_do(PROMPT_USER_CONTINUE, PSTR("Load Filament T"), tool, CONTINUE_STR);
     #endif
+
     TERN_(EXTENSIBLE_UI, ExtUI::onUserConfirmRequired_P(PSTR("Load Filament")));
+
     while (wait_for_user) {
       impatient_beep(max_beep_count);
       idle_no_sleep();

Marlin/src/pins/esp32/pins_E4D.h

@@ -42,30 +42,30 @@
 //
 // Limit Switches
 //
-#define X_MIN_PIN                             34
-#define Y_MIN_PIN                             35
-#define Z_MIN_PIN                             16  // 15
+#define X_STOP_PIN                            34
+#define Y_STOP_PIN                            35
+#define Z_STOP_PIN                            16
 
 //
 // Steppers
 //
-#define X_STEP_PIN                            12  // 34//27
-#define X_DIR_PIN                             13  // 35//26
-#define X_ENABLE_PIN                          17  // 0//17//25 // used free pin
+#define X_STEP_PIN                            12
+#define X_DIR_PIN                             13
+#define X_ENABLE_PIN                          17
 //#define X_CS_PIN                             0
 
-#define Y_STEP_PIN                            32  // 33
-#define Y_DIR_PIN                             33  // 32
+#define Y_STEP_PIN                            32
+#define Y_DIR_PIN                             33
 #define Y_ENABLE_PIN                X_ENABLE_PIN
 //#define Y_CS_PIN                            13
 
-#define Z_STEP_PIN                            25  // 14
-#define Z_DIR_PIN                             26  // 12
+#define Z_STEP_PIN                            25
+#define Z_DIR_PIN                             26
 #define Z_ENABLE_PIN                X_ENABLE_PIN
 //#define Z_CS_PIN                             5  // SS_PIN
 
-#define E0_STEP_PIN                           27  // 16
-#define E0_DIR_PIN                            14  // 17
+#define E0_STEP_PIN                           27
+#define E0_DIR_PIN                            14
 #define E0_ENABLE_PIN               X_ENABLE_PIN
 //#define E0_CS_PIN                           21
 
@@ -78,9 +78,9 @@
 //
 // Heaters / Fans
 //
-#define HEATER_0_PIN                           2  // 4//2//(D8)
-#define FAN_PIN                                0  // 2//15//13 (D9)
-#define HEATER_BED_PIN                        15  // 15//0 //(D10)
+#define HEATER_0_PIN                           2
+#define FAN_PIN                                0
+#define HEATER_BED_PIN                        15
 
 // SPI
 #define SDSS                                   5

Marlin/src/pins/pins.h

@@ -666,6 +666,7 @@
 //
 // Custom board (with custom PIO env)
 //
+
 #elif MB(CUSTOM)
   #include "pins_custom.h"                      //                                        env:custom
 

data/www/chart.lineargauge.js

@@ -0,0 +1,234 @@
+(function(Chart) {
+	var helpers = Chart.helpers;
+	var plugins = Chart.plugins;
+	Chart.defaults.global.animation.duration = 1000;
+
+	Chart.defaults._set('linearGauge', {
+		scale: {
+			type: 'linearGauge',
+			horizontal: false,
+			range: {
+				startValue: -100,
+				endValue: 500
+			},
+			responsive: true,
+			font: {
+				fontName: 'Arial',
+				fontSize: 12
+			},
+			axisWidth: 6,
+			ticks: {
+				majorTicks: {
+					interval: 100,
+					height: 1,
+				}
+			},
+			scaleLabel: {
+				display: true,
+				interval: 100,
+				units: '',
+				customValues: [],
+				offset: -10,
+				color: '#777b80'
+			}
+		},
+		padding: {
+			top: 0,
+			bottom: 0,
+			left: 0,
+			right: 0
+		},
+		tooltips: {
+			callbacks: {
+				label: function(tooltipItem, data) {
+					var label = data.datasets[tooltipItem.datasetIndex].label || '';
+
+					if (label) {
+						label += ': ';
+					}
+					label += Math.round(data.datasets[tooltipItem.datasetIndex].data[0] * 100) / 100;
+					return label;
+				}
+			}
+		},
+		legend: {
+			display: true,
+			labels: {
+				fontColor: 'rgb(0, 0, 0)'
+			},
+			position: 'bottom'
+		}
+	});
+
+	Chart.controllers.linearGauge = Chart.DatasetController.extend({
+
+		dataElementType: Chart.elements.Gaugerect,
+
+		initialize: function() {
+			var me = this;
+			var meta;
+
+			Chart.DatasetController.prototype.initialize.apply(me, arguments);
+
+			meta = me.getMeta();
+
+		},
+
+		linkScales: helpers.noop,
+
+		update: function(reset) {
+			var me = this;
+			var rects = me.getMeta().data;
+			var i, ilen;
+			me.datashifts = 0;
+
+			for (i = 0, ilen = rects.length; i < ilen; ++i) {
+				me.updateElement(rects[i], i, me.datashifts);
+				me.datashifts += 10;
+			}
+		},
+
+		updateElement: function(rectangle, index, reset) {
+			var me = this;
+			var chart = me.chart;
+			var meta = me.getMeta();
+			var dataset = me.getDataset();
+
+			var custom = rectangle.custom || {};
+			var rectangleOptions = chart.options.elements.rectangle;
+			var gaugeOptions = chart.options.elements.gaugerect;
+			rectangle._Scale = me.getScaleForId(chart.options.scale.id || 'gaugescale');
+			rectangle._datasetIndex = me.index;
+			rectangle._index = index;
+			rectangle.rangeColorImage = null;
+
+			//	Init element model
+			rectangle._model = {
+				datasetLabel: dataset.label,
+				label: chart.data.labels[index],
+				borderSkipped: custom.borderSkipped ? custom.borderSkipped : rectangleOptions.borderSkipped,
+				backgroundColor: custom.backgroundColor ? custom.backgroundColor : helpers.valueAtIndexOrDefault(dataset.backgroundColor, index, gaugeOptions.backgroundColor),
+				borderColor: custom.borderColor ? custom.borderColor : helpers.valueAtIndexOrDefault(dataset.borderColor, index, rectangleOptions.borderColor),
+				borderWidth: custom.borderWidth ? custom.borderWidth : helpers.valueAtIndexOrDefault(dataset.borderWidth, index, rectangleOptions.borderWidth)
+			};
+
+			//	Set empty view as start point for animation
+			if(typeof rectangle._view === 'undefined') rectangle._view = {};
+
+			me.updateElementGeometry(rectangle, index, reset);
+
+		},
+
+		updateElementGeometry: function(rectangle, index, reset) {
+			var me = this;
+			var model = rectangle._model;
+			var start = rectangle._view;
+			var dataset = me.getDataset().data;
+			var dopt = me.getDataset();
+			var chart = me.chart;
+			var datasets = chart.data.datasets;
+			var gaugeOptions = chart.options.elements.gaugerect;
+			var vscale = me.getScaleForId(chart.options.scale.id || 'gaugescale');
+			//var base = vscale.getBasePixel();
+			var base = vscale.getBase();
+			var horizontal = rectangle._Scale.isHorizontal();
+			//var ruler = me._ruler || me.getRuler();
+			var vpixels = me.calculateBarValuePixels(me.index, index, horizontal);
+
+			model.horizontal = horizontal;
+			model.base = base;
+			model.head = vpixels.head;
+			model.x = horizontal ? vpixels.base : vpixels.offset;
+			model.y = horizontal ? (vpixels.offset - (dopt.width || gaugeOptions.width)) : vpixels.head;
+			model.height = horizontal ? (dopt.width || gaugeOptions.width) : (vpixels.base - vpixels.head);
+			model.width = horizontal ? (vpixels.head - vpixels.base) : (dopt.width || gaugeOptions.width);
+			model.value = vscale.getRightValue(datasets[me.index].data[index]);
+
+			model.scaleValue = 0;
+			if (horizontal) {
+				model.scaleValue = vscale.width / (vscale.options.range.endValue - vscale.options.range.startValue);
+			} else {
+				model.scaleValue = vscale.height / (vscale.options.range.endValue - vscale.options.range.startValue);
+			}
+
+			if(typeof start.x === 'undefined' && typeof start.y === 'undefined'){
+				if(horizontal){
+					start.x = vpixels.base;
+					start.width = 0;
+				} else {
+					start.y = vpixels.base;
+					start.height = 0;
+				}
+			}	
+
+		},
+
+		calculateBarValuePixels: function(datasetIndex, index, horizontal) {
+			var me = this;
+			var chart = me.chart;
+			var scale = me.getScaleForId(chart.options.scale.id || 'gaugescale');
+			var datasets = chart.data.datasets;
+			var dopt = datasets[datasetIndex];
+			var value = scale.getRightValue(datasets[datasetIndex].data[index]);
+			var stacked = scale.options.stacked;
+			var start = 0;
+			var i, imeta, ivalue, base, head, size, offset;
+
+			base = scale.scalePoint(start);
+			head = scale.scalePoint(start + value);
+			size = (head - base) / 2;
+			offset = horizontal ? scale.yCenter - dopt.offset : scale.xCenter + dopt.offset;
+
+			return {
+				size: size,
+				base: base,
+				head: head,
+				center: head + size / 2,
+				offset: offset
+			};
+		},
+
+		draw: function() {
+			var me = this;
+			var chart = me.chart;
+			var rects = me.getMeta().data;
+			var dataset = me.getDataset();
+			var ilen = rects.length;
+			var i = 0;
+
+			helpers.canvas.clipArea(chart.ctx, chart.chartArea);
+
+			for (; i < ilen; ++i) {
+				if (!isNaN(dataset.data[i])) {
+					rects[i].draw();
+				}
+			}
+
+			helpers.canvas.unclipArea(chart.ctx);
+		},
+
+		setHoverStyle: function(rectangle) {
+			var dataset = this.chart.data.datasets[rectangle._datasetIndex];
+			var index = rectangle._index;
+			var custom = rectangle.custom || {};
+			var model = rectangle._model;
+
+			model.backgroundColor = custom.hoverBackgroundColor ? custom.hoverBackgroundColor : helpers.valueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.getHoverColor(model.backgroundColor));
+			model.borderColor = custom.hoverBorderColor ? custom.hoverBorderColor : helpers.valueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.getHoverColor(model.borderColor));
+			model.borderWidth = custom.hoverBorderWidth ? custom.hoverBorderWidth : helpers.valueAtIndexOrDefault(dataset.hoverBorderWidth, index, model.borderWidth);
+		},
+
+		removeHoverStyle: function(rectangle) {
+			var dataset = this.chart.data.datasets[rectangle._datasetIndex];
+			var index = rectangle._index;
+			var custom = rectangle.custom || {};
+			var model = rectangle._model;
+			var rectangleElementOptions = this.chart.options.elements.gaugerect;
+
+			model.backgroundColor = custom.backgroundColor ? custom.backgroundColor : helpers.valueAtIndexOrDefault(dataset.backgroundColor, index, rectangleElementOptions.backgroundColor);
+			model.borderColor = custom.borderColor ? custom.borderColor : helpers.valueAtIndexOrDefault(dataset.borderColor, index, rectangleElementOptions.borderColor);
+			model.borderWidth = custom.borderWidth ? custom.borderWidth : helpers.valueAtIndexOrDefault(dataset.borderWidth, index, rectangleElementOptions.borderWidth);
+		}
+
+	});
+}).call(this, Chart);