Custom widgets: feature walkthrough

Apps & Services HABPanel
83

@ysc thank you.

84

Hi ,

i would create a custom widget an call this custom widget from another customer widget.
So I tried to setup a directive but the tpl html will be not loaded ? Can someone help ?
directive:

(function () {
    'use strict';
    angular      
    .module('app.widgets')
        .directive('shutter', function () {
            return {

                restrict: 'AE',
                scope: {
                    ngModel: '='
                },
                templateUrl: '/static/matrix-theme/shutter.html',
                controller: ['$controller', '$scope', function ($controller, $scope) {
                    debugger;
                    var myCtrl = $scope.ngModel;
                    return myCtrl;
                }],
                controllerAs: 'myCtrl',
            };
        })
        .config(function (WidgetsProvider) {
            debugger;
            WidgetsProvider.$get().registerType({
                type: 'shutter',
                displayName: 'Shutter',
                icon: 'download-alt',
                description: 'A button performing a certain action, like sending a command to an openHAB item'
            });
        });
});

Widget wich is calling the custom widget

<div oc-lazy-load="['/static/matrix-theme/shutter.js']">
                  	<shutter ng-model="rollershutter_1" ></shutter>
                  </div>
1 Like
85

Hi all,

I’m about to create a custom widget and im wondering if the following is possible, and if so… how?
If someone could help me or maybe find another way to get this working, that would be very much apprecciated.

I have the following code

<div>{{itemValue('Item_Name_1')}}</div>

and i have a config value named count as number

now i want to replace the 1 in the first code block with the config.count value.

thanks

86 
<div>{{itemState('Item_Name_' + config.count.toString())}}</div>

should work.

1 Like
87

wow great! yes that works… Thank you very much :slight_smile:

88

this has been asked probably multiple times but i couldn’t find an answer… so i’ll give it a try:
are the codes for the “standard” widgets to be found somewhere? i’d like to modify the standard switch lightly but i don’t know where to begin…

89
90

thanks, but i’d like to start my custom widget on base of a standard widget and i have no idea how, just like @no.starm

91

You need to learn Angular JS (besides HTML and CSS):

1 Like