plate-recognizer.html

<!--
  Copyright 2020, Bart Butenaers
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at
  http://www.apache.org/licenses/LICENSE-2.0
  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->
<script type="text/javascript">
    RED.nodes.registerType('plate-recognizer',{
        category: 'image',
        color: '#E9967A',
        defaults: {
            name: {value:""},
            inputField: {value: "payload", required: true, validate: RED.validators.typedInput("inputFieldType")},
            inputFieldType: {value: "msg"},
            outputField: {value: "payload", required: true, validate: RED.validators.typedInput("outputFieldType")},
            outputFieldType: {value: "msg"},
            url: {value:"https://api.platerecognizer.com/v1/plate-reader/", required: true},
            ignoreDuring: {value: true},
            makeAndModel: {value: false},
            statusText: {value: "count"},
            cameraId: {value:'', required: false },
            separateMsg: {value: false },
            regionFilter: {value: false},
            regionList: {value: "[]", validate: function(v) {
                // The region list only needs to be specified when the region filter is checked
                var regionFilter = $('#node-input-regionFilter').prop('checked');
                if (regionFilter === true) {
                    var json = JSON.parse(v);
                    return json && Array.isArray(json) && json.length > 0;
                }
                return true; // Valid otherwise
            }},
            regionListType: {value: "json"}
        },
        credentials: {
            apiToken: {type: "password"}
        },        
        inputs:1,
        outputs:2,
        outputLabels: ["recognitions", "errors"],
        icon: "font-awesome/fa-automobile",
        label: function() {
            return this.name || "Plate recognizer";
        },
        oneditprepare: function() {
            $('#node-input-inputField').typedInput({
                typeField: $("#node-input-inputFieldType"),
                types: ['msg']
            });

            
            $('#node-input-outputField').typedInput({
                typeField: $("#node-input-outputField"),
                types: ['msg']
            });
            
            $('#node-input-regionList').typedInput({
                typeField: $("#node-input-regionListType"),
                types: ['json']
            });
            
            $("#node-input-regionFilter").on("change", function (e) {
                if (this.checked) {
                    $(".regionList-row").show();
                }
                else {
                    $(".regionList-row").hide();
                }                
            });

            $("#node-input-restoreUrl").on("click", function (e) {
                $("#node-input-url").val("https://api.platerecognizer.com/v1/plate-reader/");
                // Trigger the validators, otherwise the field can stay red
                $("#node-input-url").change();
            });        
        }                 
    });
</script>

<script type="text/x-red" data-template-name="plate-recognizer">
    <div class="form-row">
        <label style="padding-top: 8px" for="node-input-inputField"><i class="fa fa-sign-in"></i> Input field</label>
        <input type="text" id="node-input-inputField" style="width:70%">
        <input type="hidden" id="node-input-inputFieldType">
    </div>
    <div class="form-row">
        <label style="padding-top: 8px" for="node-input-outputField"><i class="fa fa-sign-out"></i> Output field</label>
        <input type="text" id="node-input-outputField" style="width:70%">
        <input type="hidden" id="node-input-outputField">
    </div>
    <div class="form-row">
        <label for="node-input-apiToken"><i class="fa fa-key"></i> API token</label>
        <input type="password" id="node-input-apiToken" placeholder="Enter your token">
    </div>
    <div class="form-row">
        <label for="node-input-url"><i class="fa fa-globe"></i> URL</label>
        <input type="text" id="node-input-url" style="width: 60%;">
        <button id="node-input-restoreUrl" class="editor-button" title="Restore default URL""><i class="fa fa-undo"></i></button>
    </div>
    <div class="form-row">
        <label for="node-input-cameraId"><i class="fa fa-video-camera"></i> Camera ID</label>
        <input type="text" id="node-input-cameraId" placeholder="Enter your camera id">
        <input type="hidden" id="node-input-node-input-cameraId">
    </div>
    <div class="form-row">
        <label for="node-input-statusText"><i class="fa fa-font "></i> Status text</label>
        <select id="node-input-statusText">
            <option value="none">None</option> 
            <option value="count">Plate count</option>
            <option value="plates">Plates</option>
            <option value="scores">Plates and scores</option>
        </select>
    </div>
    <div class="form-row">
        <input type="checkbox" id="node-input-ignoreDuring" style="display: inline-block; width: auto; vertical-align: top;">
        <label for="node-input-ignoreDuring" style="width:70%;">Ignore images arriving during recognition</label>
    </div>
    <div class="form-row">
        <input type="checkbox" id="node-input-makeAndModel" style="display: inline-block; width: auto; vertical-align: top;">
        <label for="node-input-makeAndModel" style="width:70%;">Predict vehicle make and model (MMC)</label>
    </div>
    <div class="form-row">
        <input type="checkbox" id="node-input-separateMsg" style="display: inline-block; width: auto; vertical-align: top;">
        <label for="node-input-separateMsg" style="width:70%;">Send separate message for each plate</label>
    </div>
    <div class="form-row">
        <input type="checkbox" id="node-input-regionFilter" style="display: inline-block; width: auto; vertical-align: top;">
        <label for="node-input-regionFilter" style="width:70%;">Specify one or more regions</label>
    </div>
    <div class="form-row regionList-row">
        <label style="padding-top: 8px" for="node-input-regionList"><i class="fa fa-list-ol"></i> Regions</label>
        <input type="text" id="node-input-regionList" style="width:70%">
        <input type="hidden" id="node-input-regionListType">
    </div>
    <br>
    <div class="form-row">
        <label for="node-input-name"><i class="icon-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
