Hübsches Popup für Device Details

[KernSani]

Ich habe mal wieder gebastelt... und ich sage es vorneweg: Braucht vermutlich kein Mensch, aber mir macht's Spaß und vielleicht findet ja doch jemand gefallen daran und will vielleicht sogar mitbasteln (gerade meine CSS Fähigkeiten sind doch eher eingeschränkt) und oder Ideen einbringen.
Grundidee der ganzen Geschichte ist, dass man mit einem einfachen Click am Device ein Popup bekommt, in dem wichtige Infos zum Device nett dargestellt werden. Das Ganze ist recht generisch und flexibel erweiterbar.
Um das zu erreichen fummelt ein Javascript zunächst einen kleinen zusätzlichen Button in die Device-Zeile aller Geräte die entweder das "genericDeviceType"-Attribut haben, oder ein "specificDeviceType"-Attribut.
Du darfst diesen Dateianhang nicht ansehen.
Ein Gerät kann auch beide Attribute haben, in diesem Fall "erbt" das spezifische Gerät vom generischen und kann dieses erweitern oder überschreiben.
Beim Klick auf diesen neuen Button kommt ein Popup mit Details, also einer netten Darstellung verschiedener Readings und ggf. einem Chart der letzten 24h. Für die bekannten generischen  Devicetypes gibt es schon vorgefertigte Popups, das ist aber wie gesagt recht flexibel erweiter- und änderbar.

Das Popup besteht aus mehreren Bereichen (ein Kopf, ggf. mit grafischer Darstellung des Status, ein "Body" mit den Details und einer Fußzeile).
Jeder dieser Bereiche kann für die oben genannten "Hierarchiebenen" für den "specific Devicetype, den "generic" Devicetype oder ganz generisch gestaltet werden.
Das kann für viele Fälle als Konfiguration erfolgen, für spezifischere Fälle  können eigene Perl-Subs erstellt werden.

Du darfst diesen Dateianhang nicht ansehen. Du darfst diesen Dateianhang nicht ansehen. Du darfst diesen Dateianhang nicht ansehen.

Um das Ganze zum Laufen zu bringen ist ein bisschen Vorarbeit notwendig.
1. Die angehängt .js und .css Dateien iregendwo unter fhem/www ablegen und über die FHEMWEB-Instanz (Attribute Javascripts bzw. CssFiles) einbinden
2. Die beiden chart.js (für die "History"-Darstellung herunterladen, ebenfalls ablegen und einbinden (wie in 1.):
  https://cdn.jsdelivr.net/npm/chart.js
  https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js
3. GGf. sin ein paar Abhängigkeiten zu installieren, bei mir waren das (auf einem relativ jungfräulichem Testsystem):
  cpan install DateTime::Format::Human::Duration
  cpan install Hash::Merge
4. SVG für die drei Pünktchen unter /fhem/images/box/regular/bx-dots-horizontal.svg ablegen
5. Modul unter fhem/FHEM ablegen und reload 69_DeviceDetails
6. (Optional) Anlegen eines globalen User-Attributes "specificDeviceType".

Dann kann das Modul mit define <name> DeviceDetails angelegt werden. Spätestens nach eine Browser Refresh sollte bei den genericDeviceTypes ein neues Icon am Ende der Zeile zu sehen sein und die vordefinierten Popups benutzbar sein.

Anmerkung: Für die "History Charts" ermittelt das Modul automatisch eine Log-DB-Instanz (Filelog wird aktuell nicht unterstützt). Das Ganze funktioniert also nur zuverlässig, wenn genau ein Device vom Typ DbLog existiert. Das kann ich aber gerne anpassen, wenn Bedarf besteht.

Das Module hat nur ein paar wenige Attribute:
excludeRooms: Komma-separierte Liste von Räumen, die ignoriert werden sollen
excludeDevices: Komma-separierte Liste von DevSpecs für Devices, die ignoriert werden sollen (ich ignoriere z.B. Structures, weil da i.d.R. wenig sinnvolles zu finden ist) 
custConfig: Die eigene Konfiguration im JSON-Format. Dazu schreibe ich bei Interesse gerne noch was (als erster "hint" hilft vielleicht die default Configuration, (siehe Get-Kommandos).

Get-Kommandos
config: Stellt die aktuelle Konfiguration (Kombination aus Standard-Konfiguration und  Custom Config) dar.
custConfig: Eine pretty-printed Version der custConfig

Disclaimer: Das Ganze ist "work in progress" und möglicherweise wird sich da noch ein bisschen was ändern (vor allem was die JSON-Struktur betrifft. Da kann es in Zukunft "breaking" changes geben).

#  Changelog:
#  0.01.01 - 2023-11-02 Bug Fixes and Extensions to the still undocumented custConfig
#  0.01.00 - 2023-11-01 Initial beta Release

[slor]

Nice!