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

This commit is contained in:
peteruithoven 2013-10-18 19:11:10 +02:00
parent 46d2ae4bfc
commit 10724b1746
10 changed files with 164 additions and 25 deletions

View File

@ -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

2
css/styles.min.css vendored

File diff suppressed because one or more lines are too long

View File

@ -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>

View File

@ -12,12 +12,13 @@ function setPrintprogress(val) {
function Printer() {
Printer.UNKNOWN_STATE = "unknown";
Printer.DISCONNECTED_STATE = "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";
Printer.STOPPING_STATE = "stopping"; // when you stop (abort) a print it prints the endcode
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";
Printer.STOPPING_STATE = "stopping"; // when you stop (abort) a print it prints the endcode
Printer.ON_BEFORE_UNLOAD_MESSAGE = "You're doodle is still being send to the printer, leaving will result in a incomplete 3D print";
@ -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

View File

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

View File

@ -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;
}
@ -365,8 +369,18 @@ function setState(newState,newHasControl) { //TODO add hasControl
progressbar.hide();
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;
}

View File

@ -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,7 +56,8 @@ $(function() {
thermometer.init($("#thermometerCanvas"), $("#thermometerContainer"));
progressbar.init($("#progressbarCanvas"), $("#progressbarCanvasContainer"));
message.init($("#message"));
printer.init();
$(document).on(Printer.UPDATE,update);
@ -128,4 +130,4 @@ function settingsLoaded() {
function setDebugText(text) {
$("#debug_display").text(text);
}
}

52
js/message.js Normal file
View File

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

30
less/message.less Normal file
View File

@ -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;
}
}

View File

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