node-red-sensecap-paas/open-stream.html

SenseCAP PaaS

<style>
  .ui-widget.ui-widget-content {
    border: none;
  }
  .red-ui-tray-content {
    overflow: unset;
  }
  .radioGroup {
    display: flex;
    align-items: center;
    width: 100px;
  }
  .radioBox {
    width: 20px !important;
    margin-top: 0 !important;
  }
  .radioLabel {
    margin-left: 10px;
    margin-bottom: 0 !important;
    cursor: auto !important;
  }
  .des {
    width: 450px;
    margin-top: 10px !important;
    line-height: 25px;
    /* word-break: break-all; */
  }
</style>
<script type="text/html" data-template-name="OpenStream">
  <div class="form-row">
    <label for="node-input-name" style="width: 125px;">
      <i class="fa fa-tag"></i> <span>Name</span>
    </label>
    <input type="text" id="node-input-name" placeholder="Name" />
  </div>

  <div class="form-row">
    <label for="node-input-broker" style="width: 125px;">
      <i class="fa fa-user"></i> <span>Account</span>
    </label>
    <input type="text" id="node-input-broker" />
  </div>

  <div class="form-row">
    <label for="node-input-eui" style="width: 125px;">
      <i class="fa fa-tablet"></i> <span>EUI</span>
    </label>
    <input
      type="text"
      id="node-input-eui"
      placeholder="Any"
    />
  </div>
  <div class="form-row">
    <p class="des">
      <span>If empty, subscribe to all channels. The valid range is 1-99</span>
    </p>
  </div>
  <div class="form-row">
    <label for="node-input-channel" style="width: 125px;">
      <i class="fa fa-spotify"></i> <span>Channel</span>
    </label>
    <input
      type="text"
      id="node-input-channel"
      style="text-align:end; padding-right: 10px; width:100px;"
      placeholder="Any"
    />
  </div>
  <div class="form-row">
    <p class="des">
      <span>If empty, subscribe to all measurements. The valid range is 4097-9999</span>
      <a
        href="https://sensecap-docs.seeed.cc/measurement_list.html"
        target="_blank"
        style="text-decoration:underline;"
        >View the list of measurement IDs</a
      >
    </p>
  </div>
  <div class="form-row">
    <label for="node-input-measurementID" style="width: 125px;">
      <i class="fa fa-database"></i> <span>Measurement ID</span>
    </label>
    <input
      type="text"
      id="node-input-measurementID"
      style="text-align:end; padding-right: 10px; width:100px;"
      placeholder="Any"
    />
  </div>
  <div class="form-row">
    <label for="node-input-output" style="width: 125px;">
      <i class="fa fa-map"></i> <span>Output Format</span>
    </label>
    <select id="node-input-output">
        <option value="raw">Raw</option>
        <option value="powerbi">Power BI</option>
    </select>
</div>
</script>

<script type="text/html" data-template-name="sensecap-config">
  <div class="form-row">
    <label for="node-config-input-name" style="width: 145px;">
      <i class="fa fa-tag"></i> <span>Name</span>
    </label>
    <input
      type="text"
      id="node-config-input-name"
      placeholder="Name"
      style="width: 60%;"
    />
  </div>
  <div class="form-row">
    <p class="des">
      <b>1.</b> <span>Create your own PaaS account at</span>
      <a
        href="https://sensecap.seeed.cc/portal/#/login"
        target="_blank"
        style="text-decoration:underline;"
        >https://sensecap.seeed.cc/portal</a
      >
      <br />
      <span
        >If you want to create an Chinese account, you can create it at</span
      >
      <a
        href="https://sensecap.seeed.cn/portal/#/login"
        target="_blank"
        style="text-decoration:underline;"
        >https://sensecap.seeed.cn/portal</a
      >
    </p>
  </div>
  <div class="form-row">
    <p class="des">
      <b>2.</b>
      <span
        >From the 'Organization Information' section, copy the Organization
        Id</span
      >
    </p>
  </div>
  <div class="form-row">
    <label
      for="node-config-input-orgid"
      style="width: 125px; margin-left: 20px;"
    >
      <i class="fa fa-user"></i> <span>Organization ID</span>
    </label>
    <input
      type="text"
      id="node-config-input-orgid"
      placeholder="PaaS Organization ID"
      style="width: 60%;"
    />
  </div>
  <div class="form-row">
    <p class="des">
      <b>3.</b>
      <span
        >Create a new 'Access API keys' at the 'Security' section and copy
        them</span
      >
    </p>
  </div>
  <div class="form-row">
    <label
      for="node-config-input-apikey"
      style="width: 125px; margin-left: 20px;"
    >
      <i class="fa fa-lock"></i> <span>API Key</span>
    </label>
    <input
      type="password"
      id="node-config-input-apikey"
      placeholder="PaaS API Key"
      style="width: 60%;"
    />
  </div>
  <div class="form-row">
    <p class="des">
      <b>4.</b>
      <span>Select the site for the account</span>
    </p>
  </div>
  <div class="form-row" style="display: flex;">
    <label
      for="node-config-input-broker"
      style="width: 125px; margin-left: 20px;"
    >
      <i class="fa fa-globe"></i> <span>Server</span></label
    >
    <div style="display: flex; align-items: center;">
      <div class="radioGroup">
        <input type="radio" id="node-config-input-global" class="radioBox" />
        <label class="radioLabel">Global</label>
      </div>
      <div class="radioGroup">
        <input type="radio" id="node-config-input-china" class="radioBox" />
        <label class="radioLabel">China</label>
      </div>
    </div>
  </div>
