100 lines
4.4 KiB
HTML
100 lines
4.4 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block content %}
|
|
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
|
|
<h1 class="h2"><i class="bi bi-arrows-move text-primary me-2"></i>{{ _('Printer Control') }}</h1>
|
|
</div>
|
|
|
|
{% if error %}
|
|
<div class="alert alert-danger" role="alert">
|
|
<i class="bi bi-exclamation-triangle me-2"></i>{{ error }}
|
|
</div>
|
|
{% else %}
|
|
<div class="row row-cols-1 row-cols-lg-2 g-4">
|
|
<!-- Webcam Stream -->
|
|
<div class="col">
|
|
<div class="card shadow-sm h-100">
|
|
<div class="card-header bg-dark text-light fw-bold rounded-top">
|
|
<i class="bi bi-camera-video me-1"></i>{{ _('Live Webcam') }}
|
|
</div>
|
|
<div class="card-body p-0 ratio ratio-16x9 bg-secondary bg-opacity-25 d-flex align-items-center justify-content-center">
|
|
{% if current_user.is_guest %}
|
|
<div class="text-center text-dark">
|
|
<i class="bi bi-lock-fill display-4 d-block mb-3"></i>
|
|
<h5 class="mb-0">{{ _('Please login to view the webcam stream.') }}</h5>
|
|
</div>
|
|
{% else %}
|
|
<img src="{{ webcam_url }}" alt="{{ _('Loading webcam stream...') }}" class="w-100 h-100 object-fit-cover">
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Motion Control -->
|
|
<div class="col">
|
|
<div class="card shadow-sm h-100">
|
|
<div class="card-header bg-light fw-bold text-secondary">
|
|
<i class="bi bi-dpad me-1"></i>{{ _('Basic Control') }}
|
|
</div>
|
|
<div class="card-body text-center d-flex flex-column justify-content-center align-items-center">
|
|
<!-- Motion Controls -->
|
|
<div class="d-flex gap-4 justify-content-center mb-4 w-100">
|
|
<!-- Home button -->
|
|
<div>
|
|
<button class="btn btn-lg btn-primary rounded-circle shadow mb-2" style="width: 80px; height: 80px;" onclick="sendCommand('home')" title="{{ _('Home All Axes') }}">
|
|
<i class="bi bi-house-door fs-2"></i>
|
|
</button>
|
|
<div class="text-muted small">{{ _('Home All Axes') }}<br>(G28)</div>
|
|
</div>
|
|
<!-- Auto Level button -->
|
|
<div>
|
|
<button class="btn btn-lg btn-info rounded-circle shadow mb-2 text-white" style="width: 80px; height: 80px;" onclick="sendCommand('auto_level')" title="{{ _('Auto Leveling') }}">
|
|
<i class="bi bi-grid-3x3 fs-2"></i>
|
|
</button>
|
|
<div class="text-muted small">{{ _('Auto Leveling') }}<br>(G29)</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick macros -->
|
|
<div class="d-flex gap-3 justify-content-center flex-wrap w-100">
|
|
<button class="btn btn-outline-danger flex-fill shadow-sm py-3" onclick="sendCommand('pause')" title="{{ _('Pause/Resume Print') }}">
|
|
<i class="bi bi-pause-circle fs-4 d-block mb-1"></i>{{ _('Pause') }}
|
|
</button>
|
|
<button class="btn btn-outline-warning flex-fill shadow-sm py-3" onclick="sendCommand('cancel')" title="{{ _('Cancel Print') }}">
|
|
<i class="bi bi-stop-circle fs-4 d-block mb-1"></i>{{ _('Cancel') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function sendCommand(cmdName) {
|
|
if (cmdName === 'cancel' || cmdName === 'home' || cmdName === 'auto_level') {
|
|
window.customConfirm("{{ _('Are you sure you want to perform this action?') }}", () => doSendCommand(cmdName));
|
|
} else {
|
|
doSendCommand(cmdName);
|
|
}
|
|
}
|
|
function doSendCommand(cmdName) {
|
|
fetch('{{ url_for("printer.api_command") }}', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({command: cmdName})
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if(data.success) {
|
|
window.showToast("{{ _('Command') }} " + cmdName + " {{ _('sent.') }}", "success");
|
|
} else {
|
|
window.customAlert("{{ _('Control failed: ') }}" + data.error);
|
|
}
|
|
})
|
|
.catch(err => {
|
|
window.customAlert("{{ _('Network Error: ') }}" + err);
|
|
});
|
|
}
|
|
</script>
|
|
{% endif %}
|
|
{% endblock %} |