Rework the about page.

[darylc]

Idea for someone to work on.

We see people in the zoom room get really confused with the two different upgrade options in the about page.

Some random ideas:

• Moving statistics off of the about page?
• Move some of the info on the about page to Advanced UI mode
• Simplify layout and language used on the about page
• Add easy to understand verbiage around FPPOS v's FPP Upgrades

Suggest mockups of a proposed page would be worth reviewing before implementation.

[agent462]

Here are my thoughts on approach to do this. I would completely separate these into two different pages eventually deprecating the about.php page. Super basic Spec document with screenshots using common bootstrap design principles.

About Spec Document

Overview

These mockups are a proposal for redesign of the FPP about.php page into two separate pages:

1. FPP Stats → About becomes "FPP Stats" - high level system data dashboard
2. Upgrade Page → Clearer, seperate more user-friendly upgrade experience with better guidance

Uses existing dependencies and common Bootstrap design patterns and resuses many of the existing js functions.

Both mockups maintain full functionality of existing pages while improving visual design and user guidance.

Can be developed in tandem to the existing about.php page and onlyu deperecating when fully cutover.

---

1. About Page -> FPP Stats - stats.php

Transform the About page from a simple version info display into a system data dashboard that helps users understand their FPP system's health at a glance.

Key Features

1.1 System Monitoring Gauges (Top Row)

Three circular SVG gauges displaying real-time metrics:

Gauge	Data Source	Thresholds
CPU Usage	get_server_cpu_usage()	Green: 0-60%, Yellow: 60-80%, Red: >80%
Memory Usage	get_server_memory_usage()	Green: 0-60%, Yellow: 60-80%, Red: >80%
Temperature	Sensor data via lastStatusJSON.sensors	Green: 0-60°C, Yellow: 60-80°C, Red: >80°C

Notes:

• Metrics update dynamically
• Respects user's temperature unit preference (°C/°F)
• CPU might be visually noisey on BBB/PB. Possibly disable state changes for BBB/PB.

1.2 Disk Utilization (Full Width Second Row)

Horizontal progress bars showing disk usage:

• Root Partition: Always shown
• Media Partition: Shown only if on separate device

Features:

• Device names displayed (e.g., mmcblk0p2)
• Used/Free/Total space displayed
• Color-coded thresholds (green/yellow/red)

1.3 Disk Space Warning Banner

Prominent alert when disk usage exceeds threshold (mockup shows 92%):

• Breakdown by file type (Sequences, Audio, Videos, Logs, Uploads, Backups)
• Visual bars showing relative usage
• Direct links to File Manager sections
• Dismissible via close button but does not save state so the user is reminded visiting the page

Trigger Conditions:

• Show when any partition exceeds 85% usage
• Priority display at top of page

1.4 System Uptime Card

Visual uptime display with:

• Numeric counters: Days : Hours : Minutes : Seconds
• System started timestamp below
• Clean, dashboard-style presentation

1.5 Load Average Card

Three-bar visualization of system load:

• 1-minute, 5-minute, 15-minute averages
• Progress bars normalized to CPU core count
• Help popover explaining load average interpretation
• Shows number of CPU cores available

Help Popover Content:

• Explains what load average means
• How to interpret values based on core count
• Color coding explanation

1.6 Version Information Card

Consolidated version details:

• FPP Version
• Platform (with Variant)
• FPP OS Build
• OS Version
• Hardware Serial (if available)
• Kernel Version
• System Boot Time
• fppd Uptime
• Local/Remote Git Versions

Data Content:

• Current informational data from about page
• Less prominent on the page, below the data cards

1.7 Player Statistics Card

Clickable counts linking to respective pages:

• Schedules → scheduler.php
• Playlists → playlists.php
• Sequences → filemanager.php
• Audio Files → filemanager.php#tab-audio
• Videos → filemanager.php#tab-video
• Command Presets → commandPresets.php
• Effects → filemanager.php#tab-effects
• Scripts → filemanager.php#tab-scripts

Data Content:

• Existing data from the about page

1.8 Donation Card

• Conditionally shown (hidden for verified capes)
• PayPal donation button

Decision:

