# eInk Dashboard Builder

A monochrome, monospaced, dark mode themed static site generator for eInk displays. Build custom dashboards with configurable widgets.

## Features

- **Monochrome Theme**: Black background, white text, optimized for eInk displays
- **Monospaced Font**: Uses Courier New for consistent, readable display
- **Widget System**: Modular components with standardized JSON settings
- **Built-in Widgets**: Crypto price tracker, clock, and more
- **Export/Import**: Save and load dashboard configurations

## Getting Started

### Install Dependencies

```bash
npm install
```

### Run Development Server

```bash
npm run dev
```

Visit `http://localhost:4321` to start building your dashboard.

### Build Static Site

```bash
npm run build
```

The static site will be generated in the `dist/` directory, ready to deploy.

## Creating Custom Widgets

### 1. Define Your Widget Component

Create a new file in `src/widgets/YourWidget.tsx`:

```tsx
import { Component } from 'solid-js';
import type { WidgetSettings, WidgetSchema } from '../types/widget';

interface YourWidgetProps {
  settings: WidgetSettings;
}

export const YourWidget: Component<YourWidgetProps> = (props) => {
  return (
    <div style={{
      border: '1px solid var(--border)',
      padding: '1rem'
    }}>
      <div>{props.settings.title}</div>
      {/* Your widget content */}
    </div>
  );
};

export const yourWidgetSchema: WidgetSchema = {
  name: 'Your Widget',
  description: 'Description of what your widget does',
  settingsSchema: {
    title: {
      type: 'string',
      label: 'Title',
      default: 'My Widget',
      required: true
    },
    refreshRate: {
      type: 'number',
      label: 'Refresh Rate (ms)',
      default: 60000
    },
    enabled: {
      type: 'boolean',
      label: 'Enabled',
      default: true
    }
  }
};
```

### 2. Register Your Widget

Add your widget to `src/widgets/registry.ts`:

```tsx
import { YourWidget, yourWidgetSchema } from './YourWidget';

export const widgetRegistry: Record<string, WidgetComponent> = {
  // ... existing widgets
  'your-widget': {
    schema: yourWidgetSchema,
    Component: YourWidget
  }
};
```

### 3. Widget Settings Schema

Each widget defines its settings using a standardized schema. Supported types:

- **string**: Text input
- **number**: Numeric input
- **boolean**: Checkbox
- **select**: Dropdown with predefined options

Example schema:

```tsx
settingsSchema: {
  symbol: {
    type: 'string',
    label: 'Crypto Symbol',
    default: 'BTC',
    required: true
  },
  interval: {
    type: 'number',
    label: 'Update Interval (ms)',
    default: 60000
  },
  showIcon: {
    type: 'boolean',
    label: 'Show Icon',
    default: true
  },
  theme: {
    type: 'select',
    label: 'Theme',
    default: 'dark',
    options: ['dark', 'light']
  }
}
```

## Built-in Widgets

### Crypto Price

Displays cryptocurrency prices from CoinGecko API.

**Settings:**
- `symbol`: Crypto symbol (BTC, ETH, etc.)
- `currency`: Display currency (USD, EUR, etc.)
- `refreshInterval`: Update frequency in milliseconds
- `showLabel`: Show/hide label
- `label`: Custom label text

### Clock

Displays current time and date.

**Settings:**
- `format`: Time format (12h/24h)
- `showDate`: Show/hide date
- `showLabel`: Show/hide label
- `label`: Custom label text

## Exporting Your Dashboard

1. Configure your widgets in the builder
2. Click "Export Config" to download a JSON file
3. Deploy the static site to your eInk display
4. Import the config later to restore your layout

## Theme Customization

The app uses CSS custom properties for theming. Edit `src/layouts/Layout.astro`:

```css
:root {
  --bg: #000000;      /* Background color */
  --fg: #ffffff;      /* Foreground/text color */
  --border: #ffffff;  /* Border color */
  --gray: #808080;    /* Muted text color */
}
```

## Project Structure

```
dashMaker/
├── src/
│   ├── components/          # Reusable UI components
│   │   ├── Dashboard.tsx    # Main dashboard interface
│   │   ├── WidgetRenderer.tsx
│   │   └── WidgetConfigurator.tsx
│   ├── layouts/
│   │   └── Layout.astro     # Base HTML layout with theme
│   ├── pages/
│   │   └── index.astro      # Main page
│   ├── types/
│   │   └── widget.ts        # TypeScript interfaces
│   └── widgets/             # Widget components
│       ├── registry.ts      # Widget registry
│       ├── CryptoPrice.tsx
│       └── Clock.tsx
├── astro.config.mjs
├── package.json
└── tsconfig.json
```

## Technologies

- **Astro**: Static site generator
- **Solid.js**: Reactive UI components
- **TypeScript**: Type safety
- **CoinGecko API**: Cryptocurrency data

## License

ISC