wasm-rtos.github.io/index.html at main · wasm-rtos/wasm-rtos.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>wasm-rtos</title>
  <meta name="description" content="A portable scheduler for WebAssembly tasks in browsers, ESP32, and native hardware.">
  <meta name="theme-color" content="#111111">
  <link rel="icon" type="image/svg+xml" href="favicon.svg">
  <link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
  <link rel="icon" type="image/png" sizes="48x48" href="favicon-48x48.png">
  <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
  <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
  <link rel="manifest" href="site.webmanifest">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="page-drop.css">
  <script src="os/wasm-rtos.js" defer></script>
  <script src="main.js" defer></script>
</head>
<body>
  <header class="top-header">
    <a class="brand" href="#" aria-label="WA OS home">
      <img src="wa-os-logo-horizontal.svg" alt="WA OS">
    </a>
    <nav class="site-nav" aria-label="Primary navigation">
      <a href="#runtime">Live Runtime</a>
      <a href="https://github.com/wasm-rtos/wasm-rtos" target="_blank" rel="noreferrer">GitHub ↗</a>
    </nav>
  </header>

  <div id="pageDropOverlay" class="page-drop-overlay" role="status" aria-live="polite" aria-hidden="true">
    <div class="page-drop-overlay-card">
      <span class="page-drop-overlay-label">WASM task</span>
      <svg class="page-drop-overlay-icon" viewBox="0 0 64 64" aria-hidden="true" focusable="false">
        <path d="M32 45V15M20 27L32 15L44 27" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M14 42V51H50V42" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      <strong>Drop to launch</strong>
      <span>Release anywhere · .wasm files only</span>
    </div>
  </div>

  <main id="runtime" class="dashboard" aria-label="wasm-rtos task dashboard">
    <div class="content-row">
      <section class="left-pane" aria-label="Task controls">
        <div class="hero-upload-row">
          <section class="hero" aria-labelledby="hero-title">
            <p class="eyebrow">wasm-rtos · portable RTOS core</p>
            <h1 id="hero-title">Run WebAssembly tasks everywhere.</h1>
            <p>One FreeRTOS-style task model for browsers, ESP32, and native hardware. Try the live runtime here, then run the same WebAssembly workloads on your target.</p>
            <div class="hero-links">
              <a class="primary-link" href="https://github.com/wasm-rtos/wasm-rtos" target="_blank" rel="noreferrer">View source ↗</a>
            </div>
          </section>

          <section class="card upload-card" aria-labelledby="upload-title">
            <input id="wasmFile" class="file-input" type="file" accept=".wasm" aria-label="Choose WASM file">
            <div id="dropZone" class="drop-zone" role="button" tabindex="0" aria-describedby="upload-help">
              <div class="cloud-icon" aria-hidden="true">
                <svg viewBox="0 0 64 48" focusable="false">
                  <path d="M20 38H47C55 38 60 33 60 26C60 19 55 14 48 14C45 6 38 2 30 4C23 5 18 10 16 17C9 18 4 23 4 30C4 35 9 38 20 38Z" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M32 32V17M24 25L32 17L40 25" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
              <h2 id="upload-title">Drop WASM anywhere</h2>
              <p id="upload-help">or choose a .wasm file</p>
              <button id="launchButton" class="primary-button" type="button">Launch Task</button>
            </div>
          </section>
        </div>

        <section class="card tasks-card" aria-labelledby="tasks-title">
          <div class="card-header">
            <div class="title-group">
              <h2 id="tasks-title">Tasks</h2>
              <span id="activeBadge" class="pill">0 Tasks</span>
            </div>
            <button id="newTaskButton" class="secondary-button" type="button">+ New Task</button>
          </div>
          <div class="table-wrap">
            <table>
              <thead>
                <tr>
                  <th>APP NAME</th>
                  <th>TASK ID</th>
                  <th>STATUS</th>
                  <th>ACTIVITY</th>
                  <th>PRIORITY</th>
                  <th>ACTIONS</th>
                </tr>
              </thead>
              <tbody id="taskBody"></tbody>
            </table>
          </div>
          <section class="scheduler-timeline" aria-labelledby="scheduler-timeline-title">
            <div class="scheduler-timeline-header">
              <div>
                <h3 id="scheduler-timeline-title">Scheduler timeline</h3>
                <p>LOW = idle · HIGH = running · measured slice duration</p>
              </div>
              <div class="scheduler-timeline-meta" aria-label="Timeline status">
                <span id="schedulerTimelineStatus" class="timeline-live"><i aria-hidden="true"></i> Live</span>
                <span id="schedulerTimelineWindow">10 s window</span>
              </div>
            </div>
            <div id="schedulerTimelineShell" class="scheduler-timeline-shell">
              <canvas id="schedulerTimelineCanvas" class="scheduler-timeline-canvas" aria-label="Live scheduler timeline. Launch a task to start tracing execution."></canvas>
              <div id="schedulerTimelineEmpty" class="scheduler-timeline-empty">
                <strong>No task slices yet</strong>
                <span>Launch a WASM task to see scheduler activity.</span>
              </div>
              <div id="schedulerTimelineTooltip" class="scheduler-timeline-tooltip" role="tooltip" hidden></div>
            </div>
            <p id="schedulerTimelineSummary" class="visually-hidden" aria-live="polite">No scheduler activity recorded.</p>
          </section>
        </section>
      </section>

      <aside class="right-pane" aria-label="Runtime output">
        <section class="card console-card" aria-labelledby="console-title">
          <div class="card-header">
            <h2 id="console-title">Console</h2>
            <button class="link-button" type="button">Open Terminal ↗</button>
          </div>
          <pre id="consoleLog" class="terminal" aria-live="polite"></pre>
        </section>

        <section class="card preview-card" aria-labelledby="preview-title">
          <div class="card-header">
            <h2 id="preview-title">Preview Output</h2>
            <span class="app-label">wasm-rtos <span aria-hidden="true">●</span></span>
          </div>
          <div class="canvas-shell">
            <canvas id="previewCanvas" aria-label="Animated WebAssembly preview output"></canvas>
          </div>
        </section>
      </aside>
    </div>

    <section class="card fuel-control" aria-labelledby="fuel-control-title">
      <div class="fuel-control-copy">
        <p class="eyebrow">Virtual CPU limiter</p>
        <h2 id="fuel-control-title">WASM execution budget</h2>
        <p>Limit how much wasm3 work may be scheduled per millisecond. The RTOS clock keeps advancing at zero fuel, so timers and deadlines remain meaningful while task execution is paused.</p>
      </div>
      <div class="fuel-control-panel">
        <div class="fuel-rate-heading">
          <div>
            <strong id="fuelRateFrequency">2.40 Mfuel/s</strong>
            <span id="fuelRatePerMs">2,400 fuel/ms budget</span>
          </div>
          <output id="fuelRateActual" for="fuelRateSlider fuelRateInput">0 fuel/ms scheduled</output>
        </div>
        <label class="fuel-slider-label" for="fuelRateSlider">Fuel rate</label>
        <input id="fuelRateSlider" class="fuel-slider" type="range" min="0" max="40000" step="1" value="2400">
        <div class="fuel-input-row">
          <label for="fuelRateInput">Fuel / ms</label>
          <input id="fuelRateInput" class="fuel-number-input" type="number" min="0" max="40000" step="1" value="2400" inputmode="numeric">
          <span>0 pauses tasks</span>
        </div>
        <p class="fuel-calibration-note">Mfuel/s is a wasm3 fuel budget, not hardware MHz. An ESP32 MHz equivalent needs a benchmark-derived calibration profile.</p>
      </div>
    </section>

    <section class="card stats-bar" aria-label="Runtime statistics">
      <div class="stat cpu-stat"><div class="cpu-meter"><span>CPU</span><strong id="cpuValue">0%</strong><div class="progress"><i id="cpuProgress" style="width:0%"></i></div></div></div>
      <div class="stat"><span>MEMORY</span><strong id="memoryValue">0 MB</strong><div class="progress"><i id="memoryProgress" style="width:0%"></i></div></div>
      <div class="stat"><span>READY</span><strong><b id="activeRatio">0 / 0</b></strong><div class="progress"><i id="activeProgress" style="width:0%"></i></div></div>
      <div class="stat"><span>WAITING</span><strong id="waitingCount">0</strong><div class="progress"><i id="waitingProgress" style="width:0%"></i></div></div>
      <div class="stat"><span>TIMERS</span><strong id="timerCount">0</strong><div class="progress"><i id="timerProgress" style="width:0%"></i></div></div>
      <div class="stat"><span>RUNTIME</span><strong id="runtimeClock">00:00:00</strong></div>
      <div class="runtime-ok"><span class="status-dot"></span><div><strong id="runtimeStatus">Runtime: Loading</strong><small id="runtimeStatusDetail">Initializing wasm-rtos</small></div></div>
    </section>

  </main>
</body>
</html>