Table of Contents

🔄 Easy Workflow

Design, configure, and export your LED wall layouts with a streamlined process from start to finish.

📏 Precise Controls

Position and size screens with pixel-perfect accuracy using grid snapping and direct numerical input.

🔲 Cabinet Integration

Create detailed cabinet-based displays with support for partial cabinets, gaps, and grid visualization.

1. Getting Started

Launching the Application

When you first open LED Pixel Mapper, you'll see a split interface with a control sidebar on the left and the canvas workspace on the right.

Interface Overview

  • Left Sidebar: Contains all the controls for managing canvases, screens, and properties
  • Right Side: The visual workspace where you design your LED layout
  • Mini Toolbar: Quick access buttons for common actions located below the canvas
LED Pixel Mapper interface overview
The LED Pixel Mapper interface showing the sidebar, canvas area, and toolbar

Creating a New Project

  1. Click the New button in the top section of the left sidebar
  2. Confirm the prompt to clear existing canvases
  3. A new project with a blank HD canvas (1920×1080px) will be created

Pro Tip

When starting a new project, consider the overall dimensions of your LED installation to determine the best canvas size. For very large installations, you may want to use multiple canvases.

2. Canvas Management

Canvases are the foundation of your LED wall design. Each canvas represents a separate display area or design space.

Adding a Canvas

  1. Scroll to the bottom of the left sidebar to find the "All Canvases" section
  2. Click the Add Canvas button
  3. A new canvas will be added to your project with default HD resolution

Configuring Canvas Properties

Select a canvas from the list at the bottom of the sidebar to make it active. Then, you can modify these properties:

  • Name: Give your canvas a descriptive name
  • Resolution: Choose between HD (1920×1080px) or UHD (3840×2160px)
  • Background Color: Select a background color for your canvas
  • Grid Size: Set the grid size for snapping (in pixels)
  • Grid Visibility: Toggle grid visibility on/off
  • Snap Settings: Enable/disable snap to grid or screens
Canvas configuration options
Canvas configuration options in the left sidebar

Working with Multiple Canvases

  • You can create multiple canvases for complex installations
  • Switch between canvases by clicking on them in the canvas list
  • Canvases can be linked together using spanning screens (see Advanced Features)

Deleting a Canvas

To delete a canvas, click the trash icon next to its name in the canvas list. Note that you can't delete the last remaining canvas.

3. Adding and Managing Screens

Screens are the basic building blocks of your LED wall design. Each screen represents an LED panel or section.

Adding a Standard Screen

There are several ways to add a screen:

  1. Click the Add Screen button in the "Screens" section of the sidebar
  2. Click the Screen button in the mini toolbar below the canvas
  3. Double-click anywhere on the canvas to add a screen at that position

Selecting and Moving Screens

  • Click on a screen to select it (it will highlight with a yellow border)
  • Drag a selected screen to move it around the canvas
  • Use arrow keys for precise 1px movements, or Shift+arrows for 10px movements

Resizing Screens

  1. Select a screen to reveal resize handles at the corners and edges
  2. Drag any handle to resize the screen
  3. Hold Shift while resizing to maintain aspect ratio
Screen resize handles
Screen with resize handles visible when selected

Screen Properties

When a screen is selected, you can modify various properties in the sidebar:

  • Label: Name your screen for easier identification
  • Color: Change the screen's display color
  • Position (X/Y): Set exact coordinates for precise placement
  • Dimensions (W/H): Set exact width and height values
  • Notes: Add notes or additional information about the screen

Positioning Tools

The Position tab in the screen properties panel offers quick positioning tools:

  • Align to edges (Top, Bottom, Left, Right)
  • Center horizontally or vertically
  • Center both axes at once

Pro Tip

You can clone a selected screen by pressing Ctrl+D or using the Clone button in the toolbar. This is useful for creating multiple screens with the same properties.

Deleting a Screen

To delete a screen, select it and either:

  • Press the Delete key on your keyboard
  • Click the Delete button in the mini toolbar
  • Click the X button next to the screen in the sidebar list

4. Working with Cabinet Screens

Cabinet screens are specialized screens designed to represent LED cabinets with precise measurements and grid layouts.

Creating a Cabinet Screen

  1. Click the Cabinet button in the mini toolbar or sidebar
  2. The Cabinet Settings dialog will open
  3. Configure the following properties:
    • Cabinet Width/Height: The dimensions of a single cabinet (in pixels)
    • Horizontal/Vertical Gap: Space between cabinets (in pixels)
    • Columns/Rows: Number of cabinets in the grid
    • Partial Cabinets: Configure special-sized cabinets for edges if needed
  4. Click Create Cabinet Screen
  5. Enter X/Y coordinates when prompted (or accept the defaults for center placement)
Cabinet settings dialog
Cabinet Settings dialog with configuration options

Cabinet Grid Visibility

  • Toggle the cabinet grid on/off using the checkbox in the sidebar
  • Each cabinet in the grid will display its coordinate (A1, A2, B1, etc.)

Partial Cabinets