</script>

<script type="text/x-red" data-help-name="plate-recognizer">
    <p>A node for recognizing license plates in images.</p>
    <p><strong>Input field:</strong><br/>
    The field of the input message which will need to contain the input image.  By default <code>msg.payload</code> will be used.  The image should be a binary Buffer or a base64 encoded string.</p>
    <p><strong>Output field:</strong><br/>
    The field of the output message where the recognition result will be stored (in JSON format).  By default <code>msg.payload</code> will be used.</p>
    <p><strong>API token:</strong><br/>
    Create an account at <a target="_blank" href="https://platerecognizer.com/">platerecognizer.com</a> and enter your private API token here.</p>
    <p><strong>URL:</strong><br/>
    Specify the URL of the recognition service, to allow different kind of setups:
    <ul>
        <li>Use the official cloud service, which will be the default (and most used) option.</li>
        <li>Use a local installation (based on the SDK).</li>
        <li>Use a local Docker container.</li>
    </ul></p>
    <p><strong>Camera ID:</strong><br/>
    Optionally specify the camera id, to send it to the recognition service.
    </p>
    <p><strong>Status text:</strong><br/>
    Specify how the recognition result needs to be displayed in the node status label:
    <ul>
        <li><i>None:</i> Show no recognition results.</li>
        <li><i>Plate count:</i> Show the number of plates that have been recognised in the image.</li>
        <li><i>Plates:</i> Show a (comma separted) list of the plates that have been recognized in the image.</i></li>
        <li><i>Plates and scores:</i> Same as the previous option, but now the 'score' percentage is also added.</i></li>
    </ul></p>
    <p><strong>Ignore images arriving during recognition:</strong><br/>
    When selected images will automatically be skipped, when the previous image is still being recognized.  When deselected multiple images can be recognized simultaneously.</p>
    <p><strong>Predict vehicle make and model (MMC):</strong><br/>
    When selected not only the plate will be recognized, but there will also be a prediction of the vehicle brand and type.  CAUTION: this is only supported for some paid account types!</p>   
    <p><strong>Send separate message for each plate:</strong><br/>
    When selected a separate output message will be send for each recognized license plate.  If not selected a single output message will be send containing an array of ALL recognized license plates.</p>   
    <p><strong>Only allow specific regions:</strong><br/>
    When selected, an array of region codes can be specified (see <a target="_blank" href="http://docs.platerecognizer.com/#regions-supported">supported regions</a>).  For example:<code>["fr","gb"]</code></p>   
</script>