Dynamic Background

Apps & Services HABPanel
1

Hello,

for my change to openhab from symcon I (better said my wife :wink: ) wants a dynamic background of the whole habpanel pages depending on the current weather. Is there a possibility to change the background based on an openhab item like weather condition from the weather1 binding?

1 Like
2

Not natively… However this should be possible with a template widget using dynamically loaded code; see examples linked in the “Advanced: Injecting custom JavaScript code” chapter of:

Some additional info:

  • The setting for the background image URL is in $rootScope.settings.background_image
  • You can inject OHService in the controller and then use this function to monitor for state changes of an item:
OHService.onUpdate($scope, <your_item_name>, function () {
    // your code here, for example:
    var item = OHService.getItem(<your_item_name>);
    $rootScope.settings.background_image = '/static/weather/bkg_' + item.state + '.jpg';
}
1 Like
3

Ended up doing it. Here’s a complete example:

dynamicbkg.controller.js to put in conf/html:

(function() {
    'use strict';

    angular
        .module('app.widgets')
        .controller('DynamicBkgWidgetController', DynamicBkgWidgetController);

    DynamicBkgWidgetController.$inject = ['$rootScope', '$scope', 'OHService'];
    function DynamicBkgWidgetController($rootScope, $scope, OHService) {
        var vm = this;

        var itemName = 'WeatherCondition';
        var baseUrl = '/static/weather/bkg_';


        function updateBackground() {
            var item = OHService.getItem(itemName);
            if (item && item.state) {
                $rootScope.settings.background_image = baseUrl + item.state + '.jpg';
                vm.state = item.state;
            }
        }

        OHService.onUpdate($scope, itemName, function () {
            updateBackground();
        });

        activate();

        ////////////////

        function activate() {
            updateBackground();
        }
    }
})();

Template in a custom widget or Template widget:

<div class="box-content dummy" oc-lazy-load="['/static/dynamicbkg.controller.js']">
  <div ng-controller="DynamicBkgWidgetController as vm">
	  <h3>{{vm.state}}</h3>
  </div>
</div>

You can alter the template and variables in the controller; note that in this case, standard HABPanel template functions like itemState, sendCmd aren’t available because you’ve replaced the controller by your own - but you can bind to scope variables you define in the controller, like above with vm.state.

5 Likes