Niagara Weather Widget


  • Retrieves Current Weather
  • Shows Current, 3-day, or 5-day Forecasts
  • Updates in Real-Time
  • Add your own language days values
  • Includes Free Weather Service
  • Works in Workbench and Modern Browser
Add to Cart
tridium weather service

Overview


The weather widget retrieves live weather data from the Open Weather Map Weather Service. The icon and temperature updates in real-time when the weather report updates. The Open Weather Map Weather Service is FREE and access is provided by a free API key which must be entered on the property sheet. Add our open weather service to the station services configuration.

Note: The Wunderground weather service is no longer free, so we have changed weather providers. If you have a Wunderground API key it will stop working soon. Our Weather Service module is Free when bought with this widget.

Usage


1. Copy the weatherWidget-ux.jar file to your modules directory.
2. Open the module from your palette file.
3. Drag and drop the widget from the palette onto your px view.

Tridium charting library


Properties


bms totals chart properties

The widget has a number of configurable properties that can be used to modify look, feel, and functionality.

Forecast: set this current, 3day, or 5day.

Days: set this to the days of the week. Different languages can be used.

Short Days: set this to the short abbreviations days of the week. Different languages can be used.

NOTE: weather icons only show up in Workbench when you toggle the browser preview button

Verify the Niagara Open Weather Service (FREE when purchased with Weather Widget) is configured in the station services.














Wunderground Weather Service



Using in your HTML Page


You can now use the widget in your custom html page as long as the html file is in a appropriate station directory. E.g.:
C:/../station/shared/demo1.html

1. Create an html page and place in your station files directory.
2. Create a div element and give it an id so you can inject the widget into this area. E.g.: widget1.
3. Add the following scripts before the closing head tag or the closing body tag. E.g.:

    
        <script type="text/javascript">

            var require = {
                paths: {
                    "nmodule": "/module",
                    "baja": "/module/bajaScript/rc/plugin/baja",
                    "bajaScript": "/module/bajaScript/rc",
                    "bajaux": "/module/bajaux/rc",
                    "lex": "/module/js/rc/lex/lexplugin",
                    "css": "/module/js/com/tridium/js/ext/require/css",

                    "jquery": "/module/js/rc/jquery/jquery-2.1.1", // use jquery-3.2.0.min for versions higher than N4.4
                    "Promise": "/module/js/rc/bluebird/bluebird",

                    // these are runtime dependencies
                    "hbs": "/module/js/rc/require-handlebars-plugin/hbs",
                    "i18nprecompile": "/module/js/rc/require-handlebars-plugin/hbs/i18nprecompile",
                    "json2": "/module/js/rc/require-handlebars-plugin/hbs/json2",
                    "underscore": "/module/js/rc/underscore/underscore",
                },

                hbs: {
                    disableI18n: true
                }
            }
        </script>
        <script type="text/javascript" src="/module/js/com/tridium/js/ext/require/require.min.js"></script>
        <script>
            require(['/module/weatherWidget/rc/weatherWidget.run.js'], function (app) {

                app.initialiseWeatherWidget({
                    backgroundColor: 'transparent',
                    borderColor: '#cccccc',
                    currentFontSize: '19px',
                    currentLocationFontSize: '13px',
                    dayFontColor: '#747d8a',
                    days: 'Monday,Tuesday,Wednesday,Thursday,Friday,Saturday,Sunday', // comma separated list of day starting from Monday (no spaces)
                    divId: '#widget1',
                    forecast: 'current', // set to current, 3day, or 5day
                    forecastDayFontSize: '19px',
                    forecastTempFontSize: '15px',
                    forecastIconSize: '2em',
                    forecastWidth: '80px',
                    locationFontColor: '#747d8a',
                    shortDays: 'Mon,Tue,Wed,Thu,Fri,Sat,Sun', // comma separated list of day starting from Monday
                    valueFontColor: '#1e88e5',
                    valueFontSize: '3rem',
                    weatherServiceName: 'OpenWeatherService', // default is 'OpenWeatherService'. Change when adding multiple weather services.
                });
            });
        </script>
        </head>
        <!--html to go here-->
        <div id="widget1" style="width:300px;height:300px;"></div>
        <!--Rest of your html below...-->
                                    

You May Also Like





Weather Service

niagara weather service

N4 View Builder™©

tridium bms system

Spectrum Gauge

spectrum gauge showing values

back to more widgets...