229 lines
6.4 KiB
HTML
229 lines
6.4 KiB
HTML
<!DOCTYPE HTML>
|
|
<head>
|
|
|
|
<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;
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<html>
|
|
<script src="jquery.js" type="text/javascript"></script>
|
|
<script src="knockout.js" type="text/javascript"></script>
|
|
|
|
|
|
<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>
|
|
|
|
|
|
<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 type="button" onclick="return homea()">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 type="button" onclick="return home('X')">Home X</button></td>
|
|
<td><button type="button" onclick="return move('X', -100)"><--- X</button></td>
|
|
<td><button type="button" onclick="return move('X', -10)"><-- X</button></td>
|
|
<td><button type="button" onclick="return move('X', -1)"><- X</button></td>
|
|
<td><button type="button" onclick="return move('X', -0.1)">< X</button></td>
|
|
<td><button type="button" onclick="return move('X', 0.1)">X ></button></td>
|
|
<td><button type="button" onclick="return move('X', 1)">X --></button></td>
|
|
<td><button type="button" onclick="return move('X', 10)">X --></button></td>
|
|
<td><button type="button" onclick="return move('X', 100)">X ---></button></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><button type="button" onclick="return home('Y')">Home Y</button></td>
|
|
<td><button type="button" onclick="return move('Y', -100)"><--- Y</button></td>
|
|
<td><button type="button" onclick="return move('Y', -10)"><-- Y</button></td>
|
|
<td><button type="button" onclick="return move('Y', -1)"><- Y</button></td>
|
|
<td><button type="button" onclick="return move('Y', -0.1)">< Y</button></td>
|
|
<td><button type="button" onclick="return move('Y', 0.1)">Y ></button></td>
|
|
<td><button type="button" onclick="return move('Y', 1)">Y -></button></td>
|
|
<td><button type="button" onclick="return move('Y', 10)">Y --></button></td>
|
|
<td><button type="button" onclick="return move('Y', 100)">Y ---></button></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><button type="button" onclick="return home('Z')">Home Z</button></td>
|
|
<td><button type="button" onclick="return move('Z', -100)"><--- Z</button></td>
|
|
<td><button type="button" onclick="return move('Z', -10)"><-- Z</button></td>
|
|
<td><button type="button" onclick="return move('Z', -1)"><- Z</button></td>
|
|
<td><button type="button" onclick="return move('Z', -0.1)">< Z</button></td>
|
|
<td><button type="button" onclick="return move('Z', 0.1)">Z ></button></td>
|
|
<td><button type="button" onclick="return move('Z', 1)">Z -></button></td>
|
|
<td><button type="button" onclick="return move('Z', 10)">Z --></button></td>
|
|
<td><button type="button" onclick="return move('Z', 100)">Z ---></button></td>
|
|
</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>
|
|
|
|
<div data-bind="if: chosenPageId() == pages[1]">
|
|
Print
|
|
</div>
|
|
|
|
|
|
<div data-bind="if: chosenPageId() == pages[2]">
|
|
Help
|
|
</div>
|
|
|
|
<div data-bind="if: chosenPageId() == pages[3]">
|
|
Settings
|
|
</div>
|
|
|
|
<div data-bind="if: chosenPageId() == pages[4]">
|
|
Messages
|
|
</div>
|
|
|
|
<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 homea(){ window.location.href = "control.php?gcode=G28";}
|
|
function home(axis){ window.location.href = "control.php?gcode=G28%20" + axis + "0";}
|
|
function move(axis, d){ window.location.href = "control.php?gcode=G91%0AG1%20" + axis + d + "%0AG90";}
|
|
|
|
function viewModel()
|
|
{
|
|
// Data
|
|
var self = this;
|
|
self.pages = ['Control', 'Print', 'Help', 'Settings', 'Messages', 'Logout'];
|
|
self.chosenPageId = ko.observable();
|
|
self.machineName = ko.observable();
|
|
self.gotPassword = ko.observable();
|
|
self.pwd = ko.observable();
|
|
self.gcode = ko.observable();
|
|
self.dummy = ko.observable();
|
|
|
|
// Behaviours
|
|
self.getName = function()
|
|
{
|
|
$.get('/rr_name', {}, self.machineName);
|
|
};
|
|
|
|
self.sendPassword = function()
|
|
{
|
|
$.get('/rr_password', {pwd: self.pwd()}, self.gotPassword);
|
|
//self.chosenPageId(self.pages[0]);
|
|
};
|
|
|
|
self.sendGCode = function()
|
|
{
|
|
$.get('/rr_gcode', {gcode: self.gcode()}, self.dummy);
|
|
};
|
|
|
|
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.chosenPageId(page);
|
|
};
|
|
|
|
self.getName();
|
|
self.goToPage(self.pages[5]);
|
|
self.gotPassword(JSON.parse('{"password":"wrong"}'));
|
|
};
|
|
|
|
ko.applyBindings(new viewModel());
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</html>
|