# Template widget - tutorial & examples - make your own widget!

**URL:** <https://community.openhab.org/t/template-widget-tutorial-examples-make-your-own-widget/14211>\
**Category:** HABPanel\
**Tags:** habpanel, template, widget\
**Created:** [September 17, 2016, 8:02pm UTC](https://community.openhab.org/t/template-widget-tutorial-examples-make-your-own-widget/14211 "2016-09-17T20:02:21Z")\
**Posts on this page:** 1\
**Showing post:** 248

<div class="post-metadata">

**Author:** ![paulfaure](https://community.openhab.org/user_avatar/community.openhab.org/paulfaure/32/21213_2.png) [@paulfaure](https://community.openhab.org/u/paulfaure)\
**Post date:** [April 4, 2018, 3:39am UTC](https://community.openhab.org/t/template-widget-tutorial-examples-make-your-own-widget/14211/248 "2018-04-04T03:39:04Z")

</div>

For those who want to try my Widget, it downloads the hourly weather data from WUnderground as JSON string, stores it in an Item. Then a rule parses the JSON and calculates the MAX/MIN values for the temperature. The Habpanel widget displays a table with the data including a graph for the temperature.  
Requires the HTTP Binding and the JSONPath Transformation.

**Widget:**  
[http://faure.ca/~paul/WeatherHourly.widget.json](http://faure.ca/~paul/WeatherHourly.widget.json)

**Items:**

```auto
String WeatherHourly_json "JSON [%s]" {http="<[weatherHourly:3000000:JSONPATH($.hourly_forecast)]"}
Number WeatherHourly_max "MAX [%.2f]"
Number WeatherHourly_min "MIN [%.2f]"
Number WeatherHourly_avg "AVG [%.2f]"

```

**Rules:**

```auto
rule "WUndergound hourly change"
when
        Time cron "0 */15 * * * ?" or
        Item WeatherHourly_json changed
then
        var String WeatherHourly_temp = "NULL"
        var String WeatherHourly_ftemp = "NULL"
        logInfo("HourlyWeather", "Data changed, recalculate min/max")
        if(WeatherHourly_json.state.toString == "NULL"){
          logInfo("HourlyWeather", "Data1 is NULL")
          //WeatherHourly_temp.sendCommand("NULL")
          //WeatherHourly_ftemp.sendCommand("NULL")
        }else{
          WeatherHourly_temp = transform("JSONPATH", "$.[0:13].temp.metric", WeatherHourly_json.state.toString)
          WeatherHourly_ftemp = transform("JSONPATH", "$.[0:13].feelslike.metric", WeatherHourly_json.state.toString)
          if(WeatherHourly_temp == "NULL" || WeatherHourly_ftemp == "NULL"){
            logInfo("HourlyWeather", "Data2 is NULL")
            WeatherHourly_max.sendCommand(0)
            WeatherHourly_min.sendCommand(0)
            WeatherHourly_avg.sendCommand(0)
          }else{
            var temp='{temp:[' + WeatherHourly_temp.replace('"', '').replace('[','').replace(']','') + ',' + WeatherHourly_ftemp.replace('"', '').replace('[','').replace(']','') + ']}'
            logInfo("HourlyWeather", "Data: " + temp)
            var max=transform("JSONPATH", "temp.max()", temp)
            var min=transform("JSONPATH", "temp.min()", temp)
            var avg=transform("JSONPATH", "temp.avg()", temp)
            WeatherHourly_max.sendCommand(max)
            WeatherHourly_min.sendCommand(min)
            WeatherHourly_avg.sendCommand(avg)
            logInfo("HourlyWeather", "MIN="+min+":MAX="+max)
          }
        }
end

```

**HTTP Binding:**

```auto
weatherHourly.url=http://api.wunderground.com/api/[APIKEY]/hourly/q/45.4347982,-75.5739861.json
weatherHourly.updateInterval=3000000

```

---

_[View the full topic](https://community.openhab.org/t/template-widget-tutorial-examples-make-your-own-widget/14211)._