NetBurner 3.5.6
PDF Version
GIF Canvas

GIF Canvas Example

A web-based application that generates dynamic GIF images through a web interface using embedded HTTP server functionality.

Overview

This application demonstrates real-time GIF image generation on an embedded system. Users can configure various parameters through a web form to create different types of GIF images including solid boxes, gradients, text overlays, and random patterns.

Features

  • Web-based Interface: HTML form for configuring image parameters
  • Dynamic GIF Generation: Real-time creation of GIF images based on user input
  • Multiple Image Types:
    • Solid filled boxes with borders
    • Gradient-filled boxes
    • Text overlay on colored backgrounds
    • Random pattern generation with transparency support
  • Customizable Parameters:
    • Canvas dimensions (width/height)
    • Fill colors (RGB values)
    • Border colors (RGB values)
    • Text colors (RGB values)

Architecture

Core Components

  1. Web Server: Built-in HTTP server handling GET/POST requests
  2. Image Generation: DrawImageObject class for creating pixel-based graphics
  3. GIF Compression: Custom miGIF run-length encoding compression
  4. Font Rendering: Multiple font sizes (Tiny, Small, Medium, Large, Giant)
  5. Form Processing: URL parameter parsing and form data handling

Key Files

  • main.cpp: Application entry point and network initialization
  • web.cpp: HTTP request handlers and GIF generation functions
  • drawimage.cpp/h: Core graphics drawing functionality
  • gifCompress.cpp/h: GIF compression implementation
  • webFormValues.cpp/h: Form data parsing and URL encoding
  • fontdata.c: Bitmap font definitions
  • index.html: Web interface form

Technical Details

Image Generation Process

  1. User submits form with color and dimension parameters
  2. Parameters are encoded in URL query string format
  3. Web handlers parse parameters and create DrawImageObject
  4. Graphics operations (lines, boxes, text) are performed
  5. Image is compressed using run-length encoding
  6. GIF data is streamed directly to HTTP response

Color Management

  • Supports up to 256 colors per image
  • RGB color values (0-255 range)
  • Transparency support for overlays
  • Dynamic color palette generation for gradients

Font System

  • Bitmap-based font rendering
  • 5 different font sizes available
  • Monospace character layout
  • Custom font data format with bit-packed character definitions

Usage

  1. Connect to the device's web server (default port 80)
  2. Navigate to the main interface
  3. Configure canvas dimensions and colors
  4. Click "Update Canvas" to apply changes
  5. View generated GIF images in the preview grid

Network Requirements

  • DHCP-enabled network for automatic IP assignment
  • Standard HTTP port 80 access
  • Web browser with HTML form and image support

Compression Technology

Uses miGIF compression algorithm:

  • Run-length encoding instead of LZW to avoid patent issues
  • Optimized for images with solid color regions
  • Produces GIF-compatible output streams
  • Efficient for line art, text, and geometric shapes

Memory Management

  • Dynamic buffer allocation for image data
  • Efficient pixel storage and manipulation
  • Streaming output to minimize memory usage
  • Automatic cleanup of image resources