[Gelöst] TWS v1.5.2 / CV 0.11.2 : 2D-Füllstandsdemo funktioniert nicht

[Robosoc]

Ich wollte mich mal ein wenig mit den dynamischen SVG-Funktionen der CV beschäftigen, aber irgendwie läuft die Demo bei mir nicht ienmal richtig...

Ich kann mit dem Schieber den Füllstand des Behältern nicht ändern. Funktioniert die bei Euch?


Das Demo findet Ihr im Manager gleich als zweiten Eintrag mit dem Namen "2d3d*)".

Ich habe folgende Merkwürdigkeiten entdeckt:
In Chrome: Die Flow-Bewegung im Rohr funktioniert, aber die Füllstandsänderung abhängig vom Schieber nicht.
In Firefox und der Demo auf dem TWS funktioniert weder der Flow noch der Füllstand.
ABER: Wenn ich das Demo auf der CometVisu-Internetseite ausführe, dann funktionert im gleichen Firefox alles!

Deshalb glaube ich fast nicht, dass es am Browser liegt, sondern eher an der CometVisu Docker - Umgebung oder an Proxy-Themen oder ...keine ahnung... Daher einfach mal die Frage ob es bei Euch funktioniert.

[Chris M.]

OK, da ist was faul. Geht bei mir gerade auch nicht.

[Chris M.]

In der Entwicklungsversion ist der Fehler jetzt behoben, vgl. https://github.com/CometVisu/CometVisu/pull/989

Wenn Du mit dem Code spielen willst, dann bitte einfach die Datei durch diese ersetzen und es sollte wieder funktionieren: https://raw.githubusercontent.com/Comet ... red_pot.js

[Robosoc]

Moin Chris,

ich spiele inzwischen recht viel mit CSS und auch den SVG's rum und werde demnächst mal eine abgewandelte Design-Vorlage posten. Aber kannst Du mir mal einen Tipp geben, ob es überhaupt möglich ist (und wenn ja wie) zwei oder mehrere KNX-Werte in eine SVG zu übergeben und dort zu verarbeiten?

Ich habe es mit verschiedenen Ideen versucht u.A. Folgendes mit ThatGA als zweite Variable, aber leider ohne Erfolg:

Code: Alles auswählen

var qx = window.parent.qx;
var cv = window.parent.cv;

var backendName = cv.Config.configSettings.backend || cv.Config.backend;
var
  thisGA = '1/7/51',
  thisTransform = 'DPT:9.002',
  thatGA = '1/7/52',
  thatTransform = 'DPT:9.002',
  client = cv.Application.createClient(backendName, cv.Config.backendUrl);

client.update = function(json ) // overload the handler
{
  var h = cv.Transform.decode(thisTransform, json[thisGA] );
  if (h === undefined || isNaN(h)) {
    return;
  }
  var w = cv.Transform.decode(thatTransform, json[thatGA] );
  if (w === undefined || isNaN(w)) {
    return;
  }
  var filling = document.querySelector('#rect3855');
  filling.y.baseVal.value=200.57388 + (100-h*2*100)*2;
  filling.height.baseVal.value = h*2*100*2;
  document.querySelector('#path3029-4').setAttribute('d', 'm 524.85653,'+(200.57388+ (100-h*2*100)*2)+' a 100,37.795274 0 0 1 -200,0 100,37.795274 0 1 1 200,0 z');
};
  
client.user = 'demo_user'; // example for setting a user
client.subscribe( [thisGA] );
client.subscribe( [thatGA] )
#

Wobei hier die folgenden Zeilen als Versuch hinzugefügt wurden:
oben

Code: Alles auswählen

  thatGA = '1/7/52',
  thatTransform = 'DPT:9.002',

mitte

Code: Alles auswählen

  var w = cv.Transform.decode(thatTransform, json[thatGA] );
  if (w === undefined || isNaN(w)) {
    return;
  }

unten

Code: Alles auswählen

  client.subscribe( [thatGA] )

[Chris M.]

Hast Du schon

client.subscribe( [thisGA, thatGA] );

ausprobiert?

[Robosoc]

Jo, hatte ich und habe ich jetzt noch einmal...

Wenn ich dann einen Slider bewege um die Variable thisGA zu verändern, spuckt Firefox folgenden Fehler aus:


Lasse ich die untere Änderung weg und mache nur die obere un mittlere Äderung im Code, poppt die Fehlermeldung unmittelbar nach dem Laden der Seite auch auf.

Lasse ich die mittlere Änderung

Code: Alles auswählen

  var w = cv.Transform.decode(thatTransform, json[thatGA] );
  if (w === undefined || isNaN(w)) {
    return;
  }

