edgepi-dac.html

<script type="text/javascript">
  RED.nodes.registerType("dac", {
    category: "EdgePi",
    color: "#f391aa",
    defaults: {
      name: { value: "" },
      transport: { value: "Local" },
      tcpAddress: { value: "" },
      tcpPort: { value: "" },
      voltage: { value: 0 },
      channel: { value: 1 },
      gain: { value: false },
    },
    inputs: 1,
    outputs: 1,
    icon: "arrow-right.svg",
    label: function () {
      return this.name || "dac";
    },
    oneditprepare: function () {
      const transportType = document.getElementById("node-input-transport");
      const gainOff = document.getElementById("node-input-gainOff");
      const gainOn = document.getElementById("node-input-gainOn");
      const tcpTransportInputs = document.querySelector(".form-row.tcp");
      const voltageGainOff = document.querySelector(".form-row.voltageGainOff");
      const voltageGainOn = document.querySelector(".form-row.voltageGainOn");

      if (this.gain) {
        gainOn.checked = true;
      } else {
        gainOff.checked = true;
      }

      function updateEditor() {
        tcpTransportInputs.style.display =
          transportType.value === "Network" ? "flex" : "none";
        const selectedGain = !gainOff.checked;
        voltageGainOff.style.display = !selectedGain ? "flex" : "none";
        voltageGainOn.style.display = selectedGain ? "flex" : "none";
      }

      updateEditor();
      document.getElementById(
        this.gain ? "node-input-voltageGainOn" : "node-input-voltageGainOff"
      ).value = this.voltage;

      transportType.addEventListener("change", updateEditor);
      gainOff.addEventListener("change", updateEditor);
      gainOn.addEventListener("change", updateEditor);
    },
    oneditsave: function () {
      this.gain = document.getElementById("node-input-gainOn").checked;
      this.voltage = document.getElementById(
        this.gain ? "node-input-voltageGainOn" : "node-input-voltageGainOff"
      ).value;
    },
  });
</script>
<script type="text/html" data-template-name="dac">
  <style>
    * {
      box-sizing: border-box !important;
    }

    .form-row {
      display: flex;
    }

    .form-row > label {
      margin-top: auto;
      margin-bottom: auto;
    }

    .form-row.tcp {
      flex-direction: row;
      align-items: center;
      margin-top: -5px;
      margin-bottom: 10px;
    }

    .tcp-address-input {
      width: 160px !important;
      margin-left: 100px !important;
    }
    .tcp-port-input {
      width: 60px !important;
    }

    .tcp-port-label {
      width: 5px !important;
      margin: auto 5px;
    }

    .form-row.voltageGainOff input,
    .form-row.voltageGainOn input {
      width: 60px;
    }

    .form-row.gain input[type="radio"] {
      width: 40px !important;
      margin: 0;
    }

    label[for="node-input-gainOff"],
    label[for="node-input-gainOn"] {
      width: 50px !important;
    }
  </style>

  <div class="form-row name">
    <label for="node-input-name"><i class="fa fa-tag"></i> Name:</label>
    <input type="text" id="node-input-name" placeholder="Name" />
  </div>
  <div class="form-row transport">
    <label for="node-input-transport">RPC Server:</label>
    <select id="node-input-transport">
      <option value="Local">Local</option>
      <option value="Network">Network</option>
    </select>
  </div>
  <div class="form-row tcp">
    <input
      class="tcp-address-input"
      type="text"
      id="node-input-tcpAddress"
      placeholder="IP Address/ Hostname"
    />
    <label class="tcp-port-label" for="node-input-tcpPort">:</label>
    <input
      class="tcp-port-input"
      type="text"
      id="node-input-tcpPort"
      placeholder="Port"
    />
  </div>
  <div class="form-row channel">
    <label for="node-input-channel">Channel:</label>
    <select id="node-input-channel">
      <option value="1">A-OUT1</option>
      <option value="2">A-OUT2</option>
      <option value="3">A-OUT3</option>
      <option value="4">A-OUT4</option>
      <option value="5">A-OUT5</option>
      <option value="6">A-OUT6</option>
      <option value="7">A-OUT7</option>
      <option value="8">A-OUT8</option>
    </select>
  </div>
  <div class="form-row gain">
    <label>Gain:</label>
    <input
      type="radio"
      name="gain"
      id="node-input-gainOff"
      value="false"
      checked
    />
    <label for="node-input-gainOff">OFF</label>
    <input type="radio" name="gain" id="node-input-gainOn" value="true" />
    <label for="node-input-gainOn">ON</label>
  </div>
  <div class="form-row voltageGainOn">
    <label for="node-input-voltageGainOn">Output voltage (V): </label>
    <input
      type="number"
      id="node-input-voltageGainOn"
      placeholder="0-10"
      min="0"
      max="10"
      step="0.1"
    />
  </div>
  <div class="form-row voltageGainOff">
    <label for="node-input-voltageGainOff">Output voltage (V): </label>
    <input
      type="number"
      id="node-input-voltageGainOff"
      placeholder="0-5"
      min="0"
      max="5"
      step="0.1"
    />
  </div>
</script>

<script type="text/html" data-help-name="dac">
  <p>Generate analog output voltage based on voltage provided.</p>
  <h3>Properties</h3>
  <dl class="message-properties">
    <dt>RPC Server</dt>
    <dd>
      The connection to your EdgePi's RPC Server. Use <strong>Local</strong> if
      node-red is running on EdgePi. Otherwise use the
      <strong>Network</strong> option and enter EdgePi's IP address / Hostname.
    </dd>
    <dt>Channel</dt>
    <dd>The EdgePi channel to write voltage to.</dd>
    <dt>Output Voltage<span class="property-type">number</span></dt>
    <dd>
      The output voltage for the selected channel. Limit 0-5 for gain OFF
      selection or 0-10 for gain ON selection.
    </dd>
  </dl>
  <h3>Inputs</h3>
  <dl class="message-properties">
    <dt>msg.gain<span class="property-type">string</span></dt>
    <dt>msg.channel<span class="property-type">number</span></dt>
    <dt>msg.payload<span class="property-type">number</span></dt>
  </dl>
  <h3>Outputs</h3>
  <dl class="message-properties">
    <dt>payload <span class="property-type">number</span></dt>
    <dd>A success message stating the voltage set for the selected channel.</dd>
  </dl>
  <h3>References</h3>
  <ul>
    <li>
      <a href="https://github.com/edgepi-cloud/node-red-edgepi-dac">GitHub</a>
      -the node's github repository
    </li>
  </ul>
</script>