edgepi-leds.html

<script type="text/javascript">
  RED.nodes.registerType("led", {
    category: "EdgePi",
    color: "#f391aa",
    defaults: {
      name: { value: "" },
      transport: { value: "Local" },
      ledState: { value: true },
      ledPin: { value: 1 },
      tcpAddress: { value: "" },
      tcpPort: { value: "" },
    },
    inputs: 1,
    outputs: 1,
    icon: "light.svg",
    label: function () {
      return this.name || "led";
    },
    oneditprepare: function () {
      const transportType = document.getElementById("node-input-transport");
      const tcpTransportInputs = document.querySelector(".form-row.tcp");
      const ledOn = document.getElementById("node-input-led-on");
      const ledOff = document.getElementById("node-input-led-off");

      if (this.ledState === true) {
        ledOn.checked = true;
      } else {
        ledOff.checked = true;
      }

      function updateEditor() {
        tcpTransportInputs.style.display =
          transportType.value === "Network" ? "flex" : "none";
      }
      updateEditor();
      transportType.addEventListener("change", updateEditor);
      ledOn.addEventListener("change", updateEditor);
      ledOff.addEventListener("change", updateEditor);
    },
    oneditsave: function () {
      this.ledState = document.getElementById("node-input-led-on").checked
        ? true
        : false;
    },
  });
</script>

<script type="text/html" data-template-name="led">
  <style>
    * {
      box-sizing: border-box !important;
    }

    .form-row {
      display: flex;
      align-items: center;
    }

    .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.state input[type="radio"] {
      width: 40px !important;
      margin: 0;
    }

    label[for="node-input-led-on"],
    label[for="node-input-led-off"] {
      width: 60px !important;
    }
  </style>

  <div class="form-row">
    <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 state">
    <label for="node-input-state">State:</label>
    <input
      type="radio"
      name="ledState"
      id="node-input-led-on"
      value="true"
      checked
    />
    <label for="node-input-led-on">On</label>
    <input type="radio" name="ledState" id="node-input-led-off" value="false" />
    <label for="node-input-led-off">Off</label>
  </div>
  <div class="form-row ledPin">
    <label for="node-input-ledPin">Pin</label>
    <select id="node-input-ledPin">
      <option value="1">LED1</option>
      <option value="2">LED2</option>
      <option value="3">LED3</option>
      <option value="4">LED4</option>
      <option value="5">LED5</option>
      <option value="6">LED6</option>
      <option value="7">LED7</option>
      <option value="8">LED8</option>
    </select>
  </div>
</script>

<script type="text/html" data-help-name="led">
  <p>Changes the state of a single LED on the EdgePi.</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>State</dt>
    <dd>Configures the LED to be on or off.</dd>
  </dl>

  <h3>Inputs</h3>
  <dd>
    Initial configurations set in the editor are applied once the node is
    deployed. Configurations can then be dynamically set from input.
  </dd>
  <dl class="message-properties">
    <dt>payload <span class="property-type">boolean</span></dt>
    <dd>The LED state. <strong>true</strong> for on, <strong></strong>false</strong> for off.</dd>
  </dl>
  <dl class="message-properties">
    <dt>pin <span class="property-type">string</span></dt>
    <dd>The LED pin on which to change state.</dd>
  </dl>
  <h3>Outputs</h3>
  <dl class="message-properties">
    <dt>payload<span class="property-type">string</span></dt>
    <dd>A success message stating the configuration of the given LED.</dd>
  </dl>
  <h3>References</h3>
  <ul>
    <li>
      <a href="https://github.com/edgepi-cloud/node-red-edgepi-led">GitHub</a>
      -the node's github repository
    </li>
  </ul>
</script>