ラズパイPicoW Wi-Fi通信、遠隔操作＆表示 CircuitPython編

# importの設定方法変更 ----------------------------------------------------------------------
# ＜変更後ライブラリ（サンプルプログラム）の場合＞
from adafruit_httpserver import Server, Request, Response
# ファイルも返す場合は以下のようにする
from adafruit_httpserver import Server, Request, Response, FileResponse

# ＜変更前ライブラリの場合
from adafruit_httpserver.mime_type import MIMEType    # MIMEタイプ（Webサーバーが送信するファイルの種類）を扱えるようにする
from adafruit_httpserver.request import HTTPRequest   # Webブラウザからのリクエストに関する情報を取得するために使用
from adafruit_httpserver.response import HTTPResponse # Webブラウザに対して送信するレスポンスを設定するために使用
from adafruit_httpserver.server import HTTPServer     # HTTPリクエストを受信し、適切なHTTPレスポンスを返信すために使用

# サーバーの起動方法変更 ----------------------------------------------------------------------
# ＜変更後ライブラリ（サンプルプログラム）の場合＞
pool = socketpool.SocketPool(wifi.radio)      # Wi-Fi接続上でソケットを管理するためのオブジェクトを作成
server = Server(pool, "/static", debug=True)  # サーバー起動時にPicoWのルートディレクトリからデータを提供できるようにする

# ＜変更前ライブラリの場合＞
pool = socketpool.SocketPool(wifi.radio)  # Wi-Fi接続上でソケットを管理するためのオブジェクトを作成
server = HTTPServer(pool, "/static")      # サーバー起動時にPicoWのルートディレクトリからデータを提供できるようにする

# サーバーリクエストに対するレスポンスを「HTML」で送信する方法 ----------------------------------------------------
# ＜変更後ライブラリ（サンプルプログラム）の場合＞
# ルート（IPアドレス:ポート）アクセス時に実行される関数
@server.route("/")
def base(request: Request):
    html = webpage()              # WebページのHTMLコードを取得
    return Response(request, html, content_type="text/html")

# ＜変更前ライブラリの場合＞
# ルート（IPアドレス:ポート）アクセス時に実行される関数
@server.route("/")
def base(request: HTTPRequest):   # HTTPリクエストに応答する関数を定義
    html = webpage()              # WebページのHTMLコードを取得
    with HTTPResponse(request, content_type=MIMEType.TYPE_HTML) as response: # レスポンスを返すためのHTTPオブジェクトを作成
        response.send(html)       # レスポンスとしてHTMLコードを送信

# サーバーリクエストに対するレスポンスを「テキスト（文字列）」で送信する方法 ----------------------------------------------------
# ＜変更後ライブラリ（サンプルプログラム）の場合＞
# 本体LED点灯（IPアドレス:ポート/lighton）アクセス時に実行される関数
@server.route("/lighton")
def light_on(request: Request):             # HTTPリクエストを処理する関数を定義
    led.value = True                        # 本体LEDを点灯
    return Response(request, "LED_ON!", content_type="text/plane")

# ＜変更前ライブラリの場合＞
# 本体LED点灯（IPアドレス:ポート/lighton）アクセス時に実行される関数
@server.route("/lighton")
def light_on(request: HTTPRequest):         # HTTPリクエストを処理する関数を定義
    led.value = True                        # 本体LEDを点灯
    with HTTPResponse(request) as response: # レスポンスを返すためのHTTPオブジェクトを作成（MIMEタイプは指定しなければplane/text）
        response.send("LED_ON!")            # レスポンスとして文字列「LED_ON!」を送信

# サーバーリクエストに対するレスポンスに「PicoW」本体内の「ファイル」を送信する方法 ----------------------
# ＜変更後ライブラリ（サンプルプログラム）の場合＞
# ルート（IPアドレス:ポート）アクセス時に実行される関数
@server.route("/")
def base(request: Request):  # HTTPリクエストを処理する関数を定義
    return FileResponse(request, filename='index.html', root_path='/')

# ＜変更前ライブラリの場合＞
# ルート（IPアドレス:ポート）アクセス時に実行される関数
@server.route("/")
def base(request: HTTPRequest):             # HTTPリクエストを処理する関数を定義
    with HTTPResponse(request, content_type=MIMEType.TYPE_HTML) as response:  # レスポンスを返すためのHTTPオブジェクトを作成
        response.send_file("index.html")    # レスポンスとしてPicoWルートフォルダの「index.html」ファイルを読み込みHTMLデータとして返す

