Javascript Editor einbinden

[betateilchen]

das manuelle Ändern ist "kompliziert" aber was codemirror kann: ein AutoResize

(http://up.picr.de/17429447hi.jpg)

(http://up.picr.de/17429449zu.jpg)

[klausw]

das ist meiner Meinung nach noch besser
im Editorfenster kann schließlich nicht genug platz sein

[betateilchen]

ich finde auch, je mehr Platz umso besser Ich hoffe nur, dass das nicht irgendwann Performance-Probleme gibt.

Das sind die Änderungen fürs autoResize

Code Auswählen Erweitern



    if( AttrVal($FW_wname,'enhancedEditor',0) ) {
      my $ext = ($fileName =~ m/\.(.*)$/)[0];
      FW_codemirrorLink($ext);
->      FW_pO "<style type=\"text/css\">".
->           ".CodeMirror {height: auto;}".
->            ".CodeMirror-scroll {overflow-y: hidden; overflow-x: auto;}".
->            "</style>".
            "<script>".
            "var editor = CodeMirror.fromTextArea(document.getElementById(\"data\"),".
            FW_codemirrorParams($ext) . ");".
            "</script>";
    }



[klausw]

ich finde auch, je mehr Platz umso besser Ich hoffe nur, dass das nicht irgendwann Performance-Probleme gibt.

Das Javascript wird doch vom Browser verarbeitet. Der hat hoffentlich noch Luft  nach oben, was die Performance angeht

[papa]

Ich habe mal mit einen fhem Mode begonnen. Dieser fügt dem perl Mode noch ein paar Keywörter hinzu. Außerdem beinhaltet er auch die Autocompletion. Zum Probieren mal das angehängt 01_FHEMWEB.pm nehmen. Außerdem muss das fhem.js in den in das Verzeichnis codemirror/mode/fhem.

Leider kriege ich die Geräteliste per jsonlist Kommando nicht zum laufen. Deshalb geht auch das Einblenden der Geräteliste noch nicht. Vielleicht hat ja jemand eine Idee, der vertrauter mit Javascript ist.

[papa]

Jetzt funktioniert auch die Hilfe mit der Liste aller definierten Devices. Das ganze wird mit Ctrl+Space angezeigt.

[fhainz]

Hallo papa,

hast du vielleicht eine .patch Datei zur 01_FHEMWEB.pm ?


Grüße

[fhainz]

@Betateilchen
Ich hab deinen fix für das autoResize ausprobiert. Leider klappt das bei mir nicht. Hast du eine Idee?

Code Auswählen Erweitern

if( AttrVal($FW_wname,'enhancedEditor',0) ) {
      my $ext = ($fileName =~ m/\.(.*)$/)[0];
      FW_codemirrorLink($ext);
      FW_pO "<style type=\"text/css\">".
           ".CodeMirror {height: auto;}".
            ".CodeMirror-scroll {overflow-y: hidden; overflow-x: auto;}".
            "</style>".
      FW_pO "<script>var editor = CodeMirror.fromTextArea(document.getElementById(\"data\"),".
            FW_codemirrorParams($ext) . ");</script>";
    }


Grüße

[papa]

hast du vielleicht eine .patch Datei zur 01_FHEMWEB.pm ?

Nein - leider nicht - keine richtige Entwicklungsumgebung. Aber ich habe die Änderungen hier mal rot eingefärbt.


my %codemirrorMapping = ( pm => "fhem",
                          cfg => "fhem",
                          css => "css",
                          svg => "xml",
);

sub FW_codemirrorLink($)
{
  my ($ext) = @_;

  my $lang = $codemirrorMapping{$ext};
  my $theme = AttrVal($FW_wname,'enhancedEditorTheme','blackboard');

  $lang = "perl" if( !$lang );

  FW_pO "<script type=\"text/javascript\" src=\"$FW_ME/pgm2/jquery.min.js\"></script>";
  FW_pO "<link rel=\"stylesheet\" href=\"$FW_ME/codemirror/lib/codemirror.css\">";
  FW_pO "<script type=\"text/javascript\" src=\"$FW_ME/codemirror/lib/codemirror.js\"></script>";
  FW_pO "<link rel=\"stylesheet\" href=\"$FW_ME/codemirror/theme/$theme.css\">";
  FW_pO "<script type=\"text/javascript\" src=\"$FW_ME/codemirror/addon/edit/closebrackets.js\"></script>";
  FW_pO "<script type=\"text/javascript\" src=\"$FW_ME/codemirror/addon/edit/matchbrackets.js\"></script>";
  FW_pO "<script type=\"text/javascript\" src=\"$FW_ME/codemirror/addon/hint/show-hint.js\"></script>";
  FW_pO "<link rel=\"stylesheet\" href=\"$FW_ME/codemirror/addon/hint/show-hint.css\">";
  FW_pO "<script type=\"text/javascript\" src=\"$FW_ME/codemirror/mode/$lang/$lang.js\"></script>" if( $lang );
  return;
}
sub FW_codemirrorParams($)
{
  my ($ext) = @_;

  my $theme = AttrVal($FW_wname,'enhancedEditorTheme','blackboard');

  #my $lang = $codemirrorMapping{$ext};
  #if( !$lang ) {
  #  $lang = "";
  #} else {
  #  $lang .= ": true,";
  #}
  #return "{theme: '". $theme. "', $lang lineNumbers: true, matchBrackets: true, autoCloseBrackets: true}";

  return "{theme: '". $theme. "', lineNumbers: true, matchBrackets: true, autoCloseBrackets: true, extraKeys: {'Ctrl-Space': 'autocomplete'} }";
}

[betateilchen]

Hast du eine Idee?

klar, nach "</style>" kommt ein ; kein .

Hättest Du es einfach so übernommen, wie von mir vorgeschlagen, hätte es funktioniert.

[betateilchen]

ich werde mir die Änderung von papa heute abend mal anschauen und dann einfach mal eine komplette 01_FHEMWEB zum Testen hier reinhängen. Dauert aber noch ein bißchen, ich hab erstmal Hunger

[fhainz]

Hätte ich mir auch denken können. 
Nun klappts, danke!

[fhainz]

Die auto-vervöllständigung ist wirklich cool! Funktioniert super bei mir! 

Ich häng hier den patch von andre an. Die Änderungen von betateilchen (autoResize) und von papa (autocomplete) hab ich manuell eingefügt und den patch getestet.
Falls jemand testen will.


Grüße

[papa]

Ich habe hier nochmal eine aktuallisierte Version der Autovervollständigung. Das JSON Handling ist jetzt async. Außerdem wird ein existierender Alias mit angezeigt.

Folgende Punkte sind noch auf meiner Liste:

* vollständige Liste der FHEM Keyword / Variablen
* Zwischenspeichern der Device Liste - oder alternativ eine gekürzte jsonlist mit Namen & Alias
* Kontextsensitive Hilfe - z.B. wenn der Cursor hinter 'attr' steht, brauchen nur die Devices angezeigt zu werden. Wenn dann schon 'attr dev123' dasteht - nur die Attribute von 'dev123'. Analog könnte man auch die Devices und Readings bei 'ReadingsVal' einblenden. Weitere Vorschläge sind gerne willkommen.

[oniT]

Hallo,

da es mich auch interessieren würde wie das ganze Aussieht, muss ich mal fragen wie ich den oder im allgemeinen die Patch einspiele? Mittels FTP übertragen ist klar, ein Reload durchführen auch. Aber dann kommt eine Fehlermeldung. Würde mich bitte mal einer darüber aufklären.

Danke

Gruß,
Tino