Raspberry Pi と Python を使ったブラウザ設定【目覚まし時計】

electric

今回は、ブラウザから設定した時間に動作する、目覚まし時計を作りたいと思います。
楽しそうだったら作ってみて♪

やりたいこと

・ブラウザから時間を設定し、
・設定した時間にラズパイに取り付けたスピーカーから音を出す

アイコンは、AutoDrawにて作成

やることリスト

上記の「やりたいこと」をみて、
どんな作業が必要か、自分で項目を考えてみてください。
これを考えることで、「プログラミング的思考」が身に付いていきます。

作業項目備考
ラズパイからスピーカーに音を出す
ブラウザに表示する設定画面の作成
ブラウザで設定した時間をラズパイで保存保存ってどの場所にしようか?
DBに書くほどのモノでもないので、ファイルに書こうかな?
ということは、cronのファイルに直書きでもいい気もする。
設定した時間になると、スピーカーから音を出すcronを使用

ラズパイからスピーカーに音を出す

スピーカーの購入

ダイソーのUSBミニスピーカー(300円)がお薦めです。
接続は、給電する為のUSB、音を出す為のイヤホンジャックが備わっています。

ラズパイとスピーカーの接続

下図の通り、
USBミニスピーカーのイヤホンジャックとUSBケーブルを、
ラズパイに接続します。

本来は、以下記事に記載している通り、
HDMI・マウス・キーボードのケーブルを接続する必要があります。

HDMI・マウス・キーボードのケーブルを接続しなくてもラズパイを操作する手順は、
以下記事を参照ください。

音が出るか確かめる

以下画像の左上「LXTerminal」のコマンド入力画面を開き、
コマンドラインから以下コマンドを実行してみましょう。
Side_Left.wavは、デフォルトで存在している音声データです。

aplay /usr/share/sounds/alsa/Side_Left.wav

スピーカーから「Side Left」と発話されたら成功です!

もし音量を変えたい場合は、コマンドラインに alsamixer を入力し、音量を変えてください。

Pythonでスピーカーから音を出す

ディレクトリ /home/pi 配下に、
sound.pyファイルを作成し、以下コードを書き込みます。

import subprocess

subprocess.call("aplay /usr/share/sounds/alsa/Side_Left.wav", shell=True)

コマンドラインから以下コマンドを実行してみましょう。

python3 sound.py

スピーカーから「Side Left」と発話されたら成功です!

「/usr/share/sounds/alsa/Side_Left.wav」ファイルを変えると、
自分のオリジナルの音を流せます。
以下動画の音は、朝遅刻しそうな時の緊急性をイメージしました。

ブラウザに表示する設定画面の作成

ブラウザの画面とラズパイ間でデータのやり取りを行う為に、Flaskを使用します。
Flaskは、Python用のWebアプリケーションフレームワークです。
Webアプリケーションフレームワークとは、
ウェブサイト、Webアプリケーション等の作成をサポートする為のフレームワーク(ソフト)です。

以下コマンドでラズパイにFlaskをインストールする。

pip install flask

プログラム

以下ディレクトリ通り、ディレクトリとファイルを作成する。
この章では、以下赤字のファイルを修正する。

/home/pi/work/
alarm/
├app.py
├templates/
  └index.html

app.py

# -*- coding: utf-8 -*-
from flask import Flask, render_template, request

app = Flask(__name__)


# ブラウザに画面を表示
@app.route('/', methods=['GET'])
def get():
    return render_template('index.html', alarm_time=f'')


# ブラウザからのデータ取得
@app.route('/', methods=['POST'])
def index():
    alarm_time = request.form.get('alarm_time')
    return render_template('index.html', alarm_time=f'{alarm_time}にセットしました。')


if __name__ == '__main__':
    app.run("0.0.0.0")

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>朝起きる時間をセットしてください</h2>
<p>{{alarm_time}}</p>
<form action="/" method="POST" enctype="multipart/form-data">
<div>
<input type="time" name="alarm_time" value="06:00">
<input type="submit" value="送信">
</div>
</form>

</body>
</html>

実行

以下コマンドでプログラムを実行する。

python3 app.py

パソコン or スマホのブラウザを開き、
Raspberry Pi の IPアドレス:ポート(デフォルト5000)でアクセスします。
例えば、
http://192.168.11.9:5000
です。

※注意点としては、ラズパイとパソコン or スマホは、
同じLANに接続されている必要があります。

アクセス結果は以下となります。

画面中の時計のアイコンを押して、
起きる時間を選択後、「送信」ボタンを押します。

設定が成功すると、以下画面が表示されます!

設定した時間になると、スピーカーから音を出す

特定の時間に処理を行うには、cronという機能を使います。

以下コマンドで、元となるcrontabファイルを作成します。
crontab -e
行の先頭に、”test”を入力する。
入力する文字は何でもいいです。
目的は、piというユーザ用のcrontabを作成することです。

プログラム

以下ディレクトリ通り、ディレクトリとファイルを作成する。
この章では、以下赤字のファイルを修正する。

/home/pi/work/
alarm/
├app.pyalarm.py
├templates/
│└index.html
└cron/cron.pycron.sh

cron.sh

!/bin/bash
cron_job=$1
cron_file="/var/spool/cron/crontabs/pi"
echo "${cron_job}" > "${cron_file}"
/etc/init.d/cron restart

ファイルに実行権限を付けます。

chmod 777 /home/pi/work/alarm/cron/cron.sh

cron.py

import subprocess


def set_job(time: str):
    command = '/usr/bin/python3 /home/pi/work/alarm/alarm.py'
    time_list = time.split(':')
    hour = time_list[0]
    minute = time_list[1]
    job = f'{int(minute)} {int(hour)} * * * {command}'
    # スクリプトファイルの呼び出し
    subprocess.call(['sudo', '/home/pi/work/alarm/cron/cron.sh', job])

alarm.py

import subprocess


subprocess.call("aplay /usr/share/sounds/alsa/Side_Left.wav", shell=True)

app.py

# -*- coding: utf-8 -*-
from flask import Flask, render_template, request
from cron import cron

app = Flask(__name__)


# ブラウザに画面を表示
@app.route('/', methods=['GET'])
def get():
    return render_template('index.html', alarm_time=f'')


# ブラウザからのデータ取得
@app.route('/', methods=['POST'])
def index():
    alarm_time = request.form.get('alarm_time')
    cron.set_job(alarm_time)
    return render_template('index.html', alarm_time=f'{alarm_time}にセットしました。')


if __name__ == '__main__':
    app.run("0.0.0.0")

実行

以下コマンドでプログラムを実行する。

python3 app.py

パソコン or スマホのブラウザを開き、
Raspberry Pi の IPアドレス:ポート(デフォルト5000)でアクセスします。
例えば、
http://192.168.11.9:5000
です。

ブラウザから時間を指定すると、
その時間に「Side Left」が鳴ります。

もし、鳴らしたい音声を変えたいのであれば、
alarm.pyのwavファイルパスを好きなものに変更ください。

最後に

如何だったでしょうか?

音が鳴った時、ブラウザから設定出来た時、
指定した時に音が鳴った時、
ワクワクしましたよね!?

作ったものが動くって楽しいですよね!?

今後もワクワクするものを作って行きます。
記事を更新するとTwitterでつぶやきます。 フォローお願いします。

不明な点があればページTOPの「お問い合わせ」にてご連絡下さい。

タイトルとURLをコピーしました