import socketpool       # TCP/IP接続用のソケット管理用
import wifi             # WiFi接続を管理用
import digitalio        # デジタルピンの入出力を制御用
from board import *     # マイクロコントローラーのボード定義から全てのピンをインポート
import microcontroller  # マイクロコントローラーに関する情報（CPU温度等）を取得
from adafruit_httpserver import Server, Request, Response # HTTPサーバー用ライブラリ

led = digitalio.DigitalInOut(LED)           # 本体LEDをGPIO端子に割り当て
led.direction = digitalio.Direction.OUTPUT  # LED端子を出力に設定

# グローバル変数
state = "OFF!"  # 本体LED状態格納用

# Wi-FiアクセスポイントのSSIDとパスワードを設定（直接指定する場合）
ssid = "自宅のネットワーク環境のSSIDを設定"          # Wi-Fi接続先SSID
password = "自宅のネットワーク環境のパスワードを設定"  # Wi-Fi接続先パスワード
port_num = 80               # ポート番号（標準は80）

# Wi-Fi接続を実行
wifi.radio.connect(ssid, password)  # 指定したSSIDとパスワードで接続
print("Connected to", ssid)         # 接続先SSID表示

# ソケットプールを作成してHTTPサーバーを起動するための準備
pool = socketpool.SocketPool(wifi.radio)  # Wi-Fi接続上でソケットを管理するためのオブジェクトを作成
server = Server(pool, "/static", debug=True)      # サーバー起動時にPicoWのルートディレクトリからデータを提供できるようにする

# Webページを準備
def webpage():
    temperature = microcontroller.cpu.temperature # 本体温度センサの温度取得
    temperature = "{:.1f}".format(temperature)    # 温度の値を小数点1桁に成形
    # HTMLコードを文字列として埋め込み、「f""" 〜 """」で囲むと{ }で囲った変数の値を埋め込める
    html = f"""
        <!DOCTYPE html>
        <html>
        <form action="./lighton">
        <input type="submit" value="Light on" />
        </form>
        <form action="./lightoff">
        <input type="submit" value="Light off" />
        </form>
        <p>LED {state}</p>
        <p>Temperature is {temperature}</p>
        </body>
        </html>
        """
    return str(html)  # HTMLコードを文字列として返す

# ルート（IPアドレス:ポート）アクセス時に実行される関数（トップページ表示、ポート80なら省略可）
@server.route("/")
def base(request: Request):
    html = webpage()              # WebページのHTMLコードを取得
    return Response(request, html, content_type="text/html")

# 本体LED点灯（IPアドレス:ポート/lighton）アクセス時に実行される関数（ポート80なら省略可）
@server.route("/lighton")
def light_on(request: Request):   # HTTPリクエストに応答する関数を定義
    global state                  # グローバル変数の使用
    state = "ON!"                 # 文字列「ON!」を格納
    led.value = True              # LEDを点灯
    html = webpage()              # WebページのHTMLコードを取得
    return Response(request, html, content_type="text/html")

# 本体LED消灯（IPアドレス:ポート/lightoff）アクセス時に実行される関数（ポート80なら省略可）
@server.route("/lightoff")
def light_off(request: Request):  # HTTPリクエストに応答する関数を定義
    global state                  # グローバル変数の使用
    state = "OFF!"                # 文字列「ON!」を格納
    led.value = False             # LEDを消灯
    html = webpage()              # WebページのHTMLコードを取得
    return Response(request, html, content_type="text/html")

# HTTPサーバーを開始して待ち受けるIPアドレスを表示する
print(f"Listening on http://{wifi.radio.ipv4_address}:{port_num}")  # f文字列を使って「IPアドレス」と「ポート番号」を埋め込んで表示
server.serve_forever(str(wifi.radio.ipv4_address), port=port_num)   # HTTPサーバーを指定された「IPアドレス」と「ポート」で開始

import socketpool       # TCP/IP接続用のソケット管理用
import wifi             # WiFi接続を管理用
import digitalio        # デジタルピンの入出力を制御用
from board import *     # マイクロコントローラーのボード定義から全てのピンをインポート
import microcontroller  # マイクロコントローラーに関する情報（CPU温度等）を取得
from adafruit_httpserver import Server, Request, Response # HTTPサーバー用ライブラリ

