An online tool to generate and visualize maps for irregular and/or gapped LED layouts, for use with FastLED, Pixelblaze and other libraries.

Related tags

Maps led-mapper
Overview

LED Mapper

Web App: https://jasoncoon.github.io/led-mapper

An online tool to generate and visualize maps for irregular and/or gapped LED layouts, for use with FastLED, Pixelblaze and other libraries.

Heavily inspired by the excellent FastLED XY Map Generator by Garrett Mace of Macetech which in turn was inspired by Mark Kriegsman.

The difference with this tool is that instead of generating coordinates for any "gaps", coordinates are only generated for each actual LED. So if you had an irregular/gapped matrix of 128 LEDs in a 16x16 grid, this tool would only create coordinate maps for 128 LEDs instead of 256. This usually results in lower memory usage, but also generates coordinate maps for radius and angle.

Using Google Sheets to create a layout:

google-sheets.mp4

Using LED Mapper to generate maps:

led-mapper.mp4

Here's an example of a serpentine matrix layout (it's deliberately irregular and asymmetrical):

	0	1	2	3	4	5	6		7	8	9	10	11	12	
28	27	26	25	24	23	22	21	20	19	18	17	16	15	14	13
29	30	31	32	33	34	35	36	37	38	39	40	41	42	43	44
59	58	57	56	55	54	53	52		51	50	49	48	47	46	45
	60	61	62	63	64	65				66	67	68	69	70	

And the generated FastLED coordinate maps:

#define NUM_LEDS 71

byte coordsX[NUM_LEDS] = { 17, 34, 51, 68, 85, 102, 119, 153, 170, 187, 204, 221, 238, 255, 238, 221, 204, 187, 170, 153, 136, 119, 102, 85, 68, 51, 34, 17, 0, 0, 17, 34, 51, 68, 85, 102, 119, 136, 153, 170, 187, 204, 221, 238, 255, 255, 238, 221, 204, 187, 170, 153, 119, 102, 85, 68, 51, 34, 17, 0, 17, 34, 51, 68, 85, 102, 170, 187, 204, 221, 238 };

byte coordsY[NUM_LEDS] = { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 64, 64, 64, 64, 64, 64, 64, 64, 64, 64, 64, 64, 64, 64, 64, 64, 128, 128, 128, 128, 128, 128, 128, 128, 128, 128, 128, 128, 128, 128, 128, 128, 191, 191, 191, 191, 191, 191, 191, 191, 191, 191, 191, 191, 191, 191, 191, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255 };

byte angles[NUM_LEDS] = { 0, 0, 0, 0, 0, 0, 0, 128, 128, 128, 128, 128, 128, 133, 134, 136, 137, 141, 146, 159, 191, 223, 236, 242, 245, 247, 248, 249, 250, 245, 244, 242, 240, 236, 231, 223, 210, 191, 172, 159, 151, 146, 143, 141, 139, 144, 146, 149, 154, 159, 167, 178, 204, 215, 223, 229, 233, 236, 239, 240, 234, 231, 228, 223, 217, 210, 172, 165, 159, 155, 151 };

byte radii[NUM_LEDS] = { 209, 179, 149, 119, 90, 60, 30, 30, 60, 90, 119, 149, 179, 211, 182, 152, 123, 94, 67, 42, 30, 42, 67, 94, 123, 152, 182, 211, 241, 246, 217, 189, 161, 133, 108, 84, 67, 60, 67, 84, 108, 133, 161, 189, 217, 227, 200, 174, 149, 127, 108, 94, 94, 108, 127, 149, 174, 200, 227, 255, 241, 215, 191, 169, 149, 133, 133, 149, 169, 191, 215 };

In addition to FastLED maps, a Pixelblaze 2D XY map is also generated:

[[1,0],[2,0],[3,0],[4,0],[5,0],[6,0],[7,0],[9,0],[10,0],[11,0],[12,0],[13,0],[14,0],[15,1],[14,1],[13,1],[12,1],[11,1],[10,1],[9,1],[8,1],[7,1],[6,1],[5,1],[4,1],[3,1],[2,1],[1,1],[0,1],[0,2],[1,2],[2,2],[3,2],[4,2],[5,2],[6,2],[7,2],[8,2],[9,2],[10,2],[11,2],[12,2],[13,2],[14,2],[15,2],[15,3],[14,3],[13,3],[12,3],[11,3],[10,3],[9,3],[7,3],[6,3],[5,3],[4,3],[3,3],[2,3],[1,3],[0,3],[1,4],[2,4],[3,4],[4,4],[5,4],[6,4],[10,4],[11,4],[12,4],[13,4],[14,4]]

