Messages! Showing info about buffering, connection to wifibox and printer

css/styles.css

@@ -658,6 +658,39 @@ SETTINGS POPUP
 	cursor: pointer;
 }
 
+#message {
+	position: absolute;
+	top: 0;
+	right: 0;
+	padding: 0.4em 0.5em;
+	border-radius: 0 0 0 10px;
+	border: 2px solid #333;
+	font-weight: bold;
+
+	-webkit-box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
+	box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
+	color: #333;
+	white-space: nowrap;
+	display: none;
+}
+
+#message.error {
+	background: #EB313C;
+	color: #fff;
+}
+
+#message.warning {
+	background: #E9A86E;
+}
+
+#message.notice {
+	background: #93CAF4;
+}
+
+#message.info {
+	background: #97DD8A;
+}
+
 @media only screen and (max-width: 480px),only screen and (max-width: 720px) and (min-device-pixel-ratio: 1.5),only screen and (max-width: 720px) and (-webkit-min-device-pixel-ratio: 1.5) {
 	/*
 	TOP LOGO

index.html

@@ -79,6 +79,8 @@
       <img class="btnSettings btn" src="img/buttons/btnSettings.png">
       <img class="btnInfo btn" src="img/buttons/btnInfo.png">
     </div>
+    
+    <div id="message"></div>
   </div>
 
   <!-- center panel -->
@@ -154,6 +156,7 @@
 <script src="js/Thermometer.js"></script>
 <script src="js/utils.js"></script>
 <script src="js/sidebar.js"></script>
+<script src="js/message.js"></script>
 <script src="js/main.js"></script>
 
 </body>

js/Printer.js

@@ -12,8 +12,9 @@ function setPrintprogress(val) {
 
 function Printer() {
 	
-	Printer.UNKNOWN_STATE 			= "unknown";
-	Printer.DISCONNECTED_STATE 	= "disconnected";
+	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
 	Printer.IDLE_STATE 									= "idle"; 					// printer found, but idle
 	Printer.BUFFERING_STATE 						= "buffering";			// printer is buffering (recieving) data, but not yet printing
 	Printer.PRINTING_STATE 							= "printing";
@@ -97,6 +98,7 @@ function Printer() {
     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++) {
@@ -157,6 +159,7 @@ function Printer() {
 		          this.gcode = [];
 		          btnStop.css("display","block"); // hack
 		          self.removeLeaveWarning();
+		          message.set("Doodle is send to printer...",Message.INFO,true);
 		          //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
@@ -239,7 +242,7 @@ function Printer() {
 	this.checkStatus = function() {
 		console.log("Printer:checkStatus");
 		this.stateOverruled = false;
-		console.log("  stateOverruled: ",this.stateOverruled);
+		//console.log("  stateOverruled: ",this.stateOverruled);
     var self = this;
     if (communicateWithWifibox) {
       $.ajax({
@@ -247,7 +250,7 @@ function Printer() {
         dataType: 'json',
         timeout: this.timeoutTime,
         success: function(response){
-          console.log("  Printer:status: ",response.data.state); //," response: ",response);
+          //console.log("  Printer:status: ",response.data.state); //," response: ",response);
           
           self.handleStatusUpdate(response);
           
@@ -257,26 +260,27 @@ function Printer() {
         }
       }).fail(function() {
           console.log("Printer:checkStatus: failed");
-          self.state = Printer.UNKNOWN_STATE;
+          self.state = Printer.WIFIBOX_DISCONNECTED_STATE;
           clearTimeout(self.checkStatusDelay);
           clearTimeout(self.retryCheckStatusDelay);
           self.retryCheckStatusDelay = setTimeout(function() { self.checkStatus() },self.retryDelay); // retry after delay
+          $(document).trigger(Printer.UPDATE);
         });
     } else {
       console.log ("Printer >> f:checkStatus() >> communicateWithWifibox is false, so not executing this function");
     }
 	}
 	this.handleStatusUpdate = function(response) {
-		console.log("Printer:handleStatusUpdate");
+		console.log("Printer:handleStatusUpdate response: ",response);
 		var data = response.data;
 		if(response.status != "success") {
 			self.state = Printer.UNKNOWN_STATE;
 		} else {
 			// state
-			console.log("  stateOverruled: ",this.stateOverruled);
+			//console.log("  stateOverruled: ",this.stateOverruled);
 			if(!this.stateOverruled) {
 				self.state 								= data.state;
-				console.log("  state > ",self.state);
+				//console.log("  state > ",self.state);
 			}
 			
 			// temperature

js/Progressbar.js

@@ -49,7 +49,7 @@ function Progressbar() {
   }
 
   this.update = function(part, total) {
-    console.log("Progressbar.update(" + part + "," + total + ")");
+    //console.log("Progressbar.update(" + part + "," + total + ")");
 
     var pct = part / total;
     if (this.isInitted) {
@@ -59,7 +59,7 @@ function Progressbar() {
       var progress = part / total;
       progress = Math.min(progress, 1.0);
       progress = Math.max(progress, 0);
-      console.log("progressbar >> f:update() >> progress: " + progress);
+      //console.log("progressbar >> f:update() >> progress: " + progress);
 
       // clear
       this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);

js/buttonbehaviors.js

@@ -317,10 +317,12 @@ function update() {
 	progressbar.update(printer.currentLine, printer.totalLines);
 }
 
-function setState(newState,newHasControl) { //TODO add hasControl
+function setState(newState,newHasControl) { 
 	if(newState == state && newHasControl == hasControl) return;
 
-	console.log("setState: ",state," > ",newState," ( ",newHasControl,")");
+	prevState = state;
+	
+	console.log("setState: ",prevState," > ",newState," ( ",newHasControl,")");
 	setDebugText("State: "+newState);
 
 	// print button
@@ -347,12 +349,14 @@ function setState(newState,newHasControl) { //TODO add hasControl
 
 	// thermometer
 	switch(newState) {
-		case Printer.UNKNOWN_STATE:
-		case Printer.DISCONNECTED_STATE:
-			thermometer.hide();
+		case Printer.IDLE_STATE:
+		case Printer.BUFFERING_STATE:
+		case Printer.PRINTING_STATE:
+		case Printer.STOPPING_STATE:
+			thermometer.show();	
 			break;
 		default:
-			thermometer.show();
+			thermometer.hide();	
 			break;
 	}
 
@@ -366,7 +370,17 @@ function setState(newState,newHasControl) { //TODO add hasControl
 			break;
 	}
 	
-	prevState = state;
+	if(newState == Printer.WIFIBOX_DISCONNECTED_STATE) {
+		message.set("Lost connection to WiFi box",Message.ERROR);
+	}	else if(prevState == Printer.WIFIBOX_DISCONNECTED_STATE) {
+		message.set("Connected to WiFi box",Message.INFO,true);
+	} else if(newState == Printer.DISCONNECTED_STATE) {
+		message.set("Printer disconnected",Message.WARNING,true);
+	} else if(prevState == Printer.DISCONNECTED_STATE && newState == Printer.IDLE_STATE || 
+						prevState == Printer.UNKNOWN_STATE && newState == Printer.IDLE_STATE) {
+		message.set("Printer connected",Message.INFO,true);
+	}
+	
 	state = newState;
 	hasControl = newHasControl;
 }

js/main.js

@@ -8,6 +8,7 @@ var printer =  new Printer();
 var progressbar = new Progressbar();
 var thermometer = new Thermometer();
 var settingsWindow = new SettingsWindow();
+var message = new Message();
 
 var firstTimeSettingsLoaded = true;
 
@@ -55,6 +56,7 @@ $(function() {
 	thermometer.init($("#thermometerCanvas"), $("#thermometerContainer"));
   progressbar.init($("#progressbarCanvas"), $("#progressbarCanvasContainer"));
 
+  message.init($("#message"));
   
   printer.init();
 	$(document).on(Printer.UPDATE,update);

js/message.js

@@ -0,0 +1,52 @@
+function Message() {
+	
+	Message.ERROR 			= "error";
+	Message.WARNING 		= "warning";
+	Message.NOTICE 			= "notice";
+	Message.INFO 				= "info";
+	
+	this.mode						= "";
+	
+	this.$element;
+	
+	var self = this;
+	var autoHideDelay = 2000;
+	var autohideTimeout;
+	
+	this.init = function($element) {
+    console.log("Message:init");
+    
+    this.$element = $element;
+    console.log("$element: ",$element);
+ 	}
+	
+	this.set = function(text,mode,autoHide) {
+		console.log("Message:set: ",text,mode,autoHide);
+		self.hide(function() {
+			self.show();
+			self.clear();
+			
+			self.$element.text(text);
+			self.$element.addClass(mode);
+			self.show();
+			
+			self.mode = mode;
+			
+			clearTimeout(autohideTimeout);
+			if(autoHide) {
+				autohideTimeout = setTimeout(function(){ self.hide()},autoHideDelay);
+			}
+		});
+	}
+	this.clear = function($element) {
+		this.$element.text("");
+		this.$element.removeClass(this.mode);
+	}
+	
+	this.show = function() {
+		this.$element.fadeIn(200);
+	}
+	this.hide = function(complete) {
+		this.$element.fadeOut(200,complete);
+	}
+}

less/message.less

@@ -0,0 +1,30 @@
+#message {
+	position: absolute;
+	top: 0;
+	right: 0;
+	
+	padding: 0.4em 0.5em;
+	border-radius: 0 0 0 10px;
+	border: 2px solid #333;
+	font-weight: bold;
+	box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
+	
+	color: #333;
+	white-space:nowrap; 
+	
+	display:none;
+	
+	&.error {
+		background: #EB313C;
+		color: #fff;
+	}
+	&.warning {
+		background: #E9A86E;	
+	}
+	&.notice {
+		background: #93CAF4;
+	}
+	&.info {
+		background: #97DD8A;
+	}
+}

less/styles.less

@@ -2,6 +2,7 @@
 //@import "normalize.min.less";
 @import "base.less";
 @import "settingsPopup.less";
+@import "message.less";
 
 
 // MOBILE