覚え書き: ESP32/arduino : HTML部分を PHP でデバッグ

目的:
　HTML の確認をESP32を使用せずに行う。

理由:
　HTMLの修正(見栄え、動作確認等) の度にコンパイル,書き込みを行うのは面倒。

方法:
　Apache, PHP をインストールした raspberry pi 3 があるため、これを webサーバーとして、HTML部分を確認する。
　ESP32 の応答部分は PHP で模擬。

　Windows PC のみでも XAMPP 等のツールを使用すればできるとの事。

PHP 概要:
　PHPで今回試してみた部分の概要は以下の通り。

PHPは、html に埋め込むスクリプト
スクリプトは　<?php 　と ?>　で囲む。複数行でも可
実行はサーバ側で行う
変数は $で始まる
変数の NULL と空白(空文字, "") は異なる
NULL の判定は is_null() や === NULL を使用する。 == NULL だと空文字との区別ができない
セッションとは、接続から切断までの間、個々のユーザ毎にデータを格納する仕組み
セッションは、session_start() ; で開始する
セッションデータは、$_SESSIONに格納する

例:
　「LED調光_WEBからと外付けのボリュームからを切り替えて調光」の HTML を PHPで動作できる様に変更。(ハイライト部分を追加/変更)

<?php
  session_start() ;
  if ( is_null($_SESSION['checked_lo']) and is_null($_SESSION['checked_rm']) ) {
    $_SESSION['checked_lo'] = "checked" ;
    $_SESSION['checked_rm'] = "" ;
  }
  $remote = $_GET["remote"] ;
  if ($remote == "local") {
    $_SESSION['checked_lo'] = "checked" ;
    $_SESSION['checked_rm'] = "" ;
  }
  if ($remote == "remote") {
    $_SESSION['checked_lo'] = "" ;
    $_SESSION['checked_rm'] = "checked" ;
  }

  if ($_SESSION['led_val'] == NULL ) $_SESSION['led_val'] = 0 ;

  if ($_GET['led_s'] != NULL) $_SESSION['led_val'] = $_GET['led_s'] ;
  if ($_GET['led_v'] != NULL) $_SESSION['led_val'] = $_GET['led_v'] ;
  if ($_GET['on'] == "ON") $_SESSION['led_val'] = $_SESSION['led_val'] + 1 ;
  if ($_GET['off'] == "OFF") $_SESSION['led_val'] = 0 ;
 
  $checked_lo = $_SESSION['checked_lo'] ;
  $checked_rm = $_SESSION['checked_rm'] ;
  $led_brightness = $_SESSION['led_val'] ;

?>

<!DOCTYPE html><html lang='ja'><head><meta charset='UTF-8'>
<style>
       #base          {font-size:16pt;text-align:center;width:300px;border:solid 4px #93ff93; }
       #radio_box     {font-size:12pt;float:left ;text-align:left; width:45%; }
       #disp_box      {font-size:12pt;float:right;text-align:left; width:50%; }
       #brightness    {font-size:12pt;text-align:right; }
       #val_box       {font-size:12pt;text-align:center; clear:both ;}
       #ctl_box       {text-align:center; }
       input.radio    {margin-left:8px; width:30px;}
       input.value    {margin-left:8px; width:30px;}
       input.setbutton{margin-left:8px; width:40px;}
       input.slider   {margin-left:8px; width:250px;}
       input.button   {margin:0px 15px; width:100px;}
       </style>

<title>Color LED Controller</title></head>

<body>
<div id="base">
  <p>LED ON/OFF</p>
  <div id="radio_box">
    <form method="get">
      <?php echo '<input class="radio" type="radio" name="remote" id="rad_lo" value="local" ' ; ?>
      <?php echo $checked_lo ; ?>
      <?php echo ' onclick="disp_ctrl(this.value); submit(this.value)">local<br>' ; ?>
      <?php echo '<input class="radio" type="radio" name="remote" id="rad_rm" value="remote" ' ; ?>
      <?php echo $checked_rm ; ?>
      <?php echo ' onclick="disp_ctrl(this.value); submit(this.value)">remote<br>' ; ?>
    </form>
  </div>
  <div id="disp_box">
      <span> brightness value</span><br>
      <?php echo '<div id="brightness"><output id="o1">' ; ?>
      <?php echo $led_brightness ; ?>
      <?php echo '</output></div>' ; ?>
  </div>
  <div id="val_box">
    <form method="get">
      <span style="font-size:10pt;"> LED brightness (0-255)</span> 
      <?php echo "<input class='value'  type='text' name='led_v' value=" ; ?>
      <?php echo $led_brightness ; ?>
      <?php echo " id='led_v' disabled>" ; ?>
      <input class='setbutton' type='submit' name='set' id='set' value='SET' disabled>
    </form> 
    <form method='get'> 
      <?php echo "<input class='slider' type='range' name='led_s' id='led_s' value=" ; ?>
      <?php echo $led_brightness ; ?>
      <?php echo "min='0' max='255' step='1' disabled" ; ?>
      <?php echo "  onchange='setval(this.value)' ; oninput='setval(this.value)' ; onmouseup='submit(this.form)' ; ontouchend='submit(this.form)'>" ?>
    </form> 
  </div>
  <div id="ctl_box">
    <form method='get'>
      <input class='button' type='submit' name='on' id='on' value='ON' disabled >
      <input class='button' type='submit' name='off' id='off' value='OFF' disabled><br>
    </form>
  </div>
</div>


<script>
var polling = null ;

