erste beta - fronthem, smartVISU (closed, Bitte die Anschlussthreads benutzen)

[bgewehr]

Ach, Stress - ich sitze mit frisch operiertem Bein Zuhause... Da hab ich keinen Stress... aber viel Zeit!

[herrmannj]

gute Besserung nochmal

[HCS]

HCS kannst Du mal die aktuelle Architektur Deiner Plots kurz erläutern?

Erst mal gute Besserung.

Also dann:

Momentan liefert mein addon driver die Daten für die Serien, fronthem könnte das aber genauso erledigen, darum beschreibe ich es mal, als ob es fronthem wäre.

Der Treiber holt sich für die aktuelle Page die Charts, die drauf sind.
Die Serien (ein Chart kann ja mehrere haben) werden bei fronthem angefragt und zwar in dieser Form:

Code Auswählen Erweitern

{
  "cmd": "series",
  "items": [
    {
      "gad": "hcs.data.OilLevelChart",
      "mode": "avg",
      "start": "7y",
      "end": "now",
      "interval": "60"
    },
    {
      "gad": "hcs.data.OilConsumptionChart",
      "mode": "avg",
      "start": "5y 6m",
      "end": "now",
      "interval": "120"
    }
  ]
}
Beispiel für das erste item: bitte eine Serie für das GAD hcs.data.OilLevelChart die vor 7 Jahren beginnt und jetzt endet und die bitte alle 60 Sekunden mit aktuellen Daten liefern.

fronthem liefert darauf hin alle 60 Sekunden die Daten die so aussehen:

Code Auswählen Erweitern

{
  "cmd": "series",
  "items": {
    "gad": "hcs.data.OilLevelChart",
    "plotdata": [
      [
        "x-Value1",
        "y-value1"
      ],
      [
        "x-Value2",
        "y-value2"
      ],
      [
        "x-Value3",
        "y-value3"
      ]
    ]
  }
}


Der Treiber aktualisiert darauf hin das Chart.

Die Definition für ein Chart sieht so aus:

Code Auswählen Erweitern

{% extends "rooms.html" %}
{% import "widget_chart.html" as chart %}

{% block content %}
  Heizölstand: {{ basic.float("OilLevelPlot.Level", "hcs.data.oilconsumption.level", "l") }}

  {% set options = '
    {
      "title": {
        "text": "Ölstand",
        "x": -20,
        "style": {
          "color": "#8888FF",
          "fontWeight": "bold",
          "fontSize": "22px"
        }
      },
      "subtitle": {
        "text": "noch was drin?",
        "x": -20
      },
      "chart": {
        "zoomType": "x"
      },
      "tooltip": {
        "enabled": false
      },
      "exporting": {
        "enabled": true
      }
    }
  '%}

  {{ chart.period("OilLevelPlot",
                 ["hcs.data.OilLevelChart"],
                 "avg",
                 "7y",
                 "now",
                 "60",
                 "0",
                 "5000",
                 ["Füllstand"],
                 ["#44f"],
                 ["line"],
                 ["Jahre","Liter"],
                 "",
                 options) }}

Im letzten Parameter kann man options reingeben, mit denen man so ziemlich alle Optionen, die die highcharts bieten, steuern kann.
Das ergibt den oberen Teil vom angehängten Beispiel OilChart.png

Die wesentlichen Unterschiede zu der original SV-Variante:
Die options, um das Chart zu steuern, optinal, übergibt man keine gibt es ein schnödes standard Chart
Der Name des GAD wird nicht mit den Parametern wie von, bis, ... erweitert.
Es kann ein Intervall festgelegt werden, in dem das Chart aktualisiert werden soll
SV kann an ein initialisiertes Chart nur Plotpunkte hinten anhängen, das hier kann das Chart mit geänderten Serien aktualisieren
Hier hatte ich auch schon mal meine Gedanken dazu gepostet: http://forum.fhem.de/index.php/topic,30909.msg262386/topicseen.html#msg262386

Hier noch ein Beispiel für die Definition eines Charts mit mehreren Serien (siehe MultiChartExample.png)

Code Auswählen Erweitern

{% set options =' { "legend": {
                        "layout": "horizontal",
                        "align": "center",
                        "verticalAlign": "top",
                        "borderWidth": 1,
                        "floating": true
                      },
                      "chart": {
                        "showAxes": true,
                        "zoomType": "x",
                        "panning": true,
                        "panKey": "shift",
                        "animation":
                        {
                          "duration": 250,
                          "enabled": true
                        }
                      },
                      "plotOptions": {
                        "series":
                        {
                          "enableMouseTracking": false
                        }
                      },
                      "exporting": {
                        "enabled": true
                      }
                    } '%}


  <div class="hcs-block">
    <div class="set-2" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true">
      <div data-role="collapsible" data-collapsed="false">
        <h3>Heizung</h3>
        {{ Chart.period("HeatingTemperaturesPlot",
                        ["hcs.data.Heating.BurnerTemperatureChart",
                        "hcs.data.Heating.WaterTemperatureChart",
                        "hcs.data.Heating.OutsideTemperatureChart",
                        "hcs.data.Heating.PenthouseTemperatureChart",
                        "hcs.data.Heating.BurnerRunChart"],
                        "avg",
                        "2d",
                        "now",
                        "10",
                        "-20",
                        "80",
                        ["Kessel","Wasser", "Außen", "DG", "Brenner"],
                        ["#ff0000", "#7777ff", "#DEC11B", "#D04FE8", "#999999"],
                        ["line", "line", "line", "line", "line"],
                        "",
                        "",
                        options) }}

      </div>
    </div>
  </div>

