[FHEMWEB Mod] Textfeld für direkten Device aufruf!

[Phill]

Hier ein kleiner FHEMWEB Mod der ein Textfeld inklusive Autocomplete erzeugt, mit dem das Aufrufen eines Devices erleichtert wird. Klickst du noch? 

In der FHEMWEB Instanz dem Attribut JavaScripts folgedes hinzufügen

Code Auswählen Erweitern

pgm2/fhem_details.js
fhem_details.js vom Anhang in Verzeichnis www/pgm2 kopieren
Datei fhem_devdetails.js in Verzeichnis www/pgm2 anlegen und Rechte anpassen.

Code Auswählen Erweitern

touch fhem_devdetails.js
chown -R $(stat . -c %u:%g) fhem_*details.js

In der gewünschten FHEMWeb-Instanz das Attribut JavaScripts ergänzen, die Fehlermeldung kann ignoriert werden:

Code Auswählen Erweitern

pgm2/fhem_details.js

Das Notify für die Befüllung der Autocomplete-JS-Datei anlegen:

Code Auswählen Erweitern

define writeDevices2JS notify global:(DEFINED|RENAMED|DELETED|INITIALIZED).* { {open my $FH, ">", "./www/pgm2/fhem_devdetails.js" or die "Could not open file $!";; print $FH 'var defs=["'.join('","', sort(keys %defs)).'"]';; close $FH } }

Das Notify einmal ausführen lassen:

Code Auswählen Erweitern

trigger global DEFINED

Im Browser Cache leeren oder die Seite mit [STRG]+[F5] neu laden und über ein Textfeld erfreuen, mit dem man direkt zu dem eingegebenen Device gelangt.

Wer das ganze in die Kommandozeile integrieren möchte kann sich dieses Script anschauen. link Danke ThoTo



Wer es nur kurz mal testen will, kann folgendes in der Kommandozeile eingeben.

Code Auswählen Erweitern

{$data{FWEXT}{show} = {NAME => "Details:<form><input style='width:97%' name='detail' onmouseover='\$(this).parents(\"a\").removeAttr(\"href\").unbind(\"click\")'></input></form>", LINK=>"/"} }

Um es wieder zu deaktivieren folgendes ausführen.

Code Auswählen Erweitern

{$data{FWEXT}{show} = undef}


Gruß

Update: 30.01 Hab mal die select-Funktion wie bei ThoTo reingenommen. Dadurch wird direkt beim auswählen geladen.

[Fixel2012]

Hi Phil,

wärst du so nett und Hängst noch ein Foto an und beschreibst, was dein "Hack" vereinfacht?

Habe das ehrlich gesagt so nicht ganz verstanden.

Habe gerade kein Zugriff auf Fhem, um es zu testen. 

[ThoTo]

Hier ein kleiner HTML Hack. Einfach ausführen und über ein Textfeld erfreuen, mit dem man direkt zu dem eingegebenen Device gelangen kann.

Gibts das auch mit Autocomplete? 

LG Thomas

[Phill]

@Fixel2012: Bild ist da, und vereinfacht oder verkürzt wird der weg zu einer Detailansicht eines Devices. Einfach den Namen in das Textfeld eingeben.

@ThoTo: Das wäre cool. Zumindest tauchen bei mir die bereits eingegebenen im Dropdown auf.

[RoBra81]

Hallo,

ich habe es auch mal probiert, aber irgendwie war es bei mir (aktuelle FHEM-Stand) ein parent() zu wenig...

Ronny

[Phill]

Komisch? Na dann eben parents("a").

[Fixel2012]

Habe es soeben getestet. Ist echt nützlich.

Vorher habe ich immer ein list <GeräteName> und bin dann auf das Gerät gegangen.

So geht es noch schneller, Danke.

Autocomplete wäre echt mega! 

[Esjay]

Ist wirklich praktisch, wenn man jetzt noch die Breite irgendwie anpassen könnte, wäre es perfekt.

Grüße

[Phill]

So besser? Oder wie meinst du das?

[Esjay]

So besser? Oder wie meinst du das?

Perfekt!! Mit style='width:85%'  hat es genau die richtige Größe!
Grüße

[Fixel2012]

Mir ist aufgefallen, dass das Feld nach einem Restart wieder weg ist.

Wie kann ich dem entgegen wirken? Auf einen Neustart triggern, ist ja nicht das tollste. Gibt es bessere Lösungen?

