● Flask RaspberryPi Car Remote Controller
2026.05.31
RaspberryPi Carの Remote Controllerに、今まで WebIOPiを使用していましたが、
Raspi OS Ver.12 (bookworm)以降では動作しなくなってしまいました。
RasPiの GPIOを Web Browserから Remote制御するには Flaskが使いやすいようです。
Flaskは web siteを開発する時の debug用に開発されたもので、programは pythonで
書かれており数行の命令を書くだけで簡単に RasPiに Remote接続ができます。
Flaskは RasPiの基本機能として defaultで installされているので、新規に installする必要もなく
使用する事ができます。
RasPi Remote Control Car Pi4B + Camera V2
【python app.pyを作る】
home の配下に flask専用の flasksv folderをつくります。
作った folder内に app.pyというfileを作ります。
これは app.pyという名前にしなければいけません。
app.pyには以下の行を書き込みます。
$ ~/mkdir flasksv
$ cd /home/pi/flasksv
$ sudo nano app.py
ctl + O で書き込み、ctl + x で終了。
【Browser用の index.htmlを作る】
/flasksv folderの中に index.htmlを入れる templates folderをつくる。
これは templatesという名前にしなければいけません。
$ /home/pi/flasksv/mkdir templates
$ cd templates
$ sudo nano index.html
RasPi flask index.html
【Browser用の cssを作る】
Browser用の fla.cssを作ります。
$ /home/pi/flasmpl/static/css
$ cd css
$ sudo nano fla.css
RasPi flask fla.css
【buttonの色が変えられない】
ここでは長いjavascriptの commandを１行に記述できる jQueryを使用しました。
しかし jQueryには注意しなければならない項目がたくさんあります。
1. <head> Tag内の最初に、<script src="https://jquery.com"></script>を記述しなければいけない。
これは、jQuery本体をを読み込ませるための記述です。
2. 次に <script src="https://code.jquery.com/jquery-3.6.1.min.js"> </script>を記述する。
これも配信されている jQueryCDNをを読み込ませるための記述で、使用している版数と
合わせた方がよい。
3. jQueryが HTML本文より先に実行された場合は、not defined (中身が空の意味)の Errorが出る。
functionの先頭に HTMLの読み込み完了を待つための記述として下記を付ける。
$(document).ready(function() {
・・・functionの記述
});
4. RasPi bookwormでは、色変更命令が動作しませんでした。
$("this").css("background-color", '#CC0033')を使用しても buttonの色変更ができません。
RasPi OS側が上書き禁止しているのか、Web Browser側が無視しているのか不明です。
5. css fileに強制的に色を書き換え指示をする !important命令を記述しても変わりませんでした。
6. 色を２種類登録して removeClass, addClass命令で切り替えるしかないようです。
css file内に既存色と変えたい色の２色を作っておいて、HTMLの <script>側で切り替えを行う。
<script>の中ではまず、既存色を抜き取ってから新しい色を追加します。
addClassだけを使用すると jQueryの memoryの中には２色が混在するので default色の方が
Browserに表示される。
$("this").removeClass("button-gra"); ・・・既存色を抜き取る。
$("this").addClass("button-red"); ・・・変えたい色を追加する。
【実行してみる】
flask folderに移動して flaskを起動します。
$ cd /home/pi/flasksv
$ flask run --host=0.0.0.0 --port=5000
--host=0.0.0.0は 127.0.0.1以外の IP Addressから Access出来る様にするため指定するものです。
Errorが出なければ serverは起動しています。
web serverの終了は ctl + c で終了します。
【ifconfigで RasPiの Addressを調べる】
RasPi の IP Addressを調べるには ifconfigまたは ip addrを使用します。
$ ifconfig
wlan0: flags=4163 UP,BROADCAST,RUNNING,MULTICAST mtu 1500
inet 192.168.1.11 netmask 255.255.255.0 broadcast 192.168.1.255
【他の PCから Accessしてみる】
Network内にある他のパソコンから Web Browserを開いて RasPiの IP Addressを入力します。
port番号は起動 commandで使用した :5000を使用します。
RasPi Car Controller Top 画面が表示されれば成功です。
RasPi remote Control Car Web画面
----------------------------------------------------------------------------------------------------------------------------