From 6b77c42cae8ef2b328bc26430f6fabc4c8c3009f Mon Sep 17 00:00:00 2001
From: Moe <github@m03.ca>
Date: Tue, 6 Feb 2024 10:56:24 -0800
Subject: [PATCH] add more info display for highly detailed matrices on
 liveGrid

---
 web/assets/css/bs5.liveGrid.css    |  4 +++-
 web/assets/js/bs5.monitorsUtils.js | 24 +++++++++++++++++++++++-
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/web/assets/css/bs5.liveGrid.css b/web/assets/css/bs5.liveGrid.css
index 9dcd1d99..137011c0 100644
--- a/web/assets/css/bs5.liveGrid.css
+++ b/web/assets/css/bs5.liveGrid.css
@@ -189,7 +189,9 @@ img.circle-img,div.circle-img{border-radius:50%;height:50px;width:50px}
 .stream-objects .stream-detected-object{position:absolute;top:0;left:0;border:3px dotted red;background:transparent;border-radius:5px}
 .stream-objects .stream-detected-point{position:absolute;top:0;left:0;border:3px solid yellow;background:transparent;border-radius:5px}
 .stream-objects .point{position:absolute;top:0;left:0;border:3px solid red;border-radius:50%}
-
+.stream-objects .matrix-info{
+    margin-top: 20%; background:rgba(0,0,0,0.3);color:#fff; width: 100%; padding: 1rem; font-family:monospace;
+}
 .monitor_item .gps-map {
     position: absolute;
     width: 190px;
diff --git a/web/assets/js/bs5.monitorsUtils.js b/web/assets/js/bs5.monitorsUtils.js
index c8b5fd08..25b54643 100644
--- a/web/assets/js/bs5.monitorsUtils.js
+++ b/web/assets/js/bs5.monitorsUtils.js
@@ -655,8 +655,30 @@ function drawMatrices(event,options){
     theContainer.find(`.stream-detected-object[name="${objectTagGroup}"]`).remove()
     var html = ''
     $.each(event.details.matrices,function(n,matrix){
-        html += `<div class="stream-detected-object" name="${objectTagGroup}" style="height:${heightRatio * matrix.height}px;width:${widthRatio * matrix.width}px;top:${heightRatio * matrix.y}px;left:${widthRatio * matrix.x}px;">`
+        html += `<div class="stream-detected-object" name="${objectTagGroup}" style="height:${heightRatio * matrix.height}px;width:${widthRatio * matrix.width}px;top:${heightRatio * matrix.y}px;left:${widthRatio * matrix.x}px;border-color: ${matrix.color};">`
         if(matrix.tag)html += `<span class="tag">${matrix.tag}${!isNaN(matrix.id) ? ` <small class="label label-default">${matrix.id}</small>`: ''}</span>`
+        if(matrix.notice)html += `<div class="matrix-info" style="color:yellow">${matrix.notice}</div>`;
+        if(matrix.missingRecently){
+            html += `<div class="matrix-info" style="color:yellow">${matrix.missingRecently.join(',')}</div>`;
+        }
+        if(matrix.pose){
+            var pose = matrix.pose;
+            html += `<div class="matrix-info text-left">`;
+            if(pose.isPersonFallen)html += `<div><small>Stance</small><br>${pose.isPersonFallen}</div>`;
+            if(pose.isPersonReaching){
+                html += `<div><small>Left Hand</small><br>${pose.isPersonReaching.left.pose}</div>`;
+                html += `<div><small>Right Hand</small><br>${pose.isPersonReaching.right.pose}</div>`;
+            }
+            // if(pose.isPersonTouchingWaistOrHips)html += `<div>Waist or Hips : ${pose.isPersonTouchingWaistOrHips}</div>`;
+            html += `</div>`;
+        }
+        if(matrix.nearBy){
+            html += `<div class="matrix-info">`
+            matrix.nearBy.forEach((nearMatrix) => {
+                html += `<div class="mb-1">${nearMatrix.tag} <small class="label label-default">${nearMatrix.id}</small> (${nearMatrix.overlapPercent}%)</div>`
+            });
+            html += `</div>`
+        }
         html += '</div>'
     })
     theContainer.append(html)