Add fullscreen functionality to simulators with button and styles

Author: smkalami

simulators/index.html

@@ -14,6 +14,7 @@
   <header>
     <h1>Control Systems</h1>
     <p class="subtitle">Interactive Simulators</p>
+    <button id="fsBtn" class="icon-btn" title="Enter fullscreen">&#x26F6; Full Screen</button>
   </header>
 
   <main>
@@ -109,5 +110,24 @@ <h2>PID Controller</h2>
     });
   </script>
 
+  <script>
+    (function () {
+      const fsBtn = document.getElementById('fsBtn');
+      function updateFsBtn() {
+        const inFs      = !!document.fullscreenElement;
+        fsBtn.innerHTML = inFs ? '&#x2715; Exit Full Screen' : '&#x26F6; Full Screen';
+        fsBtn.title     = inFs ? 'Exit fullscreen' : 'Enter fullscreen';
+      }
+      fsBtn.addEventListener('click', () => {
+        if (!document.fullscreenElement) {
+          document.documentElement.requestFullscreen();
+        } else {
+          document.exitFullscreen();
+        }
+      });
+      document.addEventListener('fullscreenchange', updateFsBtn);
+    })();
+  </script>
+
 </body>
 </html>

simulators/linear-system-1st-order/app.js

@@ -340,3 +340,20 @@ window.addEventListener('DOMContentLoaded', () => {
   syncInputs('tau-slider', 'tau-number', val => { tau = val; updateChart(); });
   syncInputs('k-slider',   'k-number',   val => { K   = val; updateChart(); });
 });
+
+// ── Fullscreen ─────────────────────────────────────────────────────────────────
+const fsBtn = document.getElementById('fsBtn');
+
+function updateFsBtn() {
+  const inFs      = !!document.fullscreenElement;
+  fsBtn.innerHTML = inFs ? '✕ Exit Full Screen' : '⛶ Full Screen';
+  fsBtn.title     = inFs ? 'Exit fullscreen' : 'Enter fullscreen';
+}
+fsBtn.addEventListener('click', () => {
+  if (!document.fullscreenElement) {
+    document.documentElement.requestFullscreen();
+  } else {
+    document.exitFullscreen();
+  }
+});
+document.addEventListener('fullscreenchange', updateFsBtn);

simulators/linear-system-1st-order/index.html

@@ -16,6 +16,7 @@
     <a href="../index.html" class="back-link">&#8592; All Simulators</a>
     <h1>1st-Order Linear System</h1>
     <p class="subtitle">Step Response Simulator &ensp;&mdash;&ensp; \(G(s) = \dfrac{K}{\tau s + 1}\)</p>
+    <button id="fsBtn" title="Enter fullscreen">&#x26F6; Full Screen</button>
   </header>
 
   <main>

simulators/linear-system-2nd-order/app.js

@@ -420,3 +420,20 @@ window.addEventListener('DOMContentLoaded', () => {
   syncInputs('wn-slider',   'wn-number',   val => { wn   = val; updateChart(); });
   syncInputs('zeta-slider', 'zeta-number', val => { zeta = val; updateChart(); });
 });
+
+// ── Fullscreen ─────────────────────────────────────────────────────────────────
+const fsBtn = document.getElementById('fsBtn');
+
+function updateFsBtn() {
+  const inFs      = !!document.fullscreenElement;
+  fsBtn.innerHTML = inFs ? '✕ Exit Full Screen' : '⛶ Full Screen';
+  fsBtn.title     = inFs ? 'Exit fullscreen' : 'Enter fullscreen';
+}
+fsBtn.addEventListener('click', () => {
+  if (!document.fullscreenElement) {
+    document.documentElement.requestFullscreen();
+  } else {
+    document.exitFullscreen();
+  }
+});
+document.addEventListener('fullscreenchange', updateFsBtn);

simulators/linear-system-2nd-order/index.html

@@ -18,6 +18,7 @@ <h1>2nd-Order Linear System</h1>
     <p class="subtitle">Step Response Simulator &ensp;&mdash;&ensp;
       \(\displaystyle G(s) = \frac{K\omega_n^2}{s^2 + 2\zeta\omega_n s + \omega_n^2}\)
     </p>
+    <button id="fsBtn" title="Enter fullscreen">&#x26F6; Full Screen</button>
   </header>
 
   <main>

simulators/pid/app.js

