added #print page and needed API interfaces

This commit is contained in:
Rick Companje 2017-07-11 17:17:06 +02:00
parent 5be5be9f40
commit 9da6f1ac22
9 changed files with 498 additions and 10 deletions

View File

@ -101,6 +101,7 @@ module.exports = function(grunt) {
ConfigAPI: true,
PrinterAPI: true,
UpdateAPI:true,
ServerAPI:true,
addToHomescreen: true
},
browser: true,

View File

@ -118,11 +118,25 @@
_intro.text(introText);
_intro.toggleClass("ui-screen-hidden",(introText === ""));
//printLink
var _printItem = _list.find("#printItem");
var printLink = _printItem.find("a").attr("href");
printLink = d3d.util.replaceURLParameters(printLink,_boxData);
_printItem.find("a").attr("href",printLink);
if (d3d && d3d.pageParams && d3d.pageParams.uuid) {
_drawItem.hide();
_printItem.show();
}
//settingsLink
var settingsLink = _settingsItem.find("a").attr("href");
settingsLink = d3d.util.replaceURLParameters(settingsLink,_boxData);
_settingsItem.find("a").attr("href",settingsLink);
_settingsItem.toggleClass("ui-screen-hidden",false);
// var settingsLink = _settingsItem.find("a").attr("href");
// settingsLink = d3d.util.replaceURLParameters(settingsLink,_boxData);
// _settingsItem.find("a").attr("href",settingsLink);
// _settingsItem.toggleClass("ui-screen-hidden",false);
// ToDo: update footer with network info

210
js/PrintPage.js Normal file
View File

