HABPanel Notification Center

Tags: #<Tag:0x00007f2fafd45bd0> #<Tag:0x00007f2fafd45a68>

Hey there!

I’m looking for ways to send persistent notifications to HABPanel, ideally read from an item set by openHAB.

Doing a quick HTML mock on top of the HABPanel on demo.openhab.org it could look like this:

You already see, this is plain bootstrap CSS, so the possibilities to design it are already included in HABPanel.

I pushed those notification DIVs betwwen the header and the content. Of course, without being a core component, this won’t be possible and we should use a custom widget or template instead.

The plan is to be able to send notifications to HABPanel and stack them, if there are multiple notifications. Think of it like the Android notification bar.

Notifications should also be sortable and removable from openHAB rules.

Has anybody seen an approach for this somewhere? Should we serialize a json object into an openHAB item to add aatributes like priority, severity and text content?

I’m happy if you could point into the right direction or - even better - jump on the train and contribute with your programming skills. :slight_smile:

6 Likes

Another thing just came into my mind. This could also be an external application and displayed inside a frame widget.

Nevertheless I need help with this, but I have started to learn the common MEAN (MongoDB, Express.js, Angular, NodeJS) stack for this kind of applications.

I would love to see this being implemented. Do you also talk about quick notifications like toasts? I also created a Community entry for it.
+1

I suppose maintaining some rule(s) to write alerts into a JSON array stored into an item would work, as well as dismissing alerts.

On the HABPanel side, there is a way to replace dashboard headers by custom widgets in recent snapshots, so you could develop a widget like this:

<h2>{{ngModel.name}}
  <!-- replace the counters below by actual values (items updated with server rules?) and add
       ng-ifs to display the labels only if necessary... -->
  <small style="margin: 5px; position: absolute;">
    <div class="label label-danger">1</div>
    <div class="label label-info">2</div>
  </small>
</h2>
<!-- replace the inner array by e.g. $eval(itemState('Alerts')) where Alerts contains a JSON object
     example: ng-repeat="alertlist in [$eval(itemState('Alerts'))]".
     This is to recompute the evaluation every time the item is changed while avoiding infinite digests -->
<div style="margin-top: 10px" ng-repeat="alertlist in [
                [
	                { id: 123, type: 'info', message: 'The doorbell rang 3 times while you were away.' },
	                { id: 456, type: 'info', message: 'Trash is due tomorrow morning.' },
	                { id: 789, type: 'danger', message: 'The alarm was triggered on 30.10.2017 21:25!' }
                ]
     ]">
  <div uib-alert ng-repeat="alert in alertlist"
       type="{{alert.type}}" close="sendCmd('CloseAlert', alert.id)">{{alert.message}}</div>
  <!-- you will need to implement a rule removing the corresponding object from the JSON array
       in the Alerts item when CloseAlert receives a command -->
</div>

and use it as the header (you would have to configure all dashboards with this widget as the header), it will look like this:

I’m not familiar enough with Xtext to help you develop the server-side JSON manipulation, but maybe you could use JavaScript in a script action of the new rules engine like I did for parsing intents from Snips

Good luck! :slight_smile:

3 Likes

That is an amazing starting point. Thanks. I’ll do my best, improve and repeat :smiley:.

Something like that would be awesome. I bet many people could use such a feature for habpanel. Together with the Habpanel viewer tablets could act as information screens

I released this as a first result.

1 Like