countdown.html

<script type="text/x-red" data-template-name="countdown">
  <div class="form-row">
      <label for="node-input-topic"><i class="fa fa-tasks"></i> <span data-i18n="node-red:common.label.topic"></span></label>
      <input type="text" id="node-input-topic">
  </div>

  <div class="form-row">
    <label for="node-input-payloadTimerStart"><i class="fa fa-tag"></i> Timer On payload</label>
    <input style="width:70%" type="text" id="node-input-payloadTimerStart">
    <input type="hidden" id="node-input-payloadTimerStartType">
  </div>

  <div class="form-row">
    <label for="node-input-payloadTimerStop"><i class="fa fa-tag"></i> Timer Off payload</label>
    <input style="width:70%" type="text" id="node-input-payloadTimerStop">
    <input type="hidden" id="node-input-payloadTimerStopType">
  </div>

  <div class="form-row">
    <label for="node-input-timer"><i class="fa fa-clock-o"></i> Countdown (secs)</label>
    <input style="width:15%" type="text" id="node-input-timer" placeholder="30">
  </div>

  <div class="form-row">
    <label for="node-input-resetWhileRunning">&nbsp;</label>
    <input style="display:inline-block; width:15px; vertical-align:baseline;" type="checkbox" id="node-input-resetWhileRunning">
    <span>Restart countdown if message is received while running</span>&nbsp;
  </div>

  <div class="form-row">
    <label for="node-input-outputOnReset">&nbsp;</label>
    <input style="display:inline-block; width:15px; vertical-align:baseline;" type="checkbox" id="node-input-outputOnReset">
    <span>Send Outputmessage on Reset</span>&nbsp;
  </div>

  <div class="form-row">
    <label for="node-input-setTimeToNewWhileRunning">&nbsp;</label>
    <input style="display:inline-block; width:15px; vertical-align:top;" type="checkbox" id="node-input-setTimeToNewWhileRunning">
    <span style="display:inline-block; width:70%">Set time to new duration if control message is received while running</span>&nbsp;
  </div>

  <div class="form-row">
    <label for="node-input-startCountdownOnControlMessage">&nbsp;</label>
    <input style="display:inline-block; width:15px; vertical-align:top;" type="checkbox" id="node-input-startCountdownOnControlMessage">
    <span style="display:inline-block; width:70%">Start countdown if control message is received while not running</span>&nbsp;
  </div>

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

</script>

<script type="text/x-red" data-help-name="countdown">
<p>A simple countdown node. It starts countdown on any input. The countdown timer can be stopped immediately or can be reloaded with a new counter value during it runs.</p>


  <h3>Input</h3>

  <h4>Starting the timer</h4>
  <dl class="message-properties">
      <dt>payload
          <span class="property-type"></span>
      </dt>
      <dd>any <code>msg.payload</code> that does not stop the timer or reload the timer starts the timer.</dd>
  </dl>


  <h4>Stopping the timer</h4>
    <dl class="message-properties">
        <dt>payload
            <span class="property-type">boolean | number</span>
        </dt>
        <dd>if <code>false</code> or <code>0</code>: Immediately stops the timer.</dd>
    </dl>

  <h4>Reloading the timer</h4>
    <dl class="message-properties">
        <dt>payload
            <span class="property-type">number</span>
        </dt>
        <dd>reloads the timer with the desired <code>msg.payload</code> value.</dd>
        <dt>topic <span class="property-type">string</span></dt>
        <dd>set to <code>control</code>.</dd>
    </dl>

  <h3>Outputs</h3>
    <ol class="node-ports">
        <li>Primary output
            <dl class="message-properties">
                <dt>payload <span class="property-type"></span></dt>
                <dd>configurable output <code>msg</code> at the countdown start/stop.</dd>
            </dl>
        </li>
        <li>Second output
            <dl class="message-properties">
                <dt>payload <span class="property-type">number</span></dt>
                <dd>give the remaining time.</dd>
            </dl>
        </li>
    </ol>




  <h3>Details</h3>
    <p>
    <code>node-red-contrib-countdown</code> starts a countdown timer on a received input
    <code>msg</code> and decreases the counter value until the countdown timer elapses.
    The countdown can be stopped at any time.
    Also the countdown timer can be set to any new countdown value at any time to reload the timer with a specific value.
    </p>
    <p>
    At the <b>first output</b> the node can emit a <code>msg</code> with an arbitrary <code>msg.payload</code> contents at the start of the timer as well as at the stop of the countdown timer.
    <br>
    At the <b>second output</b> the node emits the remaining counter value every second.
    </p>
    <p>
    The node's output <code>msg</code> can optionally contain an arbitrary topic string.
    </p>
</script>

<script type="text/javascript">
  RED.nodes.registerType('countdown', {
    category: "function",
    color:"#ffaaaa",
    inputLabels: "Any input starts the timer",
    outputLabels: ["Countdown start/stop messages", "Remaining time in seconds"],
    defaults: {
      name: { value: "" },
      topic: { value: "" },
      payloadTimerStart: { value: true, validate: RED.validators.typedInput('payloadTimerStartType')},
      payloadTimerStartType: { value: 'bool' },
      payloadTimerStop: { value: false, validate: RED.validators.typedInput('payloadTimerStopType')},
      payloadTimerStopType: { value: 'bool' },
      timer: { value: 30, validate:RED.validators.number()  },
      resetWhileRunning: { value: false },
      outputOnReset: { value: true },
      setTimeToNewWhileRunning: { value: true },
      startCountdownOnControlMessage: { value: false }
    },
    inputs: 1,
    outputs: 2,
    icon: "stopwatch.png",
    label: function() {
        return this.name || "countdown";
    },
    labelStyle: function() {
        return this.name ? "node_label_italic" : "";
    },
    oneditprepare: function() {
      var optionNothing = { value: "nul", label: "Nothing", hasValue: false};

      $('#node-input-payloadTimerStart').typedInput({
        default: 'bool',
        typeField: $("#node-input-payloadTimerStartType"),
        types: ['str','num','bool','json','bin','re','date','env', optionNothing]
      });

      $('#node-input-payloadTimerStop').typedInput({
        default: 'bool',
        typeField: $("#node-input-payloadTimerStopType"),
        types: ['msg','str','num','bool','json','bin','re','date','env', optionNothing]
      });
    }
  });
</script>