Javascript Editor einbinden

[AHA1805]

Danke für den Hinweis

Neustart von fhem hatte den Erfolg gebracht .

Der Editor ist voll der Hammer, eine super coole  sache, jetzt kann ich auch am Tab
mal was vernünftig anpassen.

Nochmals eine dickes Mercie an alle

Gruß Hannes

[betateilchen]

Langsam können wir wohl darüber nachmachen, diese Änderung zu manifestieren.
Noch dazu, wo es sogar mit mir suspekten Hardwareteilen aus Berlin funktioniert.

Wer reicht die Petition ein? Hier mein Beitrag bezüglich Dokumentation:

(http://up.picr.de/17512672qo.png)

Code Auswählen Erweitern


Index: 01_FHEMWEB.pm
===================================================================
--- 01_FHEMWEB.pm (revision 5083)
+++ 01_FHEMWEB.pm (working copy)
@@ -2893,8 +2893,37 @@
        Note: some elements like SVG plots and readingsGroup can only be part of
        a column if they are part of a <a href="#group">group</a>.
        </li>
+      <br/>
+     <a name="enhancedEditor"></a>
+     <li>enhancedEditor<br/>
+       Activates enhanced editor <a href="#codemirror">codemirror</a> to edit files and DEFs. Example:<br/>
+       <br/>
+       <ul><code>attr WEB enhancedEditor &lt;1|0&gt;</code></ul>
+       <br/>
+       Set to 1 to activate, 0 to deactivate the enhanced editor.<br/>
+       Defaults to 0 if not set and internal editing will be used.<br/>
+       </li>
+      <br/>
+     <a name="enhancedEditorTheme"></a>
+     <li>enhancedEditorTheme<br>
+       Select theme to be used in enhanced editor. Example:<br/>
+       <br/>
+       <ul><code>attr WEB enhancedEditorTheme blackboard</code></ul>
+       <br/>
+       Default theme is "blackboard".<br/>
+       Check directory ./www/codemirror/theme for available themes.<br/>
+       </li>
     </ul>
+  <br/>
+  <a name="codemirror"></a>
+  <b>Enhanced editor <a href="http:/www.codemirror.net">codemirror</a></b>
+  <ul>
+    <br/>
+    Enhanced editor codemirror can be used for editing files and DEFs in fhem frontend.<br/>
+    Includes: syntax highlighting, bracket control, auto-complete and much more.<br/>
+    See <a href="http:/www.codemirror.net">codemirror website</a> for more informations about editor's functionality and features.<br/>
   </ul>
+  </ul>

=end html


[betateilchen]

@ Rudi:

Welche Zuarbeit/Informationen brauchst Du, um die Einbindung des codemirror in fhem zu entscheiden und ggf. durchzuführen?

[rudolfkoenig]

Erstens einen kompletten Patch, und danach etwas Zeit. Ich will FHEMWEB  "autoloading" der JavaScript Dateien beibringen, und ich muss noch dafuer einen Weg finden. Die Knobs von svenson08 warten auch darauf.

[dafex]

Ich finde den Editor eine große Erleichterung. Erstens habe ich so gut wie keine Ahnung von Programmierung und da ist es zweitens hilfreich, wenn ich Unterstützung von einem Editor erhalte. Zum Beispiel bei der Klammersetzung, da stolpere ich gerne mal drüber. Zuerst habe ich, wie viele andere auch, die Konfiguration mit einem externen Editor gemacht. Habe aber festgestellt, das es mit der Web-GUI einfacher geht. Das Blackboard Theme finde ich auch perfekt. Ich bin eine Fan von Weiß (in diesem Fall bunt) auf schwarz. Schont die Augen. Vielleicht ist der enhancedEditor ein Anreiz für einige, mehr über die Weboberfläche zu machen. Was meiner Meinung nach weniger Fehleranträchtig ist und komfortabler. Ich kann einiges ausprobieren, und erst wenn's richtig läuft wird save config gedrückt.

Nebenbei, kann mir jemand ein Werkzeug nennen, mit dem ich Regexp testen kann? Das ist zur Zeit mein größtes Problem. Geht das in der Kommandozeile? Hab darüber noch nichts gefunden. Wäre das nicht schon das nächste Projekt?

Besten Dank an die Entwickler für dieses hilfreiche Helferlein. Dafür!

[betateilchen]

Erstens einen kompletten Patch,

bitteschön Den Patch für die commandref-Doku bitte dem vorherigen Post entnehmen.

Code Auswählen Erweitern



Index: 01_FHEMWEB.pm
===================================================================
--- 01_FHEMWEB.pm (revision 4997)
+++ 01_FHEMWEB.pm (working copy)
@@ -13,6 +13,8 @@
sub FW_iconName($);
sub FW_iconPath($);
sub FW_answerCall($);
+sub FW_codemirrorLink($);
+sub FW_codemirrorParams($);
sub FW_dev2image($;$);
sub FW_devState($$@);
sub FW_digestCgi($);
@@ -128,6 +130,8 @@
     defaultRoom
     endPlotNow:1,0
     endPlotToday:1,0
+    enhancedEditor:1,0
+    enhancedEditorTheme
     fwcompress:0,1
     hiddengroup
     hiddenroom
@@ -1571,9 +1575,21 @@
     FW_pO     FW_textfieldv("saveName", 30, "saveName", $fileName);
     FW_pO     "<br><br>";
     FW_pO     FW_hidden("cmd", "style save $fileName");
-    FW_pO     "<textarea name=\"data\" cols=\"$ncols\" rows=\"30\">" .
+    FW_pO     "<textarea id=\"data\" name=\"data\" cols=\"$ncols\" rows=\"30\">" .
                 "$data</textarea>";
     FW_pO "</form>";
+
+    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>";
+    }
+
     FW_pO "</div>";

   } elsif($a[1] eq "save") {
@@ -1981,6 +1997,10 @@
              "s.display = s.display=='none' ? 'block' : 'none';".
              "s=document.getElementById('disp').style;".
              "s.display = s.display=='none' ? 'block' : 'none';";
+    $pgm .= "s=document.getElementById('editarea');".
+             "s.editor ? s.editor: s.editor = CodeMirror.fromTextArea(s,". FW_codemirrorParams("pm") .");"
+         if AttrVal($FW_wname,'enhancedEditor',0);
+
   FW_pO "<td>";
   FW_pO "<a onClick=\"$pgm\">$n</a>";
   FW_pO "</td>";
@@ -1998,14 +2018,57 @@
   FW_pO       FW_hidden("detail", $name);
   my $cmd = "modify";
   my $ncols = $FW_ss ? 30 : 60;
-  FW_pO      "<textarea name=\"val.${cmd}$name\" ".
+  FW_pO      "<textarea id=\"editarea\" name=\"val.${cmd}$name\" ".
                 "cols=\"$ncols\" rows=\"10\">$val</textarea>";
   FW_pO     "<br>" . FW_submit("cmd.${cmd}$name", "$cmd $name");
   FW_pO   "</form></div>";
+  FW_codemirrorLink("pm") if( AttrVal($FW_wname,'enhancedEditor',0) );
   FW_pO  "</td>";
}

