<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#3367D6">
    <title>Digital Maya</title>

    <!-- PNGファビコンの場合 -->
    <link rel="icon" href="./images/favicon.png" type="image/png">

    <!-- 必要なライブラリを読み込み -->
    <script src="./assets/moment@2.29.1"></script>
    <script src="./assets/chart.js@3.7.1"></script>
    <script src="./assets/chartjs-adapter-moment@1.0.0"></script>
    <script src="./assets/chartjs-plugin-streaming@2.0.0"></script>

    <link rel="stylesheet" href="./styles.min.css">
    <style>
    </style>

</head>
<body>
  <div id="top-bar">
    <div id="left-section">
        <img src="./images/vehicle005.png" width="30" height="30" style="margin-left:-10px;margin-right:10px;">
        <h1 style="font-size: 24px;margin:0">デジタル・マヤ <span style="font-size: 20px;">　　リアルタイムチャート</span></h1>
    </div>
    <div style="font-size: 18px;color:rgb(250, 248, 156) ;" id="topMessage"></div>

    <div id="right-icons">

  
      <!-- 実行アイコン (ツールチップに "実行" と表示) -->
      <h1 id="play-msg" class="title-msg" >オフラインモード</h1>
      <svg id="play-icon" class="play-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
        <title>実行</title>      
        <circle cx="50" cy="50" r="48" stroke="gray" stroke-width="4"  fill="white"/>
        <polygon points="35,25 75,50 35,75" />
      </svg>

      <!-- 停止アイコン (ツールチップに "停止" と表示) -->
      <h1 id="stop-msg" class="title-msg" style="display: none;color:pink;">オンラインモード</h1>
      <svg id="stop-icon" class="play-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="display: none;">
        <title>停止</title>      
        <circle cx="50" cy="50" r="48" stroke="gray" stroke-width="4" fill="white"/>
        <rect x="30" y="30" width="40" height="40" />
      </svg>

      <!-- 右端に余白を入れる -->
      <div style="margin-right:30px;"></div>
    </div>
  </div>

  <div class="section-block">  
      <div class="section-block-sub"><canvas id="myChart"></canvas></div>
      <div class="section-block-sub"><canvas id="myChart2"></canvas></div>
      <div class="section-block-sub"><canvas id="myChart3"></canvas></div>
  </div>

  <div class="section-block2">
    <tcb-csc-gauges class="section-block2-sub"></tcb-csc-gauges>
    <!-- <div class="section-block2-sub"id="operation-box"></div> -->
    <div class="section-block2-sub">
      <div style="font-size: 95%;">
        <!-- ロギング --------------------------------------------------------------------->
        <div style="margin-top:10px">－ロギング  －－－－</div>
        <div>
          <button class="cool-button" id="logButton" style="margin-top:5px">ロギング開始</button>
          <span id="logMessage" style="margin-left:10px;color:darkmagenta" hidden>実行中！</span>
        </div>

        <!-- マーカー記録 --------------------------------------------------------------------->
        <div style="margin-top:5px;margin-bottom:1px">
          <button class="cool-button" id="markButton" >マーカー記録</button>
          <span id="markMessage" style="margin-left:10px;color:darkmagenta" hidden>記録実施！</span>
        </div>
        <!-- コメント --------------------------------------------------------------------->
        <div style="margin-top:7px;margin-bottom:3px">
          <span style="margin-left:5px;color:darkmagenta;font-size: 90%;" >コメント　</span>
          <input class="input-file-name" type="text" id="markComment" placeholder="Enter your text" value="脱線頻発地点">        
        </div>
        <!-- ファイル名 --------------------------------------------------------------------->
        <div>
          <span style="margin-left:5px;margin-bottom:20px;color:darkmagenta;font-size: 90%;" >ファイル名</span>
          <input class="input-file-name" type="text" id="logFile" >  
        </div>
        <!-- 保存・ファイル保存 --------------------------------------------------------------------->
        <div style="margin-top:5px;margin-bottom:1px">
          <button class="cool-button" id="csvSave" style="margin-top:5px">ファイル保存</button>          
          <button class="cool-button" id="csvRead" style="margin-top:5px">ビューア表示</button>
        </div>

        <!-- 換算式設定 --------------------------------------------------------------------->
        <div style="margin-top:20px">－オフセット補正  －－－</div>
        <div>
          <div style="font-size: 90%;">
            <span  style="margin-left:108px;color:darkmagenta" >現在値</span>            
            <span  style="margin-left:0px;color:darkmagenta" >設定値</span>            
          </div>
          <div  style="margin-bottom:5px">
            <button class="cool-button" id="H_rButton" style="background-color: rgb(255, 99, 132);" title="設定値を反映する時はクリックしてください">右レール高さ</button>
            <span class="fixed-box" id="H_rNow">0</span>
            <input class="input-offset" type="text" id="H_rNew" >    
            <!-- <button class="cool-button" id="H_rButton" style="margin:0px">反映</button> -->
          </div>

          <div  style="margin-bottom:5px">
            <button class="cool-button" id="H_lButton" title="設定値を反映する時はクリックしてください">左レール高さ</button>
            <!-- <span class="cool-button" style="background-color: rgb(54, 162, 235);">左レール高さ</span> -->
            <span class="fixed-box" id="H_lNow">0</span>
            <input class="input-offset" type="text" id="H_lNew" >    
            <!-- <button class="cool-button" id="H_lButton" style="margin:0px">反映</button> -->
          </div>

          <div  style="margin-bottom:5px">
            <button class="cool-button" id="D_railButton" style="background-color: rgb(255, 205, 86);"title="設定値を反映する時はクリックしてください">左右変位　　</button>
            <span class="fixed-box" id="D_railNow">0</span>
            <input class="input-offset" type="text" id="D_railNew" >    
            <!-- <button class="cool-button" id="D_railButton" style="margin:0px">反映</button> -->
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Interface of CscBleComponent -->
  <div>
    <div id="efc_Text" ></div>
    <div id="D_rail_Text" ></div>
    <div id="H_l_Text" ></div>
    <div id="H_r_Text" ></div>
    <div id="Vrms_Text" ></div>
    <div id="Vpeak_Text" ></div>
    <div id="G_x_Text" ></div>
    <div id="G_y_Text" ></div>
    <div id="G_z_Text" ></div>
    <div id="temp_Text" ></div>
  <!-- 電圧極性 データ保存用 20241028 -->
  <div id="Vdir_Text" ></div>

    <!-- Bluetoohの接続ボタン用 -->
    <div id="ble-connect-dummy-button"></div>
    <!-- Bluetoohの接続不可時に実行->停止に戻すためステータスを取得する -->
    <div id="ble-status"></div>        
  </div>

  <script src="dist/es5-loader.js"></script>
  <script src="./real-time-chart.min.js"></script>

  <!-- <script>
      // このダミーを追加したらコメント ctrl+/ が有効になった
      const playIcon1 = document.getElementById('play-icon');

  </script> -->
</body>
</html>
