GUI verbessert und Admin console eingebaut
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
@@ -0,0 +1,204 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||
<title>CUNO Admin</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
</head>
|
||||
|
||||
<body class="admin-page">
|
||||
<main>
|
||||
<div class="admin_shell">
|
||||
<section class="panel admin_panel">
|
||||
<div class="panel_header">
|
||||
<div class="pilot_brand">
|
||||
<a class="pilot_logo_link" href="./index.html" aria-label="Zurück zur Steuerung">
|
||||
<img class="pilot_logo" src="./Logo_Cuno.png" alt="CUNO Logo" />
|
||||
</a>
|
||||
<div>
|
||||
<p class="eyebrow">Admin</p>
|
||||
<h1>CUNO System</h1>
|
||||
</div>
|
||||
</div>
|
||||
<p id="admin_status" class="status_badge">Lade...</p>
|
||||
</div>
|
||||
|
||||
<p class="admin_copy">
|
||||
Diese Seite bündelt die wichtigsten Systemfunktionen und Statuswerte des Raspberry Pi.
|
||||
</p>
|
||||
|
||||
<div class="admin_content">
|
||||
<div class="admin_section">
|
||||
<div class="admin_section_header">
|
||||
<p class="eyebrow">Aktionen und Status</p>
|
||||
</div>
|
||||
<div class="admin_action_row">
|
||||
<div class="admin_actions">
|
||||
<button class="button buttonWarm" onclick="runAdminAction('restart-camera')">Kameradienst neu starten</button>
|
||||
<button class="button buttonDanger" onclick="runAdminAction('restart-container')">ExoMy-Container neu starten</button>
|
||||
<button class="button buttonWarm" onclick="runAdminAction('reboot')">Raspberry Pi neu starten</button>
|
||||
<button class="button buttonDanger" onclick="runAdminAction('shutdown')">Raspberry Pi herunterfahren</button>
|
||||
</div>
|
||||
|
||||
<div class="service_compact">
|
||||
<div class="service_compact_row">
|
||||
<span>cam</span>
|
||||
<strong id="service_camera" class="service_state">-</strong>
|
||||
</div>
|
||||
<div class="service_compact_row">
|
||||
<span>api</span>
|
||||
<strong id="service_admin_api" class="service_state">-</strong>
|
||||
</div>
|
||||
<div class="service_compact_row">
|
||||
<span>exo</span>
|
||||
<strong id="service_exomy" class="service_state">-</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="admin_section">
|
||||
<div class="admin_section_header">
|
||||
<p class="eyebrow">Systemstatus</p>
|
||||
</div>
|
||||
<div class="info_grid">
|
||||
<div class="info_card">
|
||||
<span class="info_label">WLAN-Status</span>
|
||||
<strong id="info_wifi">-</strong>
|
||||
</div>
|
||||
<div class="info_card">
|
||||
<span class="info_label">IP-Adressen</span>
|
||||
<strong id="info_ips">-</strong>
|
||||
</div>
|
||||
<div class="info_card">
|
||||
<span class="info_label">CPU-Temperatur</span>
|
||||
<strong id="info_temp">-</strong>
|
||||
</div>
|
||||
<div class="info_card">
|
||||
<span class="info_label">Uptime</span>
|
||||
<strong id="info_uptime">-</strong>
|
||||
</div>
|
||||
<div class="info_card">
|
||||
<span class="info_label">Freier Speicherplatz</span>
|
||||
<strong id="info_disk">-</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="admin_back" href="./index.html">Zurück zur Steuerung</a>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script type="text/javascript">
|
||||
var adminApiBase = window.location.protocol + '//' + window.location.hostname + ':8082';
|
||||
|
||||
function setAdminStatus(text) {
|
||||
var status = document.getElementById('admin_status');
|
||||
if (status) {
|
||||
status.innerHTML = text;
|
||||
}
|
||||
}
|
||||
|
||||
function setText(id, value) {
|
||||
var node = document.getElementById(id);
|
||||
if (node) {
|
||||
node.textContent = value || '-';
|
||||
}
|
||||
}
|
||||
|
||||
function setServiceState(id, value) {
|
||||
var node = document.getElementById(id);
|
||||
if (!node) {
|
||||
return;
|
||||
}
|
||||
|
||||
node.textContent = value || '-';
|
||||
node.classList.remove('state_active', 'state_inactive', 'state_unknown');
|
||||
|
||||
if (value === 'active' || value === 'running') {
|
||||
node.classList.add('state_active');
|
||||
return;
|
||||
}
|
||||
|
||||
if (value === 'inactive' || value === 'failed' || value === 'exited') {
|
||||
node.classList.add('state_inactive');
|
||||
return;
|
||||
}
|
||||
|
||||
node.classList.add('state_unknown');
|
||||
}
|
||||
|
||||
function renderStatus(data) {
|
||||
setAdminStatus(data.status || 'Bereit');
|
||||
|
||||
setText('info_ips', data.system && data.system.ips);
|
||||
setText('info_wifi', data.system && data.system.wifi);
|
||||
setText('info_temp', data.system && data.system.cpu_temperature);
|
||||
setText('info_uptime', data.system && data.system.uptime);
|
||||
setText('info_disk', data.system && data.system.disk_free);
|
||||
|
||||
setServiceState('service_camera', data.services && data.services.camera);
|
||||
setServiceState('service_admin_api', data.services && data.services.admin_api);
|
||||
setServiceState('service_exomy', data.services && data.services.exomy);
|
||||
}
|
||||
|
||||
async function fetchStatus() {
|
||||
try {
|
||||
var response = await fetch(adminApiBase + '/api/status');
|
||||
if (!response.ok) {
|
||||
throw new Error('status ' + response.status);
|
||||
}
|
||||
|
||||
var data = await response.json();
|
||||
renderStatus(data);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
setAdminStatus('API nicht erreichbar');
|
||||
}
|
||||
}
|
||||
|
||||
async function runAdminAction(action) {
|
||||
var labels = {
|
||||
'restart-camera': 'Kameradienst jetzt wirklich neu starten?',
|
||||
'restart-container': 'ExoMy-Container jetzt wirklich neu starten?',
|
||||
'reboot': 'Raspberry Pi jetzt wirklich neu starten?',
|
||||
'shutdown': 'Raspberry Pi jetzt wirklich herunterfahren?'
|
||||
};
|
||||
|
||||
if (!window.confirm(labels[action] || 'Befehl ausführen?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
setAdminStatus('Sende Befehl...');
|
||||
|
||||
try {
|
||||
var response = await fetch(adminApiBase + '/api/' + action, {
|
||||
method: 'POST'
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('status ' + response.status);
|
||||
}
|
||||
|
||||
var data = await response.json();
|
||||
setAdminStatus(data.status || 'Befehl gesendet');
|
||||
window.setTimeout(fetchStatus, 2000);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
setAdminStatus('Fehler');
|
||||
alert('Der Admin-Befehl konnte nicht ausgeführt werden.');
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('load', function () {
|
||||
fetchStatus();
|
||||
window.setInterval(fetchStatus, 10000);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -3,35 +3,72 @@
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||
|
||||
<script type="text/javascript" src="http://static.robotwebtools.org/roslibjs/current/roslib.min.js"></script>
|
||||
<script type="text/javascript" src="./vendor/roslib.min.js"></script>
|
||||
<script src="./node_modules/nipplejs/dist/nipplejs.js"></script>
|
||||
<script type="text/javascript" type="text/javascript">
|
||||
var publishImmidiately = true;
|
||||
var host_url = window.location.hostname;
|
||||
console.log(host_url);
|
||||
var watchdog_handle;
|
||||
var ros = null;
|
||||
var joy_listener = null;
|
||||
|
||||
var ros = new ROSLIB.Ros({
|
||||
url: 'ws://' + host_url + ':9090'
|
||||
function setStatus(text) {
|
||||
var status = document.getElementById("status");
|
||||
if (status) {
|
||||
status.innerHTML = text;
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('load', function () {
|
||||
var video = document.getElementById('video_output');
|
||||
if (video) {
|
||||
video.src = '//' + host_url + ':8081/stream.mjpg';
|
||||
}
|
||||
|
||||
if (typeof nipplejs === 'undefined') {
|
||||
console.error('nipplejs not loaded');
|
||||
setStatus('Joystick-Fehler');
|
||||
return;
|
||||
}
|
||||
|
||||
createJoystick();
|
||||
|
||||
if (typeof ROSLIB === 'undefined') {
|
||||
console.error('ROSLIB not loaded');
|
||||
setStatus('ROSLIB fehlt');
|
||||
return;
|
||||
}
|
||||
|
||||
ros = new ROSLIB.Ros({
|
||||
url: 'ws://' + host_url + ':9090'
|
||||
});
|
||||
|
||||
ros.on('connection', function () {
|
||||
setStatus("Verbunden");
|
||||
});
|
||||
|
||||
ros.on('error', function () {
|
||||
setStatus("Fehler");
|
||||
});
|
||||
|
||||
ros.on('close', function () {
|
||||
setStatus("Getrennt");
|
||||
});
|
||||
|
||||
joy_listener = new ROSLIB.Topic({
|
||||
ros: ros,
|
||||
name: "/joy",
|
||||
messageType: 'sensor_msgs/Joy'
|
||||
});
|
||||
});
|
||||
|
||||
// Initialize Axes and Buttons arrays
|
||||
var axes = [0, 0, 0, 0, 0, 0];
|
||||
var buttons = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
|
||||
|
||||
ros.on('connection', function () {
|
||||
document.getElementById("status").innerHTML = "Connected";
|
||||
});
|
||||
|
||||
ros.on('error', function (error) {
|
||||
document.getElementById("status").innerHTML = "Error";
|
||||
});
|
||||
|
||||
ros.on('close', function () {
|
||||
document.getElementById("status").innerHTML = "Closed";
|
||||
});
|
||||
|
||||
createJoystick = function () {
|
||||
var options = {
|
||||
zone: document.getElementById('joy_container'),
|
||||
@@ -79,25 +116,14 @@
|
||||
console.log('End function called')
|
||||
});
|
||||
}
|
||||
window.onload = function () {
|
||||
createJoystick();
|
||||
// Video output
|
||||
stream_url = '//' + host_url + ':8080/stream?topic=/pi_cam/image_raw';
|
||||
console.log(stream_url);
|
||||
document.getElementById("video_output").src = stream_url;
|
||||
}
|
||||
|
||||
joy_listener = new ROSLIB.Topic({
|
||||
ros: ros,
|
||||
name: "/joy",
|
||||
messageType: 'sensor_msgs/Joy'
|
||||
});
|
||||
|
||||
joy_event = function () {
|
||||
var joy = new ROSLIB.Message({
|
||||
axes: axes,
|
||||
buttons: buttons
|
||||
});
|
||||
if (!joy_listener) {
|
||||
return;
|
||||
}
|
||||
joy_listener.publish(joy);
|
||||
console.log(axes)
|
||||
console.log(buttons)
|
||||
@@ -122,23 +148,55 @@
|
||||
<body>
|
||||
<main>
|
||||
<div class="wrapper">
|
||||
<div class="left" id="left">
|
||||
<div class="joy_container" id="joy_container"></div>
|
||||
</div>
|
||||
<section class="panel panel-video" id="middle">
|
||||
<div class="modes_strip">
|
||||
<div class="modes_strip_header">
|
||||
<p class="eyebrow">Fahrmodi</p>
|
||||
</div>
|
||||
<div class="button_container">
|
||||
<button class="button buttonY" onclick="button_clicked(3)">Crabbing</button>
|
||||
<button class="button buttonX" onclick="button_clicked(0)">Spot Turn</button>
|
||||
<button class="button buttonA" onclick="button_clicked(1)">Ackermann</button>
|
||||
<button class="button buttonStart" onclick="button_clicked(9)">Motoren</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="middle" id="middle">
|
||||
<div class="image_container">
|
||||
<img id="video_output" style="object-fit:cover; width:100%;"></img>
|
||||
<div class="panel_header">
|
||||
<div>
|
||||
<p class="eyebrow">Livebild</p>
|
||||
<h1>Kamera</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right" id="right">
|
||||
<div class="button_container">
|
||||
<button class="button buttonY" onclick="button_clicked(3)">CRABBING</button>
|
||||
<button class="button buttonX" onclick="button_clicked(0)">SPOT TURN</button>
|
||||
<button class="button buttonA" onclick="button_clicked(1)">ACKERMANN</button>
|
||||
<button class="button buttonStart" onclick="button_clicked(9)">MOTORS</button>
|
||||
|
||||
<div class="image_frame">
|
||||
<div class="image_container">
|
||||
<img id="video_output" alt="Kamerabild vom ExoMy" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel panel-control" id="right">
|
||||
<div class="panel_header">
|
||||
<div class="pilot_brand">
|
||||
<a class="pilot_logo_link" href="./admin.html" aria-label="Zur Admin-Seite">
|
||||
<img class="pilot_logo" src="./Logo_Cuno.png" alt="CUNO Logo" />
|
||||
</a>
|
||||
<div>
|
||||
<p class="eyebrow">Fahrsteuerung</p>
|
||||
<h2>CUNO Pilot</h2>
|
||||
</div>
|
||||
</div>
|
||||
<p id="status" class="status_badge">Verbinde...</p>
|
||||
</div>
|
||||
|
||||
<div class="joy_shell">
|
||||
<div class="joy_container" id="joy_container"></div>
|
||||
<div class="joy_hint">
|
||||
<span>Lenken</span>
|
||||
<span>Vor / Zurück</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
@@ -1,91 +1,676 @@
|
||||
header {
|
||||
background-color: #f1f1f1;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
:root {
|
||||
--bg: #f4efe4;
|
||||
--bg-accent: #ddd3bd;
|
||||
--panel: rgba(255, 252, 245, 0.88);
|
||||
--panel-strong: rgba(255, 250, 240, 0.96);
|
||||
--line: rgba(70, 52, 28, 0.12);
|
||||
--text: #201914;
|
||||
--muted: #6f6256;
|
||||
--shadow: 0 18px 40px rgba(55, 38, 18, 0.12);
|
||||
--radius-xl: 28px;
|
||||
--radius-lg: 22px;
|
||||
--radius-md: 18px;
|
||||
--gap: clamp(0.85rem, 2vw, 1.4rem);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: scroll;
|
||||
min-height: 100dvh;
|
||||
overflow: hidden;
|
||||
font-family: "Segoe UI", "Trebuchet MS", sans-serif;
|
||||
color: var(--text);
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(255, 255, 255, 0.75), transparent 28%),
|
||||
radial-gradient(circle at bottom right, rgba(193, 163, 107, 0.22), transparent 30%),
|
||||
linear-gradient(135deg, var(--bg), var(--bg-accent));
|
||||
}
|
||||
|
||||
main {
|
||||
min-height: 100dvh;
|
||||
padding: clamp(0.75rem, 2vw, 1.25rem);
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
.button {
|
||||
border: none;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
margin: 10px auto;
|
||||
cursor: pointer;
|
||||
width: 90%;
|
||||
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
border-radius: 8px;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(32rem, 1.9fr) minmax(16rem, 0.92fr);
|
||||
grid-template-areas: "video control";
|
||||
gap: var(--gap);
|
||||
min-height: calc(100dvh - 2 * clamp(0.75rem, 2vw, 1.25rem));
|
||||
}
|
||||
|
||||
.buttonY{
|
||||
background-color: orange;
|
||||
grid-row: 1;
|
||||
}
|
||||
.buttonX{
|
||||
background-color: blue;
|
||||
grid-row: 2;
|
||||
}
|
||||
.buttonA{
|
||||
background-color: green;
|
||||
grid-row: 3;
|
||||
.panel-video {
|
||||
grid-area: video;
|
||||
}
|
||||
|
||||
.buttonStart{
|
||||
background-color: red;
|
||||
grid-row: 4;
|
||||
width: 50%;
|
||||
font-size: 12px;
|
||||
.panel-control {
|
||||
grid-area: control;
|
||||
}
|
||||
|
||||
.panel {
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--gap);
|
||||
padding: clamp(1rem, 2vw, 1.5rem);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-xl);
|
||||
background: var(--panel);
|
||||
box-shadow: var(--shadow);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.panel_header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.pilot_brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.pilot_logo_link {
|
||||
display: inline-flex;
|
||||
border-radius: 18px;
|
||||
transition: transform 120ms ease, filter 120ms ease;
|
||||
}
|
||||
|
||||
.pilot_logo_link:hover {
|
||||
transform: translateY(-1px);
|
||||
filter: brightness(1.03);
|
||||
}
|
||||
|
||||
.pilot_logo {
|
||||
width: clamp(3.25rem, 6vw, 4.5rem);
|
||||
height: auto;
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 10px 18px rgba(55, 38, 18, 0.15));
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 0.35rem;
|
||||
color: var(--muted);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(1.6rem, 3vw, 2.5rem);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: clamp(1.25rem, 2.3vw, 1.7rem);
|
||||
}
|
||||
|
||||
.status_badge {
|
||||
margin: 0;
|
||||
padding: 0.55rem 0.9rem;
|
||||
border-radius: 999px;
|
||||
background: var(--panel-strong);
|
||||
border: 1px solid var(--line);
|
||||
color: var(--muted);
|
||||
font-size: 0.92rem;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.joy_shell {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-height: 17rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: clamp(0.85rem, 2.4vw, 1.5rem);
|
||||
border-radius: var(--radius-lg);
|
||||
background:
|
||||
radial-gradient(circle at center, rgba(255, 255, 255, 0.95), rgba(242, 231, 211, 0.8) 55%, rgba(217, 199, 168, 0.55) 100%);
|
||||
border: 1px solid rgba(104, 77, 35, 0.12);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.joy_shell::before,
|
||||
.joy_shell::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 10% 10%;
|
||||
border-radius: 50%;
|
||||
border: 1px dashed rgba(94, 66, 31, 0.14);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.joy_shell::after {
|
||||
inset: 24% 24%;
|
||||
}
|
||||
|
||||
.joy_container {
|
||||
position: relative;
|
||||
width: min(100%, 20rem);
|
||||
aspect-ratio: 1;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.joy_hint {
|
||||
position: absolute;
|
||||
inset: auto 1rem 1rem 1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: var(--muted);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.image_frame {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.image_container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
aspect-ratio: 16 / 9;
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-lg);
|
||||
background:
|
||||
linear-gradient(145deg, rgba(28, 26, 23, 0.96), rgba(68, 53, 39, 0.96));
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.image_container::after {
|
||||
content: "Live";
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
padding: 0.35rem 0.7rem;
|
||||
border-radius: 999px;
|
||||
background: rgba(211, 63, 49, 0.92);
|
||||
color: #fff;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
#video_output {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
background: #111;
|
||||
}
|
||||
|
||||
.modes_strip {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.modes_strip_header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.modes_strip .eyebrow {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.button_container {
|
||||
position: absolute;
|
||||
display: grid;
|
||||
left: 25%;
|
||||
top: 25%;
|
||||
height: 50%;
|
||||
width: 50%;
|
||||
}
|
||||
.image_container {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
height: 80%;
|
||||
width: 80%;
|
||||
}
|
||||
.joy_container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
grid-template-rows: 1fr;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.left {
|
||||
position: relative;
|
||||
background: rgba(63, 58, 55, 0.1);
|
||||
grid-column: 1;
|
||||
height: 100%;
|
||||
}
|
||||
.middle {
|
||||
position: relative;
|
||||
background: rgba(45, 48, 45, 0.1);
|
||||
grid-column: 2;
|
||||
height: 100%;
|
||||
.button {
|
||||
width: 100%;
|
||||
min-height: 4rem;
|
||||
border: 0;
|
||||
border-radius: var(--radius-md);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
font-size: clamp(1rem, 1.6vw, 1.15rem);
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.02em;
|
||||
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
|
||||
transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;
|
||||
}
|
||||
|
||||
.right {
|
||||
position: relative;
|
||||
background: rgba(63, 58, 55, 0.1);
|
||||
grid-column: 3;
|
||||
.button:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
filter: brightness(1.04);
|
||||
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.buttonY {
|
||||
background: linear-gradient(180deg, #f09a3c, #d47418);
|
||||
}
|
||||
|
||||
.buttonX {
|
||||
background: linear-gradient(180deg, #3271da, #184cb0);
|
||||
}
|
||||
|
||||
.buttonA {
|
||||
background: linear-gradient(180deg, #3aa864, #1d8745);
|
||||
}
|
||||
|
||||
.buttonStart {
|
||||
background: linear-gradient(180deg, #d4514a, #a92f2a);
|
||||
}
|
||||
|
||||
.buttonWarm {
|
||||
background: linear-gradient(180deg, #d68a2f, #af6115);
|
||||
}
|
||||
|
||||
.buttonDanger {
|
||||
background: linear-gradient(180deg, #c84d45, #8f2721);
|
||||
}
|
||||
|
||||
.admin_shell {
|
||||
min-height: calc(100dvh - 2 * clamp(0.75rem, 2vw, 1.25rem));
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.admin_panel {
|
||||
width: 100%;
|
||||
min-height: calc(100dvh - 2 * clamp(0.75rem, 2vw, 1.25rem));
|
||||
display: grid;
|
||||
grid-template-rows: auto auto auto 1fr auto;
|
||||
gap: 0.9rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.admin_copy {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
font-size: 0.92rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.admin_section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.55rem;
|
||||
}
|
||||
|
||||
.admin_section_header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.admin_actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.7rem;
|
||||
}
|
||||
|
||||
.admin_action_row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 9rem;
|
||||
gap: 0.7rem;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.admin_actions .button {
|
||||
min-height: 3.75rem;
|
||||
font-size: 0.96rem;
|
||||
}
|
||||
|
||||
.admin_back {
|
||||
color: var(--muted);
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.admin_back:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.info_grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.7rem;
|
||||
}
|
||||
|
||||
.info_card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
min-height: 0;
|
||||
padding: 0.8rem 0.9rem;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--line);
|
||||
background: var(--panel-strong);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.info_label {
|
||||
color: var(--muted);
|
||||
font-size: 0.74rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.info_card strong {
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.service_compact {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
padding: 0.7rem 0.8rem;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--line);
|
||||
background: var(--panel-strong);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.service_compact_row {
|
||||
display: grid;
|
||||
grid-template-columns: 2.2rem 1fr;
|
||||
gap: 0.6rem;
|
||||
align-items: center;
|
||||
padding: 0.1rem 0;
|
||||
font-family: Consolas, "Courier New", monospace;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.service_compact_row span {
|
||||
color: var(--muted);
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.service_state {
|
||||
text-transform: lowercase;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.state_active {
|
||||
color: #1d8745;
|
||||
}
|
||||
|
||||
.state_inactive {
|
||||
color: #a92f2a;
|
||||
}
|
||||
|
||||
.state_unknown {
|
||||
color: #8a6b35;
|
||||
}
|
||||
|
||||
.admin-page {
|
||||
color: #d9e6e9;
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(58, 97, 104, 0.22), transparent 24%),
|
||||
radial-gradient(circle at bottom right, rgba(214, 138, 47, 0.18), transparent 22%),
|
||||
linear-gradient(145deg, #081116, #0c1b22 46%, #09141a);
|
||||
}
|
||||
|
||||
.admin-page::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background:
|
||||
linear-gradient(rgba(125, 165, 174, 0.08) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(125, 165, 174, 0.08) 1px, transparent 1px);
|
||||
background-size: 32px 32px;
|
||||
mask-image: radial-gradient(circle at center, black 45%, transparent 100%);
|
||||
}
|
||||
|
||||
.admin-page .admin_panel {
|
||||
position: relative;
|
||||
border-color: rgba(91, 127, 137, 0.45);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(14, 31, 38, 0.95), rgba(11, 24, 30, 0.96)),
|
||||
linear-gradient(120deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgba(118, 166, 177, 0.08),
|
||||
0 18px 45px rgba(0, 0, 0, 0.38);
|
||||
}
|
||||
|
||||
.admin-page .admin_panel::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0.9rem;
|
||||
border: 1px solid rgba(99, 143, 154, 0.18);
|
||||
border-radius: 20px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.admin-page .eyebrow {
|
||||
color: #7db0b7;
|
||||
letter-spacing: 0.16em;
|
||||
}
|
||||
|
||||
.admin-page h1,
|
||||
.admin-page h2,
|
||||
.admin-page strong,
|
||||
.admin-page .admin_back {
|
||||
color: #eef7f8;
|
||||
}
|
||||
|
||||
.admin-page .admin_copy {
|
||||
color: #93acb2;
|
||||
}
|
||||
|
||||
.admin-page .status_badge {
|
||||
background: rgba(16, 38, 45, 0.92);
|
||||
border-color: rgba(108, 166, 177, 0.34);
|
||||
color: #9ed4dc;
|
||||
font-family: Consolas, "Courier New", monospace;
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.admin-page .pilot_logo_link {
|
||||
background: radial-gradient(circle at center, rgba(95, 140, 149, 0.16), transparent 70%);
|
||||
}
|
||||
|
||||
.admin-page .info_card,
|
||||
.admin-page .service_compact {
|
||||
border-color: rgba(99, 143, 154, 0.24);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(14, 30, 36, 0.95), rgba(10, 22, 27, 0.98));
|
||||
box-shadow: inset 0 0 0 1px rgba(115, 157, 167, 0.05);
|
||||
}
|
||||
|
||||
.admin-page .info_label,
|
||||
.admin-page .service_compact_row span {
|
||||
color: #76a5ac;
|
||||
}
|
||||
|
||||
.admin-page .info_card strong {
|
||||
font-family: Consolas, "Courier New", monospace;
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.admin-page .button {
|
||||
border: 1px solid rgba(143, 187, 197, 0.14);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.08),
|
||||
0 10px 24px rgba(0, 0, 0, 0.28);
|
||||
text-transform: uppercase;
|
||||
font-size: 0.88rem;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.admin-page .buttonWarm {
|
||||
background: linear-gradient(180deg, #d18a2d, #8b5412);
|
||||
}
|
||||
|
||||
.admin-page .buttonDanger {
|
||||
background: linear-gradient(180deg, #b44942, #711f1b);
|
||||
}
|
||||
|
||||
.admin-page .admin_back {
|
||||
font-family: Consolas, "Courier New", monospace;
|
||||
font-size: 0.9rem;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
body {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-areas:
|
||||
"video video"
|
||||
"control control";
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.button_container {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
grid-template-rows: repeat(2, minmax(4.75rem, 1fr));
|
||||
}
|
||||
|
||||
.admin_action_row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.admin_actions {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.info_grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.button {
|
||||
min-height: 5.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
body {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
grid-template-columns: 1fr;
|
||||
min-height: auto;
|
||||
grid-template-areas:
|
||||
"video"
|
||||
"control";
|
||||
}
|
||||
|
||||
.panel {
|
||||
min-height: auto;
|
||||
padding: 1rem;
|
||||
border-radius: 22px;
|
||||
}
|
||||
|
||||
.panel_header {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.pilot_brand {
|
||||
gap: 0.7rem;
|
||||
}
|
||||
|
||||
.status_badge {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.joy_shell,
|
||||
.image_container {
|
||||
min-height: 15rem;
|
||||
}
|
||||
|
||||
.joy_container {
|
||||
width: min(100%, 18rem);
|
||||
}
|
||||
|
||||
.button_container {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
grid-template-rows: repeat(2, minmax(4.25rem, 1fr));
|
||||
}
|
||||
|
||||
.info_grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.service_compact_row {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.admin_panel {
|
||||
min-height: auto;
|
||||
display: flex;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.admin_actions {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 760px) and (min-width: 761px) {
|
||||
.wrapper {
|
||||
min-height: calc(100dvh - 2 * clamp(0.75rem, 2vw, 1.25rem));
|
||||
}
|
||||
|
||||
.joy_shell,
|
||||
.image_container {
|
||||
min-height: 14rem;
|
||||
}
|
||||
|
||||
.admin_panel {
|
||||
gap: 0.7rem;
|
||||
}
|
||||
|
||||
.admin_copy {
|
||||
font-size: 0.86rem;
|
||||
}
|
||||
|
||||
.admin_actions .button {
|
||||
min-height: 3.35rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.info_card {
|
||||
padding: 0.7rem 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,13 @@
|
||||
[Unit]
|
||||
Description=ExoMy Admin API
|
||||
After=network-online.target
|
||||
Wants=network-online.target
|
||||
|
||||
[Service]
|
||||
Type=simple
|
||||
ExecStart=/usr/bin/python3 /home/pi/ExoMy_Software/scripts/exomy_admin_api.py
|
||||
Restart=always
|
||||
RestartSec=2
|
||||
|
||||
[Install]
|
||||
WantedBy=multi-user.target
|
||||
@@ -0,0 +1,194 @@
|
||||
#!/usr/bin/env python3
|
||||
import http.server
|
||||
import json
|
||||
import shutil
|
||||
import socketserver
|
||||
import subprocess
|
||||
import time
|
||||
|
||||
PORT = 8082
|
||||
EXOMY_CONTAINER = 'exomy_autostart'
|
||||
|
||||
|
||||
class ReusableThreadingTCPServer(socketserver.ThreadingTCPServer):
|
||||
allow_reuse_address = True
|
||||
|
||||
|
||||
def run_command(command):
|
||||
result = subprocess.run(command, capture_output=True, text=True, check=False)
|
||||
return result.stdout.strip(), result.stderr.strip(), result.returncode
|
||||
|
||||
|
||||
def read_cpu_temperature():
|
||||
try:
|
||||
with open('/sys/class/thermal/thermal_zone0/temp', 'r', encoding='utf-8') as handle:
|
||||
raw_value = handle.read().strip()
|
||||
return f'{int(raw_value) / 1000:.1f} °C'
|
||||
except (FileNotFoundError, ValueError):
|
||||
return 'unbekannt'
|
||||
|
||||
|
||||
def format_uptime():
|
||||
try:
|
||||
with open('/proc/uptime', 'r', encoding='utf-8') as handle:
|
||||
uptime_seconds = int(float(handle.read().split()[0]))
|
||||
except (FileNotFoundError, ValueError, IndexError):
|
||||
return 'unbekannt'
|
||||
|
||||
days, remainder = divmod(uptime_seconds, 86400)
|
||||
hours, remainder = divmod(remainder, 3600)
|
||||
minutes, _ = divmod(remainder, 60)
|
||||
|
||||
parts = []
|
||||
if days:
|
||||
parts.append(f'{days}d')
|
||||
if days or hours:
|
||||
parts.append(f'{hours}h')
|
||||
parts.append(f'{minutes}m')
|
||||
return ' '.join(parts)
|
||||
|
||||
|
||||
def format_disk_free():
|
||||
usage = shutil.disk_usage('/')
|
||||
free_gb = usage.free / (1024 ** 3)
|
||||
total_gb = usage.total / (1024 ** 3)
|
||||
return f'{free_gb:.1f} GB frei / {total_gb:.1f} GB'
|
||||
|
||||
|
||||
def get_ip_addresses():
|
||||
stdout, _, returncode = run_command(['hostname', '-I'])
|
||||
if returncode != 0 or not stdout:
|
||||
return 'unbekannt'
|
||||
ips = [item for item in stdout.split() if item]
|
||||
return ', '.join(ips) if ips else 'unbekannt'
|
||||
|
||||
|
||||
def get_wifi_status():
|
||||
stdout, _, returncode = run_command(['nmcli', '-t', '-f', 'DEVICE,STATE,CONNECTION', 'device'])
|
||||
if returncode != 0 or not stdout:
|
||||
return 'unbekannt'
|
||||
|
||||
for line in stdout.splitlines():
|
||||
parts = line.split(':', 2)
|
||||
if len(parts) != 3:
|
||||
continue
|
||||
device, state, connection = parts
|
||||
if device == 'wlan0':
|
||||
if state == 'connected':
|
||||
return f'verbunden: {connection}'
|
||||
return state
|
||||
|
||||
return 'kein wlan0'
|
||||
|
||||
|
||||
def get_systemd_state(service_name):
|
||||
stdout, _, returncode = run_command(['systemctl', 'is-active', service_name])
|
||||
if returncode == 0 and stdout:
|
||||
return stdout
|
||||
return stdout or 'unknown'
|
||||
|
||||
|
||||
def get_container_state(container_name):
|
||||
stdout, _, returncode = run_command(['docker', 'inspect', '-f', '{{.State.Status}}', container_name])
|
||||
if returncode == 0 and stdout:
|
||||
return stdout
|
||||
return 'unknown'
|
||||
|
||||
|
||||
def collect_status():
|
||||
return {
|
||||
'status': 'Bereit',
|
||||
'system': {
|
||||
'wifi': get_wifi_status(),
|
||||
'ips': get_ip_addresses(),
|
||||
'cpu_temperature': read_cpu_temperature(),
|
||||
'uptime': format_uptime(),
|
||||
'disk_free': format_disk_free(),
|
||||
},
|
||||
'services': {
|
||||
'camera': get_systemd_state('exomy-camera-stream.service'),
|
||||
'admin_api': get_systemd_state('exomy-admin-api.service'),
|
||||
'exomy': get_container_state(EXOMY_CONTAINER),
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
def restart_camera_service():
|
||||
subprocess.Popen(['systemctl', 'restart', 'exomy-camera-stream.service'])
|
||||
|
||||
|
||||
def restart_exomy_container():
|
||||
subprocess.Popen(['docker', 'restart', EXOMY_CONTAINER])
|
||||
|
||||
|
||||
def reboot_raspberry_pi():
|
||||
subprocess.Popen(['systemctl', 'reboot'])
|
||||
|
||||
|
||||
def shutdown_raspberry_pi():
|
||||
subprocess.Popen(['systemctl', 'poweroff'])
|
||||
|
||||
|
||||
class Handler(http.server.BaseHTTPRequestHandler):
|
||||
def end_headers(self):
|
||||
self.send_header('Access-Control-Allow-Origin', '*')
|
||||
self.send_header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS')
|
||||
self.send_header('Access-Control-Allow-Headers', 'Content-Type')
|
||||
super().end_headers()
|
||||
|
||||
def write_json(self, status_code, payload):
|
||||
body = json.dumps(payload).encode('utf-8')
|
||||
self.send_response(status_code)
|
||||
self.send_header('Content-Type', 'application/json; charset=utf-8')
|
||||
self.send_header('Content-Length', str(len(body)))
|
||||
self.end_headers()
|
||||
self.wfile.write(body)
|
||||
|
||||
def do_OPTIONS(self):
|
||||
self.send_response(204)
|
||||
self.end_headers()
|
||||
|
||||
def do_GET(self):
|
||||
if self.path == '/api/status':
|
||||
self.write_json(200, collect_status())
|
||||
return
|
||||
self.write_json(404, {'status': 'Unbekannt'})
|
||||
|
||||
def do_POST(self):
|
||||
actions = {
|
||||
'/api/restart-camera': {
|
||||
'handler': restart_camera_service,
|
||||
'status': 'Kameradienst wird neu gestartet'
|
||||
},
|
||||
'/api/restart-container': {
|
||||
'handler': restart_exomy_container,
|
||||
'status': 'ExoMy-Container wird neu gestartet'
|
||||
},
|
||||
'/api/reboot': {
|
||||
'handler': reboot_raspberry_pi,
|
||||
'status': 'Raspberry Pi wird neu gestartet'
|
||||
},
|
||||
'/api/shutdown': {
|
||||
'handler': shutdown_raspberry_pi,
|
||||
'status': 'Raspberry Pi wird heruntergefahren'
|
||||
}
|
||||
}
|
||||
|
||||
action = actions.get(self.path)
|
||||
if action is None:
|
||||
self.write_json(404, {'status': 'Unbekannt'})
|
||||
return
|
||||
|
||||
self.write_json(202, {'status': action['status']})
|
||||
self.wfile.flush()
|
||||
time.sleep(0.1)
|
||||
action['handler']()
|
||||
|
||||
def log_message(self, fmt, *args):
|
||||
return
|
||||
|
||||
|
||||
if __name__ == '__main__':
|
||||
with ReusableThreadingTCPServer(('0.0.0.0', PORT), Handler) as server:
|
||||
server.daemon_threads = True
|
||||
server.serve_forever()
|
||||
@@ -0,0 +1,132 @@
|
||||
#!/usr/bin/env python3
|
||||
import http.server
|
||||
import socketserver
|
||||
import subprocess
|
||||
import threading
|
||||
import time
|
||||
|
||||
BOUNDARY = b'--frame'
|
||||
LATEST_JPEG = None
|
||||
LATEST_LOCK = threading.Lock()
|
||||
|
||||
WIDTH = 1280
|
||||
HEIGHT = 720
|
||||
FPS = 10
|
||||
PORT = 8081
|
||||
|
||||
|
||||
def camera_reader():
|
||||
global LATEST_JPEG
|
||||
cmd = [
|
||||
'rpicam-vid',
|
||||
'--timeout', '0',
|
||||
'--nopreview',
|
||||
'--width', str(WIDTH),
|
||||
'--height', str(HEIGHT),
|
||||
'--framerate', str(FPS),
|
||||
'--codec', 'mjpeg',
|
||||
'-o', '-',
|
||||
]
|
||||
|
||||
while True:
|
||||
proc = subprocess.Popen(cmd, stdout=subprocess.PIPE, stderr=subprocess.DEVNULL, bufsize=0)
|
||||
buffer = bytearray()
|
||||
try:
|
||||
while True:
|
||||
chunk = proc.stdout.read(4096)
|
||||
if not chunk:
|
||||
break
|
||||
buffer.extend(chunk)
|
||||
|
||||
while True:
|
||||
start = buffer.find(b'\xff\xd8')
|
||||
if start == -1:
|
||||
if len(buffer) > 1024 * 1024:
|
||||
del buffer[:-2]
|
||||
break
|
||||
end = buffer.find(b'\xff\xd9', start + 2)
|
||||
if end == -1:
|
||||
if start > 0:
|
||||
del buffer[:start]
|
||||
break
|
||||
|
||||
jpeg = bytes(buffer[start:end + 2])
|
||||
del buffer[:end + 2]
|
||||
with LATEST_LOCK:
|
||||
LATEST_JPEG = jpeg
|
||||
finally:
|
||||
proc.kill()
|
||||
proc.wait()
|
||||
time.sleep(1)
|
||||
|
||||
|
||||
class ReusableThreadingTCPServer(socketserver.ThreadingTCPServer):
|
||||
allow_reuse_address = True
|
||||
|
||||
|
||||
class Handler(http.server.BaseHTTPRequestHandler):
|
||||
def do_HEAD(self):
|
||||
if self.path in ('/', '/index.html'):
|
||||
self.send_response(200)
|
||||
self.send_header('Content-Type', 'text/html; charset=utf-8')
|
||||
self.end_headers()
|
||||
return
|
||||
|
||||
if self.path == '/stream.mjpg':
|
||||
self.send_response(200)
|
||||
self.send_header('Age', '0')
|
||||
self.send_header('Cache-Control', 'no-cache, private')
|
||||
self.send_header('Pragma', 'no-cache')
|
||||
self.send_header('Content-Type', 'multipart/x-mixed-replace; boundary=frame')
|
||||
self.end_headers()
|
||||
return
|
||||
|
||||
self.send_error(404)
|
||||
|
||||
def do_GET(self):
|
||||
if self.path in ('/', '/index.html'):
|
||||
body = b'<html><body><img src="/stream.mjpg" /></body></html>'
|
||||
self.send_response(200)
|
||||
self.send_header('Content-Type', 'text/html; charset=utf-8')
|
||||
self.send_header('Content-Length', str(len(body)))
|
||||
self.end_headers()
|
||||
self.wfile.write(body)
|
||||
return
|
||||
|
||||
if self.path != '/stream.mjpg':
|
||||
self.send_error(404)
|
||||
return
|
||||
|
||||
self.send_response(200)
|
||||
self.send_header('Age', '0')
|
||||
self.send_header('Cache-Control', 'no-cache, private')
|
||||
self.send_header('Pragma', 'no-cache')
|
||||
self.send_header('Content-Type', 'multipart/x-mixed-replace; boundary=frame')
|
||||
self.end_headers()
|
||||
|
||||
while True:
|
||||
with LATEST_LOCK:
|
||||
frame = LATEST_JPEG
|
||||
if frame is None:
|
||||
time.sleep(0.1)
|
||||
continue
|
||||
try:
|
||||
self.wfile.write(BOUNDARY + b'\r\n')
|
||||
self.wfile.write(b'Content-Type: image/jpeg\r\n')
|
||||
self.wfile.write(f'Content-Length: {len(frame)}\r\n\r\n'.encode('ascii'))
|
||||
self.wfile.write(frame)
|
||||
self.wfile.write(b'\r\n')
|
||||
self.wfile.flush()
|
||||
time.sleep(1.0 / FPS)
|
||||
except (BrokenPipeError, ConnectionResetError):
|
||||
break
|
||||
|
||||
def log_message(self, fmt, *args):
|
||||
return
|
||||
|
||||
|
||||
if __name__ == '__main__':
|
||||
threading.Thread(target=camera_reader, daemon=True).start()
|
||||
with ReusableThreadingTCPServer(('0.0.0.0', PORT), Handler) as server:
|
||||
server.daemon_threads = True
|
||||
server.serve_forever()
|
||||
Reference in New Issue
Block a user