282 lines
15 KiB
HTML
282 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Bird Deterrent System</title>
|
|
<link rel="stylesheet" type="text/css" href="public/style/style.css">
|
|
<link rel="stylesheet" type="text/css" href="public/style/bootstrap.min.css">
|
|
<script src="public/js/bootstrap.bundle.min.js"></script>
|
|
<link rel="stylesheet" href="public/style/jquery.dataTables.min.css">
|
|
<script src="public/js/jquery-3.7.1.min.js"></script>
|
|
<script src="public/js/jquery.dataTables.min.js"></script>
|
|
<script src="public/js/all.min.js"></script>
|
|
<script src="public/js/socket.io.min.js"></script>
|
|
<link rel="stylesheet" href="public/style/all.min.css">
|
|
<script src="index.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark text-light container4">
|
|
<div class="container-fluid">
|
|
<!-- <p class="p-title">Bird Deterrent System</p>-->
|
|
<a class="navbar-brand p-title" href="index.html">Bird Deterrent System</a>
|
|
|
|
<!-- Toggler/collapsible Button -->
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<!-- Collapsible Navbar -->
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav ms-auto">
|
|
<li class="nav-item pad-menu">
|
|
<a class="nav-link nav-setting" href="setting.html">Setting</a>
|
|
</li>
|
|
<li class="nav-item pad-menu">
|
|
<form action="/logout" method="get">
|
|
<button class="btn btn-outline-light nav-logout" type="submit">Logout</button>
|
|
</form>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
|
|
<!-- SECTION 2 -->
|
|
<div class="container-fluid container3 min90">
|
|
<div class="row">
|
|
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-8">
|
|
<div class="outside">
|
|
<img id="camerastream" src="public/images/not-available.png" class="img-cctv class100" alt="">
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4">
|
|
<p id="streaming_status">No Status</p>
|
|
</div>
|
|
<div class="col-12 col-sm-4 col-md-5 col-lg-5 col-xl-5">
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="d-flex align-items-center">
|
|
<span class="fa-solid fa-microchip icon-system"></span>
|
|
<p id="cpu_usage" class="padleft">0 %</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<div class="d-flex align-items-center">
|
|
<span class="fa-solid fa-temperature-half icon-system"></span>
|
|
<p id="cpu_temperature" class="padleft">0 °C</p>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="d-flex align-items-center">
|
|
<span class="fa-solid fa-memory icon-system"></span>
|
|
<p id="ram_usage" class="padleft">0 %</p>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="d-flex align-items-center">
|
|
<span class="fa-solid fa-upload icon-system"></span>
|
|
<p id="ethernet_TX" class="padleft">0 B/s</p>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="d-flex align-items-center">
|
|
<span class="fa-solid fa-download icon-system"></span>
|
|
<p id="ethernet_RX" class="padleft">0 B/s</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-4 col-md-3 col-lg-3 col-xl-3">
|
|
<!-- <div class="form-check form-switch">-->
|
|
<!-- <input class="form-check-input" type="checkbox" role="switch" id="quality_video" onchange="change_video_quality()">-->
|
|
<!-- <label class="form-check-label" for="quality_video">HQ</label>-->
|
|
<!-- </div>-->
|
|
<div class="container align-right">
|
|
<label for="quality_video" class="toggle-label">LQ</label>
|
|
<input type="checkbox" class="toggle-switch" id="quality_video" onchange="change_video_quality()">
|
|
<label for="quality_video" class="toggle-label">HQ</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-4 ">
|
|
<br>
|
|
<div class="row">
|
|
<div class="col-3 ">
|
|
<p class="text-dash">Pan Speed</p>
|
|
<div class="btn-group-vertical">
|
|
<button id="pan1" class="btn btn-outline-dark btn-sm" value="16" onclick="set_pan_speed(16)">1</button>
|
|
<button id="pan2" class="btn btn-outline-dark btn-sm" value="32" onclick="set_pan_speed(32)">2</button>
|
|
<button id="pan3" class="btn btn-outline-dark btn-sm" value="48" onclick="set_pan_speed(48)">3</button>
|
|
<button id="pan4" class="btn btn-outline-dark btn-sm" value="63" onclick="set_pan_speed(63)">4</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 outside">
|
|
<div class="btn-circle">
|
|
<div class="row">
|
|
<div class="col"></div>
|
|
<div class="col">
|
|
<a onmousedown="send_tilt_up()" onmouseup="send_stop_movement()">
|
|
<i class="btn-nav fa-solid fa-caret-up pad-top" title="Up"></i>
|
|
</a>
|
|
</div>
|
|
<div class="col"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<a onmousedown="send_pan_left()" onmouseup="send_stop_movement()">
|
|
<i class="btn-nav fa-solid fa-caret-left pad-left" title="Left"></i>
|
|
</a>
|
|
</div>
|
|
<div class="col">
|
|
<a onmousedown="send_stop_movement()">
|
|
<i id="btn_center" class="btn-nav-center fa-solid fa-circle" title="Stop Movement"></i>
|
|
</a>
|
|
</div>
|
|
<div class="col">
|
|
<a onmousedown="send_pan_right()" onmouseup="send_stop_movement()">
|
|
<i class="btn-nav fa-solid fa-caret-right pad-right" title="Right"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col"></div>
|
|
<div class="col">
|
|
<a onmousedown="send_tilt_down()" onmouseup="send_stop_movement()">
|
|
<i class="i btn-nav fa-solid fa-caret-down pad-bottom" title="Down"></i>
|
|
</a>
|
|
</div>
|
|
<div class="col"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-3">
|
|
<p class="text-dash">Tilt Speed</p>
|
|
<div class="btn-group-vertical">
|
|
<button id="tilt1" class="btn btn-outline-dark btn-sm" value="16" onclick="set_tilt_speed(16)">1</button>
|
|
<button id="tilt2" class="btn btn-outline-dark btn-sm" value="32" onclick="set_tilt_speed(32)">2</button>
|
|
<button id="tilt3" class="btn btn-outline-dark btn-sm" value="48" onclick="set_tilt_speed(48)">3</button>
|
|
<button id="tilt4" class="btn btn-outline-dark btn-sm" value="63" onclick="set_tilt_speed(63)">4</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p class="text-center text-dash">Zoom</p>
|
|
<div class="row">
|
|
<div class="col-10">
|
|
<input id="zoom" type="range" class="form-range" min="1" max="10909" oninput="this.nextElementSibling.value = this.value">
|
|
<output class="output"></output>
|
|
</div>
|
|
<div class="col-2">
|
|
<button class="btn btn-primary" id="set_zoom" onclick="set_zoom()">SET</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <br>-->
|
|
<div class="text-center">
|
|
<h1 id="status_player" class="text-status1">Stop</h1>
|
|
</div>
|
|
<!-- <br>-->
|
|
<div class="row">
|
|
<div class="col">
|
|
<div id="div1" class="button-container">
|
|
<a id="btn_play1" class="btn-play1 show" onclick='play_button(1)' title='Play Content 1'>
|
|
<i class="fa-solid fa-play icon1"></i>
|
|
</a>
|
|
<a id="btn_stop1" class="btn-play1 hide" onclick='stop_button(1)' title='Stop Content 1'>
|
|
<i class="fa-solid fa-stop icon1"></i>
|
|
</a>
|
|
</div>
|
|
<br>
|
|
<p id="desc_content1"> Content 1</p>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<div id="div2" class="button-container">
|
|
<a id="btn_play2" class="btn-play1 show" onclick='play_button(2)' title='Play Content 2'>
|
|
<i class="fa-solid fa-play icon1"></i>
|
|
</a>
|
|
<a id="btn_stop2" class="btn-play1 hide" onclick='stop_button(2)' title='Stop Content 2'>
|
|
<i class="fa-solid fa-stop icon1"></i>
|
|
</a>
|
|
</div>
|
|
<br>
|
|
<p id="desc_content2"> Content 2</p>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<div id="div3" class="button-container">
|
|
<a id="btn_play3" class="btn-play1 show" onclick='play_button(3)' title='Play Content 3'>
|
|
<i class="fa-solid fa-play icon1"></i>
|
|
</a>
|
|
<a id="btn_stop3" class="btn-play1 hide" onclick='stop_button(3)' title='Stop Content 3'>
|
|
<i class="fa-solid fa-stop icon1"></i>
|
|
</a>
|
|
</div>
|
|
<br>
|
|
<p id="desc_content3"> Content 3</p>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<div id="div4" class="button-container">
|
|
<a id="btn_play4" class="btn-play1 show" onclick='play_button(4)' title='Play Content 4'>
|
|
<i class="fa-solid fa-play icon1"></i>
|
|
</a>
|
|
<a id="btn_stop4" class="btn-play1 hide" onclick='stop_button(4)' title='Stop Content 4'>
|
|
<i class="fa-solid fa-stop icon1"></i>
|
|
</a>
|
|
</div>
|
|
<br>
|
|
<p id="desc_content4"> Content 4</p>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<div id="div5" class="button-container">
|
|
<a id="btn_play5" class="btn-play1 show" onclick='play_button(5)' title='Play Content 5'>
|
|
<i class="fa-solid fa-play icon1"></i>
|
|
</a>
|
|
<a id="btn_stop5" class="btn-play1 hide" onclick='stop_button(5)' title='Stop Content 5'>
|
|
<i class="fa-solid fa-stop icon1"></i>
|
|
</a>
|
|
</div>
|
|
<br>
|
|
<p id="desc_content5">Content 5</p>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<div>
|
|
<label for="customRange" class="form-label text-dash">Volume</label>
|
|
<div class="row">
|
|
|
|
<div class="col-10 pad-bar">
|
|
<input id="customRange" type="range" class="form-range" min="0" max="100" step="10" oninput="set_volumeoutput(this.value)">
|
|
<output id="volumebarvalue" class="output"></output>
|
|
</div>
|
|
<div class="col-2">
|
|
<div>
|
|
<button id="mute" class="btn-mute show" onclick="send_mute()" title="mute">
|
|
<i class="fa-solid fa-volume-high"></i>
|
|
</button>
|
|
<button id="unmute" class="btn-mute hide" onclick="send_unmute()" title="unmute">
|
|
<i class="fa-solid fa-volume-xmark"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SECTION 3 -->
|
|
<div class="container-fluid footer1 outside">
|
|
<p class="footer">2024 Copyright © Galva Technologies. All rights reserved.</p>
|
|
</div>
|
|
</body>
|
|
</html> |