Chapter 55: Screen Orientation & Device APIs

Building a Comprehensive Device Sensors Dashboard UI

**Part 11: HTML5 APIs Part 2** — Chapter 55: Screen Orientation & Device APIs

LEARNING OBJECTIVES ⌵

Aggregate Battery, Network, Orientation, and Motion APIs into a unified reactive dashboard.
Render a dynamic 3D orientation cube using CSS 3D Transforms driven by deviceorientation.
Implement power-saving and network-aware adaptive application modes.
Ensure graceful degradation across desktop and mobile browsers.

🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation

🌐

1. Input

Directives & Tags

⚙️

2. Parse

Tokenizer & AST

🌳

3. Layout

Box Model & Flow

🎨

4. Render

GPU Paint & Composite

PHASE 1: INPUT & DIRECTIVES

Browser receives declarative markup stream, parsing tag tokens and initializing component state.

💻 Interactive Code Playground

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL playground.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Device Sensors Dashboard</title>
  <style>
    body { font-family: system-ui; background: #0f172a; color: #f8fafc; padding: 2rem; }
    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; max-width: 800px; }
    .card { background: #1e293b; padding: 1.5rem; border-radius: 8px; border-top: 4px solid #3b82f6; }
    .value { font-size: 1.5rem; font-weight: bold; margin-top: 0.5rem; color: #38bdf8; }
  </style>
</head>
<body>
  <h1>Device Telemetry Dashboard</h1>
  <div class="grid">
    <div class="card">
      <div>🔋 Battery Level</div>
      <div class="value" id="bat-val">Detecting...</div>
    </div>
    <div class="card">
      <div>📶 Network Type</div>
      <div class="value" id="net-val">Detecting...</div>
    </div>
    <div class="card">
      <div>🔄 Orientation</div>
      <div class="value" id="ori-val">Detecting...</div>
    </div>
  </div>

// Network Information API
    if ('connection' in navigator) {
      const updateNet = () => {
        document.getElementById('net-val').textContent = `${navigator.connection.effectiveType.toUpperCase()} (SaveData: ${navigator.connection.saveData})`;
      };
      updateNet();
      navigator.connection.onchange = updateNet;
    } else {
      document.getElementById('net-val').textContent = 'Online';
    }

// Screen Orientation API
    if ('screen' in window && 'orientation' in screen) {
      const updateOri = () => {
        document.getElementById('ori-val').textContent = screen.orientation.type;
      };
      updateOri();
      screen.orientation.onchange = updateOri;
    }
  </script>
</body>
</html>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

📌 Key Takeaways

Always verify API presence ('getBattery' in navigator) before accessing device hardware features.
Listen to hardware state change events (onlevelchange, onchange) to keep UI synchronized without polling.
--

❓ Knowledge Check

1. Which of the following is correct?

A) - Always verify API presence ('getBattery' in navigator) before accessing device hardware features. B) The opposite of the above statement is true.

2. Which of the following is correct?

A) - Listen to hardware state change events (onlevelchange, onchange) to keep UI synchronized without polling. B) The opposite of the above statement is true.

👨‍🚀 CADET FLIGHT DOSSIER

CADET EXPLORER

💻 Interactive Code Playground

📌 Key Takeaways

❓ Knowledge Check