<script type="text/html" data-template-name="sunrise"> <div class="form-row"> <label for="node-input-lat"><i class="fa fa-globe"></i> Latitude</label> <input type="text" id="node-input-lat" placeholder="51.025"> </div> <div class="form-row"> <label for="node-input-lon"><i class="fa fa-globe"></i> Longitude</label> <input type="text" id="node-input-lon" placeholder="-1.4"> </div> <div class="form-row"> <label for="node-input-start"><i class="fa fa-clock-o"></i> Start</label> <select id="node-input-start" style='width:70%'> <option value="nightEnd">Morning astronomical twilight starts</option> <option value="nauticalDawn">Morning nautical twilight starts</option> <option value="dawn">Dawn, morning civil twilight starts</option> <option value="sunrise">Sunrise</option> <option value="sunriseEnd">Sunrise end</option> <option value="goldenHourEnd">End of morning golden hour</option> </select> </div> <div class="form-row"> <label for="node-input-end"><i class="fa fa-clock-o"></i> End</label> <select id="node-input-end" style='width:70%'> <option value="goldenHour">Start of evening golden hour</option> <option value="sunsetStart">Sunset start</option> <option value="sunset">Sunset, civil twilight starts</option> <option value="dusk">Dusk, Evening astronomical twilight starts</option> <option value="nauticalDusk">Evening nautical twilight starts</option> <option value="night">Dark enough for astronomy</option> </select> </div> <div class="form-row"> <label><i class="fa fa-arrows-h"></i> Offset</label> <span style="margin-right:4px">start</span> <input type="text" id="node-input-soff" placeholder="minutes" style='width:60px;'> mins <span style="margin-left:14px; margin-right:4px">end</span> <input type="text" id="node-input-eoff" placeholder="minutes" style='width:60px;'> mins </div> <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> <script type="text/javascript"> RED.nodes.registerType('sunrise',{ category: 'time', color:"#ffcc66", defaults: { name: {value:""}, lat: {value:"", required:true, validate:RED.validators.number()}, lon: {value:"", required:true, validate:RED.validators.number()}, start: {value:"sunrise", required:true}, end: {value:"sunset", required:true}, soff: {value:0, validate:RED.validators.number()}, eoff: {value:0, validate:RED.validators.number()}, }, inputs:0, outputs:2, outputLabels: ["once per minute","only on change"], icon: "sun.png", label: function() { return this.name||"Sun rise/set"; }, labelStyle: function() { return this.name?"node_label_italic":""; }, oneditprepare: function() { if (($("#node-input-lat").val() === "") && ($("#node-input-lon").val() === "")) { if ("geolocation" in navigator) { navigator.geolocation.getCurrentPosition(function(position) { $("#node-input-lat").val(Number(position.coords.latitude.toFixed(5))); $("#node-input-lon").val(Number(position.coords.longitude.toFixed(5))); }); } } if ($("#node-input-soff").val() === "") { $("#node-input-soff").val(0) } if ($("#node-input-eoff").val() === "") { $("#node-input-eoff").val(0) } $("#node-input-soff").spinner({}); $("#node-input-eoff").spinner({}); } }); </script>