@ -0,0 +1,210 @@
/*
* This file is part of the Doodle3D project (http://doodle3d.com).
*
* Copyright (c) 2013-2017, Doodle3D
* This software is licensed under the terms of the GNU GPL v2 or later.
* See file LICENSE.txt or visit http://www.gnu.org/licenses/gpl.html for full license details.
*/
(function (w) {
var _serverAPI = new ServerAPI();
var _connectAPI = new ConnectAPI();
var _infoAPI = new InfoAPI();
var _networkAPI = new NetworkAPI();
var _printerAPI = new PrinterAPI();
var _configAPI = new ConfigAPI();
var PAGE_ID = "#print";
var _pageData = {};
var _self = this;
var _wifiboxSettings;
var _slicerSettings;
$.mobile.document.on("pagebeforeshow", PAGE_ID, function( event, data ) {
_pageData = d3d.util.getPageParams(PAGE_ID);
if(_pageData === undefined) {
console.log("ERROR",PAGE_ID,"_pageData undefined");
$.mobile.changePage("#boxes");
return;
}
var boxURL = "http://"+_pageData.localip;
//disabled by default
$("#btnPrint").button().on("click", print);
$("#btnPrint").button('disable');
loadGCodeInfoFromServer(d3d.pageParams.uuid);
_connectAPI.list(function(successData) {
console.log("_connectAPI.list success",successData);
$("#lstBoxes").empty();
$("#lstBoxes").append($("<option/>"));
for (var i in successData) {
var box = successData[i];
var selected = (box.localip===_pageData.localip) ? "selected " : "";
$("#lstBoxes").append($("<option "+selected+" value="+box.localip+">"+box.wifiboxid+"</option>"));
}
$("#lstBoxes").append($("<option value='other'>Other...</option>"));
$("#lstBoxes").selectmenu("refresh", true);
if (_pageData.localip) {
onSelectWiFiBox(_pageData.localip);
}
}, function(failData) {
console.log("_connectAPI.list failData",failData);
});
$("#lstBoxes").on("change", function(data) {
var ip = $(this).val();
console.log("lstBoxes change",ip);
onSelectWiFiBox(ip);
});
});
$.mobile.document.on( "pagebeforehide", PAGE_ID, function( event, data ) {
_connectAPI.stop();
});
function onSelectWiFiBox(ip) {
$("#infoWiFiBox").text("");
if (!ip) {
$("#btnPrint").button('disable');
return;
}
else if (ip==="other") {
// redirect
$.mobile.changePage("#boxes");
} else {
var boxURL = "http://"+ip;
_infoAPI.init(boxURL);
_networkAPI.init(boxURL);
_printerAPI.init(boxURL);
_configAPI.init(boxURL);
_networkAPI.status(function(successData) {
console.log("network status",successData);
// $("#lstPrint li.boxItem p").text(
var netInfo = successData.statusMessage + " (" + successData.ssid + " @ " + successData.localip + ")";
_infoAPI.getStatus(function(successData) {
console.log(successData);
var state = successData.state;
if (state==="idle") {
state="ready";
$("#btnPrint").button('enable');
}
var info = netInfo + " - Printer status: ";
info += "<span class='"+state+"'>"+state+"</span>";
$("#infoWiFiBox").html(info);
}, function(failData) {
console.log(failData);
$("#infoWiFiBox").html("<span class='error'>failed to retrieve <em>printer status</em> from WiFi-Box</span>");
});
}, function(failData) {
console.log("_networkAPI status failed",failData);
$("#infoWiFiBox").html("<span class='error'>failed to retrieve <em>network status</em> from WiFi-Box</span>");
});
}
}
function print() {
_configAPI.loadAll(function(successData) {
_wifiboxSettings = successData;
var slicerPrinterType = _slicerSettings.type;
var wifiboxPrinterType = _wifiboxSettings["printer.type"];
if (slicerPrinterType!==wifiboxPrinterType) {
var override = window.confirm("The GCODE file was sliced for '"+slicerPrinterType+"'.\n"+
"Your WiFi-Box is currently configured for '"+wifiboxPrinterType+"'\n\n"+
"Do you want to override the settings on your WiFi-Box with the new settings from the slicer?");
if (override) {
//
_configAPI.savePrinterType(slicerPrinterType,function(successData) {
console.log(successData);
window.alert(successData.validation["printer.type"] + " (printer.type)");
},function(failData) {
window.alert("Could not save printer type '",slicerPrinterType,"')' to WiFi-Box");
});
}
}
});
if (true) {
return;
}
//var startcode = _configAPI.subsituteVariables(_wifiboxSettings["printer.startcode"],_wifiboxSettings);
//var endcode = _configAPI.subsituteVariables(_wifiboxSettings["printer.endcode"],_wifiboxSettings);
var data = {
"id": d3d.pageParams.uuid,
// "start_code": startcode,
// "end_code": endcode
};
//console.log("fetchPrint",d3d.pageParams.uuid,data);
_printerAPI.fetch(data,function(successData) {
console.log("fetchPrint success",successData);
var url = d3d.util.replaceURLParameters("#control",_pageData);
$.mobile.changePage(url);
},function(failData) {
console.log("fetchPrint fail",failData);
window.alert("Problem: " + failData.msg);
});
}
function clearInfo() {
$("#infoFile").text("...");
$("#infoPrinter").text("...");
$("#infoMaterial").html("...");
$("#iconPrinter").attr('src','img/icons/blank.png');
}
function loadGCodeInfoFromServer(uuid) {
_serverAPI.init("https://gcodeserver.doodle3d.com");
_serverAPI.getInfo(uuid, function(successData) {
console.log("getInfo success",successData);
var filesize = d3d.util.formatBytes(successData["bytes"]);
_serverAPI.fetchHeader(d3d.pageParams.uuid,function(successData) {
console.log("_serverAPI fetchHeader success",successData);
var header = successData;
_slicerSettings = header; //copy header json data into _slicerSettings
var printerId = header.type;
$("#infoFile").text(header.name + " (" + filesize + ")");
$("#infoPrinter").text(printerId);
$("#infoMaterial").html(header.filamentThickness + "mm @ " + header.temperature + "&deg;C");
$("#iconPrinter").attr('src','img/icons/printers/'+printerId+'.png');
}, function(failData) {
console.log("_serverAPI fetchHeader fail",failData);
clearInfo();
});
},function(failData) {
clearInfo();
});
}
})(window);

View File

@ -58,4 +58,22 @@ function InfoAPI() {
if(failedHandler) failedHandler();
});
};
this.getStatus = function(completeHandler,failedHandler) {
$.ajax({
url: _wifiboxURL + "/info/status",
type: "GET",
dataType: 'json',
timeout: _timeoutTime,
success: function(response){
if (response.status == "error" || response.status == "fail") {
if (failedHandler) failedHandler(response);
} else {
if (completeHandler) completeHandler(response.data);
}
}
}).fail(function() {
if (failedHandler) failedHandler();
});
};
}

View File

