2
0
mirror of https://github.com/fhem/fhem-mirror.git synced 2025-01-31 06:39:11 +00:00

fhemweb.js: better attr-help (Forum #119165)

git-svn-id: https://svn.fhem.de/fhem/trunk@23899 2b470e98-0d58-463d-a4d8-8e2adae1ed80
This commit is contained in:
rudolfkoenig 2021-03-06 13:08:15 +00:00
parent 85c894431a
commit ad89f77b92
6 changed files with 229 additions and 98 deletions

View File

@ -702,7 +702,7 @@ MQTT2_CLIENT_getStr($$)
<b>Attributes</b>
<ul>
<a id="MQTT2_CLIENT-autocreate"></a>
<a id="MQTT2_CLIENT-attr-autocreate"></a>
<li>autocreate [no|simple|complex]<br>
if set to simple/complex, at least one MQTT2_DEVICE will be created, and
its readingsList will be expanded upon reception of published messages.
@ -739,13 +739,13 @@ MQTT2_CLIENT_getStr($$)
disable dispatching of messages.
</li><br>
<a id="MQTT2_CLIENTdisconnectAfter"></a>
<a id="MQTT2_CLIENT-attr-disconnectAfter"></a>
<li>disconnectAfter &lt;seconds&gt;<br>
if set, the connection will be closed after &lt;seconds&gt; of
inactivity, and will be automatically reopened when sending a command.
</li>
<a id="MQTT2_CLIENTignoreRegexp"></a>
<a id="MQTT2_CLIENT-attr-ignoreRegexp"></a>
<li>ignoreRegexp<br>
if $topic:$message matches ignoreRegexp, then it will be silently ignored.
</li>

View File

@ -1198,21 +1198,22 @@ sub
FW_dataAttr()
{
sub
addParam($$)
addParam($$$)
{
my ($p, $default) = @_;
my $val = AttrVal($FW_wname,$p, $default);
my ($dev, $p, $default) = @_;
my $val = AttrVal($dev, $p, $default);
$val =~ s/&/&amp;/g;
$val =~ s/'/&#39;/g;
return "data-$p='$val' ";
}
return
addParam("jsLog", 0).
addParam("confirmDelete", 1).
addParam("confirmJSError", 1).
addParam("addHtmlTitle", 1).
addParam("styleData", "").
addParam($FW_wname, "jsLog", 0).
addParam($FW_wname, "confirmDelete", 1).
addParam($FW_wname, "confirmJSError", 1).
addParam($FW_wname, "addHtmlTitle", 1).
addParam($FW_wname, "styleData", "").
addParam("global", "language", "EN").
"data-availableJs='$FW_fhemwebjs' ".
"data-webName='$FW_wname '";
}

View File

@ -2477,10 +2477,10 @@ plotAsPng(@)
=item summary_DE malt ein SVG-Plot aus FileLog oder DbLog Daten
=begin html
<a name="SVG"></a>
<a id="SVG"></a>
<h3>SVG</h3>
<ul>
<a name="SVGlinkdefine"></a>
<a id="SVG-define"></a>
<b>Define</b>
<ul>
<code>define &lt;name&gt; SVG
@ -2507,7 +2507,7 @@ plotAsPng(@)
</ul>
</ul>
<a name="SVGset"></a>
<a id="SVG-set"></a>
<b>Set</b>
<ul>
<li>copyGplotFile<br>
@ -2520,22 +2520,33 @@ plotAsPng(@)
</li>
</ul><br>
<a name="SVGget"></a>
<a id="SVG-get"></a>
<b>Get</b> <ul>N/A</ul><br>
<a name="SVGattr"></a>
<a id="SVG-attr"></a>
<b>Attributes</b>
<ul>
<li><a href="#endPlotNow">endPlotNow</a></li><br>
<li><a href="#endPlotToday">endPlotToday</a></li><br>
<a id="SVG-attr-endPlotNow"></a>
<li>endPlotNow<br>
If this attribute is set to 1, then day and hour plots will
end at current time. Else the whole day, the 6 hour period starting at
0, 6, 12 or 18 hour or the whole hour will be shown. This attribute
is not used if the SVG has the attribute startDate defined.
</li><br>
<a name="captionLeft"></a>
<a id="SVG-attr-endPlotToday"></a>
<li>endPlotToday<br>
If this attribute is set to 1, then week and month plots will
end today. Else the current week or the current month will be shown.
</li><br>
<a id="SVG-attr-captionLeft"></a>
<li>captionLeft<br>
Show the legend on the left side (deprecated, will be autoconverted to
captionPos)
</li><br>
<a name="captionPos"></a>
<a id="SVG-attr-captionPos"></a>
<li>captionPos<br>
right - Show the legend on the right side (default)<br>
left - Show the legend on the left side<br>
@ -2543,7 +2554,7 @@ plotAsPng(@)
on the axis it belongs to<br>
</li><br>
<a name="fixedrange"></a>
<a id="SVG-attr-fixedrange"></a>
<li>fixedrange [offset]<br>
Contains two time specs in the form YYYY-MM-DD separated by a space.
In plotmode gnuplot-scroll(-svg) or SVG the given time-range will be
@ -2562,12 +2573,12 @@ plotAsPng(@)
</li><br>
<a name="fixedoffset"></a>
<a id="SVG-attr-fixedoffset"></a>
<li>fixedoffset &lt;nDays&gt;<br>
Set an fixed offset (in days) for the plot.
</li><br>
<a name="label"></a>
<a id="SVG-attr-label"></a>
<li>label<br>
Double-Colon separated list of values. The values will be used to replace
&lt;L#&gt; type of strings in the .gplot file, with # beginning at 1
@ -2601,9 +2612,16 @@ plotAsPng(@)
<br>Deprecated, see plotReplace.
</li><br>
<li><a href="#nrAxis">nrAxis</a></li><br>
<a id="SVG-attr-nrAxis"></a>
<li>nrAxis<br>
the number of axis for which space should be reserved on the left and
right sides of a plot and optionaly how many axes should realy be used
on each side, separated by comma: left,right[,useLeft,useRight]. You
can set individual numbers by setting the nrAxis of the SVG. Default is
1,1.
</li><br>
<a name="plotfunction"></a>
<a id="SVG-attr-plotfunction"></a>
<li>plotfunction<br>
Space value separated list of values. The value will be used to replace
&lt;SPEC#&gt; type of strings in the .gplot file, with # beginning at 1
@ -2625,9 +2643,23 @@ plotAsPng(@)
Deprecated, see plotReplace.
</li><br>
<li><a href="#plotmode">plotmode</a></li><br>
<a id="SVG-attr-plotmode"></a>
<li>plotmode<br>
Specifies how to generate the plots:
<ul>
<li>SVG<br>
The plots are created with the <a href="#SVG">SVG</a> module.
This is the default.</li>
<li>gnuplot-scroll<br>
The plots are created with the gnuplot program. The gnuplot
output terminal PNG is assumed. Scrolling to historical values
is also possible, just like with SVG.</li>
<li>gnuplot-scroll-svg<br>
Like gnuplot-scroll, but the output terminal SVG is assumed.</li>
</ul>
</li><br>
<a name="plotReplace"></a>
<a id="SVG-attr-plotReplace"></a>
<li>plotReplace<br>
space separated list of key=value pairs. value may contain spaces if
enclosed in "" or {}. value will be evaluated as a perl expression, if it
@ -2639,15 +2671,27 @@ plotAsPng(@)
%key% will be repaced before the input file is processed, this expression
can be used to replace parameters for the input processing. </li><br>
<li><a href="#plotsize">plotsize</a></li><br>
<li><a href="#plotWeekStartDay">plotWeekStartDay</a></li><br>
<a id="SVG-attr-plotsize"></a>
<li>plotsize<br>
the default size of the plot, in pixels, separated by comma:
width,height. You can set individual sizes by setting the plotsize of
the SVG. Default is 800,160 for desktop, and 480,160 for
smallscreen.
</li><br>
<a name="startDate"></a>
<a id="SVG-attr-plotWeekStartDay"></a>
<li>plotWeekStartDay<br>
Start the week-zoom of the SVG plots with this day.
0 is Sunday, 1 is Monday, etc.<br>
</li><br>
<a id="SVG-attr-startDate"></a>
<li>startDate<br>
Set the start date for the plot. Used for demo installations.
</li><br>
<a name="title"></a>
<a id="SVG-attr-title"></a>
<li>title<br>
A special form of label (see above), which replaces the string &lt;TL&gt;
in the .gplot file. It defaults to the filename of the logfile.
@ -2657,7 +2701,7 @@ plotAsPng(@)
</ul>
<br>
<a name="plotEditor"></a>
<a id="SVG-plotEditor"></a>
<b>Plot-Editor</b>
<br>
This editor is visible on the detail screen of the SVG instance.
@ -2682,7 +2726,7 @@ plotAsPng(@)
</li>
</ul>
The visibility of the ploteditor can be configured with the FHEMWEB attribute
<a href="#ploteditor">ploteditor</a>.
ploteditor.
<br>
</ul>
@ -2690,10 +2734,10 @@ plotAsPng(@)
=begin html_DE
<a name="SVG"></a>
<a id="SVG"></a>
<h3>SVG</h3>
<ul>
<a name="SVGlinkdefine"></a>
<a id="SVG-define"></a>
<b>Define</b>
<ul>
<code>define &lt;name&gt; SVG &lt;logDevice&gt;:&lt;gplotfile&gt;:&lt;logfile&gt;</code>
@ -2728,7 +2772,7 @@ plotAsPng(@)
</ul>
<br>
<a name="SVGset"></a>
<a id="SVG-set"></a>
<b>Set</b>
<ul>
<li>copyGplotFile<br>
@ -2742,19 +2786,19 @@ plotAsPng(@)
</ul><br>
<a name="SVGget"></a>
<a id="SVG-get"></a>
<b>Get</b> <ul>N/A</ul><br>
<a name="SVGattr"></a>
<a id="SVG-attr"></a>
<b>Attribute</b>
<ul>
<a name="captionLeft"></a>
<a id="SVG-attr-captionLeft"></a>
<li>captionLeft<br>
Anzeigen der Legende auf der linken Seite. &Uuml;berholt, wird
automatisch nach captionPos konvertiert.
</li><br>
<a name="captionPos"></a>
<a id="SVG-attr-captionPos"></a>
<li>captionPos<br>
right - Anzeigen der Legende auf der rechten Seite (default)<br>
left - Anzeigen der Legende auf der linken Seite<br>
@ -2762,15 +2806,29 @@ plotAsPng(@)
je nach Achsenzugeh&ouml;rigkeit<br>
</li><br>
<li><a href="#endPlotNow">endPlotNow</a></li><br>
<li><a href="#endPlotToday">endPlotToday</a></li><br>
<a id="SVG-attr-endPlotNow"></a>
<li>endPlotNow<br>
Wenn Sie dieses Attribut auf 1 setzen, werden Tages und
Stunden-Plots zur aktuellen Zeit beendet. (&Auml;hnlich wie
endPlotToday, nur eben min&uuml;tlich).
Ansonsten wird der gesamte Tag oder eine 6 Stunden Periode (0, 6, 12,
18 Stunde) gezeigt. Dieses Attribut wird nicht verwendet, wenn das SVG
Attribut startDate benutzt wird.<br>
</li><br>
<a name="fixedoffset"></a>
<a id="SVG-id-endPlotToday"></a>
<li>endPlotToday<br>
Wird dieses Attribut gesetzt, so enden Wochen- bzw. Monatsplots
am aktuellen Tag, sonst wird die aktuelle Woche/Monat angezeigt.
</li><br>
<a id="SVG-attr-fixedoffset"></a>
<li>fixedoffset &lt;nTage&gt;<br>
Verschiebt den Plot-Offset um einen festen Wert (in Tagen).
</li><br>
<a name="fixedrange"></a>
<a id="SVG-attr-fixedrange"></a>
<li>fixedrange [offset]<br>
Erste Alternative:<br>
Enth&auml;lt zwei Zeit-Spezifikationen in der Schreibweise YYYY-MM-DD,
@ -2791,7 +2849,7 @@ plotAsPng(@)
</li><br>
<a name="label"></a>
<a id="SVG-attr-label"></a>
<li>label<br>
Eine Liste, bei der die einzelnen Werte mit einem zweifachen Doppelpunkt
voneinander getrennt werden. Diese Liste wird verwendet um die &lt;L#&gt;
@ -2832,9 +2890,16 @@ plotAsPng(@)
<br>&Uuml;berholt, wird durch das plotReplace Attribut abgel&ouml;st.
</li><br>
<li><a href="#nrAxis">nrAxis</a></li><br>
<a id="SVG-attr-nrAxis"></a>
<li>nrAxis<br>
(bei mehrfach-Y-Achsen im SVG-Plot) Die Darstellung der Y Achsen
ben&ouml;tigt Platz. Hierdurch geben Sie an wie viele Achsen Sie
links,rechts [useLeft,useRight] ben&ouml;tigen. Default ist 1,1 (also 1
Achse links, 1 Achse rechts).
</li><br>
<a name="plotfunction"></a>
<a id="SVG-attr-plotfunction"></a>
<li>plotfunction<br>
Eine Liste, deren Werte durch Leerzeichen voneinander getrennt sind.
Diese Liste wird verwendet um die &lt;SPEC#&gt; Zeichenfolgen in der
@ -2862,9 +2927,28 @@ plotAsPng(@)
&Uuml;berholt, wird durch das plotReplace Attribut abgel&ouml;st.
</li><br>
<li><a href="#plotmode">plotmode</a></li><br>
<a id="SVG-attr-plotmode"></a>
<li>plotmode<br>
Spezifiziert, wie Plots erzeugt werden sollen:
<ul>
<li>SVG<br>
Die Plots werden mit Hilfe des <a href="#SVG">SVG</a> Moduls als SVG
Grafik gerendert. Das ist die Standardeinstellung.</li>
<a name="plotReplace"></a>
<li>gnuplot-scroll<br>
Die plots werden mit dem Programm gnuplot erstellt. Das output
terminal ist PNG. Der einfache Zugriff auf historische Daten
ist m&ouml;glich (analog SVG).
</li>
<li>gnuplot-scroll-svg<br>
Wie gnuplot-scroll, aber als output terminal wird SVG angenommen.
</li>
</ul>
</li><br>
<a id="SVG-attr-plotReplace"></a>
<li>plotReplace<br>
Leerzeichen getrennte Liste von Name=Wert Paaren. Wert kann Leerzeichen
enthalten, falls es in "" oder {} eingeschlossen ist. Wert wird als
@ -2876,16 +2960,28 @@ plotAsPng(@)
kann, und %Name% davor, damit man die Regeln in der .gplot Datei f&uuml;r
die Extraktion anpassen kann.</li><br>
<li><a href="#plotsize">plotsize</a></li><br>
<li><a href="#plotWeekStartDay">plotWeekStartDay</a></li><br>
<a id="SVG-attr-plotsize"></a>
<li>plotsize<br>
gibt die Standardbildgr&ouml;&szlig;e aller erzeugten Plots an als
Breite,H&ouml;he an. Um einem individuellen Plot die Gr&ouml;&szlig;e
zu &auml;ndern muss dieses Attribut bei der entsprechenden SVG Instanz
gesetzt werden. Default sind 800,160 f&uuml;r Desktop und 480,160
f&uuml;r Smallscreen
</li><br>
<a name="startDate"></a>
<a id="SVG-attr-plotWeekStartDay"></a>
<li>plotWeekStartDay<br>
Starte das Plot in der Wochen-Ansicht mit diesem Tag.
0 ist Sonntag, 1 ist Montag, usw.
</li><br>
<a id="SVG-attr-startDate"></a>
<li>startDate<br>
Setzt das Startdatum f&uuml;r den Plot. Wird f&uuml;r Demo-Installationen
verwendet.
</li><br>
<a name="title"></a>
<a id="SVG-attr-title"></a>
<li>title<br>
Eine besondere Form der &Uuml;berschrift (siehe oben), bei der die
Zeichenfolge &lt;TL&gt; in der .gplot-Datei ersetzt wird.
@ -2897,7 +2993,7 @@ plotAsPng(@)
</ul>
<br>
<a name="plotEditor"></a>
<a id="SVG-plotEditor"></a>
<b>Plot-Editor</b>
<br>
Dieser Editor ist in der Detailansicht der SVG-Instanz zu sehen. Die
@ -2927,8 +3023,8 @@ plotAsPng(@)
Expression ausgewertet. Das Ergebnis muss in der Form [min:max] sein.
</li>
</ul>
Die Sichtbarkeit des Plot-Editors kann mit dem FHEMWEB Attribut <a
href="#ploteditor">ploteditor</a> konfiguriert werden.
Die Sichtbarkeit des Plot-Editors kann mit dem FHEMWEB Attribut
ploteditor konfiguriert werden.
<br>
</ul>

View File

@ -519,7 +519,7 @@ attribute list if you want to know if a device supports these attributes. <br>
<p>
<a name="event-aggregator"></a>
<li>event-aggregator</li>
<li>event-aggregator
The primary uses of this attribute are to calculate (time-weighted) averages of
readings over time periods and to throttle the update rate of readings and thus
the amount of data written to the logs.<p>
@ -584,7 +584,7 @@ attribute list if you want to know if a device supports these attributes. <br>
</li>
<p>
<a name="event-min-interval"></a>
<a name="event-min-interval">bla</a>
<li>event-min-interval<br>
This attribute takes a comma-separated list of reading:minInterval pairs.
You may use regular expressions for reading. Events will only be

View File

@ -526,7 +526,7 @@ Ger&auml;t dokumentiert.
<p>
<a name="event-aggregator"></a>
<li>event-aggregator</li>
<li>event-aggregator
The primary uses of this attribute are to calculate (time-weighted) averages of
readings over time periods and to throttle the update rate of readings and thus
the amount of data written to the logs.<p>

View File

@ -308,40 +308,7 @@ FW_jqueryReadyFn()
return;
$("#devSpecHelp").remove();
var sel=this, devName=m[2], selType=m[1];
FW_getHelp(devName, function(data) { // show either the next or the outer li
$("#content")
.append("<div id='workbench' style='display:none'></div>");
$("#content > #workbench").html(data);
var mtype = $("#content > #workbench a[id]").attr("id"), aTag;
if(!mtype)
mtype = $("#content > #workbench a[name]").attr("name"), aTag;
if(mtype) { // old style #1 syntax: MODULETYPEattrname
var mv = (""+mtype+"-"+selType+"-"+val).replace(/[^a-z0-9_-]/ig,'_');
aTag = $("#content > #workbench").find("a[id="+mv+"]");
if(!$(aTag).length) {
mv = (""+mtype+val).replace(/[^a-z0-9_]/ig,'_');
aTag = $("#content > #workbench").find("a[name="+mv+"]");
}
}
if(!$(aTag).length) { // old style #2 syntax without type
var v = (val).replace(/[^a-z0-9_]/ig,'_');
aTag = $("#content > #workbench").find("a[name="+v+"]");
}
if($(aTag).length) {
var liTag = $(aTag).next("li");
if(!$(liTag).length)
liTag = $(aTag).parent("li");
if($(liTag).length) {
$(sel).closest("div[cmd='"+selType+"']")
.after('<div class="makeTable" id="devSpecHelp"></div>')
$("#devSpecHelp").html($(liTag).html());
}
}
$("#content > #workbench").remove();
});
FW_displayHelp(devName, sel, selType, val, 1);
});
FW_smallScreenCommands();
@ -365,18 +332,85 @@ FW_jqueryReadyFn()
}
var FW_helpData;
function
FW_displayHelp(devName, sel, selType, val, level)
{
FW_getHelp(devName, function(data) { // show either the next or the outer li
$("#content")
.append("<div id='workbench' style='display:none'></div>");
$("#content > #workbench").html(data);
var mtype = $("#content > #workbench a[id]").attr("id"), aTag;
if(!mtype)
mtype = $("#content > #workbench a[name]").attr("name"), aTag;
if(level == 3) // commandref
mtype = "";
if(mtype) { // old style #1 syntax: MODULETYPEattrname
var mv = (""+mtype+"-"+selType+"-"+val).replace(/[^a-z0-9_-]/ig,'_');
aTag = $("#content > #workbench").find("a[id="+mv+"]");
if(!$(aTag).length) {
mv = (""+mtype+val).replace(/[^a-z0-9_-]/ig,'_');
aTag = $("#content > #workbench").find("a[name="+mv+"]");
}
}
if(!$(aTag).length) { // old style #2 syntax without type
var v = (val).replace(/[^a-z0-9_-]/ig,'_');
aTag = $("#content > #workbench").find("a[name="+v+"]");
}
if($(aTag).length) {
var liTag = $(aTag).next("li");
if(!$(liTag).length)
liTag = $(aTag).parent("li");
if(!$(liTag).length)
liTag = $(aTag).parent().next("li");
if($(liTag).length) {
$(sel).closest("div[cmd='"+selType+"']")
.after('<div class="makeTable" id="devSpecHelp"></div>')
$("#devSpecHelp").html($(liTag).html());
}
}
$("#content > #workbench").remove();
if(!$(aTag).length) {
if(devName != "FHEMWEB" && level == 1)
return FW_displayHelp("FHEMWEB", sel, selType, val, 2);
if(devName != "commandref" && level < 3)
return FW_displayHelp("commandref", sel, selType, val, 3);
}
});
}
var FW_helpData={};
function
FW_getHelp(dev, fn)
{
if(FW_helpData)
return fn(FW_helpData);
if(FW_helpData[dev])
return fn(FW_helpData[dev]);
if(dev == "commandref") {
var lang = $("body").attr("data-language");
var url = FW_root+"/docs/commandref_frame"+
(lang == "EN" ? "" : "_"+lang)+".html";
log(url);
$.ajax({
url:url, headers: { "cache-control": "no-cache" },
success: function(data, textStatus, req){
FW_helpData[dev] = data;
return fn(data);
},
error:function(xhr, status, err) { log("E:"+err+"/"+status); }
});
return;
}
FW_cmd(FW_root+"?cmd=help "+dev+"&XHR=1", function(data) {
if(data.match(/^<html>No help found/) &&
!dev.match(" DE")) // for our german only friends
return FW_getHelp(dev+" DE", fn);
FW_helpData = data;
return fn(FW_helpData);
FW_helpData[dev] = data;
return fn(data);
});
}