simplify Print page (#13) and add WiFi-Box banner
This commit is contained in:
Rick Companje
parent
4d21b3db9d
commit
b0f4764a82
|
|
@ -41,6 +41,11 @@
|
|||
//displayPace: 0, // do not obey the display pace
|
||||
//maxDisplayCount: 0 // do not obey the max display count
|
||||
});
|
||||
|
||||
if (localStorage.getItem("hideBanner")==="true") {
|
||||
$("#getyours").hide();
|
||||
}
|
||||
|
||||
});
|
||||
$.mobile.document.on( "pagebeforehide", PAGE_ID, function( event, data ) {
|
||||
//console.log("Boxes page pagehide");
|
||||
|
|
|
|||
|
|
@ -14,11 +14,14 @@
|
|||
var _networkAPI = new NetworkAPI();
|
||||
var _printerAPI = new PrinterAPI();
|
||||
var _configAPI = new ConfigAPI();
|
||||
var _updateAPI = new UpdateAPI();
|
||||
var PAGE_ID = "#print";
|
||||
var _pageData = {};
|
||||
var _self = this;
|
||||
var _wifiboxSettings;
|
||||
var _slicerSettings;
|
||||
var timerId;
|
||||
|
||||
|
||||
$.mobile.document.on("pagebeforeshow", PAGE_ID, function( event, data ) {
|
||||
_pageData = d3d.util.getPageParams(PAGE_ID);
|
||||
|
|
@ -40,6 +43,7 @@
|
|||
//disabled by default
|
||||
$("#btnPrint").button().on("click", print);
|
||||
$("#btnPrint").button('disable');
|
||||
$("#pleaseUpgrade").hide();
|
||||
|
||||
loadGCodeInfoFromServer(d3d.pageParams.uuid);
|
||||
|
||||
|
|
@ -75,18 +79,53 @@
|
|||
$("#lstBoxes").on("change", function(data) {
|
||||
var ip = $(this).val();
|
||||
console.log("lstBoxes change",ip);
|
||||
|
||||
$("#infoWiFiBox").text("...");
|
||||
$("#pleaseUpgrade").hide();
|
||||
onSelectWiFiBox(ip);
|
||||
});
|
||||
|
||||
timerId = setInterval(refreshWiFiBoxInfo,5000);
|
||||
|
||||
});
|
||||
|
||||
$.mobile.document.on( "pagebeforehide", PAGE_ID, function( event, data ) {
|
||||
_connectAPI.stop();
|
||||
clearInterval(timerId);
|
||||
});
|
||||
|
||||
function retrieveUpdateStatus() {
|
||||
|
||||
|
||||
_updateAPI.status(function(data) { // completed
|
||||
var canUpdate = data.can_update;
|
||||
|
||||
if (canUpdate) {
|
||||
$("#pleaseUpgrade").show();
|
||||
$("#newest_version").text(" ("+data.newest_version+")");
|
||||
|
||||
console.log("_pageData",_pageData);
|
||||
|
||||
var updateLink = $("#pleaseUpgrade a").attr("href");
|
||||
updateLink = d3d.util.replaceURLParameters(updateLink,_pageData);
|
||||
$("#pleaseUpgrade a").attr("href",updateLink);
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function onSelectWiFiBox(ip) {
|
||||
$("#infoWiFiBox").text("");
|
||||
refreshWiFiBoxInfo(ip);
|
||||
}
|
||||
|
||||
function refreshWiFiBoxInfo(ip) {
|
||||
if (!ip) {
|
||||
ip = _pageData.localip;
|
||||
if (!ip) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
$("#infoWiFiBox").show();
|
||||
|
||||
if (!ip) {
|
||||
$("#btnPrint").button('disable');
|
||||
|
|
@ -96,21 +135,27 @@
|
|||
// redirect
|
||||
$.mobile.changePage("#boxes");
|
||||
} else {
|
||||
|
||||
// console.log("IP:",ip);
|
||||
|
||||
var boxURL = "http://"+ip;
|
||||
_infoAPI.init(boxURL);
|
||||
_networkAPI.init(boxURL);
|
||||
_printerAPI.init(boxURL);
|
||||
_configAPI.init(boxURL);
|
||||
_updateAPI.init(boxURL);
|
||||
|
||||
retrieveUpdateStatus();
|
||||
|
||||
var localip = localStorage.setItem("localip",ip);
|
||||
|
||||
_networkAPI.status(function(successData) {
|
||||
console.log("network status",successData);
|
||||
// console.log("network status",successData);
|
||||
// $("#lstPrint li.boxItem p").text(
|
||||
var netInfo = successData.statusMessage + " (" + successData.ssid + " @ <a href='http://" + successData.localip + "'>"+successData.localip+"</a>)";
|
||||
|
||||
_infoAPI.getStatus(function(successData) {
|
||||
console.log(successData);
|
||||
// console.log(successData);
|
||||
var state = successData.state;
|
||||
if (state==="idle") {
|
||||
state="ready";
|
||||
|
|
@ -123,7 +168,7 @@
|
|||
info += "<a href='"+url+"'><span class='"+state+"'>"+state+"</span></a>";
|
||||
$("#infoWiFiBox").html(info);
|
||||
}, function(failData) {
|
||||
console.log(failData);
|
||||
console.log("_infoAPI.getStatus failData:",failData);
|
||||
$("#infoWiFiBox").html("<span class='error'>failed to retrieve <em>printer status</em> from WiFi-Box</span>");
|
||||
});
|
||||
|
||||
|
|
@ -235,7 +280,7 @@
|
|||
$("#infoFile").text("...");
|
||||
$("#infoPrinter").text("...");
|
||||
$("#infoMaterial").html("...");
|
||||
$("#iconPrinter").attr('src','img/icons/blank.png');
|
||||
// $("#iconPrinter").attr('src','img/icons/blank.png');
|
||||
}
|
||||
|
||||
function loadGCodeInfoFromServer(uuid) {
|
||||
|
|
@ -252,10 +297,10 @@
|
|||
var printerId = header.printer.type;
|
||||
var printerTitle = header.printer.title;
|
||||
|
||||
$("#infoFile").text(header.name + " (" + filesize + ")");
|
||||
$("#infoPrinter").text(printerTitle);
|
||||
$("#infoMaterial").html(header.filamentThickness + "mm @ " + header.temperature + "°C");
|
||||
$("#iconPrinter").attr('src','img/icons/printers/'+printerId+'.png');
|
||||
$("#infoFile").html("Filename: <b>" + header.name + " (" + filesize + ")</b>");
|
||||
$("#infoPrinter").html("Printer: <b>" + printerTitle + "</b>");
|
||||
$("#infoMaterial").html("Material: <b>" + header.filamentThickness + "mm @ " + header.temperature + "°C</b>");
|
||||
// $("#iconPrinter").attr('src','img/icons/printers/'+printerId+'.png');
|
||||
|
||||
}, function(failData) {
|
||||
console.log("_serverAPI.fetchHeader fail",failData);
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ function InfoAPI() {
|
|||
var _self = this;
|
||||
|
||||
this.init = function(wifiboxURL) {
|
||||
console.log("InfoAPI:init");
|
||||
// console.log("InfoAPI:init");
|
||||
|
||||
_wifiboxURL = wifiboxURL+_apiPath;
|
||||
_wifiboxCGIBinURL = wifiboxURL+_apiCGIPath;
|
||||
|
|
|
|||
|
|
@ -122,6 +122,11 @@ d3d.util = {
|
|||
|
||||
};
|
||||
|
||||
function hideBanner() {
|
||||
$("#getyours").hide();
|
||||
localStorage.setItem("hideBanner",true);
|
||||
}
|
||||
|
||||
(function (w) {
|
||||
// To get to url parameters we need the url
|
||||
// only pagecontainer events contain url's
|
||||
|
|
@ -150,7 +155,7 @@ d3d.util = {
|
|||
if (localip) {
|
||||
url += "?localip=" + localip;
|
||||
}
|
||||
location.href = url;
|
||||
// location.href = url;
|
||||
}
|
||||
|
||||
})(window);
|
||||
|
|
@ -4,6 +4,29 @@ body.ui-mobile-viewport {
|
|||
/*font-family: 'Abel', sans-serif;*/
|
||||
}
|
||||
|
||||
div.getyours {
|
||||
color: black;
|
||||
border: 1px solid black;
|
||||
max-width: 300px;
|
||||
float: right;
|
||||
margin-top: 10px;
|
||||
padding: 0px 10px 10px 10px;
|
||||
}
|
||||
|
||||
div.getyours span {
|
||||
/*float: right;*/
|
||||
text-decoration: underline;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
div.getyours img {
|
||||
/*text-align: right;*/
|
||||
max-width: 150px;
|
||||
display: inline;
|
||||
float: right;
|
||||
}
|
||||
|
||||
#logo {
|
||||
text-align: center;
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -35,8 +35,11 @@
|
|||
<body>
|
||||
|
||||
<div data-role="page" id="boxes" data-title="Doodle3D Connect">
|
||||
<a href="#boxes" id="logo"><img src="img/logo_full.png"></a>
|
||||
|
||||
<div id="getyours" class="getyours"><img src="img/icons/wifibox.jpg"><br>No WiFi-Box yet?<br>Get your own <a href="https://shop.doodle3d.com">here</a>.<br><br><a href="#" onclick="hideBanner()">Close</a></div>
|
||||
|
||||
<a href="#boxes" id="logo"><img src="img/logo_full.png"></a>
|
||||
|
||||
<div role="main" class="ui-content">
|
||||
<h3>Let's connect to your Doodle3D WiFi-Box</h3>
|
||||
<p>This webpage helps you to find your Doodle3D WiFi-Box on your local network.</p>
|
||||
|
|
@ -88,10 +91,30 @@
|
|||
<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">
|
||||
|
||||
<form>
|
||||
|
||||
<!-- 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>
|
||||
<p style="white-space: normal;" id="pleaseUpgrade">New firmware for your Doodle3D WiFi-Box is available. Please <a href="#update">update</a> to the latest version <span id="newest_version"></span>.</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<!-- <label for="name">The following GCODE file is ready for printing:</label> -->
|
||||
<ul id="lstPrint" data-role="listview" data-inset="true">
|
||||
|
||||
<li>
|
||||
<p id="infoFile">...</p>
|
||||
<p id="infoPrinter">...</p>
|
||||
<p id="infoMaterial">...</p>
|
||||
</li>
|
||||
|
||||
<!-- <li>
|
||||
<img src="img/icons/gcode.png" width="80" height="80">
|
||||
<h2>File to print</h2>
|
||||
<p id="infoFile">...</p>
|
||||
|
|
@ -107,19 +130,13 @@
|
|||
<img src="img/icons/white.jpg" width="80" height="80">
|
||||
<h2>Material</h2>
|
||||
<p id="infoMaterial">...</p>
|
||||
</li>
|
||||
</li> -->
|
||||
</ul>
|
||||
|
||||
<input type="button" id="btnPrint" class="ui-shadow .ui-input-btn ui-btn ui-corner-all" value="Print">
|
||||
|
||||
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>
|
||||
</form>
|
||||
|
||||
<input type="button" id="btnPrint" class="ui-shadow ui-btn ui-corner-all" value="Print">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue