LEDの保護抵抗

2023-01-09 / tau / コメントする

対象とする回路

以下のような回路を考える。

ここで各記号の意味は以下の通り。

E：電源電圧
V_f：LEDにかかる順電圧
I_f：LEDを流れる順電圧
V_r：保護抵抗による電圧降下
R：保護抵抗値
I：回路を流れる電流（I = I_f）

V_f（順電圧）やI_f（順電流）は、それらを用いる人や場合によってLEDが発光し始める閾値や典型値など定義が異なっているが、ここではその時点の回路での値とする。

保護抵抗による電圧降下

保護抵抗による電圧降下、抵抗値、回路電流の間では、以下のようにオームの法則が成立する。V_rはIの線形関数となっている。

(1) $\begin{equation*} V_r = R I \end{equation*}$

LEDの特性

一方LEDの順電圧V_fも電流の関数だが、それは一般的な固定抵抗のものと異なり、電圧によって非線形的に電流が変化する。以下は赤色LEDの特性曲線を概ねのイメージで描いた例。

LEDの電流～電圧特性の特徴は以下の通り。

LEDにかかる順電圧がある閾値を越えるまでは電流は流れず発光しない
順電圧が閾値を越えると、電圧値に対して急に電流が増加する
順電圧の僅かな変動に対して、順電流の変動が大きい

LEDの内部抵抗で考えると以下のように表現できる。

閾値以下ではLEDの内部抵抗は∞と考えてもよいくらい大きい
閾値を越えると、順電圧の増加に対して内部抵抗が急激に減少していく

回路に関する計算

基礎式

LEDの順電流・順電圧に関する特性曲線をI = I_f(V_f)という関数で表し、電源とLEDの内部抵抗をゼロとして考えると、回路全体の電圧のバランスは以下のようになる。

(2) $\begin{equation*} E = V_f + RI = V_f + R I_f(V_f) \end{equation*}$

これをIfについて解くと以下のようになる。

(3) $\begin{equation*} R = \dfrac{E - V_f}{I_f(V_f)} \end{equation*}$

I_fがV_fの関数になっているのでややこしいが、一般にはデータシートの典型値などをそのまま用いて計算する例が多い。たとえば電源電圧が3.3Vで赤色LEDを発光させる場合、典型値としてI_fTYP=20mAの時にV_fTYP=2Vという値が示されているとすると保護抵抗値は以下のようになる。

(4) $\begin{equation*} R = \dfrac{3.3 - 2}{0.02} = 65 \Omega \end{equation*}$

よく見かける保護抵抗値は100Ωとか330Ωといった値だが、こういう場合のV_fやI_fがどのようになるか、また順電流を10mAや30mAにしたい場合抵抗値をどうするかといったことを知りたい場合は非線形な方程式を解かなければならない。

特性曲線にの読み取りによる計算

LEDの特性が先に示したような特性曲線のように与えられている場合、電源電圧3.3Vに対して順電流をI_f = 10mAとしたい場合は、グラフからV_f =2.4V程度となるので、保護抵抗値は以下のように求められる。

(5) $\begin{equation*} R = \dfrac{3.3 - 2.4}{0.01} = 90 \Omega \end{equation*}$

順電流の絶対最大定格値が30mAの場合、これを越えないようにするための最低の保護抵抗値はどうなるか。先の特性曲線からI_f = 30mAに対してV_f = 2.6V程度と読み取れるので、以下のように計算される。

(6) $\begin{equation*} R = \dfrac{3.3 - 2.6}{0.03} \fallingdotseq 23.33 \Omega \end{equation*}$

市販のLEDのデータ

市販のLEDのデータシートの値の例は以下のようになっていた。なおA社のデータシートによると、より長期間使用するために順電流値を10～30mAの間で使用することが推奨されている。

これらのLEDを典型値で用いる場合の保護抵抗値を計算してみる。A社の赤、青・緑のLEDを5Vで使う場合、

