【成功した事】
ラズベリーパイ4のGPIOで特定のピンをINPUTに設定し、
入力があったら（電流が流れたら）ブラウザにONと表示する。
そして電流をOFFにしてから更新ボタンを押すとブラウザの文字がOFFと表示される
（Supernoveさん、前回はご回答くださりありがとうございました）

【実現させたい事】
更新ボタンを押さずに（画面遷移させずに）
入力あり→ブラウザにON表示
入力なし→ブラウザにOFF表示
とリアルタイムで出来るような仕組みを作りたいと思っています。

【試した事】
どのような方法があるのか自分なりで調べてみたところ、
具体的な内容は無かったのですが、ajaxを使ってみては？というような記事がありました。
今回の様なことをする場合は皆さんは一般的にどのような感じで実行されるのでしょうか。
ヒントや参考ページ等でも構いませんので、アドバイスを頂けますと幸いです。
ブラウザのボタンからLEDのON・OFF（Lチカ）の記事は多いのですが、
その逆のINPUT時にブラウザに文字を出力となると急に情報が減ってしまいます。
引き続き自分なりにも調べてみたいと思いますが、
申し訳ありません、ご存じの方いらっしゃいましたらアドバイスの程お願い致します。

【Python部分】

-- coding: utf-8 --

from flask import Flask, render_template
import RPi.GPIO as GPIO
import time

app = Flask(name)

GPIO.setmode(GPIO.BCM)
GPIO.setup(17, GPIO.IN, pull_up_down=GPIO.PUD_DOWN)

@app.route('/')
def index():
if GPIO.input(17) == GPIO.HIGH:
text = 'ON'
else:
text = 'OFF'
return render_template('index.html',message=test)

if name == 'main':
try:
app.run("0.0.0.0", debug=True)
except:
GPIO.cleanup()

Supernove

2021/11/11 16:51

すみませんが、ソースコードが見づらいので、MarkdownのCodeタグを使ってほしいです

行動規範の内容に同意します

回答2件

前回回答しましたが、多分この質問来るだろうなとおもってましたｗ
前回のソースコードをそのまま使うのであれば、ajaxを使わなくてもindex.htmlに1秒間隔でJavaScriptでページをリロードするlocation.reload()を実行するようにすればこれまた力技ですがユーザーがリロードをしなくても動くと思います。

HTML
1<html>
2  <head>
3    <title>Input Status</title>
4  </head>
5  <body>
6    {{ message }}
7  </body>
8</html>
9<script>
10  setInterval("location.reload()", 1000);
11</script>

とりあえず動かすだけであれば上記のようにHTMLを書けばいいはずですが、もし今後他のインプットも表示するのであればTakaiYさんが回答されたようにサーバーのコードも改修して拡張性を上げる必要があります。

投稿2021/11/11 17:19

Supernove

総合スコア1154

ベストアンサー

ajaxを使います。

ブラウザ側では、javascriptで定期的(1秒ごととか)にAPIをたたきます。
方法はここで書くと長くなるし、webに情報がたくさんあるのでそちらを参照ください。検索してみつけたやつを例にあげておきます。

サーバ側はたたかれるAPIを実装しておきます。なんとなくこんな感じでしょうか。

python
1@app.route('/led-status', methods=['GET'])
2def get_led_status():
3    
4    led_status = {}
5    if GPIO.input(17) == GPIO.HIGH:
6        led_status["GPID17"] = "ON"
7    else:
8        led_status["GPIO17"] = "OFF"
9    
10    return flask.jsonify(led_status)
11