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)
💡 Case Insensitive

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

  1. Scan Directory: Display Options scans /Backgrounds for image files
  2. Skip Thumbnails: Files ending with _thumb.png are ignored
  3. Check Cache: Looks for existing thumbnail (e.g., image_thumb.png)
  4. Load or Generate:
    • If cached thumbnail exists → Load it directly
    • If not found → Generate from full image
  5. Resize: Scale image to fit within 128×128px while preserving aspect ratio
  6. 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.jpgwallpaper_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:

  1. Open Display Options from the Start menu
  2. Click the "Backgrounds" tab
  3. Click the "Select Background" button at the bottom
  4. Browse to /Backgrounds or any other directory
  5. Select your image file
  6. Background is applied immediately
⚠ Note: In-Memory Filesystem

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:

  • /Backgrounds directory is empty
  • No supported image formats (.png, .jpg, .jpeg, .bmp)
  • All files are thumbnails (*_thumb.png)
  • Directory doesn't exist in ramdisk

Solutions:

  1. Verify Ramdisk/Backgrounds/ contains image files
  2. Check file extensions are supported formats
  3. Rebuild ISO after adding images
  4. 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:

  1. Check if error notification appears
  2. Verify Display Options window closes after click
  3. Try clicking a different thumbnail
  4. Check available RAM (may be out of memory)
  5. 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
💡 Debugging Tip

Enable console output by running guideXOS with -serial stdio in QEMU to see detailed error messages about image loading failures.


Related Topics