Revel Digital Client SDK - Vanilla JavaScript Demo

A modern, interactive demonstration of the Revel Digital Client SDK integration using vanilla JavaScript. This project showcases how to build a Revel Digital gadget using plain JavaScript with a beautiful dark-themed UI built with Tailwind CSS.

⚠️ Important: This is a Template Repository

This repository serves as a template for creating Revel Digital gadgets with vanilla JavaScript. To use this template:

• Fork this repository to your own GitHub account, or
• Download and copy the source code to a new repository location

Do not submit pull requests or make changes to this source repository. This template is maintained as a reference implementation and direct modifications are not accepted.

🚀 Features

• Complete SDK Integration: Demonstrates all major Revel Digital Client SDK methods
• Interactive UI: Clean, modern dark theme with real-time data display
• Live Data Fetching: Retrieve device information, timezone data, and SDK details
• Action Testing: Test SDK methods like sendCommand, finish, track, and timeEvent
• Responsive Design: Mobile-friendly layout using Tailwind CSS
• Modern Build Pipeline: Parcel bundler with PostCSS and Tailwind integration

📋 What This Demo Shows

This demo displays and interacts with the following Revel Digital SDK features:

Device Information

• Device time and timezone details
• Device key and language settings
• Device dimensions (width/height)
• Device details and configuration

SDK Capabilities

• SDK version information
• Preview mode detection
• Command mapping
• Content duration settings

Interactive Actions

• Send Command: Test command sending functionality
• Finish: Signal content completion
• Track Event: Log custom events with data
• Time Event: Start timing custom events

🛠️ Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm or yarn package manager

Installation

1. Fork or copy this repository:

   • Fork this repository on GitHub to your own account, or
   • Download the source code and create a new repository

   Note: Do not clone this repository directly if you plan to make modifications, as this is a template repository.

2. Navigate to your new repository:

cd your-new-gadget-project

3. Install dependencies:

npm install

3. Start the development server:

npm start

The demo will be available at http://localhost:1234

Building for Production

To build the project for deployment:

npm run build

To build specifically for Revel Digital gadget deployment:

npm run build:gadget

📁 Project Structure

├── src/
│   ├── index.html          # Main HTML file with dark-themed UI
│   ├── app.js              # Core JavaScript with SDK integration
│   └── styles.css          # Tailwind CSS imports
├── gadget.yaml             # Revel Digital gadget configuration
├── package.json            # Dependencies and build scripts
├── postcss.config.js       # PostCSS configuration for Tailwind
├── tailwind.config.js      # Tailwind CSS configuration
└── README.md              # This file

🔧 Key Technologies

• Vanilla JavaScript: Pure JavaScript without frameworks
• Revel Digital Client SDK: Official SDK for Revel Digital integration
• Tailwind CSS: Utility-first CSS framework for styling
• Parcel: Zero-configuration build tool
• PostCSS: CSS post-processor for Tailwind integration

🎨 UI Components

The demo features a modern dark theme with:

• Gradient Background: Sophisticated gray gradient backdrop
• Interactive Cards: Information displayed in styled containers
• Real-time Updates: Refresh button to reload all SDK data
• Action Buttons: Color-coded buttons for different SDK methods
• Responsive Layout: Adapts to different screen sizes

📖 SDK Usage Examples

The demo showcases these Revel Digital Client SDK methods:

import { createPlayerClient } from '@reveldigital/client-sdk';

const client = createPlayerClient();

// Get device information
const deviceTime = await client.getDeviceTime();
const deviceKey = await client.getDeviceKey();
const device = await client.getDevice();

// Interact with the platform
client.sendCommand('TestCommand', 'TestArg');
client.track('TestEvent', { foo: 'bar' });
client.timeEvent('TestTimedEvent');
client.finish();

🚀 Deployment

This project is configured for deployment to GitHub Pages and can be easily integrated as a Revel Digital gadget:

1. The built files are optimized for web deployment
2. The gadget.yaml configuration defines the gadget properties
3. Use npm run build:gadget to prepare for gadget deployment

🤝 Contributing

This is a template repository - please do not submit pull requests or issues to this repository. Instead:

• Fork this repository to create your own gadget projects
• Use this as a reference implementation for Revel Digital gadget development
• Copy the code to your own projects and modify as needed
• Share your own gadget implementations in separate repositories

If you discover bugs in this template or have suggestions for improvements, please create an issue in the repository, but understand that this template is maintained as a stable reference and changes will be carefully considered.

📄 License

ISC License - See the package.json for details.

🔗 Related Resources

• Revel Digital
• Client SDK Documentation
• Gadget Development
• Tailwind CSS Documentation

---

Note: This demo is designed to run within the Revel Digital platform environment where the Client SDK APIs are available. Some features may not work when running outside of the Revel Digital context.