From 3965ad20ebb6177e9d187272b9196b3b4051b7d0 Mon Sep 17 00:00:00 2001
From: Kenneth Rohde Christiansen <kenneth.r.christiansen@intel.com>
Date: Tue, 16 May 2023 14:28:08 +0200
Subject: [PATCH] Demo rework

- New better UI
- Tester for mitigation of side-channel attack
---
 demo/binutils.js                | 152 +++++++++++
 demo/bit-channel-broadcaster.js |  62 +++++
 demo/bit-channel-observer.js    | 110 ++++++++
 demo/index.html                 | 326 +++++++++++++++--------
 demo/mandelbrot-player.js       | 152 +++++++++++
 demo/mandelbrot-worker-asm.js   |   8 +-
 demo/mandelbrot.js              | 456 +++++++++++++-------------------
 demo/pressure-calibrator.js     | 113 ++++++++
 demo/pressure-emoji.js          | 106 ++++++++
 demo/wc-utils.js                |  15 ++
 10 files changed, 1122 insertions(+), 378 deletions(-)
 create mode 100644 demo/binutils.js
 create mode 100644 demo/bit-channel-broadcaster.js
 create mode 100644 demo/bit-channel-observer.js
 create mode 100644 demo/mandelbrot-player.js
 create mode 100644 demo/pressure-calibrator.js
 create mode 100644 demo/pressure-emoji.js
 create mode 100644 demo/wc-utils.js

