Use external directives

Apps & Services HABPanel
1

Hello @ysc

i am new to HABpanel an find it very intresting. So i give it a try and want to implement a custom widget. For this i need a timer. I found a Angular Timer here: https://siddii.github.io/angular-timer/

Is it possible to use this one in HABpanel and if yes, how can i use it?

2

Sorry, including external libraries is not supported by the “custom widget” feature. It would have to be included to the main codebase - I’m trying to keep HABPanel lean, but if there is enough popular demand for that particular library it is something that could be done, however for now you’ll have to either cope with what’s available in the templates currently, or propose a PR on the HABPanel GitHub and make it gain some traction for it to be included.

3

@ysc

Is there any documentation regarding what types of Angular, Bootstrap or other technology is available to be used. As someone who’s never paid much attention to web design, knowing what I can leverage for custom widgets would be very much appreciated.

4

That’s needed for sure and will be done eventually - but what’s available right now is:

  • everything available in the standard AngularJS library (including ng-touch) in templates;
  • directives from the bootstrap-ui library;
  • the sprintf filter;
  • a few directives from HABPanel that behave correctly - widget-switch, widget-slider, widget-icon mainly
  • functions in the scope of your template:
  1. itemValue(itemname)
  2. sendCmd(itemname, value)
  3. itemsInGroup(groupname)
  4. itemsWithTag(tagname)