2D und 3D Seiten

[luigi4711]

Bei dem Comfoair Projekt wär ich auch dabei...

Die CA550 hängt unten im Keller, noch nicht angeschlossen, aber das sollte um den Jahreswechsel was werden, WG ist da, und Interesse sowieso. Nur das mit der Zeit... aber mal sehen, was ich helfen kann.

luigi

[henfri]

Beeindruckend!

[tht]

Auch wenn ich nicht dazu komme, mich aktiv zu beteiligen:

Der PoC ist gelungen, wobei er noch nicht IDevice-gerecht ist:
Safari 5.1.2 unter OS X und auch der mobile Safari zeigen die Grafik an sich nicht an.

[NetFritz]

Hallo
Warum SVG und nicht Canvas ?
Ist Canvas nicht Zukunftsgerichteter ?
Gruß NetFritz

[Chris M.]

Safari 5.1.2 unter OS X und auch der mobile Safari zeigen die Grafik an sich nicht an.

iIrgendwas hab ich nicht, der Safari zum Testen (unter Win7) ist leider erst neulich von der Platte geflogen, da mich die ständigen Aktualisierungsnachrichten genertvt hatten und der Platz der virtuellen Platte auch etwas eng bemessen war. Da war mir die ETS4 wichtiger...

Aber mit'm Opera habe ich gerade mal getestet. Der hat noch eine kleine Änderung am Style benötigt, jetzt zeigt der's auch richtig an.
=> Bitte mal mit dem aktuellen SVN testen, evtl. hat der Safari auch nur diese Änderung gebraucht...

Warum SVG und nicht Canvas ?
Ist Canvas nicht Zukunftsgerichteter ?

Nein. Canvas ersetzt nicht SVG, beide ergänzen sich wunderbar.

Canvas ist eine unstrukturierte Zeichenfläche. Jede Änderung bedarf eines komplett neuen Bild-Aufbaus.

SVG dagegen ist strukturiert. Es ist eigentlich "HTML für Vektorgraphiken", d.h. Du beschreibst in XML-Syntax (+ nach Wunsch CSS!) das Bild und kannst nachträglich durch Änderungen am DOM den Inhalt ändern. Ob und wenn ja wie viel neu gezeichnet werden muss, entscheidet der Browser, dem JavaScript-Tipper ist's egal.
Außerdem - und da wird's ganz spannend - kann das SVG auf Events reagieren bzw. eigene erzeugen.
Ein "Wenn die Maus über dem roten Inhalt ist, färbe ihn grün" ist mit SVG trivial - bei Canvas musst Du selber herausfinden wo im Canvas die Maus ist und ob genau dort auch gerade roter Inhalt oder doch Hintergrund oder gar grauer Rand ist...

Das oben angedeutete Widget zum dynamischen Säulen-Malen hätte ich per Canvas gelöst, denn das ist Fire&Forget. 1x Malen (bei jeder Wert-Änderung) und fertig. Da brauche ich die Vorteile von SVG nicht.
ABER kam mir dann danach. Wieso das nur zur Anzeige nutzen? Man könnte das ja wunderbar zu einem Slider erweitern. Einfach die obere Fläche nehmen und hoch&runter ziehen.
Wenn ich dass mache, dann spricht wieder sehr viel für SVG und nicht mehr für Canvas.

Bei dem 3D Modus stellt sich die Frage ähnlich. WebGL oder X3D?
Genauer welche WelbGL Bibliothek - oder doch X3DOM.

Aufgrund der gerade erst stattfindenden Implemtierung im Browser bin ich auf WebGL mit THREE.js gegangen - auch wenn da X3D mit X3DOM eigentlich die nach Anforderung korrekte Wahl gewesen wäre. Aber nachdem AFAIK kein Browser X3D mit X3DOM nativ implementiert...

[greentux]

Damit kann ich die Daten aus der Webschnittstelle meines Pelletkessels grafisch visualisieren. Schön wäre noch, die Farben zu ändern. Abhängig vom Füllgrad. Damit man schon vor der Angst Bescheid weiß

[Chris M.]

Wenn's nur um den Pellet-Speicher geht: lieber auf das passende Widget warten (bzw. selber schreiben. Würde ich CV Plugin sehen).

Wenn's um eine schön animierte Seite der Heizung (z.B. lodernde Flamme, Pellet-Transport, ...) geht, dann wäre genau dieses Beispiel passend um darauf aufzubauen.
=> Inkscape (oder anderen SVG-Editor) schnappen. Hintergrund malen. JavaScript einbinden. Fertig.

[greentux]

Ja keine Eile. Mir gehts eigentlich erstmal um den Pelletspeicher.
Die lodernde Flamme kann ich per iframe direkt vom Kessel haben, wenn ich will. Aber wer will das schon... Lodernde Flammen gehören nicht auf Bildschirme. Da setzt man sich i.A. mit einem Glas Rotwein davor

