scrollphat.html

nteractions with this node
Set multiple pixels (2D array or 1D 5-bit array?)
Write a string (string, x-offset)
Scroll the buffer (option for writing string and setting all pixels?)
Scroll to a position
Rotate the display
-->

<!--
* node-red-contrib-scrollphat controls the Pimoroni Scroll Phat
* Copyright (C) 2017 Brian Burton <api@yayoi.co.uk>
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program.  If not, see <http://www.gnu.org/licenses/>.
-->

<!--
Node to set individual pixels on or off
-->

<!-- Node definition -->
<script type="text/javascript">
  RED.nodes.registerType('spSetPixel',{
    // node definition
    category: "Brian",
    inputs: 1,
    outputs: 0,
    color: "#C0DEED",
    paletteLabel: "Scroll pHAT Set Pixel",
    label: function() {
      return this.name||"Scroll pHAT Set Pixel";
    },
    icon: "light.png",
    align: "right"
  });
</script>

<!-- Edit dialog definition -->
<script type="text/x-red" data-template-name="spSetPixel">
  <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>
</script>

<!-- Help text definition -->
<script type="text/x-red" data-help-name="spSetPixel">
  <p>This node is used to set individual Pimoroni Scroll pHAT pixels on or off.</p>
  <h3>Inputs</h3>
  <dl class="message-properties">
    <dt>payload.x<span class="property-type">number</span></dt>
    <dd>The column to be altered</dd>
    <dt>payload.y<span class="property-type">number</span></dt>
    <dd>The row to be altered.</dd>
    <dt>payload.value<span class="property-type">boolean</span></dt>
    <dd><code>true</code> to turn LED on, <code>false</code> to turn off.</dd>
    <dt class="optional">payload.additive<span class="property-type">boolean</span></dt>
    <dd>Define whether the change should add to the existing pattern or reset all the other LEDs. Defaults to <code>true</code></dd>
  </dl>
</script>

<!--
Node to turn the whole SCroll pHAT on or off
-->

<!-- Node definition -->
<script type="text/javascript">
  RED.nodes.registerType('spClear',{
    // node definition
    category: "Brian",
    inputs: 1,
    outputs: 0,
    color: "#C0DEED",
    paletteLabel: "Clear Scroll pHAT",
    label: function() {
      return this.name||"Clear Scroll pHAT";
    },
    icon: "light.png",
    align: "right"
  });
</script>

<!-- Edit dialog definition -->
<script type="text/x-red" data-template-name="spClear">
  <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>
</script>

<!-- Help text definition -->
<script type="text/x-red" data-help-name="spClear">
  <p>This node is used to set the whole Pimoroni Scroll pHAT on or off.</p>
  <h3>Inputs</h3>
  <dl class="message-properties">
    <dt>payload<span class="property-type">boolean || string || number</span></dt>
    <dd>Set to <code>true</code>, <code>"on"</code> (case insensitive) or <code>1</code> to turn all pixels on. Set to <code>false</code>, <code>"off"</code> (case insensitive) or <code>0</code> to turn all pixels off.</dd>
  </dl>
</script>

<!--
Node to adjust Scroll pHAT brightness
-->

<!-- Node definition -->
<script type="text/javascript">
  RED.nodes.registerType('spBrightness',{
    // node definition
    category: "Brian",
    inputs: 1,
    outputs: 0,
    color: "#C0DEED",
    paletteLabel: "Change Scroll pHAT Brightness",
    label: function() {
      return this.name||"Change Scroll pHAT Brightness";
    },
    icon: "light.png",
    align: "right"
  });
</script>

<!-- Edit dialog definition -->
<script type="text/x-red" data-template-name="spBrightness">
  <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>
</script>

<!-- Help text definition -->
<script type="text/x-red" data-help-name="spBrightness">
  <p>This node is used to set the brightness of the Pimoroni Scroll pHAT.</p>
  <h3>Inputs</h3>
  <dl class="message-properties">
    <dt>payload<span class="property-type">number</span></dt>
    <dd>Set to a number between 0 and 100 representing the desired brightness in percent.</dd>
  </dl>
</script>

<!--
Node to draw column graph on Scroll pHAT
-->

<!-- Node definition -->
<script type="text/javascript">
  RED.nodes.registerType("spColumn",{
    // node definition
    category: "Brian",
    inputs: 1,
    outputs: 0,
    color: "#C0DEED",
    paletteLabel: "Scroll pHAT Column",
    label: function() {
      return this.name||"Scroll pHAT Column";
    },
    icon: "light.png",
    align: "right"
  });
</script>

<!-- Edit dialog definition -->
<script type="text/x-red" data-template-name="spColumn">
  <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>
</script>

<!-- Help text definition -->
<script type="text/x-red" data-help-name="spColumn">
  <p>This node is used to set a Pimoroni Scroll pHAT column (5 pixels) to a percentage value, creating the possibility of graphs.</p>
  <h3>Inputs</h3>
  <dl class="message-properties">
    <dt>payload.x<span class="property-type">number</span></dt>
    <dd>Set to a number between 0 and 10 representing the column to be set.</dd>
    <dt>payload.percent<span class="property-type optional">number</span></dt>
    <dd>Set to a number between 0 and 100 representing the desired value of column percent. Defaults to 100% if not set.</dd>
  </dl>
</script>

<!--
Node to draw row graph on Scroll pHAT
-->

<!-- Node definition -->
<script type="text/javascript">
  RED.nodes.registerType("spRow",{
    // node definition
    category: "Brian",
    inputs: 1,
    outputs: 0,
    color: "#C0DEED",
    paletteLabel: "Scroll pHAT Row",
    label: function() {
      return this.name||"Scroll pHAT Row";
    },
    icon: "light.png",
    align: "right"
  });
</script>

<!-- Edit dialog definition -->
<script type="text/x-red" data-template-name="spRow">
  <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>
</script>

<!-- Help text definition -->
<script type="text/x-red" data-help-name="spRow">
  <p>This node is used to set a Pimoroni Scroll pHAT row (11 pixels) to a percentage value, creating the possibility of graphs.</p>
  <h3>Inputs</h3>
  <dl class="message-properties">
    <dt>payload.y<span class="property-type">number</span></dt>
    <dd>Set to a number between 0 and 10 representing the row to be set.</dd>
    <dt>payload.percent<span class="property-type optional">number</span></dt>
    <dd>Set to a number between 0 and 100 representing the desired value of row percent. Defaults to 100% if not set.</dd>
  </dl>
</script>