Daisy Grid Web Component

A customizable web component for displaying real-time information boards similar to those found in public transit systems. Built with Svelte and TypeScript.

Features

• Real-time updates via WebSocket connection
• Customizable display colors and text
• Support for multiple transit lines (U1-U9)
• Optional delete functionality for equipment entries
• Responsive grid layout
• Smooth scrolling text animation for long messages

Installation

npm install @boemjay/daisy-grid

Usage

1. Import the required CSS and JavaScript files in your HTML:

<link rel="stylesheet" href="/build/daisy-grid.css" />
<script src="/build/daisy-grid.js"></script>

2. Add the web component to your HTML:

<daisy-grid
  id="daisy-grid"
  websocketUrl="http://localhost:3000"
  websocketApiKey="your-api-key"
></daisy-grid>

3. Configure the equipment data and optional delete callback:

const grid = document.getElementById("daisy-grid");
grid.equipments = [
  {
    id: "unique-id",
    name: "Station Name",
    line: "U7",
    platform: 1,
  },
];
grid.onDelete = (equipment) => console.log("deleted", equipment);

Properties

| Property | Type | Description | | --------------- | -------- | --------------------------------------- | | websocketUrl | string | URL for the WebSocket server | | websocketApiKey | string | API key for authentication | | equipments | Array | Array of equipment objects | | onDelete | Function | Optional callback for delete operations |

Equipment Object Structure

interface Equipment {
  id: string;
  name: string;
  line: "U1" | "U2" | "U3" | "U4" | "U5" | "U6" | "U7" | "U8" | "U9";
  platform?: number;
}

Styling

The component uses Tailwind CSS for styling. You can customize the container or single display-items using:

.daisy-grid-container {
  max-width: 1490px;
  margin: 0 auto;
}
.daisy-item {
  min-width: 500px;
  max-width: 900px;
}

Development

1. Clone the repository
2. Install dependencies:

npm install

3. Start development server:

npm run dev

4. Build for production:

npm run build

License

MIT