Table of Contents
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.
Project Links
- GitHub Repository
https://github.com/mobbyg/Community-Bulletin-TV
- Live Demo (GitHub Pages)
https://mobbyg.github.io/Community-Bulletin-TV/
Core Concepts
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.
Key Features
- 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)
File Layout (Typical)
/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
bulletin.json Overview
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": { ... }
}
Band Properties
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
Macros allow dynamic replacement inside band and ticker text.
Date / Time
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.
Spacing Macros
Built-in spacing helpers:
- {space} β single space
- {tab} β three spaces
- {linef} β line feed
These help with alignment and formatting in fixed-width layouts.
Playback Behavior
- 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
Editor Notes
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.
Planned / Future Upgrades
- 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
Personal Notes
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

