Fuel Tank API Documentation

API Endpoints

GET /api/fuel-image

Generates a dynamic fuel tank image based on current fuel level and capacity.

Query Parameters:

  • capacity (number) - The total capacity of the fuel tank in liters
  • current (number) - The current fuel level in liters

Response:

Returns a PNG image with the following features:

  • Visual representation of the fuel level
  • Color-coded indicators (green for normal, red for low)
  • Current fuel level displayed in liters
  • Status bar showing percentage filled

Example Usage:

GET /api/fuel-image?capacity=100&current=75

This will return an image showing a tank that is 75% full with 75L of fuel.

Live Example:

75% Full (Normal)
Fuel tank at 75% capacity
5% Full (Low)
Fuel tank at 5% capacity
No Data
Fuel tank with no data

GET /api/vehicle-image

Generates a dynamic vehicle image with two fuel tanks based on current fuel levels and capacities.

Query Parameters:

  • capacity1 (number) - The total capacity of the first fuel tank in liters
  • current1 (number) - The current fuel level of the first tank in liters
  • capacity2 (number) - The total capacity of the second fuel tank in liters
  • current2 (number) - The current fuel level of the second tank in liters
  • format (string, optional) - Output format: 'svg' (animated) or 'webp' (default: 'svg')

Response:

Returns an image (SVG or WebP) with the following features:

  • Vehicle with two fuel tanks visualized
  • Animated water-like effect in SVG format
  • Color-coded indicators (green for normal, orange for warning, red for critical)
  • Current fuel levels displayed in liters
  • Status bars showing percentage filled

Example Usage:

GET /api/vehicle-image?capacity1=20000&current1=20000&capacity2=20000&current2=5000

This will return an image showing a vehicle with the first tank 100% full (20000L) and the second tank 25% full (5000L).

You can also display just one tank by omitting the capacity2 and current2 parameters:

GET /api/vehicle-image?capacity1=20000&current1=15000

This will show a single, larger tank that is 75% full (15000L).

Live Example:

Both Tanks Full
Vehicle with both tanks full
One Tank Low
Vehicle with one tank low
No Data
Vehicle with no tank data
Single Tank Only
Vehicle with single tank

Implementation Details

The API uses the following technologies:

  • Next.js API Routes - For serverless API functionality
  • Sharp - For image processing and manipulation
  • SVG - For dynamic overlays and text rendering

Error Handling

  • 404 - Returned when the base tank image cannot be found
  • 500 - Returned when there's an error processing the image