ChK/appRobotVideoControls
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Committed and Pushed by ButtonClick

Browse Source
This commit is contained in:
chk
2025-12-22 21:58:27 +01:00
parent 59875f80e2
commit c545378ca6
3 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/index.html
View File

@@ -21,8 +21,7 @@
<div class="video-wrap"> <div class="video-wrap">
<canvas id="canvas0" width="1280" height="960"></canvas> <canvas id="canvas0" width="1280" height="960"></canvas>
<img id="overlayImg" <img id="overlayImg"/>
src="/snapshots/snapshot_video0_1765356085372_two_cam_overlay.png">
</div> </div>
<div id="status0" class="status">Connecting…</div> <div id="status0" class="status">Connecting…</div>
</section> </section>
@@ -32,6 +31,7 @@
<h2>Camera 1</h2> <h2>Camera 1</h2>
<div class="video-wrap"> <div class="video-wrap">
<canvas id="canvas1" width="1280" height="960"></canvas> <canvas id="canvas1" width="1280" height="960"></canvas>
<img id="overlayImg1"/>
</div> </div>
<div id="status1" class="status">Connecting…</div> <div id="status1" class="status">Connecting…</div>
</section> </section>

4
public/indexA.css
View File

@@ -51,6 +51,7 @@ h1, h2 {
so overlays align correctly when the window is resized. */ so overlays align correctly when the window is resized. */
.video-wrap canvas, .video-wrap canvas,
.video-wrap img, .video-wrap img,
#overlayImg1,
#overlayImg { #overlayImg {
position: absolute; position: absolute;
inset: 0; /* top:0; right:0; bottom:0; left:0 */ inset: 0; /* top:0; right:0; bottom:0; left:0 */
@@ -67,6 +68,7 @@ h1, h2 {
z-index: 1; z-index: 1;
} }
.video-wrap img, .video-wrap img,
#overlayImg1,
#overlayImg { #overlayImg {
z-index: 2; z-index: 2;
pointer-events: none; /* don't block interactions with the canvas */ pointer-events: none; /* don't block interactions with the canvas */
@@ -123,7 +125,7 @@ footer {
/* Ensure overlay uses contain and respects alpha channel from the PNG /* Ensure overlay uses contain and respects alpha channel from the PNG
(the PNG's transparency is the authoritative source of which pixels (the PNG's transparency is the authoritative source of which pixels
are transparent; CSS opacity only adjusts global alpha). */ are transparent; CSS opacity only adjusts global alpha). */
#overlayImg { #overlayImg,#overlayImg1 {
position: absolute; position: absolute;
inset: 0; /* shorthand for top:0; right:0; bottom:0; left:0; */ inset: 0; /* shorthand for top:0; right:0; bottom:0; left:0; */
width: 100%; width: 100%;

8
public/videoService.js
View File

@@ -124,16 +124,18 @@
if (msg.type === 'snapshot' && control?.snapshotOutEl) { if (msg.type === 'snapshot' && control?.snapshotOutEl) {
if (msg.ok && msg.url && msg.urlApp) { if (msg.ok && msg.url && msg.urlApp) {
// Use overlay URL and CSV provided by the server (fallback to expected names) // Use overlay URL and CSV provided by the server (fallback to expected names)
const overlayPNG = msg.overlay || msg.urlApp.replace('_annotated.jpg','_two_cam_overlay.png'); const overlayPNG0 = msg.overlay || msg.urlApp.replace('_annotated.jpg','_two_cam_overlay.png');
const overlayPNG1 = overlayPNG0.replace('video0','video1');
// Prefer server-provided overlayCSV. If not present, derive from the original jpg name // Prefer server-provided overlayCSV. If not present, derive from the original jpg name
const overlayCSV = msg.overlayCSV || msg.url.replace('.jpg','_two_cam.csv'); const overlayCSV = msg.overlayCSV || msg.url.replace('.jpg','_two_cam.csv');
control.snapshotOutEl.innerHTML = control.snapshotOutEl.innerHTML =
`Snapshot: <a href="${msg.url}" target="_blank" rel="noopener">${msg.url}</a></br></br> ` + `Snapshot: <a href="${msg.url}" target="_blank" rel="noopener">${msg.url}</a></br></br> ` +
` Recognized: <a href="${msg.urlApp}" target="_blank" rel="noopener">${msg.urlApp}</a></br> ` + ` Recognized: <a href="${msg.urlApp}" target="_blank" rel="noopener">${msg.urlApp}</a></br> ` +
` Overlay: <a href="${overlayPNG}" target="_blank" rel="noopener">PNG Overlay</a>`; ` Overlay: <a href="${overlayPNG0}" target="_blank" rel="noopener">PNG Overlay</a>`;
// Update overlay immediately — server now ensures files are ready before responding // Update overlay immediately — server now ensures files are ready before responding
document.getElementById('overlayImg').src = overlayPNG; document.getElementById('overlayImg').src = overlayPNG0;
document.getElementById('overlayImg1').src = overlayPNG1;
// Render CSV values into the csvTable container (if available) // Render CSV values into the csvTable container (if available)
if (window.readCSV) { if (window.readCSV) {
window.readCSV.renderCSV('csvTable', overlayCSV); window.readCSV.renderCSV('csvTable', overlayCSV);