(7) $\begin{equation*} \left\{ \begin{align} \dfrac{5 - 2.1}{0.02} &= 145 \Omega \\ \dfrac{5 - 3.4}{0.02} &= 80 \Omega \end{align} \end{equation*}$

またB社の赤、緑のLEDを3.3Vで使う場合、

(8) $\begin{equation*} \left\{ \begin{align} \dfrac{3.3 - 1.9}{0.01} &= 140 \Omega \\ \dfrac{3.3 - 2}{0.01} &= 130 \Omega \end{align} \end{equation*}$

なお各LEDのI_fとV_fの関係をデータシートの特性曲線から典型値で読み取ってみると以下のようになり、概ね表の値に一致する。

A社の赤LED→20mAに対して約2.13V
A社の緑・青LED→20mAに対して約3.4V
B社の赤LED→10mAに対して1.9V

不明LEDの特性曲線

Raspberry Pi用のキットにはパーツのデータシートや型番などがなく、LEDの特性も分からない。そこで、抵抗値を取り換えながらV_fやV_rを計測し、I_fの計算値をプロットしてみた。
データシートで見られるカーブの形をしており、赤・緑・黄色の特性が近く、青と白はより大きなV_fを必要としている。

特性曲線は指数関数で近似できるので、片対数軸で表示してみる。若干指数関数よりもV_fに対するI_fの増加率が緩やかな傾向がある。

Excelの分析ツールでも指数関数近似をしてくれるが、ここで以下の式形で回帰をしてみた。まず以下の式で回帰する。

(9) $\begin{equation*} I_f = a e^{b V_f} \end{equation*}$

一般にはa(exp(b V_f) – 1)の形で示されているが、回帰計算のしやすさのために形を少し変えている。両辺の対数をとって線形回帰する。

(10) $\begin{equation*} \ln I_f = \ln a + b V_f \end{equation*}$

結果は分析ツールのグラフと同じ形で以下のようになる。

片対数で表すと以下のようになる。

対数軸で線形性が良好な緑と黄は元の関数形でもよく一致しているが、赤と青・白についてはV_fが大きいところでの乖離が大きくなる。ただしV_fに対してI_fが小さく推定されるため、たまたまとはいえ安全側になっている。

各色のLEDに対する推定式の定数は以下のようになった。

対数化した線形式での相関係数は0.978～0.999程度であり、かなり高い。土質・地質工学や水理学のように自然現象を扱う場合とは異なる。

なお、I_fを希望する値にするための抵抗値は以下のように計算できる。

(11) $\begin{equation*} I_f = a \exp{b V_f} = a \exp{b (E - R I_f)} \end{equation*}$

この式をRについて解いて、

(12) $\begin{equation*} R = \dfrac{E - \dfrac{1}{b} \ln \dfrac{I_f}{a}}{I_f} \end{equation*}$

I_fを変化させた場合、各色のLEDに使う保護抵抗値は以下のように計算される。

キットのテキストでは220Ωの抵抗をよく用いているが、その場合は赤・緑・黄色が7～8mA程度、青と白では4mA程度ということになる。実際、青と白のLEDは少し暗めかなというくらいの明るさなので、これらの計算結果は腹落ちできる。

7セグメントLED

2023-01-03 / tau / コメントする

配置図

7セグメントLEDのピン配置は以下の通り（コモンカソードの場合）。

セグメントコード

各セグメントを0で消灯、1で点灯するとして、a～g及びDPを逆順にして0～Fを表示させるビット配列は以下のようになる。

表示	dp g f e d c b a	Hex
0	00111111	0x3f
1	00000110	0x06
2	01011011	0x5b
3	01001111	0x4f
4	01100110	0x66
5	01101101	0x6d
6	01111101	0x7d
7	00000111	0x07
8	01111111	0x7f
9	01101111	0x6f
A	01110111	0x77
B	01111100	0x7c
C	00111001	0x39
D	01011110	0x5e
E	01111001	0x79
F	01110001	0x71

GPIOに直接接続

7セグメントLEDの動作を確認するため、以下の様にRaspberry Pi 4BのGPIOに接続した。

点灯テストは以下のコードで行った。

LEDの各ピンにGPIOのピンを割り当て
0～9, A～Fの表示に対応するビットパターンを定義
- ビット配列はdp, g, f, e, d, c, b, aの逆順
16個のパターンを0.5秒ずつ表示
パターン表示はビット配列を必要分だけシフトして、ピンに対応するビットが1の場合にセグメントを点灯、0の場合に消灯
終了時に全セグメントを消灯

import RPi.GPIO as GPIO
import time

# Assign pins of 7-segment LED to GPIO pins
led = {'a':2, 'b':3, 'c':4, 'd':5, 'e':6, 'f':7, 'g':8, 'dp':9}
# Dfine inverted bit patterns of 0, ..., 9, A, ..., F (dp,g,f,e,d,c,b,a)
patterns = [0x3f, 0x06, 0x5b, 0x4f, 0x66, 0x6d, 0x7d, 0x07, 0x7f, 0x6f, 0x77, 0x7c, 0x39, 0x5e, 0x79, 0x71]

# Define function to call before ending
def destroy():
    for pin in led.values():
        GPIO.output(pin, GPIO.LOW)

# Start execution
GPIO.setmode(GPIO.BCM)

# Light off all segments
for pin in led.values():
    GPIO.setup(pin, GPIO.OUT, initial=GPIO.LOW)

# Light each pattern 0.5sec
for pattern in patterns:
    # Decode each bit of a pattern and send the level to GPIO pin
    for n, pin in enumerate(led.values()):
        if (pattern >> n) & 1:
            GPIO.output(pin, GPIO.HIGH)
        else:
            GPIO.output(pin, GPIO.LOW)
        print(pattern)
    time.sleep(0.5)

destroy()

import RPi.GPIO as GPIO

import time

# Assign pins of 7-segment LED to GPIO pins

led = {'a':2, 'b':3, 'c':4, 'd':5, 'e':6, 'f':7, 'g':8, 'dp':9}

# Dfine inverted bit patterns of 0, ..., 9, A, ..., F (dp,g,f,e,d,c,b,a)

patterns = [0x3f, 0x06, 0x5b, 0x4f, 0x66, 0x6d, 0x7d, 0x07, 0x7f, 0x6f, 0x77, 0x7c, 0x39, 0x5e, 0x79, 0x71]

# Define function to call before ending

def destroy():

for pin in led.values():

GPIO.output(pin, GPIO.LOW)

# Start execution

GPIO.setmode(GPIO.BCM)

# Light off all segments

for pin in led.values():

GPIO.setup(pin, GPIO.OUT, initial=GPIO.LOW)

# Light each pattern 0.5sec

for pattern in patterns:

# Decode each bit of a pattern and send the level to GPIO pin

for n, pin in enumerate(led.values()):

if (pattern >> n) & 1:

GPIO.output(pin, GPIO.HIGH)

else:

GPIO.output(pin, GPIO.LOW)

print(pattern)

time.sleep(0.5)

destroy()

このような接続の場合、LEDの8つのピンに対応してGPIOのピンも8つ消費される。

より少ないピンの数で7セグメントLEDを接続するためには、シフトレジスターを用いるのが一般的。

Raspberry Pi – LEDバーグラフ

2023-01-03 / tau / コメントする

概要

LEDバーグラフの実験例。DavinciキットのLEDはピン配置がわからなかったので、まず3.3VとGNDで確認した。

回路図

以下の通り、アレイになっている10個のLEDを3.3Vに抵抗を介して繋ぎ、各ポートに接続。ポートのレベルをHIGHにするとLED消灯、LOWにするとLED点灯になる。

コード

今回はピン番号を物理番号(GPIO.BOARD)で定義している。接続数は多いが独立したLEDを扱うのと同じで、以下の例では短い間隔でLEDを順次点灯・消灯させて、流れるように表示させている。

import RPi.GPIO as GPIO
import time

# Pin numbers in physical numbering (GPIO.BOARD)
pins = [11, 12, 13, 15, 16, 18, 22, 3, 5, 24]

# Closing process with resource release
def destroy():
    for pin in pins:
        GPIO.setup(pin, GPIO.HIGH)
    GPIO.cleanup()

# Set mode to physical numbering and light off all LED
GPIO.setmode(GPIO.BOARD)
for pin in pins:
    GPIO.setup(pin, GPIO.OUT, initial=GPIO.HIGH)

# Execution start
try:
    while True:
        # Turn on, wait 0.1sec and turn off LED in order
        for pin in pins:
            GPIO.output(pin, GPIO.LOW)
            time.sleep(0.1)
            GPIO.output(pin, GPIO.HIGH)
except KeyboardInterrupt:
    destroy()

import RPi.GPIO as GPIO

import time

# Pin numbers in physical numbering (GPIO.BOARD)

pins = [11, 12, 13, 15, 16, 18, 22, 3, 5, 24]

# Closing process with resource release

def destroy():

for pin in pins:

GPIO.setup(pin, GPIO.HIGH)

GPIO.cleanup()

# Set mode to physical numbering and light off all LED

GPIO.setmode(GPIO.BOARD)

for pin in pins:

GPIO.setup(pin, GPIO.OUT, initial=GPIO.HIGH)

# Execution start

try:

while True:

# Turn on, wait 0.1sec and turn off LED in order

for pin in pins:

GPIO.output(pin, GPIO.LOW)

time.sleep(0.1)

GPIO.output(pin, GPIO.HIGH)

except KeyboardInterrupt:

destroy()

Raspberry Pi – RGB LED

2023-01-03 / tau / コメントする

概要

DavinciキットのRGB LEDを試してみる。オリジナルのコードを少し変えて、3色をまとめて扱うするクラスを作ってみた。また、徐々に明るさを変化させてみた。

回路

RGB LEDのピン配置は以下のようになっており、最も長いピンがGNDでRed-GND-Green-Blueの順に配置されている。

回路図は以下の通り。

コマンドラインで以下を実行して、接続を確認。

>>> import RPi.GPIO as GPIO
>>> GPIO.setmode(GPIO.BCM)　→GPIOのモード設定
>>> GPIO.setup(17, GPIO.OUT)　→以下、R/G/Bのピン設定
>>> GPIO.setup(18, GPIO.OUT)
>>> GPIO.setup(27, GPIO.OUT)
>>> GPIO.output(17, GPIO.HIGH)　→赤LEDテスト
>>> GPIO.output(17, GPIO.LOW)
>>> GPIO.output(18, GPIO.HIGH)　→緑LEDテスト
>>> GPIO.output(18, GPIO.LOW)
>>> GPIO.output(27, GPIO.HIGH)　→青LEDテスト
>>> GPIO.output(27, GPIO.LOW)
>>> GPIO.cleanup()　→リソース解放

>>> import RPi.GPIO as GPIO

>>> GPIO.setmode(GPIO.BCM)　→GPIOのモード設定

>>> GPIO.setup(17, GPIO.OUT)　→以下、R/G/Bのピン設定

>>> GPIO.setup(18, GPIO.OUT)

>>> GPIO.setup(27, GPIO.OUT)

>>> GPIO.output(17, GPIO.HIGH)　→赤LEDテスト

>>> GPIO.output(17, GPIO.LOW)

>>> GPIO.output(18, GPIO.HIGH)　→緑LEDテスト

>>> GPIO.output(18, GPIO.LOW)

>>> GPIO.output(27, GPIO.HIGH)　→青LEDテスト

>>> GPIO.output(27, GPIO.LOW)

>>> GPIO.cleanup()　→リソース解放

基本コード

辞書でR/G/Bのピン番号を設定し、周波数を100HzにしてLEDの発色を確認。

import RPi.GPIO as GPIO
import time

# Define GPIO pins to connect each color of LED
led = {'red': 17, 'green': 18, 'blue': 27}

# Setup GPIO
GPIO.setmode(GPIO.BCM)
for pin in list(led.values()):
    GPIO.setup(pin, GPIO.OUT)

# Prepare PWMs for 3 colors with frequency
frequency = 100
pwm_r = GPIO.PWM(led['red'], frequency)
pwm_g = GPIO.PWM(led['green'], frequency)
pwm_b = GPIO.PWM(led['blue'], frequency)

# Define closing function
def destroy():
    for pin in list(led.values()):
        pwm_r.stop()
        pwm_g.stop()
        pwm_b.stop()
    GPIO.cleanup()

# Light LED for 3 seconds
pwm_r.start(20)
pwm_g.start(70)
pwm_b.start(40)
time.sleep(3)
destroy()

import RPi.GPIO as GPIO

import time

# Define GPIO pins to connect each color of LED

led = {'red': 17, 'green': 18, 'blue': 27}

# Setup GPIO

GPIO.setmode(GPIO.BCM)

for pin in list(led.values()):

GPIO.setup(pin, GPIO.OUT)

# Prepare PWMs for 3 colors with frequency

frequency = 100

pwm_r = GPIO.PWM(led['red'], frequency)

pwm_g = GPIO.PWM(led['green'], frequency)

pwm_b = GPIO.PWM(led['blue'], frequency)

# Define closing function

def destroy():

for pin in list(led.values()):

pwm_r.stop()

pwm_g.stop()

pwm_b.stop()

GPIO.cleanup()

# Light LED for 3 seconds

pwm_r.start(20)

pwm_g.start(70)

pwm_b.start(40)

time.sleep(3)

destroy()

クラス化と色変化

3色のLEDをまとめて扱うクラスを定義。

コンストラクターでピン番号と周波数を指定してインスタンスを生成
startメソッドでPWMの作動開始
changeDutyCycleメソッドでデューティー比を変更設定
stopメソッドでPWM停止とGPIOのリソース解放

定数COLORSで定義した色を順次発色させている。カラーコードからデューティー比への変換は1つの関数で一括して行っている。

import RPi.GPIO as GPIO
import time

# Color cord series to light LED in order
COLORS = [0xFF0000, 0x00FF00, 0x0000FF, 0xFFFF00, 0xFF00FF, 0x00FFFF]

# Function to convert from 2-bytes hexadecimal to 0-100 percantage
def color_code_to_duty_cycle(color_code):
    b_cycle = (color_code & 0x0000FF) / 255 * 100
    g_cycle = ((color_code & 0x00FF00) >> 8) / 255 * 100
    r_cycle = ((color_code & 0xFF0000) >> 16) / 255 * 100
    return [r_cycle, g_cycle, b_cycle]

# Class to treat three colors LED collectively
class RgbLed:
    # Constructor with pin numbers and frequency
    def __init__(self, red_pin, green_pin, blue_pin, frequency):
        # Dictionary of color name and GPIO pin number
        self.pins = {}
        self.pins['red'] = red_pin
        self.pins['green'] = green_pin
        self.pins['blue'] = blue_pin
        # Set GPIO mode to BCM
        GPIO.setmode(GPIO.BCM)
        # Setup pins for output
        for pin in list(self.pins.values()):
            GPIO.setup(pin, GPIO.OUT)
        # Generate PWM for 3 colors and assigne to pins
        self.pwm_r = GPIO.PWM(self.pins['red'], frequency)
        self.pwm_g = GPIO.PWM(self.pins['green'], frequency)
        self.pwm_b = GPIO.PWM(self.pins['blue'], frequency)

    # Method to start PWM
    def start(self):
        self.pwm_r.start(100)
        self.pwm_g.start(100)
        self.pwm_b.start(100)

    # Method to change duty cycles of 3 colors
    def changeDutyCycle(self, r, g, b):
        self.pwm_r.ChangeDutyCycle(r)
        self.pwm_g.ChangeDutyCycle(g)
        self.pwm_b.ChangeDutyCycle(b)

    # Method to stop PWM and release resources
    def stop(self):
        self.pwm_r.stop()
        self.pwm_g.stop()
        self.pwm_b.stop()
        GPIO.cleanup()

# Execution start
led = RgbLed(17, 18, 27, 100)

try:
    led.start()
    while True:
        for color in COLORS:
            # Convert R/G/B color level to percentage
            [r, g, b] = color_code_to_duty_cycle(color)
            # Change duty cicles and wait
            led.changeDutyCycle(r, g, b)
            time.sleep(1)
except KeyboardInterrupt:
    led.stop()

import RPi.GPIO as GPIO

import time

# Color cord series to light LED in order

COLORS = [0xFF0000, 0x00FF00, 0x0000FF, 0xFFFF00, 0xFF00FF, 0x00FFFF]

# Function to convert from 2-bytes hexadecimal to 0-100 percantage

def color_code_to_duty_cycle(color_code):

b_cycle = (color_code & 0x0000FF) / 255 * 100

g_cycle = ((color_code & 0x00FF00) >> 8) / 255 * 100

r_cycle = ((color_code & 0xFF0000) >> 16) / 255 * 100

return [r_cycle, g_cycle, b_cycle]

# Class to treat three colors LED collectively

class RgbLed:

# Constructor with pin numbers and frequency

def __init__(self, red_pin, green_pin, blue_pin, frequency):

# Dictionary of color name and GPIO pin number

self.pins = {}

self.pins['red'] = red_pin

self.pins['green'] = green_pin

self.pins['blue'] = blue_pin

# Set GPIO mode to BCM

GPIO.setmode(GPIO.BCM)

# Setup pins for output

for pin in list(self.pins.values()):

GPIO.setup(pin, GPIO.OUT)

# Generate PWM for 3 colors and assigne to pins

self.pwm_r = GPIO.PWM(self.pins['red'], frequency)

self.pwm_g = GPIO.PWM(self.pins['green'], frequency)

self.pwm_b = GPIO.PWM(self.pins['blue'], frequency)

# Method to start PWM

def start(self):

self.pwm_r.start(100)

self.pwm_g.start(100)

self.pwm_b.start(100)

# Method to change duty cycles of 3 colors

def changeDutyCycle(self, r, g, b):

self.pwm_r.ChangeDutyCycle(r)

self.pwm_g.ChangeDutyCycle(g)

self.pwm_b.ChangeDutyCycle(b)

# Method to stop PWM and release resources

def stop(self):

self.pwm_r.stop()

self.pwm_g.stop()

self.pwm_b.stop()

GPIO.cleanup()

# Execution start

led = RgbLed(17, 18, 27, 100)

try:

led.start()

while True:

for color in COLORS:

# Convert R/G/B color level to percentage

[r, g, b] = color_code_to_duty_cycle(color)

# Change duty cicles and wait

led.changeDutyCycle(r, g, b)

time.sleep(1)

except KeyboardInterrupt:

led.stop()

色と輝度の変化

R/G/Bを順に徐々に明滅させる例。カラーコードや変換関数は使わず、直接各色のデューティー比を0～100～0に変化させている。

import RPi.GPIO as GPIO
import time

# Class to treat three colors LED collectively
class RgbLed:
    # Constructor with pin numbers and frequency
    def __init__(self, red_pin, green_pin, blue_pin, frequency):
        # Dictionary of color name and GPIO pin number
        self.pins = {}
        self.pins['red'] = red_pin
        self.pins['green'] = green_pin
        self.pins['blue'] = blue_pin
        # Set GPIO mode to BCM
        GPIO.setmode(GPIO.BCM)
        # Setup pins for output
        for pin in list(self.pins.values()):
            GPIO.setup(pin, GPIO.OUT)
        # Generate PWM for 3 colors and assigne to pins
        self.pwm_r = GPIO.PWM(self.pins['red'], frequency)
        self.pwm_g = GPIO.PWM(self.pins['green'], frequency)
        self.pwm_b = GPIO.PWM(self.pins['blue'], frequency)

    # Method to start PWM
    def start(self):
        self.pwm_r.start(100)
        self.pwm_g.start(100)
        self.pwm_b.start(100)

    # Method to change duty cycles of 3 colors
    def changeDutyCycle(self, r, g, b):
        self.pwm_r.ChangeDutyCycle(r)
        self.pwm_g.ChangeDutyCycle(g)
        self.pwm_b.ChangeDutyCycle(b)

    # Method to stop PWM and release resources
    def stop(self):
        self.pwm_r.stop()
        self.pwm_g.stop()
        self.pwm_b.stop()
        GPIO.cleanup()

# Execution start
led = RgbLed(17, 18, 27, 100)

try:
    led.start()
    # Cyclicly change the color and blightness of LED
    while True:
        for r in range(0, 100):
            led.changeDutyCycle(r, 0, 0)
            time.sleep(0.01)
        for r in range(100, 0, -1):
            led.changeDutyCycle(r, 0, 0)
            time.sleep(0.01)
        for g in range(0, 100):
            led.changeDutyCycle(0, g, 0)
            time.sleep(0.01)
        for g in range(100, 0, -1):
            led.changeDutyCycle(0, g, 0)
            time.sleep(0.01)
        for b in range(0, 100):
            led.changeDutyCycle(0, 0, b)
            time.sleep(0.01)
        for b in range(100, 0, -1):
            led.changeDutyCycle(0, 0, b)
            time.sleep(0.01)
except KeyboardInterrupt:
    led.stop()

import RPi.GPIO as GPIO

import time

# Class to treat three colors LED collectively

class RgbLed:

# Constructor with pin numbers and frequency

def __init__(self, red_pin, green_pin, blue_pin, frequency):

# Dictionary of color name and GPIO pin number

self.pins = {}

self.pins['red'] = red_pin

self.pins['green'] = green_pin

self.pins['blue'] = blue_pin

# Set GPIO mode to BCM

GPIO.setmode(GPIO.BCM)

# Setup pins for output

for pin in list(self.pins.values()):

GPIO.setup(pin, GPIO.OUT)

# Generate PWM for 3 colors and assigne to pins

self.pwm_r = GPIO.PWM(self.pins['red'], frequency)

self.pwm_g = GPIO.PWM(self.pins['green'], frequency)

self.pwm_b = GPIO.PWM(self.pins['blue'], frequency)

# Method to start PWM

def start(self):

self.pwm_r.start(100)

self.pwm_g.start(100)

self.pwm_b.start(100)

# Method to change duty cycles of 3 colors

def changeDutyCycle(self, r, g, b):

self.pwm_r.ChangeDutyCycle(r)

self.pwm_g.ChangeDutyCycle(g)

self.pwm_b.ChangeDutyCycle(b)

# Method to stop PWM and release resources

def stop(self):

self.pwm_r.stop()

self.pwm_g.stop()

self.pwm_b.stop()

GPIO.cleanup()

# Execution start

led = RgbLed(17, 18, 27, 100)

try:

led.start()

# Cyclicly change the color and blightness of LED

while True:

for r in range(0, 100):

led.changeDutyCycle(r, 0, 0)

time.sleep(0.01)

for r in range(100, 0, -1):

led.changeDutyCycle(r, 0, 0)

time.sleep(0.01)

for g in range(0, 100):

led.changeDutyCycle(0, g, 0)

time.sleep(0.01)

for g in range(100, 0, -1):

led.changeDutyCycle(0, g, 0)

time.sleep(0.01)

for b in range(0, 100):

led.changeDutyCycle(0, 0, b)

time.sleep(0.01)

for b in range(100, 0, -1):

led.changeDutyCycle(0, 0, b)

time.sleep(0.01)

except KeyboardInterrupt:

led.stop()

Raspberry Pi – LED点滅

2023-01-01 / tau / コメントする

概要

SunFounderのDa Vinciキットを買ったので、まずLED点滅から勉強。実行の主要部分を強調するため一部簡略化した。流れは以下の通り。

LEDと保護抵抗を直列に繋ぎ、アノード側を電源ライン、カソード側をGPIO17に接続
- GPIO17がHIGH (3.3V)のときは電源電圧とバランスしてLEDが消灯
- GPIO17がLOW (0V)の時は電流が流れてLEDが点灯
MicoroPythonで、GPIO17のHIGH/LOWをタイマーでウェイトさせながら切替え

要点

GPIOを制御するライブラリーRPi.GPIOをGPIOの名前でインポート
GPIO.setmode(GPIO.BCM)でBCMナンバリングモードに設定
GPIO.setup(ピン番号, GPIO.OUT, initial=GPIO.HIGH)でGPIO17を出力に設定し、初期レベルをHIGH (LED消灯)に設定
GPIO.output(ピン番号, GPIO.HIGH/LOW)で電圧レベルを切替え
キーボード割込みにtry～except KeyboardInterrupt～を利用
終了時にGPIO.cleanup()でリソースを解放

回路図

LEDのアノード側に220Ωの抵抗を介して3V3 (3.3V)へ、カソード側はGPIO17に繋ぐ。DavinciのLEDの定格電流は不明だが20mAとすると、この回路の場合はi = 3.3/220で15mAで定格内に納まっている。

回路組み立て

ブレッドボードにGPIO拡張ボードを挿し、Raspiと接続。

テスト

コマンドライン

RaspiのThonnyを立ち上げ、コマンドラインで以下を実行していく。

まずライブラリーのインポート。

>>> import RPi.GPIO as GPIO

1	>>> import RPi.GPIO as GPIO

エラーが出ず無事にインポートされたので、次はGPIOのモードをBCMにセット。

>>> GPIO.setmode(GPIO.BCM)

1	>>> GPIO.setmode(GPIO.BCM)

LEDのピン番号をBCMの17にセット。

>>> led = 17

1	>>> led = 17

GPIO17を出力用にし、初期値をHIGH (3.3V)にセット。

>>> GPIO.setup(led, GPIO.OUT, initial=GPIO.HIGH)

1	>>> GPIO.setup(led, GPIO.OUT, initial=GPIO.HIGH)

GPIO17の電圧レベルをLOW (0V)にセットし、LEDの点灯を確認。

>>> GPIO.outpu(led, GPIO.LOW)

1	>>> GPIO.outpu(led, GPIO.LOW)

GPIO17の電圧レベルをHIGHにセットし、LEDの消灯を確認。

>>> GPIO.output(led, GPIO.LOW)

1	>>> GPIO.output(led, GPIO.LOW)

スクリプト

とりあえず以下のスクリプトでLEDの点滅を確認。

import RPi.GPIO as GPIO
import time

led_cathode = 17
GPIO.setmode(GPIO.BCM)
GPIO.setup(led_cathode, GPIO.OUT, initial=GPIO.HIGH)

while True:
    GPIO.output(led_cathode, GPIO.LOW)
    time.sleep(0.5)
    GPIO.output(led_cathode, GPIO.HIGH)
    time.sleep(0.5)

import RPi.GPIO as GPIO

import time

led_cathode = 17

GPIO.setmode(GPIO.BCM)

GPIO.setup(led_cathode, GPIO.OUT, initial=GPIO.HIGH)

while True:

GPIO.output(led_cathode, GPIO.LOW)

time.sleep(0.5)

GPIO.output(led_cathode, GPIO.HIGH)

time.sleep(0.5)

CTRL-Cでキーボード割込みがあったときに安全に終了するための処理を導入。

import RPi.GPIO as GPIO
import time

# Define that LED cathode is connected to GPIO17
led_cathode = 17

# Define a GPIO setup function
def setup():
    # Set the GPIO mode to BCM numbering
    GPIO.setmode(GPIO.BCM)
    # Set LED pin (GPIO17) to output and initial level to Hith (3.3V)
    GPIO.setup(led_cathode, GPIO.OUT, initial=GPIO.HIGH)

# Define a destroy function for safe ending
def destroy():
    # Turn off LED
    GPIO.output(led_cathode, GPIO.HIGH)
    # Release resource
    GPIO.cleanup()

# Define a main function for LED blinking process
def main():
    while True:
        # Turn on LED and wait 0.5sec
        GPIO.output(led_cathode, GPIO.LOW)
        time.sleep(0.5)
        # Turn off LED and wait 0.5sec
        GPIO.output(led_cathode, GPIO.HIGH)
        time.sleep(0.5)

# Setup GPIO
setup()
# Excecute main process with keyboard interrupt exception
try:
    # Execute main process
    main()
# Quit process when CTRL-C is pressed
except KeyboardInterrupt:
    # Cleanup before end process
    destroy()

import RPi.GPIO as GPIO

import time

# Define that LED cathode is connected to GPIO17

led_cathode = 17

# Define a GPIO setup function

def setup():

# Set the GPIO mode to BCM numbering

GPIO.setmode(GPIO.BCM)

# Set LED pin (GPIO17) to output and initial level to Hith (3.3V)

GPIO.setup(led_cathode, GPIO.OUT, initial=GPIO.HIGH)

# Define a destroy function for safe ending

def destroy():

# Turn off LED

GPIO.output(led_cathode, GPIO.HIGH)

# Release resource

GPIO.cleanup()

# Define a main function for LED blinking process

def main():

while True:

# Turn on LED and wait 0.5sec

GPIO.output(led_cathode, GPIO.LOW)

time.sleep(0.5)

# Turn off LED and wait 0.5sec

GPIO.output(led_cathode, GPIO.HIGH)

time.sleep(0.5)

# Setup GPIO

setup()

# Excecute main process with keyboard interrupt exception

try:

# Execute main process

main()

# Quit process when CTRL-C is pressed

except KeyboardInterrupt:

# Cleanup before end process

destroy()

SunFounderサイトではsetup()以下をif __name__ == '__main__':ブロックの中に入れているが、これはこのファイルが直接実行されたことを確認するためのもの

if __name__ == '__main__':
    setup()
    try:
        main()
    except KeyboardInterrupt:
        destroy()

if __name__ == '__main__':

setup()

try:

main()

except KeyboardInterrupt:

destroy()

接続を反対にする

左記の回路ではLEDのアノード側に3.3Vを供給し、カソードを接続したGPIO17でHIGHの時にLED消灯、LOWの時にLED点灯とした。

一方、以下のようにアノード側の抵抗をGPIO17に接続し、カソードをGNDに接続しても動作させることができる。この場合、GPIO17がHIGHでLED点灯、LOWでLED消灯となる。

コードは以下の通り。GPIO.setup()ではinitialのデフォルトがGPIO.LOWとして明示的に指定していない。

import RPi.GPIO as GPIO
import time

led_anode = 17

def setup():
    GPIO.setmode(GPIO.BCM)
    GPIO.setup(led_anode, GPIO.OUT)

def destroy():
    GPIO.output(led_anode, GPIO.LOW)
    GPIO.cleanup()

def main():
    while True:
        GPIO.output(led_anode, GPIO.HIGH)
        time.sleep(0.5)
        GPIO.output(led_anode, GPIO.LOW)
        time.sleep(0.5)

setup()
try:
    main()
except KeyboardInterrupt:
    destroy()

import RPi.GPIO as GPIO

import time

led_anode = 17

def setup():

GPIO.setmode(GPIO.BCM)

GPIO.setup(led_anode, GPIO.OUT)

def destroy():

GPIO.output(led_anode, GPIO.LOW)

GPIO.cleanup()

def main():

while True:

GPIO.output(led_anode, GPIO.HIGH)

time.sleep(0.5)

GPIO.output(led_anode, GPIO.LOW)

time.sleep(0.5)

setup()

try:

main()

except KeyboardInterrupt:

destroy()

Raspberry Pi Pico～導入

2022-12-30 / tau / コメントする

概要

Raspberry Pi Picoを導入した記録。導入済みのRaspberry Pi 4Bに接続して、RaspbianのThonnyで動作確認。

購入したもの

Rasberry Pi Pico本体と接続用のUSBケーブル。

本体はプラスチック製のパッケージに入っていて、この上から透明フィルムでカバーされていた。フィルムがケースに貼り付けられているのが両側の耳の部分だけで間はペラペラと隙間が空いていたが、これくらいでも大丈夫なくらい頑丈ということか。

Picoの本体。右側がMicoroBのUSBソケットで、その左側に白いBOOTSELスイッチとLEDがある。

Thonnyの接続テスト

ファームウェアの準備

以下の手順でThonnyの接続環境を整えた。

Raspberry Pi親機を起動しておく
PicoのBOOTSELスイッチを押しながら、PicoとPi親機をUSBで接続
Picoがリムーバブルディスクとして認識されるのでファイルマネージャーで開く
/media/pi/RPI-RP2ディレクトリーが開き、INDEX.HTMとINDO_UF2.TXTの2つのファイルが入っている
INDEX.HTMをダブルクリックしてRaspberry Pi Documentationのページを表示し、MicroPythonのファームウェアをダウンロード
ダウンロードされた拡張子uf2のファイルをINDEX.HTMLと同じディレクトリーにコピー

Thonny接続テスト

Thonny右下のPython表示をクリックしてMycroPython (Raspberry Pi Pico)に変更
以下のコードを書いてローカルに保存、実行

Python

import machine led = machien.Pin(25, machine.Pin.OUT) led.value(1)

1
2
3
4

import machine

led = machien.Pin(25, machine.Pin.OUT)
led.value(1)
点灯を確認（左下の緑色LEDが点灯している）
led.value(0)に変更して実行してLEDを消灯

以下のコードでLEDのON/OFF点滅を確認

import machine, utime

led = machine.Pin(25, machine.Pin.OUT)
while True:
    led.value(1)
    utime.sleep(0.5)
    led.value(0)
    utime.sleep(0.5)

import machine, utime

led = machine.Pin(25, machine.Pin.OUT)

while True:

led.value(1)

utime.sleep(0.5)

led.value(0)

utime.sleep(0.5)

Picoの自動実行

自動実行方法

Picoにmain.pyファイルが保存されていると、電源接続後にその内容を実行する。

Thonnyを使っている場合、親機で実行確認後に同じ内容のファイルをmain.pyとしてPicoに保存する。

自動実行内容の編集・削除

main.pyを持つPicoからこのファイルを削除したり、別の内容に書き換えたい場合には、ThonnyのメニューからRun→Stop/Restart backendを指定。

停止後にmain.pyを削除したり書き換えた後、再度Stop/Restart backendで動作を開始させる。

注意点

BOOTSELは初期化

BOOTSELを押しながらPicoを接続するとPicoの内容が初期化される
初期化後に環境を構築すると、以後はBOOTSELを押さずに接続してその環境で実行できる
逆に言えば、BOOTSELで接続すると前の環境は消えてしまう

ファームウェアを入れるとRPI-RP2は見えなくなる

BOOTSEL直後はPicoがリムーバブルディスクとして/media/pi/RPI-RP2で確認できる
ここでたとえばMicroPythonのファームウェアを入れると/media/piの中が空になり、RPI-RP2は見えなくなる

ThonnyでPico側のファイルを確認できる

ただしローカルで作成したPythonコードはPicoと接続しているThonnyによってPicoに転送されている
これを確認するには、ThonnyをReguler modeで起動し、表示(View)でファイル(Files)をチェックする

Raspberry Pi～導入

2022-12-30 / tau / コメントする

概要

Raspberry Piを導入した記録。

KSYショップでRaspberry Pi 4のスターターキットを購入。OSはSDHCカードにインストール済みだったので、接続するだけで起動。OS書き込みからでもよかったが、品薄が続く中で本体購入可能なこのキットを選択。

ついでにKVMスイッチを介して、WindowsマシンとRaspberry Piを切り替えられるようにした。

購入したキット

KSYのPi4 B 4GB スターターキット 6点セット V4で、以下の内容。

KSY Raspberry Pi 4 Model B 4GB
Piケース OKdo 3ピース for 4B 透明
USB電源アダプター 5V 3A Type C 1.5m
OS書込済み Apacer microSDHC 32GB CL10 UHS-I
HDMIケーブル HDMI(A)-micro(D)
ヒートシンク 40x30x6 熱伝テープ付 for Pi

開封後のパーツ。ケースにOKdoのロゴ。

包装から出したパーツ。本体には技適マークもプリントされている。説明書は通常の注意書きレベル。

組み立て

ヒートシンク

ヒートシンクの熱伝導シートを始めにCPUに貼り付けたが、この後両面テープのヒートシンク側をはがすのに苦労した。

ケース

OKdo製のこのケースは3つに分かれている。

まず下側のケースに、コネクター位置を合わせながら本体を取り付ける。

起動

ひとまずメインマシンのモニター、マウス、キーボードを外してRaspiに接続。ACアダプターを接続して暫くすると起動。

起動後のwelcomeダイアログ。この後、locale選択や画面余白の調整などの設定へ進む。

更新にはちょっと時間がかかり、以下のようなエラーが出たがそのまま進む。更新のバージョンがstableからoldstableに変更されたということらしい。

この後KVMスイッチに繋ぎ変えて、無事にメインマシンとの切替えに成功。

コンソールからlsb_releas -aコマンドで確認したところ、OSはRaspbian GNU/Linux (buster)となっていた。

JS/ES – Promise

2022-12-30 / tau / コメントする

非同期実行の簡単な例

以下の例では2つのブロックが非同期に実行され、コードが書かれた順番ではなく実行時間の短い順に出力される。

setTimeout(() => {
  console.log('Long execution');
}, 300);

setTimeout(() => {
  console.log('Short execution');
}, 100);

// 100ms execution
// 300ms execution

setTimeout(() => {

console.log('Long execution');

}, 300);

setTimeout(() => {

console.log('Short execution');

}, 100);

// 100ms execution

// 300ms execution

Promiseによる実行順序の保証

基本形

Promiseオブジェクト.then()

この基本形では、以下の手順で処理間を同期させる。

Promiseオブジェクト生成
- 生成時の引数で渡す無名関数に先行処理を記述
- 無名関数の引数で処理終了を発行する関数(resolve)を受け取り
- 先行処理終了のところでresolve関数を実行
Promiseオブジェクトのthenメソッドを記述
- thenメソッドの引数で渡す無名処理に後続処理を記述
- この後続処理は、先行処理のresolve関数が実行された後に実行される

p = new Promise(resolve => {
  先行処理
　resolve();
});

p.then(() => {
  後続処理
});

p = new Promise(resolve => {

先行処理

　resolve();

});

p.then(() => {

後続処理

});

処理完了のための関数名は任意だが、staticメソッドと同じ関数名のresolveが使われる。

以下の例では、Promise・・・・・・・・・・・・・無名関数の引数をresolveとして受け取り、resolve関数を300ms待機後の表示の後に実行している。

そしてその実行後に100ms待機の処理が実行される。

let p = new Promise(resolve => {
  setTimeout(() => {
    console.log('300ms execution');
    resolve();
  }, 300);
});

p.then(() => {
  setTimeout(() => {
    console.log('100ms execution');
  }, 100);
});

// 300ms execution
// 100ms execution

let p = new Promise(resolve => {

setTimeout(() => {

console.log('300ms execution');

resolve();

}, 300);

});

p.then(() => {

setTimeout(() => {

console.log('100ms execution');

}, 100);

});

// 300ms execution

// 100ms execution

Promiseオブジェクトのthenメソッドには引数に無名関数を指定する。Promiseオブジェクトで設定したresolveメソッドが実行された後に引数の無名関数が実行される。

以下の例では、上のPromiseオブジェクトで設定した300ms待機後の表示の後に、thenメソッドで設定した100ms待機・表示が実行される。

// Promise.thenメソッドの無名関数に待機後処理を記述
promise.then(() => {
  setTimeout(() => {
    console.log('100ms execution');
  }, 100);
});

// 300ms execution
// 100ms execution

// Promise.thenメソッドの無名関数に待機後処理を記述

promise.then(() => {

setTimeout(() => {

console.log('100ms execution');

}, 100);

});

// 300ms execution

// 100ms execution

new Promise～then

生成したPromiseオブジェクトから直接thenメソッドを実行してもよい。

new Promise(resolve => {
  setTimeout(() => {
    console.log('300ms execution');
    resolve();
  }, 300);
}).then(() => {
  setTimeout(() => {
    console.log('100ms execution');
  }, 100);
});

// 300ms execution
// 100ms execution

new Promise(resolve => {

setTimeout(() => {

console.log('300ms execution');

resolve();

}, 300);

}).then(() => {

setTimeout(() => {

console.log('100ms execution');

}, 100);

});

// 300ms execution

// 100ms execution

Promiseオブジェクトを返す

優先実行させたい処理をPromiseオブジェクトとして、そのインスタンスを関数の戻り値とする書き方。関数にthenメソッドが適用できる。

// 関数の戻り値をPromiseとする例
function doFirst() {
  // 優先実行させたい関数をPromiseでラップ
  p = new Promise(resolve => {
    setTimeout(() => {
      console.log('300ms execution');
      resolve();
    }, 300);
  });
  // Promiseオブジェクトを返す
  return p;
}

// 戻り値のPromiseオブジェクトに対してthenを実行
doFirst().then(() => {
  setTimeout(() => {
    console.log('100ms executiohn');
  }, 100);
});

// 300ms execution
// 100ms executiohn

// 関数の戻り値をPromiseとする例

function doFirst() {

// 優先実行させたい関数をPromiseでラップ

p = new Promise(resolve => {

setTimeout(() => {

console.log('300ms execution');

resolve();

}, 300);

});

// Promiseオブジェクトを返す

return p;

}

// 戻り値のPromiseオブジェクトに対してthenを実行

doFirst().then(() => {

setTimeout(() => {

console.log('100ms executiohn');

}, 100);

});

// 300ms execution

// 100ms executiohn

resolveで値を渡す

resolve関数に引数を渡し、これをthenメソッドで受け取ることができる。

// resolve実行時に引数を渡す例
const promise = new Promise(resolve => {
  setTimeout(() => {
    console.log('300ms execution');
    // resolve実行時に引数を渡す
    resolve('Resolved!');
  }, 300);
});

// thenの無名関数の引数で3resolveに渡された引数を受け取る
promise.then(parameter => {
  // 受け取った引数を利用
  console.log(parameter);
  setTimeout(() => {
    console.log('100ms execution');
  }, 100);
});

// 300ms execution
// Resolved!
// 100ms execution

// resolve実行時に引数を渡す例

const promise = new Promise(resolve => {

setTimeout(() => {

console.log('300ms execution');

// resolve実行時に引数を渡す

resolve('Resolved!');

}, 300);

});

// thenの無名関数の引数で3resolveに渡された引数を受け取る

promise.then(parameter => {

// 受け取った引数を利用

console.log(parameter);

setTimeout(() => {

console.log('100ms execution');

}, 100);

});

// 300ms execution

// Resolved!

// 100ms execution

thenのチェイン

thenメソッドを連ねてシリアルに実行させる書き方。後続を持つthenメソッドの戻り値をPromiseオブジェクトとするのがミソ。

new Promise(resolve => {
  setTimeout(() => {
    console.log('300ms execution');
    resolve('Promise executed');
  }, 300);
// 1つ目のthen
}).then(() => {
  // thenメソッドでPromiseオブジェクトを返す
  return new Promise(resolve => {
    setTimeout(() => {
      console.log('200ms execution');
      resolve('First then method executed');
    }, 200);
  });
}).then(() => {
  // 最後のthenではPromise~resolveは不要
  setTimeout(() => {
    console.log('100ms execution');
  }, 100);
});

new Promise(resolve => {

setTimeout(() => {

console.log('300ms execution');

resolve('Promise executed');

}, 300);

// 1つ目のthen

}).then(() => {

// thenメソッドでPromiseオブジェクトを返す

return new Promise(resolve => {

setTimeout(() => {

console.log('200ms execution');

resolve('First then method executed');

}, 200);

});

}).then(() => {

// 最後のthenではPromise~resolveは不要

setTimeout(() => {

console.log('100ms execution');

}, 100);

});

reject

Promiseの処理で何らかの問題が生じた場合にrejectすることができる。この場合、resolveが実行されないのでthenは処理されず、直近のcatchが呼ばれる。

以下の例ではPromiseオブジェクトで300msのブロックの最後でrejectが実行され、thenメソッドは実行されずにcatchメソッドが実行される。

// 無名関数の2つ目の引数でreject関数を受け取る
promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('300ms execution');
    // reject関数を実行
    reject('Rejected!');
  }, 300);
})

