Custom widgets: feature walkthrough

@ysc thx for fixing my html/css
@mattwire if you set the main dashboard layout and save from the one of the panel pages the layout stays, the problem is only when saving from the advanced settings

@xsherlock good spot! Saving from one of the panel pages also keeps all my custom widgets etc so I just need to make sure I don’t use the advanced settings save for now. Thankyou!

Okay. I’ll need a precise way to reproduce this because I haven’t encountered this problem yet.

1 Like

Save a layout in advanced setting under the name that already exists. and you will loose column layout and the color scheme will reset to defaults, fails every time on my setup.


And s small question, when I create the instance of the new custom widget it has its name. By default New Widget. Can I access this name somehow in the code?
Otherwise I have to create another variable that doubles that name just to display some easy english name for the OH swich item name.

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

yes, that works fine.

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.

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.

You are STAR jackdw! Thanks!

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

@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.

@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:

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?

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

@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>

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

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

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

{{ 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.

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

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”