Add more functions

This commit is contained in:
2024-11-13 08:35:32 +07:00
parent 1fe4716bab
commit f7f711d3fe
22 changed files with 1307 additions and 294 deletions

View File

@@ -40,23 +40,7 @@
</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">
@@ -66,13 +50,43 @@
<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">
<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-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 class="col-12 col-sm-4 col-md-5 col-lg-5 col-xl-5">
<!-- <p id="system_information"> System Information </p>-->
<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">100 %</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">55 °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">15 %</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>

View File

@@ -14,10 +14,32 @@ let camerastream;
document.addEventListener("DOMContentLoaded", function(){
camerastream = document.getElementById("camerastream");
let files = [null,null,null,null,null];
setInterval(function (){
let getbase64handle;
let getsysteminfohandle;
window.addEventListener("unload",function (){
clearInterval(getbase64handle);
clearInterval(getsysteminfohandle);
if (ws.readyState === WebSocket.OPEN){
ws.send(JSON.stringify({
command: "STOP AUDIO",
data: 0
}));
// wait a while
const start = Date.now();
while(Date.now()-start<200){}
}
ws.close();
})
window.addEventListener("load", function (){
camerastream = document.getElementById("camerastream");
// Update camera stream every 50ms / 20fps
getbase64handle = setInterval(function (){
if (ws.readyState === WebSocket.OPEN){
ws.send(JSON.stringify({
command: "GET BASE64",
@@ -25,7 +47,16 @@ document.addEventListener("DOMContentLoaded", function(){
}));
} else update_camerastream(null);
},10);
},1000/15);
getsysteminfohandle = setInterval(function (){
if (ws.readyState === WebSocket.OPEN){
ws.send(JSON.stringify({
command: "GET SYSTEM INFO",
data: 0
}));
}
}, 5000);
ws = new WebSocket("/ws");
@@ -49,6 +80,10 @@ document.addEventListener("DOMContentLoaded", function(){
command: "GET RESOLUTION",
data: 0
}));
ws.send(JSON.stringify({
command: "GET AUDIOFILES",
data: 0
}))
}
ws.onmessage = function(event){
@@ -63,7 +98,10 @@ document.addEventListener("DOMContentLoaded", function(){
update_camerastream(dx.data);
} else update_camerastream(null);
if (dx.additional && dx.additional.length>0){
$('#streaming_status').html(dx.additional);
let stat = JSON.parse(dx.additional);
if (Array.isArray(stat) && stat.length === 3){
$('#streaming_status').html("Streaming at "+stat[0]+"x"+stat[1]+" "+stat[2]+"fps");
}
}
break;
case "SET VOLUME":
@@ -75,15 +113,13 @@ document.addEventListener("DOMContentLoaded", function(){
break;
case "GET MAX ZOOM":
console.log("Get Max Zoom: "+dx.data);
$('#zoom')
.attr("max", dx.data)
.attr("min", 1);
let zoom = document.getElementById("zoom");
zoom.min = 1;
zoom.max = dx.data;
break;
case "GET ZOOM":
document.getElementById("zoom").value = dx.data;
console.log("Get Zoom: "+dx.data);
$('#zoom').val(dx.data);
break;
case "GET RESOLUTION":
console.log("Get Resolution: "+dx.data);
@@ -114,11 +150,60 @@ document.addEventListener("DOMContentLoaded", function(){
break;
case "STOP AUDIO":
console.log("Stop Audio");
$('#status_player').html("Stop Playback");
document.getElementById("status_player").innerHTML = "Stop Playback";
break;
case 'SET VIDEO QUALITY':
console.log("Set Video Quality: "+dx.data);
break;
case "GET SYSTEM INFO":
//console.log("Get System Info: "+dx.data);
/**
* @type {{cpu_temperature: string, ram_usage: string, cpu: string, cpu0: string, cpu1: string, cpu2: string, cpu3: string}} systeminfo
*/
let systeminfo = JSON.parse(dx.data);
if (systeminfo.cpu_temperature && systeminfo.cpu_temperature.length>0) $('#cpu_temperature').html(`${systeminfo.cpu_temperature} °C`);
if (systeminfo.cpu && systeminfo.cpu.length>0) $('#cpu_usage').html(`${systeminfo.cpu} %`);
if (systeminfo.ram_usage && systeminfo.ram_usage.length>0) $('#ram_usage').html(`${systeminfo.ram_usage} %`);
break;
case "GET AUDIOFILES":
console.log("Get Audio Files: "+dx.data);
let audiofiles = JSON.parse(dx.data);
if (audiofiles.preset1 && audiofiles.preset1.length>0 && audiofiles.preset1!== "null") {
files[0] = audiofiles.preset1;
play_on(1);
} else {
files[0] = null;
play_off(1);
}
if (audiofiles.preset2 && audiofiles.preset2.length>0 && audiofiles.preset2!== "null") {
files[1] = audiofiles.preset2;
play_on(2);
} else {
files[1] = null;
play_off(2);
}
if (audiofiles.preset3 && audiofiles.preset3.length>0 && audiofiles.preset3!== "null") {
files[2] = audiofiles.preset3;
play_on(3);
} else {
files[2] = null;
play_off(3);
}
if (audiofiles.preset4 && audiofiles.preset4.length>0 && audiofiles.preset4!== "null") {
files[3] = audiofiles.preset4;
play_on(4);
} else {
files[3] = null;
play_off(4);
}
if (audiofiles.preset5 && audiofiles.preset5.length>0 && audiofiles.preset5!== "null") {
files[4] = audiofiles.preset5;
play_on(5);
} else {
files[4] = null;
play_off(5);
}
break;
}
@@ -132,7 +217,9 @@ document.addEventListener("DOMContentLoaded", function(){
set_pan_speed(32);
set_tilt_speed(32);
});
})
/**
* Update camera stream
@@ -176,7 +263,9 @@ function show_stop_and_hide_play(index){
}
function allplay(){
for (let i = 0; i < 5; i++) play_on(i+1);
for (let i = 0; i < 5; i++) {
if (files[i]) play_on(i+1);
}
}
function play_button(index){

View File

@@ -48,74 +48,72 @@
<h5 class="text-md-center">Audio Files</h5>
</div>
<div class="card-body bg-gray">
<form action="/setting/audiofile" method="post">
<!-- PRESET 1-->
<div class="row mt--2">
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
<p>Preset 1</p>
</div>
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
<select id="preset1" class="form-control class100">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<!-- PRESET 1-->
<div class="row mt--2">
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
<p>Preset 1</p>
</div>
<!-- PRESET 2-->
<div class="row mt-2">
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
<p>Preset 2</p>
</div>
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
<select id="preset2" class="form-control class100">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
<select id="preset1" class="form-control class100">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<!-- PRESET 3-->
<div class="row mt-2">
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
<p>Preset 3</p>
</div>
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
<select id="preset3" class="form-control class100">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
</div>
<!-- PRESET 2-->
<div class="row mt-2">
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
<p>Preset 2</p>
</div>
<!-- PRESET 4-->
<div class="row mt-2">
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
<p>Preset 4</p>
</div>
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
<select id="preset4" class="form-control class100">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
<select id="preset2" class="form-control class100">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<!-- PRESET 5-->
<div class="row mt-2">
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
<p>Preset 5</p>
</div>
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
<select id="preset5" class="form-control class100">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
</div>
<!-- PRESET 3-->
<div class="row mt-2">
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
<p>Preset 3</p>
</div>
<div class="row mt-2">
<div class="col-6"></div>
<div class="col-6">
<button id="save_audio" type="submit" class="btn btn-primary class100" onclick="save_audio()">SAVE</button>
</div>
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
<select id="preset3" class="form-control class100">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
</form>
</div>
<!-- PRESET 4-->
<div class="row mt-2">
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
<p>Preset 4</p>
</div>
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
<select id="preset4" class="form-control class100">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
</div>
<!-- PRESET 5-->
<div class="row mt-2">
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
<p>Preset 5</p>
</div>
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
<select id="preset5" class="form-control class100">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
</div>
<div class="row mt-2">
<div class="col-6"></div>
<div class="col-6">
<button id="save_audio" class="btn btn-primary class100" onclick="save_audio()">SAVE</button>
</div>
</div>
</div>
</div>
@@ -130,7 +128,7 @@
<p> Upload audio files</p>
</div>
<div class="col-6 col-sm-6 col-md-4 col-lg-4 col-xl-4">
<input class="form-control" type="file" name="file" title="Select Audio File">
<input class="form-control" type="file" name="file" required title="Select Audio File">
</div>
<div class="col-6 col-sm-6 col-md-2 col-lg-2 col-xl-2">
<button id="uploadd_file" type="submit" class="btn btn-dark class100">Upload</button>
@@ -146,53 +144,51 @@
<h5 class="text-center">Camera</h5>
</div>
<div class="card-body bg-gray">
<form action="/setting/camera" method="post">
<div class="row mt-2">
<div class="col-6">
<p>IP Address</p>
</div>
<div class="col-6">
<input id="setting_ip" class="form-control" title="IP Address">
</div>
<div class="row mt-2">
<div class="col-6">
<p>IP Address</p>
</div>
<div class="row mt-2">
<div class="col-6">
<p>Port</p>
</div>
<div class="col-6">
<input id="setting_port" class="form-control" title="Port">
</div>
<div class="col-6">
<input id="setting_ip" name="ip" class="form-control" title="IP Address">
</div>
</div>
<div class="row mt-2">
<div class="col-6">
<p>Port</p>
</div>
<div class="col-6">
<input id="setting_port" name="port" class="form-control" title="Port">
</div>
</div>
<div class="row mt-2">
<div class="col-6">
<p>Username</p>
</div>
<div class="col-6">
<input id="setting_username" class="form-control" title="Username">
</div>
<div class="row mt-2">
<div class="col-6">
<p>Username</p>
</div>
<div class="col-6">
<input id="setting_username" name="username" class="form-control" title="Username">
</div>
</div>
<div class="row mt-2">
<div class="col-6">
<p>Password</p>
</div>
<div class="col-6">
<div class="input-group">
<input type="password" id="setting_password" class="form-control" title="Password">
<span class="input-group-text" onclick="cameraPassword()">
<div class="row mt-2">
<div class="col-6">
<p>Password</p>
</div>
<div class="col-6">
<div class="input-group">
<input type="password" id="setting_password" name="password" class="form-control" title="Password">
<span class="input-group-text" onclick="cameraPassword()">
<i class="fa-solid fa-eye" id="icon_camera"></i>
</span>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-6"></div>
<div class="col-6">
<button id="save_camera" type="submit" class="btn btn-primary class100" onclick="save_camera()">SAVE</button>
</div>
</div>
<div class="row mt-2">
<div class="col-6"></div>
<div class="col-6">
<button id="save_camera" class="btn btn-primary class100" onclick="save_camera()">SAVE</button>
</div>
</form>
</div>
</div>
</div>
@@ -201,48 +197,46 @@
<h5 class="text-center">Login</h5>
</div>
<div class="card-body bg-gray">
<form action="/setting/weblogin" method="post">
<div class="row mt-2">
<div class="col-6">
<p>Username</p>
</div>
<div class="col-6">
<input id="login_username" class="form-control" title="Username">
</div>
<div class="row mt-2">
<div class="col-6">
<p>Username</p>
</div>
<div class="row mt-2">
<div class="col-6">
<p>Password</p>
</div>
<div class="col-6">
<div class="input-group">
<input type="password" id="edit_password" class="form-control" title="Password">
<span class="input-group-text" onclick="showPassword()">
<div class="col-6">
<input id="login_username" class="form-control" title="Username">
</div>
</div>
<div class="row mt-2">
<div class="col-6">
<p>Password</p>
</div>
<div class="col-6">
<div class="input-group">
<input type="password" id="edit_password" class="form-control" title="Password">
<span class="input-group-text" onclick="showPassword()">
<i class="fa-solid fa-eye" id="icon_password"></i>
</span>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-6">
<p>Confirm Password</p>
</div>
<div class="col-6">
<div class="input-group">
<input type="password" id="confirm_password" class="form-control" title="Confirm Password">
<span class="input-group-text" onclick="showConfirm()">
</div>
<div class="row mt-2">
<div class="col-6">
<p>Confirm Password</p>
</div>
<div class="col-6">
<div class="input-group">
<input type="password" id="confirm_password" class="form-control" title="Confirm Password">
<span class="input-group-text" onclick="showConfirm()">
<i class="fa-solid fa-eye" id="icon_confirm"></i>
</span>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-6"></div>
<div class="col-6">
<button id="save_login" type="submit" class="btn btn-primary class100" onclick="save_login()">SAVE</button>
</div>
</div>
<div class="row mt-2">
<div class="col-6"></div>
<div class="col-6">
<button id="save_login" class="btn btn-primary class100" onclick="save_login()">SAVE</button>
</div>
</form>
</div>
</div>
</div>
</div>

View File

@@ -54,7 +54,14 @@ function fill_select(index, values){
*/
let preset = document.getElementById("preset"+index);
preset.innerHTML = "";
if (values!=null && values.length>0){
// add empty option
let option = document.createElement("option");
option.value = "";
option.innerText = "";
preset.appendChild(option);
for (let i = 0; i < values.length; i++) {
const element = values[i];
let option = document.createElement("option");
@@ -108,4 +115,91 @@ function showConfirm() {
icon.classList.remove('fa-eye-slash');
icon.classList.add('fa-eye');
}
}
function save_audio(){
let preset1 = $('#preset1').val();
let preset2 = $('#preset2').val();
let preset3 = $('#preset3').val();
let preset4 = $('#preset4').val();
let preset5 = $('#preset5').val();
if (confirm("Are you sure want to change Audio Preset ?")){
fetch("/setting/audiofile", {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
body: new URLSearchParams({preset1: preset1, preset2: preset2, preset3: preset3, preset4: preset4, preset5: preset5})
}).then(resp => {
if (resp.status === 200) {
alert("Success");
} else {
resp.text().then(text=>alert("Failed to change Audio Preset : "+text));
}
});
}
}
function save_camera(){
let ip = $('#setting_ip').val();
let port = $('#setting_port').val();
let username = $('#setting_username').val();
let password = $('#setting_password').val();
if (confirm("Are you sure want to change Camera Information ?")){
fetch("/setting/camera", {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
body: new URLSearchParams({ip: ip, port: port, username: username, password: password})
}).then(resp => {
if (resp.status === 200) {
alert("Success");
} else {
resp.text().then(text => {
alert("Failed to change Camera Information : "+text);
});
}
});
}
}
function save_login(){
let username = $('#login_username').val();
let password = $('#edit_password').val();
let confirmpassword = $('#confirm_password').val();
if (username.length === 0){
alert("Username cannot be empty");
return;
}
if (password.length === 0){
alert("Password cannot be empty");
return;
}
if (password !== confirmpassword){
alert("Password not match");
return;
}
if (confirm("Are you sure want to change Web Login Information ?")){
fetch("/setting/weblogin", {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
body: new URLSearchParams({username: username, password: password})
}).then(resp => {
if (resp.status === 200) {
alert("Success");
} else {
resp.text().then(text => {
alert("Failed to change Web Login Information : "+text);
});
}
})
}
}