prisme-flow/nodes/bridge/openweathermap/weather.html

prisme platform flow engine

<!--
 Created by prisme.io on 09/06/2017.

 @author <a href="mailto:hello@prisme.io">savane vamara</a> (prisme.io)

-->
<script type="text/x-red" data-template-name="openweathermap">
    <div class="form-row">
        <label for="node-input-apikey"><i class="fa fa-key"></i> <span>API Key</span></label>
        <input type="password" id="node-input-apikey">
    </div>
    <div class="form-row">
        <label for="node-input-language"><i class="fa fa-globe"></i> <span>Language</span></label>
        <select id="node-input-language" style="width:170px">
            <option value="en">English</option>
            <option value="ru">Russian</option>
            <option value="it">Italian</option>
            <option value="es">Spanish</option>
            <option value="uk">Ukrainian</option>
            <option value="de">German</option>
            <option value="pt">Portuguese</option>
            <option value="ro">Romanian</option>
            <option value="pl">Polish</option>
            <option value="fi">Finnish</option>
            <option value="nl">Dutch</option>
            <option value="fr">French</option>
            <option value="bg">Bulgarian</option>
            <option value="sv">Swedish</option>
            <option value="zh_tw">Chinese Traditional</option>
            <option value="zh">Chinese Simplified</option>
            <option value="tr">Turkish</option>
            <option value="hr">Croatian</option>
            <option value="ca">Catalan</option>
        </select>
    </div>
    <div class="form-row">
        <label><span> </span></label>
        <select id="node-input-wtype" style="width:300px">
            <option value="current">Current weather for</option>
            <option value="forecast">5 day forecast for</option>
        </select>
    </div>
    <div class="form-row">
        <label for="weather-location-type-select"><i class="fa fa-globe"></i> <span>Location</span></label>
        <select id="weather-location-type-select" style="width:300px">
            <option value="city" ">City</option>
            <option value="coordinates">Coordinates</option>
        </select>
    </div>
    <div class="form-row weather-location-type" id="weather-location-type-city">
        <label for=""><i class="weather-location-type"></i> <span>City</span></label>
        <input type="text" class="weather-location-input" style="width: 180px; margin-bottom:7px" id="node-input-city"></input>
        </br>
        <label for=""><i class="weather-location-type"></i> <span>Country</span></label>
        <input type="text" class="weather-location-input" style="width: 180px; margin-bottom:7px" id="node-input-country"></input>
    </div>
     <div class="form-row weather-location-type hidden" id="weather-location-type-coordinates">
        <label for=""><i class="weather-location-type"></i> <span>Latitude</span></label>
        <input type="text" class="weather-location-input" id="node-input-lat" style="width: 180px; margin-bottom:7px">
        </br>
        <label for=""><i class="weather-location-type"></i> <span>Longitude</span></label>
        <input type="text" class="weather-location-input" id="node-input-lon" style="width: 180px; margin-bottom:7px">
    </div>
    <div class="form-row">
        <label for="node-input-name"><i class="icon-tag"></i> <span>Name</span></label>
        <input type="text" id="node-input-name">
    </div>
</script>

<script type="text/javascript">
    RED.nodes.registerType('openweathermap',{
        category: 'utility-weather',
        color: '#FFCC66',
        defaults: {
            name: {value:""},
            wtype: {value:"current"},
            lon: {value:"", validate:function(v) {return ((v>=-180) && (v<=180));} },
            lat: {value:"", validate:function(v) {return ((v>=-90) && (v<=90));} },
            city: {value:""},
            country: {value:""},
            language: {value:"en"},
        },
        credentials: {
            apikey: {type:"password", required:true}
        },
        inputs:1,
        outputs:1,
        icon: "openweathermap.png",
        label: function() {
            return this.name || "openweathermap";
        },
        oneditprepare: function() {
            $("#weather-location-type-select").change(function() {
                var id = $("#weather-location-type-select option:selected").val();
                $(".weather-location-type").hide();
                $("#weather-location-type-"+id).show();
            });
            if (this.lon !== ""||this.lat !== "") {
                $("#weather-location-type-select").val("coordinates");
            } else {
                $("#weather-location-type-select").val("city");
            }
            var id = $("#weather-location-type-select option:selected").val();
            $(".weather-location-type").hide();
            $("#weather-location-type-"+id).show();
        },
        oneditsave: function() {
            var type = $("#weather-location-type-select option:selected").val();
            if (type == "coordinates") {
                $("#node-input-city").val("");
                $("#node-input-country").val("");
            } else if (type == "city") {
                $("#node-input-lon").val("");
                $("#node-input-lat").val("");
            }
        },
        labelStyle: function() {
            return this.name?"node_label_italic":"";
        }
    });