For installations that require partial cabinets at the edges:

  1. Enable the partial cabinet options in the Cabinet Settings dialog
  2. Specify which edges need partial cabinets (left, right, top, bottom)
  3. Set the dimensions for each partial cabinet

Pro Tip

Partial cabinets are especially useful for LED walls that don't have full cabinet units at the edges. This allows for more accurate representation of real-world installations.

5. Advanced Features

Groups

Groups allow you to manage multiple screens as a single unit, making it easier to organize complex layouts.

Creating a Group

  1. Select a screen you want to add to a group
  2. Go to the Layers tab in the screen properties
  3. Click Create New Group
  4. Enter a name for the group in the dialog
  5. Click Create Group

Adding Screens to a Group

  1. Select a screen that isn't in a group
  2. In the Layers tab, select an existing group from the dropdown
  3. The screen will now be part of that group

Moving Grouped Screens

When you select and move any screen in a group, all other screens in the group will move together while maintaining their relative positions.

Spanning Screens

Spanning screens allow you to create displays that span across multiple canvases, useful for designs that extend beyond a single display.

Creating a Spanning Screen

  1. Create at least two canvases in your project
  2. Select a screen on the first canvas
  3. Click the Span Screen button in the mini toolbar or use Ctrl+L
  4. Select the target canvas from the dropdown
  5. Choose horizontal or vertical spanning
  6. The screen will now span across both canvases
Example of spanning screens across multiple canvases
Example of a screen spanning across multiple canvases

Striped Displays

Striped displays split a single screen into multiple segments, useful for creating multi-segment LED walls.

Creating Stripes

  1. Select a screen you want to split
  2. Go to the Advanced tab in the screen properties
  3. Click Create Stripes
  4. Enter the maximum width for each segment
  5. Choose vertical or horizontal arrangement
  6. The screen will be split into multiple segments that can be managed together

Layers and Z-Index

Control the stacking order of screens to determine which ones appear in front of others.

Adjusting Z-Index

  1. Select a screen
  2. Go to the Layers tab in the screen properties
  3. Use the layer control buttons:
    • Bring to Front: Moves the screen to the top of the stack
    • Send to Back: Moves the screen to the bottom of the stack
    • Step Forward/Backward: Moves the screen one position up or down

Text Boxes and Logos

Add text and images to your design for better visualization and documentation.

Adding a Text Box

  1. Click the Text button in the mini toolbar
  2. Configure text properties:
    • Text content
    • Font size and family
    • Text color and background
    • Alignment
  3. Click Add Text Box

Adding a Logo

  1. Click the Logo button in the mini toolbar
  2. Click Select Image to upload an image
  3. Configure properties:
    • Background color
    • Opacity
    • Aspect ratio preservation
  4. Click Add Logo

Pro Tip

Text boxes and logos are excellent for adding labels, notes, and branding to your designs. They're also useful for presenting layouts to clients.

6. Exporting Your Design

LED Pixel Mapper offers multiple export options to document and share your designs.

Exporting as PNG

  1. Click the Export button in the top section of the sidebar
  2. In the Export dialog, select the following options:
    • Whether to include the grid in the export
    • Whether to export all canvases or just the active one
  3. Click Export as PNG Image
  4. The PNG file will be downloaded to your device

Exporting as JSON or CSV

For data-based exports:

  1. Open the Export dialog
  2. Click either Export as JSON or Export as CSV
  3. The file will be downloaded to your device

Creating LPMF Project Files

LPMF (LED Pixel Mapper File) is the native project format that preserves all your settings and layouts.

  1. Open the Export dialog
  2. Click Export as LPMF Project File
  3. The complete project file will be downloaded to your device

Pro Tip

LPMF files are the recommended format for saving and sharing complete projects as they contain all canvas and screen information, including links between canvases and groups.

7. Saving and Loading Projects

Saving a Project

  1. Click the Save button in the top section of the sidebar
  2. Enter a name for your layout
  3. Click Save
  4. Your project will be saved in the browser's local storage

Loading a Project

  1. Click the Load button in the top section of the sidebar
  2. In the Load dialog, you'll see all your saved layouts
  3. Click Load next to the layout you want to open

Importing LPMF Files

To import a project from another device:

  1. Click the Load button
  2. In the Import section at the bottom of the dialog, click Choose File
  3. Select a .lpmf file from your device
  4. The project will be imported and loaded

Pro Tip

LPMF files can be shared with colleagues, making collaboration on complex LED projects much easier. Just export your project as LPMF and send the file to your team members.

8. Keyboard Shortcuts

LED Pixel Mapper offers several keyboard shortcuts to speed up your workflow:

Shortcut Action
Arrow Keys Move selected screen 1px
Shift+Arrows Move selected screen 10px
Delete Delete selected screen
Ctrl+D Duplicate selected screen
Ctrl+G Toggle grid visibility
Ctrl+S Open save dialog
Ctrl+L Create spanning screen
Ctrl+B Open cabinet settings
Ctrl+Plus Zoom in
Ctrl+Minus Zoom out
Ctrl+Alt+S Toggle screen snapping
Ctrl+Alt+C Open cabinet settings

Pro Tip

Learning keyboard shortcuts can significantly improve your productivity when working with complex LED wall designs.

↑