top of page
Search

CyberPi: How I TURNED a Raspberry Pi Into a Cyberpunk Dashboard

ree

Welcome to the full guide on how I built my custom CyberPi dashboard — a Raspberry Pi-powered, ultra-wide HUD-inspired display packed with live system stats, Spotify integration, YouTube subscriber tracking, and a scrolling tech news feed — all with a clean cyberpunk aesthetic.


This blog post is meant to guide you through the first process so you can build your own version, or use mine as a jumping-off point.


What You’ll Need:


Flash and First Boot

1. Flash Raspberry Pi OS 64-bit

  • Use Raspberry Pi Imager

  • Choose: Raspberry Pi OS (64-bit) with Desktop

  • Click the gear icon (Advanced Options):

    • Set up Wi-Fi (optional)

    • Enable SSH (optional)

    • Set your user and password

2. Write to SD Card

  • Click Write, then insert the SD card into your Pi

3. Connect the Eleclab 8" Screen and Boot

  • Connect HDMI and power

  • Boot into Raspberry Pi OS

  • Expect a stretched display for now — we'll fix that in the first phase


4. Update Everything

sudo apt update && sudo apt full-upgrade -y


Phase 1: Display Setup (The Hard Part)

So you've got your Pi set up and connected to your ultra-wide screen... and the image looks stretched, pixelated, or downright broken.

Been there.

This step took me the better part of a day to figure out because there’s almost no documentation out there for weird resolutions like 1600x480. But don't worry — I've done the trial-and-error so you don’t have to.

Let’s fix this in a clean, reliable way.


Step 1: Switch from Wayland to X11

Recent versions of Raspberry Pi OS use Wayland as the display server by default. The problem? xrandr doesn’t work properly under Wayland — which we need for this resolution fix.


Let’s switch to X11:

  1. Open terminal and run: sudo raspi-config

  2. Navigate to: mathematicaCopyEditAdvanced Options → Wayland

  3. Select No to disable Wayland and use X11 instead.

  4. Reboot your Pi: bashCopyEditsudo reboot

  5. After reboot, confirm you’re using X11: echo $XDG_SESSION_TYPE ✅ If it returns x11, you’re good to go!


Step 2: Set the Correct Resolution with xrandr

First, install the necessary tool:

sudo apt install x11-xserver-utils

Then apply your custom resolution (this example uses 1280x480 @ 60Hz — adjust as needed):

xrandr --newmode "1280x480_60.00" 49.00 1280 1328 1456 1632 480 483 493 510 -HSync +Vsyncxrandr --addmode HDMI-1 "1280x480_60.00"xrandr --output HDMI-1 --mode "1280x480_60.00"

If your display snaps to the correct resolution — awesome! Now let’s make it stick after reboot.


Step 3: Create a Resolution Script

  1. Make a new directory for screen layouts: mkdir -p ~/.screenlayout

  2. Create the resolution script: nano ~/.screenlayout/set-resolution.sh

  3. Paste the following into the file: #!/bin/bash xrandr --newmode "1280x480_60.00" 49.00 1280 1328 1456 1632 480 483 493 510 -HSync +Vsync xrandr --addmode HDMI-1 "1280x480_60.00" xrandr --output HDMI-1 --mode "1280x480_60.00" echo "Ran resolution script on $(date)" >> ~/resolution.log

  4. Save and exit:

    • Press CTRL + X

    • Then Y, then Enter

  5. Make the script executable: chmod +x ~/.screenlayout/set-resolution.sh


Step 4: Run the Script Automatically on Login

Now we’ll tell the system to run this script every time you log in.

  1. Create or edit the .xsessionrc file: nano ~/.xsessionrc

  2. Paste this: #!/bin/bash ~/.screenlayout/set-resolution.sh

  3. Save and exit:

    • CTRL + X, then Y, then Enter

  4. Make it executable: chmod +x ~/.xsessionrc


Step 5: Reboot and Celebrate

Now reboot your Pi:

sudo reboot

After logging in, your screen should automatically switch to 1280×480 (or whatever resolution you chose) within a few seconds.

To confirm it ran correctly:

cat ~/resolution.log

You should see something like:

pgsqlCopyEditRan resolution script on [current date]

Boom — success!


If you run into any issues along the way, I recommend opening up ChatGPT, copying and pasting the instructions from this guide, and letting the AI help troubleshoot your specific setup. While this workaround worked perfectly for my system, it might not behave the same on every Pi or display — but ChatGPT can walk you through adapting the steps for your build.


Now your display will boot at the correct resolution every single time — no more terminal commands, no more stretching, and no more mystery.


This fix alone made the whole dashboard experience feel 10x better, and it’s what sets things up for everything we build in the next phase.


Phase 2: Building the Cyberpunk Dashboard

With the display fixed and running in a proper 1600x480 resolution, we can finally bring the CyberPi Dashboard to life.


The layout is broken into modular quadrants, each with its own function — and each one built using a mix of Flask, HTML/CSS, JavaScript, and sometimes third-party APIs like Spotify and YouTube.


