380 lines
8.2 KiB
HTML
380 lines
8.2 KiB
HTML
<!DOCTYPE HTML>
|
|
<head>
|
|
|
|
<link rel="shortcut icon" href="https://github.com/reprappro/RepRapFirmware/raw/due/SD-image/www/favicon.ico" />
|
|
|
|
<style type="text/css">
|
|
.pages
|
|
{
|
|
background-color: #00a403;
|
|
list-style-type: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
border-radius: 7px;
|
|
background-image: -webkit-gradient(linear, left top,
|
|
left bottom, color-stop(0, #d6d6d6),
|
|
color-stop(0.4, #c0c0c0), color-stop(1,#a4a4a4));
|
|
margin: 10px 0 16px 0;
|
|
font-size: 0px;
|
|
}
|
|
.pages li:hover { background-color: grey; }
|
|
.pages li:first-child { border-left: none; border-radius: 7px 0 0 7px; }
|
|
.pages li
|
|
{
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
display: inline-block;
|
|
padding: 0.5em 1.5em;
|
|
cursor: pointer;
|
|
color: white;
|
|
border-left: 1px solid #ddd;
|
|
border-right: 1px solid #888;
|
|
}
|
|
.pages li { *display: inline !important; } /* IE7 only */
|
|
.pages .selected
|
|
{
|
|
background-color: #444 !important;
|
|
color: white;
|
|
text-shadow:none;
|
|
border-right-color: #aaa;
|
|
border-left: none;
|
|
box-shadow:inset 1px 2px 6px #070707;
|
|
}
|
|
|
|
|
|
|
|
.files
|
|
{
|
|
background-color: white;
|
|
}
|
|
.files li:hover { background-color: grey; }
|
|
.files li:first-child { border-left: none; border-radius: 7px 0 0 7px; }
|
|
.files li
|
|
{
|
|
cursor: pointer;
|
|
color: black;
|
|
list-style-type: none;
|
|
}
|
|
.files li { *display: inline !important; } /* IE7 only */
|
|
.files .selected
|
|
{
|
|
background-color: #00a403 !important;
|
|
color: white;
|
|
}
|
|
|
|
td { text-align: center; }
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<html>
|
|
<script src="https://raw.github.com/reprappro/RepRapFirmware/due/SD-image/www/jquery.js" type="text/javascript"></script>
|
|
<script src="https://raw.github.com/reprappro/RepRapFirmware/due/SD-image/www/knockout.js" type="text/javascript"></script>
|
|
<script>
|
|
function jogRowHTML(axis)
|
|
{
|
|
var result = "";
|
|
|
|
for(var i = -1; i < 3; i++)
|
|
{
|
|
var k = Math.pow(10.0, i);
|
|
var pos = '<td><button data-bind="click: function(data, event) { sendJog(';
|
|
pos += "'" + axis + "', ";
|
|
var neg = pos;
|
|
pos += '' + k;
|
|
neg += '' + (-k);
|
|
pos += ', data, event) }">' + axis + ' ';
|
|
neg += ', data, event) }"><';
|
|
for(var j = -1; j < i; j++)
|
|
{
|
|
pos += '-';
|
|
neg += '-';
|
|
}
|
|
pos += '>';
|
|
neg += ' ' + axis;
|
|
pos += '</button></td>';
|
|
neg += '</button></td>';
|
|
result += pos;
|
|
neg += result;
|
|
result = neg;
|
|
}
|
|
return result;
|
|
}
|
|
|
|
</script>
|
|
|
|
<!-- HEADER -->
|
|
<a href="http://reprappro.com" target="_blank"><img src="logo.png" alt="RepRapPro logo" align="right"></a>
|
|
|
|
<div style="font-size:20px" data-bind="with: machineName">RepRap: <strong data-bind="text: myName"></strong></div>
|
|
|
|
<br clear = "all">
|
|
|
|
<div data-bind="if: gotPassword().password == 'right'">
|
|
<ul class="pages" data-bind="foreach: pages">
|
|
<li data-bind="text: $data, css:
|
|
{
|
|
selected: $data == $root.chosenPageId()
|
|
},
|
|
click: $root.goToPage">
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<!-- PAGES -->
|
|
|
|
<!-- CONTROL PAGE -->
|
|
<div data-bind="if: chosenPageId() == pages[0]">
|
|
<table border="1"><div align="center">
|
|
|
|
|
|
<tr>
|
|
<th colspan="9">Move X Y Z</th>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td rowspan="2"><button data-bind="click: function(data, event) { sendHome('', data, event) }">Home<br>All</button></td>
|
|
<td colspan="4">- mm</td>
|
|
<td colspan="4">+ mm</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>-100</td>
|
|
<td>-10</td>
|
|
<td>-1</td>
|
|
<td>-0.1</td>
|
|
<td>0.1</td>
|
|
<td>1</td>
|
|
<td>10</td>
|
|
<td>100</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><button data-bind="click: function(data, event) { sendHome('X', data, event) }">Home X
|
|
</button></td>
|
|
<script>
|
|
document.write(jogRowHTML('X'));
|
|
</script>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><button data-bind="click: function(data, event) { sendHome('Y', data, event) }">Home Y
|
|
</button></td>
|
|
<script>
|
|
document.write(jogRowHTML('Y'));
|
|
</script>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><button data-bind="click: function(data, event) { sendHome('Z', data, event) }">Home Z
|
|
</button></td>
|
|
<script>
|
|
document.write(jogRowHTML('Z'));
|
|
</script>
|
|
</tr>
|
|
|
|
</div></table>
|
|
|
|
<br><br>
|
|
<form data-bind="submit: sendGCode">
|
|
Send a G Code: <input type="text" id="gcode" value="" data-bind="value: gcode" />
|
|
<button type="submit">Send</button>
|
|
</form>
|
|
|
|
</div>
|
|
|
|
<!-- PRINT PAGE -->
|
|
<div data-bind="if: chosenPageId() == pages[1]">
|
|
|
|
<form data-bind="submit: function(data, event) { uploadGCode(data, event) }">
|
|
<p>
|
|
Upload a G Code file :<br>
|
|
<input type="file" name="datafile" size="40">
|
|
</p>
|
|
<div>
|
|
<button type="submit">Upload</button>
|
|
</div>
|
|
</form>
|
|
<br>
|
|
Click a file to <span data-bind="text: fileAction"></span><br>
|
|
|
|
<ol class="files" data-bind="foreach: files().files">
|
|
<li data-bind="text: $data, css:
|
|
{
|
|
selected: $data == $root.chosenFileId()
|
|
},
|
|
click: $root.actionOnFile">
|
|
</li>
|
|
</ol>
|
|
|
|
<hr>
|
|
<button data-bind="text: deleteButton, click: function(data, event) { deleteFile(data, event) }"></button>
|
|
</div>
|
|
|
|
|
|
<!-- HELP PAGE -->
|
|
<div data-bind="if: chosenPageId() == pages[2]">
|
|
Help
|
|
</div>
|
|
|
|
<!-- SETTINGS PAGE -->
|
|
<div data-bind="if: chosenPageId() == pages[3]">
|
|
Settings
|
|
</div>
|
|
|
|
<!-- MESSAGES PAGE -->
|
|
<div data-bind="if: chosenPageId() == pages[4]">
|
|
Messages
|
|
</div>
|
|
|
|
<!-- LOGOUT/LOGIN PAGE -->
|
|
<div data-bind="if: (chosenPageId() == pages[5] && gotPassword().password != 'right')">
|
|
<form data-bind="submit: sendPassword">
|
|
Password: <input type="password" id="pwd" value="" data-bind="value: pwd" />
|
|
<button type="submit">Submit</button>
|
|
</form>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
function viewModel()
|
|
{
|
|
// Data
|
|
var self = this;
|
|
self.pages = ['Control', 'Print', 'Help', 'Settings', 'Messages', 'Logout'];
|
|
self.chosenPageId = ko.observable('');
|
|
self.chosenFileId = ko.observable('');
|
|
self.machineName = ko.observable();
|
|
self.gotPassword = ko.observable();
|
|
self.fileAction = ko.observable('print it');
|
|
self.pwd = ko.observable();
|
|
self.gcode = ko.observable();
|
|
self.files = ko.observable();
|
|
self.deleteButton = ko.observable('Delete a file');
|
|
self.dummy = ko.observable();
|
|
|
|
// Behaviours
|
|
|
|
self.fileList = function()
|
|
{
|
|
$.get('/rr_files', {}, self.files);
|
|
}
|
|
|
|
self.getName = function()
|
|
{
|
|
$.get('/rr_name', {}, self.machineName);
|
|
};
|
|
|
|
self.sendPassword = function()
|
|
{
|
|
$.get('/rr_password', {pwd: self.pwd()}, self.gotPassword);
|
|
};
|
|
|
|
self.sendHome = function(axis, data, event)
|
|
{
|
|
if(axis != '')
|
|
$.get('/rr_gcode', {gcode: "G28 " + axis + "0"}, self.dummy);
|
|
else
|
|
$.get('/rr_gcode', {gcode: "G28"}, self.dummy);
|
|
};
|
|
|
|
self.deleteFile = function(data, event)
|
|
{
|
|
if(self.deleteButton() == 'Print a file')
|
|
{
|
|
self.fileAction('print it');
|
|
self.deleteButton('Delete a file');
|
|
} else
|
|
{
|
|
self.fileAction('delete it');
|
|
self.deleteButton('Print a file');
|
|
}
|
|
}
|
|
|
|
self.sendJog = function(axis, d, data, event)
|
|
{
|
|
$.get('/rr_gcode', {gcode: "G91\nG1 " + axis + d + "\nG90\nM83"}, self.dummy);
|
|
};
|
|
|
|
self.actionOnFile = function(file)
|
|
{
|
|
if(self.fileAction() == 'print it')
|
|
{
|
|
self.chosenFileId(file);
|
|
$.get('/rr_gcode', {gcode: "M23 " + file + "\nM24"}, self.dummy);
|
|
} else
|
|
{
|
|
if(confirm("Delete the file " + file + " on " + self.machineName().myName + "?"))
|
|
$.get('/rr_gcode', {gcode: "M30 " + file}, self.dummy);
|
|
self.resetFileAction();
|
|
}
|
|
};
|
|
|
|
self.sendGCode = function()
|
|
{
|
|
$.get('/rr_gcode', {gcode: self.gcode()}, self.dummy);
|
|
};
|
|
|
|
self.resetFileAction = function()
|
|
{
|
|
self.chosenFileId('');
|
|
self.fileAction('print it');
|
|
self.deleteButton('Delete a file');
|
|
self.fileList();
|
|
}
|
|
|
|
self.goToPage = function(page)
|
|
{
|
|
if(page == self.pages[5])
|
|
self.gotPassword(JSON.parse('{"password":"wrong"}'));
|
|
|
|
if(self.gotPassword().password != "right")
|
|
{
|
|
self.chosenPageId(self.pages[5]);
|
|
return;
|
|
}
|
|
|
|
self.resetFileAction();
|
|
self.chosenPageId(page);
|
|
};
|
|
|
|
self.checkFileName = function(uploadForm)
|
|
{
|
|
var list = self.files().files;
|
|
for(var i = 0; i < list.length; i++)
|
|
{
|
|
if(list[i].toUpperCase() == uploadForm.datafile.value.toUpperCase())
|
|
{
|
|
return confirm("This will overwrite the file " +
|
|
list[i] + " on " + self.machineName().myName + ". " +
|
|
"Continue?");
|
|
}
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
self.uploadGCode = function(uploadForm, event)
|
|
{
|
|
if(self.checkFileName(uploadForm))
|
|
{
|
|
alert('upload ' + uploadForm.datafile.value);
|
|
// TODO put post upload here
|
|
}
|
|
}
|
|
|
|
self.getName();
|
|
self.fileList();
|
|
self.goToPage(self.pages[5]);
|
|
self.gotPassword(JSON.parse('{"password":"wrong"}'));
|
|
};
|
|
|
|
window.vm = new viewModel();
|
|
ko.applyBindings(vm);
|
|
</script>
|
|
|
|
|
|
</html>
|