Hauptmenü

FTUI version 3

Begonnen von Bunnu, 25 Oktober 2020, 09:25:41

Vorheriges Thema - Nächstes Thema

meier81

Zitat von: mr_petz am 29 Juli 2022, 21:27:22
Zum svg die Ergänzung:
Mit Bsp.:

<title xmlns="http://www.w3.org/2000/svg">XYZ Icon</title>

im svg, dann wird das auch angezeigt.
https://github.com/knowthelist/ftui/blame/master/www/ftui/icons/Celsius.svg#L3


setstate übergibt hier im grid den title mit row und col:
https://github.com/knowthelist/ftui/blob/master/www/ftui/components/grid/grid.component.js#L127

LG

Vielen Dank mal für die Infos, das mit den SVG-Dateien habe ich soweit erledigt, dort habe ich in meinen neu hinzugefügten Dateien den Title korrigiert und jetzt ist das auch alles gleich und korrekt.

Bezüglich des row und col habe ich dort tatsächlich nicht nachgeschaut, jetzt weiß ich ja aber wo ich es anpassen könnte  ;)

Gruß Markus
QNAP NAS mit Debian VM, darauf FHEM, debmatic, influxdb2 und Grafana || HB-RF-ETH || SIGNALduino 433MHz mit Maple mini || WS980 Wetterstation || Xiaomi Mi Robot mit valetudo-FW || Buderus web KM100 || div. Tasmota-Devices

mr_petz

Zitat von: meier81 am 29 Juli 2022, 22:13:21
...
Bezüglich des row und col habe ich dort tatsächlich nicht nachgeschaut, jetzt weiß ich ja aber wo ich es anpassen könnte  ;)

Gruß Markus

Du musst da nur Aufpassen. Jedes Update der grid js bzw von Ftui3 überschreibt deine Änderungen...
LG

meier81

Zitat von: mr_petz am 29 Juli 2022, 22:31:30
Du musst da nur Aufpassen. Jedes Update der grid js bzw von Ftui3 überschreibt deine Änderungen...
LG

Ja, daran habe ich auch schon gedacht. Ich werde es jetzt erstmal nicht ändern solange ich hier noch am basteln bin, wenn´s die Frau nicht stört bleibt´s glaube ich auch so  :D
QNAP NAS mit Debian VM, darauf FHEM, debmatic, influxdb2 und Grafana || HB-RF-ETH || SIGNALduino 433MHz mit Maple mini || WS980 Wetterstation || Xiaomi Mi Robot mit valetudo-FW || Buderus web KM100 || div. Tasmota-Devices

mr_petz

Vielleicht baut setstate für dein Anliegen noch was ein.
LG mr_petz

meier81

Guten Morgen,

hab mal wieder ne Frage an die Spezi´s  ;)

Ich habe bei mir den Fall das ich meine Plots über influxdb und dann Grafana visualisiere, das habe ich jetzt per iframe eingebunden. Funktioniert auch alles so wie´s soll, gibt nur ein kleines Problem bezüglich der Hintergrundfarbe des Plots. Dieser hat natürlich nicht die gleiche Farbe wie die Grid-Elemente. Ich kann in Grafana einstellen das der Graph einen transparenten Hintergrund hat, das funktioniert auch, nur habe ich dann in FTUI die Hintergrundfarbe meiner Oberfläche.
Gibt es hier die Möglichkeit dem iframe Objekt eine Hintergrundfarbe mitzugeben? Hab zwar auch schon mehrere Sachen ausprobiert, hat aber nichts davon funktioniert.

Gruß

Markus
QNAP NAS mit Debian VM, darauf FHEM, debmatic, influxdb2 und Grafana || HB-RF-ETH || SIGNALduino 433MHz mit Maple mini || WS980 Wetterstation || Xiaomi Mi Robot mit valetudo-FW || Buderus web KM100 || div. Tasmota-Devices

yersinia

Wie bindest du den iframe ein?
Wenn normal über <iframe>, dann versuch eine dieser Lösungen.
viele Grüße, yersinia
----
FHEM 6.3 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

mr_petz

Oder per ftui-binding und map:
Bsp.:

<iframe ftui-binding width="100" height="100" [style]="device | map('on:`background:white;`,off:`background:black;`')"></iframe>


LG mr_petz

meier81

Zitat von: yersinia am 09 August 2022, 08:28:39
Wie bindest du den iframe ein?
Wenn normal über <iframe>, dann versuch eine dieser Lösungen.

Ja, binde sie normal als iframe ein:


  <ftui-grid-tile row="3" col="1" height="3" width="18" shape="round">
    <header>Trend</header>
    <ftui-row>
      <ftui-column>
        <iframe src="http://192.168.179.50:3000/d-solo/SEmMd_zVz/ftui3?orgId=1&refresh=5m&panelId=2&kiosk" width="100%" height="100%" frameborder="0"></iframe>
      </ftui-column>
    </ftui-row>
  </ftui-grid-tile>


Hatte die Seite von dir gestern auch schon gefunden, alles ausprobiert, mag aber nicht. Und für das JS bin ich anscheinend zu doof.
QNAP NAS mit Debian VM, darauf FHEM, debmatic, influxdb2 und Grafana || HB-RF-ETH || SIGNALduino 433MHz mit Maple mini || WS980 Wetterstation || Xiaomi Mi Robot mit valetudo-FW || Buderus web KM100 || div. Tasmota-Devices

yersinia

