osiu97/ESP32-WijiBoard
1
0
Fork 0
Code Issues 10 Pull Requests Packages Projects Releases Wiki Activity

Implement fake full-screen for board control. Requires testing #28

Browse Source
This commit is contained in:
PROFERIS - Mi³osz Stocki
2026-07-15 14:32:49 +02:00
parent 949c3bd5f5
commit db7c5e048a
1 changed files with 57 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/js/sections/board-control.js
+57 -4
View File
@@ -14,6 +14,7 @@ let currentBg = localStorage.getItem('wiji_bg') || 'default';
let steps1 = 0;
let steps2 = 0;
let isManualPickMode = false;
let isFullscreen = false;
function syncStateFromStorage() {
isHomed = localStorage.getItem('wiji_homed') === 'true';
@@ -76,6 +77,32 @@ function buildHTML() {
z-index: 10;
pointer-events: none;
}
.fullscreen-card {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
z-index: 9999 !important;
border-radius: 0 !important;
margin: 0 !important;
background: #111 !important;
display: flex;
flex-direction: column;
}
.fullscreen-card #map-container {
max-width: none !important;
height: 100% !important;
display: flex;
align-items: center;
justify-content: center;
}
.fullscreen-card #bg-image {
max-height: 100%;
width: auto !important;
max-width: 100%;
object-fit: contain;
}
</style>
<div class="section-page fade-in" style="display:flex; flex-direction:column; height: 100%;">
@@ -86,12 +113,17 @@ function buildHTML() {
<div class="board-grid">
<!-- ── Map Area ─────────────────────────────────────── -->
<div class="card" style="display:flex; flex-direction:column; padding: 12px; position:relative;">
<div id="map-card" class="card" style="display:flex; flex-direction:column; padding: 12px; position:relative;">
<div class="card-header" style="display:flex; justify-content:space-between; align-items:center;">
<span class="card-title">Interactive Map</span>
<button id="btn-manual-pick" class="btn btn-secondary" style="padding: 4px 8px; font-size: 0.8rem; display:flex; align-items:center; gap:4px; border-radius: var(--radius-sm);">
<span style="font-size: 1.1rem;">⌖</span> Manual Pick
</button>
<div style="display: flex; gap: 8px;">
<button id="btn-manual-pick" class="btn btn-secondary" style="padding: 4px 8px; font-size: 0.8rem; display:flex; align-items:center; gap:4px; border-radius: var(--radius-sm);">
<span style="font-size: 1.1rem;">⌖</span> Manual Pick
</button>
<button id="btn-fullscreen" class="btn btn-secondary" style="padding: 4px 8px; font-size: 0.8rem; display:flex; align-items:center; gap:4px; border-radius: var(--radius-sm);">
<span id="fullscreen-icon" style="font-size: 1.1rem;">⛶</span> <span id="fullscreen-text">Full Screen</span>
</button>
</div>
</div>
<div style="flex:1; display:flex; align-items:flex-start; justify-content:center; overflow:hidden;">
@@ -489,6 +521,27 @@ export default {
});
}
// ── Full Screen Mode ──────────────────────────────────────
const btnFullscreen = document.getElementById('btn-fullscreen');
const mapCard = document.getElementById('map-card');
const fullscreenIcon = document.getElementById('fullscreen-icon');
const fullscreenText = document.getElementById('fullscreen-text');
if (btnFullscreen && mapCard) {
btnFullscreen.addEventListener('click', () => {
isFullscreen = !isFullscreen;
if (isFullscreen) {
mapCard.classList.add('fullscreen-card');
fullscreenIcon.textContent = '✖';
fullscreenText.textContent = 'Exit';
} else {
mapCard.classList.remove('fullscreen-card');
fullscreenIcon.textContent = '⛶';
fullscreenText.textContent = 'Full Screen';
}
});
}
// ── Sync Steps from BLE ───────────────────────────────────
const onBLEStatus = (e) => {
const msg = e.detail;