FHEM Forum

FHEM => Frontends => FHEMWEB => Thema gestartet von: Rewe2000 am 15 August 2020, 16:48:12

Titel: DEF Editorfenster in der Breite vergrössern
Beitrag von: Rewe2000 am 15 August 2020, 16:48:12
Hallo,

was muss ich einstellen, damit mein Editorfenster des DEF Editors (bei den Modulen) ein wenig breiter wird. Bei langen Zeilen muss ich immer den Scrollbalken bemühen, damit ich die rechten Zeichen noch lesen kann, das nervt ein wenig.

Verwende ich den Editor für "Edit Files" so wird dieser in der vollen Bildschirmbreite dargestellt.

Anbei ein Bild wie es bei mir ist und ein Bild wie es sein sollte.

Die Einstellungen von meinem WEB Device:
Internals:
   BYTES_READ 481265
   BYTES_WRITTEN 19143534
   CONNECTS   139
   CSRFTOKEN  csrf_437901288640295
   DEF        8083 global
   FD         9
   FUUID      5c47772e-f33f-7df9-b77d-03d3b32377dfb2b4
   NAME       WEB
   NR         215
   NTFY_ORDER 50-WEB
   PORT       8083
   STATE      Initialized
   TYPE       FHEMWEB
   READINGS:
     2020-08-15 13:32:18   state           Initialized
Attributes:
   DbLogExclude .*
   JavaScripts codemirror/fhem_codemirror.js
   codemirrorParam {"theme": "blackboard", "height":"auto", "lineNumbers":true, "lineWrapping":true, "matchBrackets":true}
   icon       rc_WEB
   iconPath   default:fhemSVG:openautomation
   plotEmbed  2
   plotfork   1
   room       System
   styleData  {
"f18": {
  "Pinned.menu": "true",
  "hidePin": "true",
  "cols.bg": "FFFFE7",
  "cols.fg": "000000",
  "cols.link": "278727",
  "cols.evenrow": "F8F8E0",
  "cols.oddrow": "F0F0D8",
  "cols.header": "E0E0C8",
  "cols.menu": "D7FFFF",
  "cols.sel": "A0FFFF",
  "cols.inpBack": "FFFFFF",
  "savePinChanges": true,
  "rightMenu": false
}
}
   stylesheetPrefix f18
   title      { if ($FW_room) { "Fhem: $FW_room" } elsif ($FW_detail) { "Fhem: $FW_detail" } else { "Fhem FHEM" } }


Gruß Reinhard
Titel: Antw:DEF Editorfenster in der Breite vergrössern
Beitrag von: rudolfkoenig am 15 August 2020, 17:13:01
Das hat irgendwas mit CodeMirror zu tun.
Ohne CodeMirror kann man die TextArea einfach grossziehen.
Titel: Antw:DEF Editorfenster in der Breite vergrössern
Beitrag von: Rewe2000 am 15 August 2020, 17:25:46
Hallo Rudolf,

sorry hab ich vergessen in meinem Post zu erwähnen, in der Größe kann ich das Fenster mit der Maus schon verändern, aber wenn ich es schließe und erneut öffne ist es wieder zu klein. Klappt denn die Speicherung der Einstellung ohne CodeMirror?

Irgendwie sollte es aber auch unter CodeMirror funktionieren, denn bei meiner umfangreichen (und vergeblichen) Ursachenforschung bin ich auf ein Bild von Damian gestossen: https://forum.fhem.de/index.php/topic,91126.msg836289.html#msg836289 (https://forum.fhem.de/index.php/topic,91126.msg836289.html#msg836289), so stelle ich mir es auch bei mir vor.

Gruß Reinhard
Titel: Antw:DEF Editorfenster in der Breite vergrössern
Beitrag von: frank am 16 August 2020, 19:37:03
damian nutzt scheinbar f18 style, du nicht.
Titel: Antw:DEF Editorfenster in der Breite vergrössern
Beitrag von: Ellert am 16 August 2020, 19:51:47
Es liegt nicht am Style, das Problem wäre leicht zu lösen.