Here’s a breakdown of what each panel does and how we built it:


Top Left: CPU Usage Graph


What it does:

  • Displays live CPU usage over time using a smooth animated line graph.


Tools Used:

  • Flask for serving live CPU data via a JSON API

  • psutil (Python module) for reading CPU stats

  • Chart.js (JavaScript) to render a real-time line graph in the browser


How we built it:

  • A background Python thread collects CPU data every second

  • Frontend uses fetch() to grab that data and update the chart every few seconds


LEFT: RAM Usage Graph


What it does:

  • Same idea as CPU, but monitors and graphs live RAM usage.


Tools Used:

  • psutil (again) for reading memory usage

  • Chart.js for the animated graph

  • CSS to keep visual style consistent with the cyberpunk theme


How we built it:

  • Nearly identical to CPU, just pulling from psutil.virtual_memory() instead


Right: System Temperature Gauge


What it does:

  • Shows your Pi’s current system temperature as a glowing circular gauge.


Tools Used:

  • vcgencmd measure_temp to get temp data

  • A Flask API endpoint to serve it

  • Chart.js doughnut chart to represent temperature visually


How we built it:

  • Backend script reads the current temp every few seconds

  • The value is fed to a doughnut chart that animates in a HUD-style format

  • We fine-tuned the position and font for a clean fit inside the panel


top right: YouTube Subscriber Counter


What it does:

  • Shows your current subscriber count for your YouTube channel


Tools Used:

  • YouTube Data API v3

  • Flask to query and serve the sub count

  • JavaScript fetch + HTML panel for display


How we built it:

  • Created a project in Google Developer Console

  • Got an API key and used it to fetch channel data

  • Added a refresh interval to check for updated count every few minutes


Bottom Left: Spotify Now Playing


What it does:

  • Displays currently playing song, artist, and album art from Spotify


Tools Used:

  • Spotify Web API

  • Flask backend + spotipy library for handling OAuth and requests

  • JavaScript + CSS for styling and auto-refreshing the UI


How we built it:

  • Set up a Spotify Developer App to get API credentials

  • User logs in once (via Chromium) to authenticate

  • Python fetches track/artist/album data and sends it to the frontend

  • Album art is displayed dynamically, and the entire module updates every few seconds


Bottom Right: RSS News Feed


What it does:

  • Scrolls through tech + audio news headlines from your favorite sources


Tools Used:

  • Flask + feedparser to pull and parse RSS feeds

  • Custom JavaScript scroll animation

  • Neon styling to match the dashboard's cyberpunk aesthetic


How we built it:

  • Pulled from multiple sources (e.g. eWeek, HiFi News, etc.)

  • Displayed in a vertically scrolling ticker

  • We slowed the scroll and styled it to feel like a HUD feed


Aesthetic Touches (Everywhere)


Each quadrant includes:

  • Neon-colored panel headers with animated "status dots"

  • Glow effects using text-shadow and box-shadow

  • A subtle animated grid overlay for the entire screen

  • Uniform spacing, modular layout using CSS Grid


Phase 3: Finishing Touches

How to Create a Desktop Shortcut to Launch Your Dashboard:

nano ~/Desktop/StartDashboard.desktop

Paste the following (replace YOUR_USERNAME with your actual Pi username — you can check it with whoami):

[Desktop Entry]Name=Start Cyberpunk DashboardComment=Launches the Flask dashboard server and opens ChromiumExec=bash -c "/usr/bin/python3 /home/YOUR_USERNAME/dashboard/app.py & sleep 2 && chromium-browser --kiosk http://localhost:5000"Icon=utilities-terminalTerminal=falseType=Application

Save and exit:

  • Press CTRL + X

  • Then Y, then Enter

Make it executable:

chmod +x ~/Desktop/StartDashboard.desktop


Step 3: Allow Launching (if prompted)

If the icon looks grayed out or has a gear symbol:

  1. Go to your desktop

  2. Right-click on the Start Cyberpunk Dashboard icon

  3. Click “Allow Launching”

You’ll now have a desktop icon you can double-click to launch the dashboard/


Final Polish and Easter Eggs

We added some nice touches to make the dashboard feel alive:

Shutdown button for closing the dashboard cleanly

Animated grid background (gently moving to simulate a HUD)

Scanline overlay (subtle CRT-style vibe)

Pulsing status dots on each panel title

Panel title alignment for consistency

Color-coded neon text (teal, green, red depending on module)

System temperature gauge instead of plain text

Scrolling RSS feed with source labels and spacing


Final Thoughts

At this point, you’ve got:

  • A fully functional, API-powered dashboard

  • A custom UI that looks like it belongs in a sci-fi film

  • And a Raspberry Pi that boots straight into the experience like a command center

This was more than just a build — it became a weekend-long cyberpunk project, something that challenged me and rewarded me when it all finally clicked.

If you’ve built your own version of this, I’d love to see it — tag me, send it over, or drop it in the comments.

Welcome to the CyberPi

 
 
 

Comments

bottom of page