Dieser Plot kann z.B. zoom und pan und bietet einen Export des Plot als PDF, JPG, ... und zeigt keine Tooltips, wenn man mit der Maus über die Serien fährt.

Das Ganze läuft seit ca. 2 Wochen recht erfolgreich im Testbetrieb. Einige Detail müssen noch abgerundet werden.

[bgewehr]

Sieht super aus und wirkt schon sehr reif! Top! Wo kommen die Daten her? Filelog, dblog?

[cruser1800]

Ich habe mal Bernds widget.js ausprobiert!

Geschwindigkeit ist so wie man es sich vorstellt mit den normalen SV.

@Bernd
Irgendwo in deinen Files musst du deine IP einegetragen haben! Daher läuft leider deine SV nicht bei mir, da es immer ZUgrif auf dienicht vorhandene IP haben möchte.

[bgewehr]

Welche denn?

[HCS]

Wo kommen die Daten her? Filelog, dblog?

Von meiner "nicht FHEM"-Heizungssteuerung. Die holt mein addon driver dort an einem Web Service ab, der die Daten für die Serien als JSON liefert.
Aber wie gesagt, wenn fornthem diese Kommunikation irgend wann implementiert, sollte es direkt auch mit FHEM-Daten laufen.
@herrmanj: was Dich jetzt nicht unter Druck setzen soll.

Das addon driver Konzept hatte ich viel weiter oben schon mal vorgestellt. Der io-fhem holt die Daten von FHEM und der addon driver die Daten von meiner Heizungssteuerung.

[bgewehr]

Kann's kaum erwarten! Plots, Plots, wir brauchen Plots! Was geht 'n.... War das Jan Delay?...

[cruser1800]

@Bernd

192.168.178.26

[bgewehr]

26 ist die Kamera in der Garage, schau mal auf room_garage.html. Da ist ein Multimedia.image()

[herrmannj]

Was war der Trick?

für heute erst mal FA, im POC funktioniert es, muss aber noch umbauen.

Ich geh komplett an den delegates vorbei und benutze einen lookup auf das widget.

Code Auswählen Erweitern

io.action[type].handler.call(this, 'update', '321');
Der schreibt aktuell in alle widget die er hat eine '321'. Dadurch entfällt für jquery das komplette DOM gecrawle, gebubble etc. Ich brauche noch die Zuordnung der GAD zu den widgets (also hab ich, muss aber noch einen lookup erstellen) und irgendwie wird io new zweimal aufgerufen udn überholt sich. Das ist noch Fleißarbeit.

Zur performance, mit Deiner Anpassung komm ich auf ca 25ms pro GAD, mit dem lookup liege ich bei 0..5, Häufung bei 1. Betagtes NB.

Im Kern dürfte das bedeuten das, wenn alles gut bis zu Ende klappt, auch das asynch timeout wegfallen kann weil fronthem die Daten dann langsamer liefert als der driver die wegschreibt - ergo sv zumindest auf halbwegs brauchbarer HW auch vielen initialen GADS repsonsive bleibt.

Geht aber erst WE oder MO weiter,

vg
jrög

[HCS]

Ach übrigens: Da es eine komplette Parallelwelt zu den SV Plots ist habe ich es Charts genannt. Um nicht durcheinander zu kommen ...

[bgewehr]

Mann, Ihr kriegt hier was richtig großes zusammen! Ganz großes Kompliment!

[herrmannj]

@herrmanj: was Dich jetzt nicht unter Druck setzen soll.

Nö, dafür bin ich zu abgebrüht 

Grass wächst, und das dauert. Kannste dran rupfen und zupfen - bringt alles nix 

Ich will das die Plots auch in einem fork generiert werden, das live updates gehen und einen vernünftigen Editor  mehr nich

[HCS]

Grass wächst, und das dauert. Kannste dran rupfen und zupfen - bringt alles nix 

Düngen und gießen ...

Der schreibt aktuell in alle widget die er hat eine '321'. Dadurch entfällt für jquery das komplette DOM gecrawle, gebubble etc. Ich brauche noch die Zuordnung der GAD zu den widgets (also hab ich, muss aber noch einen lookup erstellen) und irgendwie wird io new zweimal aufgerufen udn überholt sich.

Bahnhof.
Wie auch immer, wir müssen das im Treiber dann wieder zusammengepackt bekommen, da ich mit den Charts da schon weiter gemacht habe.

Im Kern dürfte das bedeuten das, wenn alles gut bis zu Ende klappt, auch das asynch timeout wegfallen kann weil fronthem die Daten dann langsamer liefert als der driver die wegschreibt - ergo sv zumindest auf halbwegs brauchbarer HW auch vielen initialen GADS repsonsive bleibt.

Ja, mal schauen, wobei immer wieder mal kurz Blocken evtl. auch blockt, so in Summe.