.. note::

    ¡Hola, bienvenido a la comunidad de entusiastas de SunFounder Raspberry Pi, Arduino y ESP32 en Facebook! Sumérgete más profundamente en Raspberry Pi, Arduino y ESP32 con otros entusiastas.

    **¿Por qué unirse?**

    - **Soporte experto**: Resuelve problemas postventa y desafíos técnicos con la ayuda de nuestra comunidad y equipo.
    - **Aprende y comparte**: Intercambia consejos y tutoriales para mejorar tus habilidades.
    - **Vistas previas exclusivas**: Obtén acceso anticipado a anuncios de nuevos productos y avances.
    - **Descuentos especiales**: Disfruta de descuentos exclusivos en nuestros productos más recientes.
    - **Promociones festivas y sorteos**: Participa en sorteos y promociones de temporada.

    👉 ¿Listo para explorar y crear con nosotros? Haz clic en [|link_sf_facebook|] y únete hoy mismo!

.. _1.1.5_js:

1.1.5 Pantalla de 7 segmentos de 4 dígitos
==========================================

Introducción
-------------

A continuación, sigue conmigo para intentar controlar la pantalla de 7 segmentos de 4 dígitos.

Componentes Necesarios
------------------------------

En este proyecto, necesitamos los siguientes componentes. 

.. image:: img/list_4_digit.png

Es definitivamente conveniente comprar un kit completo, aquí está el enlace: 

.. list-table::
    :widths: 20 20 20
    :header-rows: 1

    *   - Nombre	
        - ELEMENTOS EN ESTE KIT
        - ENLACE
    *   - Kit Raphael
        - 337
        - |link_Raphael_kit|

También puedes comprarlos por separado en los enlaces a continuación.

.. list-table::
    :widths: 30 20
    :header-rows: 1

    *   - INTRODUCCIÓN DEL COMPONENTE
        - ENLACE DE COMPRA

    *   - :ref:`cpn_gpio_board`
        - |link_gpio_board_buy|
    *   - :ref:`cpn_breadboard`
        - |link_breadboard_buy|
    *   - :ref:`cpn_wires`
        - |link_wires_buy|
    *   - :ref:`cpn_resistor`
        - |link_resistor_buy|
    *   - :ref:`cpn_4_digit`
        - \-
    *   - :ref:`cpn_74hc595`
        - |link_74hc595_buy|

.. note::
    En este proyecto, para la pantalla de 7 segmentos de 4 dígitos, debemos usar el modelo BS. Si usas el modelo AS, puede que no se encienda.

Diagrama Esquemático
-------------------------

.. image:: img/schmatic_4_digit.png

Procedimientos Experimentales
---------------------------------

**Paso 1**: Construye el circuito.

.. image:: img/image80.png

**Paso 2**: Ve a la carpeta del código.

.. raw:: html

    <run></run>

.. code-block::

    cd ~/raphael-kit/nodejs/

**Paso 3**: Ejecuta el código.

.. raw:: html

    <run></run>

.. code-block::

    sudo node 4_digit_7_segment_display.js

Después de ejecutar el código, el programa lleva una cuenta, aumentando en 1 por segundo, y la pantalla de 7 segmentos de 4 dígitos muestra el conteo.

**Código**

