Water relay: browser-only setup

Use Cloudflare Workers Free. This setup uses a Worker and a small D1 database. No terminal, GitHub, or paid plan is required.

Upload the site. In your existing Cloudflare Pages project, create a new production deployment and upload water-windows-pages-v6-relay.zip.
Create the database. In the Cloudflare dashboard, open Storage & databases → D1 SQL database → Create database. Name it water-windows. Leave the location at its default and create it.
Create the relay Worker. Open Workers & Pages → Create application → Start with Hello World (then Get started if shown). Name it water-relay and select Deploy.
Connect the database. Open the new water-relay Worker. Go to Bindings → Add binding → D1 database. Set the variable name to DB, exactly uppercase. Select the water-windows database and add the binding.
Add the relay code. In the Worker, select Edit code. Replace all the starter code in the main JavaScript file with the code below. Click Deploy. The database table is created automatically; no SQL commands are needed.
Check the relay. Open the Worker's production https://water-relay.…workers.dev address. It should display Water relay ready inside a short JSON message. Copy that address, not the Cloudflare dashboard or preview address.
Connect the iPads. Open your Pages site on both. Paste the same Worker address into Relay address. On the first iPad choose Create room. On the second, enter the 10-character room code and choose Join room. Both should say Both iPads connected. Plug the clicker into the first iPad and enter window view on both.

Worker code

/* Paste this entire file into the Cloudflare Worker editor. Bind D1 as DB. */
function sampleSegment(s, now) {
  const t = Math.max(0, (now - s.at) / 1000);
  const d = s.ramp;
  if (!d) return { depth: s.depth + s.target * t, velocity: s.target };
  const u = Math.min(1, t / d);
  const ease = u * u * (3 - 2 * u);
  const integral = d * (u ** 3 - 0.5 * u ** 4);
  const depth = s.depth + s.velocity * Math.min(t, d)
    + (s.target - s.velocity) * integral + s.target * Math.max(0, t - d);
  return { depth, velocity: s.velocity + (s.target - s.velocity) * ease };
}
function sampleMotion(state, now) {
  const segment = [...state.segments].reverse().find(s => s.at <= now) || state.segments[0];
  return sampleSegment(segment, now);
}
function samplePassage(state, now) {
  const segment = [...state.segments].reverse().find(s => s.at <= now) || state.segments[0];
  return segment.exitDistance ? sampleSegment(segment, now).depth / segment.exitDistance : 0;
}
function initialState(now = Date.now()) {
  return { revision: 0, epoch: now, speed: 0.55, ease: 1.2, exitSeconds: 2.5, exitDistance: null, mode: 'idle',
    segments: [{ at: now, depth: 0, velocity: 0, target: 0, ramp: 0 }] };
}
function transition(state, action, at, options = {}) {
  const next = structuredClone(state);
  if (action === 'settings') {
    next.speed = Math.min(1.5, Math.max(0.1, Number(options.speed) || 0.55));
    next.ease = Math.min(4, Math.max(0.2, Number(options.ease) || 1.2));
    next.exitSeconds = Math.min(10, Math.max(1, Number(options.exitSeconds) || 2.5));
    next.revision++;
    return next;
  }
  if (!['descend', 'stop', 'reset'].includes(action)) throw new Error('Unknown command');
  // Repeated start/stop cues are idempotent, including after the ramp finishes.
  const last = next.segments.at(-1);
  if (action === 'descend' && last.target > 0) return next;
  if (action === 'stop' && last.target === 0) return next;
  const current = sampleMotion(next, at);
  if (action === 'reset') next.exitDistance = null;
  if (action === 'descend' && next.exitDistance == null) {
    // Match the chosen uninterrupted exit time, including acceleration. Freeze
    // this scale for the ride so later tuning cannot make the building jump.
    next.exitDistance = sampleSegment({ at: 0, depth: 0, velocity: 0,
      target: next.speed, ramp: next.ease }, next.exitSeconds * 1000).depth;
  }
  const segment = action === 'reset'
    ? { at, depth: 0, velocity: 0, target: 0, ramp: 0 }
    : { at, ...current, target: action === 'descend' ? next.speed : 0, ramp: next.ease };
  segment.exitDistance = next.exitDistance;
  next.segments = next.segments.filter(s => s.at < at).slice(-15).concat(segment);
  next.mode = action === 'descend' ? 'descending' : action === 'reset' ? 'idle' : 'stopped';
  next.revision++;
  return next;
}