// 正常にresolveされた場合
promise.then(() => {
  setTimeout(() => {
    console.log('100ms execution');
  }, 100);
// rejectされた場合
}).catch(err => console.log(err));

// 300ms execution
// Rejected!

// 無名関数の2つ目の引数でreject関数を受け取る

promise = new Promise((resolve, reject) => {

setTimeout(() => {

console.log('300ms execution');

// reject関数を実行

reject('Rejected!');

}, 300);

})

// 正常にresolveされた場合

promise.then(() => {

setTimeout(() => {

console.log('100ms execution');

}, 100);

// rejectされた場合

}).catch(err => console.log(err));

// 300ms execution

// Rejected!

Promise.all～全ての実行を待機

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('Took 100ms');
    resolve('value 1');
  }, 100);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('Took 200ms');
    resolve('value 3');
  }, 200);
});

const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('Took 300ms');
    resolve('value 2');
  }, 300);
});

// 3つのPromiseオブジェクトの実行を待ってからthenを実行。
Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log('All completed.');
  // resolveに渡された引数は配列として渡される。
  console.log(values);
});

// Took 100ms
// Took 200ms
// Took 300ms
// All completed.
// Array(3)
// 0: "value 1"
// 1: "value 3"
// 2: "value 2"
// length: 3

const promise1 = new Promise((resolve, reject) => {

setTimeout(() => {

console.log('Took 100ms');

resolve('value 1');

}, 100);

});

const promise2 = new Promise((resolve, reject) => {

setTimeout(() => {

console.log('Took 200ms');

resolve('value 3');

}, 200);

});

const promise3 = new Promise((resolve, reject) => {

setTimeout(() => {

console.log('Took 300ms');

resolve('value 2');

}, 300);

});

// 3つのPromiseオブジェクトの実行を待ってからthenを実行。

Promise.all([promise1, promise2, promise3]).then((values) => {

console.log('All completed.');

// resolveに渡された引数は配列として渡される。

console.log(values);

});

// Took 100ms

// Took 200ms

// Took 300ms

// All completed.

// Array(3)

// 0: "value 1"

// 1: "value 3"

// 2: "value 2"

// length: 3

MapLibre – Popup

2022-08-26 / tau / コメントする

概要

クリック位置に地物(Feature)があれば、その属性をポップアップで表示する。ここでは地理院ベクトルタイルを表示させた地図に地物を表示させ、これらをクリックしたときにその属性を表示させている。

クリック時の地物の捕捉方法はこちらを参照。

実装例

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Test - Popup</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script src="https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.css">
    <style>
      <!-- Popup内のスタイル -->
      .popup span {
        display: inline-block;
        width: 4.5em;
      }
    </style>
  </head>
  <body>
    <div id="map" style="width: 800px; height: 600px"></div>
    <script>
      // 地理院ベクトルタイルを表示
      let map = new maplibregl.Map({
        container: 'map',
        style: 'https://gsi-cyberjapan.github.io/gsivectortile-mapbox-gl-js/std.json',
        center: [135.0, 35.0],
        zoom: 13,
        minZoom: 4,
        maxZoom: 17,
      });

      map.on('load', () => {
        // 2つのPointを描く
        map.addSource('source_points', {
          type: 'geojson',
          data: {
            'type': 'FeatureCollection',
            'features': [
              {
                'type': 'Feature',
                'geometry': { 'type': 'Point', 'coordinates': [135.0, 35.0],},
                'properties': {
                  'id': 'point001',
                  'name': 'Bellybutton',
                }
              },
              {
                'type': 'Feature',
                'geometry': { 'type': 'Point', 'coordinates': [134.99, 35.012],},
                'properties': {
                  'id': 'point002',
                  'name': 'Route 175',
                }
              },
            ]
          }
        });

        // Pointを描くレイヤーでスタイルを指定
        map.addLayer({
          'id': 'layer_points',
          'type': 'circle',
          'source': 'source_points',
          'layout': {},
          'paint': {
            'circle-color': '#0000FF',
            'circle-radius': 20
          }
        });
      });

      // 地図上でクリックしたときの処理
      map.on('click', (evt) => {
        // クリック位置の経緯度
        let lng = evt.lngLat.lng;
        let lat = evt.lngLat.lat;

        // クリック位置のFeature群を取得／レイヤーを限定している
        let features = map.queryRenderedFeatures(evt.point, {layers: ['layer_points']});
        // 取得したFeature群の属性等をコンソールに表示する
        features.forEach((feature) => {
          if (typeof feature !== 'undefined') {
            let property = '<span>ID</span>' + ':' + feature.properties.id + '<br>'+
                           '<span>Name</span>' + ':' + feature.properties.name + '<br>' +
                           '<span>Type</span>' + ':' + feature.geometry.type + '<br>' +
                           '<span>Location</span>' + ':' + feature.geometry.coordinates;
            let popup = new maplibregl.Popup({
              closeOnClick: false,
              className: 'popup'
            })
              .setLngLat([lng, lat])
              .setHTML(property)
              .addTo(map);
          }
        });
      });
    </script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Test - Popup</title>

