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

4
public/indexA.css
View File

@@ -51,6 +51,7 @@ h1, h2 {
so overlays align correctly when the window is resized. */
.video-wrap canvas,
.video-wrap img,
#overlayImg1,
#overlayImg {
position: absolute;
inset: 0; /* top:0; right:0; bottom:0; left:0 */
@@ -67,6 +68,7 @@ h1, h2 {
z-index: 1;
}
.video-wrap img,
#overlayImg1,
#overlayImg {
z-index: 2;
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
(the PNG's transparency is the authoritative source of which pixels
are transparent; CSS opacity only adjusts global alpha). */
#overlayImg {
#overlayImg,#overlayImg1 {
position: absolute;
inset: 0; /* shorthand for top:0; right:0; bottom:0; left:0; */
width: 100%;

8
public/videoService.js
View File

@@ -124,16 +124,18 @@
if (msg.type === 'snapshot' && control?.snapshotOutEl) {
if (msg.ok && msg.url && msg.urlApp) {
// 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
const overlayCSV = msg.overlayCSV || msg.url.replace('.jpg','_two_cam.csv');
control.snapshotOutEl.innerHTML =
`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> ` +
` 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
document.getElementById('overlayImg').src = overlayPNG;
document.getElementById('overlayImg').src = overlayPNG0;
document.getElementById('overlayImg1').src = overlayPNG1;
// Render CSV values into the csvTable container (if available)
if (window.readCSV) {
window.readCSV.renderCSV('csvTable', overlayCSV);