Remove multi-camera switcher, add Wild Dragon logo watermark
Single-camera setup: removed CAM1-8 switcher nav, switchCamera() function, and all .camBtn styles. ci is now permanently 0. Wild Dragon SVG logo added to resources/ and rendered as a centered background watermark (brightness(0) invert(1), 3.5% opacity) so it reads as a faint white ghost on the dark theme without interfering with any controls. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Zac Gaetano
parent
e423bd4bf6
commit
ba66bd743a
5 changed files with 141 additions and 49 deletions
16
index.html
16
index.html
|
|
@ -10,19 +10,13 @@
|
||||||
<script src="BMDevice.js"></script>
|
<script src="BMDevice.js"></script>
|
||||||
<script src="web-ui.js"></script>
|
<script src="web-ui.js"></script>
|
||||||
|
|
||||||
|
<!-- Background logo watermark -->
|
||||||
|
<div id="bgLogo" aria-hidden="true">
|
||||||
|
<img src="resources/wilddragon-logo.svg" alt="">
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Top Bar -->
|
<!-- Top Bar -->
|
||||||
<header id="topBar">
|
<header id="topBar">
|
||||||
<nav id="camSwitcher">
|
|
||||||
<button class="camBtn selected" onclick="switchCamera(0)">CAM1</button>
|
|
||||||
<button class="camBtn" onclick="switchCamera(1)">CAM2</button>
|
|
||||||
<button class="camBtn" onclick="switchCamera(2)">CAM3</button>
|
|
||||||
<button class="camBtn" onclick="switchCamera(3)">CAM4</button>
|
|
||||||
<button class="camBtn" onclick="switchCamera(4)">CAM5</button>
|
|
||||||
<button class="camBtn" onclick="switchCamera(5)">CAM6</button>
|
|
||||||
<button class="camBtn" onclick="switchCamera(6)">CAM7</button>
|
|
||||||
<button class="camBtn" onclick="switchCamera(7)">CAM8</button>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div id="camInfo">
|
<div id="camInfo">
|
||||||
<span id="cameraName">NOT CONNECTED</span>
|
<span id="cameraName">NOT CONNECTED</span>
|
||||||
<span id="timecodeLabel" class="timecode">--:--:--:--</span>
|
<span id="timecodeLabel" class="timecode">--:--:--:--</span>
|
||||||
|
|
|
||||||
BIN
resources/wilddragon-logo.png
Normal file
BIN
resources/wilddragon-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
120
resources/wilddragon-logo.svg
Normal file
120
resources/wilddragon-logo.svg
Normal file
|
|
@ -0,0 +1,120 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill:#1025A1;}
|
||||||
|
</style>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<g transform="translate(192.760202, 192.018739)">
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path d="M280,607.4c-76.3-6.3-92.6-71.7-83-105.7c0,0,36.2,14.7,49.9,49.5c0,0-1.5-31.2-13.8-40.1c0,0,91.5,22.6,87.6,81.3
|
||||||
|
c0,0,28.8-40.5-19.8-85.6c-48.6-45-40.5-53.1-40.5-53.1s8.2-4.3,12.9-11.6l1.8,4.9c0,0,2.8-11.5,2.1-16.6c0,0,3.4,6,4.8,8.1
|
||||||
|
c0,0-2.2-15.2-2.2-18.9c0-3.7,9.4-14.4,20.8-13c11.4,1.4,20.2-5.9,20.2-5.9l-1.7,6.7c0,0,6.8-6.8,11.7-7.3
|
||||||
|
c4.9-0.4,14.3,2.2,11,4.6c-3,2.2,0.3,6.9,0.7,7.4c-0.2-0.5-2-4.4,2.5-6.8c4.8-2.6,11-4.1,8.2-9.9c0,0-1.8-5.5-7.1-8.5
|
||||||
|
c0,0,1.7,3.1-0.7,3.1c-2.4,0-8.5-8.9-15.2-10.4l0.8,2.6c0,0-2.1-2.4-23.1-10.1c-20.1-7.3-21.9-12.3-22-12.8
|
||||||
|
c0,0.6,0.3,9.6,19.6,19c-0.9-0.2-15.1-4.4-23.5-12.1c0,0,4.6,7.3,14.7,12.7l-14.7-1.1l9.4,4c0,0-16.1,0.7-31.8-4.5
|
||||||
|
c0,0,4.6,3,7.8,4.7c0,0-20.4,1.5-28.5-0.2c1.8,0.5,16.5,4.4,21,5c0,0-18.4,1.3-28.7,6.9c0,0,2.3,19.5,14.4,41
|
||||||
|
c-1.3-1.5-24.2-29.3-16.6-69.8c0,0-29-5-46.6,29.6s-19,77.1,10.7,99c-0.9-0.5-15-9.1-22.2-27.9C151.5,540.5,187,578,200,588.9
|
||||||
|
c-58.5-45.5-37.5-116.9-32.2-132.2c-2.2-10.1-2.2-22.4,1.7-37.2c0,0-54.4,69.2-3.2,153.1c51.2,83.8,196.1,73.8,233.8-23.4
|
||||||
|
C398.9,551.1,355.1,613.6,280,607.4z M212.6,385.6c-0.3,6.6,0.2,13.2,1.3,19.6c0.5,3.2,1,6.5,1.9,9.6l1.1,4.8l1.5,4.7
|
||||||
|
c3.9,12.5,9.4,24.4,16.3,35.5c3.6,5.4,7,11,11.3,16c2.1,2.5,3.9,5.3,6.2,7.6c2.2,2.4,4.4,4.8,6.6,7.2c2.1,2.5,4.6,4.7,7,6.9
|
||||||
|
l7.2,6.7c4.9,4.3,10.2,8.3,15.2,12.6c-5.5-3.7-10.9-7.5-16.2-11.4l-7.6-6.4c-2.5-2.2-5.1-4.2-7.4-6.7
|
||||||
|
c-4.7-4.7-9.4-9.4-13.4-14.7c-4.4-5-8-10.6-11.7-16.1c-6.8-11.5-12.5-23.6-15.9-36.5C212.4,412.2,210.7,398.7,212.6,385.6z
|
||||||
|
M203.3,401.5c0.2,4.4,0.4,8.8,0.9,13.1c0.4,4.4,0.8,8.7,1.4,13c1.2,8.6,2.6,17.3,4.5,25.8c1.8,8.5,4.2,16.9,6.9,25.2l2.1,6.2
|
||||||
|
l2.4,6.1c1.4,4.2,3.6,8,5.2,12.1c-4.8-7.4-9-15.2-12.1-23.5c-3.3-8.2-5.9-16.7-7.8-25.4c-1.9-8.6-3.2-17.4-3.8-26.2
|
||||||
|
C202.5,419.1,202.4,410.3,203.3,401.5z M192.9,468.3c-1.2-5.8-1.8-11.7-2.2-17.6c-0.3-5.9-0.3-11.9,0.1-17.7
|
||||||
|
c0.4-5.9,1.3-11.8,2.8-17.5c-0.2,5.9-0.2,11.8-0.2,17.6c0.1,5.8,0.2,11.7,0.6,17.5c0.3,5.8,0.8,11.6,1.4,17.4l2,17.5
|
||||||
|
C195.6,479.8,194,474.1,192.9,468.3z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<g transform="translate(125.869582, 192.018739)">
|
||||||
|
<g>
|
||||||
|
<path d="M262.5,282c-0.3,0.5-0.6,1.2-0.9,1.8c-1.1,2-2.2,4.4-3,6.6l-14.1,39h-7.8l-8.3-22.8l-8.2,22.8h-7.8l-14.1-39
|
||||||
|
c-1-2.8-2.5-6.1-3.9-8.4h9.5c0.1,2.2,1.2,5.5,2.2,8.3l12.8,35.5l8.2-22.7l-4.6-12.6c-1-2.8-2.6-6.1-3.9-8.4h9.5
|
||||||
|
c0.1,2.2,1.1,5.5,2.1,8.3l12.9,35.5l12.8-35.5c1-2.8-0.3-5.7-1.8-8.3H262.5z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<g transform="translate(159.727017, 192.018739)">
|
||||||
|
<g>
|
||||||
|
<path d="M268.2,290.5c0-3.2,0.3-6,1.1-8.4h-9.5c0.9,2.4,1.1,5.2,1.1,8.4c0,5.2,0,25.4,0,30.6c0,3.2-0.3,6-1.1,8.4h31.4l0.4-7.2
|
||||||
|
H291c-0.5,1.3-2.7,4.7-8.3,4.7h-14.5V290.5z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<g transform="translate(174.231269, 192.018739)">
|
||||||
|
<g>
|
||||||
|
<path d="M306.6,282h-18.8c0.9,2.4,1.1,5.2,1.1,8.4v30.6c0,3.2-0.2,6-1.1,8.4h18.8c13.1,0,24.9-8.2,24.9-23.7
|
||||||
|
C331.5,290.2,319.7,282,306.6,282z M306.6,327h-10.4v-42.5h10.4c9,0,17.4,8.1,17.4,21.2C324,318.8,315.6,327,306.6,327z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<g transform="translate(202.027605, 192.018739)">
|
||||||
|
<g>
|
||||||
|
<path d="M360.3,282h-18.8c0.9,2.4,1.1,5.2,1.1,8.4v30.6c0,3.2-0.3,6-1.1,8.4h18.8c13.1,0,24.8-8.2,24.8-23.7
|
||||||
|
C385.2,290.2,373.4,282,360.3,282z M360.3,327H350v-42.5h10.4c9,0,17.4,8.1,17.4,21.2C377.7,318.8,369.3,327,360.3,327z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<g transform="translate(220.56186, 192.018739)">
|
||||||
|
<g>
|
||||||
|
<path d="M407,321.1l-8.2-15.2c6.4-3.1,12.6-6.2,12.6-13.7c0-5.5-4.9-10.1-15.4-10.1h-18.7c0.9,2.4,1.1,5.2,1.1,8.4v30.6
|
||||||
|
c0,3.2-0.3,6-1.1,8.4h9.5c-0.9-2.4-1.1-5.2-1.1-8.4v-1.3c0-5,2.9-8.1,6.6-10.5l7.8,14.6c1,1.8,1.7,3.6,2.2,5.6h10
|
||||||
|
C410.8,327.4,408.5,323.8,407,321.1z M385.8,312.1v-27.9h3.8c7.6,0,14.4,1.7,14.6,7.5C404.6,301.5,391.1,303.2,385.8,312.1z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<g transform="translate(236.122104, 192.018739)">
|
||||||
|
<g>
|
||||||
|
<path d="M447.4,321.1L433.3,282h-7.8l-14.1,39.1c-1,2.8-2.5,6-3.9,8.3h8.3c-2-3.4-2.6-6-1.8-8.3c1.1-3.1,2.3-5.6,5.2-7.3
|
||||||
|
c4.4-2.6,11.2-2.5,15.6,0.2c2.6,1.6,3.8,4,4.9,7.3c1,2.7,2.1,6,2.1,8.2h9.6C450,327.1,448.4,323.9,447.4,321.1z M417.2,312.1
|
||||||
|
l9.6-26.4l9.6,26.4C430.8,308.5,422.7,308.5,417.2,312.1z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<g transform="translate(254.721007, 192.018739)">
|
||||||
|
<g>
|
||||||
|
<path d="M468,281.2c-13.7,0-24.7,10.9-24.7,24.5c0,13.7,10.9,24.7,24.7,24.7c5,0,9.7-1.5,13.8-4.2c3.1-2.2,6.3-1.3,7.1,2.6h0.6
|
||||||
|
v-13.8c0-3.3,0.2-6.2,1.1-8.5h-9.9c1,2.3,1.3,5.2,1.3,8.5v6.2c-4,5.2-11.4,7.3-17.6,5.2c-7.5-2.7-13.5-10.5-13.5-20.6
|
||||||
|
c0-13.2,9.7-22.1,19.8-21.6c9.3,0.5,16.2,7.5,18.4,15.7h0.8v-11c-1.3,0.1-3.4-0.9-4.8-2C479.4,282.9,474.9,281.2,468,281.2z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<g transform="translate(274.462109, 192.018739)">
|
||||||
|
<g>
|
||||||
|
<path d="M506.1,281.2c-13.6,0-24.6,11-24.6,24.6c0,13.6,11,24.6,24.6,24.6c13.6,0,24.6-11,24.6-24.6
|
||||||
|
C530.7,292.2,519.7,281.2,506.1,281.2z M516.8,325c-8.3,4.6-19.7-0.4-25.6-11.1c-5.9-10.6-3.9-22.9,4.3-27.5
|
||||||
|
c8.2-4.5,19.7,0.5,25.5,11.1C526.9,308.2,525,320.6,516.8,325z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<g transform="translate(294.892833, 192.018739)">
|
||||||
|
<g>
|
||||||
|
<path d="M552.3,282c3.9,2.2,4.7,7.3,4.7,11.3v25L530.1,282c-3,0-6.1,0-9.1,0l1.1,1.5v37.5c0,3.2-0.3,6-1.1,8.4h8.3
|
||||||
|
c-3.8-2.2-4.7-7.3-4.7-11.3v-31.2l31.6,42.5h3.3v-39c0-3.2,0.3-6,1.1-8.4H552.3z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<path class="st0" d="M419,447.1c0,0,4.5-13.4-12.3-25.4c-16.2-11.6-7.1-24-6.5-24.8c-0.7,0.4-8.4,5.2-3.9,22.3
|
||||||
|
c4.8,17.9,1.7,28.5,1.7,28.5s-8.4,0-17-11.5c0,0-0.6,14.3,11.5,17.6c12,3.4,15.1,15.1,7.8,15.9c-7.3,0.8-9.9-15.5-20.9-15.7
|
||||||
|
c0,0,11.9,5.7,8,12.6c-4,6.9-9.2-5-9.2-5s0.1,7.9,6.3,12.5c0.9,0.7,2,1.3,3.1,1.8c1.2,0.5,2.6,0.9,4.2,1.2
|
||||||
|
c3.3,0.5,6.5,4.3,8.7,10.2c3,8.2,4.1,20.4,1.2,34.2c-3.4,16.5-12.5,35.1-30.9,51.4c1-0.6,26.5-17,37.7-51.4
|
||||||
|
c0.1-0.2,0.2-0.4,0.2-0.6c2.6-8,4.3-17,4.9-26.9c2.8-54.1,29.3-51.3,29.3-51.3S429.6,437.5,419,447.1z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 6.3 KiB |
36
style.css
36
style.css
|
|
@ -66,31 +66,24 @@ a:hover { text-decoration: underline; }
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
}
|
}
|
||||||
|
|
||||||
#camSwitcher {
|
/* Background watermark logo */
|
||||||
|
#bgLogo {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 2px;
|
align-items: center;
|
||||||
background: var(--bg);
|
justify-content: center;
|
||||||
border: 1px solid var(--border);
|
pointer-events: none;
|
||||||
border-radius: var(--radius-md);
|
z-index: 0;
|
||||||
padding: 3px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.camBtn {
|
#bgLogo img {
|
||||||
background: none;
|
width: min(55vw, 55vh);
|
||||||
border: none;
|
height: auto;
|
||||||
color: var(--text-2);
|
filter: brightness(0) invert(1);
|
||||||
font: inherit;
|
opacity: 0.035;
|
||||||
font-size: 11px;
|
user-select: none;
|
||||||
font-weight: 600;
|
|
||||||
letter-spacing: 0.04em;
|
|
||||||
padding: 4px 8px;
|
|
||||||
border-radius: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: color 0.12s, background 0.12s;
|
|
||||||
}
|
}
|
||||||
.camBtn:hover { color: var(--text); background: var(--elevated); }
|
|
||||||
.camBtn.selected { color: var(--accent); background: var(--accent-dim); }
|
|
||||||
|
|
||||||
#topBar.recording { border-bottom-color: var(--rec-border); }
|
#topBar.recording { border-bottom-color: var(--rec-border); }
|
||||||
|
|
||||||
|
|
@ -228,6 +221,7 @@ a:hover { text-decoration: underline; }
|
||||||
left: 0; right: 0;
|
left: 0; right: 0;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabPanel { display: none; padding: 20px; }
|
.tabPanel { display: none; padding: 20px; }
|
||||||
|
|
|
||||||
18
web-ui.js
18
web-ui.js
|
|
@ -26,7 +26,7 @@ function switchTab(name) {
|
||||||
}
|
}
|
||||||
|
|
||||||
// =====================================================================
|
// =====================================================================
|
||||||
// Camera init / switch
|
// Camera init
|
||||||
// =====================================================================
|
// =====================================================================
|
||||||
|
|
||||||
function initCamera() {
|
function initCamera() {
|
||||||
|
|
@ -56,22 +56,6 @@ function initCamera() {
|
||||||
unsavedChanges = unsavedChanges.filter(e => e !== 'Hostname');
|
unsavedChanges = unsavedChanges.filter(e => e !== 'Hostname');
|
||||||
}
|
}
|
||||||
|
|
||||||
function switchCamera(index) {
|
|
||||||
if (cameras[ci]) cameras[ci].active = false;
|
|
||||||
ci = index;
|
|
||||||
|
|
||||||
document.querySelectorAll('.camBtn').forEach((btn, i) => {
|
|
||||||
btn.classList.toggle('selected', i === ci);
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('cameraName').textContent = 'NOT CONNECTED';
|
|
||||||
document.getElementById('timecodeLabel').textContent = '--:--:--:--';
|
|
||||||
document.getElementById('hostnameInput').value = localStorage.getItem('camerahostname_' + ci) || '';
|
|
||||||
document.getElementById('secureCheckbox').checked = localStorage.getItem('camerasecurity_' + ci) === 'true';
|
|
||||||
|
|
||||||
if (cameras[ci]) cameras[ci].active = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
// =====================================================================
|
// =====================================================================
|
||||||
// Main UI updater (called by WebSocket)
|
// Main UI updater (called by WebSocket)
|
||||||
// =====================================================================
|
// =====================================================================
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue