Custom Widget: Informational Header

Tags: #<Tag:0x00007fc3ee2f3938>

Informational Header

This is a HABPanel widget. It displays customizable, interactive notification items after the dashboard name.

image

Installation

-or-

  • Download informational-header.widget.json
  • Import it from the HABPanel settings interface

Configuration & Usage

  • Notifications should be separate items and be member of a group you set in <Notifications Group Name>.
  • Style the notification with Bootstrap3 button classes by adding one of these classes to your item’s tags: “btn-default”, “btn-primary”, “btn-success”, “btn-info”, “btn-warning”, “btn-danger”.
  • Give the buttons an additional glowing animation by adding “glow” to the item’s tags in addition to the btn-color-classes.

See examples/notifications.items for a working example.

Interactivity & Rules

In the settings of the widget, you can choose a command to be sent, when you click or tap the notification. This can be used to fire rules that listen to received command OFF commands.

For example, you could stop a flood alarm, turn off your whole-house-audio system, reset energy meters or anything else that may need context-sensitive interaction.


Thanks to @ysc for the great work and giving me a great starting point in the HABPanel Notification Center Thread

14 Likes

Very clean solution and a great potential for a lot of use cases, nice!
Also I was wondering how you got the icons displayed, didn’t realize you could put emojis in item labels :slight_smile: (https://github.com/gersilex/informational-header/blob/master/example/notifications.items for the curious)

1 Like

I replaced the header of my dashboard, but now the button to edit the dashboard is gone, also the clock and the three small buttons on the upper right side.

Can you tell me, how i can use your dashboard and still be able to edit the dashboard?

My dashboard name is “home” and when i see the dashboard, i simply click to the name “home” in the upper left and i get a pencil, so i can edit widgets and add new ones. But now when i click on “home” no pencil anymore.

1 Like

From here:

1 Like

Thank you! Really simple, when you know how…

Great! Thank you for your work!
A little suggestion: For greater flexibility, I think it would be nice to change the items label on demand, as discussed here.

Because we replaced the header, the old functionality of the header is missing. To still edit, I use one of these ways:

  • Go to the main page index.html (where the list of all your dashboards is), click on the gear icon to enter edit mode, then click on your dashboard. You will enter the dashboard and still be in edit mode

or

  • In the URL of your dashboard, replace /view with /edit

(edit: oops, too late, already answered)

If you want to have those buttons, you have to put that code into the custom widget.

@ysc would it make sense to have an angular “variable” that resolves to the same html like the buttons and time (basically everthing that has the pull-right class in the original header) ?

The same would be interesting for the edit button. I tried to fire the command to toggle edit mode, but I could not find the right ng scope for this.

If anyone is interested in putting this into the custom widget, please contribute back to the github repo so we can all use it :slight_smile:

Ok. That doesn’t work, because the label of an item seems to be cached by the browser while loading the HABpanel site. So the notification is always the item label from that time, no matter if you change it in-between or not.

Yes it makes sense to move this “toolbar” in a directive, so it could be reused in your custom template (i.e. you would have to add something like that in your widget:

<dashboard-toolbar class="pull-right"></dashboard-toolbar>

Not that hard to do, I’ll keep that in mind.

1 Like

Hello,

did someone get the original header inplimented? I need the full screen feature.

Hi, I am looking for some examples … help is very much appreciated. Thanks…

You can find the path to the examples on GitHub: https://github.com/gersilex/informational-header/tree/master/example

Does this help?

Yes! Thx!! :sweat_smile:

Thanks @gersilex for the nice widget.
I imported this to my habpanel yesterday and I am trying to play with it a little bit.
Currently in my house I have temperature sensors in different rooms and what I am trying to do is to show a notification (with label and current temperature value) if the temperature is higher than a certain value.

I have succeeded in the first part (showing notification) but couldn’t be able to show the value.

Note: I tested this on the high temperature (above 27)

my items file:

Group:Switch:OR(ON, OFF) notifications "Notification group"
String  notification_temperature_high           "🌡️ Temperature is high [%s]"         (notifications)     ["glow", "btn-warning"]
Switch  notification_temperature_low            "🌡️ Temperature is low"          (notifications)     ["glow", "btn-info"]

my rule file:

rule "temp notification"
when
    Item test_room_temp changed
then
    if (test_room_temp.state > BR2AC_HIGH_TEMP.state)
    {
        notification_temperature_high.postUpdate(test_room_temp.state)
        notification_temperature_low.postUpdate(OFF)
    }
    else if (test_room_temp.state < BR2AC_LOW_TEMP.state)
    {
        notification_temperature_low.postUpdate(ON)
        notification_temperature_high.postUpdate(OFF)
    }
    else
    {
        notification_temperature_high.postUpdate(OFF)
        notification_temperature_low.postUpdate(OFF)
    }
end

(posted an answer in separate thread)

Hi
I followed the instructions, but nothing appears in the header of habpanel.
I checked in google chrome the elements and found this:

<div class="pull-right" style="margin-left: 0.25em; display: inline-flex;">
      <!-- ngRepeat: notification in itemsInGroup(config.notifications_group_name) -->
  </div>

Could it be that this no longer works on 2.5.0M3 ?

Hey can you please show your settings of the widget and ensure that some items of your group are in the state “ON” (or the one you configured)?

I did not test it with the mentioned version, but will do mid next week.

I only tested with one item (Notification_husqvarnaPosition)

state:

openhab> smarthome:items list | grep notifications                                                                                                           
Notification_husqvarnaPosition (Type=SwitchItem, State=ON, Label=Rasenmäher Diebstahlalarm, Category=null, Tags=[btn-danger, glow], Groups=[notifications])

item/group:

Group:Switch:OR(ON, OFF)    Notifications
Switch		Notification_husqvarnaPosition			"Rasenmäher Diebstahlalarm"			(notifications)		["glow", "btn-danger"]

and here are the settings from habpanel:

Sorry, my fault, I had a typo in the group (lower/upper case) … I just saw it as I wrote the post before.
After correcting this, everything is fine.

Haha great to hear that! cheers!