「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用のマークダウンで装飾ができるようになりましたｗｗ