RCWeb Viewer App

The RCWeb Viewer App (app/v) is designed to be remotely controlled by other applications within the RCWeb ecosystem. It demonstrates the Asymmetric Pattern, where one or more controlling applications send commands (JavaScript) to one or more viewer applications operating in the same virtual room.

Icon

Screenshot

What it does

• Wait for Input: The viewer app primarily idles on a welcome screen and waits to receive JavaScript payloads sent over WebSockets by a remote control app (e.g., the Controls app app/c, or other compatible apps like gallery or chat).
• Display Room Info & QR Code: The app displays the current room ID and generates a QR code. Scanning this QR code points a mobile device to the corresponding remote control interface for this room, allowing immediate interaction.
• Background Execution: When JavaScript commands are received, the viewer evaluates them. This capability allows controllers to push colors, images, videos, websites, custom HTML, and other instructions to the screen in real-time.
• State Feedback: The viewer tracks network connection statuses and client counts within the room, visually monitoring the number of connected users.
• Many-to-Many Control: Supports multiple viewer apps and multiple control apps. Any control app can manage all viewer apps in the same virtual room simultaneously.

How it works

The core logic of the Viewer app is managed inside script.js, which relies heavily on the core comms.js library to receive and acknowledge remote executions.

• Initialization Sequence: The app loads its styling and calls rc.showWelcome() after a short delay (preventing WebSocket connection spam on excessive refreshes). It sets up UI widgets like the room title, QR code (rc.renderQrCode()), a fullscreen toggle, and network status UI, before connecting to the server (rc.connect()).
• Remote Execution & Acknowledgment: When instructions are evaluated by the viewer, it triggers callback functions defined in script.js:
  • rc.onUpdateSuccess(js): Invoked by comms.js after successfully evaluating the remote JavaScript. It sends an acknowledgment message back to the controlling client so the controller knows the command succeeded.
  • rc.onUpdateError(error): Invoked if an error occurs while evaluating the remote script. It sends the error message back to the controller client for remote debugging purposes.
• Burn-in Protection: During idle periods where no updates are received, rc.onNoUpdate() is triggered, which in turn calls rc.screensaver(). This slightly shifts the position of the main informational overlay at random intervals to prevent screen burn-in on unattended displays.
• Dynamic Updates: Uses rc.onUpdateNetworkStatus and rc.onUpdateClients to update the user interface dynamically as the connection state changes and as new clients join or leave the room.

Launch RCWeb App