• Should this still exist on this page
• There is a separate menu button for donating
• No real harm in displaying but doesn't fit overall
• Could be merged with Version Information Card

---

2. Upgrade Page - upgradeui.php

Purpose

Simplify the upgrade decision by clearly differentiating between:

1. FPP Software Update - Quick, safe, routine
2. OS Upgrade - Major, larger changes, not needed as often

Key Features

2.1 Version Header

Banner showing:

• Current FPP version
• Git commit hash
• Status badge: "Update Available" or "Up to Date"

2.2 Update Banners

Ability to display various banners guiding users what to do.

These would not show all at the same time. Display is for mockup reasons only. Conditional decision to decide what banner to show when both upgrades exist.

FPP Update Banner (Green):

• Shown when git remote version differs from local
• Encourages user to update

OS Upgrade Banner (Yellow/Warning):

• Shown when major version behind (e.g., v8 → v9 available)
• Emphasizes importance but doesn't alarm
• Explains benefits of OS upgrade

Trigger Conditions:

• OS Upgrade Banner should be conditional on no FPP Updates available
• Do not show any banners when nothing to do

2.3 Main Upgrade Cards

Card 1: Update FPP Software (Green)

• Badge: "Recommended" (When action exists)
• Info Boxes:
  • "When to use" - bullet list of scenarios
  • "What it does" - explanation with time estimate
• Version Indicator: Shows commit progression (e.g., v9.1-23-g8a2f4c1 → v9.1-47-gf5e61fa)
  • Clickable: Entire indicator is clickable to preview changes
  • Shows search icon and "X commits behind" label
  • Hover effect with subtle lift and color intensification
  • Calls GetGitOriginLog() to show modal with pending commits
• Actions:
  • "Update FPP Now" button (primary)
    Checkbox Options (Advanced Menu):
  • Source selector (github.com)

Card 2: Upgrade Operating System (Yellow)

• Badge: "Recommended" (When no FPP software action exists)
• Info Boxes:
  • "When to use" - major version jumps, OS issues
  • "What it does" - full OS replacement, time estimate, backup warning
• Version Indicators: (similar to FPP Update card)
  • OS upgrade available: Shows FPP-v8.0-Pi → FPP-v9.0-Pi with "Major version available"
  • OS up to date: Shows checkmark with current OS version
  • Uses warning/yellow color scheme instead of success/green
• Actions:
  • OS image dropdown selector
  • "Upgrade OS" button (warning color)
  • "Download Only" button
• Checkbox Options (Advanced Menu):
  • Show All Platforms
  • Show Legacy OS
  • Keep /opt/fpp (Dev only)

2.4 Advanced UI Cards Row

Revert to Previous Commit

• Links to changelog.php
• For rolling back problematic updates
• Badge: "Advanced"
  Decision:
• This could be reimplemented as a modal

2.5 Comparison Table

Side-by-side comparison of Update vs OS Upgrade:

Aspect	Update FPP	Upgrade OS
Time	2-5 min	15-30+ min
Reboot	No	Yes
Settings	Kept	Backup*
Media Files	Kept	Kept
Risk Level	Low	Medium
OS Security Patches	No	Yes
Major Version Jump	No	Yes
New Hardware Support	No	Yes

2.6 FAQ Accordion

Examples of expandable Q&A sections:

1. Which upgrade should I choose?
2. When should I upgrade the OS?
3. What's the difference between FPP and OS versions?
4. Can I roll back an upgrade?
5. Are my playlists and sequences safe?

---

3. Dependencies

External Libraries (Already in FPP)

• Bootstrap 5 (grid, buttons, progress bars, popovers)
• Font Awesome (icons)
• jQuery (DOM manipulation, AJAX)

Other UI examples

[patdelaney]

I really like this design.

[agent462]

Here is an example of integrating the health check into the FPP Stats Page

[OnlineDynamic]

My thoughts:

• keep the version info on the update pages
• avoid pages where user needs to scroll
• use the fpp.css styles rather than default bootstrap
• condense down the amount of white space
• I like the explanations of fpp v OS update...

Think this is something we bring in with FPP 10...

In next dev meeting we a discussion on the donate functionality which is a bit too lost in this design