BetterFrame/nodered/src/bf-event-in.html

<script type="text/javascript">
  RED.nodes.registerType("bf-event-in", {
    category: "BetterFrame",
    color: "#a6d4ff",
    defaults: {
      name: { value: "" },
      topic_pattern: { value: "" },
    },
    inputs: 1,
    outputs: 1,
    icon: "betterframe.svg",
    label: function () {
      return this.name || this.topic_pattern || "bf-event-in";
    },
    paletteLabel: "bf event in",
  });
</script>

<script type="text/html" data-template-name="bf-event-in">
  <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="(optional)" />
  </div>
  <div class="form-row">
    <label for="node-input-topic_pattern"><i class="fa fa-filter"></i> Topic</label>
    <input type="text" id="node-input-topic_pattern" placeholder="gpio.button.*" />
  </div>
  <div class="form-tips">
    Filter incoming BF events by topic. <code>*</code> is a wildcard.
    Wire an upstream <b>http in</b> on <code>/in/kiosk/&lt;topic&gt;</code> (or any source
    that puts the event body in <code>msg.payload</code>) to feed this node.
    On match the message becomes:
    <code>{topic, kiosk_id, camera_id, source_type, payload}</code>.
  </div>
</script>