Hast du mal die favorisierte Antwort versucht? Einfach mal testen ob das überhaupt bei dir geht.
  <ftui-grid-tile row="3" col="1" height="3" width="18" shape="round">
    <header>Trend</header>
    <ftui-row>
      <ftui-column>
        <iframe src="http://192.168.179.50:3000/d-solo/SEmMd_zVz/ftui3?orgId=1&refresh=5m&panelId=2&kiosk" width="100%" height="100%" frameborder="0" allowtransparency="true" style="background-color: #40E0D0;"></iframe>
      </ftui-column>
    </ftui-row>
  </ftui-grid-tile>

Ich habe bewusst #40E0D0 gewählt, da die Farbe grell ist - sieht man besser.

Und, die Nachricht von mr_petz hast du gesehen?
Zitat von: mr_petz am 09 August 2022, 08:56:26
Oder per ftui-binding und map:
Bsp.:

<iframe ftui-binding width="100" height="100" [style]="device | map('on:`background:white;`,off:`background:black;`')"></iframe>


LG mr_petz
viele Grüße, yersinia
----
FHEM 6.3 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

mr_petz

#2529
Nachtrag.
Wenn von meier81 der Plot einen eigenen HTML code mit css besitzt, dann ziehen deren css und/oder style Attribute.

Edit: Wenn es so wie in den Demo´s (https://play.grafana.org/d/6NmftOxZz/logs-panel?orgId=1) von grafana ist, wird es schwierig. Da kannst du nur in grafana spielen.
Ansonsten könntest du das grafana html in ein Reading schreiben und dann mit:

<ftui-content [content]="grafana:reading html"></ftui-content>

anzeigen lassen???

meier81

Vielen Dank für eure Vorschläge, hab auch alle probiert, geht so leider wirklich nicht da die Attribute von Grafana mitgegeben werden.

Hab nach weiterer Recherche rausgefunden wie man Grafana umstellen kann, hab´s probiert, funktioniert einwandfrei:

https://forum.iobroker.net/topic/29035/hintergrund-von-grafana-dashboard-in-vis-entfernen/4

Hat allerdings den Beigeschmack das generell die Dashboards von Grafana einen transparenten Hintergrund haben und nicht nur die, die ich in FTUI anzeigen lasse.

Ich werde es vielleicht mal so einstellen das die Hintergrundfarbe von Grafana die gleiche ist wie die von FTUI, dann habe ich FTUI erschlagen und in Grafana ist der Hintergrund dann etwas heller wie Standard.

Gruß Markus
QNAP NAS mit Debian VM, darauf FHEM, debmatic, influxdb2 und Grafana || HB-RF-ETH || SIGNALduino 433MHz mit Maple mini || WS980 Wetterstation || Xiaomi Mi Robot mit valetudo-FW || Buderus web KM100 || div. Tasmota-Devices

yersinia

Das ist auch nicht verwunderlich, da du über iframe eine eigene Webseite mit eigenen Regeln einbindest - und diese überschreiben die regeln vom Elternelement des iframes. Wenn du es sauberer haben willst, musst du die Hintergrundfarbe mit JavaScript manipulieren und jedes mal nachdem der iframe-Inhalt neu geladen worden ist. Dafür benötigst du vorher zu Analysezwecke zusätzlich die Struktur des von Grafana bereitgestellten HTML und (!) CSS codes. Den JavaScript Code würde ich nachgelagert und in Abhängigkeit vom iframe load laden und dann periodisch bzw onrefresh ausführen. Generell solltest du, wenn du es weiter vertiefen möchtest, einen eigenen Thread aufmachen.
Oder schaust dir alternativ die  Chart component an.
viele Grüße, yersinia
----
FHEM 6.3 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

mr_petz

Nochmal Nachtrag zum Testen:

<iframe id="myiframe" src="http://192.168.179.50:3000/d-solo/SEmMd_zVz/ftui3?orgId=1&refresh=5m&panelId=2&kiosk" width="100%" height="100%">
</iframe>
<script>
  document.querySelector("#myiframe").addEventListener ( "load", function () {this.contentWindow.document.body.style.backgroundColor = 'white !important';});
</script>

Damit wird der body des eingebundenen Codes mit dem Hintergrund weiß eingefärbt.
LG

meier81

Zitat von: mr_petz am 09 August 2022, 12:35:53
Nochmal Nachtrag zum Testen:

<iframe id="myiframe" src="http://192.168.179.50:3000/d-solo/SEmMd_zVz/ftui3?orgId=1&refresh=5m&panelId=2&kiosk" width="100%" height="100%">
</iframe>
<script>
  document.querySelector("#myiframe").addEventListener ( "load", function () {this.contentWindow.document.body.style.backgroundColor = 'white !important';});
</script>

Damit wird der body des eingebundenen Codes mit dem Hintergrund weiß eingefärbt.
LG

Also mit der Variante bekomme ich um das iframe-Fenster einen weißen Rahmen, am Plot selbst ändert sich leider nichts. Egal ob ich den Plot auf "transparent" stelle oder nicht.
QNAP NAS mit Debian VM, darauf FHEM, debmatic, influxdb2 und Grafana || HB-RF-ETH || SIGNALduino 433MHz mit Maple mini || WS980 Wetterstation || Xiaomi Mi Robot mit valetudo-FW || Buderus web KM100 || div. Tasmota-Devices

mr_petz

#2534
Ok. kannst du die html/den Code zur Verfügung stellen. Da könnte man vielleicht direkt auf den entsprechenden <Tag> gehen.
Oder eine bestehende css im Code austauschen??
LG

Edit: in der Demo von grafana müsste man auf:

<div class="panel-container" aria-label="Histogram panel">

Ist das bei dir auch so??

Edit2:
in der class panel-content kannst du einen Background angeben,
in der class panel-title kannst du einen Background angeben,
in der class panel-container kannst du einen Background angeben und im body.
Sollte alles in der css von grafana zufinden sein...