With the generated maps, the following Arduino code can be used with the FastLED library.


All of the following examples assume the following structure:

uint8_t speed = 30; // beats per minute (BPM)

for (uint16_t i = 0; i < NUM_PIXELS; i++) {
  leds[i] = COLOR_FUNCTION;
}

FastLED.show();

For a horizontal rainbow:

  leds[i] = CHSV(coordsX[i]);

East Rainbow


To make it move/scroll:

  leds[i] = CHSV(beat8(speed) - coordsX[i]);

East Rainbow


To go the other direction horizontally:

  leds[i] = CHSV(beat8(speed) + coordsX[i]);

West Rainbow


Vertical:

  leds[i] = CHSV(beat8(speed) + coordsY[i]);

North Rainbow


Diagonal:

  leds[i] = CHSV(beat8(speed) + coordsX[i] + coordsY[i]);

Northeast Rainbow


Radius (expanding/contracting):

  leds[i] = CHSV(beat8(speed) + radii[i]);

Northeast Rainbow


Angle (rotating):

  leds[i] = CHSV(beat8(speed) + angles[i]);

Clockwise Rainbow

You might also like...

This project contains the TypeScript definitions for the Bing Maps V8 Web Control.

This project contains the TypeScript definitions for the Bing Maps V8 Web Control.

Bing Maps V8 TypeScript Definitions These are the official TypeScript definitions for the Bing Maps V8 Web Control. These can be used to provide intel

Nov 23, 2022

React components for Leaflet maps

React Leaflet React components for Leaflet maps. Documentation Getting started API reference Changes See the CHANGELOG file. Contributing See the CONT

Jan 3, 2023

Vue 2 components for Leaflet maps

Vue 2 components for Leaflet maps

Vue2Leaflet Vue2Leaflet is a JavaScript library for the Vue framework that wraps Leaflet making it easy to create reactive maps. How to install npm in

Dec 29, 2022

AngularJS directive to embed an interact with maps managed by Leaflet library

Angular Leaflet Why the fork? While we are grateful for all the original work at tombatossals/angular-leaflet-directive. We need to be able to operate

Nov 10, 2022

Downloads satellite images from Google Maps, only slightly illegal.

Google Maps Satellite Downloader This is a script to download satellite images from Google Maps. The below mentioned optimization system requires that

Oct 31, 2022

A simple web extension that redirects Twitter, YouTube, Instagram & Google Maps requests to privacy friendly alternatives.

A simple web extension that redirects Twitter, YouTube, Instagram & Google Maps requests to privacy friendly alternatives.

Get Donate FIRO aEyKPU7mwWBYRFGoLiUGeQQybyzD8jzsS8 BTC: 3JZWooswwmmqQKw5iW6AYFfK5gcWTrvueE ETH: 0x90049dc59365dF683451319Aa4632aC61193dFA7 About A web

Dec 29, 2022

🖼️ Create beautiful maps from OpenStreetMap data in a webapp

🖼️ Create beautiful maps from OpenStreetMap data in a webapp

prettymapp 🖼️ Prettymapp is a webapp to create beautiful maps from OpenStreetMap data (based on prettymaps) 🎈 Try it out here: prettymapp on streaml

Jan 3, 2023

Geokit - is a command-line interface (CLI) tool written in javascript, that contains all the basic functionalities for measurements, conversions and operations of geojson files.

Geokit Geokit is a command-line interface (CLI) tool written in javascript, that contains all the basic functionalities for measurements, conversions

Nov 17, 2022

A web based data mining tool for OpenStreetMap using the Overpass API.

overpass turbo https://overpass-turbo.eu/ – stable version https://tyrasd.github.io/overpass-turbo/ – latest version This is a GUI for testing and dev

