.. note::

    Hallo und willkommen in der SunFounder Raspberry Pi & Arduino & ESP32 Enthusiasten-Gemeinschaft auf Facebook! Tauchen Sie tiefer ein in die Welt von Raspberry Pi, Arduino und ESP32 mit anderen Enthusiasten.

    **Warum beitreten?**

    - **Expertenunterstützung**: Lösen Sie Nachverkaufsprobleme und technische Herausforderungen mit Hilfe unserer Gemeinschaft und unseres Teams.
    - **Lernen & Teilen**: Tauschen Sie Tipps und Anleitungen aus, um Ihre Fähigkeiten zu verbessern.
    - **Exklusive Vorschauen**: Erhalten Sie frühzeitigen Zugang zu neuen Produktankündigungen und exklusiven Einblicken.
    - **Spezialrabatte**: Genießen Sie exklusive Rabatte auf unsere neuesten Produkte.
    - **Festliche Aktionen und Gewinnspiele**: Nehmen Sie an Gewinnspielen und Feiertagsaktionen teil.

    👉 Sind Sie bereit, mit uns zu erkunden und zu erschaffen? Klicken Sie auf [|link_sf_facebook|] und treten Sie heute bei!

.. _1.1.5_js:

1.1.5 4-stellige 7-Segment-Anzeige
====================================

Einführung
-----------------

Folgen Sie mir weiter, um zu versuchen, die 4-stellige 7-Segment-Anzeige zu steuern.

Benötigte Komponenten
------------------------------

Für dieses Projekt benötigen wir die folgenden Komponenten.

.. image:: img/list_4_digit.png

Es ist definitiv praktisch, ein ganzes Kit zu kaufen. Hier ist der Link:

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

    *   - Name	
        - ARTIKEL IN DIESEM KIT
        - LINK
    *   - Raphael Kit
        - 337
        - |link_Raphael_kit|

Sie können sie auch einzeln über die untenstehenden Links kaufen.

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

    *   - KOMPONENTENEINFÜHRUNG
        - KAUF-LINK

    *   - :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::
    In diesem Projekt sollten wir für die 4-stellige 7-Segment-Anzeige das BS-Modell verwenden. Wenn Sie das AS-Modell verwenden, leuchtet es möglicherweise nicht.

Schaltplan
--------------------

.. image:: img/schmatic_4_digit.png

Experimentelle Verfahren
-------------------------

**Schritt 1**: Bauen Sie den Schaltkreis.

.. image:: img/image80.png

**Schritt 2**: Gehen Sie zum Ordner des Codes.

.. raw:: html

    <run></run>

.. code-block::

    cd ~/raphael-kit/nodejs/

**Schritt 3**: Starten Sie den Code.

.. raw:: html

    <run></run>

.. code-block::

    sudo node 4_digit_7_segment_display.js

Nachdem der Code ausgeführt wurde, zählt das Programm hoch, erhöht sich um 1 pro Sekunde, und die 4-stellige 7-Segment-Anzeige zeigt den Zählstand an.

**Code**

.. 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);

**Code-Erklärung**

.. 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];    

Initialisieren Sie die Pins 10, 25, 27 und 17 im Ausgabemodus und legen Sie sie im Array ``placePin`` ab, um die Steuerung der gemeinsamen Anode der vierstelligen 7-Segment-Anzeige zu erleichtern.

.. code-block:: js

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

Definieren Sie ein konstantes Array ``number``, um den hexadezimalen Segmentcode von 0 bis 9 (gemeinsame Anode) darzustellen.

.. code-block:: js

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

Schreiben Sie 0xff, um die digitale Röhre auszuschalten.

.. code-block:: js

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

Wählen Sie die Stelle des Werts aus. 
Es sollte jedes Mal nur eine Stelle aktiviert werden. 
Die aktivierte Stelle wird hoch geschrieben.

.. 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);

Dieser Code dient zum Einstellen der auf der 4-stelligen 7-Segment-Anzeige angezeigten Nummer.

Zunächst starten Sie die vierte Segmentanzeige und schreiben die einstellige Zahl.
Danach starten Sie die dritte Segmentanzeige und geben die Zehnerstelle ein;
danach starten Sie nacheinander die zweite und die erste Segmentanzeige
und schreiben die Hunderte und Tausende Stellen. 
Da die Auffrischgeschwindigkeit sehr schnell ist, sehen wir eine vollständige vierstellige Anzeige.

.. code-block:: js

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

Fügen Sie dem ``counter`` 
(die vierstellige digitale Röhre zeigt die Zahl plus eins an) 
jede verstrichene Sekunde eins hinzu.

Phänomen-Bild
-------------------------

.. image:: img/image81.jpeg