</script>

<script type="text/x-red" data-help-name="openweathermap">
    <p>A node which polls openweathermap.org for current weather data when an input is received.</p>
    <p>An API Key required to use this node can be obtained from <a href="http://openweathermap.org/appid" target="_new">OpenWeatherMap</a>.</p>
    <p> This is done using either:</p>
    <ul>
        <li> a city and the country in which that city lies</li>
        <li> a latitude and longitude set of coordinates </li>
    </ul>
    <p>These can be passed in as settings on the node, or as the:</p>
    <ul>
       <li> <code>msg.location.lat</code> and <code>msg.location.lon</code>, or </li>
       <li> <code>msg.location.city</code> and <code>msg.location.country</code> </li>
    </ul>
    <p>of the message input. </p>
    <p>The node will always prioritise its settings over the msg properties.</p>
    <p>The report's language can be set by choosing from the drop down menu. The node supports all languages currently provided by OpenWeatherMap.</p>
    <p>The current weather report sets the following properties of <code>msg.payload</code>:</p>
    <ul>
        <li><code>description</code> - a brief verbal description of the current weather for human reading.</li>
        <li><code>weather</code> - a short description of the current weather.</li>
        <li><code>detail</code> - a more detailed version of <code>weather</code>.</li>
        <li><code>tempk</code> - the current ground temperature at that location in Kelvin.</li>
        <li><code>tempc</code> - the current ground temperature at that location in Celsius.</li>
        <li><code>humidity</code> - the current humidity at the location in percent.</li>
        <li><code>maxtemp</code> - the current maximum temperature at the location in Kelvin.</li>
        <li><code>mintemp</code> - the current minimum temperature at the location in Kelvin.</li>
        <li><code>windspeed</code> - the current wind speed at the location in metres per second.</li>
        <li><code>winddirection</code> - the current wind direction at the location in meteorological degrees.</li>
        <li><code>location</code> - the name of the location from which the data was sourced.</li>
        <li><code>sunrise</code> - the time at which the sun rose in Unix UTC format.</li>
        <li><code>sunset</code> - the time at which the sun will set in Unix UTC format.</li>
        <li><code>clouds</code> - the current cloud coverage of the location in percent.</li>
    </ul>
    <p>The 5 day forecast creates a 5 part array in <code>msg.payload</code> of objects with the following properties:</p>
    <ul>
        <li><code>dt</code> - epoch timestamp
        <li><code>pressure</code> - in hPa
        <li><code>humidity</code> - in %
        <li><code>speed</code> - wind speed in metres per second
        <li><code>deg</code> - wind direction in degrees
        <li><code>clouds</code> - cloudiness in %
        <li><code>temp</code> - an object with various temperatures in degC,
        <ul><li>day, min, max, night, eve, morn</li></ul>
        <li><code>weather</code> - an object with some miscellaneous data,
        <ul><li>description, icon, main, id</li></ul>
    </ul>
    <p>The node also sets the following properties of <code>msg.location</code>.</p>
    <ul>
        <li><code>lat</code> - the latitude of the location from which the data was sourced.</li>
        <li><code>lon</code> - the longitude of the location from which the data was sourced.</li>
        <li><code>city</code> - the city from which the data was sourced.</li>
        <li><code>country</code> - the country from which the data was sourced.</li>
    </ul>
    <p>Finally, the node sets:</p>
    <ul>
        <li><code>msg.time</code> - the time at which the weather data was received by openweathermap.org.</li>
        <li><code>msg.data</code> - the full JSON returned by the API. </li>
    </ul>
    <p>Weather data provided by <a href="http://openweathermap.org/" target="_blank">openweathermap.org/</a></p>
