matrix-screen

install

npm i --save matrix-screen

Usage

import MatrixIndicator, { martixScreen, dataFactory } from 'matrix-screen';

const df = dataFactory(32, 16);
const matrix = new martixScreen(canvas, {
  x: 32,
  y: 16,
  // other options...
});
matrix.setData(df.getMatrix());
matrix.render();

use react

• MatrixIndicator

import  from 'matrix-screen';

<MatrixIndicator text="0123456789" />

• MatrixTime

import { MatrixTime } from 'matrix-screen';

<MatrixTime />

Options

{
  x: number;
  y: number;
  pixelWidth: number;
  pixelHeight: number;
  margin: number;
  shadow: boolean;
  animated: boolean;
}

dataFactory Methods

• dataFactory.write(text, font, color)
• dataFactory.fill(x, y, r, g, b, a)

props

MatrixIndicator Props

|params|type|default|description| |------|------|------|------| | width | number | 32 | matrix width | | height | number | 16 | matrix height | | text | number | - | content text | | font | string | digit | display font, 'digit', 'm38gorilla', 'bulge' . | | pixelWidth | number | 10 | one pixel width. | | pixelHeight | number | 10 | one pixel height. | | margin | number | 4 | grid space. | | shadow | boolean | false | text shadow. | | animated | boolean | false | enable animate. | | shape | string | - | cusstom shapes, 'cross', 'warning', 'alert', 'arrowUp', 'arrowRight', 'arrowDown', 'arrowLeft', 'info', 'wifi'. | | background | string | - | matrix background. |

注意，当对包裹 MatrixIndicator 的容器进行设置 widht/height 时，则需要采用 calcScreenSize 进行计算 width 和 height，并设置为结果的一半(或将width和height转化为对应的x和y也可，采用 sizeToXy)。即:

import MatrixIndicator, { calcScreenSize } from 'matrix-screen';

// render
const { width, height } = calcScreenSize(this.props);
const style = {
  width,
  height
};

<div style={style}>
  <MatrixIndicator {...this.props} />
</div>

MatrixTime Props

|params|type|default|description| |------|------|------|------| | width | number | 32 | matrix time width | | height | number | 16 | matrix time height | | radius | number | 3 | radius or rect * 2. | | marginTop | number | 10 | margin top. | | marginLeft | boolean | 10 | margin left. | | isRect | boolean | false | enable rect. | | background | string | - | matrix background. | | color | string | - | matrix time color. |

Lecense

MIT