Add more functions

Html/html/index.js

@@ -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){