Viewer (v) RCWeb Implementation

This document explains how the Viewer application leverages RCWeb technology to act as a remotely controlled display for other devices.

1. Role in the Asymmetric Pattern

The Viewer app (v) implements the Asymmetric (Sender/Viewer) pattern. It serves as the primary shared screen that receives and executes JavaScript commands sent by one or more Control apps (c).

• Entry Point: When loaded, the app initializes its UI, generates a unique room-specific QR code, and establishes a connection to the RCWeb server.
• Dynamic QR Code: A QR code is generated using qrcode.js pointing to /c/?r=${rc.room}, allowing players or controllers to join the same virtual room instantly.
• Passive Listening: The viewer generally does not initiate commands; it "exposes" itself to the room, waiting for remote instructions to change its DOM, play media, or redirect.
• Execution Acknowledgment: To provide a closed-loop feedback system, the viewer overrides rc.onUpdateSuccess and rc.onUpdateError to send status updates back to the controller.

2. Key Implementation Features

A. QR Code Generation

The viewer calculates the absolute URL for the control interface and renders it as a QR code:

rc.controls = "https://" + window.location.host + "/c/?r=" + rc.room;
rc.renderQrCode = function () {
    rc.qrcode = new QRCode(rc.roomQrCode, {
        text: rc.controls,
        // ... dimensions and level ...
    });
};

B. Screensaver Logic

To prevent screen burn-in on unattended large displays, the viewer uses the rc.onNoUpdate callback to trigger a subtle movement of the UI:

rc.onNoUpdate = function () {
    // Moves the room info overlay slightly at random intervals
    rc.screensaver();
};

C. Feedback Loop to Controller

When a remote command is executed, the viewer notifies the controller (targeted as "c") of the result:

rc.onUpdateSuccess = function (js) {
    rc.send("rc.onViewUpdateSuccess('" + rc.client + "');", "c");
};

rc.onUpdateError = function (error) {
    var escapedError = error.message.replaceAll("'", "\\'").replaceAll("\n", "\\n");
    rc.send("rc.onViewUpdateError('" + escapedError + "', '" + rc.client + "');", "c");
};

Summary

The Viewer app is a foundational example of a "target" in the RCWeb ecosystem. It demonstrates how to build highly responsive, interactive displays that can be manipulated in real-time by any authorized device in the same room, all while using standard web technologies and minimal backend logic.