function setval(ledval){
 var xhr = new XMLHttpRequest();
        xhr.open("get", "pwm_vol_rspval.php?slid="+ledval );
        xhr.setRequestHeader('Cache-Control', 'no-cache');
        xhr.setRequestHeader('If-Modified-Since', 'Thu, 01 Jun 1970 00:00:00 GMT');
        xhr.responseType = 'document' ;

        xhr.onreadystatechange = function() {
          if( (xhr.readyState == 4) && (xhr.status == 200) ) {
            document.getElementById('led_v').value = xhr.response.getElementById("output1").innerHTML;
            document.getElementById('o1').innerHTML = xhr.response.getElementById("output1").innerHTML;
          }
        }

        ntimeout = function(e) {
          xhr.abort() ;
        }
        xhr.send();
}


function getval(){
 var xhrget = new XMLHttpRequest();
        xhrget.open("get", "pwm_vol_rsppol.php?pol" );
        xhrget.setRequestHeader('Cache-Control', 'no-cache');
        xhrget.setRequestHeader('If-Modified-Since', 'Thu, 01 Jun 1970 00:00:00 GMT');
        xhrget.responseType = 'document' ;

        xhrget.onreadystatechange = function() {
          if( (xhrget.readyState == 4) && (xhrget.status == 200) ) {
            document.getElementById('o1').innerHTML = xhrget.response.getElementById("output1").innerHTML;
          }
        }

        ntimeout = function(e) {
          xhrget.abort() ;
        }
        xhrget.send();
}

function disp_ctrl( radioid ) {
   if(radioid == 'remote') {
      document.getElementById('led_v').disabled = false;
      document.getElementById('set').disabled = false;
      document.getElementById('led_s').disabled = false;
      document.getElementById('on').disabled = false;
      document.getElementById('off').disabled = false;
      clearInterval(polling);
   } else {
      document.getElementById('led_v').disabled = true;
      document.getElementById('set').disabled = true;
      document.getElementById('led_s').disabled = true;
      document.getElementById('on').disabled = true;
      document.getElementById('off').disabled = true;
      polling = setInterval(getval,100) ;
   }

}

window.onload = function() {
    if(document.getElementById("rad_rm").checked) {
      document.getElementById('led_v').disabled = false;
      document.getElementById('set').disabled = false;
      document.getElementById('led_s').disabled = false;
      document.getElementById('on').disabled = false;
      document.getElementById('off').disabled = false;
      clearInterval(polling);
    } else if(document.getElementById("rad_lo").checked) {
      document.getElementById('led_v').disabled = true;
      document.getElementById('set').disabled = true;
      document.getElementById('led_s').disabled = true;
      document.getElementById('on').disabled = true;
      document.getElementById('off').disabled = true;
      polling = setInterval(getval,100) ;
    }
}

</script>

</body>
</html>

<?php $led_brightness = $_GET['slid'] ; ?>

<!DOCTYPE html><html lang='ja'>
  <head> <title>Color LED Controller</title></head>
  <body>

  <?php
    echo "<output id='output1'>" ;
    echo $led_brightness ;
    echo "</output>" ;
  ?>

  </body> </html>

<?php
  session_start() ;

  if (is_null($_SESSION['led_val'])) {
    $_SESSION['led_val'] = 0 ;
  }
  $led_brightness = $_SESSION['led_val'] + 1 ;
  if ($led_brightness > 255) $led_brightness = 0 ;
  $_SESSION['led_val'] = $led_brightness ;
?>

<!DOCTYPE html><html lang='ja'>
  <head> <title>Color LED Controller</title></head>
  <body>

  <?php
    echo "<output id='output1'>" ;
    echo $led_brightness ;
    echo "</output>" ;
  ?>

  </body> </html>

以下、変更部分の覚書等:
--- < HTML 本体 > ---
( 行# 1-28 )
　スケッチ部分(GET を受けた時の処理)を模擬。
セッションを使用してラジオボタンの状態やLEDの明るさを保存する。
　3-6 : ラジオボタンの状態の初期設定 (セッションデータが存在しない場合は初期値を設定)
　7-15 : ラジオボタン (REMOTE/LOCAL) が押された場合(GET) の状態をセッションデータに保持。
　17 : LEDの明るさの初期設定。
　19-22 : スライダーや各ボタン操作の場合(GET)の処理。
　24-26 : セッションデータを変数に代入。
　　　　　 ( 元のHTML で使用していた変数名に合わせる )

(行#52-59, 65-67, 72-74, 78-81)
　変数を値にして HTML を出力する。
　( スケッチでは変数を値に置換してから送信 )

(行#99, 120)
　xhr.open でレスポンス用のファイル (PHP) を指定。
　( スケッチ用では、ファイル名は無し )

--- < スライダー操作時の XHR レスポンス用 > ---
(行#1)
　GET で受け取った値を変数に代入。
(行#7-11)
　変数を値にして HTML を出力する。
　
--- < Local時のポーリングの XHR レスポンス用 > ---
(行#1-10)
　ポーリングの度に、LED の明るさをインクリメントする。
　（LEDの明るさ (セッションデータ) は、HTML本体と同じ。

(行#16-20)
　変数を値にして HTML を出力する。
　

覚え書き

ページ

2019年1月23日水曜日

ESP32/arduino : HTML部分を PHP でデバッグ

0 件のコメント:

コメントを投稿

ページ

ESP32/arduino : HTML部分を PHP で デバッグ

0 件のコメント:

コメントを投稿

ESP32/arduino : HTML部分を PHP でデバッグ