In der aktuellen fhemweb.js , Zeile 1435
müsste die Fensterbreite von 3/4 auf 0.86 geändert werden.
      { modal:true, closeOnEscape:true, width:$(window).width()*3/4,
in
      { modal:true, closeOnEscape:true, width:$(window).width()*0.86,

Mit diesem Vorschlag bin ich schon vor einiger Zeit gescheitert, siehe https://forum.fhem.de/index.php/topic,74992.msg667363.html#msg667363
Titel: Antw:DEF Editorfenster in der Breite vergrössern
Beitrag von: Rewe2000 am 17 August 2020, 09:13:11
Hallo,

@frank: Ich verwende ios7 Style, aber auch wenn ich auf f18 umschalte bleibt die Fenstergröße gleich und es ändert sich nichts.

@ellert: Danke, das war genau das was ich immer gesucht habe, jetzt ist das Fenster deutlich breiter und das ewige scrollen entfällt.

Schade nur, dass die Änderung nach jedem Update von fhemweb.js erneut von Hand gemacht werden muss, ich würde es sehr begrüßen, wenn dies fest geändert werden könnte.

Gibt es denn irgendwo Nachteile, wenn das Fenster von Grund auf etwas breiter gewählt wird?
Dies würde mir bereits ausreichen, die Speicherung der Benutzerspezifischen Fenstergröße (oder Vollbild) wäre da schon Luxus.

Gerade als ungeübter Anwender hält man sich in diesem Fenster sehr häufig auf, bis der Code irgendwann mal passt. :D

Gruß Reinhard
Titel: Antw:DEF Editorfenster in der Breite vergrössern
Beitrag von: rudolfkoenig am 17 August 2020, 18:04:00
ZitatEs liegt nicht am Style, das Problem wäre leicht zu lösen.
In der aktuellen fhemweb.js , Zeile 1435
müsste die Fensterbreite von 3/4 auf 0.86 geändert werden.
Ja, aber nur, wenn 0.86 fuer alle passend waere, fuer mich ist das aber nicht.
Ich habe jetzt textField-long ein optionales Attribut spendiert, sizePct:
ZitattextField-long[,sizePct] - show an input-field, but upon clicking on the input field open a textArea (60x25). sizePct specifies the size of the dialog relative to the screen, in percent. Default is 75
Beispiel:
attr WEB widgetOverride comment:textField-long,90


P.S.: Wieso besorgt euch nicht einen ausreichend grossen Bildschirm? :)
Titel: Antw:DEF Editorfenster in der Breite vergrössern
Beitrag von: Damian am 17 August 2020, 19:20:48
vorher, jetzt mit 87 - passt!

Mein Monitor hat 27 Zoll mit 4K ;)
Titel: Antw:DEF Editorfenster in der Breite vergrössern
Beitrag von: Ellert am 17 August 2020, 19:42:48
Danke ersma.

ZitatP.S.: Wieso besorgt euch nicht einen ausreichend grossen Bildschirm? :)

Naja, 75% von $(window).width()  bleibt 75% bei jeder Bildschirmgrösse, zumal codemirror auf (window.innerWidth  - 300) px festgelegt ist, in der fhem_codemirror.js.
Titel: Antw:DEF Editorfenster in der Breite vergrössern
Beitrag von: Damian am 17 August 2020, 19:48:11
Zitat von: Ellert am 17 August 2020, 19:42:48
Danke ersma.

Naja, 75% von $(window).width()  bleibt 75% bei jeder Bildschirmgrösse, zumal codemirror auf (window.innerWidth  - 300) px festgelegt ist, in der fhem_codemirror.js.

Allerdings war bei meinem Browser 86% zu knapp :)
Titel: Antw:DEF Editorfenster in der Breite vergrössern
Beitrag von: Ellert am 17 August 2020, 19:52:08
Also zurück auf 640x480, wird aber schwierig mit dem Besorgen. ;)
Titel: Antw:DEF Editorfenster in der Breite vergrössern
Beitrag von: frank am 17 August 2020, 20:46:50
breite ist ja jetzt schön.
aber wieso nutzt codemirror nur ~20% der verfügbaren höhe?
Titel: Antw:DEF Editorfenster in der Breite vergrössern
Beitrag von: Damian am 17 August 2020, 21:46:37
Zitat von: frank am 17 August 2020, 20:46:50
breite ist ja jetzt schön.
aber wieso nutzt codemirror nur ~20% der verfügbaren höhe?

Wieso 20%?

In meinem Beispiel ist nur 20% Programmcode, der das Fenster ausfüllen kann, hätte ich mehr, so könnte ich auf 100% und mehr kommen, dann kommen auch vertikale Scrollbalken.
Titel: Antw:DEF Editorfenster in der Breite vergrössern
Beitrag von: frank am 18 August 2020, 03:22:04
je nach browser unterschiedlich.

in einem firefox sind es ca 50%.
die codemirror area wird auch nicht grösser, wenn ich quasi die doppelte fläche mit text beschreibe.
dann kommen zwar die scrollbars, aber codemirror nutzt weiterhin nur die hälfte der popupfläche.

