{"id":14384892,"url":"https://github.com/sallar/led-matrix-simulator","last_synced_at":"2025-10-05T22:15:25.945Z","repository":{"id":140673001,"uuid":"74851544","full_name":"sallar/led-matrix-simulator","owner":"sallar","description":":crystal_ball: A simple HTML5 LED Matrix Simulator for fun","archived":false,"fork":false,"pushed_at":"2018-04-06T19:59:23.000Z","size":337,"stargazers_count":119,"open_issues_count":0,"forks_count":17,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-20T20:35:34.997Z","etag":null,"topics":["canvas","led-display","led-matrix-displays","ledmatrix","preact"],"latest_commit_sha":null,"homepage":"https://sallar.github.io/led-matrix-simulator/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sallar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2016-11-26T21:29:02.000Z","updated_at":"2025-03-23T08:48:09.000Z","dependencies_parsed_at":null,"dependency_job_id":"2e2eaa3c-0383-448c-b897-171caa84ab20","html_url":"https://github.com/sallar/led-matrix-simulator","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sallar%2Fled-matrix-simulator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sallar%2Fled-matrix-simulator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sallar%2Fled-matrix-simulator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sallar%2Fled-matrix-simulator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sallar","download_url":"https://codeload.github.com/sallar/led-matrix-simulator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253843216,"owners_count":21972874,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","led-display","led-matrix-displays","ledmatrix","preact"],"created_at":"2024-08-28T18:01:45.483Z","updated_at":"2025-10-05T22:15:20.887Z","avatar_url":"https://github.com/sallar.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"LED Matrix Simulator\n===\n\nI was too impatient for my [Adafruit 32x16 LED Matrix display](https://www.adafruit.com/products/420) to arrive, so I made one using HTML5 Canvas.\n\n:warning: Note that this is an untested project meant for fun and learning, it's not meant to be used in production. \n\n:round_pushpin: [See in in action here](https://sallar.github.io/led-matrix-simulator/)\n\nTechnologies used:\n\n  - Typescript\n  - Preact\n  - HTML5 Canvas\n  \n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://dl.dropboxusercontent.com/u/16657557/Works/matrix.png\" height=\"252\"/\u003e\n\u003c/p\u003e\n\n## Bitmap fonts\n\nMicrocontrollers need special bitmap fonts to display text or digits on Crystal or LED Matrix displays. These fonts are usually represented in an array of arrays of hexadecimal bytes. Something like this:\n\n``` c++\nconst unsigned char font[96][6] = {\n  {0x00,0x00,0x00,0x00,0x00,0x00}, //  \n  {0x2f,0x00,0x00,0x00,0x00,0x00}, // !\n  {0x03,0x00,0x03,0x00,0x00,0x00}, // \"\n        ...\n```\n\nThis array contains 96 characters (each character 6 bytes) ordered by their character code in Unicode table. So for example `space` is index 0, `!` is index 1 and so on. So to find the character's index, we need to subtract 32 from it's characrer code. Each character in this font map is an array of 6 bytes, and each byte represents a column on the external display:\n\n``` c++\n{0x3C,0x12,0x12,0x12,0x3E,0x00}, // A\n```\n\nTo turn this into pixel data, each hex item needs to be converted to binary. This can be done easily in Javascript:\n\n```\n0x12.toString(2); // 00010010\n```\n\nFrom here it get's easy. `00010010` is a column on the display, and six of those form a letter. [Read more about these fonts](http://jared.geek.nz/2014/jan/custom-fonts-for-microcontrollers).\n\n## Related\n\n+ [matrix-display-store](https://github.com/sallar/matrix-display-store)\n+ [rpi-matrix](https://github.com/sallar/rpi-matrix)\n+ [led-matrix](https://github.com/sallar/led-matrix)\n\n## LICENSE\n\nReleased under the [MIT License](https://sallar.mit-license.org/).\n\n### Adafruit Plasma Example\n\nThe original code for the Plasma example is copied over from the [Adafruit RGB Matrix panel library](https://github.com/adafruit/RGB-matrix-Panel) examples directory.\n\n```\nWritten by Limor Fried/Ladyada \u0026 Phil Burgess/PaintYourDragon for Adafruit Industries.  \nBSD license, all text above must be included in any redistribution\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsallar%2Fled-matrix-simulator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsallar%2Fled-matrix-simulator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsallar%2Fled-matrix-simulator/lists"}