diff --git a/dist/dashboard.appcache b/dist/dashboard.appcache
index 602d863a..e248c8bb 100644
--- a/dist/dashboard.appcache
+++ b/dist/dashboard.appcache
@@ -15,4 +15,4 @@ fonts/fontawesome-webfont.woff2
 NETWORK:
 *
 
-# hash: cd294fba12f92ad3b5f1e278a313d37f1f917a6b5f2a72e53e0310ce1ecf2ce1
\ No newline at end of file
+# hash: a0d6bf5918179c8e19a669afac730d6bde09327c3b527b7ca3dcb6c0531474b3
\ No newline at end of file
diff --git a/dist/js/app.min.js b/dist/js/app.min.js
index 6640dece..c9ca77cb 100644
--- a/dist/js/app.min.js
+++ b/dist/js/app.min.js
@@ -492,4 +492,4 @@ function MasonryController(n,t){function r(){for(var t=o.children(),r=o.width(),
 angular.module("ui").directive("uiIcon",function(){var i=/^https?:\/\//i,n=/^fa-/i;return{restrict:"E",templateUrl:"components/ui-icon/ui-icon.html",scope:{icon:"@"},link:function(t,c,e,o){t.$watch("icon",function(c){i.test(c)?(t.iconType="image",t.url=c):n.test(c)?t.iconType="fa":t.iconType="angular-material"})}}});
 angular.module("ui").filter("chartGetRange",function(){return function(n,t){t=[parseFloat(t[0]),parseFloat(t[1])];var a=Math.abs(t[0])>=0?t[0]:d3.min(n,function(n){return d3.min(n.values,function(n){return n[1]})}),r=Math.abs(t[1])>=0?t[1]:d3.max(n,function(n){return d3.max(n.values,function(n){return n[1]})});return[Math.floor(a),Math.ceil(r)]}});
 angular.module("ui").filter("trusted",["$sce",function(t){return function(u){return t.trustAsHtml(u)}}]);
-angular.module("ui").run(["$templateCache",function(e){e.put("partials/main.html",'<md-sidenav layout="column" class="md-sidenav-left" md-component-id="left"> <md-list> <md-list-item ng-repeat="tab in main.tabs" ng-click="main.select($index)"> <ui-icon icon="{{tab.icon}}" style="margin: 5px"></ui-icon> <p>{{tab.header}}</p> </md-list-item> <md-list-item ng-click="main.open(link, $index)" ng-repeat="link in main.links"> <ui-icon icon="{{link.icon}}" style="margin: 5px"></ui-icon> <p>{{link.name}}</p> </md-list-item> </md-list> </md-sidenav> <md-toolbar id="toolbar"> <div class="md-toolbar-tools"> <md-button ng-click="main.toggleSidenav()" class="md-icon-button" aria-label="menu button"> <ng-md-icon icon="menu"></ng-md-icon> </md-button> <h1 ng-show="main.loaded">{{main.selectedTab.header || main.selectedTab.name}}</h1> </div> </md-toolbar> <md-content flex> <div ui-masonry ng-show="main.selectedTab.header"> <ui-card-panel ng-repeat="group in main.selectedTab.items"> <ui-component ng-repeat="control in group.items" item="control"></ui-component> </ui-card-panel> </div> <div class="node-red-ui--inline-link" ng-show="!main.selectedTab.header"> <iframe class="iframe" src="{{ main.selectedTab.link }}" allowfullscreen></iframe> <div>The url {{ }} cannot be loaded into an iframe.</div> </div> </md-content> '),e.put("partials/toast.html",'<md-toast layout="column"> <div> <h3 ng-if="toast.title">{{::toast.title}}</h3> <h4 flex>{{::toast.message}}</h4> </div> </md-toast> '),e.put("components/ui-card-panel/ui-card-panel.html",'<div layout="column" class="nr-dashboard-cardpanel"> <p ng-if="group.header && group.header.config.disp && group.header[group.header.length-1]!=\'!\'">{{group.header.name}}</p> <div class="nr-dashboard-cardcontainer" ng-transclude ng-style="{width:ctrl.width, height:ctrl.height}"> </div> </div> '),e.put("components/ui-gauge/ui-gauge.html",'<div id="gauge_{{$id}}" style="width:{{me.item.width*55}}px; height:{{me.item.height*50}}px; margin-top:{{(me.item.gtype == \'donut\')*25}}px"> <!-- <p class="title">{{ me.item.title }}</p> --> <!-- <svg ng-if="me.item.gtype == \'wave\'" id="gauge{{$id}}" width="100%" height="100%"></svg> --> <svg id="gauge{{$id}}" width="100%" height="100%"></svg> </div> '),e.put("components/ui-icon/ui-icon.html",'<ng-md-icon ng-if="iconType===\'angular-material\'" icon="{{icon}}"></ng-md-icon> <div ng-if="iconType===\'fa\'" style="font-size: 1.7em; display:inline-block; margin:auto"><i class="fa" ng-class="icon"></i></div> <img ng-if="iconType===\'image\'" ng-src="{{url}}" style="width:24px; display:block; margin:auto"> '),e.put("components/ui-component/templates/button.html",'<md-card ui-card-size="{{ me.item.width }}x{{ me.item.height }}" class="nr-dashboard-button" ng-class="{\'nr-dashboard-disabled\':me.item.disabled}"> <md-button class="md-raised" ng-click="me.buttonClick()" aria-label="{{\'button\' + me.item.label}}" ng-style="{color: me.item.color }"> <ui-icon ng-show="me.item.icon.length" icon="{{ me.item.icon }}" ng-style="{color: me.item.color }"></ui-icon> <span>{{me.item.label}}</span> </md-button> </md-card> '),e.put("components/ui-component/templates/chart.html",'<md-card ui-card-size="{{ me.item.width }}x{{ me.item.height }}" class="nr-dashboard-chart" ng-class="{\'nr-dashboard-disabled\':me.item.disabled}"> <p class="label">{{ me.item.label }}</p> <nvd3-line-chart ng-if="me.item.look===\'line\'" class="nr-dashboard-linechart" data="me.item.value" width="{{ me.item.width * 50 - (me.item.width - 1)*7}}" height="{{ me.item.height * 50 - (me.item.height - 1)*7 - 20}}" margin="{left:35,top:8,bottom:32,right:30}" showxaxis="true" showyaxis="true" showlegend="{{ me.item.legend }}" objectequality="true" xaxistickformat="me.formatTime" yaxisdomain="$parent.me.item.value | chartGetRange : [$parent.me.item.ymin, $parent.me.item.ymax]" tooltips="true" interactive="true" interpolate="{{me.item.interpolate}}" nodata="{{me.item.nodata}}" isarea="false" useinteractiveguideline="true"> <svg></svg> </nvd3-line-chart> <nvd3-discrete-bar-chart ng-if="me.item.look===\'bar\'" class="nr-dashboard-linechart" data="me.item.value" width="{{ me.item.width * 50 - (me.item.width - 1)*7}}" height="{{ me.item.height * 50 - (me.item.height - 1)*7 - 20}}" margin="{left:40,top:8,bottom:32,right:10}" showxaxis="true" showyaxis="true" showlegend="{{ me.item.legend }}" yaxisdomain="$parent.me.item.value | chartGetRange : [$parent.me.item.ymin, $parent.me.item.ymax]" tooltips="true" interactive="true" nodata="{{me.item.nodata}}"> <svg></svg> </nvd3-discrete-bar-chart> </md-card> '),e.put("components/ui-component/templates/dropdown.html",'<md-card ui-card-size="{{ me.item.width }}x{{ me.item.height }}" layout="row" layout-align="space-between center" class="nr-dashboard-dropdown" ng-class="{\'nr-dashboard-disabled\':me.item.disabled}"> <md-input-container flex layout="row"> <p class="label" ng-if="me.item.label">{{ me.item.label }}</p> <md-select ng-change="me.itemChanged()" ng-model="me.item.value" placeholder="Select an Option" flex="100"> <md-option ng-value="opt.value" ng-repeat="opt in me.item.options">{{ opt.label }}</md-option> </md-select> </md-input-container> </md-card> '),e.put("components/ui-component/templates/gauge.html",'<md-card ui-card-size="{{ me.item.width }}x{{ me.item.height }}" layout-align="center center" ng-class="{\'nr-dashboard-disabled\':me.item.disabled}"> <ui-gauge style="text-align:center" class="nr-dashboard-gauge"></ui-gauge> </md-card> '),e.put("components/ui-component/templates/numeric.html",'<md-card ui-card-size="{{ me.item.width }}x{{ me.item.height }}" flex layout="row" layout-align="space-between center" class="nr-dashboard-numeric" ng-class="{\'nr-dashboard-disabled\':me.item.disabled}"> <p class="label">{{me.item.label}}</p> <div layout="row" layout-align="center center"> <md-button class="md-icon-button down-button" aria-label="{{me.item.label}}" ng-mousedown="me.periodicChange(-1)" ng-mouseup="me.stopPeriodic()"> <ui-icon icon="expand_more"></ui-icon> </md-button> <p class="value" ng-bind-html="me.item.getText()"></p> <md-button class="md-icon-button up-button" aria-label="{{me.item.label}}" ng-mousedown="me.periodicChange(1)" ng-mouseup="me.stopPeriodic()"> <ui-icon icon="expand_less"></ui-icon> </md-button> </div> </md-card> '),e.put("components/ui-component/templates/slider.html",'<md-card ui-card-size="{{ me.item.width }}x{{ me.item.height }}" flex layout="row" layout-align="space-between center" class="nr-dashboard-slider" ng-class="{\'nr-dashboard-disabled\':me.item.disabled}"> <p class="label">{{me.item.label}}</p> <md-slider flex="100" min="{{me.item.min}}" max="{{me.item.max}}" ng-model="me.item.value" aria-label="{{me.item.label}}" ng-change="me.valueChanged(20)"> </md-card> '),e.put("components/ui-component/templates/switch.html",'<md-card ui-card-size="{{ me.item.width }}x{{ me.item.height }}" layout="row" layout-align="space-between center" class="nr-dashboard-switch" ng-click="me.item.value = !me.item.value; me.valueChanged(0)" ng-class="{\'nr-dashboard-disabled\':me.item.disabled}"> <p ng-if="me.item.label && (me.item.width > 1)" class="label">{{me.item.label}}</p> <md-switch ng-model="me.item.value" ng-change="me.item.value = !me.item.value" aria-label="{{me.item.label}}" ng-class="{\'center\' : !me.item.label}" ng-if="!me.item.oncolor || !me.item.onicon || !me.item.offcolor || !me.item.officon"> </md-switch> <ui-icon icon="{{me.item.value ? me.item.onicon : me.item.officon}}" ng-style="{color: me.item.value ?  me.item.oncolor : me.item.offcolor}" ng-class="{\'center\' : !me.item.label}" ng-if="me.item.oncolor && me.item.onicon && me.item.offcolor && me.item.officon"> </ui-icon> </md-card> '),e.put("components/ui-component/templates/template.html",'<md-card ui-template="me.item.format" ui-card-size="{{ me.item.width }}x{{ me.item.height }}" class="nr-dashboard-template" ng-class="{\'nr-dashboard-disabled\':me.item.disabled}"> </md-card> '),e.put("components/ui-component/templates/text-input-CR.html",'<md-card ui-card-size="{{ me.item.width }}x{{ me.item.height }}" layout="row" layout-align="space-between center" class="nr-dashboard-textinput" ng-class="{\'nr-dashboard-disabled\':me.item.disabled}"> <md-input-container class="md-block" flex md-is-error="false" ng-class="{\'has-label\':me.item.label}"> <label>{{me.item.label}}</label> <input ng-model="me.item.value" ng-keypress="me.keyPressed($event)" aria-label="{{me.item.label}}" type="{{me.item.mode}}"> </md-input-container> </md-card> '),e.put("components/ui-component/templates/text-input.html",'<md-card ui-card-size="{{ me.item.width }}x{{ me.item.height }}" layout="row" layout-align="space-between center" class="nr-dashboard-textinput" ng-class="{\'nr-dashboard-disabled\':me.item.disabled}"> <md-input-container class="md-block" flex md-is-error="false" ng-class="{\'has-label\':me.item.label}"> <label>{{me.item.label}}</label> <input ng-model="me.item.value" ng-change="me.valueChanged({{me.item.delay}})" aria-label="{{me.item.label}}" type="{{me.item.mode}}"> </md-input-container> </md-card> '),e.put("components/ui-component/templates/text.html",'<md-card ui-card-size="{{ me.item.width }}x{{ me.item.height }}" layout="{{ me.item.layout }}" layout-align="{{ me.item.layoutAlign }}" class="nr-dashboard-text" ng-class="{\'nr-dashboard-disabled\':me.item.disabled}"> <p class="label" ng-bind-html="me.item.getLabel()"></p> <p class="value" ng-bind-html="me.item.getText()"></p> </md-card> ')}]);
\ No newline at end of file
+angular.module("ui").run(["$templateCache",function(e){e.put("partials/main.html",'<md-sidenav layout="column" class="md-sidenav-left" md-component-id="left"> <md-list> <md-list-item ng-repeat="tab in main.tabs" ng-click="main.select($index)"> <ui-icon icon="{{tab.icon}}" style="margin: 5px"></ui-icon> <p>{{tab.header}}</p> </md-list-item> <md-list-item ng-click="main.open(link, $index)" ng-repeat="link in main.links"> <ui-icon icon="{{link.icon}}" style="margin: 5px"></ui-icon> <p>{{link.name}}</p> </md-list-item> </md-list> </md-sidenav> <md-toolbar id="toolbar"> <div class="md-toolbar-tools"> <md-button ng-click="main.toggleSidenav()" class="md-icon-button" aria-label="menu button"> <ng-md-icon icon="menu"></ng-md-icon> </md-button> <h1 ng-show="main.loaded">{{main.selectedTab.header || main.selectedTab.name}}</h1> </div> </md-toolbar> <md-content flex> <div ui-masonry ng-show="main.selectedTab.header"> <ui-card-panel ng-repeat="group in main.selectedTab.items"> <ui-component ng-repeat="control in group.items" item="control"></ui-component> </ui-card-panel> </div> <div class="node-red-ui--inline-link" ng-show="!main.selectedTab.header"> <iframe class="iframe" src="{{ main.selectedTab.link }}" allowfullscreen></iframe> <div>The url {{ }} cannot be loaded into an iframe.</div> </div> </md-content> '),e.put("partials/toast.html",'<md-toast layout="column"> <div> <h3 ng-if="toast.title">{{::toast.title}}</h3> <h4 flex>{{::toast.message}}</h4> </div> </md-toast> '),e.put("components/ui-card-panel/ui-card-panel.html",'<div layout="column" class="nr-dashboard-cardpanel"> <p ng-if="group.header && group.header.config.disp && group.header[group.header.length-1]!=\'!\'">{{group.header.name}}</p> <div class="nr-dashboard-cardcontainer" ng-transclude ng-style="{width:ctrl.width, height:ctrl.height}"> </div> </div> '),e.put("components/ui-icon/ui-icon.html",'<ng-md-icon ng-if="iconType===\'angular-material\'" icon="{{icon}}"></ng-md-icon> <div ng-if="iconType===\'fa\'" style="font-size: 1.7em; display:inline-block; margin:auto"><i class="fa" ng-class="icon"></i></div> <img ng-if="iconType===\'image\'" ng-src="{{url}}" style="width:24px; display:block; margin:auto"> '),e.put("components/ui-gauge/ui-gauge.html",'<div id="gauge_{{$id}}" style="width:{{me.item.width*55}}px; height:{{me.item.height*50}}px; margin-top:{{(me.item.gtype == \'donut\')*25}}px"> <!-- <p class="title">{{ me.item.title }}</p> --> <!-- <svg ng-if="me.item.gtype == \'wave\'" id="gauge{{$id}}" width="100%" height="100%"></svg> --> <svg id="gauge{{$id}}" width="100%" height="100%"></svg> </div> '),e.put("components/ui-component/templates/button.html",'<md-card ui-card-size="{{ me.item.width }}x{{ me.item.height }}" class="nr-dashboard-button" ng-class="{\'nr-dashboard-disabled\':me.item.disabled}"> <md-button class="md-raised" ng-click="me.buttonClick()" aria-label="{{\'button\' + me.item.label}}" ng-style="{color: me.item.color }"> <ui-icon ng-show="me.item.icon.length" icon="{{ me.item.icon }}" ng-style="{color: me.item.color }"></ui-icon> <span>{{me.item.label}}</span> </md-button> </md-card> '),e.put("components/ui-component/templates/chart.html",'<md-card ui-card-size="{{ me.item.width }}x{{ me.item.height }}" class="nr-dashboard-chart" ng-class="{\'nr-dashboard-disabled\':me.item.disabled}"> <p class="label">{{ me.item.label }}</p> <nvd3-line-chart ng-if="me.item.look===\'line\'" class="nr-dashboard-linechart" data="me.item.value" width="{{ me.item.width * 50 - (me.item.width - 1)*7}}" height="{{ me.item.height * 50 - (me.item.height - 1)*7 - 20}}" margin="{left:35,top:8,bottom:32,right:30}" showxaxis="true" showyaxis="true" showlegend="{{ me.item.legend }}" objectequality="true" xaxistickformat="me.formatTime" yaxisdomain="$parent.me.item.value | chartGetRange : [$parent.me.item.ymin, $parent.me.item.ymax]" tooltips="true" interactive="true" interpolate="{{me.item.interpolate}}" nodata="{{me.item.nodata}}" isarea="false" useinteractiveguideline="true"> <svg></svg> </nvd3-line-chart> <nvd3-discrete-bar-chart ng-if="me.item.look===\'bar\'" class="nr-dashboard-linechart" data="me.item.value" width="{{ me.item.width * 50 - (me.item.width - 1)*7}}" height="{{ me.item.height * 50 - (me.item.height - 1)*7 - 20}}" margin="{left:40,top:8,bottom:32,right:10}" showxaxis="true" showyaxis="true" showlegend="{{ me.item.legend }}" yaxisdomain="$parent.me.item.value | chartGetRange : [$parent.me.item.ymin, $parent.me.item.ymax]" tooltips="true" interactive="true" nodata="{{me.item.nodata}}"> <svg></svg> </nvd3-discrete-bar-chart> </md-card> '),e.put("components/ui-component/templates/dropdown.html",'<md-card ui-card-size="{{ me.item.width }}x{{ me.item.height }}" layout="row" layout-align="space-between center" class="nr-dashboard-dropdown" ng-class="{\'nr-dashboard-disabled\':me.item.disabled}"> <md-input-container flex layout="row"> <p class="label" ng-if="me.item.label">{{ me.item.label }}</p> <md-select ng-change="me.itemChanged()" ng-model="me.item.value" placeholder="Select an Option" flex="100"> <md-option ng-value="opt.value" ng-repeat="opt in me.item.options">{{ opt.label }}</md-option> </md-select> </md-input-container> </md-card> '),e.put("components/ui-component/templates/gauge.html",'<md-card ui-card-size="{{ me.item.width }}x{{ me.item.height }}" layout-align="center center" ng-class="{\'nr-dashboard-disabled\':me.item.disabled}"> <ui-gauge style="text-align:center" class="nr-dashboard-gauge"></ui-gauge> </md-card> '),e.put("components/ui-component/templates/numeric.html",'<md-card ui-card-size="{{ me.item.width }}x{{ me.item.height }}" flex layout="row" layout-align="space-between center" class="nr-dashboard-numeric" ng-class="{\'nr-dashboard-disabled\':me.item.disabled}"> <p class="label">{{me.item.label}}</p> <div layout="row" layout-align="center center"> <md-button class="md-icon-button down-button" aria-label="{{me.item.label}}" ng-mousedown="me.periodicChange(-1)" ng-mouseup="me.stopPeriodic()"> <ui-icon icon="expand_more"></ui-icon> </md-button> <p class="value" ng-bind-html="me.item.getText()"></p> <md-button class="md-icon-button up-button" aria-label="{{me.item.label}}" ng-mousedown="me.periodicChange(1)" ng-mouseup="me.stopPeriodic()"> <ui-icon icon="expand_less"></ui-icon> </md-button> </div> </md-card> '),e.put("components/ui-component/templates/slider.html",'<md-card ui-card-size="{{ me.item.width }}x{{ me.item.height }}" flex layout="row" layout-align="space-between center" class="nr-dashboard-slider" ng-class="{\'nr-dashboard-disabled\':me.item.disabled}"> <p class="label">{{me.item.label}}</p> <md-slider flex="100" min="{{me.item.min}}" max="{{me.item.max}}" ng-model="me.item.value" aria-label="{{me.item.label}}" ng-change="me.valueChanged(20)"> </md-card> '),e.put("components/ui-component/templates/switch.html",'<md-card ui-card-size="{{ me.item.width }}x{{ me.item.height }}" layout="row" layout-align="space-between center" class="nr-dashboard-switch" ng-click="me.item.value = !me.item.value; me.valueChanged(0)" ng-class="{\'nr-dashboard-disabled\':me.item.disabled}"> <p ng-if="me.item.label && (me.item.width > 1)" class="label">{{me.item.label}}</p> <md-switch ng-model="me.item.value" ng-change="me.item.value = !me.item.value" aria-label="{{me.item.label}}" ng-class="{\'center\' : !me.item.label}" ng-if="!me.item.oncolor || !me.item.onicon || !me.item.offcolor || !me.item.officon"> </md-switch> <ui-icon icon="{{me.item.value ? me.item.onicon : me.item.officon}}" ng-style="{color: me.item.value ?  me.item.oncolor : me.item.offcolor}" ng-class="{\'center\' : !me.item.label}" ng-if="me.item.oncolor && me.item.onicon && me.item.offcolor && me.item.officon"> </ui-icon> </md-card> '),e.put("components/ui-component/templates/template.html",'<md-card ui-template="me.item.format" ui-card-size="{{ me.item.width }}x{{ me.item.height }}" class="nr-dashboard-template" ng-class="{\'nr-dashboard-disabled\':me.item.disabled}"> </md-card> '),e.put("components/ui-component/templates/text-input-CR.html",'<md-card ui-card-size="{{ me.item.width }}x{{ me.item.height }}" layout="row" layout-align="space-between center" class="nr-dashboard-textinput" ng-class="{\'nr-dashboard-disabled\':me.item.disabled}"> <md-input-container class="md-block" flex md-is-error="false" ng-class="{\'has-label\':me.item.label}"> <label>{{me.item.label}}</label> <input ng-model="me.item.value" ng-keypress="me.keyPressed($event)" aria-label="{{me.item.label}}" type="{{me.item.mode}}"> </md-input-container> </md-card> '),e.put("components/ui-component/templates/text-input.html",'<md-card ui-card-size="{{ me.item.width }}x{{ me.item.height }}" layout="row" layout-align="space-between center" class="nr-dashboard-textinput" ng-class="{\'nr-dashboard-disabled\':me.item.disabled}"> <md-input-container class="md-block" flex md-is-error="false" ng-class="{\'has-label\':me.item.label}"> <label>{{me.item.label}}</label> <input ng-model="me.item.value" ng-change="me.valueChanged({{me.item.delay}})" aria-label="{{me.item.label}}" type="{{me.item.mode}}"> </md-input-container> </md-card> '),e.put("components/ui-component/templates/text.html",'<md-card ui-card-size="{{ me.item.width }}x{{ me.item.height }}" layout="{{ me.item.layout }}" layout-align="{{ me.item.layoutAlign }}" class="nr-dashboard-text" ng-class="{\'nr-dashboard-disabled\':me.item.disabled}"> <p class="label" ng-bind-html="me.item.getLabel()"></p> <p class="value" ng-bind-html="me.item.getText()"></p> </md-card> ')}]);
\ No newline at end of file