[Feature] Screen Saver

.gitignore

@@ -11,3 +11,4 @@ bower_components
 .sass-cache
 nbproject
 coverage
+.bowerrc

AUTHORS

@@ -3,3 +3,4 @@ Kuba Wolanin <hi@kubawolanin.com> (@kubawolanin)
 Sam Turner <sam@digi.ltd.uk> (@digiltd)
 Ingo Sigmund <ingo.sigmund@web.de> (@isigmund)
 Andreas Gebauer <an.ge.ber.81@gmail.com> (@andreasgebauer)
+Lucky Mallari <luckymallari@gmail.com> (@luckymallari)

doc/habpanel.md

@@ -145,7 +145,7 @@ Apart from the storage configuration discussed above, the settings screen contai
 | Additional stylesheet | Reference the relative URL of an additional CSS file which will be included and can be used to override the styles defined by the theme. For additional information on how you can customize HABPanel's styles, go to: [HABPanel Development & Advanced Features: Start Here!](https://community.openhab.org/t/habpanel-development-advanced-features-start-here/30755/1)
 | Drawer heading image | Reference the URL of an image (expected width: 265 pixels) which will replace the header in the side drawer
 | Hide the drawer's footer | Check to remove the bottom black part of the side drawer containing the date & time
-| Hide toolbar buttons (speak/refresh/fullscreen) | Check those boxes to hide the corresponding button in the default dashboard header top-right corner
+| Hide toolbar buttons (screensaver/speak/refresh/fullscreen) | Check those boxes to hide the corresponding button in the default dashboard header top-right corner
 | Show a clock in the header | If checked, a clock will be displayed in the main menu and the dashboards
 | Header clock format (shown if "Show a clock in the header" is checked) | Use an [AngularJS' date filter format string](https://docs.angularjs.org/api/ng/filter/date) to customize the clock format in the header. The default is `HH:mm`
 | Prevent scrolling (when not editing) | When enabled, it is impossible to scroll the dashboard on a tablet (and it prevents the "elastic" bouncing effect on iOS/Safari)

web/app/app.js

@@ -18,7 +18,8 @@
         'ngFileSaver',
         'snap',
         'tmh.dynamicLocale',
-        'pascalprecht.translate'
+        'pascalprecht.translate',
+        'as.sortable'
     ])
     .config(['$routeProvider', 'localStorageServiceProvider', 'tmhDynamicLocaleProvider', '$translateProvider', '$translatePartialLoaderProvider', function($routeProvider, localStorageServiceProvider, tmhDynamicLocaleProvider, $translateProvider, $translatePartialLoaderProvider) {
         localStorageServiceProvider.setStorageType('localStorage');
@@ -180,6 +181,20 @@
                     }]
                 }
             })
+            .when('/settings/screensaver', {
+                templateUrl: 'app/settings/settings.screensaver.html',
+                controller: 'ScreensaverSettingsCtrl',
+                resolve: {
+                    dashboards: ['PersistenceService', '$q', function (persistenceService, $q) {
+                        var dashboards = persistenceService.getDashboards(true);
+                        if (persistenceService.isEditingLocked()) return $q.reject("Editing is locked");
+                        return dashboards;
+                    }],
+                    translations: ['TranslationService', function (TranslationService) {
+                        return TranslationService.enterPart('admin');
+                    }]
+                }
+            })            
             .otherwise({
                 redirectTo: '/'
             });

web/app/dashboard/dashboard.view.controller.js

@@ -2,13 +2,14 @@
         .module('app')
         .controller('DashboardViewCtrl', DashboardViewController);
 
