RaspberryPi Web温度計

実験

以前マイニングルームを温度計で監視しておりました。

temper.logを出力可能にする

以下サイトを参考にtemper.logを出力可能にする。

https://gadget.tim6300243.0t0.jp/raspberrypi/post-241
gadget.tim6300243.0t0.jp

nginx+php環境を構築する

以下サイトが参考になると思います。

nginx で PHP を動かす - Qiita
#背景Nginx で PHP を動かすには、php-fpm をインストールする所までは覚えていても、その後の設定の書き方を毎回すっかり忘れているのでメモ。モジュールのインストールは終わっている前…
qiita.com

HTMLでtemper.logを表示する

HTMLでtemper.logを表示する

<!doctype html>
<html lang="jp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <title>温度監視</title>
  </head>
  <body>
    リロードまで：<span id="next_reload">60</span>秒
    <!-- temper.logのパスは適宜変更してください -->
    <?php
          exec('tac /home/pi/project/temper/temper.log  | head -n 60', $out);
          $last_data = explode(',', $out[0]);
    ?>

    <h6>■温度監視</h6>
    <span class="
        <?php
            if(str_split($last_data[1], 4)[0] < 40){
              echo "text-primary";
            }elseif(str_split($last_data[1], 4)[0] < 45){
              echo "text-warning";
            }else{
              echo "text-danger";
            }
          ?>
          ">
        <h1 class="display-1 text-center">
          <?php echo str_split($last_data[1], 4)[0]; ?>℃
        </h1>
        </span>

    <h6>■温度履歴</h6>
        <?php
          echo '<table class="table table-striped table-dark">';
          echo '<thead class="thead-dark">';
          echo '<tr>';
          echo '<th scope="col">日時</th>';
          echo '<th scope="col">温度</th>';
          echo '</tr>';
          echo '</thead>';
          echo '<tbody>';
          foreach($out as $value){
            echo '<tr>';
            $val = explode(',', $value);
            echo '<td>';
            echo $val[0];
            echo '</td>';
            echo '<td>';
            echo str_split($val[1], 4)[0] ;
            echo '</td>';
            echo '</tr>';
          }
          echo '</tbody>';
          echo '</table>';
          ?>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
      $(function(){
        // ページリロード
        setTimeout(function(){
            location.reload();
        },60000);

        // 次のリロードまで
        setInterval(function(){
          $("#next_reload").html($("#next_reload").html()-1);
        },1000);

      });
    </script>
  </body>
</html>

コメント