Übersicht der Batterien und Füllstände, Prozent senkrecht neben dem Icon

[Torxgewinde]

Hallo,
Im Wiki gibt es zu uiTable Hinweise wie man den Füllstand von Batterien hübscher darstellen kann. Was mir noch fehlte, war den Alias der Geräte angezeigt zu bekommen und der Füllstand in Prozent. Da es dann doch nicht so einfach war, wollte ich die Definition hier mal teilen:

Code Auswählen Erweitern


defmod di_BatterienUebersicht DOIF ##
attr di_BatterienUebersicht room Batterien
attr di_BatterienUebersicht uiTable {\
  package ui_Table;;\
\
  sub BattIcon {\
    my($val)=@_;;\
my $icon;;\
if ($val==0) {\
  $icon="measure_battery_0";;\
} elsif ($val<=25) {\
  $icon="measure_battery_25";;\
} elsif ($val<=50) {\
  $icon="measure_battery_50";;\
} elsif ($val<=75) {\
  $icon="measure_battery_75";;\
} else {\
  $icon="measure_battery_100";;\
}\
\
my $output = "<style>";;\
$output .= "  .container {position: relative;;}";;\
$output .= "  .centered {font-size: 10px;; position: absolute;; top: 50%;; left: 0;; transform: translate(-50%, -50%) rotate(-90deg);; color: #fff;; background-color: rgba(0,0,0, 0.3)}";;\
$output .= "</style>";;\
$output .= "<div class=\"container\">";;\
$output .= ::FW_makeImage("$icon\@".hsv ($val,0,100,0,120,90,100),"","mysvg");;\
$output .= " <div class=\"centered\">$val%</div>";;\
$output .= "</div>";;\
\
    return($output);;\
  }\
  \
  sub DevAliasOrName {\
  my($DEVICE)=@_;;\
  return(main::AttrVal($DEVICE,"alias",$DEVICE));;\
  }\
}\
\
## Tabellendefinition\
FOR(::AggrDoIf('@','Thermometer','battery'),"<a href=/fhem?detail=$_>".DevAliasOrName("$_")."</a>"|BattIcon([$_:battery]))\
"<a href=/fhem?detail=NochEinEinzelnesDevice>".DevAliasOrName("NochEinEinzelnesDevice")."</a>"|BattIcon([NochEinEinzelnesDevice:battery])


HTH!

[LutzG]

Hallo Torxgewinde,

vielen Dank für den Code! Diese Darstellung finde ich echt gut!  Leider hab ich mit Copy & Paste den Code nicht zum laufen bekommen, ich habe aber auch keine Device mit "Thermometer". Darum hab ich Mal mit 3 dummys gespielt. 

Ich habe hier ein paar Sonoff, die sehr unzuverlässig sind, darum habe ich noch eine Anzeige dazu gebastelt, ob die dummys (später Mal Thermometer) überhaupt online sind. Ich habe das Reading "batteryPercent" genommen, da ich gelernt habe, dass "battery" nicht der Standard ist. 

...Warum ich bei den Icon keine nehmen konnte, die mit einer Zahl anfangen (Beispiel: 10px-kreis-gruen), habe ich allerdings nicht verstanden. 

Code Auswählen Erweitern

$iconn="rc_dot\@green";;\

Um die 3 Dummys und das Doif anzulegen, die im Raum "Test->Batterie1" landen, ein Dummy anlegen:

Code Auswählen Erweitern

defmod cSensor1 dummy

RAW Modus aufrufen (von dem Dummy) und das alles rein kopieren: + "Execute commands"

Code Auswählen Erweitern

defmod cSensor1 dummy
attr cSensor1 alias Sensor1 mit Alias
attr cSensor1 readingList batteryPercent availability
attr cSensor1 room Test->Batterie1
attr cSensor1 setList batteryPercent:slider,0,1,100 availability:online,offline
attr cSensor1 stateFormat Batterie-Ladung: batteryPercent % - Zustand: availability
attr cSensor1 webCmd batteryPercent:availability

setstate cSensor1 Batterie-Ladung: 25 % - Zustand: offline
setstate cSensor1 2023-01-18 20:54:22 availability offline
setstate cSensor1 2023-01-19 19:32:31 batteryPercent 25