Dec 29, 2022
Comments
  • Add license information

    Add license information

    Hello!

    I found your project from https://hackaday.com/2022/03/23/finally-a-mapping-tool-for-addressable-led-strings/

    Could you please add information about the license of this repository — is it allowed to copy, change and use the code in any purpose? It would be great to see any popular open source license.

    opened by vazhnov 2
  • CanvasRenderingContext2D Issue

    CanvasRenderingContext2D Issue

    While trying to use the web tool with a custom design, I came upon a bug. Using Firefox: Error: CanvasRenderingContext2D.getImageData: Argument 1 is not a finite value, so is out of range for long... Using Chrome: Error: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': Value is not of type 'long'...

    The issue is not present when selecting the physical order pattern but troubles the tool with all other patterns.

    																												70	71																												98	99														
    																										68	69			72	73																								96	97			100	101												
    																									67							74																						95							102											
    																							65	66									75	76																		93	94									103	104									
    																					63	64													77	78														91	92													105	106							
    																				62																	79												90																	107						
    																		60	61																			80	81								88	89																			108	109				
    																58	59																							82	83				86	87																							110	111		
    															57																											84		85																											112	
    														56																													252																													113
    																																																																								
    														55																													251																													114
    														54																													250																													115
    																																																																								
    														53																													249																													116
    														52																													248																													117
    																																																																								
    														51																													247																													118
    														50																													246																													119
    														49																													245																													120
    														48																													244																													121
    																																																																								
    														47																													243																													122
    														46																													242																													123
    																																																																								
    														45																													241																													124
    														44																													240																													125
    																																																																								
    														43																													239																													126
    														42	224																											238		253																											127	
    												40	41			223	222																							236	237				254	255																							129	128		
    											39							221	220																			234	235								256	257																			131	130				
    									37	38										219																	233												258																	132						
    							35	36													218	217													231	232														259	260													134	133							
    						34																	216	215									229	230																		261	262									136	135									
    				32	33																				214							228																						263							137											
    		30	31																							213	212			226	227																								264	265			139	138												
    	29																											211	225																												266	140														
    28																													210																													141														
    																																																																								
    27																													209																													142														
    26																													208																													143														
    																																																																								
    25																													207																													144														
    24																													206																													145														
    																																																																								
    23																													205																													146														
    22																													204																													147														
    21																													203																													148														
    20																													202																													149														
    																																																																								
    19																													201																													150														
    18																													200																													151														
    																																																																								
    17																													199																													152														
    16																													198																													153														
    																																																																								
    15																													197																													154														
    	14																											183		182																											155															
    		13	12																							185	184				181	180																							157	156																
    				11	10																			187	186								179	178																			159	158																		
    						9																	188												177																	160																				
    							8	7													190	189														176	175													162	161																					
    									6	5									192	191																		174	173									164	163																							
    											4							193																						172							165																									
    												3	2			195	194																								171	170			167	166																										
    														1	196																												169	168																												
    
    

    This is the design I'm trying to use.

    opened by ekampourakis 2
Owner
Jason Coon
Senior Software Engineer
Jason Coon
the easiest way to use Google Maps

Important If you're developer, I'm moving gmaps.js to NPM, you can give your opinion and check the migration progress in Issue #404 gmaps.js - A Javas

Gustavo Leon 7.1k Apr 7, 2021
An open-source JavaScript library for world-class 3D globes and maps :earth_americas:

CesiumJS is a JavaScript library for creating 3D globes and 2D maps in a web browser without a plugin. It uses WebGL for hardware-accelerated graphics

Cesium 9.7k Dec 26, 2022
An open-source JavaScript library for world-class 3D globes and maps :earth_americas:

CesiumJS is a JavaScript library for creating 3D globes and 2D maps in a web browser without a plugin. It uses WebGL for hardware-accelerated graphics

Cesium 9.7k Jan 3, 2023
Converts geojson to svg string given svg viewport size and maps extent.

geojson2svg Converts geojson to svg string given svg viewport size and maps extent. Check world map, SVG scaled map and color coded map examples to de

Gagan Bansal 163 Dec 17, 2022
Dashboards-maps is a frontend plugin that helps you in uploading custom GeoJSON to OpenSearch and communicates with the geospatial backend plugin for the same.

Welcome! Project Resources Code of Conduct License Copyright Dashboards-Maps Dashboards-maps is a frontend plugin that helps you in uploading custom G

null 9 Dec 28, 2022
Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL

Mapbox GL JS is a JavaScript library for interactive, customizable vector maps on the web. It takes map styles that conform to the Mapbox Style Specif

Mapbox 9.4k Jan 7, 2023
:leaves: JavaScript library for mobile-friendly interactive maps

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 39 KB of gzipped JS plus 4 KB of gzipp

Leaflet 36.5k Jan 1, 2023
Polymaps is a free JavaScript library for making dynamic, interactive maps in modern web browsers.

Polymaps Polymaps is a free JavaScript library for making dynamic, interactive maps in modern web browsers. See http://polymaps.org for more details.

Urban Airship 1.6k Dec 23, 2022
UNMAINTAINED Open source JavaScript renderer for Kartograph SVG maps

This project is not maintained anymore. Here are a few reasons why I stopped working on kartograph.js: there's no need to support non-SVG browsers any

null 1.5k Dec 11, 2022
This is a collection of over two hundred code samples an growing for the Bing Maps V8 web control.

Bing Maps V8 Code Samples This is a collection of over a hundred code samples for the Bing Maps V8 web control. These samples have been collected from

Microsoft 130 Dec 8, 2022