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