defmod cSensor2 dummy
attr cSensor2 readingList batteryPercent availability
attr cSensor2 room Test->Batterie1
attr cSensor2 setList batteryPercent:slider,0,1,100 availability:online,offline
attr cSensor2 stateFormat Batterie-Ladung: batteryPercent % - Zustand: availability
attr cSensor2 webCmd batteryPercent:availability

setstate cSensor2 Batterie-Ladung: 50 % - Zustand: online
setstate cSensor2 2023-01-18 01:44:38 availability online
setstate cSensor2 2023-01-18 01:50:25 batteryPercent 50


defmod cSensor3 dummy
attr cSensor3 readingList batteryPercent availability
attr cSensor3 room Test->Batterie1
attr cSensor3 setList batteryPercent:slider,0,1,100 availability:online,offline
attr cSensor3 stateFormat Batterie-Ladung: batteryPercent % - Zustand: availability
attr cSensor3 webCmd batteryPercent:availability

setstate cSensor3 Batterie-Ladung: 75 % - Zustand: offline
setstate cSensor3 2023-01-18 01:44:40 availability offline
setstate cSensor3 2023-01-18 01:50:07 batteryPercent 75


defmod di_BatterienUebersicht1 DOIF ##
attr di_BatterienUebersicht1 comment https://wiki.fhem.de/wiki/DOIF/uiTable_Schnelleinstieg#hsv-Funktion_f.C3.BCr_Farbskalierungen\
https://forum.fhem.de/index.php/topic,131349.msg1255415.html#msg1255415
attr di_BatterienUebersicht1 event-on-change-reading .*
attr di_BatterienUebersicht1 room Test->Batterie1
attr di_BatterienUebersicht1 uiTable {\
  package ui_Table;;\
\
  sub BattIcon {\
my($val)=@_;;\
my $icon;;\
if ($val==0) {\
  $icon="measure_battery_0";;\
} elsif ($val<=25) {\
  $icon="measure_battery_25";;\
} elsif ($val<=50) {\
  $icon="measure_battery_50";;\
} elsif ($val<=75) {\
  $icon="measure_battery_75";;\
} else {\
  $icon="measure_battery_100";;\
}\
\
my $output = "<style>";;\
$output .= "  .container {position: relative;;}";;\
$output .= "  .centered {font-size: 10px;; position: absolute;; top: 50%;; left: 0;; transform: translate(-50%, -50%) rotate(-90deg);; color: #fff;; background-color: rgba(0,0,0, 0.3)}";;\
$output .= "</style>";;\
$output .= "<div class=\"container\">";;\
$output .= ::FW_makeImage("$icon\@".hsv ($val,0,100,0,120,90,100),"","mysvg");;\
$output .= " <div class=\"centered\">$val%</div>";;\
$output .= "</div>";;\
\
    return($output);;\
  }\
\
  sub DevAliasOrName {\
  my($DEVICE)=@_;;\
  return(main::AttrVal($DEVICE,"alias",$DEVICE));;\
  }\
\
  sub livingIcon {\
  my($value)=@_;;\
  my $iconn;;\
  if ($value  eq "online") {\
    $iconn="rc_dot\@green";;\
  } else {\
    $iconn="rc_dot\@red";;\
  }\
  return(ICON("$iconn"));;\
  }\
}\
\
## Tabellendefinition\
FOR(::AggrDoIf('@','cSensor.*','batteryPercent'),"<a href=/fhem?detail=$_>".DevAliasOrName("$_")."</a>"|BattIcon([$_:batteryPercent])|livingIcon([$_:availability]))\
"<a href=/fhem?detail=NochEinEinzelnesDevice>".DevAliasOrName("NochEinEinzelnesDevice")."</a>"|BattIcon(120)|livingIcon("online")

setstate di_BatterienUebersicht1 initialized
setstate di_BatterienUebersicht1 2023-01-17 22:46:50 cmd 0
setstate di_BatterienUebersicht1 2023-01-17 22:46:50 mode enabled
setstate di_BatterienUebersicht1 2023-01-17 22:46:50 state initialized


Viel Spaß beim Spielen!

Viele Grüße, Lutz