</script>


<script type="text/x-red" data-template-name="openweathermap in">
    <div class="form-row">
        <label for="node-input-apikey"><i class="fa fa-key"></i> <span>API Key</span></label>
        <input type="password" id="node-input-apikey">
    </div>
    <div class="form-row">
        <label for="node-input-language"><i class="fa fa-globe"></i> <span>Language</span></label>
        <select id="node-input-language" style="width:170px">
          <option value="en">English</option>
            <option value="ru">Russian</option>
            <option value="it">Italian</option>
            <option value="es">Spanish</option>
            <option value="uk">Ukrainian</option>
            <option value="de">German</option>
            <option value="pt">Portuguese</option>
            <option value="ro">Romanian</option>
            <option value="pl">Polish</option>
            <option value="fi">Finnish</option>
            <option value="nl">Dutch</option>
            <option value="fr">French</option>
            <option value="bg">Bulgarian</option>
            <option value="sv">Swedish</option>
            <option value="zh_tw">Chinese Traditional</option>
            <option value="zh">Chinese Simplified</option>
            <option value="tr">Turkish</option>
            <option value="hr">Croatian</option>
            <option value="ca">Catalan</option>
        </select>
    </div>
    <div class="form-row">
        <label><span> </span></label>
        <select id="node-input-wtype" style="width:300px">
            <option value="current">Current weather for</option>
            <option value="forecast">5 day forecast for</option>
        </select>
    </div>
    <div class="form-row">
        <label for="weather-location-type-select"><i class="fa fa-globe"></i> <span>Location</span></label>
        <select id="weather-location-type-select" style="width:300px">
            <option value="city">City, Country</option>
            <option value="coordinates">Coordinates</option>
        </select>
    </div>
    <div class="form-row weather-location-type" id="weather-location-type-city">
        <label for=""><i class="weather-location-type"></i> <span>City</span></label>
        <input type="text" class="weather-location-input" style="width: 180px; margin-bottom:7px" id="node-input-city"></input>
        </br>
        <label for=""><i class="weather-location-type"></i> <span>Country</span></label>
        <input type="text" class="weather-location-input" style="width: 180px; margin-bottom:7px" id="node-input-country"></input>
    </div>
     <div class="form-row weather-location-type hidden" id="weather-location-type-coordinates">
        <label for=""><i class="weather-location-type"></i>
         <span>Latitude</span></label><input type="text" class="weather-location-input" id="node-input-lat" style="width: 180px; margin-bottom:7px">
        </br>
        <label for=""><i class="weather-location-type"></i>
         <span>Longitude</span></label>
         <input type="text" class="weather-location-input" id="node-input-lon" style="width: 180px; margin-bottom:7px">
    </div>
    <div class="form-row">
        <label for="node-input-name"><i class="icon-tag"></i> <span>Name</label>
        <input type="text" id="node-input-name">
    </div>
</script>

<script type="text/javascript">
    RED.nodes.registerType('openweathermap in',{
        category: 'utility-weather',
        color: '#FFCC66',
        defaults: {
            name: {value:""},
            lon: {value:"", validate:function(v) {return ((v>=-180) && (v<=180));} },
            lat: {value:"", validate:function(v) {return ((v>=-90) && (v<=90));} },
            city: {value:""},
            country: {value:""},
            language: {value:"en"},
        },
        credentials: {
            apikey: {type:"password", required:true}
        },
        inputs:0,
        outputs:1,
        icon: "openweathermap.png",
        label: function() {
            return this.name || "openweathermap";
        },
        oneditprepare: function() {
            $("#weather-location-type-select").change(function() {
                var id = $("#weather-location-type-select option:selected").val();
                $(".weather-location-type").hide();
                $("#weather-location-type-"+id).show();
            });
            if (this.lon !== ""||this.lat !== "") {
                $("#weather-location-type-select").val("coordinates");
            } else {
                $("#weather-location-type-select").val("city");
            }
            var id = $("#weather-location-type-select option:selected").val();
            $(".weather-location-type").hide();
            $("#weather-location-type-"+id).show();
        },
        oneditsave: function() {
            var type = $("#weather-location-type-select option:selected").val();
            if (type == "coordinates") {
                $("#node-input-city").val("");
                $("#node-input-country").val("");
            } else if (type == "city") {
                $("#node-input-lon").val("");
                $("#node-input-lat").val("");
            }
        },
        labelStyle: function() {
            return this.name?"node_label_italic":"";
        }
    });
