Background Images & Thumbnails
Managing desktop backgrounds in Display Options
Overview
The Display Options window in guideXOS provides a user-friendly interface for managing
desktop backgrounds. It features a thumbnail gallery system that automatically loads and displays
background images from the /Backgrounds directory.
Key Features
- ✓ Automatic thumbnail generation - Creates thumbnails on-the-fly
- ✓ Thumbnail caching - Saves generated thumbnails as
*_thumb.png - ✓ Multiple formats - Supports PNG, JPG, JPEG, and BMP files
- ✓ Grid gallery view - Displays 128×128px thumbnails in scrollable grid
- ✓ Aspect ratio preservation - Thumbnails maintain original proportions
- ✓ Instant preview - Click thumbnail to apply background immediately
- ✓ Custom file selection - Browse for backgrounds outside the gallery
File Structure
Background images and their thumbnails are stored in the /Backgrounds directory
within the guideXOS ramdisk filesystem.
Directory Layout
/Backgrounds/
├── wallpaper1.png # Full-size background image
├── wallpaper1_thumb.png # Auto-generated thumbnail (128×128)
├── abstract2.jpg # Full-size JPEG background
├── abstract2_thumb.png # Auto-generated thumbnail
├── nature3.bmp # Full-size BMP background
├── nature3_thumb.png # Auto-generated thumbnail
├── custom.jpeg # Full-size JPEG background
└── custom_thumb.png # Auto-generated thumbnail
File Naming Convention
| Pattern | Example | Description |
|---|---|---|
*.png |
mountains.png |
PNG format background image |
*.jpg |
sunset.jpg |
JPEG format background image |
*.jpeg |
ocean.jpeg |
JPEG format (alternate extension) |
*.bmp |
desktop.bmp |
BMP format background image |
*_thumb.png |
mountains_thumb.png |
Auto-generated thumbnail (always PNG) |
File extensions are case-insensitive. .PNG, .png, .JPG,
and .jpg are all recognized. Thumbnail files can use any case for the suffix
(_thumb.png or _thumb.PNG).
Thumbnail System
guideXOS uses an intelligent thumbnail caching system to optimize performance. Thumbnails are generated automatically and saved for future use.
Thumbnail Generation Process
- Scan Directory: Display Options scans
/Backgroundsfor image files - Skip Thumbnails: Files ending with
_thumb.pngare ignored - Check Cache: Looks for existing thumbnail (e.g.,
image_thumb.png) - Load or Generate:
- If cached thumbnail exists → Load it directly
- If not found → Generate from full image
- Resize: Scale image to fit within 128×128px while preserving aspect ratio
- Display: Show thumbnail in gallery grid
Thumbnail Specifications
| Property | Value | Notes |
|---|---|---|
| Size | 128 × 128 pixels | Maximum dimensions (aspect ratio preserved) |
| Format | PNG | Always saved as PNG regardless of source format |
| Naming | [basename]_thumb.png |
Example: wallpaper.jpg → wallpaper_thumb.png |
| Aspect Fit | Maintain proportions | Scaled to fit within 128×128, not stretched |
| Location | Same directory as source | Stored in /Backgrounds alongside original |
Aspect Ratio Calculation
Thumbnails preserve the original image's aspect ratio:
// Landscape image (width > height)
if (width > height) {
thumbHeight = (height × 128) / width
thumbWidth = 128
}
// Portrait image (height > width)
else if (height > width) {
thumbWidth = (width × 128) / height
thumbHeight = 128
}
// Square image (width == height)
else {
thumbWidth = 128
thumbHeight = 128
}
Example Thumbnail Sizes
| Original Image | Aspect Ratio | Thumbnail Size |
|---|---|---|
| 1920 × 1080 | 16:9 (landscape) | 128 × 72 |
| 1080 × 1920 | 9:16 (portrait) | 72 × 128 |
| 1024 × 1024 | 1:1 (square) | 128 × 128 |
| 2560 × 1440 | 16:9 (landscape) | 128 × 72 |
| 1200 × 1600 | 3:4 (portrait) | 96 × 128 |
Adding Background Images
There are two ways to add background images to guideXOS:
Method 1: Add to Ramdisk (Build Time)
This method includes backgrounds in the ISO image.
Step 1: Place Images in Ramdisk
# Windows
copy mybackground.png Ramdisk\Backgrounds\
copy another.jpg Ramdisk\Backgrounds\
# Linux/Mac
cp mybackground.png Ramdisk/Backgrounds/
cp another.jpg Ramdisk/Backgrounds/
Step 2: (Optional) Pre-generate Thumbnails
You can manually create thumbnails to speed up first load:
# Using ImageMagick
convert mybackground.png -resize 128x128 mybackground_thumb.png
# Using Python/PIL
from PIL import Image
img = Image.open('mybackground.png')
img.thumbnail((128, 128))
img.save('mybackground_thumb.png')
Step 3: Rebuild ISO
# Windows
ForceRebuildISO.bat
# Linux/Mac
./rebuild.sh
Method 2: Select Custom File (Runtime)
Use the Display Options interface to browse for images:
- Open Display Options from the Start menu
- Click the "Backgrounds" tab
- Click the "Select Background" button at the bottom
- Browse to
/Backgroundsor any other directory - Select your image file
- Background is applied immediately
guideXOS uses an in-memory ramdisk. Images selected at runtime are not persistent and will be lost on reboot. To make backgrounds permanent, add them to the ramdisk and rebuild the ISO.
Recommended Image Specifications
| Property | Recommendation | Reason |
|---|---|---|
| Format | PNG or JPG | Best compression and compatibility |
| Resolution | Match screen resolution | e.g., 1024×768, 1280×720, 1920×1080 |
| File Size | < 1MB | Faster loading, less RAM usage |
| Color Depth | 24-bit RGB | 32-bit RGBA also supported |
| Naming | No spaces, alphanumeric | Avoid special characters |
Technical Implementation
The background gallery is implemented in the DisplayOptions class within
guideXOS/GUI/DisplayOptions.cs.
Class Structure
<code>internal class DisplayOptions : Window {
// Background thumbnail system
private List<string> _backgroundPaths; // Full paths to images
private List<Image> _thumbnails; // Cached thumbnail images
private int _thumbSize = 128; // Thumbnail dimensions
private bool _thumbnailsLoaded = false; // Load state flag
private int _bgScroll = 0; // Gallery scroll position
// Gallery UI
private int _padding = 16;
private int _btnW = 180;
private int _btnH = 38;
}</code>
LoadBackgrounds() Method
This method handles the thumbnail loading and generation process:
<code>private void LoadBackgrounds() {
if (_thumbnailsLoaded) return;
_thumbnailsLoaded = true;
var files = File.GetFiles("Backgrounds/");
foreach (var fi in files) {
// Skip directories and thumbnail files
if (fi.Attribute == Directory) continue;
if (fi.Name.EndsWith("_thumb.png")) continue;
// Check for supported formats
bool isSupported = fi.Name.EndsWith(".png") ||
fi.Name.EndsWith(".jpg") ||
fi.Name.EndsWith(".jpeg") ||
fi.Name.EndsWith(".bmp");
if (isSupported) {
string path = "Backgrounds/" + fi.Name;
string thumbPath = GetThumbnailPath(fi.Name);
// Try to load cached thumbnail
Image thumb = TryLoadThumbnail(thumbPath);
// Generate if not found
if (thumb == null) {
thumb = GenerateThumbnail(path);
}
_backgroundPaths.Add(path);
_thumbnails.Add(thumb);
}
}
}</code>
Gallery Rendering
Thumbnails are displayed in a scrollable grid with the following layout:
- Cell Size: 148×148 pixels (128px thumbnail + 20px padding)
- Grid Layout: Dynamic column count based on window width
- Scroll Support: Vertical scrolling for large collections
- Hover Effect: Blue highlight when mouse hovers over thumbnail
- Centering: Thumbnails centered within their cells
Memory Management
The Display Options window properly disposes of thumbnail images when closed:
<code>public override void Dispose() {
// Clean up thumbnails
if (_thumbnails != null) {
for (int i = 0; i < _thumbnails.Count; i++) {
if (_thumbnails[i] != null) {
_thumbnails[i].Dispose();
}
}
_thumbnails.Clear();
}
base.Dispose();
}</code>
Performance Considerations
| Optimization | Implementation | Benefit |
|---|---|---|
| Lazy Loading | Backgrounds loaded only when tab is opened | Faster window initialization |
| Thumbnail Caching | Generated thumbnails saved to disk | Instant loading on subsequent opens |
| Viewport Culling | Only visible thumbnails are rendered | Better performance with many images |
| Memory Cleanup | Dispose() releases all thumbnail memory | Prevents memory leaks |
Troubleshooting
Gallery Shows "No images found"
Possible Causes:
/Backgroundsdirectory is empty- No supported image formats (.png, .jpg, .jpeg, .bmp)
- All files are thumbnails (
*_thumb.png) - Directory doesn't exist in ramdisk
Solutions:
- Verify
Ramdisk/Backgrounds/contains image files - Check file extensions are supported formats
- Rebuild ISO after adding images
- Use "Select Background" button to browse manually
Thumbnails Show as "?"
Meaning:
The "?" indicator means the thumbnail generation failed for that image.
Common Causes:
- Corrupted image file
- Unsupported PNG/JPG/BMP variant
- File read error
- Insufficient memory for image processing
Solutions:
- Try re-exporting the image in a standard format
- Use PNG or JPG instead of BMP for better compatibility
- Reduce image file size
- Check console output for error messages
Background Doesn't Change When Clicked
Troubleshooting Steps:
- Check if error notification appears
- Verify Display Options window closes after click
- Try clicking a different thumbnail
- Check available RAM (may be out of memory)
- Use "Select Background" button as alternative
Thumbnails Load Slowly
Causes:
- Many images without cached thumbnails
- Large source images require more processing
- First-time load generates all thumbnails
Solutions:
- Pre-generate thumbnails manually before building ISO
- Reduce number of background images
- Use smaller source images (< 1MB)
- Subsequent opens will be faster (thumbnails cached)
Applied Background is Stretched/Distorted
Explanation:
Background images are resized to match the screen resolution. If the aspect ratio differs from the screen, the image will be stretched.
Solutions:
- Use images that match your screen's aspect ratio
- For 16:9 screens: Use 1920×1080, 1280×720, etc.
- For 4:3 screens: Use 1024×768, 800×600, etc.
- Pre-crop images to desired aspect ratio
Enable console output by running guideXOS with -serial stdio in QEMU to see
detailed error messages about image loading failures.