「WebアプリからのHWの制御方法」について学んでいます。
raspberry Pi と Grove Base Hatを使って学習していました。
課題の中で「この画面構成で」ってのが出てきまして、ちょっと手間取ったのですが、なんとかこなせたので、その備忘録がてら。
画面とか画像を理解させるのって最初は難しいと思う(3.5はコードスニペットがないので)んですが、下の画面構成がうまくできたので、報告します。
この画面構成をブラウザ上で表現して、ボタン押下でraspberry上のLEDを点灯させたり、ブザー鳴らしたりできるようなphpファイルを作りましょうってやつでした。
まず、この表をそのまんまGoogle Lenseでキャプチャします。
それをひとまずエディタ（なんでもいいんですが、今回もまたSimplenote）に貼り付け。
訳わかんない羅列になりましたが、縦に貼り付けちゃってるので、成型します。
そのときに画面構成のままにテキストを並べなおします。
範囲選択して、選択部分をドラッグして移動したり、いろいろして、
SW制御
Update
RED : 1
YELLOW : 1
BLUE : 1
LED+BUZZER制御
ALL LED ON OFF
Red LED ON OFF
Yellow LED ON OFF
Blue LED ON OFF
Buzzer 1 sec ON
これだけだと、どれがボタンなのかテキストなのか解りません。なので、
以下のように編集します。
SW制御(項目見出し)
"Update"(ボタン)
RED : 1
YELLOW : 1
BLUE : 1
LED+BUZZER制御（項目見出し）
ALL LED "ON"" OFF"(両方ボタン)
Red LED "ON"" OFF"(両方ボタン)
Yellow LED "ON"" OFF"(両方ボタン)
Blue LED "ON"" OFF"(両方ボタン)
Buzzer "1 sec ON"(ボタン)
今回はここが大事
このように、
この（）内は説明ですよ、””で囲んだものは説明内に記載するものだよと書かなくても、記号で示すことができます。
また、
（）内で両方と書いて””を分けてるので、ごっちゃにもならないようになってます。
これを利用して、
GPIO割り当て:
A2 距離センサ
A0 光センサ
l2C 湿度温度・気圧センサ（BME280）
D5 赤LED
D6 赤ボタン
D16 黄LED
D17 黄ボタン
D18 青LED
D19 青ボタン
D12 ブザー
＃命令：下の構図の画面になるようにコードを出力してください
SW制御(項目見出し)
"Update"(ボタン)
RED : 1
YELLOW : 1
BLUE : 1
LED+BUZZER制御（項目見出し）
ALL LED "ON"" OFF"(両方ボタン)
Red LED "ON"" OFF"(両方ボタン)
Yellow LED "ON"" OFF"(両方ボタン)
Blue LED "ON"" OFF"(両方ボタン)
Buzzer "1 sec ON"(ボタン)
と、GPTに投げます。
これを出力させると、
ご提供いただいた情報を基に、指定された構図の画面になるようにコードを生成します。
gpio_control.php:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>GPIO制御</title>
<link rel="stylesheet" type="text/css" href="./main.css">
</head>
<body>
<h2>SW制御</h2>
<form action="" method="GET">
<button class="btn" type="submit" name="update_sw" value="1">Update</button>
</form>
<!-- Placeholder for Switch States -->
<p>RED: 1</p>
<p>YELLOW: 1</p>
<p>BLUE: 1</p>
<h2>LED + BUZZER制御</h2>
<form action="" method="GET">
<h3>ALL LED</h3>
<button class="btn" type="submit" name="led_all" value="1">ON</button>
<button class="btn" type="submit" name="led_all" value="0">OFF</button>
<h3>Red LED</h3>
<button class="btn" type="submit" name="led_red" value="1">ON</button>
<button class="btn" type="submit" name="led_red" value="0">OFF</button>
<h3>Yellow LED</h3>
<button class="btn" type="submit" name="led_yellow" value="1">ON</button>
<button class="btn" type="submit" name="led_yellow" value="0">OFF</button>
<h3>Blue LED</h3>
<button class="btn" type="submit" name="led_blue" value="1">ON</button>
<button class="btn" type="submit" name="led_blue" value="0">OFF</button>
<h3>Buzzer</h3>
<button class="btn" type="submit" name="buzzer" value="1">1 sec ON</button>
</form>
<?php
// Switch Update logic
if (isset($_GET["update_sw"])) {
// Placeholder: Insert command to update and fetch switch states
}
// LED + Buzzer Control logic
if (isset($_GET["led_all"])) {
$value = $_GET["led_all"];
exec("pigs w 5 $value w 16 $value w 18 $value");
}
if (isset($_GET["led_red"])) {
$value = $_GET["led_red"];
exec("pigs w 5 $value");
}
if (isset($_GET["led_yellow"])) {
$value = $_GET["led_yellow"];
exec("pigs w 16 $value");
}
if (isset($_GET["led_blue"])) {
$value = $_GET["led_blue"];
exec("pigs w 18 $value");
}
if (isset($_GET["buzzer"])) {
exec("pigs w 12 1");
sleep(1);
exec("pigs w 12 0");
}
?>
</body>
</html>
上記のコードは、要求された構造を持つページを生成するものです。
ボタンを押すと、それぞれのLEDやブザーの制御が行われます。
スイッチの状態の更新はプレースホルダとして存在しており、実際のコマンドをそこに入れる必要があります。
と出力されました。
コード部分を
これを実行すると、
こんな風になっちゃいました。
これだと要件通りになってないので、
LEDとブザー制御の、
項目名とボタン配置を、
例:ALL LED ON OFF
のように、項目の横にボタン配置してください。
それぞれ色がある文字列の色を、その色にしてください。
RED:1
赤色でRED他は黒
YELLOW:1
黄色でyellow
＃どちらの制御項目でも同じように色分けすること
と、追加で命令を送ります。すると、
了解しました。指定されたフォーマットに従って、項目の名前とボタンを横に配置し、文字色を変更します。
gpio_control.php:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>GPIO制御</title>
<link rel="stylesheet" type="text/css" href="./main.css">
<style>
.red-text { color: red; }
.yellow-text { color: yellow; }
.blue-text { color: blue; }
</style>
</head>
<body>
<h2>SW制御</h2>
<form action="" method="GET">
<button class="btn" type="submit" name="update_sw" value="1">Update</button>
</form>
<!-- Placeholder for Switch States -->
<p><span class="red-text">RED</span>: 1</p>
<p><span class="yellow-text">YELLOW</span>: 1</p>
<p><span class="blue-text">BLUE</span>: 1</p>
<h2>LED + BUZZER制御</h2>
<form action="" method="GET">
<div>
<span>ALL LED</span>
<button class="btn" type="submit" name="led_all" value="1">ON</button>
<button class="btn" type="submit" name="led_all" value="0">OFF</button>
</div>
<div>
<span class="red-text">Red LED</span>
<button class="btn" type="submit" name="led_red" value="1">ON</button>
<button class="btn" type="submit" name="led_red" value="0">OFF</button>
</div>
<div>
<span class="yellow-text">Yellow LED</span>
<button class="btn" type="submit" name="led_yellow" value="1">ON</button>
<button class="btn" type="submit" name="led_yellow" value="0">OFF</button>
</div>
<div>
<span class="blue-text">Blue LED</span>
<button class="btn" type="submit" name="led_blue" value="1">ON</button>
<button class="btn" type="submit" name="led_blue" value="0">OFF</button>
</div>
<div>
<span>Buzzer</span>
<button class="btn" type="submit" name="buzzer" value="1">1 sec ON</button>
</div>
</form>
<?php
// ... (The PHP control logic remains the same.)
?>
</body>
</html>
上記のコードで、
<style>タグを用いて、指定された色に対応する
CSSクラス（red-text、yellow-text、blue-text）を追加しました。
そして、これらのクラスを適切な文字列に適用することで、文字色を変更しました。
これで出来上がってくれたらよかったんですが、ボタンが…ってことで、
最後の命令!!
ボタンと項目の間にスペースを入れ、ボタンの頭をそろえてください。
了解しました。ボタンと項目の間にスペースを追加し、ボタンの開始位置を修正いたします。
html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>GPIO制御</title>
<link rel="stylesheet" type="text/css" href="./main.css">
<style>
.red-text { color: red; }
.yellow-text { color: yellow; }
.blue-text { color: blue; }
.label {
display: inline-block;
width: 150px; /* ラベルの幅を固定 */
}
</style>
</head>
<body>
<h2>SW制御</h2>
<form action="" method="GET">
<div class="label">Update</div>
<button class="btn" type="submit" name="update_sw" value="1">Update</button>
</form>
<!-- Placeholder for Switch States -->
<p><span class="red-text">RED</span>: 1</p>
<p><span class="yellow-text">YELLOW</span>: 1</p>
<p><span class="blue-text">BLUE</span>: 1</p>
<h2>LED + BUZZER制御</h2>
<form action="" method="GET">
<div>
<span class="label">ALL LED</span>
<button class="btn" type="submit" name="led_all" value="1">ON</button>
<button class="btn" type="submit" name="led_all" value="0">OFF</button>
</div>
<div>
<span class="label red-text">Red LED</span>
<button class="btn" type="submit" name="led_red" value="1">ON</button>
<button class="btn" type="submit" name="led_red" value="0">OFF</button>
</div>
<div>
<span class="label yellow-text">Yellow LED</span>
<button class="btn" type="submit" name="led_yellow" value="1">ON</button>
<button class="btn" type="submit" name="led_yellow" value="0">OFF</button>
</div>
<div>
<span class="label blue-text">Blue LED</span>
<button class="btn" type="submit" name="led_blue" value="1">ON</button>
<button class="btn" type="submit" name="led_blue" value="0">OFF</button>
</div>
<div>
<span class="label">Buzzer</span>
<button class="btn" type="submit" name="buzzer" value="1">1 sec ON</button>
</div>
</form>
<?php
// ... (The PHP control logic remains the same.)
?>
</body>
</html>
この変更により、項目名とボタンの間にスペースが確保され、
すべてのボタンが揃って表示されるはずです。
さて・・・どうでしょうか・・・
できましたー！！！
もう時間がないので、今日はこれまで!!
Qiita用のマークダウンで装飾ができるようになりましたｗｗ