</script>

<script type="text/javascript">
  (function () {
    function randomString() {
      var s = "abcdefghijklmnopqrstuvwxyz12345678";
      var l = s.length;
      var n = "";
      for (i = 0; i < 8; i++) n += s.charAt(Math.floor(Math.random() * l));
      return n;
    }
    RED.nodes.registerType("sensecap-config", {
      category: "config",
      defaults: {
        name: { value: "" },
        broker: { value: "sensecap-openstream.seeed.cc" },
        port: { value: 1883 },
        displayOrgid: { value: "" },
        clientid: { value: "" },
        serverRadio: { value: 1 },
        autoConnect: { value: true },
        verifyservercert: { value: false },
        compatmode: { value: false },
        protocolVersion: { value: 4 },
        keepalive: { value: 60 },
        cleansession: { value: true },
        sessionExpiry: { value: 0 },
        randomStr: { value: null },
      },
      credentials: {
        orgid: {
          required: true,
          validate: function (v) {
            return v.trim().length > 0;
          },
        },
        apikey: { type: "password", required: true },
      },
      label: function () {
        if (this.name) {
          return this.name;
        }
        if (this.displayOrgid) {
          return `org-${this.displayOrgid}`;
        }
        return "Organization must not be null";
      },
      oneditprepare: function () {
        if (this.serverRadio === 1) {
          $("#node-config-input-global").prop("checked", true);
        } else if (this.serverRadio === 2) {
          $("#node-config-input-china").prop("checked", true);
        }

        $("#node-config-input-global").on("click", function () {
          $("#node-config-input-global").prop("checked", true);
          $("#node-config-input-china").prop("checked", false);
        });
        $("#node-config-input-china").on("click", function () {
          $("#node-config-input-china").prop("checked", true);
          $("#node-config-input-global").prop("checked", false);
        });
      },
      oneditsave: function () {
        if (!this.randomStr) {
          this.randomStr = randomString();
        }
        let orgid = $("#node-config-input-orgid").val();
        if (orgid) {
          this.displayOrgid = orgid;
          this.clientid = `org-${orgid}-${this.randomStr}`;
        } else {
          this.displayOrgid = "";
          this.clientid = "";
        }

        if ($("#node-config-input-global").is(":checked")) {
          this.serverRadio = 1;
          this.broker = "sensecap-openstream.seeed.cc";
        } else {
          this.serverRadio = 2;
          this.broker = "sensecap-openstream.seeed.cn";
        }
      },
    });

    RED.nodes.registerType("OpenStream", {
      category: "sensecap",
      color: "#00a6c1",
      defaults: {
        name: { value: "" },
        qos: { value: "0" },
        broker: {
          type: "sensecap-config",
          required: true,
        },
        // subscriptionIdentifier: {value:0},
        nl: { value: false },
        rap: { value: true },
        rh: { value: 0 },
        inputs: { value: 0 },
        topic: { value: "" },
        eui: { value: "" },
        channel: {
          value: "",
          validate: function (v) {
            //为空默认+
            if (v == "") {
              return true;
            }
            if (RED.validators.regex(/^[0-9]*$/)(v)) {
              var channel = parseInt(v);
              //范围
              return channel > 0 && channel < 100

            }else {
              return false;
            }
          },
        },
        measurementID: {
          value: "",
          validate: function (v) {
            //为空默认+
            if (v == "") {
              return true;
            }
            if (RED.validators.regex(/^[0-9]*$/)(v)) {
              var measurementID = parseInt(v);
              //范围
              return measurementID > 4096 && measurementID < 10000

            }else {
              return false;
            }
          },
        },
        output: {value:"raw"},
      },
      inputs: 0,
      outputs: 1,
      icon: "sensecap.svg",
      label: function () {
        var label = "SenseCAP OpenStream - Data Out";
        return this.name || label;
      },
      labelStyle: function () {
        return this.name ? "node_label_italic" : "";
      },
      oneditprepare: function () {
        $("#node-input-channel").spinner({ min: 1, max: 99 });
        $("#node-input-measurementID").spinner({ min: 4097, max: 9999 });
      },
      oneditsave: function () {
      },
    });
  })();
</script>