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

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

やりたいこと
やることリスト
ラズパイからスピーカーに音を出す
ブラウザに表示する設定画面の作成
1. プログラム
2. 実行
設定した時間になると、スピーカーから音を出す
1. プログラム
2. 実行
最後に

やりたいこと

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

アイコンは、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.py
├alarm.py
├templates/
│└index.html
└cron/
  ├cron.py
  └cron.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")