.. note::

    こんにちは、SunFounderのRaspberry Pi & Arduino & ESP32愛好家コミュニティへようこそ！Facebook上でRaspberry Pi、Arduino、ESP32についてもっと深く掘り下げ、他の愛好家と交流しましょう。

    **参加する理由は？**

    - **エキスパートサポート**：コミュニティやチームの助けを借りて、販売後の問題や技術的な課題を解決します。
    - **学び＆共有**：ヒントやチュートリアルを交換してスキルを向上させましょう。
    - **独占的なプレビュー**：新製品の発表や先行プレビューに早期アクセスしましょう。
    - **特別割引**：最新製品の独占割引をお楽しみください。
    - **祭りのプロモーションとギフト**：ギフトや祝日のプロモーションに参加しましょう。

    👉 私たちと一緒に探索し、創造する準備はできていますか？[|link_sf_facebook|]をクリックして今すぐ参加しましょう！

.. _2.1.8_js:

2.1.8 キーパッド
==================

はじめに
------------

キーパッドは、ボタンの矩形配列です。このプロジェクトでは、文字を入力するためにそれを使用します。

必要な部品
------------------------------

このプロジェクトで必要なコンポーネントは以下の通りです。

.. image:: ../img/list_2.1.5_keypad.png

全てのキットを購入するのは非常に便利です、こちらがリンクです：

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

    *   - 名前	
        - このキットのアイテム
        - リンク
    *   - Raphael Kit
        - 337
        - |link_Raphael_kit|

以下のリンクからそれらを個別に購入することもできます。

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

    *   - コンポーネントの紹介
        - 購入リンク

    *   - :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_keypad`
        - \-

回路図
-----------------

.. image:: ../img/image315.png


.. image:: ../img/image316.png


実験の手順
-----------------------

**ステップ1:** 回路を組み立てる。

.. image:: ../img/image186.png

**ステップ2:** コードファイルを開きます。

.. raw:: html

   <run></run>

.. code-block:: 

    cd ~/raphael-kit/nodejs/

**ステップ3:** 実行する。

.. raw:: html

   <run></run>

.. code-block:: 

    sudo node keypad.js

コードが実行された後、キーパッド上の押されたボタンの値（ボタン値）が画面に表示されます。

**コード**

.. code-block:: js

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

    var rowsPins = [18,23,24,25];
    var colsPins = [10,6,27,17];
    var keys = ["1","2","3","A",
            "4","5","6","B",
            "7","8","9","C",
            "*","0","#","D"];      

    for(let i=0;i<rowsPins.length;i++){
        rowsPins[i] = new Gpio(rowsPins[i],{mode: Gpio.OUTPUT})
    }
    for(let i=0;i<colsPins.length;i++){
        colsPins[i] = new Gpio(colsPins[i],{
            mode: Gpio.INPUT,
            pullUpDown: Gpio.PUD_DOWN,
            edge: Gpio.RISING_EDGE
        })
    }

    var last_key_pressed = 0;

    var col=-1;
    for(let i=0;i<colsPins.length;i++){
        colsPins[i].on('interrupt',()=>{
            col=i;
            pressed_keys=keys[row*colsPins.length+col];
            if(last_key_pressed!=pressed_keys){
                console.log(`${pressed_keys}`);
            }
            last_key_pressed = pressed_keys;
        });
    }

    var row=-1;
    setInterval(() => {
        row=(row+1)%rowsPins.length;
        for(let i=0;i<rowsPins.length;i++){
            rowsPins[i].digitalWrite(0);
        }
        rowsPins[row].digitalWrite(1);
    }, 10);


**コード説明**

.. code-block:: js

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

    var rowsPins = [18,23,24,25];
    var colsPins = [10,6,27,17];
    var keys = ["1","2","3","A",
            "4","5","6","B",
            "7","8","9","C",
            "*","0","#","D"];      

    for(let i=0;i<rowsPins.length;i++){
        rowsPins[i] = new Gpio(rowsPins[i],{mode: Gpio.OUTPUT})
    }
    for(let i=0;i<colsPins.length;i++){
        colsPins[i] = new Gpio(colsPins[i],{
            mode: Gpio.INPUT,
            pullUpDown: Gpio.PUD_DOWN,
            edge: Gpio.RISING_EDGE
        })
    }



キーパッドのスタイルにて、ピンの2セットとマトリックスを宣言します。

ピンの4つはキーパッドの行で、これらのピンをOUTPUTモードに設定します；
残りの4つのピンはキーパッドの列で、これらのピンをINPUTモードに設定し、それらのための立ち上がりエッジ割り込みを設定します。

主コントローラがキー値を取得できる原理は以下の通りです：
4つの行ピンは順番に高レベルを提供し、ボタンが押されると、
対応する列ピンは行ピンによって解放された高レベルを取得します、これにより立ち上がりエッジ割り込みがトリガーされます。

例えば、私がボタン **3** を押すと、2番目、3番目、4番目の行ピンが高レベルを放出しても影響はありません；
第1位置の行ピンが高レベルを放出すると、3番目の列ピンは高レベルを取得して立ち上がりエッジ割り込みをトリガーします。この時点で、1番目、2番目、4番目の列ピンはイベントをトリガーしません。

そして、高レベルを放出する1番目の行ピンと高レベルを取得する3番目の列ピンにより、メインコントローラは押されたボタンの位置が（1,3）であること、つまりボタン **3** であることを知ることができます。

.. image:: ../img/image187.png


.. code-block:: js

    var row=-1;
    setInterval(() => {
        row=(row+1)%rowsPins.length;
        for(let i=0;i<rowsPins.length;i++){
            rowsPins[i].digitalWrite(0);
        }
        rowsPins[row].digitalWrite(1);
    }, 10);

4つの行ピンは定期的に高を供給し、変数 ``row`` は現在作業中の行ピンを位置付けるために使用されます。

.. code-block:: js

    var col=-1;
    for(let i=0;i<colsPins.length;i++){
        colsPins[i].on('interrupt',()=>{
            col=i;
            // pressed_keys=keys[row*colsPins.length+col];
            // if(last_key_pressed!=pressed_keys){
            //     console.log(`${pressed_keys}`);
            // }
            // last_key_pressed = pressed_keys;
        });
    }

4つの列ピンのための割り込み関数を設定し、変数 ``col`` は立ち上がりエッジ割り込みイベントをトリガーする列ピンを位置付けるために使用されます。

.. code-block:: js

    pressed_keys=keys[row*colsPins.length+col];
    if(last_key_pressed!=pressed_keys){
        console.log(`${pressed_keys}`);
    }
    last_key_pressed = pressed_keys;

break関数内にも、 ``row`` と ``col`` に従って ``keys`` マトリックスから具体的なキー値を取得するためのコード部分があります。
そして、新しいキー値を毎回取得すると、その値が印刷されます。

現象の画像
------------------

.. image:: ../img/image188.jpeg