Fresh Web GUI (based on bootstrap.js) (MarlinFirmware#19812)

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);

data/www/index-ie.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="Title" content="Marlin WebUI" />
+    <meta name="Description" content="Marlin WebUI based on E4d@box WebUI" />
+    <meta name="Generator" content="E4d@box" />
+    <meta name="Owner" content="E4d@box" />
+    <meta name="Author" content="MandrakeDesign" />
+    <meta name="google" content="notranslate" />
+    <meta http-equiv="Content-Language" content="en_GB" />
+    <title>Marlin WebUI</title>
+    <link rel="shortcut icon" href="#" />
+  </head>
+  <body>
+    <div style="padding-top:100px; text-align:center">
+      <h1>Sorry, but MS Internet Explorer browser is not supported by this web application.<br>Please upgrade to Edge or use another browser</h1>
+      <br><br><br>
+      <h1>Marlin WebUI</h1>
+    </div>
+  </body>
+</html>