HABPanel multi-instance widget (Device pinger)

Apps & Services HABPanel
,
#1

Hi,

openHAB is a great project :slight_smile: thanks a lot guys.

I want to make a widget for a network binding. I want to display the result of the network binding and display like latency, last seen (datetime and also in sec) and online in one widget.

For one device it works.

more or less… maybe not elegant. lol

Now i wanted to make a knob (gauge) to display the ping time in ms.

if i hardcode the “item-name” it works.
image

The gauge works and the texts.

how can i use the Device Latency (item Device_192_168_000_031_latency) in my knob? Then i can reuse the template/widget for different devices and i just always change the items.

image
image600×818 23.5 KB

<div ng-init='device_latency_knob={“name”: “{{config.device_late}}”,
“sizeX”: 3,
“sizeY”: 2,
“item”: “{{config.device_late}}”,
“type”: “knob”,

so how use the item that was selected ?

It works in my text field perfectly… but not in my gauge… somehow it looks like that it messes up the html code but i couldnt figure out why … i am already on the 5 google search result pages :frowning:

thanks a lot and stay safe please
stefan

#2

i figured it out maybe…
it should be:
… “item”: config.device_late,

I also copied the original know code back and now it works. :man_shrugging:

#3

image
How do you do that?
Show the code :slight_smile:

#4

i just make a image of my SD card to be safe :slight_smile:

#5

image

#6 
<div class="row">
  <div class="col-xs-4" ng-style="{'color': (config.color) ,'font-size': (config.font)}">Device</div>
  <div class="col-xs-4, text-left" ng-style="{'color': (config.color) ,'font-size': (config.font)}"><strong>{{ngModel.name}}</strong></div>
  
</div>
<div class="row">
<div class="col-xs-4" ng-style="{'color': (config.color) ,'font-size': (config.font)}">Online</div>
<div class="col-xs-4, text-left" ng-style="{ color: itemValue(config.device_online)=='OFF'?'red':'green' }" ng-style="{'font-size': (config.font)}"><strong>{{itemValue(config.device_online)}}</strong></div> 
	
</div>
<div class="row">
   	<div class="col-xs-4" ng-style="{'color': (config.color) ,'font-size': (config.font)}">Latency</div>
<div class="col-xs-4, text-left">{{itemValue(config.device_late)}} ms</div>
</div> 
<div class="row">
   	<div class="col-xs-4" ng-style="{'color': (config.color) ,'font-size': (config.font)}">Last seen</div>
  <div class="col-xs-4, text-left" ng-style="{'color': (config.color) ,'font-size': (config.font)}, text-left">{{itemValue(config.current_epoche)-itemValue(config.device_epoche)}} sec.</div>
</div>
<div class="row">
  	<div class="col-xs-4" ng-style="{'color': (config.color) ,'font-size': (config.font)}">Last seen</div>	
<div class="col-xs-4, text-left" ng-style="{'color': (config.color) ,'font-size': (config.font)}, text-left">{{itemValue(config.device_lastseen) | date:'yy-MM-dd HH:mm'}}</div>
</div>      

<div   ng-init='device_latency_knob={"name": "Tutorial",
                "sizeX": 3,	
                "sizeY": 2,
                "item": config.device_late,
                "type": "knob",
                "row": 0,
                "col": 4,
                "floor": 0,
                "ceil": 50,
                "step": 1,
                "unit": "",
                "startAngle": -150,
                "endAngle": 150,
                "barWidth": 5,
                "trackWidth": 10,
                "barColor": "#10C0FF",
                "prevBarColor": "#FF33CC",
                "trackColor": "#556677",
                "barCap": 0,
                "trackCap": 0,
                "scaleEnabled": true,
                "scaleType": "dots",
                "scaleColor": "#FF9933",
                "scaleQuantity": 10,
                "skinType": "simple",
                "skinWidth": 10,
                "skinColor": "#FFCC00",
                "skinSpaceWidth": 10,
                "ranges": [
                    {
                        "min": 0,
                        "max": 20,
                        "barColor": "#00FFFF",
                        "$$hashKey": "object:6515"
                    },
                    {
                        "min": 20,
                        "max": 50,
                        "barColor": "#FF9933",
                        "$$hashKey": "object:6700"
                    },
          					{
                        "min": 51,
                        "max": 3000,
                        "barColor": "#FF0000",
                        "$$hashKey": "object:6700"
                    }
                ],
                "displayPrevious": true,
                "$$hashKey": "object:86",
                "rangesEnabled": true,
                "rangesTextColorMatching": true,
              	"subText": {
                    "enabled": true,
                    "text": "ms",
              			"color": "black"
                },
              	"readonly": true
        }'>
 		<div style="width:150px">
    		<div>
          	<div class="col-xs-8"><widget-Knob ng-model="device_latency_knob" /></div>
    		</div>
   			 </div>
  	</div>
