256 lines
13 KiB
HTML
256 lines
13 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>
|
|
<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" href="setting.html">Setting</a>
|
|
</li>
|
|
<li class="nav-item pad-menu">
|
|
<form action="/logout" method="get">
|
|
<button class="btn btn-outline-light" type="submit">Logout</button>
|
|
</form>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<!--<div class="container-fluid container4">-->
|
|
<!-- <div class="row">-->
|
|
<!-- <div class="col-12 col-sm-12 col-md-12 col-lg-8 col-xl-8 border-1">-->
|
|
<!-- <h1 class="hr-lines">Bird Deterrent System</h1>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4">-->
|
|
<!-- <div class="container">-->
|
|
<!-- <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 outside-logout">-->
|
|
<!-- <form action="/logout" method="get">-->
|
|
<!-- <button class="btn btn-outline-light" type="submit">Logout</button>-->
|
|
<!-- </form>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!--</div>-->
|
|
<!-- SECTION 1-->
|
|
|
|
<!-- SECTION 2 -->
|
|
<div class="container-fluid container3">
|
|
<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-6 col-sm-6 col-md-8 col-lg-8 col-xl-8">
|
|
<p id="streaming_status">No Status</p>
|
|
</div>
|
|
<div class="col-6 col-sm-6 col-md-4 col-lg-4 col-xl-4">
|
|
<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">High Quality Video</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>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="btn_up()" onmouseup="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="btn_left()" onmouseup="stop_movement()">
|
|
<i class="btn-nav fa-solid fa-caret-left pad-left" title="Left"></i>
|
|
</a>
|
|
</div>
|
|
<div class="col">
|
|
<a>
|
|
<i id="btn_center" class="btn-nav-center fa-solid fa-circle"></i>
|
|
</a>
|
|
</div>
|
|
<div class="col">
|
|
<a onmousedown="btn_right()" onmouseup="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="btn_down()" onmouseup="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>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">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" 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> 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> 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> 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> 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>Content 5</p>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<div>
|
|
<label for="customRange" class="form-label">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="mute()" title="mute">
|
|
<i class="fa-solid fa-volume-high"></i>
|
|
</button>
|
|
<button id="unmute" class="btn-mute hide" onclick="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>2024 Copyright © Galva Technologies. All rights reserved.</p>
|
|
</div>
|
|
</body>
|
|
</html> |