@@ -359,7 +359,7 @@ dFiltEnCk.addEventListener('change', () => updateFilterRow());
 // ── Fullscreen ─────────────────────────────────────────────────────────────────
 function updateFsBtn() {
   const inFs      = !!document.fullscreenElement;
-  fsBtn.innerHTML = inFs ? '✕' : '⛶';
+  fsBtn.innerHTML = inFs ? '✕ Exit Full Screen' : '⛶ Full Screen';
   fsBtn.title     = inFs ? 'Exit fullscreen' : 'Enter fullscreen';
 }
 fsBtn.addEventListener('click', () => {

simulators/pid/index.html

@@ -16,6 +16,7 @@
     <a href="../index.html" class="back-link">&#8592; Control Systems</a>
     <h1>PID Controller Simulator</h1>
     <p class="subtitle">\(C(s) = K_p + \dfrac{K_i}{s} + K_d s\)</p>
+    <button id="fsBtn" title="Enter fullscreen">&#x26F6; Full Screen</button>
   </header>
 
   <main>
@@ -143,7 +144,6 @@ <h1>PID Controller Simulator</h1>
           <input type="range" id="timeWin" min="10" max="120" step="5" value="45" />
           <span id="twVal" class="val">45 s</span>
         </label>
-        <button id="fsBtn" class="icon-btn" title="Enter fullscreen">&#x26F6;</button>
       </div>
 
     </section>

simulators/pole-zero/app.js

@@ -861,3 +861,20 @@ window.addEventListener('DOMContentLoaded', () => {
   syncInputs('real-zero-a-slider', 'real-zero-a-number', val => { state.realZeroA.value = val; markCustomPreset(); updateChart(); });
   syncInputs('real-zero-b-slider', 'real-zero-b-number', val => { state.realZeroB.value = val; markCustomPreset(); updateChart(); });
 });
+
+// ── Fullscreen ─────────────────────────────────────────────────────────────────
+const fsBtn = document.getElementById('fsBtn');
+
+function updateFsBtn() {
+  const inFs      = !!document.fullscreenElement;
+  fsBtn.innerHTML = inFs ? '✕ Exit Full Screen' : '⛶ Full Screen';
+  fsBtn.title     = inFs ? 'Exit fullscreen' : 'Enter fullscreen';
+}
+fsBtn.addEventListener('click', () => {
+  if (!document.fullscreenElement) {
+    document.documentElement.requestFullscreen();
+  } else {
+    document.exitFullscreen();
+  }
+});
+document.addEventListener('fullscreenchange', updateFsBtn);

simulators/pole-zero/index.html

@@ -15,6 +15,7 @@
     <a href="../index.html" class="back-link">&#8592; All Simulators</a>
     <h1>Pole-Zero Map Simulator</h1>
     <p class="subtitle">Pole and zero locations, \(G(s) = K\dfrac{\prod(s-z_i)}{\prod(s-p_i)}\)</p>
+    <button id="fsBtn" title="Enter fullscreen">&#x26F6; Full Screen</button>
   </header>
 
   <main>

simulators/styles.css

@@ -37,6 +37,7 @@ header {
   color: var(--header-text);
   padding: 1.1rem 2rem;
   user-select: none;
+  position: relative;
 }
 
 header h1 {
@@ -56,6 +57,26 @@ header h1 {
   letter-spacing: -0.02em;
 }
 
+header #fsBtn {
+  position: absolute;
+  top: 1rem;
+  right: 1.5rem;
+  background: transparent;
+  color: #94a3b8;
+  border: 1.5px solid #475569;
+  padding: 5px 10px;
+  font-size: 0.8rem;
+  line-height: 1;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: color 0.15s, border-color 0.15s, background 0.15s;
+}
+header #fsBtn:hover {
+  color: #f1f5f9;
+  border-color: #94a3b8;
+  background: rgba(255, 255, 255, 0.06);
+}
+
 /* ─── Subtitle ───────────────────────────────────────────────────────────── */
 .subtitle {
   font-size: 0.82rem;
@@ -575,11 +596,10 @@ td.value {
   top: 2px;
 }
 
-/* ─── Fullscreen (PID) ───────────────────────────────────────────────────── */
-:fullscreen main,
-:-webkit-full-screen main {
-  max-width: 100%;
-  padding: 1rem 1.25rem 1.5rem;
+/* ─── Fullscreen ─────────────────────────────────────────────────────────── */
+:fullscreen body,
+:-webkit-full-screen body {
+  overflow-y: auto;
 }
 
 /* ─── Responsive ─────────────────────────────────────────────────────────── */