@ -46,4 +46,71 @@ function PrinterAPI() {
if(failedHandler) failedHandler();
});
};
this.fetch = function(data, completeHandler,failedHandler) {
console.log("fetch",_wifiboxURL,data);
$.ajax({
url: _wifiboxURL + "/printer/fetch",
type: "POST",
dataType: 'json',
data: data,
timeout: _timeoutTime,
success: function(response){
console.log("printerAPI.fetch response=",response);
if(response.status == "error" || response.status == "fail") {
if (failedHandler) failedHandler(response);
} else {
if (completeHandler) completeHandler(response.data);
}
}
}).fail(function() {
if(failedHandler) failedHandler();
});
};
this.print = function(data, completeHandler,failedHandler) {
// data = { "gcode": gcode, "first": first, "start": start },
console.log("print",_wifiboxURL,data);
$.ajax({
url: _wifiboxURL + "/printer/print",
type: "POST",
dataType: 'json',
data: data,
timeout: _timeoutTime,
success: function(response){
console.log("printerAPI.print response=",response);
if(response.status == "error" || response.status == "fail") {
if (failedHandler) failedHandler(response);
} else {
if (completeHandler) completeHandler(response.data);
}
}
}).fail(function() {
if (failedHandler) failedHandler();
});
};
this.stop = function(data, completeHandler, failedHandler) {
console.log("stop",_wifiboxURL,data);
$.ajax({
url: _wifiboxURL + "/printer/stop",
type: "POST",
dataType: 'json',
data: data,
timeout: _timeoutTime,
success: function(response){
console.log("printerAPI.stop response=",response);
if(response.status == "error" || response.status == "fail") {
if (failedHandler) failedHandler(response);
} else {
if (completeHandler) completeHandler(response.data);
}
}
}).fail(function() {
if (failedHandler) failedHandler();
});
};
}

82
js/api/ServerAPI.js Normal file
View File

@ -0,0 +1,82 @@
/*
* This file is part of the Doodle3D project (http://doodle3d.com).
*
* Copyright (c) 2013, Doodle3D
* This software is licensed under the terms of the GNU GPL v2 or later.
* See file LICENSE.txt or visit http://www.gnu.org/licenses/gpl.html for full license details.
*/
function ServerAPI() {
var _apiURL = "";
var _timeoutTime = 6000;
this.init = function(url) {
_apiURL = url;
}
this.getInfo = function(uuid, completeHandler, failedHandler) {
console.log("ServerAPI:getInfo");
$.ajax({
url: _apiURL + "/info/" + uuid,
type: "GET",
dataType: 'json',
timeout: _timeoutTime,
cache: false,
success: function(response) {
if (completeHandler) completeHandler(response);
}
}).fail(function(response) {
if (failedHandler) failedHandler(response.responseJSON);
});
};
this.fetch = function(uuid, chunk, completeHandler, failedHandler) {
console.log("ServerAPI:fetch",uuid,chunk);
if (!uuid) {
console.log("Server.fetch failed: no uuid");
if (failedHandler) failedHandler();
return;
}
if (!chunk) {
chunk = 0;
}
$.ajax({
url: _apiURL + "/fetch/" + uuid + "/" + chunk,
type: "GET",
dataType: 'text', //no json but text
timeout: _timeoutTime,
cache: false,
success: function(response) {
if (completeHandler) completeHandler(response);
}
}).fail(function(response) {
console.log("ServerAPI:fetch fail response:",response);
if (failedHandler) failedHandler(response.responseJSON);
});
};
this.fetchHeader = function(uuid,completeHandler,failedHandler) {
this.fetch(uuid,0,function(successData) {
console.log("_serverAPI fetchHeader");
if (successData) {
var items = successData.split("\n");
try {
var headerText = items[0].substr(1);
var headerJSON = JSON.parse(headerText);
// console.log("fetchHeader",headerJSON)
if (completeHandler) completeHandler(headerJSON);
} catch (e) {
console.log("fetchHeader failed to parse JSON",e);
if (failedHandler) failedHandler();
}
}
}, function(failData) {
console.log("_serverAPI fetchHeader failed",failData);
});
};
}

View File

@ -97,8 +97,29 @@ d3d.util = {
if (!("autofocus" in document.createElement("input"))) {
var target = form.find("input[autofocus]:visible");
target.focus();
}
}
}
},
getQueryParam:function(param) {
var result = window.location.search.match(new RegExp("(\\?|&)" + param + "(\\[\\])?=([^&]*)"));
return result ? result[3] : false;
},
formatBytes:function(a,b) {
if (0===a) {
return "0 Bytes";
} else {
var c=1e3,d=b||2,e=["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"];
var f=Math.floor(Math.log(a)/Math.log(c));
return parseFloat((a/Math.pow(c,f)).toFixed(d))+" "+e[f];
}
},
formatPercentage:function(cur,total) {
console.log("formatPercentage",cur,total);
return Math.round(cur/total*100) + "%";
},
};
(function (w) {
@ -106,6 +127,9 @@ d3d.util = {
// only pagecontainer events contain url's
// we parse the parameters and store them in a global object
d3d.pageParams = {};
d3d.pageParams.uuid = d3d.util.getQueryParam("uuid");
console.log(d3d.pageParams.uuid);
$.mobile.document.on( "pagebeforechange", function( event, data ) {
if (typeof data.toPage !== "string") { return; }
var url = d3d.util.parseURL(data.toPage);
@ -119,4 +143,14 @@ d3d.util = {
// make sure that the parameters are not removed from the visible url
event.preventDefault();
});
if (d3d.pageParams.uuid) { //connect was opened with printlink
var localip = localStorage.getItem("localip");
var url = "?uuid="+d3d.pageParams.uuid+"#print";
if (localip) {
url += "?localip=" + localip;
}
location.href = url;
}
})(window);

View File

@ -210,4 +210,17 @@ html head + body .ui-body-a.ui-focus {
.ath-container:before {
color: #F18DB1;
}
}
}
#infoWiFiBox .idle, #infoWiFiBox .ready {
color: #5fba7d;
}
#infoWiFiBox .disconnected, #infoWiFiBox .connecting, #infoWiFiBox .stopping, #infoWiFiBox .error {
color: red;
}
#infoWiFiBox .printing {
color: #93CAF4;
}

