Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sallar/led-matrix-simulator
:crystal_ball: A simple HTML5 LED Matrix Simulator for fun
https://github.com/sallar/led-matrix-simulator
canvas led-display led-matrix-displays ledmatrix preact
Last synced: about 1 month ago
JSON representation
:crystal_ball: A simple HTML5 LED Matrix Simulator for fun
- Host: GitHub
- URL: https://github.com/sallar/led-matrix-simulator
- Owner: sallar
- License: mit
- Created: 2016-11-26T21:29:02.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-04-06T19:59:23.000Z (over 6 years ago)
- Last Synced: 2024-08-29T18:36:17.754Z (4 months ago)
- Topics: canvas, led-display, led-matrix-displays, ledmatrix, preact
- Language: JavaScript
- Homepage: https://sallar.github.io/led-matrix-simulator/
- Size: 329 KB
- Stars: 117
- Watchers: 6
- Forks: 17
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
LED Matrix Simulator
===
I 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.
:warning: Note that this is an untested project meant for fun and learning, it's not meant to be used in production.
:round_pushpin: [See in in action here](https://sallar.github.io/led-matrix-simulator/)
Technologies used:
- Typescript
- Preact
- HTML5 Canvas
## Bitmap fonts
Microcontrollers 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:
``` c++
const unsigned char font[96][6] = {
{0x00,0x00,0x00,0x00,0x00,0x00}, //
{0x2f,0x00,0x00,0x00,0x00,0x00}, // !
{0x03,0x00,0x03,0x00,0x00,0x00}, // "
...
```
This 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:
``` c++
{0x3C,0x12,0x12,0x12,0x3E,0x00}, // A
```
To turn this into pixel data, each hex item needs to be converted to binary. This can be done easily in Javascript:
```
0x12.toString(2); // 00010010
```
From 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).
## Related
+ [matrix-display-store](https://github.com/sallar/matrix-display-store)
+ [rpi-matrix](https://github.com/sallar/rpi-matrix)
+ [led-matrix](https://github.com/sallar/led-matrix)
## LICENSE
Released under the [MIT License](https://sallar.mit-license.org/).
### Adafruit Plasma Example
The 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.
```
Written by Limor Fried/Ladyada & Phil Burgess/PaintYourDragon for Adafruit Industries.
BSD license, all text above must be included in any redistribution
```