weg, kommt die Fehlermeldung nicht, aber ich kann dann mit thatGA natürlich auch nichts weiter machen. Daher tippe ich fast, dass es am Mittelteil liegt. So als wäre es nicht zulässig cv.Transform.decode() zweimal in der function(json) aufzurufen.

[Chris M.]

Auf den Teil hatte ich gar nicht geschaut, denn ohne die GA zu abonieren macht es auch keinen Sinn diese oben zu verarbeiten

Am einfachsten lässt Du die Änderungen im Browser laufen wenn die Entwicklungskonsole (Strg+Shift+I) offen ist. Dann kannst Du direkt sehen wo es im Code klemmt.

Der Teil oben kann nicht funktionieren, da sich das erste und das zweite Decode quasi ausschließen / ersetzen.

Jetzt bewusst nicht elegant, sondern möglichst nah am anderen Code, versuche mal:

Code: Alles auswählen

client.update = function(json ) // overload the handler
{
  for( address in json ) {
    switch(address) {
      case thisGA:
        var h = cv.Transform.decode(thisTransform, json[thisGA] );
        if (h === undefined) {
          return;
        }
        var filling = document.querySelector('#rect3855');
        filling.y.baseVal.value=200.57388 + (100-h)*2;
        filling.height.baseVal.value = h*2;
        document.querySelector('#path3029-4').setAttribute('d', 'm 524.85653,'+(200.57388+ (100-h)*2)+' a 100,37.795274 0 0 1 -200,0 100,37.795274 0 1 1 200,0 z');
        break;

      case thatGA:
        var h = cv.Transform.decode(thatTransform, json[thatGA] );
        if (h === undefined) {
          return;
        }
        console.log('Mache nun etwas mit thatGA und dem Wert',h);
    }
  }
};
  
client.user = 'demo_user'; // example for setting a user
client.subscribe( [thisGA,thatGA] );

Und sollte bereits der HTTP-Request für das "l" nicht funktionieren, so kann es sein, dass dem Client noch die URL mitgeteilt werden muss (war bei mir mit der Entwicklungsversion auf dem TWS hinter dem Proxy der Fall), also etwas wie

Code: Alles auswählen

client = cv.Application.createClient('default','/proxy/visugit/cgi-bin/l/');

[Robosoc]

Hey Chris, danke dass Du Dir das weiter angeschaut hast...

verstehe ich den Case-Vorschlag korrekt, dass ich dann aber immer nur eine Änderung berücksichtigen kann?

Ich habe es eben schon ein wenig ausführlicher im KNX-Forum gepostet. Mein Ziel ist es in einem X/Y-Diagramm Graphen zu steuern. Im ersten Step versuche ich eine Heizkurven-Visualisierung zu realisieren: Siehe Screenshot von der bereits fertigen SVG unten. Die Kurve wäre dann später auch tasächlich noch gekrümmt (wahrscheinlich vereinfacht über ein Polygon) und würde durch min- und maxwerte begrenzt sein, daher denke ich im Moment so an 5 - 7 Parameter, die ich gerne übergeben würde , die aber alle gleichzeitig die Grafik beeinflussen - nämlich alle Parameter die ich auch in der Berechnung der Vorlauftemperatur in der Logik nutze.



Deinen Post interpretiere ich so, dass ich Positionen dann entweder von thisGA oder von thatGA abhängig machen kann, aber nicht von beidem. Eine Heizkurve hätte aber vermutlich 5 Parameter...

Oder interpretiere ich den Vorschlag noch falsch?

[Chris M.]

In den seltensten Fällen bekommst Du mehr als eine Adresse/Wert gleichzeitig, denn die CometVisu will einen Wert so schnell wie möglich darstellen wie dieser auf dem Bug geändert wurde.
Mehrere kommen typischer Weise direkt nach Start im Browser (alle Werte die im Cache des eibd/knxd liegen werden von diesem abgerufen und übertragen, die anderen werden per Lese-Telegram angefordert und kommen dann später). Oder wenn die so schnell hintereinander gesendet werden, dass die sich während der Verarbeitung des ersten Pakets aufstauen - denn es darf ja keines verloren gehen.

Das ist aber typischer Weise kein Problem. Einfach Updaten was Du hast. Und den Rest halt merken.

[Robosoc]

Es sieht vielversprechend aus, aber ich bekomme immernoch den Fehler, wenn ich die zweige GA (thatGA) nicht auf die Variable h, sondern auf eine neue z.B. w matche. Aber über den Debugger in der Konsole, verstehe ich noch nicht an welche Stelle der Fehler passiert...muss jetzt aber mal Schluss machen und ein andern Mal weiter machen... Danke schon einmal...

Wenn ich beide Werte auf die Variable h schreibe schien es zu gehen, aber das bringt mich noch nichts ans Ziel , dann kann ich keine X-Y Koordinaten erstellen.