Community Bulletin TV

Community Bulletin TV is a retro-inspired, web-based bulletin board system designed to emulate classic cable-access and community information channels from the 1980s–1990s.

It uses modern HTML, CSS, and JavaScript, but keeps the visual and behavioral feel of old-school TV bulletin systems: fixed-resolution screens, rotating pages, scrolling tickers, blinking text, and date/time overlays.

• GitHub Repository

https://github.com/mobbyg/Community-Bulletin-TV

• Live Demo (GitHub Pages)

https://mobbyg.github.io/Community-Bulletin-TV/

Community Bulletin TV is driven entirely by a single JSON file:

• Screens rotate automatically
• Each screen contains one or more “bands”
• Bands render text, colors, alignment, blink state, and size
• A global ticker scrolls continuously along the bottom
• Macros allow live date/time and spacing substitutions

No database is required for playback.

• Multiple rotating screens
• Band-based layout with fixed pixel heights
• Global scrolling ticker
• Date & time macros (strftime-style)
• Spacing macros for formatting text
• 4:3 and 16:9 aspect ratio support
• Fullscreen playback (ESC to exit)
• CRT-style scanlines overlay
• JSON-based configuration
• Editor UI for building bulletins (local / server-based)

/community-bulletin-tv
├── play.html              # Playback screen
├── editor.html            # Bulletin editor UI
├── css/
│   └── bulletin.css
├── js/
│   ├── bulletin.js        # Playback logic
│   └── editor.js          # Editor logic
├── data/
│   └── bulletin.json      # Main configuration
└── save.php               # Optional server-side save endpoint

The system is controlled via a JSON file with the following major sections:

• settings
• screens
• ticker
• macros

Example structure:

{
  "settings": {
    "aspectRatio": "4:3",
    "screenDuration": 10
  },
  "screens": [ ... ],
  "ticker": { ... },
  "macros": { ... }
}

Each screen contains one or more bands with properties such as:

• text
• height (pixels)
• bgColor / textColor
• fontSize (small, medium, large, xlarge)
• align (left, center, right)
• blink (true/false)

Bands stack vertically from top to bottom.

Macros allow dynamic replacement inside band and ticker text.

Macros are defined in JSON using strftime-style format strings:

"macros": {
  "date": "%Y-%m-%d",
  "time": "%H:%M:%S",
  "datetime": "%Y-%m-%d %H:%M:%S"
}

Usage in text:

• {date}
• {time}
• {datetime}

These update live every second.

Built-in spacing helpers:

• {space} → single space
• {tab} → three spaces
• {linef} → line feed

These help with alignment and formatting in fixed-width layouts.

• Screens rotate every N seconds (screenDuration × 1000 ms)
• Ticker scrolls continuously using requestAnimationFrame
• Date/time macros refresh once per second
• Ticker does NOT reset when screens change
• Aspect ratio scaling preserves original resolution feel

The editor allows:

• Creating screens
• Adding, removing, and reordering bands
• Editing band properties
• Editing global ticker text and speed
• Saving JSON via save.php (server required)

GitHub Pages demo is playback-only.

• Macro registry system (extensible macros)
• Additional date/time tokens
• Per-screen ticker overrides
• Screen transition effects
• Editor UI cleanup & grouping
• Preset templates
• Read-only “demo mode” toggle
• Optional audio support
• Raspberry Pi kiosk mode guide

This project is ideal for:

• Community access TV
• Retrocomputing displays
• Museum exhibits
• Hacker spaces
• LAN party signage
• Always-on TVs

The design intentionally favors predictability, legibility, and nostalgia over modern responsiveness.

Last updated: DATE