by fully auf dem handy sind es etwa nur 20%.
wenn ich dort ein noch leeres attribut öffne, startet codemirror sogar zudem mit nur 20% horizontal.
Titel: Antw:DEF Editorfenster in der Breite vergrössern
Beitrag von: Damian am 18 August 2020, 07:43:32
Zitat von: frank am 18 August 2020, 03:22:04
je nach browser unterschiedlich.

in einem firefox sind es ca 50%.
die codemirror area wird auch nicht grösser, wenn ich quasi die doppelte fläche mit text beschreibe.
dann kommen zwar die scrollbars, aber codemirror nutzt weiterhin nur die hälfte der popupfläche.

by fully auf dem handy sind es etwa nur 20%.
wenn ich dort ein noch leeres attribut öffne, startet codemirror sogar zudem mit nur 20% horizontal.

Du benutzt das aktuelle Update (fhemweb.js) von gestern!?
Titel: Antw:DEF Editorfenster in der Breite vergrössern
Beitrag von: Damian am 18 August 2020, 07:48:48
Zitat von: Ellert am 17 August 2020, 19:52:08
Also zurück auf 640x480, wird aber schwierig mit dem Besorgen. ;)

Ich habe jetzt mal experimentiert, welcher Prozentsatz für den Codemirror zur vollständigen Darstellung ausreicht. Es hängt ab vom eingestellten Zoomfaktor im Browser. Je kleiner die Schrift, desto höher muss der Anteil sein. Mit 90% bei text-Long ist man meistens auf der sicheren Seite.
Titel: Antw:DEF Editorfenster in der Breite vergrössern
Beitrag von: Rewe2000 am 18 August 2020, 09:54:56
Hallo,

irgendwie kann ich euch da leider nicht folgen, bei mir ändert sich mit den neuesten Version (fhemweb.js 22618 2020-08-17 16:21:28Z) keine Fenstergröße.
Weder mit Standardeinstellung (ohne attr widgetOverride) noch mit den von Rudi angehängten.

attr WEB widgetOverride comment:textField-long,90

Muss da comment zwingend vor dem Doppelpunkt stehen?
Funktioniert aber ohne comment auch nicht (bei mir).

Gebt mir mal bitte einen Tipp was ich hier falsch mache.
Browser: Firefox 79.0
Chache mehrfach gelöscht
shutdown restart durchgeführt

Gruß Reinhard
Titel: Antw:DEF Editorfenster in der Breite vergrössern
Beitrag von: rudolfkoenig am 18 August 2020, 10:12:16
Ein FHEM-Neustart ist nicht notwendig, nur ein Browser-Reload von fhemweb.js.
Ob die aktuelle Version verwendet wird, wuerde ich in der JavaScript-Console, Source-Tab pruefen, indem ich die Versionszeile der Datei fhemweb.js suche.
Aenderungen betreffen nur die Attribute (oder Set/Get Parameter), die in widgetOverride aufgefuehrt sind. In meinem Beispiel also nur das comment Attribut.
Titel: Antw:DEF Editorfenster in der Breite vergrössern
Beitrag von: Damian am 18 August 2020, 10:16:40
1. aktuelle Version von fhemweb.js (das scheint bei dir bereits zu stimmen)
2. widgetOverride für das Attribut(e) setzen, bei dem man es nutzen möchte, bei mir ist es z. B.

attr WEBHOME widgetOverride uiTable:textField-long,87

Macht natürlich besonders Sinn, wenn man Codemirror nutzt, den muss man zunächst installieren.
Titel: Antw:DEF Editorfenster in der Breite vergrössern
Beitrag von: Rewe2000 am 18 August 2020, 10:34:09
Danke Rudi und Damian,

jetzt hab auch ich es begriffen, textField-long muss für jedes Attribut definiert werden, wo ich das breitere Fenster haben will.
Ich bin ursprünglich davon ausgegangen, dass dies global wirkt, deshalb hat mich "comment" in Rudis Beispiel verwundert.

Jetzt klappt es auch bei mir prima und das ewige scrollen hat ein Ende.

Danke für die Änderung.

Gruß Reinhard
Titel: Antw:DEF Editorfenster in der Breite vergrössern
Beitrag von: frank am 18 August 2020, 12:37:57
Zitat von: Damian am 18 August 2020, 07:43:32
Du benutzt das aktuelle Update (fhemweb.js) von gestern!?
jetzt ja. => vertikal selbes verhalten.