# 本体LED設定
led = digitalio.DigitalInOut(LED)           # 本体LEDをGPIO端子に割り当て
led.direction = digitalio.Direction.OUTPUT  # LED端子を出力に設定

# グローバル変数
state = "OFF!"  # 本体LED状態格納用

# Wi-FiアクセスポイントのSSIDとパスワードを設定（直接指定する場合）
ssid = "自宅のネットワーク環境のSSIDを設定"          # Wi-Fi接続先SSID
password = "自宅のネットワーク環境のパスワードを設定"  # Wi-Fi接続先パスワード
port_num = 80               # ポート番号（標準は80）

# Wi-Fi接続を実行
wifi.radio.connect(ssid, password)  # 指定したSSIDとパスワードで接続
print("Connected to", ssid)         # 接続先SSID表示

# ソケットプールを作成してHTTPサーバーを起動するための準備
pool = socketpool.SocketPool(wifi.radio)  # Wi-Fi接続上でソケットを管理するためのオブジェクトを作成
server = Server(pool, "/static", debug=True)      # サーバー起動時にPicoWのルートディレクトリからデータを提供できるようにする

# Webページを準備
def webpage():
    temperature = microcontroller.cpu.temperature # 本体温度センサの温度取得
    temperature = "{:.1f}".format(temperature)    # 温度の値を小数点1桁に成形
    # HTMLコードを文字列として埋め込み、「f""" 〜 """」で囲むと{ }で囲った変数の値を埋め込める
    html = f"""
        <!DOCTYPE html>
        <html>
        <form action="./lighton">
        <input type="submit" value="Light on" />
        </form>
        <form action="./lightoff">
        <input type="submit" value="Light off" />
        </form>
        <p>LED {state}</p>
        <p>Temperature is {temperature}</p>
        </body>
        </html>
        """
    return str(html)  # HTMLコードを文字列として返す

# ルート（IPアドレス:ポート）アクセス時に実行される関数（トップページ表示、ポート80なら省略可）
@server.route("/")
def base(request: Request):
    html = webpage()              # WebページのHTMLコードを取得
    return Response(request, html, content_type="text/html")

# 本体LED点灯（IPアドレス:ポート/lighton）アクセス時に実行される関数（ポート80なら省略可）
@server.route("/lighton")
def light_on(request: Request):   # HTTPリクエストに応答する関数を定義
    global state                  # グローバル変数の使用
    state = "ON!"                 # 文字列「ON!」を格納
    led.value = True              # LEDを点灯
    html = webpage()              # WebページのHTMLコードを取得
    return Response(request, html, content_type="text/html")

# 本体LED消灯（IPアドレス:ポート/lightoff）アクセス時に実行される関数（ポート80なら省略可）
@server.route("/lightoff")
def light_off(request: Request):  # HTTPリクエストに応答する関数を定義
    global state                  # グローバル変数の使用
    state = "OFF!"                # 文字列「ON!」を格納
    led.value = False             # LEDを消灯
    html = webpage()              # WebページのHTMLコードを取得
    return Response(request, html, content_type="text/html")

# HTTPサーバーを開始して待ち受けるIPアドレスを表示する
print(f"Listening on http://{wifi.radio.ipv4_address}:{port_num}")  # f文字列を使って「IPアドレス」と「ポート番号」を埋め込んで表示
server.serve_forever(str(wifi.radio.ipv4_address), port=port_num)   # HTTPサーバーを指定された「IPアドレス」と「ポート」で開始

import socketpool       # TCP/IP接続用のソケット管理用
import wifi             # WiFi接続を管理用
import digitalio        # デジタルピンの入出力を制御用
from board import *     # マイクロコントローラーのボード定義から全てのピンをインポート
import microcontroller  # マイクロコントローラーに関する情報（CPU温度等）を取得
from adafruit_httpserver import Server, Request, Response # HTTPサーバー用ライブラリ

led = digitalio.DigitalInOut(LED)           # 本体LEDをGPIO端子に割り当て
led.direction = digitalio.Direction.OUTPUT  # LED端子を出力に設定

# Wi-FiアクセスポイントのSSIDとパスワードを設定（直接指定する場合）
ssid = "自宅のネットワーク環境のSSIDを設定"          # Wi-Fi接続先SSID
password = "自宅のネットワーク環境のパスワードを設定"  # Wi-Fi接続先パスワード
port_num = 80               # ポート番号（標準は80）

