Ngx-display NPM

NgxDisplay

This library renders seven and sixteen segments displays according to the input parameters. Live Demo It exports four components:

SevenSegmentComponent <seven-segment>: Renders a seven segments display according to a bitmap, following the standard below:
SevenSegmentDigitComponent <seven-segment-digit>: Renders a digit in a seven segments display, according to the table below:

digit	bitMask (decimal)	digit	bitMask (decimal)
0	126	j	60
1	48	k	47
2	109	l	14
3	121	m	21
4	51	n	118
5	91	o	29
6	95	p	103
7	112	q	115
8	127	r	5
9	123	s	91
a	119	t	15
b	31	u	62
c	78	v	62
d	61	w	28
e	79	x	55
f	71	y	59
g	95	z	109
h	55		0
i	6	-	1

SixteenSegmentComponent <sixteen-segment>: Renders a sixteen segments display according to a bitmap, following the standard below:
SixteenSegmentDigitComponent <sixteen-segment-digit>: Renders a digit in a sixteen segments display, according to the table below:

digit	bitMask (decimal)	digit	bitMask (decimal)
0	75687	W	9780
1	38	X	17426
2	70541	Y	12716
3	65965	Z	66947
4	12332	a	7040
5	78225	b	15104
6	78761	c	4864
7	65573	d	2220
8	78765	e	5888
9	78253	f	38921
A	78381	g	112896
B	100781	h	14848
C	74625	i	2048
D	100773	j	35584
E	78721	k	34834
F	78337	l	8704
G	74665	m	6696
H	12844	n	6656
I	100737	o	6912
J	932	p	111104
K	12818	q	112640
L	9088	r	4608
M	25126	s	80128
N	25140	t	13056
O	74661	u	2816
P	78349	v	1536
Q	74677	w	1584
R	78365	x	17426
S	78249	y	32940
T	100353	z	5376
U	9124		0
V	9730	,	1024
.	64	-	4104
"	40960

Usage

First of all, import the NgxDisplayModule in your AppModule :

import { NgModule } from '@angular/core';
import { NgxDisplayModule } from 'NgxDisplayModule';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...,
    NgxDisplayModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Seven Segment

<seven-segment
    [randomNoise]="randomNoise"
    [width]="width"
    [height]="height"
    [glowColor]="glowColor"
    [glowBlur]="glowBlur"
    [backgroundColor]="backgroundColor"
    [colorOn]="colorOn"
    [colorOff]="colorOff"
    [bitMask]="bitMask"
></seven-segment>

Where:

randomNoise (boolean) = defines if there's or if there's not a random glow
width (number) = width of the display
height (number)= height of the display
glowColor (string) = string containing the color of the glow. Tested with be RGB, HEX, RGBA.
glowBlur (number) = length of glow's blur
backgroundColor (string) = string containing the display's background color. Tested with be RGB, HEX, RGBA.
colorOn (string) = string containing the color of display's segments when they are turned on. Tested with be RGB, HEX, RGBA.
colorOff (string) = string containing the color of display's segments when they are turned off. Tested with be RGB, HEX, RGBA.
bitMask (number) = bitMask representing the state of the display

Seven Segment Digit

Same as above, except instead of passing a bitmask you pass a character to be drawn in the display:

<seven-segment-digit
    [randomNoise]="randomNoise"
    [width]="width"
    [height]="height"
    [glowColor]="glowColor"
    [glowBlur]="glowBlur"
    [backgroundColor]="backgroundColor"
    [colorOn]="colorOn"
    [colorOff]="colorOff"
    [character]="character"
></seven-segment-digit>

Where:

randomNoise (boolean) = defines if there's or if there's not a random glow
width (number) = width of the display
height (number)= height of the display
glowColor (string) = string containing the color of the glow. Tested with be RGB, HEX, RGBA.
glowBlur (number) = length of glow's blur
backgroundColor (string) = string containing the display's background color. Tested with be RGB, HEX, RGBA.
colorOn (string) = string containing the color of display's segments when they are turned on. Tested with be RGB, HEX, RGBA.
colorOff (string) = string containing the color of display's segments when they are turned off. Tested with be RGB, HEX, RGBA.
character (string) = one of the characters below (it can be either lower case characters or upper case ones. They will be converted to lower case before rendering.):

digit	digit	digit	digit
0	1	2	3
4	5	6	7
8	9	a	b
c	d	e	f
g	h	i	j
k	l	m	n
o	p	q	r
s	t	u	v
w	x	y	z
`<space>`	-

Sixteen Segment

<sixteen-segment
    [randomNoise]="randomNoise"
    [width]="width"
    [height]="height"
    [glowColor]="glowColor"
    [glowBlur]="glowBlur"
    [backgroundColor]="backgroundColor"
    [colorOn]="colorOn"
    [colorOff]="colorOff"
    [bitMask]="bitMask"
></sixteen-segment>

Where:

randomNoise (boolean) = defines if there's or if there's not a random glow
width (number) = width of the display
height (number)= height of the display
glowColor (string) = string containing the color of the glow. Tested with be RGB, HEX, RGBA.
glowBlur (number) = length of glow's blur
backgroundColor (string) = string containing the display's background color. Tested with be RGB, HEX, RGBA.
colorOn (string) = string containing the color of display's segments when they are turned on. Tested with be RGB, HEX, RGBA.
colorOff (string) = string containing the color of display's segments when they are turned off. Tested with be RGB, HEX, RGBA.
bitMask (number) = bitMask representing the state of the display

Sixteen Segment Digit

Same as above, except instead of passing a bitmask you pass a character to be drawn in the display:

<sixteen-segment-digit
    [randomNoise]="randomNoise"
    [width]="width"
    [height]="height"
    [glowColor]="glowColor"
    [glowBlur]="glowBlur"
    [backgroundColor]="backgroundColor"
    [colorOn]="colorOn"
    [colorOff]="colorOff"
    [character]="character"
></sixteen-segment-digit>

Where:

randomNoise (boolean) = defines if there's or if there's not a random glow
width (number) = width of the display
height (number)= height of the display
glowColor (string) = string containing the color of the glow. Tested with be RGB, HEX, RGBA.
glowBlur (number) = length of glow's blur
backgroundColor (string) = string containing the display's background color. Tested with be RGB, HEX, RGBA.
colorOn (string) = string containing the color of display's segments when they are turned on. Tested with be RGB, HEX, RGBA.
colorOff (string) = string containing the color of display's segments when they are turned off. Tested with be RGB, HEX, RGBA.
character (string) = one of the characters below:

digit	digit	digit	digit	digit	digit	digit	digit
0	1	2	3	4	5	6	7
8	9	a	b	c	d	e	f
g	h	i	j	k	l	m	n
o	p	q	r	s	t	u	v
w	x	y	z	A	B	C	D
E	F	G	H	I	J	K	L
M	N	O	P	Q	R	S	T
U	V	W	X	Y	Z	`<space>`	,
.	-	"

Examples

Example 1: Seven Segment Display alphabet

app.component.html:

<seven-segment-digit 
    [height]="150" 
    [width]="108" 
    [randomNoise]="true" 
    [character]="'0'"  
    [glowBlur]="30" 
    [colorOn]="'#ffdd8f'" 
    [colorOff]="'rgba(255, 255, 255, 0.1)'" 
    [glowColor]="'#ff9a1f'" 
    [backgroundColor]="'#16161a'"
></seven-segment-digit>
<seven-segment-digit 
    [height]="150" 
    [width]="108" 
    [randomNoise]="true" 
    [character]="'1'"  
    [glowBlur]="30" 
    [colorOn]="'#ffdd8f'" 
    [colorOff]="'rgba(255, 255, 255, 0.1)'" 
    [glowColor]="'#ff9a1f'" 
    [backgroundColor]="'#16161a'"
></seven-segment-digit>
...
<seven-segment-digit 
    [height]="150" 
    [width]="108" 
    [randomNoise]="true" 
    [character]="' '"  
    [glowBlur]="30" 
    [colorOn]="'#ffdd8f'" 
    [colorOff]="'rgba(255, 255, 255, 0.1)'" 
    [glowColor]="'#ff9a1f'" 
    [backgroundColor]="'#16161a'"
></seven-segment-digit>

Result (some adicional css were added only for alignment and general background color):

Example 2: Sixteen Segment Display alphabet

app.component.html:

<sixteen-segment-digit 
    [height]="150" 
    [width]="108" 
    [randomNoise]="true" 
    [character]="'0'"  
    [glowBlur]="30" 
    [colorOn]="'#ffdd8f'" 
    [colorOff]="'rgba(255, 255, 255, 0.1)'" 
    [glowColor]="'#ff9a1f'" 
    [backgroundColor]="'#16161a'"
></sixteen-segment-digit>
<sixteen-segment-digit 
    [height]="150" 
    [width]="108" 
    [randomNoise]="true" 
    [character]="'1'"  
    [glowBlur]="30" 
    [colorOn]="'#ffdd8f'" 
    [colorOff]="'rgba(255, 255, 255, 0.1)'" 
    [glowColor]="'#ff9a1f'" 
    [backgroundColor]="'#16161a'"
></sixteen-segment-digit>
...
<sixteen-segment-digit 
    [height]="150" 
    [width]="108" 
    [randomNoise]="true" 
    [character]="' '"  [glowBlu
    r]="30" 
    [colorOn]="'#ffdd8f'" 
    [colorOff]="'rgba(255, 255, 255, 0.1)'" 
    [glowColor]="'#ff9a1f'" 
    [backgroundColor]="'#16161a'"
></sixteen-segment-digit>

Result (some adicional css were added only for alignment and general background color):

angular javascript typescript canvas display

tslib

@infinitebrahmanuniverse/nolb-ngx-d @everything-registry/sub-chunk-2283

0.0.3

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago

digit	bitMask (decimal)	digit	bitMask (decimal)
0	126	j	60
1	48	k	47
2	109	l	14
3	121	m	21
4	51	n	118
5	91	o	29
6	95	p	103
7	112	q	115
8	127	r	5
9	123	s	91
a	119	t	15
b	31	u	62
c	78	v	62
d	61	w	28
e	79	x	55
f	71	y	59
g	95	z	109
h	55		0
i	6	-	1

digit	bitMask (decimal)	digit	bitMask (decimal)
0	126	j	60
1	48	k	47
2	109	l	14
3	121	m	21
4	51	n	118
5	91	o	29
6	95	p	103
7	112	q	115
8	127	r	5
9	123	s	91
a	119	t	15
b	31	u	62
c	78	v	62
d	61	w	28
e	79	x	55
f	71	y	59
g	95	z	109
h	55		0
i	6	-	1

digit	bitMask (decimal)	digit	bitMask (decimal)
0	126	j	60
1	48	k	47
2	109	l	14
3	121	m	21
4	51	n	118
5	91	o	29
6	95	p	103
7	112	q	115
8	127	r	5
9	123	s	91
a	119	t	15
b	31	u	62
c	78	v	62
d	61	w	28
e	79	x	55
f	71	y	59
g	95	z	109
h	55		0
i	6	-	1