auf einem "untermotorisierten" alten notebook kann ich erkennen, dass die area zunächst den gesamten dialogbereich ausfüllt. kurz danach berechnet codemirror die area scheinbar neu.
Titel: Antw:DEF Editorfenster in der Breite vergrössern
Beitrag von: frank am 18 August 2020, 12:38:32
Zitat von: rudolfkoenig am 17 August 2020, 18:04:00
Ich habe jetzt textField-long ein optionales Attribut spendiert, sizePct:

ZitattextField-long[,sizePct] - show an input-field, but upon clicking on the input field open a textArea (60x25). sizePct specifies the size of the dialog relative to the screen, in percent. Default is 75

den hilfetext kann ich in meinem web device allerdings nicht finden.
nur den entsprechenden für "textFieldNL-long".

beim ersten setzen von "attr widgetOverride" über detailseite nach fhem restart ist beim klick auf den attr-button auch nichts passiert.
erst die eingabe in das fhem cmdfield hat das attribut "sichtbar" gesetzt.
Titel: Antw:DEF Editorfenster in der Breite vergrössern
Beitrag von: Ellert am 18 August 2020, 17:16:48
Wer alle Geräte, die ein Attribut widetOverride enthalten das textField-long beinhaltet nicht händisch setzen möchte, eine kleine sub als Hilfe.

sub wO {
  foreach my $key (devspec2array('widgetOverride=.*textField-long$')) {
    fhem("attr $key widgetOverride ".AttrVal($key,'widgetOverride',"Fehler").',86',1);
  }
}
Titel: Antw:DEF Editorfenster in der Breite vergrössern
Beitrag von: Rewe2000 am 19 August 2020, 09:53:02
Hallo Ellert,

wie ruftst du die sub wO{} (in 99_myUtils.pm) bei den Modulen genau auf, damit die Breite des Fensters auf den in der sub gesetzten Wert eingestellt wird?
Könntest du bitte hierzu ein kurzes Beispiel einstellen.

attr WEB widgetOverride userReadings:textField-long $wO userattr:textField-long $wO comment:textField-long $wO
klappt jedenfalls nicht.

So wie ich den code verstehe, suchst du im attr widgetOverride nach "textField-long" und hängst hier z.B. nur ",86" an.

Danke Reinhard

Titel: Antw:DEF Editorfenster in der Breite vergrössern
Beitrag von: Damian am 19 August 2020, 11:07:00
Also mir reicht es in der benötigten Web-Instanz für die jeweiligen Attribute das widgetOverride einmal zu setzen, alle anderen widgetOverride mit TextField-long in einzelnen Modulen würde ich sogar löschen. In jedem Modul das widgetOverride zu setzen ist mit Pflegeaufwand verbunden, den man mit der globalen Einstellung nicht hat.
Titel: Antw:DEF Editorfenster in der Breite vergrössern
Beitrag von: Ellert am 19 August 2020, 17:09:28
Zitat von: Rewe2000 am 19 August 2020, 09:53:02
Hallo Ellert,

wie ruftst du die sub wO{} (in 99_myUtils.pm) bei den Modulen genau auf, damit die Breite des Fensters auf den in der sub gesetzten Wert eingestellt wird?
Könntest du bitte hierzu ein kurzes Beispiel einstellen.

attr WEB widgetOverride userReadings:textField-long $wO userattr:textField-long $wO comment:textField-long $wO
klappt jedenfalls nicht.

So wie ich den code verstehe, suchst du im attr widgetOverride nach "textField-long" und hängst hier z.B. nur ",86" an.

Danke Reinhard

{wO}
Im Eingabefeld aufrufen, siehe https://commandref.fhem.de/commandref_DE.html#command , das Wissen habe ich vorausgesetzt.
Titel: Antw:DEF Editorfenster in der Breite vergrössern
Beitrag von: amenomade am 20 August 2020, 03:06:54
Zitat von: Ellert am 18 August 2020, 17:16:48
Wer alle Geräte, die ein Attribut widetOverride enthalten das textField-long beinhaltet nicht händisch setzen möchte, eine kleine sub als Hilfe.

sub wO {
  foreach my $key (devspec2array('widgetOverride=.*textField-long$')) {
    fhem("attr $key widgetOverride ".AttrVal($key,'widgetOverride',"Fehler").',86',1);
  }
}

