【授業☆しょ~かい】『電子度診断アプリ』が完成したよ! 電子技術科(都留キャンパス)No.364

2021年01月15日

こんにちは。あんどくんです 。
電子技術科をPRしているよ☆彡
みんな、令和3年もリアルに応援よろしくね ( `・ω・´)ノ
今日、令和3年1月7日(木)は、 3,4限 おじゃました2年生の『通信工学実習 (IoTと通信工学) 』について紹介するよ。

2年生の『通信工学 (IoTと通信工学) 』では、世界が注目する超小型PC『ラズベリーパイ (ラズパイ) 』を使って、『パイソン言語』のプログラミングを学んでいるんだ。 また『パイソン言語』の 基本的な『文法』を学んだあと、これをベースに『IoTシステム』を設計しながら、『IoT』の『設計技術』と『利用技術』を身につけていくんだ。

はじめに、これまでのふりかえりをしたんだよ。
土壌監視システム (IoT版) 』を、みばえよく操作しやすくするために・・・
パイソン言語』の『tkinter』ライブラリのグラフィックス機能を使って、『GUI (Graphical User Interface) 』をつくる方法について学んでいるんだよ。これまでに、『ラズパイ』のデスクトップ上に基本的なウインドウを作成する方法を学んだんだ。

 

その応用として、前回から、下の写真の 『電子度診断アプリ』 を作成しているんだよ。
ボクが表示されているウインドウ上にあるチェックリストで、該当する項目にチェックを入れて『診断する』ボタンをクリックすると・・・
電子度 (電子技術のヲタク度) 』と『診断結果』が表示されるんだよ。

 

前回は、『rootウインドウ上に、『canvas』って名前のキャンバスを生成して重ねて、画像ファイルから生成した『gazou』って名前のイメージを『canvas』上に描いたんだよ。
また『rootウインドウ上に、『button』って名前のボタンと、『text』って名前のテキストを生成して配置したんだ。
まだウインドウができただけで、ボタンをクリックしても動かないけど・・・
とりあえず、『ラズパイ』を起動して、前回作成したプログラムを実行して、ウインドウが表示されることを確認したんだよ。

 

ここまでは、みんなOKだよ v(^_^)v

 

ここで、復習をかねて、南湖 准教授がウインドウを作成する『サンプルプログラム』の流れとポイントを、もう一度詳しく解説したんだ。

 

ひととおり復習がおわったところで・・・

ここからが、今回やる新しい内容だよ。
まずは、要素数が7個で中身が空っぽのリストを二つ ( bvar[ ]cbtn[ ] ) を用意するんだ。
リストっていうのは、C言語の配列みたいなモノだよ。

 

さらに、7個の文字列を要素としてもつリストITEM[ ] も用意しておくんだ。

 

ここからは、チェックボタンウインドウ上に生成して、配置していくよ。
for 文を使った繰り返しで、チェックボタンを7個配置していくんだよ。
カウンタ変数を i として、まずは、リストbvar[ ] i 番目の要素 bvar[i] として、ブール型変数( 真と偽の2値をとる変数 )を生成しておくんだ。
そしたら、リスト cbtn[ ] i 番目の要素 cbtn[i] として、ブール型変数 bvar[i] をパラメータとしてもつチェックボタンを生成するんだ。
最後に、チェックボタン cbtn[i] を、ウインドウ上に配置するんだ。
for文を使って、7個のチェックボタンをタテ方向にずらしながら配置すれば、ウインドウが完成だね。

 

さっそく、ここまでのプログラムコードを入力して、プログラムの動作を確認したんだ。

 

下の写真みたいに、チェックボタンが7個表示されたんだけど・・・
よく見えないんで拡大すると・・・

 

チェックボタンは、こんな感じだよ (図記号と文字列の間だよ!)。

 

今度はボタンをクリックしたときにコールされる click_btn() 関数を、ボタンを生成するときに、パラメータとして追加したんだよ。
もちろん、click_btn() 関数も定義したんだ。

 

click_btn() 関数は、ボタンがクリックされると、チェックされたチェックボタンの個数を数えて、ウインドウ上のテキストに表示するんだよ。南湖 准教授が、click_btn() 関数のプログラムコードを詳しく解説したんだ。

 

プログラムリストを入力して、プログラムを実行すると・・・

 

下の写真みたいに、チェックされたチェックボタンの個数が、テキストに表示されたよ。

 

最後に、7個の文字列を要素としてもつリストKEKKA[ ]を追加で用意するんだ。
それで、ボタンをクリックすると『電子度』(チェックされた個数のパーセンテージ)と『診断結果』がテキストに表示されるように、プログラムコードを変更していくよ。

 

プログラムコードを変更して、プログラムを実行すると・・・

 

下の写真みたいに、『電子度』と『診断結果』がテキストに表示されたよ v(^_^)v

今回はここまで。

 

今日はこの辺で・・・
電車で帰るよ ≡3

 

みんな、今日も1日おつかれさま☆彡
今回で『tkinter』ライブラリのグラフィックス機能を使って、基本的なウインドウを作成する方法は、いったん終了にして・・・

次回は『リアルタイム処理』について学んでいくよ!
今日も『産短大の毎日』をみてくれてありがとう!
また、明日からがんばろっ٩( ‘ω’ )و

それじゃ ≡3 ≡3 ≡3

★バックナンバー★

電子工学の理論を学ぶ授業・・・https://www.yitjc.ac.jp/yitjc/blog/?p=9556
最新の電子技術 (IoT) を学ぶ授業・・・https://www.yitjc.ac.jp/yitjc/blog/?p=9534
就活準備の授業・・・https://www.yitjc.ac.jp/yitjc/blog/?p=9604

★学生募集中★

県内イチ♪ 最新の設備と最高のスタッフで、みなさんをお待ちしています♪ 2年間で電子工学の理論を学んで、最新の電子技術を身に付けるんだったら、『電子技術科☆都留キャンパス』で決まりだね!
詳細はお問い合わせください。

★お問い合わせ先★

山梨県立産業技術短期大学校 都留キャンパス
〒402-0053 山梨県都留市上谷5-7-35