geofence-nomap.html

<!--
  Copyright 2014 IBM Corp.

  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/html" data-template-name="geofence">
    <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="Geofence Name">
    </div>

    <div class="form-row">
        <label for="node-input-floor"> _ Floor</label>
        <input type="text" id="node-input-floor" style="width:25%;" placeholder="ground">
        <span style="padding-left:30px; padding-right:8px"> &#8254; Ceiling</span>
        <input type="text" id="node-input-ceiling" style="width:25%;" placeholder="infinity">
    </div>

    <div class="form-row">
      <label for="node-input-inside"><i class="fa fa-sign-in"></i> Action</label>
      <select id="node-input-inside" value="true" style="width: 340px;">
        <option value="true">only points inside</option>
        <option value="false">only points outside</option>
        <option value="both">inarea property</option>
      </select>
    </div>

    <div class="form-row">
      <label for="node-input-mode"><i class="fa fa-check-circle-o"></i> Zone type</label>
      <select id="node-input-mode" value="circle" style="width: 340px;">
        <option value="circle">circle</option>
        <option value="rectangle">rectangle</option>
      </select>
    </div>

    <div id="node-geofence-circle">
      <div class="form-row">
        <label for="node-input-centreLat"><i class="fa fa-dot-circle-o"></i> Centre</label>
        <input type="text" style="width: 30%" id="node-input-centreLat" placeholder="latitude">
        <span>,</span>
        <input type="text" style="width: 30%" id="node-input-centreLng" placeholder="longitude">
      </div>

      <div class="form-row">
        <label for="node-input-rad"><i class="fa fa-arrows"></i> Radius</label>
        <input type="text" style="width: 60%" id="node-input-rad" placeholder="distance"> <span>(m)</span>
      </div>
    </div>

    <div id="node-geofence-rectangle">
      <div class="form-row">
        <label for="node-input-centreLat"><i class="fa fa-map-marker"></i> North West</label>
        <input type="text" style="width: 30%" id="node-input-NWLat" placeholder="latitude">
        <span>,</span>
        <input type="text" style="width: 30%" id="node-input-NWLng" placeholder="longitude">
      </div>

      <div class="form-row">
        <label for="node-input-centreLat"><i class="fa fa-map-marker"></i> South East</label>
        <input type="text" style="width: 30%" id="node-input-SELat" placeholder="latitude">
        <span>,</span>
        <input type="text" style="width: 30%" id="node-input-SELng" placeholder="longitude">
      </div>
    <div>

</script>


<script type="text/html" data-help-name="geofence">
   <p>A simple geofence filter node</p>
   <p>It supports circle and polygons, and will filter all messages that either
      fall inside or outside the region described depending on the selected
      mode.</p>
   <p>This node requires input messages one of the following (checked in order):
    <ul>
      <li><i>msg.payload.lat</i> &amp; <i>msg.payload.lon</li>
      <li><i>msg.location.lat</i> &amp; <i>msg.location.lon</i></li>
      <li><i>msg.lat</i> &amp; <i>msg.lon</i></li>
   </p>
   <p>Alternatively it will add <b>msg.location.inarea</b> to the msg. with values of true/false</p>
   <p>In this mode if the node has a name then <b>msg.location.isat</b> will be an array
   containing a list of named regions that the point is inside of and <b>msg.location.distance</b>
   will contain an object of name, distance pairs. Where distance is the distance in metres to
   from the point to the centroid of the region.</p>
</script>

<script type="text/javascript">
    RED.nodes.registerType('geofence',{
        category: 'location',
        color:"#DEBD5C",
        defaults: {
            name: {value:""},
            mode: {value: "circle"},
            inside: {value: "true"},
            rad: {value: ""},
            points: {value: []},
            centre: {value: {}},
            floor: {value: ""},
            ceiling: {value : ""},
            worldmap: {value: false},
            outputs: {value: 1}
        },
        inputs:1,
        outputs:1,
        icon: "white-globe.png",
        label: function() {
            return this.name||"geofence";
        },
        labelStyle: function() {
            return this.name?"node_label_italic":"";
        },
        oneditprepare: function() {
          $("#node-input-mode").on ('change',function() {
            $(this).each(function(){
              if (this.value === "circle") {
                $("#node-geofence-rectangle").hide();
                $("#node-geofence-circle").show();
              } else {
                $("#node-geofence-rectangle").show();
                $("#node-geofence-circle").hide();
              }
            });
          });

          if (this.mode === "circle") {
            $("#node-input-centreLat").val(this.centre.latitude);
            $("#node-input-centreLng").val(this.centre.longitude);
          } else {
            if (this.points.length == 4) {
              $("#node-input-NWLat").val(this.points[0].latitude);
              $("#node-input-NWLng").val(this.points[0].longitude);
              $("#node-input-SELat").val(this.points[2].latitude);
              $("#node-input-SELng").val(this.points[2].longitude);
            }
          }
        },
        oneditsave: function() {
          if (this.mode === "circle") {
            this.centre.latitude = $("#node-input-centreLat").val();
            this.centre.longitude = $("#node-input-centreLng").val();
          } else {
            this.points = [];
            this.points.push({latitude: $("#node-input-NWLat").val(), longitude: $("#node-input-NWLng").val()});
            this.points.push({latitude: $("#node-input-NWLat").val(), longitude: $("#node-input-SELng").val()});
            this.points.push({latitude: $("#node-input-SELat").val(), longitude: $("#node-input-SELng").val()});
            this.points.push({latitude: $("#node-input-SELat").val(), longitude: $("#node-input-NWLng").val()});
          }

          if ($('#node-input-worldmap').is(":checked")) {
            this.outputs = 2;
          } else {
            this.outputs = 1;
          }
        }
    });
</script>