Custom widgets: feature walkthrough

Apps & Services HABPanel
25

Thanks.
I believe that’ll be ngModel.name (not sure, can’t check now) but I’ll expose a more friendly name.

26

yes, that works fine.

27

Hi Guys,

I’ve been pulling my hair out for a few hours now. Got a custom widget code (light switch) and trying to add the config parameters so I can use it for all lights in the house.

Here is a code:

<table style="width: 100%; border-collapse: separate; border-spacing: 8px;">
  <tr>
    <td colspan=2 style="padding: 0;">
      <h3 style="color: #ffaa00; line-height: .1em;">{{config.oh_label}}</h3>
    </td>
  </tr>
  <tr>
    <td style="border: 2px solid #76899e; border-radius: 10px;">
      <table style="width: 100%;">
        <tr>
          <td style="padding: 0px; padding-top: 10px; padding-bottom: 10px">
            <div ng-init='model_switch={"light_switch": "Light Switch", "item": "{{config.oh_item}}", "hidelabel": true, "hideonoff": true, "iconset": "smarthome-set","icon": "bulb","icon_size": "62" }'>
              <widget-switch   ng-model="model_switch" />
            </div>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

The

config.oh_label

works just fine. But the

config.oh_item

does not.

In the settings I have the ‘oh_item’ configured as ‘item’ and ‘oh_label’ configured as a ‘string’

Would appreciate any pointers as to what’s wrong in the code…

Thanks
Alex.

28

Try removing the {{ and }} around the config.oh_item… it’s already in the angular construct, so you don’t need to force it into there again.

29

You are STAR jackdw! Thanks!

Removed “{{ and }}” including the double quotes and it works!

30

@ysc Feedback: custom widgets are really great!

Feature request: extra Settings type: comma-seperated list

Besides the current available types (Item, Number, Color and String), I would like to have an extra type: “Comma separated list”. This would allow me to have more control over the options presented in the settings and it’s user input, e.g.

Y, N
yes, no
morning, noon, afternoon, night

This will allow me to make the widget highly configurable by the user.

31

@loovanloon thanks, appreciated :wink:
Good idea, and in fact I had thought about this already, dalong with checkboxes, icon pickers, headings and the ability to reorder. I won’t give you an ETA but I’ll post here when it’s done :wink:

32

Great! I’ll be patient tonight. :sleeping:

Until now, I did the reordering by exporting the widget to my favorite text editor notepad++.

line breaks when exporting
Problem that I encountered then was that the ccs section showed line breaks as “/n”. This makes the code hard to read. Do you thinks this can be fixed as well?

33

Where can i find json files for original widgets. I want to modify the Switch Widget.
I am using Samsung TV Binding and i can not do power On with the binding (Samsung limitation) so i want to use Harmony Binding to Power On.

/Mike

34

@ysc I am having some troube with settings other than item settings.

I have a number setting called water_temp_threshold and I cannot get the value to calculate, nor display (I have it set to 24 in the widget)

Heres a bunch of things I tried

Also same issue with water_temp_colour - I cant display this value either

 <div ng-if="(itemValue(config.water_temp_threshold) * 1) == 24"> its 24</div>
    <div ng-if="itemValue(config.water_temp_threshold)!=24"> its not 24</div>
    <div ng-if="itemValue(config.water_temp_threshold)==null"> its null</div>
    <div ng-if="itemValue(config.water_temp_threshold)< 24"> its less</div>
    <div ng-if="itemValue(config.water_temp_threshold) > 24"> its more</div>
    <div ng-if="itemValue(config.water_temp_threshold)=='24'"> its 24 string</div>
    <div>{{itemValue(config.water_temp_threshold).toString(); }}°C</div>
    <div>{{itemValue(config.water_temp_colour)}}</div>
35

OK solved this myself and leaving here incase someone is as stupid as I am - you only use itemValue(config.name) for items, so if you want to display or enumerate a setting that isnt an item, just use config.name

36

Any chance we could get a backdrop image option in the choices for the custom template?

37

Hi !

Is there a way to “Use server-provided format if available (openHAB 2)” in custom widget ?

I didn’t find any list of available methods for items.

I found that piece of code for Dummy widget :

            if (vm.widget.useserverformat && item.stateDescription && item.stateDescription.pattern)
                value = sprintf(item.stateDescription.pattern, value);
            vm.value = value;

I don’t know if it is possible (and how) to use the same in custom widgets…

Thanks

38

{{ getItem(item).stateDescription.pattern | sprintf:itemState(item) }} should work.

(item being the name of an item like 'Outside_Temperature' or something like config.myitem to use a custom widget setting)

Be sure to check the pattern is defined though or you will get errors.

39

Sorry, missed that. Not sure I get what you mean?

40

getItem doesn’t give me anything

I tried this :

  <pre>{{ config.my_item_display_temp }} {{ getItem(config.my_item_display_temp) | json }}</pre>

But it just gives me back “Temp_GF_Office”

41

Ah yes, this was introduced after the 2.0.0 release:

If you have a version older than 31 Jan, those are not available.

42

Indeed I have a 2.0.0 version…

Thanks for your answers :slight_smile:

43

No probs - we have an icon option:

which allows you to configure an icon for the template - be great if we could have a background image like the pipe in this button for templates

1 Like
44

<widget-icon> actually has a backdrop boolean attribute which will set up the correct CSS classes for you :slight_smile:
So you simply configure an regular Icon setting, give it a name e.g. ‘backdrop’ then:

<widget-icon iconset="config.backdrop_iconset" icon="config.backdrop"
             backdrop="true" center="true"></widget-icon>
<div>
	<h2>Hi!</h2>
  <p>This should go over the backdrop</p>
</div>

Will render as:

1 Like