.. code-block:: js

    const Gpio = require('pigpio').Gpio;

    var counter = 0;

    const number = [0xc0, 0xf9, 0xa4, 0xb0, 0x99, 0x92, 0x82, 0xf8, 0x80, 0x90]; //for BS
    
    const SDI = new Gpio(24, { mode: Gpio.OUTPUT });
    const RCLK = new Gpio(23, { mode: Gpio.OUTPUT });
    const SRCLK = new Gpio(18, { mode: Gpio.OUTPUT });

    const pin1 = new Gpio(10, { mode: Gpio.OUTPUT });
    const pin2 = new Gpio(22, { mode: Gpio.OUTPUT });
    const pin3 = new Gpio(27, { mode: Gpio.OUTPUT });
    const pin4 = new Gpio(17, { mode: Gpio.OUTPUT });
    const placePin = [pin1, pin2, pin3, pin4];

    function clearDisplay() {
        hc595_shift(0xff); //for BS
    }

    function hc595_shift(dat) {
        for (let j = 0; j < 8; j++) {
            let code = 0x80 & (dat << j);
            if (code != 0) {
                code = 1;
            }
            SDI.digitalWrite(code);
            SRCLK.trigger(1,1);
        }
        RCLK.trigger(1,1);
    }

    function pickDigit(digit) {
        for(let i=0;i<4;i++){
            placePin[i].digitalWrite(0);
        }
        placePin[digit].digitalWrite(1);
    }


    let digit = -1
    setInterval(() => {
        digit = (digit +1)% 4
        clearDisplay();
        pickDigit(digit);
        switch(digit){
            case 0:
                hc595_shift(number[Math.floor(counter % 10)]);  
                break;
            case 1:
                hc595_shift(number[Math.floor(counter % 100 / 10)]);
                break;        
            case 2:
                hc595_shift(number[Math.floor(counter % 1000 / 100)]);
                break;        
            case 3:
                hc595_shift(number[Math.floor(counter % 10000 / 1000)]);
                break;
        }
    }, 5);

    setInterval(() => {
        counter++;
    }, 1000);

**Explicación del Código**

.. code-block:: js

    const pin1 = new Gpio(10, {mode: Gpio.OUTPUT});
    const pin2 = new Gpio(25, {mode: Gpio.OUTPUT});
    const pin3 = new Gpio(27, {mode: Gpio.OUTPUT});
    const pin4 = new Gpio(17, {mode: Gpio.OUTPUT});
    const placePin = [pin1,pin2,pin3,pin4];    

Inicializa los pines 10, 25, 27 y 17 en modo de salida y colócalos en la matriz ``placePin`` para facilitar el control del ánodo común de la pantalla de 7 segmentos de cuatro dígitos.

.. code-block:: js

    const number = [0xc0, 0xf9, 0xa4, 0xb0, 0x99, 0x92, 0x82, 0xf8, 0x80, 0x90];

Define una matriz constante ``number`` para representar el código de segmento hexadecimal del 0 al 9 (ánodo común).

.. code-block:: js

    function clearDisplay() {
        hc595_shift(0xff); 
    }

Escribe 0xff para apagar el tubo digital.

.. code-block:: js

    function pickDigit(digit) {
        for(let i=0;i<4;i++){
            placePin[i].digitalWrite(0);
        }
        placePin[digit].digitalWrite(1);
    }

Selecciona el lugar del valor. 
Solo debe haber un lugar habilitado cada vez. 
El lugar habilitado se escribirá en alto.

.. code-block:: js

    let digit = -1
    setInterval(() => {
        digit = (digit +1)% 4
        clearDisplay();
        pickDigit(digit);
        switch(digit){
            case 0:
                hc595_shift(number[Math.floor(counter % 10)]);  
                break;
            case 1:
                hc595_shift(number[Math.floor(counter % 100 / 10)]);
                break;        
            case 2:
                hc595_shift(number[Math.floor(counter % 1000 / 100)]);
                break;        
            case 3:
                hc595_shift(number[Math.floor(counter % 10000 / 1000)]);
                break;
        }
    }, 5);

Este código se usa para configurar el número mostrado en la pantalla de 7 segmentos de 4 dígitos.

Primero, inicia el cuarto segmento de la pantalla y escribe el número de un solo dígito. 
Luego, inicia el tercer segmento de la pantalla y escribe el dígito de las decenas; 
después de eso, inicia el segundo y el primer segmento de la pantalla respectivamente, 
y escribe los dígitos de las centenas y miles respectivamente. 
Debido a que la velocidad de actualización es muy rápida, vemos una pantalla de cuatro dígitos completa.

.. code-block:: js

    setInterval(() => {
        counter++;
    }, 1000);

Agrega uno al ``counter`` 
(el tubo digital de cuatro dígitos muestra el número incrementado en uno) 
cada segundo que pasa.

Imagen del Fenómeno
-------------------------

.. image:: img/image81.jpeg