diff --git a/demo/binutils.js b/demo/binutils.js
new file mode 100644
index 0000000..c381e04
--- /dev/null
+++ b/demo/binutils.js
@@ -0,0 +1,152 @@
+export function toBinaryString(value) {
+  let str = (value >>> 0).toString(2);
+  return '0b' + str.padStart(Math.ceil(str.length / 8) * 8, '0');
+}
+
+export function reverseByte(b) {
+  b = (b & 0b11110000) >> 4 | (b & 0b00001111) << 4;
+  b = (b & 0b11001100) >> 2 | (b & 0b00110011) << 2;
+  b = (b & 0b10101010) >> 1 | (b & 0b01010101) << 1;
+  return b;
+}
+
+export class BitDataView extends DataView {
+  #u8;
+
+  constructor(buffer) {
+    super(buffer);
+    this.#u8 = new Uint8Array(buffer);
+    this.length = 0;
+  }
+
+  getBit(index) {
+    const v = this.#u8[index >> 3];
+    const offset = index & 0x7;
+    return (v >> (7-offset)) & 1;
+  };
+
+  setBit(index, value) {
+    this.length = Math.max(this.length, index + 1);
+    const offset = index & 0x7;
+    if (value) {
+      this.#u8[index >> 3] |= (0x80 >> offset);
+    } else {
+      this.#u8[index >> 3] &= ~(0x80 >> offset);
+    }
+  };
+
+  shift16Left(amount, index = 0) {
+    let view = new DataView(this.buffer);
+    let value = view.getUint16(index, false);
+    view.setInt16(index, value << amount, false);
+  }
+
+  [Symbol.iterator]() {
+    return {
+      current: 0,
+      last: this.buffer.byteLength * 8,
+      view: this,
+
+      next() {
+        if (this.current <= this.last) {
+          return { done: false, value: this.view.getBit(this.current++) };
+        } else {
+          return { done: true };
+        }
+      }
+    };
+  }
+}
+
+export class MessageEncoder {
+  encode(message) {
+    const enc = new TextEncoder("utf-8");
+
+    // We send 32 bits per ASCII character:
+    //   |position| with the first bit set to 1 indicating a position
+    //   |checksum| and alignment byte for the position
+    //   |value| Non extended ASCII character
+    //   |checksum| and alignment byte for the value
+    //
+    // A checksum is the reversed complement, e.g for 0110 1000
+    // the complement will be 10010111 and reversed it will be 11101001
+    const letters = [...enc.encode(message)].flatMap((value, position) => {
+      const pos = position | 0b10000000;
+      const vPos = reverseByte(~pos);
+      const vValue = reverseByte(~value);
+      return [ pos, vPos, value, vValue ]
+    });
+
+    return new Uint8Array([...letters]);
+  }
+}
+
+export class MessageDecoder {
+  decode(uInt8Array) {
+    const dec = new TextDecoder("utf-8");
+    const view = new BitDataView(uInt8Array.buffer);
+    const output = [];
+
+    const POSITION_BIT = 0b10000000;
+    let position = 0;
+
+    for (let i = 0; i < uInt8Array.length; i += 2) {
+      const byte = uInt8Array[i];
+      const checksum = uInt8Array[i + 1];
+
+      const isPosition = (byte & POSITION_BIT) === POSITION_BIT;
+      const lastPosition = position;
+      if (isPosition) {
+        position = byte & 0b01111111;
+      }
+
+      if (byte !== reverseByte(~checksum)) {
+        console.warn(`Checksum ${toBinaryString(checksum)} test failed for byte ${toBinaryString(byte)}`);
+        if (isPosition && lastPosition + 1 === position) {
+          console.warm(`Position ${position} appears to be correct, so we trust it.`)
+        } else {
+          continue;
+        }
+      }
+
+      if (position > uInt8Array.length / 4) {
+        console.warn(`Decoded position '${position}', but value seems corrupt.`)
+        console.log(uInt8Array.length);
+        position = -1;
+      }
+
+      if (!isPosition) {
+        let char = dec.decode(new Uint8Array([byte]));
+        if (position < 0) {
+          console.warn(`Decoded '${char}', but character position is unknown.`);
+          continue;
+        }
+        output[position] = char;
+        position = -1;
+      }
+    }
+
+    return [...output.values()].map(v => v ? v : '\ufffd').join('');
+  }
+}
+
+//let enc = new MessageEncoder();
+//let dec = new MessageDecoder();
+
+//let encoded = enc.encode("hello world");
+//console.log(encoded);
+
+// h 0 1 2 3
+// e 4 5 6 7
+// l 8 9 10 11
+// l 12 13 14 15
+// o 16 17 18 19
+// _ 20 21 22 23
+// w 24 25 26 27
+
+// encoded[5] = 0b01001111; // break position checksum
+// encoded[8] = 0b01001111; // break position 2 (l)
+// encoded[27] = 0b01001111; // break char 'w'
+
+// console.log(encoded);
+// console.log(dec.decode(encoded));
\ No newline at end of file
diff --git a/demo/bit-channel-broadcaster.js b/demo/bit-channel-broadcaster.js
new file mode 100644
index 0000000..1446532
--- /dev/null
+++ b/demo/bit-channel-broadcaster.js
@@ -0,0 +1,62 @@
+import { MessageEncoder, BitDataView, toBinaryString } from "./binutils.js";
+
+export class BitChannelBroadcaster extends EventTarget {
+  #pressureGeneratorFn;
+
+  constructor(pressureGeneratorFn) {
+    super();
+    this.#pressureGeneratorFn = pressureGeneratorFn;
+  }
+
+  async sendMessage(msg, calibration) {
+    const enc = new MessageEncoder();
+    const bits = new BitDataView(enc.encode(msg).buffer);
+
+    const timeout = delay => new Promise(resolve => setTimeout(resolve, delay));
+
+    while (true) {
+      let i = 0;
+      let lastDwordIndex = 0;
+      for (let bit of bits) {
+        let byteIndex = Math.floor(i++ / 8);
+        let dwordIndex = byteIndex % 4;
+
+        this.dispatchEvent(new CustomEvent("bitsent", { detail: { value: bit } }));
+
+        let byte = bits.getUint8(byteIndex);
+        let chkByte = bits.getUint8(byteIndex + 1);
+
+        if (dwordIndex !== lastDwordIndex) {
+          if (dwordIndex === 0) {
+            let pos = byte - 128;
+            this.dispatchEvent(new CustomEvent("datachange", {
+              detail: {
+                type: "position",
+                value: pos,
+                data: new Uint8Array([byte, chkByte])
+              }
+            }));
+          } else if (dwordIndex === 2) {
+            const dec = new TextDecoder("utf-8");
+            const ch = dec.decode(bits.buffer.slice(byteIndex, byteIndex + 1));
+            this.dispatchEvent(new CustomEvent("datachange", {
+              detail: {
+                type: "character",
+                value: ch,
+                data: new Uint8Array([byte, chkByte])
+              }
+            }));
+          }
+        }
+        lastDwordIndex = dwordIndex;
+
+        this.#pressureGeneratorFn(bit ? calibration.one : calibration.zero);
+        await timeout(calibration.delay);
+
+        console.log("Sending 'reset'");
+        this.#pressureGeneratorFn(calibration.reset);
+        await timeout(2 * calibration.delay);
+      }
+    }
+  }
+};
\ No newline at end of file
diff --git a/demo/bit-channel-observer.js b/demo/bit-channel-observer.js
new file mode 100644
index 0000000..d004141
--- /dev/null
+++ b/demo/bit-channel-observer.js
@@ -0,0 +1,110 @@
+import { MessageEncoder, MessageDecoder, BitDataView, reverseByte } from "./binutils.js";
+
+export class BitChannelObserver extends EventTarget {
+  #lastTimestamp;
+  #lastState = 1;
+  #millis = [0, 0, 0]; // zero, reset, one
+  #observer;
+
+  #bitIndex = 0;
+  #align = 0;
+  #decoder = new MessageDecoder;
+  #view = new BitDataView(new ArrayBuffer(2, { maxByteLength: 256 }));
+
+  constructor() {
+    super();
+    let lastValue = -1;
+
+    const map = state => {
+      switch(state) {
+        case "nominal":
+        case "fair":
+          return 0;
+        case "serious":
+          return 1;
+        case "critical":
+          return 2;
+      }
+    }
+
+    this.#observer = new PressureObserver(changes => {
+      let value = map(changes[0].state);
+      if (value !== lastValue) {
+        this.#processRawState(value);
+      }
+      lastValue = value;
+    });
+  }
+
+  async observe(runTest = false) {
+    if (!runTest) {
+      this.#lastTimestamp = performance.now();
+      return await this.#observer.observe("cpu");
+    }
+
+    const enc = new MessageEncoder();
+    const data = [...enc.encode("hello world")];
+    // Add some disalignment
+    const brokenData = [23, 19,
+      ...data.slice(0, 8),
+      15, 101,
+      ...data.slice(8)];
+
+    const bits = new BitDataView(new Uint8Array(brokenData).buffer);
+    console.log(bits)
+    for (let bit of bits) {
+      this.#processData(bit);
+    }
+  }
+
+  #processRawState(state) {
+    let start = this.#lastTimestamp;
+    this.#lastTimestamp = performance.now();
+    let time = (this.#lastTimestamp - start);
+
+    this.#millis[this.#lastState] += time;
+    this.#lastState = state;
+
+    if (this.#millis[1] > 6_000) {
+      const toDispatch = this.#millis[0] > this.#millis[2] ? 0 : 1;
+      this.#processData(toDispatch);
+      this.#millis = [0, 0, 0];
+    }
+  }
+
+  #processData(bit) {
+    this.#view.setBit(this.#bitIndex, bit);
+
+    this.dispatchEvent(new CustomEvent("bitreceived", { detail: { value: bit } }));
+
+    if (++this.#bitIndex % 16 !== 0) {
+      return;
+    }
+
+    // We have one word (two bytes) now!
+
+    const byteIndex = this.#view.buffer.byteLength - 2;
+
+    const value = this.#view.getUint8(byteIndex);
+    const checksum = this.#view.getUint8(byteIndex + 1);
+
+    if (value !== reverseByte(~checksum)) {
+      // Checksum for byte doesn't match.
+      // We might have gotten a wrong value, or a value too much or too little.
+      // In most cases this requires around two new bytes to find alignment.
+      console.log(`Misaligned or corrupt data, shifting to find new alignment (${++this.#align})...`);
+      //console.log(toBinaryString(view.getUint8(byteIndex)), toBinaryString(view.getUint8(byteIndex + 1)));
+      this.#bitIndex--;
+      this.#view.shift16Left(1, byteIndex);
+      return;
+    }
+
+    // We have a valid word (two bytes) now!
+
+    const message = this.#decoder.decode(new Uint8Array(this.#view.buffer));
+    this.#view.buffer.resize(this.#view.buffer.byteLength + 2);
+    this.#align = 0;
+
+    this.dispatchEvent(new CustomEvent("messagechange", { detail: { value: message } }));
+  }
+}
\ No newline at end of file
diff --git a/demo/index.html b/demo/index.html
index 28fb588..6dd3e31 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -2,7 +2,7 @@
 <meta charset="UTF-8">
 <html>
   <head>
-    <title>Compute Pressure Demo</title>     
+    <title>Compute Pressure Demo</title>
     <!-- Chrome origin trial token -->
     <meta http-equiv="origin-trial" content="AkQevalWmBczMoMwX9h5kb7teecrlJpkjDvGRQTgVVSmmHdTTHVcwYT42CUi6Z31ejoxx30kaRxVE0vzhcMURQ0AAABZeyJvcmlnaW4iOiJodHRwczovL3czYy5naXRodWIuaW86NDQzIiwiZmVhdHVyZSI6IkNvbXB1dGVQcmVzc3VyZV92MiIsImV4cGlyeSI6MTcwNDQxMjc5OX0=">
   </head>
@@ -10,142 +10,258 @@
     body {
         font-family: Arial, sans-serif;
         margin: 3em 3em;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 16px;
     }
 
+
     #status {
       margin-bottom: 1em;
     }