-  DashboardViewController.$inject = ['$scope', '$location', '$rootScope', '$routeParams', '$timeout', 'dashboard', 'PersistenceService', 'OHService', 'Fullscreen', 'snapRemote', 'SpeechService', 'TranslationService'];
-  function DashboardViewController($scope, $location, $rootScope, $routeParams, $timeout, dashboard, PersistenceService, OHService, Fullscreen, snapRemote, SpeechService, TranslationService) {
+  DashboardViewController.$inject = ['$scope', '$location', '$rootScope', '$routeParams', '$timeout', 'dashboard', 'PersistenceService', 'OHService', 'Fullscreen', 'snapRemote', 'SpeechService', 'TranslationService', 'ScreensaverService'];
+  function DashboardViewController($scope, $location, $rootScope, $routeParams, $timeout, dashboard, PersistenceService, OHService, Fullscreen, snapRemote, SpeechService, TranslationService, ScreensaverService) {
     var vm = this;
     vm.dashboard = dashboard;
     vm.speakTooltip = TranslationService.translate('dashboard.toolbar.speak', 'Speak');
     vm.refreshTooltip = TranslationService.translate('dashboard.toolbar.refresh', 'Refresh');
     vm.fullscreenTooltip = TranslationService.translate('dashboard.toolbar.fullscreen', 'Fullscreen');
+    vm.screensaverToolTip = TranslationService.translate('dashboard.toolbar.screensaver', 'Screensaver');
 
     vm.gridsterOptions = {
         margins: (vm.dashboard.widget_margin) ?
@@ -73,6 +74,14 @@
         $location.url("/edit/" + dashboard.id);
     };
 
+    vm.startScreensaver = function() {
+        ScreensaverService.start(true);
+    }
+    vm.isScreensaverEnabled = function() {
+        return ScreensaverService.isEnabled;
+    }
+
+    vm.isScreensaverRunning = ScreensaverService.isRunning;
 
     // Speech recognition
     vm.isListening = false;

web/app/dashboard/dashboard.view.html

@@ -2,7 +2,6 @@
     <a class="btn pull-left" title="Menu" snap-toggle="left">
         <i class="glyphicon glyphicon-menu-hamburger"></i>
     </a>
-
     <a class="btn pull-right" ng-click="vm.goFullscreen()" title="{{vm.fullscreenTooltip}}" ng-if="!settings.hide_fullscreen_button && !vm.dashboard.header.use_custom_widget">
         <i class="glyphicon glyphicon-resize-full"></i>
     </a>
@@ -15,6 +14,9 @@
         title="{{vm.speakTooltip}}">
         <i class="glyphicon" ng-class="vm.isListening ? 'glyphicon-stop' : 'glyphicon-comment'"></i>
     </a>
+    <a class="btn pull-right" ng-if="vm.isScreensaverEnabled()" ng-click="vm.startScreensaver()" title="{{vm.startscreensaverToolTip}}" ng-if="!settings.hide_screensaver_button && !vm.dashboard.header.use_custom_widget">
+        <i class="glyphicon glyphicon-play" ng-class="{'text-success':vm.isScreensaverRunning()}"></i>
+    </a>
     <h2 class="dashboard-title" ng-if="!vm.dashboard.header.use_custom_widget">
         <small class="header-clock" ng-if="settings.show_header_clock"><ds-widget-clock show-digital digital-format="settings.header_clock_format || 'shortTime'"></ds-widget-clock></small>
         <span>{{vm.dashboard.name}}
@@ -40,7 +42,7 @@ <h2 class="dashboard-title" ng-if="!vm.dashboard.header.use_custom_widget">
     tooltip-placement="top">
     <i class="glyphicon" ng-class="vm.isListening ? 'glyphicon-stop' : 'glyphicon-comment'"></i>
 </a>
-<div class="scrollable" ng-show="vm.ready" gridster="vm.gridsterOptions">
+<div class="scrollable widget-container" ng-show="vm.ready" gridster="vm.gridsterOptions">
     <ul>
         <li gridster-item="widget" ng-repeat="widget in vm.dashboard.widgets">
             <div class="box" ng-style="{'font-size': vm.dashboard.font_scale ? vm.dashboard.font_scale + '%' : undefined }">