const SCHEMA=`CREATE TABLE IF NOT EXISTS rooms (
 id TEXT PRIMARY KEY, owner TEXT NOT NULL, state TEXT NOT NULL,
 expires INTEGER NOT NULL, controller_seen INTEGER NOT NULL,
 viewer_seen INTEGER NOT NULL DEFAULT 0, command_id TEXT NOT NULL DEFAULT ''
)`;
let schemaReady;
const cleanCode=s=>String(s||'').toUpperCase().replace(/[ -]/g,'');
const validCode=s=>/^[A-HJ-NP-Z2-9]{10}$/.test(s);
const token=()=>crypto.randomUUID().replaceAll('-','')+crypto.randomUUID().replaceAll('-','');
async function hash(s){return [...new Uint8Array(await crypto.subtle.digest('SHA-256',new TextEncoder().encode(s)))].map(x=>x.toString(16).padStart(2,'0')).join('');}
function roomCode(){const chars='ABCDEFGHJKLMNPQRSTUVWXYZ23456789';return [...crypto.getRandomValues(new Uint8Array(10))].map(n=>chars[n%32]).join('');}
function json(data,status=200){return new Response(JSON.stringify(data),{status,headers:{'Content-Type':'application/json','Cache-Control':'no-store','Access-Control-Allow-Origin':'*','Referrer-Policy':'no-referrer'}});}
function payload(row){return {state:JSON.parse(row.state),serverTime:Date.now(),controllerSeen:row.controller_seen,viewerSeen:row.viewer_seen,expires:row.expires};}
export default {
 async fetch(request,env){
  try{
   if(request.method==='OPTIONS')return new Response(null,{status:204,headers:{'Access-Control-Allow-Origin':'*','Access-Control-Allow-Methods':'GET, POST, OPTIONS','Access-Control-Allow-Headers':'Content-Type','Access-Control-Max-Age':'86400'}});
   if(!env.DB)return json({error:'Add a D1 database binding named DB to this Worker, then deploy.'},503);
   if(!schemaReady)schemaReady=env.DB.prepare(SCHEMA).run().catch(e=>{schemaReady=null;throw e;});
   await schemaReady;
   const url=new URL(request.url),now=Date.now();
   if(url.pathname==='/'||url.pathname==='/health')return json({message:'Water relay ready',version:6});
   if(request.method==='POST'){
    if(Number(request.headers.get('content-length')||0)>8192)return json({error:'Request too large.'},413);
    const text=await request.text();if(text.length>8192)return json({error:'Request too large.'},413);
    let input;try{input=JSON.parse(text);}catch{return json({error:'Invalid request.'},400);}
    if(url.pathname==='/create'){
     const id=roomCode(),key=token(),owner=await hash(key);
     let state=transition(initialState(now),'settings',now,input.settings||{});
     await env.DB.prepare('DELETE FROM rooms WHERE expires < ?').bind(now).run();
     await env.DB.prepare('INSERT INTO rooms(id,owner,state,expires,controller_seen,viewer_seen) VALUES(?,?,?,?,?,0)').bind(id,owner,JSON.stringify(state),now+24*3600000,now).run();
     return json({room:id,key,state,serverTime:Date.now(),controllerSeen:now,viewerSeen:0,expires:now+24*3600000});
    }
    const id=cleanCode(input.room);
    if(!validCode(id))return json({error:'Enter the complete 10-character room code.'},400);
    const row=await env.DB.prepare('SELECT * FROM rooms WHERE id=? AND expires>?').bind(id,now).first();
    if(!row)return json({error:'Room not found or ended. Create a new room on the first iPad.'},404);
    if(typeof input.key!=='string'||input.key.length>128||await hash(input.key)!==row.owner)return json({error:'Only the first iPad can control this room.'},403);
    if(url.pathname==='/heartbeat'){
     await env.DB.prepare('UPDATE rooms SET controller_seen=? WHERE id=?').bind(now,id).run();row.controller_seen=now;return json(payload(row));
    }
    if(url.pathname!=='/command')return json({error:'Not found.'},404);
    if(!['descend','stop','reset','settings','end'].includes(input.action))return json({error:'Unknown command.'},400);
    if(typeof input.id!=='string'||input.id.length>80)return json({error:'Missing command identifier.'},400);
    if(row.command_id===input.id)return json(payload(row));
    if(input.action==='end'){
     await env.DB.prepare('DELETE FROM rooms WHERE id=? AND owner=?').bind(id,row.owner).run();return json({ended:true,serverTime:Date.now()});
    }
    if(input.action==='descend'&&now-row.viewer_seen>12000)return json({error:'Second iPad is not connected. Start it before descending.'},409);
    // Future timestamp lets both devices receive the cue before it starts.
    // Never retry an old cue automatically after an internet outage.
    const old=JSON.parse(row.state);
    const next=transition(old,input.action,now+1000,input.options||{});
    const result=await env.DB.prepare('UPDATE rooms SET state=?,controller_seen=?,command_id=? WHERE id=? AND state=?').bind(JSON.stringify(next),now,input.id,id,row.state).run();
    if(result.meta.changes!==1)return json({error:'Another cue arrived at the same time. Press the button again.'},409);
    row.state=JSON.stringify(next);row.controller_seen=now;return json(payload(row));
   }
   if(request.method==='GET'&&url.pathname==='/state'){
    const id=cleanCode(url.searchParams.get('room'));
    if(!validCode(id))return json({error:'Enter the complete 10-character room code.'},400);
    let row=await env.DB.prepare('SELECT * FROM rooms WHERE id=? AND expires>?').bind(id,now).first();
    if(!row)return json({error:'Room not found or ended. Create a new room on the first iPad.'},404);
    if(url.searchParams.get('seen')==='1'){
     await env.DB.prepare('UPDATE rooms SET viewer_seen=? WHERE id=?').bind(now,id).run();row.viewer_seen=now;
    }
    return json(payload(row));
   }
   return json({error:'Not found.'},404);
  }catch(error){console.error('Relay error',error.message);return json({error:'Relay unavailable. Check the DB binding and Cloudflare limits, then retry.'},503);}
 }
};

