Glance

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

npm install

Run Development Server

npm run dev

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

Build Static Site

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:

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:

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:

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:

: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