onvif_ptz.html

<!--
  Copyright 2018, 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('onvif-ptz',{
        category: 'OnVif',
        color: '#ff758d',
        defaults: {
            name: {value:""},
            deviceConfig: {value:"", type: "onvif-config"},
            profileName: {value:""},
            action: {value:""},
            panSpeed: {value:0.0},
            tiltSpeed: {value:0.0},
            zoomSpeed: {value:0.0},
            panPosition: {value:0.0},
            tiltPosition: {value:0.0},
            zoomPosition: {value:0.0},
            panTranslation: {value:0.0},
            tiltTranslation: {value:0.0},
            zoomTranslation: {value:0.0},
            time: {value:1.0},
            preset: {value:""},
            presetName: {value:""},
            stopPanTilt: {value:true},
            stopZoom: {value:true},
            configurationToken: {value:""}
        },          
        inputs:1,
        outputs:1,
        icon: "ptz.png",
        label: function() {
            return this.name||"OnVif PTZ";
        },
        oneditprepare: function() { 
            // When the 'action' combobox value changes, only the corresponding field(s) parameter fields should be displayed
            $("#node-input-action").change(function() {
                var action = $("#node-input-action").val();
                
                // Hide all rows concerning the action parameters, and show some of these again below
                $(".actionParam-row").hide();
                            
                // Depending on the selected action, some specific element(s) should be showed
                switch (action) {
                    case "continuousMove":
                        $("#profileName-div").show();
                        $("#panSpeed-div").show();
                        $("#tiltSpeed-div").show();
                        $("#zoomSpeed-div").show();
                        $("#time-div").show();
                        break;
                    case "absoluteMove":
                        $("#profileName-div").show();
                        $("#panSpeed-div").show();
                        $("#tiltSpeed-div").show();
                        $("#zoomSpeed-div").show();
                        $("#panPosition-div").show();
                        $("#tiltPosition-div").show();
                        $("#zoomPosition-div").show();                       
                        $("#time-div").show();
                        break;    
                    case "relativeMove":
                        $("#profileName-div").show();
                        $("#panTranslation-div").show();
                        $("#tiltTranslation-div").show();
                        $("#zoomTranslation-div").show();
                        break;  
                    case "gotoPreset":
                        $("#profileName-div").show();
                        $("#preset-div").show();                        
                        $("#panSpeed-div").show();
                        $("#tiltSpeed-div").show();
                        $("#zoomSpeed-div").show();
                        break; 
                    case "setPreset":
                        $("#profileName-div").show();
                        $("#preset-div").show();   
                        $("#presetName-div").show();                        
                        break;                         
                    case "removePreset":
                        $("#profileName-div").show();
                        $("#preset-div").show();                        
                        break; 
                    case "stop":
                        $("#profileName-div").show();
                        $("#stopPanTilt-div").show(); 
                        $("#stopZoom-div").show();                        
                        break; 
                    case "getConfigurationOptions":
                        $("#configurationToken-div").show();    
                        break;
                    case "gotoHomePosition":
                        $("#profileName-div").show();
                        break;
                    case "setHomePosition":
                        $("#profileName-div").show();
                        break;
                    case "getPresets":
                        $("#profileName-div").show();
                        break;
                    case "getStatus":
                        $("#profileName-div").show();
                        break;
                }                     
            });
            
            try {
                $("#node-input-profileName").autocomplete( "destroy" );
            } 
            catch(err) {
            }
            $("#node-input-profileName-search").click(function() {
                $("#node-input-profileName-search").addClass('disabled');
                
                var configNodeId = $("#node-input-deviceConfig").val();
                
                if (!configNodeId) {
                    // No config node has been specified, so no use to connect to the server ...
                    return;
                }
                                
                configNode = RED.nodes.node(configNodeId);
             
                // All client-side config data should be send to the server (since we don't know if it is dirty or not).
                var configData = {};
                configData.hostname = configNode.xaddress;
                if (configNode.credentials) {
                    configData.user = configNode.credentials.user;
                    configData.password = configNode.credentials.password;
                }
                
                $.getJSON("onvifdevice/profiles/" + configNodeId, configData, function(profiles) {
                    $("#node-input-profileName-search").removeClass('disabled');
                    $("#node-input-profileName").autocomplete({
                        source:profiles,
                        minLength:0,
                        select: function(event, ui) {
                            // Make sure the label is displayed in the text field (instead of the value)
                            event.preventDefault();
                            $("#node-input-profileName").val(ui.item.label);
                        },
                        focus: function(event, ui) {
                            // Make sure the label is displayed when hovering (instead of the value)
                            event.preventDefault();
                            $("#node-input-profileName").val(ui.item.label);
                        },
                        close: function( event, ui ) {
                            $("#node-input-profileName").autocomplete( "close" );
                        }
                    }).autocomplete("search","");
                });
            });
        },
        oneditsave: function() {
            // Reset all values when no action has been specified 
            // (because then no fields will be visible to specify data)
            if ($("#node-input-action").val() === "") {
                $("#node-input-profileName").val("");
                $("#node-input-panSpeed").val(0.0);
                $("#node-input-tiltSpeed").val(0.0);
                $("#node-input-zoomSpeed").val(0.0);
                $("#node-input-panPosition").val(0.0);
                $("#node-input-tiltPosition").val(0.0);
                $("#node-input-zoomPosition").val(0.0);
                $("#node-input-panTranslation").val(0.0);
                $("#node-input-tiltTranslation").val(0.0);
                $("#node-input-zoomTranslation").val(0.0);
                $("#node-input-time").val(1.0);
                $("#node-input-preset").val("");
                $("#node-input-presetName").val("");
                $("#node-input-stopPanTilt").val(true);
                $("#node-input-stopZoom").val(true);
                $("#node-input-configurationToken").val("");
            }
        }
    });