View File

@ -22,6 +22,7 @@
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script src="js/doodle3d-server.min.js" type="text/javascript"></script>
<!-- <script src="js/doodle3d-server.js" type="text/javascript"></script> -->
<!-- stylesheets -->
<!-- <link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet"> -->
@ -66,8 +67,9 @@
<p class="intro"></p>
<ul data-role="listview">
<li id="drawItem"><a href="#draw">Draw</a></li>
<li id="printItem"><a href="#print">Print</a></li>
<!-- <li id="transformItem"><a href="http://transform.doodle3d.com">Doodle3D Transform</a></li> -->
<li id="settingsItem" data-icon="gear"><a href="#settings">Settings</a></li>
<!-- <li id="settingsItem" data-icon="gear"><a href="#settings">Settings</a></li> -->
<li id="updateItem"><a href="#update">Firmware Update<span class="ui-li-count"></span></a></li>
<li id="joinNetworkItem"><a href="#join_network">Join network </a></li>
<!-- <li><a href="#yourapp">Your app here?</a></li> -->
@ -75,6 +77,53 @@
</div><!-- /content -->
</div><!-- /page -->
<div data-role="page" id="print">
<a href="#boxes" id="logo"><img src="img/logo_full.png"></a>
<div data-role="header">
<a href="../toolbar/" data-rel="back"
class="ui-btn ui-btn-left ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
<h1>Print</h1>
</div><!-- /header -->
<div id="divPrint" role="main" class="ui-content">
<p class="intro">Let's 3D-print your model by sending it to your printer over WiFi. Please check the settings below and press Print.</p>
<label for="name">The following GCODE file is ready for printing:</label>
<ul id="lstPrint" data-role="listview" data-inset="true">
<li>
<img src="img/icons/gcode.png" width="80" height="80">
<h2>File to print</h2>
<p id="infoFile">...</p>
</li>
<li>
<img src="img/icons/printers/ultimaker2go.png" width="80" height="80">
<h2>3D-Printer</h2>
<p id="infoPrinter">...</p>
</li>
<li>
<img src="img/icons/white.jpg" width="80" height="80">
<h2>Material</h2>
<p id="infoMaterial">...</p>
</li>
</ul>
Please select your Doodle3D WiFi-Box:
<ul data-role="listview" data-inset="true">
<li>
<img src="img/icons/wifibox.jpg" width="80" height="80">
<select id="lstBoxes"></select>
<p style="white-space: normal;" id="infoWiFiBox">...</p>
</li>
</ul>
<input type="button" id="btnPrint" class="ui-shadow ui-btn ui-corner-all" value="Print">
</div>
</div>
<div data-role="page" id="find">
<a href="#boxes" id="logo"><img src="img/logo_full.png"></a>
@ -377,8 +426,8 @@
</script>
<script>
(function(t,a,l,k,u,s,e){if(!t[u]){t[u]=function(){(t[u].q=t[u].q||[]).push(arguments)},t[u].l=1*new Date();s=a.createElement(l),e=a.getElementsByTagName(l)[0];s.async=1;s.src=k;e.parentNode.insertBefore(s,e)}})(window,document,'script','//www.talkus.io/plugin.beta.js','talkus');
talkus('init', 'bCwR4NgCDFFcYtgg8');
// (function(t,a,l,k,u,s,e){if(!t[u]){t[u]=function(){(t[u].q=t[u].q||[]).push(arguments)},t[u].l=1*new Date();s=a.createElement(l),e=a.getElementsByTagName(l)[0];s.async=1;s.src=k;e.parentNode.insertBefore(s,e)}})(window,document,'script','//www.talkus.io/plugin.beta.js','talkus');
// talkus('init', 'bCwR4NgCDFFcYtgg8');
</script>