openHAB Custom Vizualizacja w Habpanel. inject java

Posiadam wizualizację, wykonaną dzięki pracy Yannick Schaus. Wizualizacja prezentuje sie tak :

Nadchodzą Święta, w ubiegłym roku śniegu nie było zbyt wiele, więc chciałbym aby z tej okazji śnieg padał w tablecie:) Znalazłem skrypt w javie. Niestety mój "skill" jest zbyt maly i nie mogę sobie poradzić z wstrzyknięciem kodu do openhab. Poniżej zamieszczę kody teraźniejszy- dzięki którym to wszystko bangla. Z góry dziękuję za pomoc.

WIDGET  --utworzony w habpanel'u

<div class="box-content dummy" oc-lazy-load="['/static/dynamicbkg.controller.js']">
  <div ng-controller="DynamicBkgWidgetController as vm">
  </div>
</div>
<div style="position: absolute;
            top: 0;
            bottom: 0;
            left: 10px; right: -15px;
            background-size: cover;
            background-repeat: no-repeat;">
  
<div ng-init='model={"name": "Wall", "item": "wall", "hidelabel": false, "hideonoff": true, "iconset": "eclipse-smarthome-classic", "icon": "light" }'>
<widget-switch
        style="position: absolute;
               background: rgba(0,0,0,0.5);
               border-radius: 20px;
               top: 365px; left: 180px;
               width: 70px; height: 70px"
        ng-model="model" />
</div>
  
<div ng-init='model2={"name": "Komin", "item": "komin", "hidelabel": true, "hideonoff": true, "iconset": "eclipse-smarthome-classic", "icon": "light" }'>
<widget-switch
        style="position: absolute;
               background: rgba(0,0,0,0.5);
               border-radius: 20px;
               top: 230px; left: 398px;
               width: 60px; height: 60px"
        ng-model="model2" />
</div>

<div ng-init='model3={"name": "Sypialnia", "item": "syp", "hidelabel": false, "hideonoff": true, "iconset": "eclipse-smarthome-classic", "icon": "light" }'>
<widget-switch
        style="position: absolute;
               background: rgba(0,0,0,0.5);
               border-radius: 20px;
               top: 110px; left: 450px;
               width: 75px; height: 60px"
        ng-model="model3" />
</div>

<div ng-init='model4={"name": "Lazienka", "item": "laz", "hidelabel": false, "hideonoff": true, "iconset": "eclipse-smarthome-classic", "icon": "light" }'>
<widget-switch
        style="position: absolute;
               background: rgba(0,0,0,0.5);
               border-radius: 10px;
               top: 220px; right: 180px;
               width: 75px; height: 60px"
        ng-model="model4" />
</div>
  
<div ng-init='model5={"name": "Szafa", "item": "szafa", "hidelabel": false, "hideonoff": true, "iconset": "eclipse-smarthome-classic", "icon": "light" }'>
<widget-switch
        style="position: absolute;
               background: rgba(0,0,0,0.5);
               border-radius: 10px;
               top: 110px; right: 240px;
               width: 60px; height: 60px"
        ng-model="model5" />
</div>
  
<div ng-init='model6={"name": "Os.zew", "item": "outdoor_w_light", "hidelabel": false, "hideonoff": true, "iconset": "eclipse-smarthome-classic", "icon": "light" }'>
<widget-switch
        style="position: absolute;
               background: rgba(0,0,0,0.5);
               border-radius: 10px;
               top: 300px; right: 5px;
               width: 70px; height: 70px"
        ng-model="model6" />
  </div>
<div ng-init='model7={"name": "Os.zew Tescie", "item": "outdoor_light", "hidelabel": false, "hideonoff": true, "iconset": "eclipse-smarthome-classic", "icon": "light" }'>
<widget-switch
        style="position: absolute;
               background: rgba(0,0,0,0.5);
               border-radius: 10px;
               top: 310px; left: 85px;
               width: 70px; height: 70px"
        ng-model="model7" />
</div>

<div ng-init='model11={"name": "Night state", "item": "nightstate", "hidelabel": false, "hideonoff": false, "iconset": "eclipse-smarthome-classic"}'>
<widget-switch
        style="position: absolute;
               background: rgba(0,0,0,0.5);
               border-radius: 10px;
               top: 2px; right: 32px;
               width: 90px; height: 75px"
        ng-model="model11" />
</div>

<div ng-init='model12={"name": "Alarm", "item": "alarm", "hidelabel": false, "hideonoff": false, "iconset": "eclipse-smarthome-classic"}'>
<widget-switch
        style="position: absolute;
               background: rgba(0,0,0,0.5);
               border-radius: 10px;
               top: 2px; right: 127px;
               width: 60px; height: 75px"
        ng-model="model12" />
</div>
  
<div ng-init='model8={"name": "Door", "item": "door", "hidelabel": false, "hideonoff": false, "iconset": "eclipse-smarthome-classic", "icon": "fts_door_open" }'>
<widget-switch
        style="position: absolute;
               background: rgba(0,0,0,0.5);
               border-radius: 10px;
               top: 2px; right: 257px;
               width: 60px; height: 75px"
        ng-model="model8" />
</div>
 
<div ng-init='model9={"name": "Zew ˚C", "item": "TZew", "hidelabel": false, "hideonoff": false, "iconset": "eclipse-smarthome-classic"}'>
<widget-dummy
        style="position: absolute;
               background: rgba(0,0,0,0.5);
               border-radius: 10px;
               top: 2px; right: 468px;
               text-align: center;
               font-size: 20px;
               font-weight: bold;
               width: 70px; height: 75px"
        ng-model="model9" />