[marvin78]

Mach doch ein notify auf GLOBAL:INITIALIZED und führe darin die Funktion aus.

[Fixel2012]

Mach doch ein notify auf GLOBAL:INITIALIZED und führe darin die Funktion aus.

Dachte, da gibt es eine Bessere Lösung  Dann mache ich es so.

[marvin78]

Verstehe nicht, was an der Lösung nicht "toll" ist. Einfach und effizient ist es.

[Benni]

Danke!
Praktisches Feature!

Kannst es ja Rudi mal zum Einbau in den (FHEMWEB-)Standard vorschlagen (ggf. per Attribut aktivier- und skalierbar).

Er ist ja anscheinend im Moment sowieso dabei an der Oberfläche zu optimieren

gb#

[FHEMAN]

Cool, ich bin auch ein großer Fan solcher Improvements
Ein wenig stört mich persönlich das weitere Editfeld, dass man die Namen case sensitiv und ausschreiben muss. Da muss man schon viel vom Namen im Kopf haben (hab ich nicht).
Ich behelfe mir mit folgendem CMDALIAS (abgeleitet vom grep Beispiel):

Code Auswählen Erweitern


define cmd.dev cmdalias dev .* AS {qx(grep -i \'define.*$EVENT\' *.cfg FHEM/99*.pm)}

Damit bekomme ich im CMD mittels "dev schlaf" bspw. alle Geräte / Defines  mit dem Namen .*[Ss]chlaf.*

Gruß
Ronny

[Benni]

Damit bekomme ich im CMD mittels "dev schlaf" bspw. alle Geräte / Defines  mit dem Namen .*[Ss]chlaf.*

Im wesentlichen dasselbe bekomme ich doch auch mit einem

Code Auswählen Erweitern

list .*[Ss]chlaf.*

Außerdem geht das CMDALIAS direkt auf die Dateien (u.a. fhem.cfg), funktioniert also nicht bei FHEM-Installationen, die stattdessen configDB verwenden.

gb#

[Fixel2012]

Im wesentlichen dasselbe bekomme ich doch auch mit einem

Code Auswählen Erweitern

list .*[Ss]chlaf.*

Außerdem geht das CMDALIAS direkt auf die Dateien (u.a. fhem.cfg), funktioniert also nicht bei FHEM-Installationen, die stattdessen configDB verwenden.

gb#

Ist allerdings wesentlich mehr Tipp-Arbeit!

[Benni]

Ist allerdings wesentlich mehr Tipp-Arbeit!

Mit folgendem cmdalias

Code Auswählen Erweitern

define ca_wlist cmdalias wlist .* AS {fhem 'list .*['.toupper(substr($EVENT,0,1)).tolower(substr($EVENT,0,1)).']'.substr($EVENT,1).'.*'}

kannst du das wieder ganz sparsam so aufrufen:

Code Auswählen Erweitern


wlist schlaf


[Phill]

Ich würde es so lösen, dann ist es komplett case insensitiv.

Code Auswählen Erweitern

define ca_wlist cmdalias wlist .* AS  {join("\n",grep { /.*$EVENT.*/i } keys %defs)}

[ThoTo]

jetzt ist es soweit perfektioniert, dass nur noch auto-complete fehlt 

[Phill]

Also gut, wenns so sehr gewünscht wird. Klick mich.

[RoBra81]

Also gut, wenns so sehr gewünscht wird. Klick mich.

Genial!

Gesendet von meinem SM-G935F mit Tapatalk

[Fixel2012]

Vielen Dank!

Klappt super!

[FHEMAN]

Nice!! Danke für die Bereitstellung!

Für die, die es nicht wissen: zum reinen Testen des Features genügt es, den Code in der Console (F12 im Browser drücken) auszuführen.

Und für meinen favorisierten Fall in der Standard Commandbar oben lautet der Code dann

Code Auswählen Erweitern


loadScript("pgm2/details.js", function () {
$("input[name=cmd]").autocomplete({source: defs});
});

(Kollidiert dann aber mit meiner Commandbar Historie)

So, wer macht noch das Schleifchen und das Dropdowngedöhns schick?

[Amenophis86]

Mal ne Frage, die cmdalias waren aber nur für die normale commandzeile und nicht für den HACK, oder?

[Benni]

Mal ne Frage, die cmdalias waren aber nur für die normale commandzeile und nicht für den HACK, oder?

Ja, wie das mit den cmdalias eben so ist

[Amenophis86]

ok, hab mich schon gewundert, wie das gehen soll

[ThoTo]

Anbei eine abgewandelte Version, die sich an die FHEM Kommandozeile hängt, Vorschläge werden ab dem 3. eingegebenen Zeichen angezeigt und müssen dann durch Click ausgewählt werden.
Das Notify berücksichtigt Aktionen der folgenden Typen: define, delete, rename, initialize (beim Start)

Die angehängte Datei fhem_details.js nach www/pgm2/ kopieren.
Im Verzeichnis www/pgm2/ zusätzlich eine fhem_devdetails.js anlegen und die Rechte für beide Dateien richtig setzen:

Code Auswählen Erweitern

touch fhem_devdetails.js
chown -R $(stat . -c %u:%g) fhem_*details.js

In der gewünschten FHEMWeb-Instanz das Attribut JavaScripts ergänzen, die Fehlermeldung kann ignoriert werden:

Code Auswählen Erweitern

pgm2/fhem_details.js

Das Notify für die Befüllung der Autocomplete-JS-Datei anlegen:

Code Auswählen Erweitern

define writeDevices2JS notify global:(DEFINED|RENAMED|DELETED|INITIALIZED).*(?<!_timer)$ { {open my $FH, ">", "./www/pgm2/fhem_devdetails.js" or die "Could not open file $!"; print $FH 'var defs=["'.join('","', sort(keys %defs)).'"]'; close $FH } }

Das Notify einmal ausführen lassen:

Code Auswählen Erweitern

trigger global DEFINED

Im Browser Cache leeren oder die Seite mit [STRG]+[F5] neu laden und in der Kommandozeile beginnen einen Devicenamen zu tippen 


LG Thomas

[Phill]

Find ich gut, allerdings habe ich mich an das zusätzliche Textfeld gewöhnt, und ich will auch nicht erst die Auswahl treffen müssen.

Ich habe mal deine Anleitung übernommen, und 2 kleine Änderungen vorgenommen.
1. Dem notify ein "sort" spendiert. Dadurch ist die Liste Alphabetisch sortiert.
2. Der focus wird beim Laden direkt auf das Textfeld gesetzt.

Gruß

[FHEMAN]

Könnte man es so erweitern, dass Autocomplete nur in Verbindung mit "list " losfeuert? List wäre ja ein ganz guter Indikator, dass man gerade ein Device sucht.

[RoBra81]

Anbei eine abgewandelte Version, die sich an die FHEM Kommandozeile hängt, Vorschläge werden ab dem 3. eingegebenen Zeichen angezeigt und müssen dann durch Click ausgewählt werden.
Das Notify berücksichtigt Aktionen der folgenden Typen: define, delete, rename, initialize (beim Start)

Die angehängte Datei fhem_details.js nach www/pgm2/ kopieren.
Im Verzeichnis www/pgm2/ zusätzlich eine fhem_devdetails.js anlegen und die Rechte für beide Dateien richtig setzen:

Code Auswählen Erweitern

touch fhem_devdetails.js
chown -R $(stat . -c %u:%g) fhem_*details.js

In der gewünschten FHEMWeb-Instanz das Attribut JavaScripts ergänzen, die Fehlermeldung kann ignoriert werden:

Code Auswählen Erweitern

pgm2/fhem_details.js

Das Notify für die Befüllung der Autocomplete-JS-Datei anlegen:

Code Auswählen Erweitern

define writeDevices2JS notify global:(DEFINED|RENAMED|DELETED|INITIALIZED).* { {open my $FH, ">", "./www/pgm2/fhem_devdetails.js" or die "Could not open file $!";;;; print $FH 'var defs=["'.join('","', keys %defs).'"]';;;; close $FH;;;;} }

Das Notify einmal ausführen lassen:

Code Auswählen Erweitern

trigger global DEFINED

Im Browser Cache leeren oder die Seite mit [STRG]+[F5] neu laden und in der Kommandozeile beginnen einen Devicenamen zu tippen 


LG Thomas

Die Funktion ist echt praktisch, aber leider funktioniert dadurch die History des Textfeldes im Browser nicht mehr - gibt's da eine Möglichkeit, dass die trotzdem funktioniert?

Ronny

[Phill]

Ja nimm meine Methode aus dem ersten Beitrag. 

[KernSani]

Ich finde die Funktion klasse, mich hat nur ein bisschen gestört, dass writeDevices2JS ein bisschen zu häufig triggert (nämlich bei jedem "at" oder "on-till-timer" o.ä.), daher habe ich das notify leicht abgewandelt:

Code Auswählen Erweitern

global:(DEFINED|RENAMED|DELETED|INITIALIZED).*(?<!_timer)$ { {open my $FH, ">", "./www/pgm2/fhem_devdetails.js" or die "Could not open file $!"; print $FH 'var defs=["'.join('","', sort(keys %defs)).'"]'; close $FH } }

[ThoTo]

Ich finde die Funktion klasse, mich hat nur ein bisschen gestört, dass writeDevices2JS ein bisschen zu häufig triggert (nämlich bei jedem "at" oder "on-till-timer" o.ä.), daher habe ich das notify leicht abgewandelt:

Danke für den Hinweis, habe mein ursprüngliches Posting angepasst.

LG Thomas

[Phill]

Aber ist das nicht nur Relevant, wenn man seine at's und Co mit "_timer" am Schluss anlegt?

[KernSani]

Aber ist das nicht nur Relevant, wenn man seine at's und Co mit "_timer" am Schluss anlegt?

Von FHEM erzeugte temporäre ATs (z.B. on-till... bei Geräten die das nicht selbst können - Baumarktsteckdosen) werden mit _timer angelegt.


Kurz, weil mobil...

[Amenophis86]

Ich finde die Funktion klasse, mich hat nur ein bisschen gestört, dass writeDevices2JS ein bisschen zu häufig triggert (nämlich bei jedem "at" oder "on-till-timer" o.ä.), daher habe ich das notify leicht abgewandelt:

Code Auswählen Erweitern

global:(DEFINED|RENAMED|DELETED|INITIALIZED).*(?<!_timer)$ { {open my $FH, ">", "./www/pgm2/fhem_devdetails.js" or die "Could not open file $!"; print $FH 'var defs=["'.join('","', sort(keys %defs)).'"]'; close $FH } }

Kannst du mir sagen, wie ich den Perl Teil ändere, damit nicht ständig eine Meldung im Log erscheint? Ich habe zwei Funktionen, welche ziemlich viele Temp-Ats anlegen und ständig Meldungen im Log dadurch.

[ThoTo]

Kannst du mir sagen, wie ich den Perl Teil ändere, damit nicht ständig eine Meldung im Log erscheint? Ich habe zwei Funktionen, welche ziemlich viele Temp-Ats anlegen und ständig Meldungen im Log dadurch.

Mit verbose 0 wird die Ausgabe unterdrückt, falls du das meinst:

Code Auswählen Erweitern

attr writeDevices2JS verbose 0

LG Thomas

[Amenophis86]

Oh man, es kann so einfach sein Sry stand aufm Schlauch. Dank dir.

[TomLee]

Hallo,

mit dem Hack (aus dem ersten Post) verhält sich je nach verwendetem Style die Menü-Leiste anders. s. Bilder im Anhang.
Mein Standard-Style ist f18, kann mir jemand sagen was ich wo ändern muss, das das Menü nicht in die "Hauptseite" reinragt.

Gruß

Thomas

[TomLee]

Hat sich erledigt hab mich für die mMn komfortablere Variante entschieden.

[Benni]

Das hat sich inzwischen anscheinend erledigt, da direkt als FHEM-Befehl verfügbar:

Side-Note: da es nirgendwo dokumentiert, und was aehnliches tut:

Code Auswählen Erweitern

l <devicename>(das ist ein kleines L) oben in der FHEMWEB Kommandozeile ruft die Detailansicht von <devicename>" auf.

[RoBra81]

Wobei diese Lösung hier den entscheidenden Vorteil des (nicht case-sensitiven) Autocomplete hat!

Gesendet von meinem LYA-L29 mit Tapatalk

[hmtec99]

Wäre das nicht was um es standardmäßig in Fhem zu integrieren?

Gerade für Anfänger (und nicht nur die) eine tolle Sache.

Daumen hoch.

Habe die Zeichenzahl für Autocomplete übrigens auf 2 reduziert, damit es auf meine Umgebung matcht (z.B. wdXYZ oder atXYZ).

Was muß man ändern damit alle Ergebnisse alphabetisch sortiert werden?