node-red-contrib-convert-kitchen/convert-kitchen.html

A Node-RED node to convert units of measurement for cooking.

<script type="text/javascript">
    RED.nodes.registerType('convert-kitchen',{
        category: 'function',
        color: '#26C6DA',
        defaults: {
            name: {value:"",required:false},
            value: {value:0, required:false},
            unit: {value:"",required:false},
            finalUnit: {value:"",required:false},
            sys: {value:"",required:false},
            output: {value:"payload"}
        },
        inputs:1,
        outputs:1,
        align: "right",
        icon: "swap.png",
        label: function() {
            return this.name||"convert-kitchen";
        },
        oneditprepare: function() {
            $("#node-input-sys").typedInput({
                types: [{
                    value: "sys",
                    options: [
                        { value: "us", label: "US"},
                        { value: "imperial", label: "Imperial"}                
                    ]
                }]
            });        
            $("#node-input-value").typedInput({
                default: "num",
                types: ["num"]
            });
            $("#node-input-unit").typedInput({
                types: [{
                    value: "unit",
                    options: [
                        { value: "gallon", label: "Gallon"},
                        { value: "liter", label: "Liter"},
                        { value: "quart", label: "Quart"},
                        { value: "pint", label: "Pint"},
                        { value: "cup", label: "Cup"},
                        { value: "ounce", label: "Ounce"},
                        { value: "tablespoon", label: "Tablespoon"},
                        { value: "teaspoon", label: "Teaspoon"},
                        { value: "milliliter", label: "Milliliter"}                
                    ]
                }]
            });
            $("#node-input-finalUnit").typedInput({
                types: [{
                    value: "finalUnit",
                    options: [
                        { value: "gallon", label: "Gallon"},
                        { value: "liter", label: "Liter"},
                        { value: "quart", label: "Quart"},
                        { value: "pint", label: "Pint"},
                        { value: "cup", label: "Cup"},
                        { value: "ounce", label: "Ounce"},
                        { value: "tablespoon", label: "Tablespoon"},
                        { value: "teaspoon", label: "Teaspoon"},
                        { value: "milliliter", label: "Milliliter"}                
                    ]
                }]
            });
        },
        oneditsave: function() {
            $("#node-input-sys").val(this.editor.getValue());
            $("#node-input-value").val(this.editor.getValue());
            $("#node-input-unit").val(this.editor.getValue());
            $("#node-input-finalUnit").val(this.editor.getValue());
            this.editor.destroy();
            delete this.editor;
        },
        oneditcancel: function() {
            this.editor.destroy();
            delete this.editor;
        }
    });
</script>

<script type="text/html" data-template-name="convert-kitchen">
    <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>
    <div class="form-row">
        <label for="node-input-sys"><i class="fa fa-tag"></i> msg.sys</label>
        <input type="text" id="node-input-sys" placeholder="US or Imperial">
    </div>
        <div class="form-row">
        <label for="node-input-value"><i class="fa fa-tag"></i> msg.value</label>
        <input type="text" id="node-input-value" placeholder="e.g. 5/3 = 1.66">
    </div>
    <div class="form-row">
        <label for="node-input-unit"><i class="fa fa-tag"></i> msg.unit</label>
        <input type="text" id="node-input-unit" placeholder="Input unit">
    </div>
    <div class="form-row">
        <label for="node-input-finalUnit"><i class="fa fa-tag"></i> msg.finalUnit</label>
        <input type="text" id="node-input-finalUnit" placeholder="Output unit">
    </div>
    <div class="form-usage">
      Usage:
      <p>
        <ul>
          <li>This node expects the following four inputs: <b>"msg.sys"</b>, <b>"msg.value"</b>, <b>"msg.unit"</b>, and <b>"msg.finalUnit"</b></li>
          <li><b>"msg.sys"</b> must be the string 'US' or 'Imperial'.</li>
          <li><b>"msg.value"</b> must be a number.</li>
          <li><b>"msg.unit"</b> and <b>"msg.finalUnit"</b> must be strings, the following units are supported:</li>
          <li><b>gallon</b>, <b>liter</b>, <b>quart</b>, <b>pint</b>, <b>cup</b>, <b>ounce</b>, <b>tablespoon</b>, <b>teaspoon</b>, <b>milliliter</b></li>
        </ul>
      </p>
    </div>
</script>

<script type="text/x-red" data-help-name="convert-kitchen">
    <p>A Node-RED node to convert between units of measurement for cooking.</p>
    <h3>Details</h3>
    <p>This node expects the following four inputs: <b>"msg.sys"</b>, <b>"msg.value"</b>, <b>"msg.unit"</b>, and <b>"msg.finalUnit"</b>.</p>
    <p><b>"msg.sys"</b> must be the string 'US' or 'Imperial'.</p>
    <p><b>"msg.value"</b> must be a number.</p>
    <p>Both <b>"msg.unit"</b> and <b>"msg.finalUnit"</b> must be strings, the following units are supported:</p>
    <p><b>gallon</b>, <b>liter</b>, <b>quart</b>, <b>pint</b>, <b>cup</b>, <b>ounce</b>, <b>tablespoon</b>, <b>teaspoon</b>, and <b>milliliter</b>.</p>
</script>