http://wiki.fhem.de/w/index.php?action=history&feed=atom&title=FTUI3_Label
FTUI3 Label - Versionsgeschichte
2026-04-22T03:08:11Z
Versionsgeschichte dieser Seite in FHEMWiki
MediaWiki 1.43.6
http://wiki.fhem.de/w/index.php?title=FTUI3_Label&diff=40780&oldid=prev
Pahenning: /* Zeilenumbruch im Label */
2026-02-07T09:54:25Z
<p><span class="autocomment">Zeilenumbruch im Label</span></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="de">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Nächstältere Version</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Version vom 7. Februar 2026, 11:54 Uhr</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l18">Zeile 18:</td>
<td colspan="2" class="diff-lineno">Zeile 18:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> return ret;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> return ret;</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> }</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> }</div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"> </script></ins></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></pre></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></pre></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Mit dieser Funktion wird der in der Variablen <code>input</code> übergebene Label-Text an den eingefügten Zeilenumbrüchen <code><br></code> aufgespalten und in eine so genannte ungeordnete Liste (unordered list <code>&lt;ul></code>) umzuwandeln und zurückzugeben. In einem <code>&lt;ftui-label></code>-Element wird dies angewendet als </div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Mit dieser Funktion wird der in der Variablen <code>input</code> übergebene Label-Text an den eingefügten Zeilenumbrüchen <code><br></code> aufgespalten und in eine so genannte ungeordnete Liste (unordered list <code>&lt;ul></code>) umzuwandeln und zurückzugeben. In einem <code>&lt;ftui-label></code>-Element wird dies angewendet als </div></td></tr>
<!-- diff cache key c1fhemwiki:diff:1.41:old-40215:rev-40780:php=table -->
</table>
Pahenning
http://wiki.fhem.de/w/index.php?title=FTUI3_Label&diff=40215&oldid=prev
Pahenning: /* Zeilenumbruch im Label */
2025-06-04T13:41:06Z
<p><span class="autocomment">Zeilenumbruch im Label</span></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="de">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Nächstältere Version</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Version vom 4. Juni 2025, 15:41 Uhr</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1">Zeile 1:</td>
<td colspan="2" class="diff-lineno">Zeile 1:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==Zeilenumbruch im Label==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==Zeilenumbruch im Label==</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Wenn der Inhalt des Labels nur aus Text besteht, kann ein Zeilenumbruch durch das Einfügen des Strings <code><del style="font-weight: bold; text-decoration: none;"><</del>br></code> erzwungen werden.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Wenn der Inhalt des Labels nur aus Text besteht, kann ein Zeilenumbruch durch das Einfügen des Strings <code><ins style="font-weight: bold; text-decoration: none;">&lt;</ins>br></code> erzwungen werden.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Wenn allerdings komplexere HTML-Inhalte enthalten sind, z.B. <code><img ...></code>-Elemente, werden solche Zeilenumbrüche ignoriert. Mittels eines einfachen Tricks kann allerdings Abhilfe geschaffen werden. Dazu definiert man im Seitenheader etwas JavaScript-Code:</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Wenn allerdings komplexere HTML-Inhalte enthalten sind, z.B. <code><img ...></code>-Elemente, werden solche Zeilenumbrüche ignoriert. Mittels eines einfachen Tricks kann allerdings Abhilfe geschaffen werden. Dazu definiert man im Seitenheader etwas JavaScript-Code:</div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"><pre></ins></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <script></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <script></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> const ftui_linebreaker = () => input => linebreaker(input);</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> const ftui_linebreaker = () => input => linebreaker(input);</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l17">Zeile 17:</td>
<td colspan="2" class="diff-lineno">Zeile 18:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> return ret;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> return ret;</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> }</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> }</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Mit dieser Funktion wird der in der Variablen <code>input</code> übergebene Label-Text an den eingefügten Zeilenumbrüchen <code><br></code> aufgespalten und in eine so genannte ungeordnete Liste (unordered list <code><del style="font-weight: bold; text-decoration: none;"><</del>ul></code>) umzuwandeln und zurückzugeben. In einem <code><del style="font-weight: bold; text-decoration: none;"><</del>ftui-label></code>-Element wird dies angewendet als </div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></pre></ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Mit dieser Funktion wird der in der Variablen <code>input</code> übergebene Label-Text an den eingefügten Zeilenumbrüchen <code><br></code> aufgespalten und in eine so genannte ungeordnete Liste (unordered list <code><ins style="font-weight: bold; text-decoration: none;">&lt;</ins>ul></code>) umzuwandeln und zurückzugeben. In einem <code><ins style="font-weight: bold; text-decoration: none;">&lt;</ins>ftui-label></code>-Element wird dies angewendet als </div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"><pre></ins></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <ftui-label [text]="DEVICE:READING | ftui_linebreaker()" scroll></ftui-label></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <ftui-label [text]="DEVICE:READING | ftui_linebreaker()" scroll></ftui-label></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></pre></ins></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>und resultiert in einer sauberen Ausrichtung der einzelnen Zeilen.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>und resultiert in einer sauberen Ausrichtung der einzelnen Zeilen.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Kategorie:FHEM Tablet UI V3]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Kategorie:FHEM Tablet UI V3]]</div></td></tr>
</table>
Pahenning
http://wiki.fhem.de/w/index.php?title=FTUI3_Label&diff=40214&oldid=prev
Pahenning: /* Zeilenumbruch im Label */
2025-06-04T13:34:31Z
<p><span class="autocomment">Zeilenumbruch im Label</span></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="de">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Nächstältere Version</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Version vom 4. Juni 2025, 15:34 Uhr</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l7">Zeile 7:</td>
<td colspan="2" class="diff-lineno">Zeile 7:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> ...</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> ...</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> //-- helper function for linebreak</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> //-- helper function for linebreak</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> function linebreaker(lines){</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> function linebreaker(lines){</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> let linea = lines.split('<br>');</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> let linea = lines.split('<br>');</div></td></tr>
</table>
Pahenning
http://wiki.fhem.de/w/index.php?title=FTUI3_Label&diff=40213&oldid=prev
Pahenning: Die Seite wurde neu angelegt: „==Zeilenumbruch im Label== Wenn der Inhalt des Labels nur aus Text besteht, kann ein Zeilenumbruch durch das Einfügen des Strings <code><br></code> erzwungen werden. Wenn allerdings komplexere HTML-Inhalte enthalten sind, z.B. <code><img ...></code>-Elemente, werden solche Zeilenumbrüche ignoriert. Mittels eines einfachen Tricks kann allerdings Abhilfe geschaffen werden. Dazu definiert man im Seitenheader etwas JavaScript-Code: <script> const ftui_…“
2025-06-04T13:34:12Z
<p>Die Seite wurde neu angelegt: „==Zeilenumbruch im Label== Wenn der Inhalt des Labels nur aus Text besteht, kann ein Zeilenumbruch durch das Einfügen des Strings <code><br></code> erzwungen werden. Wenn allerdings komplexere HTML-Inhalte enthalten sind, z.B. <code><img ...></code>-Elemente, werden solche Zeilenumbrüche ignoriert. Mittels eines einfachen Tricks kann allerdings Abhilfe geschaffen werden. Dazu definiert man im Seitenheader etwas JavaScript-Code: <script> const ftui_…“</p>
<p><b>Neue Seite</b></p><div>==Zeilenumbruch im Label==<br />
Wenn der Inhalt des Labels nur aus Text besteht, kann ein Zeilenumbruch durch das Einfügen des Strings <code><br></code> erzwungen werden.<br />
<br />
Wenn allerdings komplexere HTML-Inhalte enthalten sind, z.B. <code><img ...></code>-Elemente, werden solche Zeilenumbrüche ignoriert. Mittels eines einfachen Tricks kann allerdings Abhilfe geschaffen werden. Dazu definiert man im Seitenheader etwas JavaScript-Code:<br />
<script><br />
const ftui_linebreaker = () => input => linebreaker(input);<br />
...<br />
//-- helper function for linebreak<br />
<br />
function linebreaker(lines){<br />
let linea = lines.split('<br>');<br />
let num=linea.length;<br />
let ret='<ul style="list-style-type:none;margin-left:0px;">';<br />
for (var i = 0; i < num; i++) {<br />
ret+='<li>'+linea[i]+'</li>';<br />
}<br />
ret+='</ul>';<br />
return ret;<br />
}<br />
Mit dieser Funktion wird der in der Variablen <code>input</code> übergebene Label-Text an den eingefügten Zeilenumbrüchen <code><br></code> aufgespalten und in eine so genannte ungeordnete Liste (unordered list <code><ul></code>) umzuwandeln und zurückzugeben. In einem <code><ftui-label></code>-Element wird dies angewendet als <br />
<ftui-label [text]="DEVICE:READING | ftui_linebreaker()" scroll></ftui-label><br />
und resultiert in einer sauberen Ausrichtung der einzelnen Zeilen.<br />
[[Kategorie:FHEM Tablet UI V3]]</div>
Pahenning