Raspberry Pi、Tkinter/pythonでGUIプログラムをvscodeでリモート開発

カテゴリー: シングルボードコンピュータ  タグ:

Raspberry Pi(以降”raspi”)で小規模アプリ開発ではGeanyは軽快です。でもVScodeを使いたい、しかしraspiにインストールすると結構重い。そこでPCのVScodeからリモート開発です。VNCは有線接続ならレスポンス結構早く、開発はどんどんストレスフリーになっていきます。すごいですね!

TkinterでGUIを含むプログラムのリモート開発は、実は環境変数の”DISPLAY”を設定すればCLIリモートと同じ手順です。CLIリモートの例は数多く記事がありますので、重複しますが覚書として設定から記載です。

Tkinter/GUIの環境変数”DISPLAY”の解決は最後の方の項で説明してます。

VScodeの拡張機能「Remote-SSH」で簡単接続

VNCでスタンドアロン開発の場合、解像度を上げてやっています。これはこれで良いですが、Linux特有のコピー/ペーストなどWindowsと操作が若干異なるので相互の操作は煩雑になりがち。PCで調べた文やコードをコピペするなど、リモート開発に断然分があります。

なお、VNC解像度についての覚書ですが、”/boot/config.txt”の下記の部分を変更して対応してます。

hdmi_group = 2

hdmi_mode = 73 # 73:1920×1440、51:1600×1200

hdmi_force_hotplug = 1   # HDMI無くてもVNC表示

解像度1920×1440のVNC画面

Remote-SSHの設定手順

プログラムがすでに存在する場合は、フォルダ単位にしておきます。これは後述するlaunch.jsonなどがプログラム単位で配置(フォルダ.vscode)するからです。

拡張機能のインストール

VScode上で拡張機能「Remote-SSH」をインストールします

リモートホストの接続

目的のraspiはすでに固定IPアドレスでSSHおよびVNC接続できているものとする。今回の例は、UserID:raspi、IPアドレス:192.168.1.69で試す

VScodeで「F1」を押し、「Remote-SSH:ホストに接続する…」

UserIDとIPアドレスをセット
Linuxを選択、リモートウインドウが新たに出現
下部のバーにメッセージと同時に、パスワード入力
エクスプローラーでフォルダを開く。リモート接続後はraspiのフォルダにアクセスできる。

ファイルを開いていよいよデバッグ!、と思いきや拡張機能「Python」のインストールを要求される

プログラムのデバッグ実行は「F5」。最初に行うとメッセージが出て中断。

拡張機能「Python」をホストにインストールする流れになる・・・

pythonはすでにraspiで使えるのに、さらにインストールか…、仕方がないのでインストール。

結構時間かかる…。重くならなければよいけど…

最後に、「デバッグ構成の選択」。CLIプログラムはこれでOK

「Pythonファイル 現在アクティブな…」を選択

ブレークモードでデバッグスタートしたい場合はlaunch.json編集

これで、リモートデバッグの準備ができました。

F5キーでデバッグ開始です。初期値はオートRUNです。先頭でブレークさせておきたい場合は、launch.jsonを編集します。存在しない場合はエクスプローラーで「launch.jsonの作成」を選ぶとひな形ができるので、

“stopOnEntry”: true を追加しておきます(下記)。

{
	// IntelliSense を使用して利用可能な属性を学べます。
	// 既存の属性の説明をホバーして表示します。
	// 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
	"version": "0.2.0",
	"configurations": [
		{
			"name": "Python: 現在のファイル",
			"type": "python",
			"request": "launch",
			"program": "${file}",
			"console": "integratedTerminal",
			"justMyCode": true,
			"stopOnEntry": true  // 新たに追加
		}
	]
}

Tkinterでは、画面初期化でエラー。環境変数「DISPLAY」を設定

root = tk.Tk()  の部分でTclErrorが出ました。

VScodeのターミナル上で、

export DISPLAY=:0.0 と入力することで解決。

PCのVScodeとTkinterを使ったアプリのVNC画面。
raspiの5インチモニタにも同時に表示

毎回環境変数DISPLAYを編集するのは面倒

bashを編集します。

sudo nano .bashrc 最終行にexport DISPLAY=:0.0 を追加

その後、新しいターミナルで

source .bashrc

これでOK

コメント

  1.  名前 : 匿名  

    ありがとうございます。
    RasPi ではなく Chromebook で困っていたのですが
    VScode で Tkinter のコード実行確認出来るようになり、助かりました!

お気軽にコメントをどうぞ。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)