-    .enabled {
-      color: green;
+
+    .card {
+      display: flex;
+      flex-direction: column;
+      flex: 0 0 640px;
+      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+      transition: 0.3s;
+      padding: 16px;
     }
-    .disabled {
-      color: red;
+
+    .card:hover {
+      box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
     }
 
-    #emoji {
-      font-size: 10em;
+    .card > * {
+      padding: 2px 16px;
     }
 
-    #wrapper {
-      width: 600px;
-      height: 400px;
-      position: relative;
+    .card > .content {
+      flex-grow: 1;
       display: flex;
       align-items: center;
       justify-content: center;
     }
 
-    #wrapper > div {
-      position: absolute;
-      color: white;
-      font-size: 8em;
+    summary {
+      user-select: none;
+      font-size: 2em;
+      margin-block-start: 0.67__qem;
+      margin-block-end: 0.67em;
+      margin-inline-start: 0;
+      margin-inline-end: 0;
+      font-weight: bold;
+    }
+
+    #card-list {
+      display: flex;
+      flex-wrap: wrap;
+    }
+
+    .invisible {
+      opacity: 0;
+    }
+
+    .disabled {
+      color: red;
+    }
+
+    .hidden {
+      display: none;
+    }
+
+    #manual {
+      border: 2px solid #ccc;
+      padding: 6px;
+      display: grid;
+      grid-template-columns: 0.4fr 1fr;
+      grid-template-rows: repeat(4, 1fr);
+      grid-column-gap: 16px;
+      grid-row-gap: 0px;
     }
   </style>
+  <script src="pressure-emoji.js" type="module"></script>
+  <script src="mandelbrot-player.js" type="module"></script>
   <body>
-    <h1>Compute Pressure demo</h1>
-    <div id="status">
-      <label>API Status:</label> <span id="status-text">not available</span>
-    </div>
-    <input type=button id="switch" value="Start"></input>
-    <div></div>
-      <span id="emoji">
-        😴
-      </span>
-      <span id="label">Not observing</span>
-    </div>
+    <div id="status-text" class="disabled hidden">This browser doesn't support the Compute Pressure API</div>
+    <div id="card-list" class="invisible">
+      <details open class="card" draggable="true" data-key="0">
+        <summary>Compute Pressure demo</summary>
+        <div>Press play to have the emoji react to the pressure.</div><br><br>
+        <div class="content">
+          <pressure-emoji></pressure-emoji>
+        </div>
+      </details>
 