# Wi-Fi接続を実行
wifi.radio.connect(ssid, password)  # 指定したSSIDとパスワードで接続
print("Connected to", ssid)         # 接続先SSID表示

# ソケットプールを作成してHTTPサーバーを起動するための準備
pool = socketpool.SocketPool(wifi.radio)  # Wi-Fi接続上でソケットを管理するためのオブジェクトを作成
server = Server(pool, "/static", debug=True)      # サーバー起動時にPicoWのルートディレクトリからデータを提供できるようにする

# Webページを準備（HTMLコードを文字列として埋め込む）
def webpage():
    html = """
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>PicoW Controller</title>
        <style>
          #container {display: flex;justify-content: center;align-items: center;flex-direction: column;margin-top: 50px;}
          h1 {color: #666;}
          .button {width: 100px;height: 50px;border-radius: 5px;margin: 10px;cursor: pointer;font-size: 20px;font-weight: bold;color: white;text-align: center;line-height: 50px;}
          #on-button {background-color: green;}
          #off-button {background-color: red;}
          input[type="text"] {width: 200px;padding: 5px;font-size: 20px;text-align: center;margin: 20px;}
        </style>
      </head>
      <body>
        <div id="container">
          <h1>PicoW Controller</h1>
          <hr>
          <div>
            <button id="on-button" class="button">ON</button>
            <button id="off-button" class="button">OFF</button>
          </div>
           <div><p id="led_state">　</p></div>
          <input type="text" placeholder="Temperature" />
        </div>

        <script>
          const onButton = document.getElementById("on-button");
          const offButton = document.getElementById("off-button");
          const ledState = document.getElementById("led_state");
          const textBox = document.querySelector("input[type='text']");

          onButton.addEventListener("click", async () => {
            const response = await fetch("/lighton");
            const text = await response.text();
            ledState.textContent = text;
            console.log(text);
          });

          offButton.addEventListener("click", async () => {
            const response = await fetch("/lightoff");
            const text = await response.text();
            ledState.textContent = text;
            console.log(text);
          });

          setInterval(async () => {
            const response = await fetch("/get_data");
            const text = await response.text();
            textBox.value =   "本体温度：" + text;
          }, 1000);
        </script>
      </body>
    </html>
    """
    return str(html)

# ルート（IPアドレス:ポート）アクセス時に実行される関数（トップページ表示、ポート80は省略可）
@server.route("/")
def base(request: Request):  # HTTPリクエストを処理する関数を定義
    html = webpage()         # Webページのデータ取得して文字列で格納
    return Response(request, html, content_type="text/html")  # レスポンスとして「HTML」を返す

# 本体LED点灯（IPアドレス:ポート/lighton）アクセス時に実行される関数（ポート80なら省略可）
@server.route("/lighton")
def light_on(request: Request):
    led.value = True              # 本体LEDを点灯
    return Response(request, "LED_ON!", content_type="text/plane")  # レスポンスとして「テキスト」を返す

# 本体LED消灯（IPアドレス:ポート/lightoff）アクセス時に実行される関数（ポート80なら省略可）
@server.route("/lightoff")
def light_off(request: Request):
    led.value = False             # 本体LEDを消灯
    return Response(request, "LED_OFF!", content_type="text/plane")

# 本体温度取得（IPアドレス:ポート/get_data）アクセス時に実行される関数（ポート80なら省略可）
@server.route("/get_data")
def get_data(request: Request):
    temp = microcontroller.cpu.temperature  # 本体温度センサの温度取得
    temp = "{:.1f}".format(temp)            # 温度の値を小数点1桁に成形
    return Response(request, temp, content_type="text/plane")

# HTTPサーバーを開始して待ち受けるIPアドレスを表示する
print(f"Listening on http://{wifi.radio.ipv4_address}:{port_num}")  # f文字列を使って「IPアドレス」と「ポート番号」を埋め込んで表示
server.serve_forever(str(wifi.radio.ipv4_address), port=port_num)   # HTTPサーバーを指定された「IPアドレス」と「ポート」で開始

# Webページを準備（HTMLコードを文字列として埋め込む）
def webpage():
    html = """
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>PicoW Controller</title>
        <style>
          """
          中略（CSS）
          """
        </style>
      </head>
      <body>
        """
        中略（HTML）
        """
        <script>
          """
          中略（JavaScript）
          """
        </script>
      </body>
    </html>
    """
    return str(html)

