Version 1.17

Added support for HTML5 notifications

core/js/notify.js

@@ -7,7 +7,7 @@
  */
 
 
-var notificationOptions = {
+var jsNotificationOptions = {
 	animate: {
 		enter: 'animated fadeInDown',
 		exit: 'animated fadeOutDown'
@@ -29,7 +29,7 @@ var notificationOptions = {
 };
 
 // Apply custom options for JS plugin
-$.notifyDefaults(notificationOptions);
+$.notifyDefaults(jsNotificationOptions);
 
 function showDownloadMessage() {
 	var notifySettings = { icon: "glyphicon glyphicon-compressed",
@@ -68,7 +68,30 @@ function showHaltMessage() {
 }
 
 function showMessage(type, title, message, timeout, allowDismiss) {
-	// Find a suitable icon
+	// Set default arguments
+	if (timeout == undefined) { timeout = settings.notificationTimeout; }
+	if (allowDismiss == undefined) { allowDismiss = true; }
+
+	// Check if an HTML5 notification shall be displayed
+	if (document.hidden && settings.useHtmlNotifications) {
+		// HTML5 notifications expect plain strings. Remove potential styles first
+		if (title.indexOf("<") != -1) { title = $("<span>" + title + "</span>").text(); }
+		if (message.indexOf("<") != -1) { message = $("<span>" + message + "</span>").text(); }
+
+		// Create new notification and display it
+		var options = {
+			body: message,
+			icon: "favicon.ico",
+			dir : "ltr",
+			requireInteraction: allowDismiss
+		};
+		var notification = new Notification(title, options);
+		if (allowDismiss) { notification.onclick = function() { this.close(); }; }
+		if (timeout > 0) { setTimeout(function() { notification.close(); }, timeout); }
+		return notification;
+	}
+
+	// Otherwise display a JQuery notification. Find a suitable icon first
 	var icon = "glyphicon glyphicon-info-sign";
 	if (type == "warning") {
 		icon = "glyphicon glyphicon-warning-sign";
@@ -87,7 +110,7 @@ function showMessage(type, title, message, timeout, allowDismiss) {
 	}
 
 	// Show the notification
-	var notifySettings = { icon: "glyphicon glyphicon-" + icon,
+	var notifySettings = { icon: icon,
 		title: title,
 		message: message};
 	var options = { type: type,

core/js/settings.js

@@ -42,6 +42,7 @@ var settings = {
 	doTpre: true,					// change
 	doTpost: true,					// options
 
+	useHtmlNotifications: false,	// whether HTML5-based notifications can be used
 	notificationTimeout: 5000,		// in ms
 	autoCloseUserMessages: false,	// whether M117 messages are automatically closed
 
@@ -415,6 +416,29 @@ $("#btn_clear_cache").click(function(e) {
 	e.preventDefault();
 });
 
+$("[data-setting='useHtmlNotifications']").change(function() {
+	if ($(this).prop("checked")) {
+		if (!("Notification" in window)) {
+			// Don't allow this option to be set if the browser doesn't support it
+			$(this).prop("checked", false);
+			alert(T("This browser does not support desktop notification"));
+		}
+		else if (Notification.permission !== 'denied') {
+			$(this).prop("checked", false);
+			Notification.requestPermission(function(permission) {
+				if (!('permission' in Notification)) {
+					Notification.permission = permission;
+				}
+
+				if (permission === "granted") {
+					// Don't allow this option to be set unless permission has been granted
+					$("[data-setting='useHtmlNotifications']").prop("checked", true);
+				}
+			});
+		}
+	}
+});
+
 // List Items
 
 $("#btn_add_gcode").click(function(e) {

core/language.xml

@@ -651,6 +651,9 @@
 		<string t="This file is quite big. It may take a while before it is fully loaded...">Diese Datei ist recht groß. Es kann eine Weile dauern bevor sie vollständig geladen ist...</string>
 		<string t="You cannot upload single files. Please upload only ZIP files that contain at least one directory per filament configuration.">Sie können keine einzelnen Dateien hochladen. Bitte laden Sie nur ZIP-Dateien hoch, die mindestens ein Verzeichnis pro Filamentkonfiguration enthalten.</string>
 		<string t="error">Fehler</string>
+		<string t="This browser does not support desktop notification">Dieser Browser unterstützt keine Desktopbenachrichtigungen</string>
+		<string t="Use HTML5-based desktop notifications when the page is hidden">Benutze HTML5-basierte Desktopbenachrichtigungen wenn die Seite versteckt ist</string>
+		<string t="Show HTML5 desktop notifications when the web interface is not visible">Zeige HTML5 Desktopbenachrichtigungen wenn die Weboberfläche nicht sichtbar ist</string>
 	</de>
 	<es name="Espanol">
 		<!-- JavaScript Strings -->

core/reprap.htm

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<!--	Duet Web Control v1.17-RC6
+<!--	Duet Web Control v1.17
 
 	written by Christian Hammacher
 
@@ -1747,7 +1747,7 @@ <h1 class="text-center text-muted">Connect to your Duet to display Filaments</h1
 													</tr>
 													<tr>
 														<th>Web Interface Version:</th>
-														<td>1.17-RC6</td>
+														<td>1.17</td>
 													</tr>
 												</table>
 												<span id="span_copyright">Web Interface by Christian Hammacher<br/>Licensed under the terms of the <a href="https://www.gnu.org/licenses/gpl-3.0" target="blank">GPL v3</a></span>
@@ -2039,6 +2039,12 @@ <h1 class="text-center text-muted">Connect to your Duet to display Filaments</h1
 											</div>
 
 											<div class="panel-body">
+												<div class="checkbox">
+													<label title="Show HTML5 desktop notifications when the web interface is not visible">
+														<input type="checkbox" data-setting="useHtmlNotifications" /> Use HTML5-based desktop notifications when the page is hidden
+													</label>
+												</div>
+
 												<label for="input_notification_timeout">Default Notification Timeout:</label>
 												<div class="input-group">
 													<input type="number" id="input_notification_timeout" class="form-control" title="Time after which default notifications are automatically closed" data-setting="notificationTimeout" data-factor="1000">