#7

I created individual things from the network binding

Then i created a rule to calculate the epoche time of the current date and the time of the lastseen of the device.

That is how i calculate the last seen difference.

i just couldn’t figure out the divs for the knob.

whenever i play around there it destroys the format.

I would have liked to center it.

Also it should show ms underneath the knob. i put it in, but it doesnt show :frowning:

so… my question is…
how does that whole widget thing work together?

can i put all of it (like it is) into a json file and import it?

I am scared my raspberry breaks and my widget is gone then :frowning:

please give me some points on how to improve it :slight_smile:

#8

config.device_epoche
and
config.device_lastseen

is it not the same thing?

config.current_epoche

What is it, current time? How is this item updated?

#9

config.device_epoche That is the “last seen time stamp 20200428 08:24” from the network binding converted to seconds (or milliseconds from the 1.1.1970)

config.device_lastseen That is the "last seen time stamp 20200428 08:24 from the network binding

config.current_epoche That is the current date converted to epoche for the difference in last seen calculation (depends also how often to ping the device

Epoch:
The Unix epoch is the time 00:00:00 UTC on 1 January 1970. There is a problem with this definition, in that UTC did not exist in its current form until 1972; this issue is discussed below. For brevity, the remainder of this section uses ISO 8601 date and time format, in which the Unix epoch is 1970-01-01T00:00:00Z.

Thing:

Thing network:pingdevice:AP01 "Device_031" [ hostname="192.168.0.31", refreshInterval=1000]

Item:

Switch     Device_192_168_000_031_online    "AP01 online"                        <network>   { channel="network:pingdevice:AP01:online"}
Number     Device_192_168_000_031_latency   "AP01 latency"                       <network>   { channel="network:pingdevice:AP01:latency"}
DateTime   Device_192_168_000_031_lastseen  "AP01 last seen"                     <network>   { channel="network:pingdevice:AP01:lastseen"}
Number     Device_192_168_000_031_epoche    "AP01 Epoche"

Rule
rule "Epoche calculation"

when

    Item Device_192_168_000_031_lastseen changed

then

    sendCommand(Date_Epoche, new DateTime(Date.state.toString).millis/1000)

    sendCommand(Device_192_168_000_031_epoche, new DateTime(Device_192_168_000_031_lastseen.state.toString).millis/1000)

    sendCommand(Device_192_168_000_032_epoche, new DateTime(Device_192_168_000_032_lastseen.state.toString).millis/1000)

    sendCommand(Device_192_168_000_033_epoche, new DateTime(Device_192_168_000_033_lastseen.state.toString).millis/1000)

    sendCommand(Device_192_168_000_034_epoche, new DateTime(Device_192_168_000_034_lastseen.state.toString).millis/1000)

    sendCommand(Device_192_168_000_047_epoche, new DateTime(Device_192_168_000_047_lastseen.state.toString).millis/1000)

    sendCommand(Device_192_168_000_082_epoche, new DateTime(Device_192_168_000_082_lastseen.state.toString).millis/1000)

end

I am not sure if there is an easier way to create the things and make the rules :thinking: :thinking: :man_shrugging: :man_shrugging:

#10

Did not see where and when it is updated?

#11

yes i know that … but its a timestamp 20200420 08:30 for example.

I couldnt figure out how to subtracts.

So i convert both dates (today and lastseen) to milliseconds and subtract.

#12

Apparently you did not understand me (my English is very bad). The current time should be constantly updated to show how much time has passed. Therefore, I asked where the current time is updated. This option comes to my mind: crowns once a second, until a minute passes and then crowns once a minute.
I want to make for widgets a display of how long ago the data was updated, for example, for temperature, etc.

#13

i created an item for it

sendCommand(Date_Epoche, new DateTime(Date.state.toString).millis/1000)
#14

Thank! I will sort this out.

#15

or maybe a rule for it ?

i trigger mine when ever last seen time stamp from device changed

#16

Or I don’t understand what you are doing, or you need something like this:

rule "CurTime (sec)"

when

    System started or

    Time cron "0/1 * * * * ? *" //or

    //Time cron "0 0/1 * * * ? *"

then

    CurTime_Sec.sendCommand(new DateTime().millis/1000)

    logInfo("Rule","<-- " + CurTime_Sec.state.toString)

end