# ルート（IPアドレス:ポート）アクセス時に実行される関数（トップページ表示、ポート80は省略可）
@server.route("/")
def base(request: Request):  # HTTPリクエストを処理する関数を定義
    html = webpage()         # Webページのデータ取得して文字列で格納
    return Response(request, html, content_type="text/html")  # レスポンスとして「HTML」を返す

# 本体LED点灯（IPアドレス:ポート/lighton）アクセス時に実行される関数（ポート80なら省略可）
@server.route("/lighton")
def light_on(request: Request):  # HTTPリクエストを処理する関数を定義
    led.value = True             # 本体LEDを点灯
    return Response(request, "LED_ON!", content_type="text/plane")  # レスポンスとして「テキスト」を返す

# 本体LED消灯（IPアドレス:ポート/lightoff）アクセス時に実行される関数（ポート80なら省略可）
@server.route("/lightoff")
def light_off(request: Request):
    led.value = False            # 本体LEDを消灯
    return Response(request, "LED_OFF!", content_type="text/plane")

# 本体温度取得（IPアドレス:ポート/get_data）アクセス時に実行される関数（ポート80なら省略可）
@server.route("/get_data")
def get_data(request: Request):
    temp = microcontroller.cpu.temperature  # 本体温度センサの温度取得
    temp = "{:.1f}".format(temp)            # 温度の値を小数点1桁に成形
    return Response(request, temp, content_type="text/plane")

# HTTPサーバーを開始して待ち受けるIPアドレスを表示する
print(f"Listening on http://{wifi.radio.ipv4_address}:{port_num}")  # f文字列を使って「IPアドレス」と「ポート番号」を埋め込んで表示
server.serve_forever(str(wifi.radio.ipv4_address), port=port_num)   # HTTPサーバーを「IPアドレス」と設定した「ポート」で開始

# setting.tomlにWi-Fi接続「SSID」と「パスワード」を設定
CIRCUITPY_WIFI_SSID="自宅のネットワーク環境のSSIDを設定"
CIRCUITPY_WIFI_PASSWORD="自宅のネットワーク環境のパスワードを設定"

import os               # ファイル操作など、OSレベルの機能を提供するために使用
import socketpool       # TCP/IP接続用のソケット管理用
import wifi             # WiFi接続を管理用
import digitalio        # デジタルピンの入出力を制御用
from board import *     # マイクロコントローラーのボード定義から全てのピンをインポート
import microcontroller  # マイクロコントローラーに関する情報（CPU温度等）を取得
from adafruit_httpserver import Server, Request, Response, FileResponse # HTTPサーバー用ライブラリ

led = digitalio.DigitalInOut(LED)           # 本体LEDをGPIO端子に割り当て
led.direction = digitalio.Direction.OUTPUT  # LED端子を出力に設定

# グローバル変数
state = "OFF!"  # 本体LED状態格納用

# Wi-FiアクセスポイントのSSIDとパスワードを取得（setting.tomlから取得する場合）
ssid = os.getenv("CIRCUITPY_WIFI_SSID")         # Wi-Fi接続先SSID
password = os.getenv("CIRCUITPY_WIFI_PASSWORD") # Wi-Fi接続先パスワード
port_num = 80                                   # ポート番号（標準は80）

# Wi-Fi接続を実行
wifi.radio.connect(ssid, password)  # 指定したSSIDとパスワードで接続
print("Connected to", ssid)         # 接続先SSID表示

# ソケットプールを作成してHTTPサーバーを起動するための準備
pool = socketpool.SocketPool(wifi.radio)      # Wi-Fi接続上でソケットを管理するためのオブジェクトを作成
server = Server(pool, "/static", debug=True)  # サーバー起動時にPicoWのルートディレクトリからデータを提供できるようにする

# ルート（IPアドレス:ポート）アクセス時に実行される関数（トップページ表示、ポート80は省略可）
@server.route("/")
def base(request: Request):       # HTTPリクエストを処理する関数を定義
    return FileResponse(request, filename='index.html', root_path='/')  # レスポンスとして「index.html」ファイルを返す

# 本体LED点灯（IPアドレス:ポート/lighton）アクセス時に実行される関数（ポート80なら省略可）
@server.route("/lighton")
def light_on(request: Request):
    led.value = True              # 本体LEDを点灯
    return Response(request, "LED_ON!", content_type="text/plane")  # レスポンスとして「テキスト（文字列）」を返す

