You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
194 lines
10 KiB
194 lines
10 KiB
<!DOCTYPE html>
|
|
<html lang="cs">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<title>Lucy - ovládací panel</title>
|
|
{% load static app_tags %}
|
|
<link rel="stylesheet" type="text/css" href="{% static 'app/bootstrap-5.0.0-beta3-dist/css/bootstrap.min.css' %}">
|
|
<link rel="stylesheet" type="text/css" href="{% static 'app/css/style.css'%}">
|
|
<link rel="shortcut icon" type="image/png" href="{% static 'app/img/favicon.ico' %}"/>
|
|
</head>
|
|
|
|
<body class="bg-light">
|
|
<nav class="navbar navbar-dark bg-dark">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand" href="#">Lucy - ovládací panel</a>
|
|
<button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="navbar-collapse collapse" id="navbar" style="">
|
|
<ul class="navbar-nav me-auto mb-2">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" aria-current="page" href="#">Ovládací panel</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="{% url 'admin:index' %}" target="_blank">Admin</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<button class="btn btn-danger mb-1" data-bs-toggle="modal" data-bs-target="#system_shutdown_confirm-modal">Vypnout systém</button>
|
|
</li>
|
|
<li class="nav-item">
|
|
<button class="btn btn-outline-light" type="submit" onclick="location.href='{% url "logout" %}'">Odhlásit se</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<div id="content" class="container-fluid">
|
|
<div class="row">
|
|
<div id="debug" style="display: none;">
|
|
<h5>Debug</h5>
|
|
<div>Pressed keys: <span id="keys" style="height: 20px;"></span></div>
|
|
<div>Last command: <span id="command"></span></div>
|
|
<div>Response: <span id="response"></span></div>
|
|
<div>Response time: <span id="response-time"></div>
|
|
</div>
|
|
|
|
<div id="camera" class="col-lg-6 col-md-12 col-sm-12">
|
|
<img id="camera__img" src="https://lucy-cam.odbornaskola.cz/stream.mjpg" width="640px" height="480px" class="shadow" style="transform:rotate(180deg);"/>
|
|
</div>
|
|
|
|
<div id="movement-control" class="col-lg-3 col-md-6 col-sm-6">
|
|
<div id="power">
|
|
<input type="range" min="1" max="255" value="70" class="slider" id="powerSlider"oninput="this.parentNode.style.setProperty('--value',this.value); this.parentNode.style.setProperty('--text-value', JSON.stringify((+this.value).toLocaleString()))">
|
|
<output></output>
|
|
<div class='range-slider__progress'></div>
|
|
<p>Výkon: <span id="powerSliderValue"></span></p>
|
|
</div>
|
|
|
|
<div id="arrows">
|
|
<div id="arrows__grid">
|
|
<div>
|
|
<button type="button" class="btn btn-secondary btn--arrow" value="COMMAND_FORWARD_STEER_LEFT">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-up-left arrows__arrow unclickable" viewBox="0 0 16 16">
|
|
<path class="unclickable" fill-rule="evenodd" d="M2 2.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1H3.707l10.147 10.146a.5.5 0 0 1-.708.708L3 3.707V8.5a.5.5 0 0 1-1 0v-6z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div>
|
|
<button type="button" class="btn btn-secondary btn--arrow" value="COMMAND_RIDE_FORWARD">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-up arrows__arrow unclickable" viewBox="0 0 16 16">
|
|
<path class="unclickable" fill-rule="evenodd" d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div>
|
|
<button type="button" class="btn btn-secondary btn--arrow" value="COMMAND_FORWARD_STEER_RIGHT">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-up-right arrows__arrow unclickable" viewBox="0 0 16 16">
|
|
<path class="unclickable" fill-rule="evenodd" d="M14 2.5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0 0 1h4.793L2.146 13.146a.5.5 0 0 0 .708.708L13 3.707V8.5a.5.5 0 0 0 1 0v-6z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div>
|
|
<button type="button" class="btn btn-secondary btn--arrow" value="COMMAND_TURN_LEFT">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-left arrows__arrow unclickable" viewBox="0 0 16 16">
|
|
<path class="unclickable" fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div>
|
|
<button type="button" class="btn btn-secondary btn--arrow" value="COMMAND_STOP">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-record-circle arrows__arrow unclickable" viewBox="0 0 16 16">
|
|
<path class="unclickable" d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
|
|
<path class="unclickable" d="M11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div>
|
|
<button type="button" class="btn btn-secondary btn--arrow" value="COMMAND_TURN_RIGHT">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-right arrows__arrow unclickable" viewBox="0 0 16 16">
|
|
<path class="unclickable" fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div>
|
|
<button type="button" class="btn btn-secondary btn--arrow" value="COMMAND_BACKWARD_STEER_LEFT">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-down-left arrows__arrow unclickable" viewBox="0 0 16 16">
|
|
<path class="unclickable" fill-rule="evenodd" d="M2 13.5a.5.5 0 0 0 .5.5h6a.5.5 0 0 0 0-1H3.707L13.854 2.854a.5.5 0 0 0-.708-.708L3 12.293V7.5a.5.5 0 0 0-1 0v6z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div>
|
|
<button type="button" class="btn btn-secondary btn--arrow" value="COMMAND_RIDE_BACKWARD">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-down arrows__arrow unclickable" viewBox="0 0 16 16">
|
|
<path class="unclickable" fill-rule="evenodd" d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div>
|
|
<button type="button" class="btn btn-secondary btn--arrow" value="COMMAND_BACKWARD_STEER_RIGHT">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-down-right arrows__arrow unclickable" viewBox="0 0 16 16">
|
|
<path class="unclickable" fill-rule="evenodd" d="M14 13.5a.5.5 0 0 1-.5.5h-6a.5.5 0 0 1 0-1h4.793L2.146 2.854a.5.5 0 1 1 .708-.708L13 12.293V7.5a.5.5 0 0 1 1 0v6z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="module-data" class="col-lg-2 col-md-6 col-sm-6 shadow bg-info rounded">
|
|
<h3 class="border-bottom border-dark">Data z modulů</h3>
|
|
<div id="module-data__content"></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- MODALS -->
|
|
<div id="system_shutdown-modal" class="modal hide fade in" tabindex="-1">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Vypínání systému</h5>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="system_shutdown-modal__waiting">
|
|
<p>Probíhá vypínání systému, nevypínejte vozítko.</p>
|
|
<p id="system_shutdown-modal__countdown"></p>
|
|
</div>
|
|
<div id="system_shutdown-modal__ready">
|
|
<p>Nyní můžete vozítko vypnout.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="system_shutdown_confirm-modal" class="modal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Vypnout systém</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Opravdu si přejete vypnout operační systém vozítka?</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Zavřít</button>
|
|
<button id="btn-system_shutdown_confirm" type="button" class="btn btn-primary">Vypnout systém</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript" src="{% static 'app/js/jquery3.5.1.min.js' %}"></script>
|
|
<script type="text/javascript" src="{% static 'app/bootstrap-5.0.0-beta3-dist/js/bootstrap.min.js' %}"></script>
|
|
<script type="text/javascript">
|
|
var send_command_url = "{% url 'app:send_command' %}";
|
|
var csrf_token = "{{ csrf_token }}";
|
|
var host = "https://lucy-cam.odbornaskola.cz";
|
|
|
|
setInterval(function(){
|
|
document.getElementById("camera__img").src = "https://lucy-cam.odbornaskola.cz/stream.mjpg";
|
|
}, 2000)
|
|
</script>
|
|
<script type="text/javascript" src="{% static 'app/js/control.js?v=1.1' %}"></script>
|
|
</body>
|
|
|
|
</html>
|
|
|