New display options (incl. experimental custom widgets everywhere!)

[ysc (Yannick Schaus)]

Hi all,
Just notifying you I just added some options to further customize your HABPanel side drawer and dashboard headers - two of the remaining places where customization was not easily possible:

And for those of you who like to play with this stuff, you are now able to customize those per dashboard with custom widgets - meaning you can put whatever you want in those places (within reason)
There was already an ability to customize the dashboard tile in the main menu this way, I simply reused the concepts for the drawer menu and the header.
Obviously, there could be unintended consequences if you’re not careful so these options are labeled “experimental” - nonetheless I’m curious what you’ll eventually come up with You’ll find them in the third tab of the dashboard’s settings dialog, accessible from the main menu in edit mode.

It’s recommended to keep your widgets simple, without interactive features (like ng-click or buttons, sliders etc), furthermore they might not look exactly like the preview in the widget designer because additional CSS classes are applied.
Here are a few possible uses of this feature:

Changing the side drawer menu entry for a dashboard

Tip: use ngModel.name to get the dashboard’s name.

Example 1:

<span>{{ngModel.name}}</span> <span class="pull-right label label-primary">{{itemState(config.label_item)}}</span>
<dl style="padding: 0; margin: 0; font-size: 8pt; text-transform: none;">
  <dd class="pull-right value">{{"%0.1f °C"|fmt:+itemState(config.first_details_item)}}</dd>
  <dt>{{config.first_details_label}} </dt>
  <dd class="pull-right value">{{"%0.1f °C"|fmt:+itemState(config.second_details_item)}}</dd>
  <dt>{{config.second_details_label}} </dt>
</dl>

Config settings types: label_item: Item, first_details_label: String, first_details_item: Item, second_details_label: String, second_details_label: Item

Example 2:

<span>{{ngModel.name}}</span>
<span class="label label-danger pull-right">{{(itemsInGroup(config.group_name) | filter:{state:'ON'}).length}}</span>

Config settings types: group_name: String

Result (after setting and configuring the widgets):

Changing the dashboard header

Tip: use ngModel.name to get the dashboard’s name.

Example 1

<h2 class="dashboard-title">
  {{ngModel.name}}
  <span class="badge">{{(itemsInGroup(config.label_group_name) | filter:{state:'ON'}).length}} / {{(itemsInGroup(config.label_group_name)).length}}</span>
  <small class="header-clock">
    <ds-widget-clock show-digital digital-format="'EEE dd HH:mm'"></ds-widget-clock>
  </small>
  <small class="header-clock">
    {{'%0.1f °C' | fmt:+itemState(config.header_item)}} |
  </small>
</h2>
<hr style="margin-top: 4px; margin-bottom: 0; border-top: 1px solid #777;" />

Config settings types: header_item: Item, label_group_name: String

Result (after setting and configuring the widget)

Again, use with caution, but hope it helps!
Cheers

[pmpkk (Patrick)]

Woah!!! Love it!

[Andrew_Pawelski]

@ysc how do you edit the dashboard once you have replaced the header? it appears as if the edit button disappears and you cant get back in to edit mode.

[ysc (Yannick Schaus)]

@Andrew_Pawelski

@ysc how do you edit the dashboard once you have replaced the header? it appears as if the edit button disappears and you cant get back in to edit mode.

Go back to the main menu, click the edit mode button in the top-right corner and simply click on the tile. After you’ve clicked “Run” if you want to go back to editing you can simply navigate back with your browser.

[Andrew_Pawelski]

Yep - that’ll do it! Thats a good solution thanks for your amazing work! Every time I think “can HABpanel do this…” - the answer is always yes!

[furax54]

Hi,
Can you explain me how we can have this expermental version without switching openhab version ?

[ysc (Yannick Schaus)]

How to update Habpanel only

Hi all, I’m playing around with HABpanel and it looks great. Now I’m trying to show a Image Item. But in 2.1 stable it’s not possible. I saw that It’s allready integrated in the 2.2 version of the UI. I have cloned the repositiory and mvn the jar file but I’m not able to update the UI. Where do i have to place the jar file to get it updated? Or what to do to update a stable version with a snapshot UI? Thanks / Greetings / Thomas

[bennYx0x (Benjamin)]

@ysc

first: great work you’re doing here awesome to have contributors like you around!

What I’d like to know:
Is there a possibility, to hide dashboard entries from the dasboard drawer? I replaced it with an empty widget, but that creates an empty entry in the drawer.

Background:
I’m organizing my views/dashboards per room. Inside the room dashboards I implemented a header with icons, representing the functionality of the room (e.g. icons which redirect to heating, lamps and so on for the specific room).

Since these “functionality” dashboards should be only accessible via the room dashboard, I want them to be not listed in the drawer.

Thanks in advance!

[furax54]

Thank you yannick.

[dmorell (Devin)]

Where is the dashboard settings located in habpanel for editing the header?I don’t see a third tab labeled custom widget for editing the drawer of dashboard header.

[zbot473]

These don’t update when I change the code of the custom widget. I have to remove the widget and re-enable it. After that, it works.

[Andrew_Pawelski]

Hi @ysc I am just trying to use this snippet:

  <span class="badge">{{(itemsInGroup(config.label_group_name) | filter:{state:'ON'}).length}} / {{(itemsInGroup(config.label_group_name)).length}}</span>

for determining what lights are on in a group. Ive found that the filter works fine for a group of lights that are ON or OFF based, however for dimmers, it will only work when I use a numeric value and the dimmer is set to that value (eg 50%) is there a way to have both types of lights status (dimmers and switches) in a filter? I am guessin I need .state: ON as well as .state > 0 somehow

[ysc (Yannick Schaus)]

I don’t think you can do that with the standard filter.
You’ll have to write your custom filter and lazy-load it.
Something like (not tested!):

angular.module("app").filter("onOrDimmed", function() {
  return function (input) {
    if (input instanceof Array) {
      return input.filter(function (el) {
        return el.state === 'ON' || parseInt(el.state) > 0;
      });
    }
  };
});

<div oc-lazy-load="['/static/onOrDimmed.filter.js']">
  <span>{{itemsInGroup(...) | onOrDimmed}}</span>
</div>

[Andrew_Pawelski]

Thanks for trying @ysc - verbatim doesn’t work - a bit beyond my abilities - will have to give it a miss

[dastrix80 (Kris K)]

Can someone assist in helping me add the Dashboard name into the Menu bar above? rather than it being blank?

[Manbearpig73 (Johan Potgieter)]

Is there any way to disable the side drawer entirely? I know you can replace it with a custom widget but I want to use my own menu and not the drawer. Is this possible?