La pantalla de siete segmentos es una forma de dispositivo de pantalla electrónica para mostrar números decimales que es una alternativa a las pantallas de array de puntos más complejas.
Relojes de pantalla de 7 segmentos, cada segmento es un solo LED y los 7 LED están conectados entre sí con un pin común que puede ser un positivo común o un negativo común y dispuestos en un estilo específico. Una pantalla típica de 7 segmentos tiene 10 pines dispuestos en la parte superior e inferior, cada uno de los pines del medio es un pin común. Las pantallas de siete segmentos se usan ampliamente en relojes digitales, medidores electrónicos, calculadoras básicas y otros dispositivos electrónicos que muestran información numérica.
p5.js es una biblioteca de JavaScript para la codificación creativa, con un enfoque en hacer que la codificación sea accesible e inclusiva para artistas, diseñadores, educadores, principiantes y cualquier otra persona. p5.js es gratuito y de código abierto porque creemos que el software y las herramientas para aprenderlo deben ser accesibles para todos.
Usando la metáfora de un boceto, p5.js tiene un conjunto completo de funciones de dibujo. Sin embargo, no está limitado a su lienzo de dibujo. Puede pensar en toda la página de su navegador como su boceto, incluidos los objetos HTML5 para texto, entrada, video, cámara web y sonido. Los dígitos numéricos del 0 al 9 son los caracteres más comunes que se muestran en las pantallas de siete segmentos. Los patrones más comunes utilizados para cada uno de estos son:
0 1 2 3 4 5 6 7 8 9
Configuración del entorno: Usaremos Visual Stdio Code para escribir nuestros códigos para crear relojes de visualización de siete segmentos.
-
Paso 1: para usar p5 en Visual Stdio Code, debemos instalar la extensión p5.vscode como se muestra en la imagen a continuación.
-
Paso 2: Ahora, para crear un nuevo proyecto p5.js, vaya a Ver->Paleta de comandos->Crear proyecto p5.js.
Estructura del proyecto:
Ejemplo:
sketch.js
let display = [];
let colon = [];
let number;
function setup() {
createCanvas(600, 480);
let inc = 80;
let x = 50;
let j = 0;
for (let i = 0; i < 6; i++) {
display[i] = new Display(x, height / 2 - 40, 100);
if ((i + 1) % 2 == 0) {
colon[j++] = x + inc;
x = x + inc + 30;
} else {
x = x + inc;
}
}
number = new Array(10);
initializeArray();
}
function draw() {
frameRate(1);
background(0);
let sec = ("0" + second()).slice(-2);
let min = ("0" + minute()).slice(-2);
let hrs = ("0" + hour()).slice(-2);
console.log(colon);
display[0].show(number[hrs[0]]);
display[1].show(number[hrs[1]]);
display[2].show(number[min[0]]);
display[3].show(number[min[1]]);
display[4].show(number[sec[0]]);
display[5].show(number[sec[1]]);
fill(255, 0, 0);
for (let i = 0; i < 2; i++) {
ellipse(colon[i], height / 2 - 20, 10);
ellipse(colon[i], height / 2 + 40, 10);
}
}
function initializeArray() {
number[0] = [true, true, true, true, true, true, false];
number[1] = [false, true, true, false, false, false, false];
number[2] = [true, true, false, true, true, false, true];
number[3] = [true, true, true, true, false, false, true];
number[4] = [false, true, true, false, false, true, true];
number[5] = [true, false, true, true, false, true, true];
number[6] = [true, false, true, true, true, true, true];
number[7] = [true, true, true, false, false, false, false];
number[8] = [true, true, true, true, true, true, true];
number[9] = [true, true, true, true, false, true, true];
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Seven Segment Display</title>
<script src="libraries/p5.js"
type="text/javascript">
</script>
<script src="libraries/p5.dom.js"
type="text/javascript">
</script>
<script src="libraries/p5.sound.js"
type="text/javascript">
</script>
<script src="sketch.js"
type="text/javascript">
</script>
<script src="display.js"
type="text/javascript">
</script>
<style>
body {
text-align: center;
padding: 0;
margin: 0;
}
canvas {
vertical-align: top;
}
</style>
</head>
<body></body>
</html>
display.js
class Display {
constructor(x, y, size) {
this.x = x;
this.y = y;
this.size = size;
this.width = 10;
this.height = size / 2 - this.width / 2;
this.offset = this.width;
}
show(segments) {
this.edge(this.x, this.y - this.offset, true, segments[0]);
this.edge(this.x + this.height, this.y, false, segments[1]);
this.edge(
this.x + this.height,
this.y + this.height + this.offset,
false,
segments[2]
);
this.edge(
this.x,
this.y + 2 * this.height + this.offset,
true,
segments[3]
);
this.edge(
this.x - this.offset,
this.y + this.height + this.offset,
false,
segments[4]
);
this.edge(this.x - this.offset, this.y, false, segments[5]);
this.edge(this.x, this.y + this.height, true, segments[6]);
}
edge(x, y, hor, flag) {
if (flag) fill(255, 0, 0);
else fill(0);
if (hor) rect(x, y, this.height, this.width);
else rect(x, y, this.width, this.height);
}
}
Producción:
Publicación traducida automáticamente
Artículo escrito por _sh_pallavi y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA