# matrix-screen

> matrix screen

Latest version **1.0.3** (published 2018-08-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install matrix-screen
pnpm add matrix-screen
yarn add matrix-screen
bun add matrix-screen
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2018-08-08 |
| First published | 2018-08-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 50 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ilex |
| Maintainers | ilex.h |

## Links

- npm: https://www.npmjs.com/package/matrix-screen
- npm.io page: https://npm.io/package/matrix-screen

## Dependencies (1)

- [prop-types](https://npm.io/package/prop-types.md) ^15.6.1

## Recent versions

- 1.0.3 (latest) — 2018-08-08
- 1.0.2 — 2018-08-07
- 1.0.1 — 2018-08-06
- 1.0.0 — 2018-08-05

## README

# matrix-screen

## install

npm i --save matrix-screen

## Usage

```js
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

```js
import  from 'matrix-screen';

<MatrixIndicator text="0123456789" />
```

* MatrixTime

```js
import { MatrixTime } from 'matrix-screen';

<MatrixTime />
```

## Options

``` typescript
{
  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`)。即:

```js
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

---
_Source: https://npm.io/package/matrix-screen · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._