</div>
<div ng-init='model10={"name": "˚C", "item": "TDom", "hidelabel": false, "hideonoff": false, "iconset": "eclipse-smarthome-classic"}'>
<widget-dummy
        style="position: absolute;
               background: rgba(0,0,0,0.5);
               border-radius: 10px;
               top: 235px; right: 280px;
               text-align: center;
               font-size: 20px;
               width: 65px; height: 65px"
        ng-model="model10" />
</div>
  
<div ng-init='model13={"name": "All lights", "item": "lights", "hidelabel": false, "hideonoff": true, "iconset": "eclipse-smarthome-classic", "icon": "light"}'>
<widget-switch
        style="position: absolute;
               background: rgba(0,0,0,0.5);
               border-radius: 10px;
               top: 2px; right: 387px;
               width: 75px; height: 75px"
        ng-model="model13" />
</div>
  
<div ng-init='model14={"name": "Dzienny", "item": "dzienny", "hidelabel": false, "hideonoff": true, "iconset": "eclipse-smarthome-classic", "icon": "light"}'>
<widget-switch
        style="position: absolute;
               background: rgba(0,0,0,0.5);
               border-radius: 10px;
               top: 300px; left: 500px;
               width: 75px; height: 75px"
        ng-model="model14" />
</div>
  <div ng-init='model15={"name": "Pastuch", "item": "pastuch", "hidelabel": false, "hideonoff": true, "iconset": "eclipse-smarthome-classic", "icon": "light"}'>
<widget-switch
        style="position: absolute;
               background: rgba(0,0,0,0.5);
               border-radius: 10px;
               top: 450px; right: 5px;
               width: 75px; height: 75px"
        ng-model="model15" />
</div>
    <div ng-init='model16={"name": "Pir Schody", "item": "switch_schody", "hidelabel": false, "hideonoff": true, "iconset": "eclipse-smarthome-classic", "icon": "light"}'>
<widget-switch
        style="position: absolute;
               background: rgba(0,0,0,0.5);
               border-radius: 10px;
               top: 115px; right: 50px;
               width: 75px; height: 75px"
        ng-model="model16" />
</div>
<div ng-init='model17={"name": "C.O Temp", "item": "coTemp", "hidelabel": false, "hideonoff": true, "iconset": "eclipse-smarthome-classic"}'>
<widget-dummy
      style="position: absolute;
              background: rgba(0,0,0,0.5);
              border-radius: 10px;
              text-align: center;
              font-size: 20px;
              top: 2px; left: 85px;
              width: 85px; height: 70px"
      ng-model="model17" /></div>
<div ng-if="itemValue('coAlarm')=='ON'">
  <span>
<div ng-init='model18={"name": "Potwierdź alarm C.O.", "item": "coTempKnownlage", "hidelabel": false, "hideonoff": false, "hideicon": true}'>
<widget-switch
      style="position: absolute;
              background: rgba(0,0,0,0.5);
              border-radius: 10px;
              top: 2px; left: 175px;
              width: 85px; height: 70px"
      ng-model="model18" /></div>
</span>
</div>
<div ng-if="itemValue('enterance_notification_ONOFF')=='ON'">
  <span>
<div ng-init='model19={"name": "Schody", "item": "enterance_notification_ONOFF", "hidelabel": false, "hideonoff": true, "iconset": "eclipse-smarthome-classic", "icon": "soundvolume" }'>
<widget-switch
        style="position: absolute;
               background: rgba(0,0,0,0.5);
               font-size: 15px;
               border-radius: 10px;
               top: 2px; right: 192px;
               width: 60px; height: 75px"
               ng-model="model19" /></div>
  </span>
</div>
<div ng-if="itemValue('enterance_notification_ONOFF')=='OFF'">
  <span>
<div ng-init='model20={"name": "Schody", "item": "enterance_notification_ONOFF", "hidelabel": false, "hideonoff": true, "iconset": "eclipse-smarthome-classic", "icon": "soundvolume_mute" }'>
<widget-switch
        style="position: absolute;
               background: rgba(0,0,0,0.5);
               font-size: 15px;
               border-radius: 10px;
               top: 2px; right: 192px;
               width: 60px; height: 75px"
               ng-model="model20" /></div>
  </span>
</div>
 <div ng-init='model21={"name": "Door", "item": "keep_doorOpen", "hidelabel": true, "hideonoff": false, "iconset": "eclipse-smarthome-classic"}'>
<widget-switch
        style="position: absolute;
               background: rgba(0,0,0,0.5);
               text-align: top;
               font-size: 15px;
               border-radius: 10px;
               top: 2px; right: 322px;
               width: 60px; height: 75px"
               ng-model="model21" />
</div>

<div ng-if="itemValue('TZew')<='0'">
<span>
<div>
<widget
        style="position: absolute;
               background: url('http://192.168.1.129/static/snowflake.png'); //rgba(0,0,0,0.5);
               border-radius: 10px;
               top: 10px; left: 388px;
               width: 70px; height: 75px"
/>
</div>
</span>
</div>
 
</div>

dynamicbkg.controller.js --umieszczony w folderze /static/

(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 = 'nightstate';

        var baseUrl = '/static/bkg/';

        var itemPoraRoku = 'PoraRoku';

        function updateBackground() {

            var item = OHService.getItem(itemName);

            var itemPR = OHService.getItem(itemPoraRoku);

            if (item && item.state) {

                $rootScope.settings.background_image = baseUrl + itemPR.state + '/' + item.state + '.jpg';

                vm.state = item.state;

            }

        }

        OHService.onUpdate($scope, itemName, function () {

            updateBackground();

        });

        activate();

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

        function activate() {

            updateBackground();

        }

    }

})();