During the event

Next / Down descends. Previous / Up stops smoothly. Reset jumps back without reversing. Cues, including Reset, are scheduled about 1 second after the server receives them, so both windows can act together. Slow internet can add delay. Rehearse the timing with the elevator.

Global animation settings are on the first iPad and apply to both. Hold the top-left corner for 1.2 seconds to return to setup. Keep Safari in the foreground and the iPads charged. The site requests a screen wake lock; verify that neither device locks during your rehearsal. At the end, select End session on the first iPad and Disconnect on the second.

Four hours and cost

One pair should fit the current free quotas for four hours. The first iPad contacts the relay every 2 seconds and the second every 0.5 seconds: at most about 36,000 routine Worker requests over four hours, plus each cue and occasional retries. A short timed-out request reduces the polling rate; it does not create a request burst. Database presence updates use about 10,800 writes, plus cues. Animation stays on the iPads; no video is streamed.

Workers Free currently includes 100,000 requests per day per account. D1 Free includes 5 million rows read and 100,000 rows written per day. Other Workers, earlier testing, extra browser tabs, or additional iPads use the same allowances. Check Cloudflare usage before the event and close unused tabs. Stay on the Free plan: reaching its limits stops requests rather than buying extra usage.

Rooms last 24 hours, so there is no four-hour session timeout. This is not a guarantee of uninterrupted operation: Wi-Fi in the elevator, battery, iPad temperature, screen locking, browser behavior, Cloudflare availability, and account quotas can interrupt it. A local two-window test and accelerated four-hour movement checks passed. A real four-hour test on your iPads and Emerson's network has not been performed.

If it does not connect

Binding error: confirm the database binding is named DB on the Worker, then deploy.
Relay timed out: open the Worker address directly on the affected iPad and check internet coverage.
Room not found: create a new room and join its new code.
Connection lost during a ride: descent pauses locally after loss is detected. Reconnection restores the shared position and may jump. Reset both windows before the next ride. Missed button presses are not replayed later.
Free quota reached: requests stop until the allowance resets. Do not leave spare test windows connected.

Eduroam no longer needs to allow the iPads to communicate directly. Both iPads still need ordinary HTTPS access to your Worker throughout the ride. Keep the room code private; anyone with it can join as a viewer. Only the first iPad holds the separate control credential.

Cloudflare references, checked October 20, 2026: dashboard setup, Workers limits, D1 pricing.