How to store and display a url for an item in HABPanel

Apps & Services HABPanel
1

Hi All,

I use the network binding to monitor a bunch of nodeMCU/tasmota devices for up/down, and I’d like to be able to have a template in HABPanel to click on them to bring me to the device.

I have an item defined like this using .items files:
Switch Z_iot_barn_av_online "Tasmota Barn AV" <online> (gMonitored) { channel="network:pingdevice:iot_barn_av:online" [url="http://192.168.6.143"]}

and I was hoping a template would be as simple as this:

<div class="row" ng-repeat="item in itemsInGroup('gMonitored')">
  <div class="col-xs-8 text-right">{{item.label}}{{item.url}}</div>
  <div class="col-xs-4 text-left" ng-style="{ color: itemValue(item.name)=='ON'?'green':'red' }">
    {{itemValue(item.name)}}
  </div>
</div>

Where it would show the url next to the name (which I would clean up after getting it to work). Is this possible?

Sorry - I don’t know how to make the item color code properly in the post.

2

I’ve figured out how to read the data from the REST API, but I’m not sure that HABPanel passes the metadata parameter in the query?

image
image1900×1230 190 KB

3

I know that dashboards in HABPanel can be addressable, but as far as I can tell from the docs, individual items cannot.

4

Bummer. Any thoughts on an alternative way to display custom metadata in a template or widget in that case?

5

Not without forking HABPanel, then you can modify the /rest/items call to include the metadata namespaces you need.
If you don’t need them anywhere else though, and yes it’s ugly, but you can hardcode an object with the URLs with ng-init and use that:

<div ng-init="urls = {
                Z_iot_barn_av_online: 'http://192.168.6.143',
                Another_Item: 'http://192.168.6.144,
              }">    <!-- ^^ add to the above as necessary -->
  
  <div class="row" ng-repeat="item in itemsInGroup('gMonitored')">
    <div class="col-xs-8 text-right">{{item.label}}: {{urls[item.name]}}</div>
    <div class="col-xs-4 text-left" ng-style="{ color: itemState(item.name)=='ON'?'green':'red' }">
      {{itemState(item.name)}}
    </div>
  </div>
</div>

I use ```xml

6

Thanks for both tips… the first one is less kludgy than I’d like, but not as bad as as what I’m doing now…