</script>

<script type="text/x-red" data-help-name="openweathermap in">
    <p>A node which polls openweathermap.org for current weather data periodically and returns when a change is detected.</p>
    <p>An API Key required to use this node can be obtained from <a href="http://openweathermap.org/appid" target="_new">OpenWeatherMap</a>.</p>
    <p> This is done using either:</p>
    <ul>
        <li> a city and the country in which that city lies</li>
        <li> a latitude and longitude set of coordinates </li>
    </ul>
    <p>The report's language can be set by choosing from the drop down menu. The node supports all languages currently provided by OpenWeatherMap.</p>
    <p>The current report sets the following properties of <code>msg.payload</code>:</p>
    <ul>
        <li><code>description</code> - a brief verbal description of the current weather for human reading.</li>
        <li><code>weather</code> - a short description of the current weather.</li>
        <li><code>detail</code> - a more detailed version of <code>weather</code>.</li>
        <li><code>tempk</code> - the current ground temperature at that location in Kelvin.</li>
        <li><code>tempc</code> - the current ground temperature at that location in Celsius.</li>
        <li><code>humidity</code> - the current humidity at the location in percent.</li>
        <li><code>maxtemp</code> - the current maximum temperature at the location in Kelvin.</li>
        <li><code>mintemp</code> - the current minimum temperature at the location in Kelvin.</li>
        <li><code>windspeed</code> - the current wind speed at the location in metres per second.</li>
        <li><code>winddirection</code> - the current wind direction at the location in meteorological degrees.</li>
        <li><code>location</code> - the name of the location from which the data was sourced.</li>
        <li><code>sunrise</code> - the time at which the sun rose in Unix UTC format.</li>
        <li><code>sunset</code> - the time at which the sun will set in Unix UTC format.</li>
        <li><code>clouds</code> - the current cloud coverage of the location in percent.</li>
    </ul>
    <p>The 5 day forecast creates a 5 part array in <code>msg.payload</code> of objects with the following properties:</p>
    <ul>
        <li><code>dt</code> - epoch timestamp
        <li><code>pressure</code> - in hPa
        <li><code>hunidity</code> - in %
        <li><code>speed</code> - wind speed in metres per second
        <li><code>deg</code> - wind direction in degrees
        <li><code>clouds</code> - cloudiness in %
        <li><code>temp</code> - an object with various temperatures in degC,
        <ul><li>day, min, max, night, eve, morn</li></ul>
        <li><code>weather</code> - an object with some miscellaneous data,
        <ul><li>description, icon, main, id</li></ul>
    </ul>
    <p>The node also sets the following properties of <code>msg.location</code>.</p>
    <ul>
        <li><code>lat</code> - the latitude of the location from which the data was sourced.</li>
        <li><code>lon</code> - the longitude of the location from which the data was sourced.</li>
        <li><code>city</code> - the city from which the data was sourced.</li>
        <li><code>country</code> - the country from which the data was sourced.</li>
    </ul>
    <p>Finally, the node sets:</p>
    <ul>
        <li><code>msg.time</code> - the time at which the weather data was received by openweathermap.org.</li>
        <li><code>msg.data</code> - the full JSON returned by the API. </li>
    </ul>
    <p>Weather data provided by <a href="http://openweathermap.org/" target="_blank">openweathermap.org/</a></p>
</script>

<style>
    .weather-location-type {
        padding-left: 110px;
    }
    .weather-location-input{
        margin-bottom: 10px;
    }
</style>