</script>

<script type="text/x-red" data-template-name="onvif-ptz">
    <div class="form-row">
        <label for="node-input-deviceConfig"><i class="fa fa-cog"></i> Device</label>
        <!-- Node-Red will replace this input element by a drop-down (with available OnVif device configurations) -->
        <input type="text" id="node-input-deviceConfig">
    </div>
    <br>
    <div class="form-row">
        <label for="node-input-action"><i class="fa fa-wrench"></i> Action</label>
        <select id="node-input-action">
            <option value=""></option>
            <option value="continuousMove">Continuous move</option>
            <option value="absoluteMove">Absolute move</option>
            <option value="relativeMove">Relative move</option>
            <option value="gotoHomePosition">Goto home position</option>
            <option value="setHomePosition">Set home position</option>
            <option value="getPresets">Get Presets</option>
            <option value="getNodes">Get Nodes</option>
            <option value="getNode">Get Node</option>
            <option value="getConfigurations">Get Configurations</option>
            <option value="getConfiguration">Get Configuration</option>
            <option value="getConfigurationOptions">Get Configuration Options</option>
            <option value="getStatus">Get status</option>
            <option value="getPresets">Get preset positions</option>
            <option value="setPreset">Set preset position</option>
            <option value="gotoPreset">Goto preset position</option>
            <option value="removePreset">Remove preset position</option>
            <option value="stop">Stop current motion</option>
            <option value="reconnect">Reconnect to device</option>
        </select>
    </div>
    <br>
    <div class="form-row actionParam-row" id="profileName-div">
        <label for="node-input-profileName"><i class="fa fa-random"></i> Profile</label>
        <input type="text" id="node-input-profileName" style="width:66%;">
        <a id="node-input-profileName-search" class="btn"><i id="node-config-lookup-serial-icon" class="fa fa-search"></i></a>
    </div>
    <div class="form-row actionParam-row" id="panSpeed-div">
        <label for="node-input-panSpeed"><i class="fas fa-arrows-alt-h"></i> Pan speed</label>
        <input type="number" id="node-input-panSpeed" step=".1" min="-1.0" max="1.0">
    </div>
    <div class="form-row actionParam-row" id="tiltSpeed-div">
        <label for="node-input-tiltSpeed"><i class="fas fa-arrows-alt-v"></i> Tilt speed</label>
        <input type="number" id="node-input-tiltSpeed" step=".1" min="-1.0" max="1.0">
    </div>
    <div class="form-row actionParam-row" id="zoomSpeed-div">
        <label for="node-input-zoomSpeed"><i class="fa fa-search-plus"></i> Zoom speed</label>
        <input type="number" id="node-input-zoomSpeed">
    </div>
    <div class="form-row actionParam-row" id="panPosition-div">
        <label for="node-input-panPosition"><i class="fas fa-arrows-alt-h"></i> Pan position</label>
        <input type="number" id="node-input-panPosition" step=".1" min="-1.0" max="1.0">
    </div>
    <div class="form-row actionParam-row" id="tiltPosition-div">
        <label for="node-input-tiltPosition"><i class="fas fa-arrows-alt-v"></i> Tilt position</label>
        <input type="number" id="node-input-tiltPosition" step=".1" min="-1.0" max="1.0">
    </div>
    <div class="form-row actionParam-row" id="zoomPosition-div">
        <label for="node-input-zoomPosition"><i class="fa fa-search-plus"></i> Zoom position</label>
        <input type="number" id="node-input-zoomPosition">
    </div>
    <div class="form-row actionParam-row" id="panTranslation-div">
        <label for="node-input-panTranslation"><i class="fas fa-arrows-alt-h"></i> Pan translation</label>
        <input type="number" id="node-input-panTranslation" step=".1" min="-1.0" max="1.0">
    </div>
    <div class="form-row actionParam-row" id="tiltTranslation-div">
        <label for="node-input-tiltTranslation"><i class="fas fa-arrows-alt-v"></i> Tilt translation</label>
        <input type="number" id="node-input-tiltTranslation" step=".1" min="-1.0" max="1.0">
    </div>
    <div class="form-row actionParam-row" id="zoomTranslation-div">
        <label for="node-input-zoomTranslation"><i class="fa fa-search-plus"></i> Zoom translation</label>
        <input type="number" id="node-input-zoomTranslation">
    </div>
    <div class="form-row actionParam-row" id="time-div">
        <label for="node-input-time"><i class="fa fa-clock"></i> Time</label>
        <input type="number" id="node-input-time">
    </div>
    <div class="form-row actionParam-row" id="configurationToken-div">
        <label for="node-input-configurationToken"><i class="fa fa-stack-overflow"></i> Config token</label>
        <input type="text" id="node-input-configurationToken">
    </div>
    <div class="form-row actionParam-row" id="preset-div">
        <label for="node-input-preset"><i class="fa fa-stack-overflow"></i> Preset</label>
        <input type="text" id="node-input-preset">
    </div>
    <div class="form-row actionParam-row" id="presetName-div">
        <label for="node-input-presetName"><i class="fa fa-stack-overflow"></i> Preset name</label>
        <input type="text" id="node-input-presetName">
    </div>
    <div class='form-row actionParam-row' id="stopPanTilt-div" >
        <label>&nbsp;</label>
        <input type='checkbox' id='node-input-stopPanTilt' style='display: inline-block; width: auto; vertical-align: top;'>
        <label for='node-input-stopPanTilt' style='width: 70%;'>Stop pan and tilt motions</label>
    </div>
    <div class='form-row actionParam-row' id="stopZoom-div" >
        <label>&nbsp;</label>
        <input type='checkbox' id='node-input-stopZoom' style='display: inline-block; width: auto; vertical-align: top;'>
        <label for='node-input-stopZoom' style='width: 70%;'>Stop zooming</label>
    </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="onvif-ptz">
    <p>A node to get a snapshot image from an OnVif compatible IP camera.</p>
    <p><strong>Device:</strong><br/>
    The target OnVif-compliant IP device.</p>
    <p><strong>Profile:</strong><br/>
    The token of the required profile on the target IP device.  The movement range (minimum and maximum position) are specified in each profile.</p>
    <p><strong>Pan speed:</strong><br/>
    The speed of horizontal movement of the camera. When positive, the camera will turn to the right. When negative, the camera will turn to the left. If zero, the camera won't move horizontally.</p>
    <p><strong>Tilt speed:</strong><br/>
    The speed of vertical movement of the camera. When positive, the camera will turn upwards. When negative, the camera will turn downwards. If zero, the camera won't move vertically.</p>
    <p><strong>Zoom speed:</strong><br/>
    The speed of the zoom of the camera. When positive, the camera will zoom in. When negative, the camera will zoom out. If zero, the camera won't zoom.</p>
    <p><strong>Time:</strong><br/>
    The time interval (in seconds) that the PTZ action will take.</p>
    <p><strong>Move continuously:</strong><br/>
    When selected, the camera will move continuously (conform the specified speeds).</p>
</script>