[makki]

Wenn's um eine schön animierte Seite der Heizung

Mensch, da kommen Ideen, wenn der Tag nur 96h hätte und man malen könnte

-> Mit etwas Grips müsste man das ja auch ein bisschen abstrahieren können, so das ein halbwegs allgemeingültiges Heizungs-Anlagenschema dabei rauskommt (?) wo der AW nur noch sagen muss, was er hat und ab welcher Temperatur die Leitung blau/lila/rot werden soll..

Makki

[EPIX]

wo der AW nur noch sagen muss, was er hat und ab welcher Temperatur die Leitung blau/lila/rot werden soll..

die 265-igste Sorge....

Die 2D mit frei pazierbaren Objekten ist sicher "Anforderung" genug...
Ihr habt eine SUPER-LEISTUNG gemacht - Hut ab!!!

[alexbeer]

Ihr seid der Wahnsinn, bin echt begeistert, was ihr da gezaubert habt.
Ich hoffe in den Feiertagen mal Zeit zum Spielen zu haben

[Chris M.]

Etwas zurück zur Entwicklung:

Der Grund warum auf der 2D-Seite keine Sub-Seite ist, ist ein Problem in der aktuellen Syntax der Config-Datei (technisch funktionieren Sub-Seiten, hab ich natürlich schon getestet).

Das Page-"Widget" hat seinen Namen als Attribut, den Inhalt der Sub-Seite[n] als Elemente.

Die neueren Widgets haben dagegen den Namen als Element. Und eben die 2D-Layout-Position als weiteres Element.

=> Um das Page-Element auf Stand zu bringen müssen wir es anfassen.

Mir fallen spontan zwei Möglichkeiten ein:

• Einfügen eines <meta>-Elementes, dass den Namen und das Layout aufnimmt. Gleichwertig zu den ganzen anderen Elementen die die Sub-Seite beschreiben
• Kapseln aller weiteren Elemente ein einem gruppierenden Element, wie z.B. <content>

Man könnte natürlich auch beides gleichzeitig machen...


@Julian: Wie siehst Du das aus Editor-Sicht?

[netzkind]

Wenn du mich fragst, gefällt mir Lösung 2 besser:
die Widgets die auf der Page sein sollen als Inhalt von bspw. <content>, <elements>, <items>, <widgets> oder <children>.

Damit kommt der Editor relativ schnell klar denke ich.

Außerdem ist es konsistent zu dem was die anderen Widgets so machen ... soweit ich das im Überblick habe.

Grüße,
Julian

PS:
die Page darf trotzdem gerne den Namen als <label> bekommen.

[christian523]

Ich habe mal ein bisschen mit dem svg herumgespielt, weil ich die Funktionalität besser verstehen wollte.
Testweise habe ich mal, wie einige Posts weiter oben angesprochen, die Farbe entsprechend des Füllstandes geändert (von blau nach rot).

Es müssen hierzu in folgender Datei
/var/www/[Visu-Verzeichnis]/media/demo_2d_backdrop_red_pot.svg

nur die folgenden fettgeschriebenen Zeilen eingefügt werden:

    visu.update = function( json ) // overload the handler
    {
      var h = Transform[thisTransform].decode( json[thisGA] );
      var filling = $('#rect3855')[0];
      filling.y.baseVal.value=200.57388 + (100-h)*2;
      filling.height.baseVal.value = h*2;
      [B]var blue = Math.round(255-h*2.55);
      var red = Math.round(0+h*2.55);
      var blue_light = Math.round(255-h*1.12);
      var red_light = Math.round(143+h*1.12);
      $('#stop3859')[0].setAttribute('style','stop-color:rgb('+red+',0,'+blue+');stop-opacity:1');
      $('#stop3861')[0].setAttribute('style','stop-color:rgb('+red+',0,'+blue+');stop-opacity:1');
      $('#stop3865')[0].setAttribute('style','stop-color:rgb('+red_light+',143,'+blue_light+');stop-opacity:1');
      $('#path3029-4')[0].setAttribute('style','color:#000000;fill:rgb('+red+',0,'+blue+');fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate />')[/B]
      $('#path3029-4')[0].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')
    }

Anbei noch zwei Screenshots.

[Chris M.]

Inzwischen konnte ich den JSFloorPlan3D so weit säubern, dass ich ihn endlich in die CV einbinden konnte - was mit Revision 721 auch passiert ist.

Das Ergebnis ist nicht mehr als ein schneller Hack, d.h. alles was damit schief läuft bitte ignorieren
(Z.B. ist die 3D Animation höchst unrund - aber dafür gehen die Befehle für die Ausrichtung vorher über den KNX...)

In den nächsten Tagen (= Wochen) werde ich das ganze hoffentlich so rund bekommen, dass wir effektiv die sich dadurch ergebenden Config-Syntax-Änderungen am lebenden Objekt diskutieren können...