# 本体LED消灯（IPアドレス:ポート/lightoff）アクセス時に実行される関数（ポート80なら省略可）
@server.route("/lightoff")
def light_on(request: Request):
    led.value = False             # 本体LEDを消灯
    return Response(request, "LED_OFF!", content_type="text/plane")

# 本体温度取得（IPアドレス:ポート/get_data）アクセス時に実行される関数（ポート80なら省略可）
@server.route("/get_data")
def get_data(request: Request):
    temp = microcontroller.cpu.temperature  # 本体温度センサの温度取得
    temp = "{:.1f}".format(temp)            # 温度の値を小数点1桁に成形
    return Response(request, temp, content_type="text/plane")

# HTTPサーバーを開始して待ち受けるIPアドレスを表示する
print(f"Listening on http://{wifi.radio.ipv4_address}:{port_num}")  # f文字列を使って「IPアドレス」と「ポート番号」を埋め込んで表示
server.serve_forever(str(wifi.radio.ipv4_address), port=port_num)   # HTTPサーバーを指定された「IPアドレス」と「ポート」で開始

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PicoW Controller</title>
  <style>
    #container {display: flex;justify-content: center;align-items: center;flex-direction: column;margin-top: 50px;}
    h1 {color: #666;}
    .button {width: 100px;height: 50px;border-radius: 5px;margin: 10px;cursor: pointer;font-size: 20px;font-weight: bold;color: white;text-align: center;line-height: 50px;}
    #on-button {background-color: green;}
    #off-button {background-color: red;}
    input[type="text"] {width: 200px;padding: 5px;font-size: 20px;text-align: center;margin: 20px;}
  </style>
</head>
<body>
  <div id="container">
    <h1>PicoW Controller</h1>
    <hr>
    <div>
      <button id="on-button" class="button">ON</button>
      <button id="off-button" class="button">OFF</button>
    </div>
      <div><p id="led_state">　</p></div>
    <input type="text" placeholder="Temperature" />
  </div>

  <script>
    const onButton = document.getElementById("on-button");
    const offButton = document.getElementById("off-button");
    const ledState = document.getElementById("led_state");
    const textBox = document.querySelector("input[type='text']");

    onButton.addEventListener("click", async () => {
      const response = await fetch("/lighton");
      const text = await response.text();
      ledState.textContent = text;
      console.log(text);
    });

    offButton.addEventListener("click", async () => {
      const response = await fetch("/lightoff");
      const text = await response.text();
      ledState.textContent = text;
      console.log(text);
    });

    setInterval(async () => {
      const response = await fetch("/get_data");
      const text = await response.text();
      textBox.value =   "本体温度：" + text;
    }, 1000);
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>LEDコントロールパネル</title>
    <style>
        body {
            text-align: center;  /* このCSSだけ後から追加 */
        }
        button {
            display: inline-block;
            padding: 10px 20px;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
        }
        button.on {
            background-color: green;
            color: white;
        }
        button.off {
            background-color: red;
            color: white;
        }
        p#led-state {
            margin-top: 20px;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div style="display:flex; justify-content:center;">
        <button id="on-button" class="on">ON</button>
        <button id="off-button" class="off">OFF</button>
    </div>
    <p id="led-state"></p>
    <div style="margin-top:20px; display:flex; justify-content:center;">
        <label for="temperature-box">温度表示:</label>
        <input type="text" id="temperature-box">
    </div>

    <script>
        const onButton = document.querySelector('#on-button');
        const offButton = document.querySelector('#off-button');
        const ledStatePara = document.querySelector('#led-state');
        const tempBox = document.querySelector('#temperature-box');

        onButton.addEventListener('click', () => {
            fetch('/lighton')
                .then(response => response.text())
                .then(data => {
                    ledStatePara.textContent = data;
                    console.log(data);
                });
        });

        offButton.addEventListener('click', () => {
            fetch('/lightoff')
                .then(response => response.text())
                .then(data => {
                    ledStatePara.textContent = data;
                    console.log(data);
                });
        });

        setInterval(() => {
            fetch('/get_data')
                .then(response => response.text())
                .then(data => {
                    tempBox.value = data;
                });
        }, 1000);
    </script>
</body>
</html>