A Star Wars–themed Imperial holographic HUD for the Corsair Xeneon Edge secondary display. Built as a single self-contained HTML file served via GitHub Pages and loaded through iCUE's iFrame widget.
![Layout: Video | Calendar + Weather | Sensors]
- Live clock — hours and minutes, updates every second
- Galactic Standard Calendar — real-world date displayed as Star Wars year/month/day
- Galactic Standard Year (GSY) — calculated relative to the Battle of Yavin (May 25, 1977)
- Seconds progress bar along the bottom of the calendar panel
- Live local weather — temperature, feels like, humidity, wind speed, conditions, 4-hour forecast (Open-Meteo API, no key required)
- Holographic Death Star video — left panel, VP9 WebM with true alpha transparency (black background removed via FFmpeg chromakey)
- CPU & GPU gauges — load % and temperature, animated arc gauges updating every 2 seconds (via LibreHardwareMonitor)
- Aurebesh decoder animation — every 30 seconds all text scrambles into Star Wars alien script, holds, then decodes back to English
- Fully fluid layout — uses
vw/vhunits, adapts to any resolution iCUE provides - Imperial HUD aesthetic — dark blue, cyan glow, scanlines, star field, corner brackets
┌─────────────────────────────────────────────────────────────┐
│ LEFT (33%) │ CENTER (33%) │ RIGHT (33%) │
│ │ ┌───────────────┐ │ CPU LOAD │
│ Death Star │ │ CLOCK + DATE │ │ CPU TEMP │
│ Hologram Video │ ├───────────────┤ │ ────────── │
│ (transparent bg) │ │ WEATHER │ │ GPU LOAD │
│ │ └───────────────┘ │ GPU TEMP │
└─────────────────────────────────────────────────────────────┘
- Download: https://github.com/LibreHardwareMonitor/LibreHardwareMonitor/releases
- Must be run as Administrator
- Enable:
Options → Web Server → Run Web Server - Enable:
Options → Run On Windows Startup - Enable:
Options → Start Minimized - Serves sensor data at:
http://localhost:8085/data.json
- Free at https://github.com
- Repository must be Public for GitHub Pages on the free tier
- Use the iFrame widget
- Point it at your GitHub Pages URL
- Create a public GitHub repository (e.g.
Xeneon-Edge-Customs) - Upload
starwars_index.htmlto the repo - Go to Settings → Pages → Source → Deploy from branch → main
- Your widget will be live at:
https://<your-username>.github.io/<repo-name>/starwars_index.html
- Open iCUE → click your Xeneon Edge device
- Go to Widgets
- Drag the iFrame widget onto the display
- Set size to XL
- Paste your GitHub Pages URL into the iFrame field
- Press Enter
- Extract and run
LibreHardwareMonitor.exeas Administrator Options → Web Server→ check Run Web ServerOptions→ check Run On Windows Startup and Start Minimized- Verify at: http://localhost:8085/data.json
The widget is served over HTTPS (GitHub Pages) but LibreHardwareMonitor runs on HTTP (localhost). Browsers block this by default. To fix it in Chrome:
- Go to:
chrome://flags/#unsafely-treat-insecure-origin-as-secure - Add
http://localhost:8085to the field - Set the flag to Enabled
- Click Relaunch
Alternative: Open the HTML file directly in Chrome (
Ctrl+O) instead of via GitHub Pages. Localfile://URLs don't have mixed content restrictions.
- Pure HTML/CSS/JavaScript — no frameworks, no build tools
- All assets embedded as base64 (font + video) — fully self-contained
- Fluid layout via
vw/vhandclamp()— no fixed pixel sizes
| Data | Source | Auth |
|---|---|---|
| Weather | Open-Meteo | None |
| Reverse geocoding | Nominatim / OpenStreetMap | None |
| CPU/GPU sensors | LibreHardwareMonitor localhost:8085 |
None |
| Clock / date | JavaScript Date |
None |
| Orbitron font | Google Fonts | None |
The original MP4 had a black background. FFmpeg was used to remove it:
ffmpeg -i input.mp4 \
-vf "colorkey=0x000000:0.35:0.1" \
-c:v libvpx-vp9 -pix_fmt yuva420p \
-b:v 800k -crf 20 -an \
output_alpha.webmThe Aurebesh OTF font is injected into a dynamically created <style> tag as a base64 data URI. document.fonts.load() is used to confirm the font is parsed before the decoder animation fires.
Every 30 seconds, all text elements scramble character-by-character into Aurebesh then back to English.
| Config | Value | Description |
|---|---|---|
HOLD |
30000 ms |
How long each mode (English/Aurebesh) is held |
STEP |
45 ms |
Delay between each character reveal |
Xeneon-Edge-Customs/
├── starwars_index.html # Main widget (self-contained, ~8MB)
├── README.md # This file
| Asset | Format | Purpose |
|---|---|---|
Aurebesh.otf |
base64 OTF | Star Wars alien script font |
hologram_alpha.webm |
base64 VP9 WebM | Death Star video with alpha transparency |
Widget is blank/white in iCUE
- Visit the GitHub Pages URL in Chrome first to confirm it loads
- GitHub Pages can take ~2 minutes after a commit to go live
- Make sure your repo is set to Public
Sensors show "SENSOR ARRAY OFFLINE"
- Check LibreHardwareMonitor is running (look in system tray)
- Confirm
Options → Web Serveris checked - Visit
http://localhost:8085/data.jsonin Chrome to verify it's serving - Apply the Chrome mixed content flag fix above
Aurebesh font not showing
- The font is embedded — no internet needed
- Wait the full 30 seconds for the first cycle to fire
- If testing locally, open directly in Chrome (
Ctrl+O)
Weather stuck on "ACQUIRING SENSOR DATA"
- Allow location access when the browser prompts
- Requires internet access to reach open-meteo.com
- iCUE's embedded browser may not support geolocation — test in Chrome first
Video not playing
- Video is embedded in the file — no external file needed
- Muted autoplay is required and should be allowed by default in Chromium
- Claude — AI assistant (Anthropic)
- Open-Meteo — weather API
- LibreHardwareMonitor — sensor data
- Aurebesh font — Star Wars script
- FFmpeg — video alpha channel processing
- GitHub Pages — free static hosting
May the Force be with you. 🚀