smithtek-nodered/smithtek/smithtek_out.html

NodeRED node to post data on SmithTek using MQTT.

<script type="text/x-red" data-template-name="smithtek_out">
    <div class="form-row">
        <label for="node-input-name">
          <i class="fa fa-tag"></i>
          <span data-i18n="smithtek.name"></span>
      </label>
        <input type="text" id="node-input-name" data-i18n="[placeholder]smithtek.name" />
    </div>

    <div class="form-row">
        <label for="node-input-token">
          <i class="fa fa-lock"></i>
          <span data-i18n="smithtek.token.label"></span>
      </label>
        <input type="text" id="node-input-token" data-i18n="[placeholder]smithtek.token.placeholder" />
    </div>

    <div class="form-row">
        <label for="node-input-device_label">
          <i class="fa fa-tag"></i>
          <span data-i18n="smithtek.device_label.label"></span>
      </label>
        <input type="text" id="node-input-device_label" data-i18n="[placeholder]smithtek.device_label.placeholder" />
    </div>
    <div class="form-row" id="variable_label">
      <label for="node-input-variable_label">
        <i class="fa fa-tag"></i>
        <span data-i18n="smithtek.variable_label.label" style="font-size:13px"></span>
    </label>
      <input type="text" id="node-input-variable_label" data-i18n="[placeholder]smithtek.variable_label.placeholder" />
  </div>
   <div class="form-row">
     <input type="checkbox" checked id="node-input-tls_checkbox" style="display: inline-block; width: auto; vertical-align: top;"></label>
     <label for="node-input-tls_checkbox" style="width: calc(100% - 170px); margin-left:15px" data-i18n="smithtek.tls.label"></label>
    </div>
    <div class="form-row">
      <input type="checkbox" checked id="node-input-simple_node_checkbox" style="display: inline-block; width: auto; vertical-align: top;"></label>
      <label for="node-input-simple_node_checkbox" style="width: calc(100% - 170px); margin-left:15px" data-i18n="smithtek.simple_node"></label>
    </div>


    </div>
</script>

<script type="text/x-red" data-help-name="smithtek_out">
  <p>Receives a message and uses its values to publish a request to the SMITHTEK Service via MQTT.</p>
  <p>
    Uses the <a href="https://github.com/mqttjs/MQTT.js" target="_blank" rel="noopener noreferrer">MQTT</a> library to establish the connection and publish to the service.
  </p>
  <p>Double click on the node to configure all the required fields.</p>
  <ul>
    <li>
      <p>
        <b>Name:</b> Label of node in Node-Red workspace. If empty, defaults to "SmithTek out".
      </p>
    </li>
    <li>
      <p>
        <b>Token:</b> (Required) - Token necessary to authenticate the connection.
      </p>
    </li>
    <li>
      <p>
        <b>Device Label:</b> (Required) The Device Label to which the data will be published. If no Device exists with this label in the target account, it will be automatically created. Can be sent dynamically in the input JSON message object with the key "device_label". If no Device label is sent in the message, it defaults back to the value from the Device Label field.
      <p>
    </li>
    <li>
      <p>
        <b>Variable Label:</b> The Variable Label to which the node will publish (only required in Simple Node mode).
      <p>
    </li>
    <li>
      <p>
        <b>SSL:</b> By default all data is sent encrypted via TLS. Uncheck if data should be sent unencrypted.
      </p>
    </li>
    <li>
      <p>
        <b>Simple Node:</b> If selected, the node receives a raw number and publishes an object with the Variable Label as key and an object as value, e.g. <pre>{"variable_label": {"value": 100}}</pre>
      </p>
    </li>
  </ul>
  <p>
    The input JSON message object can contain the following properties (only applicable if Simple Node is <b>disable</b>):
    <ul>
      <li>
        <p>
          <b>msg.payload.device_label</b> (Optional) - The Device Label to which the payload will be published. If the device_label  key doesn't exist, it takes the Device Label from the <i>Device Label</i> field in the node settings.
        </p>
      </li>
      <li>
        <p>
          <b>msg.payload</b> (Required) - The Variable Labels and its values to be published on the given Device. Each key is the Variable Label.
          <p>Example of a simple value JSON message:<pre>{"variable_label": 100}</pre>
          <p>Example of a JSON message providing context data: <pre> {"variable_label": {"value": 200, "context": {"key1": "value1","key2":"value2"}}}</pre>
          <p>Example of JSON message with multiple variables: <pre>{"variable_label1": {"value": 100}, "variable_label2": {"value": 200}}</pre>
          </p>
      </li>
    </ul>
  </p>
</script>

<script type="text/javascript">
  RED.nodes.registerType("smithtek_out", {
    category: "output",
    color: "#B9B6B8",
    defaults: {
      name: {
        value: "",
      },
      token: {
        value: "",
        required: true,
      },
      label_device: { value: "" },
      device_label: {
        value: "",
        required: true,
      },
      variable_label: { value: "", required: true },
      tls_checkbox: { value: true },
      simple_node_checkbox: { value: true },
    },
    inputs: 1,
    outputs: 0,
    icon: "smithtek.png",

    label: function () {
      return this.name || this.to || "SmithTek Out";
    },
    labelStyle: function () {
      return this.name ? "node_label_italic" : "";
    },
    oneditprepare: function () {
      if ($('#node-input-simple_node_checkbox').is(':checked')) {
        $('#variable_label').show();
      }else{
        $('#variable_label').hide();
      }

      $('#node-input-simple_node_checkbox').on('click', function () { 
        if ($('#node-input-simple_node_checkbox').is(':checked')) {
          $('#variable_label').show();
        }else{
          $('#variable_label').hide();
        }
      });
    }
  });
</script>

<style>
  .form-row label {
    width: 25%;
  }

  .form-row select {
    width: 70%;
  }
</style>