Neues Design: Tile

[mivola]

Ich denke das ist ist es was Du suchst: https://www.cometvisu.org/CometVisu/...get-pair.html#
Wenn die beiden "halben Kacheln" auf dem Handy neben einander statt untereinander sein sollen einfach das Attribut "allow-column-layout=true" hinzufügen.

Danke, das hilft schonmal etwas. Wobei etwas mehr Dynamik (große Widgets auf großen Screens, kleine Widgets auf kleinen Screens) auch nicht schlecht wäre...


Bzgl Influx: folgende Query funktioniert im Data Explorer:

from(bucket: "myBucket")
  |> range(start: -2d)
  |> filter(fn: (r) => r["_measurement"] == "mqtt_consumer")
  |> filter(fn: (r) => r["_field"] == "outsidetemp_value")

Dann sollte doch so ein Dataset funktionieren, oder?

<dataset chart-type="line" src="flux://myOrg@myBucket/mqtt_consumer/outsidetemp_value"/>

Allerdings bleibt das Feld leer :-(

Wenn ich den alternativen Ansatz wähle, funktioniert es zwar, aber der Editor zeigt einen Fehler an:
image.png


Und wenn ich MQTT abfrage, kommt auch ein Fehler im Editor:
image.png
Danke für die Hilfe!
Micha

[peuter]

Danke, das hilft schonmal etwas. Wobei etwas mehr Dynamik (große Widgets auf großen Screens, kleine Widgets auf kleinen Screens) auch nicht schlecht wäre...

Grundsätzlich ist das Design nach dem „Mobile-first“ Ansatz entworfen, d.h. es gibt kein Widget was breiter ist als ein Smartphone Bildschirm im Hochformat. Für das Design heißt das maximal doppelte Kachelbreite. Die vordefinierten Widgets benötigen nicht mehr Platz als eine Kachelbreite.
Bei eigenen Widgets kannst Du das natürlich freier wählen, wenn Du schon mit Charts rumspielst hast Du da vermutlich schon ein Widget mit doppelter Kachelbreite. Das ist alles bisher nur noch nicht dokumentiert, daher kann ich da keinen Link in die Doku beisteuern. Der Editor sollte bei der Größenangabe eigentlich die möglichen Werte angeben. Es gibt (in Kachelbreite x Kachelhöhe) 0,5x1, 1x1 (normale Kachel), 2+1, 2x2 und 2x4 (wenn ich mich richtig erinnere).

[peuter]

Bzgl Influx: folgende Query funktioniert im Data Explorer:

from(bucket: "myBucket")
|> range(start: -2d)
|> filter(fn: (r) => r["_measurement"] == "mqtt_consumer")
|> filter(fn: (r) => r["_field"] == "outsidetemp_value")

Dann sollte doch so ein Dataset funktionieren, oder?

<dataset chart-type="line" src="flux://myOrg@myBucket/mqtt_consumer/outsidetemp_value"/>

Allerdings bleibt das Feld leer :-(

Wenn ich den alternativen Ansatz wähle, funktioniert es zwar, aber der Editor zeigt einen Fehler an:
image.png

Den Fehler im Editor bekommst Du vermutlich durch das leeren des Browser Caches weg. Ansonsten kannst Du den erstmal ignorieren.
Warum die Query auf dem einen Weg nicht geht, kann man nur rausfinden indem man nachschaut was da nun tatsächlich als Query an den Server geschickt wird. Wenn du die Entwicklertools des Browsers öffnest (mit F12) und dort auf den Netzwerk-Reiter gehts, dann kannst Du da mal nach "proxy" filtern und solltest dann alle Anfragen an die Datenbank sehen, da musst Du nun die richtige finden (also die die nicht funktioniert, ggf. alles andere in der Config auskommentieren, falls es nicht möglich ist die richtige Anfrage zu identifizieren). Wenn Du die anklickst solltest du sehen kann was da als "Nutzlast" an den Server geschickt wird und da sollte dann auch ein Unterschied zu deiner funktionierenden Query zu sehen sein. Du kannst da auch die Antwort vom Server sehen.

Und wenn ich MQTT abfrage, kommt auch ein Fehler im Editor:
image.png

Ich schätze mal dass wir da noch was am Schema anpassen müssen, das ist aber kein Fehler, einfach ebenfalls vorerst ignorieren.

[mivola]

Warum die Query auf dem einen Weg nicht geht, kann man nur rausfinden indem man nachschaut was da nun tatsächlich als Query an den Server geschickt wird.
.....
solltest du sehen kann was da als "Nutzlast" an den Server geschickt wird und da sollte dann auch ein Unterschied zu deiner funktionierenden Query zu sehen sein. Du kannst da auch die Antwort vom Server sehen.

Also ich habe mich mal auf die Suche gemacht:

Hier der fehlerhafte Request:

url: 
http://myorg@mybucket/mqtt_consumer/outsidetemp_value&range=start%3A%202023-08-17T14%3A27%3A43Z%2C%20stop%3A%202023-08-18T14%3A27%3A43Z

payload: 
from(bucket:"mybucket") |> range(start: 2023-08-17T14:27:43Z, stop: 2023-08-18T14:27:43Z) |> filter(fn: (r) => r._measurement == "mqtt_consumer" and r._field == "outsidetemp_value") |> aggregateWindow(every: 1h, fn: mean)

und hier der funktionierende Request:

url:
http://myorg@inline/&range=start%3A%202023-08-17T14%3A27%3A43Z%2C%20stop%3A%202023-08-18T14%3A27%3A43Z

payload:
from(bucket: "myBucket") |> range(start: -2d) |> filter(fn: (r) => r["_measurement"] == "mqtt_consumer") |> filter(fn: (r) => r["_field"] == "outsidetemp_value") |> aggregateWindow(every: 1h, fn: mean)

Der Payload sieht sehr ähnlich aus. Wenn ich den nicht funktionierenden Payload direkt in der InfluxDB ausführe, bekomme ich jedoch den Fehler, dass der Bucket nicht gefunden werden konnte. Und warum nicht? Weil es case sensitive ist! Der Bucket heißt "myBucket" (so steht es auch in der Config) aber im Request heißt es "mybucket"! Ich weiß nicht, ob es alleine daran liegt oder ob auch die unterschiedliche URL relevant ist (habe es leider nicht geschafft mit einem anderen Bucket zu testen). Das versuche ich später mal nachzuholen...

VG
Micha

[mivola]

Es gibt im Tile-Design Listen die von unterschiedlichen Datenquellen gefüttert werden könne u.a. auch aus dem bekannten RSSLog siehe
https://www.cometvisu.org/CometVisu/...ents/list.html ganz unten unter "Mitgelieferte Modelle", das ist aber kein vollwertiger Ersatz des RSSLog Plugins (es dürften ein paar Features fehlen, da ich das selbst nicht benutzt haben, kann ich da aber jetzt nicht genau sagen was).

Die das RSSLog funktioniert soweit mit dem Tile Design :-) Einzig das Anzeigen eines Icon und das Bestätigen eines Eintrags habe ich nicht hinbekommen. So sieht es im gewohnten Design aus:
image.png
Ich habe das Mapping aus der config_demosrss.xml übernommen und angepasst, aber das funktioniert nicht:

        <cv-mapping name="StateConfirm">
            <entry value="0"><cv-icon color="#A00000">info_warning</cv-icon></entry>
            <entry value="1"><cv-icon color="#00A000">info_ack</cv-icon></entry>
        </cv-mapping>​

image.png

Ich vermute man müsste das Template noch irgendwie anpassen, aber da weiß ich nicht wie...

            <template>
              <li style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                <div style="font-weight: bold">${state} - ${mapping} - ${title}</div>
                <div style="color: #999">${content}</div>
              </li>
            </template>​

Danke und VG
Micha

[peuter]

Der Payload sieht sehr ähnlich aus. Wenn ich den nicht funktionierenden Payload direkt in der InfluxDB ausführe, bekomme ich jedoch den Fehler, dass der Bucket nicht gefunden werden konnte. Und warum nicht? Weil es case sensitive ist!

Ja wenn das case-sensitiv ist dann funktioniert das so noch nicht. Da ich nur einen Bucket habe und der keine Großbuchstaben hat, ist mir das nicht aufgefallen. Wird im nächsten Nighty-Build gefixt sein.

Das selbe gilt für die Erweiterten Features des RssLog-Plugins. Die wurde bisher noch nicht unterstützt. Im nächsten NightlyBuild der CometVisu kann man dann das Mapping benutzen und Einträge bestätigen oder löschen.

[peuter]

Version v0.13.0-dev104 ist jetzt verfügbar und sollte die zuletzt genannten Probleme lösen. Dokumentation wie man die neuen RssLog-Features benutzt gibt es hier:
https://www.cometvisu.org/CometVisu/...ents/list.html

[mivola]

Das selbe gilt für die Erweiterten Features des RssLog-Plugins. Die wurde bisher noch nicht unterstützt. Im nächsten NightlyBuild der CometVisu kann man dann das Mapping benutzen und Einträge bestätigen oder löschen.

Super, klasse! Vielen Dank! Das funktioniert soweit sehr gut!

Ja wenn das case-sensitiv ist dann funktioniert das so noch nicht. Da ich nur einen Bucket habe und der keine Großbuchstaben hat, ist mir das nicht aufgefallen. Wird im nächsten Nighty-Build gefixt sein.

Danke! Jetzt funktioniert die Abfrage per

<dataset chart-type="line" src="flux://myOrg@myBucket/mqtt_consumer/outsidetemp_value"/>

Jedoch gibt es nun einen Fehler beim Laden der Config wenn ich die zuvor funktionierende @inline-Alternative drin habe:

TypeError: Cannot read properties of null (reading 'replace')
Normalized Stack:
http://mediaserver:8097/cv/index.js:88:992750
http://mediaserver:8097/cv/package-2.js:1:88532
http://mediaserver:8097/cv/package-2.js:1:89014
http://mediaserver:8097/cv/package-2.js:1:89125
http://mediaserver:8097/cv/index.js:71:198045
http://mediaserver:8097/cv/index.js:71:226333
http://mediaserver:8097/cv/index.js:71:358281
http://mediaserver:8097/cv/index.js:71:226297
Array.forEach ()
http://mediaserver:8097/cv/index.js:71:226202
http://mediaserver:8097/cv/index.js:71:178205
http://mediaserver:8097/cv/index.js:71:188847
http://mediaserver:8097/cv/index.js:71:358281
http://mediaserver:8097/cv/index.js:71:188805
eval at __P_215_13 (http://mediaserver:8097/cv/index.js:71:119478 [repeated 2 times]​

In der Console sehe ich:

Manager.js:8 001059 cv.io.timeseries.FluxSource[174-0]: invalid url flux://myOrg@inline this source will not be usable!

Ich habe das Problem auch via sentry.io reported...


Danke und VG
Micha

[peuter]

Jedoch gibt es nun einen Fehler beim Laden der Config wenn ich die zuvor funktionierende @inline-Alternative drin habe:

Das sollte mittlerweile auch wieder funktionieren.

[mivola]

Das sollte mittlerweile auch wieder funktionieren.

Ja danke, das passt. Wirklich klasse! Vielen Dank!!

Jetzt habe ich noch das "cv-status-chart" Widget ausprobiert und das funktioniert auch sehr gut mit der Influx-DB. Jedoch ist mMn noch ein Fehler wenn man im Chart dann eine Woche auswählt. Dann wird folgende Anfrage gesendet:

flux://myOrg@myBucket/mqtt_consumer/outsidetemp_value&range=start%3A%202023-08-25T22%3A00%3A00Z%2C%20stop%3A%202023-09-22T15%3A35%3A33Z

=> Also vom 25.08. - 22.09. und das Chart hat dann auch zu viele Werte:

image.png

Danke und VG
Micha

[peuter]

Jedoch ist mMn noch ein Fehler wenn man im Chart dann eine Woche auswählt. Dann wird folgende Anfrage gesendet:

flux://myOrg@myBucket/mqtt_consumer/outsidetemp_value&range=start%3A%202023-08-25T22%3A00%3A00Z%2C%20stop%3A%202023-09-22T15%3A35%3A33Z

=> Also vom 25.08. - 22.09. und das Chart hat dann auch zu viele Werte:

Dieses Problem sollte mit der v0.13.0-dev108 auch behoben sein.

[mivola]

Dieses Problem sollte mit der v0.13.0-dev108 auch behoben sein.

Ich habe jetzt mal auf die aktuelle Version geupdated: 2023-12-07T01:13:23.943Z
Leider besteht das Problem mMn immernoch. Wenn ich in den Wochen in die Vergangenheit navigiere, werden die Zeiträume immer länger:
image.png

Außerdem habe ich etwas mit dem neuen Energy Widget gespielt. Erstmal vielen Dank dafür, wirklich sehr schick, hilfreich & flexibel! Jedoch habe ich einige Probleme:
- die Elemente liegen bei mir immer außerhalb des Rahmens, evtl wg der Pagination?
image.png

- ich würde gern 3 verschiedene Strings mit type="pv" anzeigen - wie kann ich kenntlich machen welcher Wert zu welchem String gehört? Das "title" Attribut hat keine Auswirkung. Ich weiß, dass in dem kleinen Widget wenig Platz ist, aber zumindest in der Vollbilddarstellung könnte man den Title ja anzeigen, oder?

Danke und VG,
Micha

[peuter]

Ich habe jetzt mal auf die aktuelle Version geupdated: 2023-12-07T01:13:23.943Z
Leider besteht das Problem mMn immernoch. Wenn ich in den Wochen in die Vergangenheit navigiere, werden die Zeiträume immer länger:

Ja da scheint es nur bei der Wochenansicht noch ein Problem zu geben. Die Anfrage für die Daten ist korrekt (das war der Fehler den ich damals gefixt habe), aber irgendwie schaut es so aus, als ob der die alten Daten nicht löschen würde sondern manchmal einfach die neu angefragte Woche mit dranhängt. Muss ich mit mal anschauen.

- die Elemente liegen bei mir immer außerhalb des Rahmens, evtl wg der Pagination?

Nein die pagination liegt immer drüber und hat keinen Einfluss auf das Layout. Die korrekte Zentrierung des Inhalts ist bei diesem Widget mit die größte Schwierigkeit, es ist schon deutlich besser als es Anfangs mal war, aber da dürfte sich noch der ein oder andere Bug drin verstecken. Das ist auch der Grund warum ich dieses Widget hier noch nicht groß angekündigt habe.
Welchen Browser benutzt du denn? Und kannst Du mal den Config-Schnipsel von deinem Energy-Widget hier posten, damit kann ich dass dann hoffentlich nachstellen.

- ich würde gern 3 verschiedene Strings mit type="pv" anzeigen - wie kann ich kenntlich machen welcher Wert zu welchem String gehört? Das "title" Attribut hat keine Auswirkung. Ich weiß, dass in dem kleinen Widget wenig Platz ist, aber zumindest in der Vollbilddarstellung könnte man den Title ja anzeigen, oder?

Dafür gibt es momentan noch keine Lösung, wie Du schon bemerkt hast wird es im kleinen keinen Platz geben und im Fullscreen auch nicht unbedingt (auf dem Mobiltelefon ist das im Fullscreen nicht wesentlich größer, zumindest nicht im Hochformat). Es gibt auch bisher keinen Weg innerhalb der kleinen, runden Wertanzeigen im Fullscreen mehr Inhalt anzuzeigen. Ich glaube auch nicht das ich sowas einbauen werde, zumindest die Lösungswege die mir derzeit einfallen würden alle nur zu diversen Beschwerden führen warum es in irgendeinem Fall nicht funktioniert.

[mivola]

Welchen Browser benutzt du denn? Und kannst Du mal den Config-Schnipsel von deinem Energy-Widget hier posten, damit kann ich dass dann hoffentlich nachstellen.

Ich nutze normalerweise Chrome auf Windows. Habe aber auch nochmal mit Firefox und Chrome auf Android getestet: selbes Ergebnis.
Hier ist das Snippet:

<cv-energy columns="6" view-box="0 0 3 3" house-row="1" center-x="false" allow-fullscreen="true">
<cv-power-entity id="PV-TP15-S1" title="TP15-S1" type="pv" icon="knxuf-scene_solar_panel" connect-to="house" row="0" column="0">
<cv-address transform="DPT:12.001" mode="read">6/3/84</cv-address>
</cv-power-entity>
<cv-power-entity id="PV-TP15-S2" type="pv" icon="knxuf-scene_solar_panel" connect-to="house" row="0" column="1">
<cv-address transform="DPT:12.001" mode="read">6/3/85</cv-address>
</cv-power-entity>
<cv-power-entity id="PV-TP04-S1" type="pv" icon="knxuf-scene_solar_panel" connect-to="house" row="0" column="2">
<cv-address transform="DPT:12.001" mode="read">6/3/85</cv-address>
</cv-power-entity>
<cv-power-entity id="oWB" type="charger" connect-to="house" row="1" column="0">
<cv-address transform="DPT:9.024" mode="read">12/1/100</cv-address>
</cv-power-entity>
<cv-power-entity id="grid" type="grid" connect-to="house" row="1" column="2">
<cv-address transform="DPT:12.001" mode="read">6/3/42</cv-address>
</cv-power-entity>
<cv-power-entity id="WP" type="heatpump" connect-from="house" row="2" column="1">
<cv-address transform="DPT:12.001" mode="read">6/3/22</cv-address>
</cv-power-entity>
</cv-energy>

Wenn ich in der ersten Zeile den Wert für "columns" auf 3 ändere (also keine Pagination habe), dann passt die Positionierung.

Dafür gibt es momentan noch keine Lösung, wie Du schon bemerkt hast wird es im kleinen keinen Platz geben und im Fullscreen auch nicht unbedingt (auf dem Mobiltelefon ist das im Fullscreen nicht wesentlich größer, zumindest nicht im Hochformat). Es gibt auch bisher keinen Weg innerhalb der kleinen, runden Wertanzeigen im Fullscreen mehr Inhalt anzuzeigen. Ich glaube auch nicht das ich sowas einbauen werde, zumindest die Lösungswege die mir derzeit einfallen würden alle nur zu diversen Beschwerden führen warum es in irgendeinem Fall nicht funktioniert.

Ja, das kann ich nachvollziehen. Aber auf der anderen Seite ist es irgendwie auch etwas unbefriedigend. Könnte man (mit SVG?) ein dynamisches Icon erzeugen welches einen Text beinhaltet? Oder wie/wo könnte man ein Icon manuell/statisch mit etwas Text versehen? Oder statt dem Icon einen Text anzeigen?

Danke und VG
Micha

[peuter]

Wenn ich in der ersten Zeile den Wert für "columns" auf 3 ändere (also keine Pagination habe), dann passt die Positionierung.

Du hast ja auch nur drei Spalten mit Inhalt, es gibt also keine "2. Seite" wo man hin navigieren könnte. Ist zwar immer noch ein Bug, aber mit der aktuellen Config ist das mit dem colspan="3" erstmal ein Workaround. Soll da noch mehr Inhalt rein, oder wozu willst Du Pagination haben?

Ja, das kann ich nachvollziehen. Aber auf der anderen Seite ist es irgendwie auch etwas unbefriedigend. Könnte man (mit SVG?) ein dynamisches Icon erzeugen welches einen Text beinhaltet? Oder wie/wo könnte man ein Icon manuell/statisch mit etwas Text versehen? Oder statt dem Icon einen Text anzeigen?

Das geht alles nicht, ich kann da lediglich einen Support für das Title-Attribute einbauen (da es im Schema erlaubt ist, fehlte dieser Support sowieso). Dann wird der Text als Tooltip angezeigt, wenn man den Mauszeiger auf dem Element stehen lässt. Das funktioniert dann auch unabhängig von der Größe des Elements und von der Länge des Titels.