+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'} }";
+}
+
sub
FW_roomStatesForInform($)
{



Desweiteren sind noch folgende Dinge zu beachten:

• codemirror muss nach /opt/fhem/www/codemirror installiert werden
• die Datei fhem.js (hier aus dem Thread) muss zusätzlich in das Verzeichnis /opt/fhem/www/codemirror/mode/fhem installiert werden

Ich würde mich bereiterklären, die laufende Aktualisierung des codemirror-Verzeichnisses zu übernehmen.

Lizenzrechtlich sehe ich keine Probleme, codemirror zusammen mit fhem auszuliefern:

Copyright (C) 2013 by Marijn Haverbeke <marijnh@gmail.com> and others

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

[justme1968]

eine frage wäre noch ob man codemirror komplett eincheckt oder nur die paar files die auch eingebunden werden.

[betateilchen]

Darüber kann man nachdenken.

Es ist für die Maintenance auf jeden Fall einfacher, das komplette Paket einzubinden.
Und es vermeidet potenzielle Fehlerquellen.

[justme1968]

das stimmt.

wenn das fritzding sie viele files handeln kann:)

[betateilchen]

ich bin grade am durchzählen

edit:

Großzügig aufgeräumt, bleiben 82 Dateien und 642kByte Größe für das codemirror Verzeichnis übrig.

[betateilchen]

Ich habe hier nochmal eine vollständige patch-Datei gebaut, die auf der aktuellen FHEMWEB (5080) aufbaut und sowohl codemirror als auch die aktualisierte commandref enthält.

Spricht etwas dagegen, die benötigten codemirror Dateien schonmal nach /fhem/www/codemirror einzuchecken?

[papa]

Ich habe nochmal etwas an der Completion rumgeschraubt. Es werden jetzt spezielle Hilfen für folgende Fälle angeboten:

attr DEVICE ATTRIBUTE
Value("DEVICE")
ReadingsVal("DEVICE","READING",???)

Sprich es werden je nachdem wo der Cursor steht die Devices, Attribute oder Readings vorgeschlagen. Für welche Funktionen / Befehle wollen wir das noch anbieten ?

Außerdem wird bei den Devices auch ein eventuell vorhandener Alias mit angezeigt.

[betateilchen]

ich bräuchte etwas ähnliches zum Editieren der Layout-Dateien, die vom Modul 02_RSS.pm verwendet werden... 

[UliM]

Für welche Funktionen / Befehle wollen wir das noch anbieten ?

M.E. für alle Funktionen laut http://fhem.de/commandref.html#perl
also auch

Code Auswählen Erweitern

InternalVal(<devicename>,<property>,<defaultvalue>)
OldValue(<devicename>)
OldTimestamp(<devicename>)
ReadingsTimestamp("wz", "measured-temp", 0)
AttrVal("wz", "room", "none")

Freue mich schon sehr drauf
Wenn man's dann nutzen kann, kommen bestimmt noch viel mehr Ideen.

Gruß, Uli

[betateilchen]

Uli, nutzen kannst Du das jetzt schon.

• 01_FHEMWEB.pm patchen
• codemirror downloaden und nach ./www/codemirror entpacken
• die fhem.js hier aus dem Thread nach ./www/codemirror/mode/fhem kopieren
• Nach dem fhem Neustart das attribut enhancedEditor auf 1 setzen
• Spass haben

Ich denke, die fhem.js wird künftig lebendigste Datei win, der Rest ist mehr oder weniger statisch.