データの書き込み

プロジェクト名: project_write

これまでの知識を参考にして、データをPLCのデバイスに書き込む処理を実装します。

名称	デバイス名	データ
タイマ0	D0	0
タイマ1	D1	0
タイマ2	D2	0
タイマ3	D3	0
カウンタ0	C0	0

書き込み処理の追加

HTMLの「データ列」にinput要素を追加して、書き込むデータを入力します。書き込みボタンを押すとPLCにデータが書き込まれます。失敗したときは、書込みボタンの下にメッセージを表示します。

書き込み画面

deviceRead.htmlをコピーしてdeviceWrite.htmlを作成します。
<div class="datagrid">内のHTMLを修正します。データ列にinput要素を追加します。

input要素の追加

<!-- データ -->
<div class="cell data">タイマ0</div>
<div class="cell data">D0</div>
<div class="cell data">
  <input type="text" name="" id="d0" class="input-data" value="0" />
</div>

<div class="cell data">タイマ1</div>
<div class="cell data">D1</div>
<div class="cell data">
  <input type="text" name="" id="d1" class="input-data" value="0" />
</div>

<div class="cell data">タイマ2</div>
<div class="cell data">D2</div>
<div class="cell data">
  <input type="text" name="" id="d2" class="input-data" value="0" />
</div>

<div class="cell data">タイマ3</div>
<div class="cell data">D3</div>
<div class="cell data">
  <input type="text" name="" id="d3" class="input-data" value="0" />
</div>

<div class="cell data">カウンタ0</div>
<div class="cell data">D100</div>
<div class="cell data">
  <input type="text" name="" id="d100" class="input-data" value="0" />
</div>

<button id="send" autofocus>書き込み</button>の下にメッセージを表示する要素を追加します。

<div id="message"></div>

書き込みデータの変換

データ列は10進数で入力します。クエリパラメータで送信するときは16進数の文字列に変換する必要があります。10進数の文字列を16進数文字列に変換する関数を作成します。

deviceRead.jsをコピーしてdeviceWrite.jsを作成します。
decimalToHex関数を追加します。

// 10進数文字列を16進数文字列に変換
function decimalToHex(decStr, digit) {
  const decimal = parseInt(decStr, 10);
  return decimal.toString(16).toUpperCase().padStart(digit, "0");
}

書き込み要求データの作成

書き込み用のクエリパラメータを作成します。次の例は、デバイスD0にワード単位の655535（負の数だと-1）を書き込みます。

例: NUM=1&DEV1=D0&TYP1=W&DATA1=FFFF

例では、NUMは点数、DEV1はデバイスアドレス、TYP1はデバイスタイプ（ワード:W）、DATA1は書き込むデータ（16進数）です。

これまで作成した読出しプログラムを参考に、クエリパラメータは次のデータ構造で管理します。

// 要求デバイス
const requestWriteDevice = [
    { dev: "D0", typ: "W", data: decimalToHex(d0.value, 4) },
    { dev: "D1", typ: "W", data: decimalToHex(d1.value, 4) },
    { dev: "D2", typ: "W", data: decimalToHex(d2.value, 4)  },
    { dev: "D3", typ: "W", data: decimalToHex(d3.value, 4) },
    { dev: "D100", typ: "W", data: decimalToHex(d100.value, 4) },
];

書き込みの要求デバイスのため、deviceWrite.jsのcreateQueryParams関数をcreateWriteQueryParams関数に変更します。

// クエリパラメータを作成
function createWriteQueryParams(list) {
  const form = new URLSearchParams();
  form.append("NUM", String(list.length));
  for (let i = 0; i < list.length; i++) {
    form.append("DEV" + (i + 1), list[i].dev);
    form.append("TYP" + (i + 1), list[i].typ);
    form.append("DATA" + (i + 1), list[i].data);
  }
  return form;
}

書き込み処理の実装

deviceWrite.htmlを修正します。
<script src="deviceRead.js"></script>を<script src="deviceWrite.js"></script>に変更します。

オブジェクトの取得と初期データの準備

HTML（DOM）オブジェクトを取得します。

const d0 = document.querySelector("#d0");
const d1 = document.querySelector("#d1");
const d2 = document.querySelector("#d2");
const d3 = document.querySelector("#d3");
const d100 = document.querySelector("#d100");

const dataObjs = [d0, d1, d2, d3, d100];

const send = document.querySelector("#send");
const message = document.querySelector("#message");

PLCの情報を宣言します。

const plcIPAddress = "192.168.3.100";
const cgiPath = "/cgi/WrDev.cgi";

書き込みボタンのイベントリスナー

書き込みボタンが押されたら、HTMLのinput要素から値を取得して、書き込み用のオブジェクトを生成します。書き込み用のクエリパラメータを作成して、PLCに送信します。

書き込み処理

/* 書き込みボタンの処理 */
let writing = false; // 書き込みボタンの連打対策
send.addEventListener("click", async () => {
  if (writing) return; // 連打対策
  writing = true; // 書き込み中
  
  send.disabled = true; // 書込みボタン無効
  message.textContent = ""; // メッセージを削除
  
  // TODO: 入力されたデータが、-32768～32767の範囲であることを検証すること。

  // 要求デバイス
  const requestWriteDevice = [
      { dev: "D0", typ: "W", data: decimalToHex(d0.value, 4) },
      { dev: "D1", typ: "W", data: decimalToHex(d1.value, 4) },
      { dev: "D2", typ: "W", data: decimalToHex(d2.value, 4)  },
      { dev: "D3", typ: "W", data: decimalToHex(d3.value, 4) },
      { dev: "D100", typ: "W", data: decimalToHex(d100.value, 4) },
  ];
  
  const params = createWriteQueryParams(requestWriteDevice);
  const responseJson = await sendQueryParams(
      plcIPAddress,
      cgiPath,
      params
  );
  if (!responseJson) {
      console.warn("応答が受信できません。");
      message.textContent = "応答が受信できません。";
  } else {
      console.log(responseJson);
      // TODO: 正常に書き込めたときは、戻り値は「書き込んだデバイスの読出し値」なので、
      //       書き込んだ値と読み出した値が一致していることを検証すること。
  }
  writing = false;
  send.disabled = false; // 書き込みボタン有効
});

deviceRead.cssをコピーしてdeviceWrite.cssを作成します。
index.htmlを修正して、deviceWrite.htmlへのリンクを追加します。
```
<li><a href="deviceWrite.html">書き込みテスト</a></li>
```
作成したファイルdeviceWrite.html、deviceWrite.js、deviceWrite.cssとindex.htmlをPLCに書き込みます。

動作確認

データが書き込まれていることをGX Works 3で確認します。

サンプルプロジェクトを開いて、PLCと通信ができることを確認します。
ウォッチ画面を開いて、D0～D3とD100を登録します。
作成したホームページで書き込んだデータが、ウォッチ画面に反映されることを確認してください。

書き込み処理の追加​

書き込みデータの変換​

書き込み要求データの作成​

書き込み処理の実装​

オブジェクトの取得と初期データの準備​

書き込みボタンのイベントリスナー​

動作確認​