-    <br><br>
-    <h1>Mandelbrot simulation</h1>
-    <div>Start to create artificial pressure, add workers to increase further.</div>
-    <br>
-    <div id="wrapper" width="600" height="400">
-      <canvas id="mandel" width="600" height="400"></canvas>
-      <div id="counter">0</div>
+      <details open class="card" draggable="true" data-key="1">
+        <summary>Artificial pressure</summary>
+        <div>Add pressure in parallel, by adding workers.</div><br><br>
+        <div class="content">
+          <mandelbrot-player id="player"></mandelbrot-player>
+        </div>
+      </details>
+
+      <details open class="card" draggable="true" data-key="2">
+        <summary>Side-Channel attack test</summary>
+        <div class="">
+          <div>
+            <input type=button id="calibrate" value="Broadcast"></input> <input id="skip-calibration" type="checkbox">Use manual calibration</input>
+          </div>
+          <br><br>
+          <div id="manual">
+            Delay (milliseconds): <input id="manual-delay" type="number" placeholder="4000">
+            0-value (#workers): <input id="manual-zero" type="number" placeholder="0">
+            reset-value (#workers): <input id="manual-reset" type="number" placeholder="4">
+            1-value (#workers): <input id="manual-one" type="number" placeholder="6">
+          </div>
+          <br><br>
+          <span id="what">Unknown</span>
+          <input id="sent" type="text"><input id="received" type="text">
+          <input id="message" type="text">
+        </div>
+      </details>
     </div>
-    <br>
-    <button id="start">Start simulation</button>
-    <button id="stop">Stop simulation</button>
-    <button id="ww_add">Add worker</button>
-    <button id="ww_sub">Remove worker</button>
   </body>
-  <script src="mandelbrot.js"></script>
   <script type="module">
-    const elem = document.querySelector("#status-text");
-    if (!("PressureObserver" in window)) {
-      elem.innerText = "not available";
-      elem.classList.add("disabled");
-    } else {
-      elem.innerText = "enabled";
-      elem.classList.add("enabled");
-      run();
-    }
+    import { BitDataView, MessageEncoder, MessageDecoder, toBinaryString, reverseByte } from "./binutils.js";
+    import { PressureCalibrator } from "./pressure-calibrator.js";
+    import { BitChannelObserver } from "./bit-channel-observer.js";
+    import { BitChannelBroadcaster } from "./bit-channel-broadcaster.js";
 
-    const emoji = document.getElementById("emoji");
-    const label = document.getElementById("label");
-    const canvas = document.getElementById("mandel");
-    const counter = document.getElementById("counter");
+    const items = document.querySelectorAll(".card");
+    const parent = document.querySelector("#card-list");
 
-    for (let btn of Array.from(document.getElementsByTagName("button"))) {
-      btn.addEventListener("click", () => {
-        const el = document.createElement("div");
-        counter.innerText = worker_count;
-        el.innerText = worker_count;
-        canvas.insertAdjacentElement("afterend", el);
+    const order = sessionStorage.getItem("order");
+    if (order) {
+      const copy = [];
 
-        const animation = [
-          { opacity: 1, transform: 'translateY(0px) translateX(0px) scale(1)' },
-          { opacity: 0, transform: `translateY(-200px) translateX(${Math.random() * 300 -150}px) scale(0.4)` }
-        ];
+      document.querySelectorAll(".card").forEach(item => {
+        copy.push(parent.removeChild(item));
+      })
 
-        const timing = {
-          duration: 600,
-          iterations: 1,
-        }
-        el.animate(animation, timing).finished.then(() => el.remove());
-      });
+      for (let index of order.split(",")) {
+        parent.appendChild(copy[index]);
+      }
     }
+    parent.classList.remove("invisible");
 
-    function run() {
-      const observer = new PressureObserver(changes => {
-        console.log(changes);
-        switch(changes[0].state) {
-          case "nominal":
-            emoji.innerText = "😌";
-            label.innerText = "Nominal pressure";
-            break;
-          case "fair":
-            emoji.innerText = "😄";
-            label.innerText = "Fair pressure";
-            break;
-          case "serious":
-            emoji.innerText = "😖";
-            label.innerText = "Serious pressure";
-            break;
-          case "critical":
-            emoji.innerText = "🥵";
-            label.innerText = "Critical pressure";
-            break;
-          default:
-            emoji.innerText = "😴";
-            label.innerText = "Not observing";
-        }
+    items.forEach(item => {
+      item.addEventListener("dragstart", () => item.classList.add("dragging"));
+      item.addEventListener("dragend", () => {
+        item.classList.remove("dragging")
+        const str = Array.from(document.querySelectorAll(".card")).map(item => item.dataset.key).join(",");
+        sessionStorage.setItem("order", str);
       });
+    });
+
+    function calcDistance(elem, mouseX, mouseY) {
+      return Math.floor(Math.sqrt(
+        Math.pow(mouseX - (elem.offsetLeft+(elem.clientWidth / 2)), 2)
+        + Math.pow(mouseY - (elem.offsetTop+(elem.clientHeight / 2)), 2)));
+    }
+
+    parent.addEventListener("dragenter", e => e.preventDefault());
+    parent.addEventListener("dragover", e => {
+      e.preventDefault();
+
+      const items = document.querySelectorAll(".card");
+      const draggingItem = document.querySelector(".dragging");
+      const dists = Array.from(items).map(item => calcDistance(item, e.clientX, e.clientY));
+      const targetIndex = dists.indexOf(Math.min(...dists));
+      const draggingIndex = Array.from(items).indexOf(draggingItem);
+      const targetItem = items[targetIndex];
+
+      if (draggingIndex > targetIndex) {
+        targetItem.before(draggingItem);
+      } else if (draggingIndex < targetIndex) {
+        targetItem.after(draggingItem);
+      }
+    });
+
+    const delay = 4_000;
+
+    const elements = [
+      document.querySelector("#manual-zero"),
+      document.querySelector("#manual-reset"),
+      document.querySelector("#manual-one"),
+      document.querySelector("#manual-delay")
+    ];
 
-      const btn = document.getElementById("switch");
-      btn.onclick = async ev => {
-        if (ev.target.value == "Start") {
-          ev.target.disabled = true;
-          await observer.observe("cpu");
-          ev.target.value = "Stop";
-          ev.target.disabled = false;
+    elements.forEach(el => {
+      console.log(el.id);
+      const value = sessionStorage.getItem(el.id);
+      el.value = value ? value : el.placeholder;
+      el.onchange = () => sessionStorage.setItem(el.id, el.value);
+    });
+
+    const broadcaster = new BitChannelBroadcaster(player.setWorkerCount.bind(player));
+    broadcaster.addEventListener("bitsent", ev => {
+      const bit = ev.detail.value;
+      document.getElementById("sent").value += `${bit}`;
+    });
+    broadcaster.addEventListener("datachange", ev => {
+      const type = ev.detail.type;
+      const value = ev.detail.value;
+      const data = ev.detail.data;
+
+      if (type === "position") {
+        document.getElementById("what").innerText = `position: ${value} (${toBinaryString(data[0])}) + checksum (${toBinaryString(data[1])})`;
+      } else if (type === "character") {
+        document.getElementById("what").innerText = `character: '${value}' (${toBinaryString(data[0])}) + checksum (${toBinaryString(data[1])})`;
+      }
+    });
+
+    const receiver = new BitChannelObserver;
+    receiver.addEventListener("bitreceived", ev => {
+      const bit = ev.detail.value;
+      console.log("Received", bit);
+      document.getElementById("received").value += `${bit}`;
+    });
+    receiver.addEventListener("messagechange", ev => {
+      const msg = ev.detail.value;
+      document.getElementById("received").value = "";
+      document.getElementById("message").value = msg;
+    });
+
+    const run = () => {
+      const skipCalibrationBtn = document.getElementById("skip-calibration");
+      skipCalibrationBtn.checked = sessionStorage.getItem("skip-calibration") ?? false;
+      skipCalibrationBtn.onclick = ev => {
+        sessionStorage.setItem("skip-calibration", ev.target.checked);
+      }
+
+      const calibrateBtn = document.getElementById("calibrate");
+      calibrateBtn.onclick = async ev => {
+        calibrateBtn.disabled = true;
+        const wakeLock = await navigator.wakeLock.request("screen");
+
+        const calibrator = new PressureCalibrator(player.setWorkerCount.bind(player));
+
+        let calibration;
+        if (!skipCalibrationBtn.checked) {
+          calibration = await calibrator.calibrate()
         } else {
-          observer.unobserve("cpu");
-          ev.target.value = "Start";
-          emoji.innerText = "😴";
-          label.innerText = "Not observing";
+          calibration = {
+            zero: document.querySelector("#manual-zero"),
+            reset: document.querySelector("#manual-reset"),
+            one: document.querySelector("#manual-one"),
+            delay: document.querySelector("#manual-delay"),
+          };
         }
-      };
+        console.log(JSON.stringify(calibration));
 
+        const runTest = new URLSearchParams(document.location.search).has("test");
+        if (!runTest) {
+          broadcaster.sendMessage("hello world", calibration);
+        }
+        receiver.observe(runTest);
+      }
+    }
+
+    if ("PressureObserver" in window) {
+      document.querySelector("#status-text").classList.add("hidden");
+      run();
     }
   </script>
-</html>
+</html>
\ No newline at end of file
diff --git a/demo/mandelbrot-player.js b/demo/mandelbrot-player.js
new file mode 100644
index 0000000..a07b629
--- /dev/null
+++ b/demo/mandelbrot-player.js
@@ -0,0 +1,152 @@
+import { Mandelbrot, Animator } from "./mandelbrot.js";
+import { html, css } from "./wc-utils.js";
+
+const template = document.createElement('template');
+template.innerHTML = html`
+  <div id="wrapper" width="600" height="400">
+    <canvas id="mandel" width="600" height="400"></canvas>
+    <div id="counter">0</div>
+    <div id="controls">
+      <div id="switch">▶️</div>
+      <div>
+        <input id="scale" type="range" min="0.1" max="1" value="1" step="0.1">&nbsp;
+        <span id="scale-value">1.0</span>
+      </div>
+      <div>
+        <div id="plus">➕</div>
+        <div id="minus">➖</div>
+      </div>
+    </div>
+  </div>
+`;
+
+const sheet = css`
+  #wrapper {
+    width: 600px;
+    height: 400px;
+    position: relative;
+    display: flex;
+
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    flex-wrap: nowrap;
+
+    border: 2px solid #ccc;
+    padding: 1px;
+    position: relative;
+  }
+
+  #wrapper > div {
+    position: absolute;
+    color: white;
+    font-size: 8em;
+  }
+
+  #controls > * {
+    display: flex;
+    font-size: xx-large;
+    user-select: none;
+  }
+
+  #controls {
+    display: flex;
+    bottom: 6px;
+    left: 6px;
+    width: calc(100% - 12px);
+    height: 44px;
+    flex-flow: row;
+    justify-content: flex-start;
+    justify-content: space-between;
+    align-items: center;
+  }
+`;
+
+class MandelbrotPlayer extends HTMLElement {
+  #canvas;
+  #animator;
+
+  constructor() {
+    super();
+    this.attachShadow({ 'mode': 'open' });
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+    this.shadowRoot.adoptedStyleSheets = [sheet];
+
+    const toggle = this.shadowRoot.getElementById("switch");
+    const updateToggle = () => {
+      let toSet = (this.workerCount() === 0) ? "▶️" : "⏹️";
+      if (toggle.innerText !== toSet) {
+        toggle.innerText = toSet;
+      }
+    }
+
+    toggle.onclick = () => {
+      if (this.workerCount() > 0) {
+        this.setWorkerCount(0);
+      } else {
+        this.setWorkerCount(1);
+      }
+      updateToggle();
+    }
+
+    this.shadowRoot.getElementById("plus").onclick = () => {
+      this.setWorkerCount(this.workerCount() + 1);
+      updateToggle();
+    }
+    this.shadowRoot.getElementById("minus").onclick = () => {
+      this.setWorkerCount(Math.max(0, this.workerCount() - 1));
+      updateToggle();
+    }
+
+    this.shadowRoot.getElementById("scale").onchange = e => this.setScale(e.target.value);
+  }
+
+  connectedCallback() {
+    this.#canvas = new Mandelbrot(this.shadowRoot.getElementById("mandel"));
+    this.#animator = new Animator(this.#canvas);
+
+    const input = this.shadowRoot.querySelector("#scale");
+    input.value = Number(sessionStorage.getItem(`${input.tagName}@scale`) ?? '');
+    this.setScale(input.value);
+  }
+
+  scale() {
+    return this.#animator.currentScale();
+  }
+
+  setScale(scale) {
+    this.shadowRoot.getElementById("scale-value").innerText = Number(scale).toFixed(1);
+    this.#animator.setScale(scale);
+    const input = this.shadowRoot.querySelector("#scale");
+    sessionStorage.setItem(`${input.tagName}@scale`, scale);
+  }
+
+  workerCount() {
+    return this.#animator.workerCount();
+  }
+
+  setWorkerCount(count) {
+    this.#animator.setWorkerCount(count);
+
+    const canvas = this.shadowRoot.getElementById("mandel");
+    const counter = this.shadowRoot.getElementById("counter");
+
+    const el = document.createElement("div");
+    counter.innerText = this.workerCount();
+    el.innerText = this.workerCount();
+    canvas.insertAdjacentElement("afterend", el);
+
+    const animation = [
+      { opacity: 1, transform: 'translateY(0px) translateX(0px) scale(1)' },
+      { opacity: 0, transform: `translateY(-200px) translateX(${Math.random() * 300 -150}px) scale(0.4)` }
+    ];
+
+    const timing = {
+      duration: 600,
+      iterations: 1,
+    }
+    el.animate(animation, timing).finished.then(() => el.remove());
+  }
+}
+
+customElements.define("mandelbrot-player", MandelbrotPlayer);
\ No newline at end of file
diff --git a/demo/mandelbrot-worker-asm.js b/demo/mandelbrot-worker-asm.js
index 51e64a9..fd89951 100644
--- a/demo/mandelbrot-worker-asm.js
+++ b/demo/mandelbrot-worker-asm.js
@@ -11,18 +11,18 @@ if (typeof Math.fround == 'undefined') {
   var buffer = new ArrayBuffer(16 * 1024 * 1024);
   var image = new Uint32Array(buffer);
   
-  function computeFrame (e) {
+  function computeFrame(e) {
     if (typeof e.data.terminate !== "undefined") {
-      self.close ();
+      self.close();
       return;
     }
     var message = e.data.message;
   
     // Draw the image to the local asm.js buffer.
-    drawMandelbrot (message);
+    drawMandelbrot(message);
   
     // Copy the image for return.
-    var msg_image = new Uint32Array (e.data.buffer);
+    var msg_image = new Uint32Array(e.data.buffer);
     var width     = message.width;
     var height    = message.height;
     for (var i = 0; i < (width * height); i++)
diff --git a/demo/mandelbrot.js b/demo/mandelbrot.js
index fc2bb5a..3986684 100644
--- a/demo/mandelbrot.js
+++ b/demo/mandelbrot.js
@@ -1,334 +1,252 @@
-// Mandelbrot using Webworkers
+// Mandelbrot using Workers
 // Author: Peter Jensen, Intel Corporation
+//         Kenneth Christiansen, Intel Corporation
 
-const $ = id => document.getElementById(id);
+const MAX_ITERATIONS = 100;
 
-// global variables
-var animate        = false;
-var max_iterations = 100;
-var worker_count   = 0;
+export class Mandelbrot {
+  #context;
+  #canvas;
+  #imageData;
 
-// Basic canvas operations
-var canvas = function () {
-  var _ctx;
-  var _width;
-  var _height;
+  width;
+  height;
+  scale = 1;
 
-  var _image_data;
+  constructor(canvasEl, scale = 1) {
+    this.#canvas = canvasEl;
+    this.#context = this.#canvas.getContext("2d");
+    this.width = this.#canvas.width * scale;
+    this.height = this.#canvas.height * scale;
+    this.#imageData = this.#context.createImageData(this.width, this.height);
+  }
 
-  function init(canvas_id) {
-    console.log(canvas_id)
-    const $canvas = $(canvas_id);
-    _ctx = $canvas.getContext("2d");
-    _width = $canvas.width;
-    _height = $canvas.height;
-    _image_data = _ctx.getImageData(0, 0, _width, _height);
+  setScale(scale = 1) {
+    this.scale = scale;
+    this.width = this.#canvas.width * scale;
+    this.height = this.#canvas.height * scale;
+    this.#imageData = this.#context.createImageData(this.width, this.height);
   }
 
-  function clear() {
-    for (var i = 0; i < _image_data.data.length; i = i + 4) {
-      _image_data.data[i] = 0;
-      _image_data.data[i + 1] = 0;
-      _image_data.data[i + 2] = 0;
-      _image_data.data[i + 3] = 255;
+  async drawImageFrame(data) {
+    if (data) {
+      this.#imageData.data.set(data);
+    } else {
+      this.#context.rect(0, 0, this.#canvas.width, this.#canvas.height);
+      this.#context.fillStyle = "black";
+      this.#context.fill();
+      return;
     }
-  }
+    const image = await createImageBitmap(this.#imageData);
 
-  function update() {
-    _ctx.putImageData(_image_data, 0, 0);
+    let x = (this.#canvas.width - this.width) / 2;
+    let y = (this.#canvas.height - this.height) / 2;
+    this.#context.drawImage(image, x, y);
   }
+};
 
-  function updateFromImageData(image_data) {
-    _image_data.data.set(image_data);
-    _ctx.putImageData(_image_data, 0, 0);
+class MandelbrotWorker extends Worker {
+  constructor(bufferSize) {
+    super("mandelbrot-worker-asm.js");
+    this.buffer = new ArrayBuffer(bufferSize);
   }
+};
+
+const mandelbrotWorkers = new class {
+  #workers = [];
+  bufferByteLength = 0;
+
+  addWorker(handler) {
+    const worker = new MandelbrotWorker(this.bufferByteLength);
+    this.#workers.push(worker);
+
+    worker.addEventListener('message', handler, false);
 
-  function setPixel(x, y, rgb) {
-    var index = 4 * (x + _width * y);
-    _image_data.data[index] = rgb[0];
-    _image_data.data[index + 1] = rgb[1];
-    _image_data.data[index + 2] = rgb[2];
-    _image_data.data[index + 3] = 255;
+    return this.#workers.length - 1;
   }
 
-  function colorMap(value) {
-    if (value === max_iterations) {
-      return [0, 0, 0];
-    }
-    var rgb = (value * 0xffff / max) * 0xff;
-    var red = rgb & 0xff;
-    var green = (rgb >> 8) & 0xff;
-    var blue = (rgb >> 16) & 0xff;
-    return [red, green, blue];
+  sendRequest(index, message) {
+    const worker = this.#workers[index];
+    const buffer = this.#workers[index].buffer;
+
+    worker.postMessage ({ message, worker_index: index, buffer }, [buffer]);
   }
 
-  function mapColorAndSetPixel(x, y, value) {
-    var rgb, r, g, b;
-    var index = 4 * (x + _width * y);
-    if (value === max_iterations) {
-      r = 0;
-      g = 0;
-      b = 0;
-    }
-    else {
-      rgb = (value * 0xffff / max_iterations) * 0xff;
-      r = rgb & 0xff;
-      g = (rgb >> 8) & 0xff;
-      b = (rgb >> 16) & 0xff;
+  restoreBuffer(index, buffer) {
+    if (buffer.byteLength != this.bufferByteLength) {
+      buffer = new ArrayBuffer(this.bufferByteLength);
     }
-    _image_data.data[index] = r;
-    _image_data.data[index + 1] = g;
-    _image_data.data[index + 2] = b;
-    _image_data.data[index + 3] = 255;
+    this.#workers[index].buffer = buffer;
   }
 
-  function getWidth() {
-    return _width;
+  terminateLastWorker() {
+    const lastWorker = this.#workers.pop();
+    lastWorker?.postMessage({ terminate: true });
   }
 
-  function getHeight() {
-    return _height;
+  terminateAllWorkers() {
+    while (this.#workers.length) {
+      this.terminateLastWorker();
+    }
   }
 
-  return {
-    init:                init,
-    clear:               clear,
-    update:              update,
-    updateFromImageData: updateFromImageData,
-    setPixel:            setPixel,
-    getWidth:            getWidth,
-    getHeight:           getHeight,
-    colorMap:            colorMap,
-    mapColorAndSetPixel: mapColorAndSetPixel
+  workerCount() {
+    return this.#workers.length;
   }
 
-}();
-
-// Web Worker management
-var mandelbrotWorkers = function () {
-
-  // private
-
-  var mWorkers     = [];
-  var mWorkerCode  = "mandelbrot-worker-asm.js";
-  var mWorkerCount = 0;
+  bufferOf(index) {
+    return this.#workers[index]?.buffer;
+  }
 
-  function mWorker (wworker, handler, bufferSize) {
-    this.wworker = wworker;
-    this.buffer  = new ArrayBuffer (bufferSize);
-    this.handler = handler;
+  workerIsActive(index) {
+    return index < this.#workers.length;
   }
+};
 
-  // public
+export class Animator {
+  scale_start = 1.0;
+  scale_end   = 0.0005;
+  xc_start    = -0.5;
+  yc_start    = 0.0;
+  xc_end      = 0.0;
+  yc_end      = 0.75;
+  steps       = 200.0;
 
-  function addWorker(handler, bufferSize) {
-    var wworker = new Worker (mWorkerCode);
-    var worker  = new mWorker (wworker, handler, bufferSize);
-    mWorkers [mWorkerCount] = worker;
-    wworker.addEventListener('message', handler, false);
-    mWorkerCount++;
-    return mWorkerCount - 1;
-  }
+  frame_count   = 0;  // number of frames painted to the canvas
+  request_count = 0;  // number of frames requested from workers
+  pending_frames = [];
 
-  function sendRequest(worker_index, message) {
-    var w = mWorkers [worker_index].wworker;
-    var b = mWorkers [worker_index].buffer;
-    w.postMessage ({message: message, worker_index: worker_index, buffer: b}, [b]);
-  }
+  constructor(canvas) {
+    this.canvas = canvas;
+    this.canvas.drawImageFrame(null);
+
+    mandelbrotWorkers.bufferByteLength = canvas.width * canvas.height * 4;
 
-  function restoreBuffer(worker_index, buffer) {
-    mWorkers[worker_index].buffer = buffer;
+    this.scale_step  = (this.scale_end - this.scale_start) / this.steps;
+    this.xc_step     = (this.xc_end - this.xc_start) / this.steps;
+    this.yc_step     = (this.yc_end - this.yc_start) / this.steps;
+    this.scale       = this.scale_start;
+    this.xc          = this.xc_start;
+    this.yc          = this.yc_start;
   }
 
-  function terminateLastWorker() {
-    var mw = mWorkers [mWorkerCount-1];
-    mw.wworker.postMessage({terminate:true});
-    mWorkerCount--;
+  // Look for a frame with 'frame_index' in the pending frames
+  findFrame(frame_index) {
+    for (var i = 0, n = this.pending_frames.length; i < n; ++i) {
+      if (this.pending_frames[i].frame_index === frame_index) {
+        return i;
+      }
+    }
+    return false;
   }
 
-  function terminateAllWorkers() {
-    while (mWorkerCount > 0) {
-      terminateLastWorker ();
+  advanceFrame() {
+    if (this.scale < this.scale_end || this.scale > this.scale_start) {
+      this.scale_step = -this.scale_step;
+      this.xc_step = -this.xc_step;
+      this.yc_step = -this.yc_step;
     }
+    this.scale += this.scale_step;
+    this.xc += this.xc_step;
+    this.yc += this.yc_step;
   }
 
-  function numberOfWorkers() {
-    return mWorkerCount;
+  // Send a request to a worker to compute a frame
+  requestFrame(worker_index) {
+    mandelbrotWorkers.sendRequest(worker_index, {
+      request_count:  this.request_count,
+      width:          this.canvas.width,
+      height:         this.canvas.height,
+      xc:             this.xc,
+      yc:             this.yc,
+      scale:          this.scale,
+      max_iterations: MAX_ITERATIONS
+    });
+    this.request_count++;
+    this.advanceFrame();
   }
 
-  function bufferOf(worker_index) {
-    return mWorkers[worker_index].buffer;
+  paintFrame(buffer) {
+    this.canvas.drawImageFrame(buffer);
   }
 
-  function workerIsActive(worker_index) {
-    return worker_index < mWorkerCount;
+  workerCount() {
+    return mandelbrotWorkers.workerCount();
   }
 
-  return {
-    addWorker:           addWorker,
-    sendRequest:         sendRequest,
-    restoreBuffer:       restoreBuffer,
-    terminateLastWorker: terminateLastWorker,
-    terminateAllWorkers: terminateAllWorkers,
-    numberOfWorkers:     numberOfWorkers,
-    bufferOf:            bufferOf,
-    workerIsActive:      workerIsActive
-  };
-
-}();
-
-// The main animation function
-function animateMandelbrot () {
-  var scale_start = 1.0;
-  var scale_end   = 0.0005;
-  var xc_start    = -0.5;
-  var yc_start    = 0.0;
-  var xc_end      = 0.0;
-  var yc_end      = 0.75;
-  var steps       = 200.0;
-  var scale_step  = (scale_end - scale_start)/steps;
-  var xc_step     = (xc_end - xc_start)/steps;
-  var yc_step     = (yc_end - yc_start)/steps;
-  var scale       = scale_start;
-  var xc          = xc_start;
-  var yc          = yc_start;
-  var frame_count   = 0;  // number of frames painted to the canvas
-  var request_count = 0;  // number of frames requested from workers
-  var now         = performance.now();
-  var width       = canvas.getWidth();
-  var height      = canvas.getHeight();
-  var bufferSize  = width*height*4;
-  var pending_frames = [];
+  setWorkerCount(count) {
+    while (mandelbrotWorkers.workerCount() < count) {
+      this.addWorker();
+    }
 
-  // Look for a frame with 'frame_index' in the pending frames
-  function findFrame(frame_index) {
-    for (var i = 0, n = pending_frames.length; i < n; ++i) {
-      if (pending_frames[i].frame_index === frame_index) {
-        return i;
-      }
+    while (mandelbrotWorkers.workerCount() > count) {
+      this.removeWorker();
     }
-    return false;
   }
 
-  // Send a request to a worker to compute a frame
-  function requestFrame(worker_index) {
-    mandelbrotWorkers.sendRequest(
-      worker_index,
-      { request_count:  request_count,
-        width:          width,
-        height:         height,
-        xc:             xc,
-        yc:             yc,
-        scale:          scale,
-        max_iterations: max_iterations});
-    request_count++;
+  setScale(scale = 1) {
+    this.canvas.drawImageFrame(null);
+    this.canvas.setScale(scale);
+    mandelbrotWorkers.bufferByteLength = this.canvas.width * this.canvas.height * 4;
   }
 
-  // Send the pixels to the canvas
-  function paintFrame(buffer) {
-    canvas.updateFromImageData(buffer);
+  currentScale() {
+    return this.canvas.scale;
   }
 
-  // Called when a worker has computed a frame
-  function updateFrame(e) {
-    var worker_index  = e.data.worker_index;
-    var request_count = e.data.message.request_count;
-    mandelbrotWorkers.restoreBuffer (worker_index, e.data.buffer);
+  addWorker() {
+    // Called when a worker has computed a frame
+    const updateFrame = e => {
+      const worker_index  = e.data.worker_index;
+      const request_count = e.data.message.request_count;
 
-    if (!animate) {
-      mandelbrotWorkers.terminateAllWorkers ();
-      return;
-    }
-
-    if (mandelbrotWorkers.numberOfWorkers() < worker_count) {
-      // add another worker
-      var new_worker = mandelbrotWorkers.addWorker (updateFrame, bufferSize);
-      requestFrame (new_worker);
-      advanceFrame ();
-    }
-    if (mandelbrotWorkers.numberOfWorkers() > worker_count) {
-      // terminate a worker
-      mandelbrotWorkers.terminateLastWorker ();
-    }
+      // If not terminated in the meanwhile.
+      if (worker_index < mandelbrotWorkers.workerCount()) {
+        mandelbrotWorkers.restoreBuffer(worker_index, e.data.buffer);
+      }
 
-    if (request_count !== frame_count) {
-      // frame came early, save it for later and do nothing now
-      pending_frames.push ({worker_index: worker_index, frame_index: request_count});
-      return;
-    }
+      if (request_count !== this.frame_count) {
+        // frame came early, save it for later and do nothing now
+        this.pending_frames.push({worker_index: worker_index, frame_index: request_count});
+        return;
+      }
 
-    var buffer = new Uint8ClampedArray (e.data.buffer);
-    paintFrame (buffer);
-    frame_count++
-
-    if (pending_frames.length > 0) {
-      // there are delayed frames queued up.  Process them
-      var frame;
-      while ((frame = findFrame (frame_count)) !== false) {
-        var windex = pending_frames[frame].worker_index;
-        pending_frames.splice (frame, 1); // remove the frame from the pending_frames
-        var buffer = new Uint8ClampedArray (mandelbrotWorkers.bufferOf (windex));
-        paintFrame(buffer);
-        frame_count++;
-        if (mandelbrotWorkers.workerIsActive(windex)) {
-          requestFrame(windex);
-          advanceFrame();
+      // We might have rescaled.
+      if (e.data.buffer.byteLength === mandelbrotWorkers.bufferByteLength) {
+        this.paintFrame(new Uint8ClampedArray(e.data.buffer));
+      }
+      this.frame_count++
+
+      if (this.pending_frames.length > 0) {
+        // there are delayed frames queued up.  Process them
+        let frame;
+        while ((frame = this.findFrame(this.frame_count)) !== false) {
+          var windex = this.pending_frames[frame].worker_index;
+          this.pending_frames.splice(frame, 1); // remove the frame from the pending_frames
+          var buffer = mandelbrotWorkers.bufferOf(windex);
+          if (buffer && buffer.byteLength) { // detached buffers have zero length
+            this.paintFrame(new Uint8ClampedArray(buffer));
+          }
+          this.frame_count++;
+          if (mandelbrotWorkers.workerIsActive(windex)) {
+            this.requestFrame(windex);
+            this.advanceFrame();
+          }
         }
       }
-    }
 
-    if (mandelbrotWorkers.workerIsActive (e.data.worker_index)) {
-      requestFrame (e.data.worker_index);
-      advanceFrame ();
+      if (mandelbrotWorkers.workerIsActive(e.data.worker_index)) {
+        this.requestFrame(e.data.worker_index);
+        this.advanceFrame();
+      }
     }
-  }
 
-  function advanceFrame () {
-    if (scale < scale_end || scale > scale_start) {
-      scale_step = -scale_step;
-      xc_step = -xc_step;
-      yc_step = -yc_step;
-    }
-    scale += scale_step;
-    xc += xc_step;
-    yc += yc_step;
+    const workerIndex = mandelbrotWorkers.addWorker(updateFrame);
+    this.requestFrame(workerIndex);
+    this.advanceFrame();
   }
 
-  mandelbrotWorkers.addWorker (updateFrame, bufferSize);
-  requestFrame(0);
-  advanceFrame();
-}
-
-// input click handlers
-
-function start() {
-  if (animate) {
-    return;
-  }
-  animate = true;
-  worker_count = 1;  // always start with one worker
-  animateMandelbrot ();
-}
-
-function stop() {
-  worker_count = 0;
-  animate = false;
-}
-
-function ww_add() {
-  worker_count++;
-}
-
-function ww_sub() {
-  if (worker_count > 1) {
-    worker_count--;
+  removeWorker() {
+    mandelbrotWorkers.terminateLastWorker();
   }
-}
-
-canvas.init ("mandel");
-canvas.clear ();
-canvas.update ();
-$("start").onclick = start;
-$("stop").onclick = stop;
-$("ww_add").onclick = ww_add;
-$("ww_sub").onclick = ww_sub;
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/demo/pressure-calibrator.js b/demo/pressure-calibrator.js
new file mode 100644
index 0000000..a48640c
--- /dev/null
+++ b/demo/pressure-calibrator.js
@@ -0,0 +1,113 @@
+const MEASURE_TIME = 10_000;
+const DELAY = 4_000;
+
+export class PressureCalibrator {
+  #pressureGeneratorFn;
+  #pressureLevel = 0;
+
+  measurement = [];
+
+  constructor(pressureGeneratorFn) {
+    this.#pressureGeneratorFn = pressureGeneratorFn;
+  }
+
+  #computeBestLevels() {
+    const nominal = { percentage: 0 };
+    const fair = { percentage: 0 };
+    const serious = { percentage: 0 };
+    const critical = { percentage: 0 };
+
+    for (let level in this.measurement) {
+      let percentage = this.measurement[level].nominal;
+      if (percentage > nominal.percentage) {
+        nominal.level = +level;
+        nominal.percentage = percentage;
+      }
+      percentage = this.measurement[level].fair;
+      if (percentage > fair.percentage) {
+        fair.level = +level;
+        fair.percentage = percentage;
+      }
+      percentage = this.measurement[level].serious;
+      if (percentage > serious.percentage) {
+        serious.level = +level;
+        serious.percentage = percentage;
+      }
+      percentage = this.measurement[level].critical;
+      if (percentage > critical.percentage) {
+        critical.level = +level;
+        critical.percentage = percentage;
+      }
+    }
+    console.log("Calculated:")
+    console.table({ nominal, fair, serious, critical });
+    return {
+      zero: 0,
+      reset: serious.level,
+      one: critical.level,
+      delay: DELAY
+    };
+  }
+
+  async calibrate() {
+    let timerId = 0;
+    let measure = [];
+    let lastState;
+    let countDown = 2;
+
+    let now = performance.now();
+
+    const report = state => {
+      let prevState = lastState;
+      lastState = state;
+      if (prevState) {
+        let lastTime = now;
+        now = performance.now();
+
+        if (!this.measurement[this.#pressureLevel]) {
+          this.measurement[this.#pressureLevel] = {
+            "nominal": 0,
+            "fair": 0,
+            "serious": 0,
+            "critical": 0
+          };
+        }
+        this.measurement[this.#pressureLevel][prevState] += ((now - lastTime) / MEASURE_TIME);
+      }
+    }
+
+    const calibrator = new PressureObserver(changes => report(changes[0].state));
+    let done = false;
+
+    const incrPressure = () => {
+      if (lastState) {
+        // Always inherit the latest state as you might see no changes
+        // with a change to a pressure level
+        report(lastState);
+        console.table(this.measurement[this.#pressureLevel]);
+        done = this.measurement[this.#pressureLevel]["critical"] > 0.99;
+        this.#pressureLevel += 1;
+      }
+
+      this.#pressureGeneratorFn(this.#pressureLevel);
+
+      console.log(`Calibrating for ${MEASURE_TIME/1000} sec at pressure level ${this.#pressureLevel}`);
+      return done;
+    }
+
+    incrPressure();
+
+    return new Promise(resolve => {
+      timerId = setInterval(() => {
+        const done = incrPressure();
+        if (done) {
+          clearInterval(timerId);
+          calibrator.disconnect();
+          resolve(this.#computeBestLevels());
+        }
+      }, MEASURE_TIME);
+
+      calibrator.observe("cpu");
+    });
+  }
+};
\ No newline at end of file
diff --git a/demo/pressure-emoji.js b/demo/pressure-emoji.js
new file mode 100644
index 0000000..8630e52
--- /dev/null
+++ b/demo/pressure-emoji.js
@@ -0,0 +1,106 @@
+import { html, css } from "./wc-utils.js";
+
+const template = document.createElement('template');
+template.innerHTML = html`
+  <div id="emoji-display">
+    <span id="emoji">😴</span>
+    <div id="emoji-controls">
+      <div id="switch">▶️</div>
+      <span id="label">Not observing</span>
+    </div>
+  </div>
+`;
+
+const sheet = css`
+  #emoji-display {
+    width: 220px;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    align-items: center;
+    border: 2px solid #ccc;
+    padding: 16px;
+    position: relative;
+  }
+
+  #switch {
+    position: absolute;
+    left: 3px;
+    bottom: 6px;
+    font-size: xx-large;
+    user-select: none;
+  }
+
+  #emoji-controls {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+  }
+
+  #emoji {
+    font-size: 8em;
+    margin-bottom: 16px;
+  }
+`;
+
+class PressureEmoji extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ 'mode': 'open' });
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+    this.shadowRoot.adoptedStyleSheets = [sheet];
+  }
+
+  connectedCallback() {
+    const emoji = this.shadowRoot.getElementById("emoji");
+    const label = this.shadowRoot.getElementById("label");
+
+    const observer = new PressureObserver(changes => {
+      switch(changes[0].state) {
+        case "nominal":
+          emoji.innerText = "😌";
+          label.innerText = "Nominal pressure";
+          break;
+        case "fair":
+          emoji.innerText = "😄";
+          label.innerText = "Fair pressure";
+          break;
+        case "serious":
+          emoji.innerText = "😖";
+          label.innerText = "Serious pressure";
+          break;
+        case "critical":
+          emoji.innerText = "🥵";
+          label.innerText = "Critical pressure";
+          break;
+        default:
+          emoji.innerText = "😴";
+          label.innerText = "Not observing";
+      }
+    });
+
+    const btn = this.shadowRoot.getElementById("switch");
+    btn.active = false;
+    btn.disabled = false;
+    btn.onclick = async ev => {
+      if (ev.target.disabled) {
+        return;
+      }
+      if (btn.active == false) {
+        btn.disabled = true;
+        await observer.observe("cpu");
+        btn.active = true;
+        btn.innerText = "⏹️";
+        btn.disabled = false;
+      } else {
+        observer.unobserve("cpu");
+        btn.active = false;
+        btn.innerText = "▶️";
+        emoji.innerText = "😴";
+        label.innerText = "Not observing";
+      }
+    };
+  }
+}
+customElements.define("pressure-emoji", PressureEmoji);
\ No newline at end of file
diff --git a/demo/wc-utils.js b/demo/wc-utils.js
new file mode 100644
index 0000000..090b78d
--- /dev/null
+++ b/demo/wc-utils.js
@@ -0,0 +1,15 @@
+// Dummy functions so that we can get syntax highlighting with common VSCode extensions
+
+export function html(strings, ...values) {
+  return values.reduce((finalString, value, index) => {
+    return `${finalString}${value}${strings[index + 1]}`
+  }, strings[0])
+}
+
+export function css(strings, ...values) {
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(values.reduce((finalString, value, index) => {
+    return `${finalString}${value}${strings[index + 1]}`
+  }, strings[0]));
+  return sheet;
+}
\ No newline at end of file