<style>

.popup span {

display: inline-block;

width: 4.5em;

}

</style>

</head>

<body>

// 地理院ベクトルタイルを表示

let map = new maplibregl.Map({

container: 'map',

style: 'https://gsi-cyberjapan.github.io/gsivectortile-mapbox-gl-js/std.json',

center: [135.0, 35.0],

zoom: 13,

minZoom: 4,

maxZoom: 17,

});

map.on('load', () => {

// 2つのPointを描く

map.addSource('source_points', {

type: 'geojson',

data: {

'type': 'FeatureCollection',

'features': [

{

'type': 'Feature',

'geometry': { 'type': 'Point', 'coordinates': [135.0, 35.0],},

'properties': {

'id': 'point001',

'name': 'Bellybutton',

}

{

'type': 'Feature',

'geometry': { 'type': 'Point', 'coordinates': [134.99, 35.012],},

'properties': {

'id': 'point002',

'name': 'Route 175',

}

]

}

});

// Pointを描くレイヤーでスタイルを指定

map.addLayer({

'id': 'layer_points',

'type': 'circle',

'source': 'source_points',

'layout': {},

'paint': {

'circle-color': '#0000FF',

'circle-radius': 20

}

});

// 地図上でクリックしたときの処理

map.on('click', (evt) => {

// クリック位置の経緯度

let lng = evt.lngLat.lng;

let lat = evt.lngLat.lat;

// クリック位置のFeature群を取得／レイヤーを限定している

let features = map.queryRenderedFeatures(evt.point, {layers: ['layer_points']});

// 取得したFeature群の属性等をコンソールに表示する

features.forEach((feature) => {

if (typeof feature !== 'undefined') {

let property = '<span>ID</span>' + ':' + feature.properties.id + '<br>'+

'<span>Name</span>' + ':' + feature.properties.name + '<br>' +

'<span>Type</span>' + ':' + feature.geometry.type + '<br>' +

'<span>Location</span>' + ':' + feature.geometry.coordinates;

let popup = new maplibregl.Popup({

closeOnClick: false,

className: 'popup'

})

.setLngLat([lng, lat])

.setHTML(property)

.addTo(map);

}

});

</script>

</body>

</html>

内容

Popupには任意のHTMLを書けるが、ここではqueryRenderedFeaturesで取得した地物の属性を出力している。複数の地物が捕捉された場合、その分だけのポップアップが表示される。Popupは内容に合わせて幅や高さが調整される。

let popup = new maplibregl.Popup({
  closeOnClick: false,
  className: 'popup'
})
  .setLngLat([lng, lat])
  .setHTML(property)
  .addTo(map);

let popup = new maplibregl.Popup({

closeOnClick: false,

className: 'popup'

})

.setLngLat([lng, lat])

.setHTML(property)

.addTo(map);

Popup生成時の引数で、クリック時の消去をfalseにして、スタイル設定用のHTMLクラス名を設定している。

その後、生成したPopupインスタンスの位置と表示内容をセットして、地図に貼り付けている。

ポップアップ内で桁を揃えるためのスタイルは、head要素内で定義している。

    <style>
      <!-- Popup内のスタイル -->
      .popup span {
        display: inline-block;
        width: 4.5em;
      }
    </style>

<style>

.popup span {

display: inline-block;

width: 4.5em;

}

</style>

MapLibre – ソースの地物を捕捉する

2022-08-25 / tau / コメントする

概要

地図上でマウスクリックしてaddSourceとaddLayerで表示した地物（Feature)を捕捉する。

FeatureCollectionの個々のFeatureに'properties'で属性を設定
map.on('click', ...)でマウスクリックを捕捉
クリック位置で地物を表示したレイヤ上の地物があれば、その属性等をコンソールに表示

実装例

<div id="map" style="width: 800px; height: 600px"></div>
<script>
  let map = new maplibregl.Map({
    container: 'map',
    style: 'https://gsi-cyberjapan.github.io/gsivectortile-mapbox-gl-js/std.json',
    center: [135.0, 35.0],
    zoom: 13,
    minZoom: 4,
    maxZoom: 17,
  });

  map.on('load', () => {
    // 2つのPointを描く
    map.addSource('source_points', {
      type: 'geojson',
      data: {
        'type': 'FeatureCollection',
        'features': [
          {
            'type': 'Feature',
            'geometry': { 'type': 'Point', 'coordinates': [135.0, 35.0],},
            'properties': {
              'id': 'point001',
              'name': 'Bellybutton',
            }
          },
          {
            'type': 'Feature',
            'geometry': { 'type': 'Point', 'coordinates': [134.99, 35.012],},
            'properties': {
              'id': 'point002',
              'name': 'Route 175',
            }
          },
        ]
      }
    });

    // Pointを描くレイヤーでスタイルを指定
    map.addLayer({
      'id': 'layer_points',
      'type': 'circle',
      'source': 'source_points',
      'layout': {},
      'paint': {
        'circle-color': '#0000FF',
        'circle-radius': 20
      }
    });
  });

  // 地図上でクリックしたときの処理
  map.on('click', (evt) => {
    // クリック位置のFeature群を取得／レイヤーを限定している
    let features = map.queryRenderedFeatures(evt.point, {layers: ['layer_points']});
    // 取得したFeature群の属性等をコンソールに表示する
    features.forEach((feature) => {
      if (typeof feature !== 'undefined') {
        console.log('ID      :' + feature.properties.id);
        console.log('Name    :' + feature.properties.name);
        console.log('Type    :' + feature.geometry.type);
        console.log('Location:' + feature.geometry.coordinates);
      }
    });
  });
</script>

let map = new maplibregl.Map({

container: 'map',

style: 'https://gsi-cyberjapan.github.io/gsivectortile-mapbox-gl-js/std.json',

center: [135.0, 35.0],

zoom: 13,

minZoom: 4,

maxZoom: 17,

});

map.on('load', () => {

// 2つのPointを描く

map.addSource('source_points', {

type: 'geojson',

data: {

'type': 'FeatureCollection',

'features': [

{

'type': 'Feature',

'geometry': { 'type': 'Point', 'coordinates': [135.0, 35.0],},

'properties': {

'id': 'point001',

'name': 'Bellybutton',

}

{

'type': 'Feature',

'geometry': { 'type': 'Point', 'coordinates': [134.99, 35.012],},

'properties': {

'id': 'point002',

'name': 'Route 175',

}

]

}

});

// Pointを描くレイヤーでスタイルを指定

map.addLayer({

'id': 'layer_points',

'type': 'circle',

'source': 'source_points',

'layout': {},

'paint': {

'circle-color': '#0000FF',

'circle-radius': 20

}

});

// 地図上でクリックしたときの処理

map.on('click', (evt) => {

// クリック位置のFeature群を取得／レイヤーを限定している

let features = map.queryRenderedFeatures(evt.point, {layers: ['layer_points']});

// 取得したFeature群の属性等をコンソールに表示する

features.forEach((feature) => {

if (typeof feature !== 'undefined') {

console.log('ID :' + feature.properties.id);

console.log('Name :' + feature.properties.name);

console.log('Type :' + feature.geometry.type);

console.log('Location:' + feature.geometry.coordinates);

}

});

</script>

内容

FeatureCollectionで2つのPointを定義し、それぞれのidとnameを属性として設定している
Pointのレンダリングは青い丸としている
クリック時のリスナーをmap.on('click', ...)で登録している
クリック位置のFeature群をqueryRenceredFeaturesで取得している
- 第2引数で取得対象のソースがあるレイヤーを限定している
取得したFeature群をforEachで1つずつ取り出して表示
- このとき取り出した1つのfeatureがundefinedでない場合だけ表示させている