Und wenn dass attr widgetOverride eine
Zitat von: CommandRefLeerzeichen separierte Liste von Name/Modifier Paaren
enthält, lieber mit einer s/ / / Regex arbeiten ;)
Titel: Antw:DEF Editorfenster in der Breite vergrössern
Beitrag von: rapster am 31 August 2020, 14:54:47
Zitat von: frank am 18 August 2020, 03:22:04
die codemirror area wird auch nicht grösser, wenn ich quasi die doppelte fläche mit text beschreibe.

Das sollte
attr FHEMWEB codemirrorParam { "height":"auto" }
machen/beheben.

Hast du das mal probiert?

Mögliche Params: https://wiki.fhem.de/wiki/Codemirror#Anpassung (https://wiki.fhem.de/wiki/Codemirror#Anpassung)

Sehe bin immer noch als Maintainer für Codemirror eingetragen, werde mal versuchen die Tage das Teil an sich zu aktualisieren, lang ists her...
Titel: Antw:DEF Editorfenster in der Breite vergrössern
Beitrag von: Rewe2000 am 31 August 2020, 16:47:47
Hallo rapster,

nach der Änderung von Rudi passt zumindest bei mir alles so wie ich es mir vorstelle. Bei mir war der Text immer breiter als das Popup-Fenster, deswegen musste ich immer den Scrollbalken bemühen. In der Höhe hatte ich mit "height":"auto" noch nie Probleme, mir hat die Fensterhöhe für den Überblick ausgereicht. Aber eigentlich dürfte nach meinem Verständnis bei "height":"auto", das Fenster in der Höhe nahezu den kompletten Bildschirm ausfüllen (wenn sich das überhaupt machen lässt). Aber größer ziehen mit der Maus ist möglich, bleibt aber dann halt nicht gespeichert.

Aber wie gesagt für mich derzeit absolut OK.

Gruß Reinhard
Titel: Antw:DEF Editorfenster in der Breite vergrössern
Beitrag von: frank am 02 September 2020, 15:55:03
Zitat von: rapster am 31 August 2020, 14:54:47
Das sollte
attr FHEMWEB codemirrorParam { "height":"auto" }
machen/beheben.

Hast du das mal probiert?

perfekt, danke.
popups haben nun volle höhe codemirror.
für DEF änderungen wird auf der website der komplette eintrag angezeigt.
entweder zb nur eine zeile oder für ein at bei mir auch über 200 zeilen.
ausserdem erscheint die anzeige des codemirror deutlich schneller.

könnte schwören, dass das früher nicht nötig war. aber egal.
Titel: Antw:DEF Editorfenster in der Breite vergrössern
Beitrag von: Ellert am 02 September 2020, 16:20:58
@rapster:
Zitat von: rapster am 31 August 2020, 14:54:47
Sehe bin immer noch als Maintainer für Codemirror eingetragen, werde mal versuchen die Tage das Teil an sich zu aktualisieren, lang ists her...

Ich nutze Codemirror und bin sehr zufrieden.

Mir ist aufgefallen, dass die Variablen (var variables) nicht besonders hervorgehoben werden, weil sie in der fhem.js nicht zusätzlich in einfache Anführungszeichen gesetzt sind.
Also nicht so
Zitatvar variables = ["$defs","$hms","$hour","$isdst","$mday","$min","$month","$sec","$wday","$we","$yday","$year"];
sondern so, damit werden die gelisteten Variablen weiss hervorgehoben.
Zitatvar variables = ["'$defs'","'$hms'","'$hour'","'$isdst'","'$mday'","'$min'","'$month'","'$sec'","'$wday'","'$we'","'$yday'","'$year'"];

Wenn Du ihn aktualisierst, wäre es schön auch die von DOIF bereitgestellten Funktionen und Variablen in der Syntaxhervorhebung zu haben.

Schlüsselwörter (var keywords):

set_State
get_State
set_Reading
get_Reading
set_Event
set_Exec
get_Exec
del_Exec
fhem_set
set_Event
set_Reading_Begin
set_Reading_Update
set_Reading_End
subs
init
WID
STY
PUP
IMPORT

und die Variablen (var variables):

$_blockingcalls
$SELF
$cmd
$DEVICE
$device
$EVENT
$event
$EVENTS
$events
$number
$name
$TYPE
$STATE
$room
$group
$week
$hm
$md
$ymd
$twe
$TABLE
$TD
$TR
$TC
$TPL
$ATTRIBUTESFIRST
$SHOWNOSTATE
$SHOWNODEVICELINE
$SHOWNODEVICELINK


Edit: Um die vordefinierten Variablen besonders hervorzuheben müssten sie unter var PERL={... definiert werden.