Custom widgets: feature walkthrough

Apps & Services HABPanel
46

Hey there, i am trying to create my first widgets. Actually I know how to display an items-value, and how to display a string: {{itemValue(config.id1)}}.

But how could i display a choosen Icon?

{{itemValue(config.id1)}} gives me just the string of the choosen Icon but the icon is not displayed.

Could you give me a hint ?

Greetings, Dominic

47

no one?

is there anywhere a list of all possible “tags” like {{itemValue(config.id1)}} that could be used?

48
1 Like
49

@sihui

Thanks for replying - that could be a really interesting ressource.

Perhaps i am just blind or too stupid to understand but i did not find an answer to my original question how to display an Icon that is choosen via the settings dialog. Could you help me again?

50

Sorry, have no idea :joy:

51

I guess you can find a solution in

52

Hi !

I think it’s not as easy as it could (should?) be.

What do you want to do? Maybe there is another solution.

Here is an example of workaround I used :

<div>
  <div ng-if="itemValue(config.my_item_display_temp)<20">
    <widget-icon iconset="'eclipse-smarthome-classic'" icon="'temperature_cold'"/>
  </div>
  <div ng-if="itemValue(config.my_item_display_temp)>20 && itemValue(config.my_item_display_temp)<22"> 
    <widget-icon iconset="'eclipse-smarthome-classic'" icon="'temperature'"/>
  </div>
  <div ng-if="itemValue(config.my_item_display_temp)>22">
    <widget-icon iconset="'eclipse-smarthome-classic'" icon="'temperature_hot'"/>
  </div>
  <div>
    <span ng-if="itemValue(config.my_item_display_temp)!='NULL'" style="color: cyan; font-size: 28pt">{{'%.1f °C' | sprintf:itemValue(config.my_item_display_temp)}}</span>
  </div>
</div>
53

@scantineau : Thanks this workaround helps.

But it is a workaround. What i want to do is the following:

I want to create a Widget in which i could choose an Icon from an iconset. I want to reuse this widget lot of times - so the icon has to be generic choosable. In the settings i could create an “icon-variable” and then could choose the Icon - but instead of the icon only the text/Name of the icon is displayed.

54

Could you show us your widget-icon code ?

55

sure, here it is in an early basic version:

box.widget.json (911 Bytes)

56

There is no widget-icon in your code so I cannot help you about “but instead of the icon only the text/Name of the icon is displayed”

57

How do i import a widget json in stable 2.2?

/Mike

58

When editing a page click on the “add widget” drop down menu and on the bottom half is the ‘custom widget’ area with a little cog icon which you can click to take you here:

https://<openHAB-IP>:8443/habpanel/index.html#/settings/widgets

Bottom left you should see an Import widget button that will do what you require.

61

Hi

I guess I’m a little bit lost here. I want to display different Strings from config parameters depending on the state of an item, like:

{{itemValue(config.switch_item)=='ON' ? {config.color_on} : (config.color_off)}}

But this doesn’t work at all, so I assume the syntax is not right. How do I do this right?

In the above example I set alternating CSS background-colors depending on the state of the item (eg. a green button for ON and red button for OFF).

62

I have a problem with a item from widget settings. its defined as item with the ID “temperature_item”.
I tried something, but i dont get the item inside an ng-init for a knob working. But what works is a openhab item. here the code for the “item” from widget settings item

 <div ng-init='temp2={"name": "°C",
                "sizeX": 1,
                "sizeY": 1,
                "fontSize": 40,
                "textColor": "#FFFFFF", 
                "item": "config.set_temperature_item),

and here the code for “item” with the openhab-item wich is working.

                "item": "EG_WZ2_WTT_HZF1_temp",
63

Is it possible to reuse a custom widget in another custom widget or a template?
Something like:

<my-custom-widget ...></my-custom-widget>
64

Ah yeah, found a solution. Created a custom directive, that worked just fine :slight_smile:

65

Great, and would you be so kind to publish your solution / code?

66

Sure thing, well, I created a custom javascript file, let’s call it
my-directive.js and put the directive into it, something like this:

angular
    ...
    ...
    .directive('myDirective', function() {
		return {
			restrict: 'E',
			scope: {
				ctrl: '='
			 },			
			templateUrl: '/static/my-theme/my-directive.html',
			controller: ['$controller', '$scope', function($controller, $scope) {
				var myCtrl = $scope.ctrl;
				return myCtrl;
			}],
			controllerAs: 'myCtrl',			
		};
	});

Then I loaded the js with oc-lazy-load and could already use it:

<div oc-lazy-load="['/static/my-theme/my-directive.js']">
	<my-directive></my-directive>
</div>

The code for your custom widget has to be put into: my-directive.html

That’s it, works fine for me :slight_smile:

1 Like
67

Can somebody provide simple how-to for developing more complicated custom widgets using “oc-lazy-load” for people, unfamiliar with Angular? And what Angular version used in latest OpenHAB 2?

For example I want to make widget, that support calls via JsSIP. I know how to do it in vanilla js/html, but Angular for me is a dark forest. And all I need is some variables with binding to UI, functions called by clicking on button and JsSIP callbacks support. I haven’t time to learn all Angular only for this. Simple doc will be very useful for people like me and brought a lot of new widgets to gallery.

1 Like