kopia lustrzana https://github.com/OpenBuilds/OpenBuilds-CONTROL
Improved css and behaviour
openbuilds-engineer
rodzic
ef7005c5ee
commit
5c7a932eae
|
|
@ -469,7 +469,7 @@
|
|||
<tr>
|
||||
<td colspan="4">
|
||||
<div style="margin: 2px;">
|
||||
<input id="jograte" type="number" min="100" max="10000" step="500" placeholder="1000" data-role="input" data-prepend="Jog Feedrate:" data-clear-button="false" value="1000" style="text-align: right;" />
|
||||
<input id="jograte" type="number" min="100" max="10000" step="500" placeholder="5000" data-role="input" data-prepend="Jog Feedrate:" data-clear-button="false" value="5000" style="text-align: right;" />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -648,86 +648,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="gamepadPanel" style="display: none;">
|
||||
<!-- <h2 class="text-center">Coming Soon</h2> -->
|
||||
<table class="keyboardpanel">
|
||||
<tr>
|
||||
<th colspan="2">Key</th>
|
||||
<!-- <th></th> -->
|
||||
<th>Function</th>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<span class="fa-layers">
|
||||
<img src="img/keyboard.svg" data-fa-transform="grow-8"/>
|
||||
<i class="fas fa-arrow-left" data-fa-transform="grow-4 down-12 right-10"></i>
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="fa-layers">
|
||||
<img src="img/keyboard.svg" data-fa-transform="grow-8"/>
|
||||
<i class="fas fa-arrow-right" data-fa-transform="grow-4 down-12 right-10"></i>
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="remark alert m-0">Jog <span class="tally alert">X</span> Axis</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<span class="fa-layers">
|
||||
<img src="img/keyboard.svg" data-fa-transform="grow-8"/>
|
||||
<i class="fas fa-arrow-up" data-fa-transform="grow-4 down-12 right-10"></i>
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="fa-layers">
|
||||
<img src="img/keyboard.svg" data-fa-transform="grow-8"/>
|
||||
<i class="fas fa-arrow-down" data-fa-transform="grow-4 down-12 right-10"></i>
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="remark success m-0">Jog <span class="tally success">Y</span> Axis</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<span class="fa-layers">
|
||||
<img src="img/keyboard.svg" data-fa-transform="grow-8"/>
|
||||
<span class="fa-layers-text" data-fa-transform="shrink-3 right-18 down-7" style="font-weight:900">Page</span>
|
||||
<span class="fa-layers-text" data-fa-transform="shrink-3 right-18 down-22" style="font-weight:900">Up</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="fa-layers">
|
||||
<img src="img/keyboard.svg" data-fa-transform="grow-8"/>
|
||||
<span class="fa-layers-text" data-fa-transform="shrink-3 right-18 down-7" style="font-weight:900">Page</span>
|
||||
<span class="fa-layers-text" data-fa-transform="shrink-3 right-17 down-22" style="font-weight:900">Down</span>
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="remark info m-0"> Jog <span class="tally info">Z</span> Axis</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<span class="fa-layers">
|
||||
<img src="img/keyboard.svg" data-fa-transform="grow-8"/>
|
||||
<span class="fa-layers-text" data-fa-transform="shrink-3 right-17 down-14" style="font-weight:900">Esc</span>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<div class="remark m-0">Abort / Stop</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- <div id="updateconsole">Click "Download Updates" above</div> -->
|
||||
</div>
|
||||
|
||||
<!-- Bottom StatusBar -->
|
||||
<div class="fixed-bottom">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker
|
||||
.register('/service-worker.js')
|
||||
.then(function(registration) {
|
||||
console.log(
|
||||
'Service Worker registration successful with scope: ',
|
||||
registration.scope
|
||||
);
|
||||
})
|
||||
.catch(function(err) {
|
||||
console.log('Service Worker registration failed: ', err);
|
||||
});
|
||||
}
|
||||
Plik binarny nie jest wyświetlany.
Plik binarny nie jest wyświetlany.
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 87 KiB |
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 18 KiB |
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 85 KiB |
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 109 KiB |
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 127 KiB |
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 140 KiB |
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 188 KiB |
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 34 KiB |
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 50 KiB |
|
|
@ -5,8 +5,32 @@
|
|||
<title>OpenBuilds Machine Driver</title>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="author" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="author" content="openbuilds.com">
|
||||
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
||||
<meta name="HandheldFriendly" content="true" />
|
||||
|
||||
<link rel="manifest" href="manifest.json">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="images/icons/favicon-16x16.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="images/icons/favicon-32x32.png">
|
||||
<link rel="icon" href="./images/icons/apple-touch-icon.png">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta name="apple-mobile-web-app-title" content="OpenBuilds Jog">
|
||||
<link rel="apple-touch-startup-image" href="./images/splash/launch-640x1136.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
|
||||
<link rel="apple-touch-startup-image" href="./images/splash/launch-750x1294.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
|
||||
<link rel="apple-touch-startup-image" href="./images/splash/launch-1242x2148.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
|
||||
<link rel="apple-touch-startup-image" href="./images/splash/launch-1125x2436.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
|
||||
<link rel="apple-touch-startup-image" href="./images/splash/launch-1536x2048.png" media="(min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">
|
||||
<link rel="apple-touch-startup-image" href="./images/splash/launch-1668x2224.png" media="(min-device-width: 834px) and (max-device-width: 834px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">
|
||||
<link rel="apple-touch-startup-image" href="./images/splash/launch-2048x2732.png" media="(min-device-width: 1024px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="./images/icons/apple-touch-icon.png">
|
||||
<link rel="mask-icon" href="./images/icons/safari-pinned-tab.svg" color="#4a4e51">
|
||||
<meta name="msapplication-TileColor" content="#4a4e51">
|
||||
<meta name="theme-color" content="#4a4e51">
|
||||
|
||||
<meta name="metro4:init" content="true">
|
||||
<script type="text/javascript" src="../lib/jquery/jquery.min.js"></script>
|
||||
<link rel="stylesheet" href="../lib/metro4/css/metro-all.css" />
|
||||
|
|
@ -100,8 +124,9 @@
|
|||
<span class="caption">Stop</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
|
||||
<center>
|
||||
<table class="drotable mb-2">
|
||||
<tr>
|
||||
|
|
@ -307,7 +332,7 @@
|
|||
<tr>
|
||||
<td colspan="4">
|
||||
<div style="margin: 2px;">
|
||||
<input id="jograte" type="number" min="100" max="10000" step="500" placeholder="1000" data-role="input" data-prepend="Jog Feedrate:" data-clear-button="false" value="1000" style="text-align: right;" />
|
||||
<input id="jograte" type="number" min="100" max="10000" step="500" placeholder="5000" data-role="input" data-prepend="Jog Feedrate:" data-clear-button="false" value="5000" style="text-align: right;" />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -320,7 +345,6 @@
|
|||
<div class="title_box" id="bill_to">
|
||||
<div id="title"><small>Jog Touchpad</small></div>
|
||||
<div id="svgview">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
{
|
||||
"name": "PWA Splash",
|
||||
"short_name": "PWA Splash",
|
||||
"description": "PWA SPlash Screens",
|
||||
"scope": ".",
|
||||
"start_url": "/",
|
||||
"display": "standalone",
|
||||
"orientation": "portrait",
|
||||
"theme_color": "#ffffff",
|
||||
"background_color": "#ffffff",
|
||||
"icons": [
|
||||
{
|
||||
"src": "images/icons/android-chrome-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "images/icons/android-chrome-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
self.addEventListener('install', function(event) {
|
||||
console.log('[Service Worker] Installing Service Worker ...', event);
|
||||
event.waitUntil(
|
||||
caches.open('static').then(function(cache) {
|
||||
cache.addAll(['/', '/index.html', '/app.js', '/manifest.json']);
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
self.addEventListener('activate', function(event) {
|
||||
console.log('[Service Worker] Activating Service Worker ....', event);
|
||||
});
|
||||
|
||||
self.addEventListener('fetch', function(event) {
|
||||
event.respondWith(
|
||||
caches.match(event.request).then(function(response) {
|
||||
if (response) {
|
||||
return response;
|
||||
} else {
|
||||
return fetch(event.request).then(function(res) {
|
||||
return caches.open('dynamic').then(function(cache) {
|
||||
cache.put(event.request.url, res.clone());
|
||||
return res;
|
||||
});
|
||||
});
|
||||
}
|
||||
})
|
||||
);
|
||||
});
|
||||
|
|
@ -7,24 +7,26 @@ SVG.on(document, 'DOMContentLoaded', function() {
|
|||
|
||||
$(document).ready(function() {
|
||||
$("#svgview").swipe(function(direction, offset, eventstate) {
|
||||
event.preventDefault();
|
||||
draw.clear()
|
||||
console.log("Moving", direction.x, "and", direction.y);
|
||||
console.log("Touch moved by", offset.x, "horizontally and", offset.y, "vertically");
|
||||
console.log("Event state ", eventstate)
|
||||
var height = draw.node.clientHeight;
|
||||
var width = draw.node.clientWidth;
|
||||
line = draw.line(width / 2, height / 2, (width / 2) + offset.x, (height / 2) + offset.y * -1).stroke({
|
||||
width: 5
|
||||
})
|
||||
if (eventstate == 'up') {
|
||||
var feedrate = $('#jograte').val();
|
||||
jogXY((offset.x / 10).toFixed(2), (offset.y / 10).toFixed(2), feedrate)
|
||||
Metro.toast.create("Delta move: X: " + (offset.x / 10).toFixed(2) + " / Y: " + (offset.y / 10).toFixed(2), null, 1000);
|
||||
setTimeout(function() {
|
||||
draw.clear()
|
||||
}, 1000)
|
||||
if (laststatus.comms.connectionStatus == 1 || laststatus.comms.connectionStatus == 2) {
|
||||
event.preventDefault();
|
||||
draw.clear()
|
||||
console.log("Moving", direction.x, "and", direction.y);
|
||||
console.log("Touch moved by", offset.x, "horizontally and", offset.y, "vertically");
|
||||
console.log("Event state ", eventstate)
|
||||
var height = draw.node.clientHeight;
|
||||
var width = draw.node.clientWidth;
|
||||
line = draw.line(width / 2, height / 2, (width / 2) + offset.x, (height / 2) + offset.y * -1).stroke({
|
||||
width: 5
|
||||
})
|
||||
if (eventstate == 'up') {
|
||||
var feedrate = $('#jograte').val();
|
||||
jogXY((offset.x / 10).toFixed(2), (offset.y / 10).toFixed(2), feedrate)
|
||||
Metro.toast.create("Delta move: X: " + (offset.x / 10).toFixed(2) + " / Y: " + (offset.y / 10).toFixed(2), null, 1000);
|
||||
setTimeout(function() {
|
||||
draw.clear()
|
||||
}, 1000)
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
13
app/js/ui.js
13
app/js/ui.js
|
|
@ -96,7 +96,7 @@ function setControlBar(val, status) {
|
|||
$('#toolBtn').hide().attr('disabled', true);
|
||||
$('#homeBtn').hide().attr('disabled', true);
|
||||
$('.estop').hide()
|
||||
} else if (val == 0 || val == 2) { // Connected, but not Playing yet
|
||||
} else if (val == 1 || val == 2) { // Connected, but not Playing yet
|
||||
if (typeof ace !== 'undefined') {
|
||||
$('#runBtn').show().attr('disabled', editor.session.getLength() < 2);
|
||||
} else {
|
||||
|
|
@ -138,6 +138,7 @@ function setControlBar(val, status) {
|
|||
function setJogPanel(val, status) {
|
||||
if (val == 0) { // Not Connected Yet
|
||||
// Show panel and resize editor
|
||||
$("#svgview").css('background-color', '#f5f6f7');
|
||||
$("#jogcontrols").slideUp(20);
|
||||
$("#editor").css('height', 'calc(' + 100 + 'vh - ' + 290 + 'px)');
|
||||
$("#console").css('height', 'calc(' + 100 + 'vh - ' + 290 + 'px)');
|
||||
|
|
@ -149,8 +150,13 @@ function setJogPanel(val, status) {
|
|||
if ($('#jograte').attr('disabled')) {
|
||||
$('#jograte').attr('disabled', false);
|
||||
}
|
||||
} else if (val == 0 || val == 2) { // Connected, but not Playing yet
|
||||
$('#xPos').html('0.00');
|
||||
$('#yPos').html('0.00');
|
||||
$('#zPos').html('0.00');
|
||||
|
||||
} else if (val == 1 || val == 2) { // Connected, but not Playing yet
|
||||
// Show panel and resize editor
|
||||
$("#svgview").css('background-color', '#ffffff');
|
||||
$("#jogcontrols").slideDown(20);
|
||||
$("#editor").css('height', 'calc(' + 100 + 'vh - ' + 480 + 'px)');
|
||||
$("#console").css('height', 'calc(' + 100 + 'vh - ' + 480 + 'px)');
|
||||
|
|
@ -164,6 +170,7 @@ function setJogPanel(val, status) {
|
|||
}
|
||||
} else if (val == 3) { // Busy Streaming GCODE
|
||||
// Show panel and resize editor
|
||||
$("#svgview").css('background-color', '#f5f6f7');
|
||||
$("#editor").css('height', 'calc(' + 100 + 'vh - ' + 480 + 'px)');
|
||||
$("#console").css('height', 'calc(' + 100 + 'vh - ' + 480 + 'px)');
|
||||
// $('#console').scrollTop($("#console")[0].scrollHeight - $("#console").height());
|
||||
|
|
@ -177,6 +184,7 @@ function setJogPanel(val, status) {
|
|||
}
|
||||
} else if (val == 4) { // Paused
|
||||
// Show panel and resize editor
|
||||
$("#svgview").css('background-color', '#f5f6f7');
|
||||
$("#jogcontrols").slideDown(20);
|
||||
$("#editor").css('height', 'calc(' + 100 + 'vh - ' + 480 + 'px)');
|
||||
$("#console").css('height', 'calc(' + 100 + 'vh - ' + 480 + 'px)');
|
||||
|
|
@ -190,6 +198,7 @@ function setJogPanel(val, status) {
|
|||
}
|
||||
} else if (val == 5) { // Alarm State
|
||||
// Show panel and resize editor
|
||||
$("#svgview").css('background-color', '#f5f6f7');
|
||||
$("#jogcontrols").slideUp(20);
|
||||
$("#editor").css('height', 'calc(' + 100 + 'vh - ' + 290 + 'px)');
|
||||
$("#console").css('height', 'calc(' + 100 + 'vh - ' + 290 + 'px)');
|
||||
|
|
|
|||
|
|
@ -216,18 +216,6 @@ function initSocket() {
|
|||
}
|
||||
}
|
||||
|
||||
// Set the Connection Toolbar option
|
||||
setConnectBar(status.comms.connectionStatus, status);
|
||||
setControlBar(status.comms.connectionStatus, status)
|
||||
setJogPanel(status.comms.connectionStatus, status)
|
||||
setConsole(status.comms.connectionStatus, status)
|
||||
if (status.comms.connectionStatus != 5) {
|
||||
bellstate = false
|
||||
};
|
||||
if (status.comms.connectionStatus == 0) {
|
||||
showGrbl(false)
|
||||
}
|
||||
|
||||
$('#runStatus').html("Controller: " + status.comms.runStatus);
|
||||
|
||||
|
||||
|
|
@ -390,6 +378,18 @@ function initSocket() {
|
|||
//
|
||||
// }
|
||||
|
||||
// Set the Connection Toolbar option
|
||||
setConnectBar(status.comms.connectionStatus, status);
|
||||
setControlBar(status.comms.connectionStatus, status)
|
||||
setJogPanel(status.comms.connectionStatus, status)
|
||||
setConsole(status.comms.connectionStatus, status)
|
||||
if (status.comms.connectionStatus != 5) {
|
||||
bellstate = false
|
||||
};
|
||||
if (status.comms.connectionStatus == 0) {
|
||||
showGrbl(false)
|
||||
}
|
||||
|
||||
laststatus = status;
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -20,11 +20,17 @@ $(function() {
|
|||
};
|
||||
|
||||
function swipeInfo(event) {
|
||||
console.log(event.originalEvent)
|
||||
if (event.originalEvent.touches) {
|
||||
var x = event.originalEvent.touches[0].pageX,
|
||||
y = event.originalEvent.touches[0].pageY,
|
||||
dx, dy;
|
||||
} else {
|
||||
var x = event.originalEvent.pageX,
|
||||
y = event.originalEvent.pageY,
|
||||
dx, dy;
|
||||
}
|
||||
|
||||
// console.log(event.originalEvent.touches[0])
|
||||
var x = event.originalEvent.touches[0].pageX,
|
||||
y = event.originalEvent.touches[0].pageY,
|
||||
dx, dy;
|
||||
|
||||
dx = (x > originalPosition.x) ? "right" : "left";
|
||||
dy = (y > originalPosition.y) ? "down" : "up";
|
||||
|
|
@ -44,10 +50,18 @@ $(function() {
|
|||
$el.on("touchstart mousedown", function(event) {
|
||||
touchDown = true;
|
||||
info.eventstate = 'down';
|
||||
originalPosition = {
|
||||
x: event.originalEvent.touches[0].pageX,
|
||||
y: event.originalEvent.touches[0].pageY
|
||||
};
|
||||
if (event.originalEvent.touches) {
|
||||
originalPosition = {
|
||||
x: event.originalEvent.touches[0].pageX,
|
||||
y: event.originalEvent.touches[0].pageY
|
||||
};
|
||||
} else {
|
||||
originalPosition = {
|
||||
x: event.originalEvent.x,
|
||||
y: event.originalEvent.y
|
||||
};
|
||||
}
|
||||
|
||||
callback(info.direction, info.offset, info.eventstate, originalPosition);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "OpenBuildsMachineDriver",
|
||||
"version": "1.0.76",
|
||||
"version": "1.0.78",
|
||||
"license": "AGPL-3.0",
|
||||
"description": "Machine Interface Driver for OpenBuilds",
|
||||
"author": "github.com/openbuilds <webmaster@openbuilds.com>",
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue