eCharts in FHEM (Version 0.0.12.4)

[FhemPiUser]

sieht gut aus. Kann man den Bereich unter den Kurven auch füllen, wir auf den Apache Beispielen gezeigt?

Und gehen auch Stacked bars?

[andies]

Wie gesagt, ich habe da keinen vernünftigen use-case und kann das nicht richtig testen. Aber wenn du in der gplot-Datei die richtige Art der Darstellung ausgibt (eben nicht line, sondern bars oder was immer man da macht) und dann das Attribut stacked setzt, klappt es bei mir. Obwohl ja das manual sagt, es gehe nicht...

[andies]

Und gehen auch Stacked bars?

Hast du das bei dir umsetzen können?

[schwatter]

Tag,

ich habe an der Legendcolor gebastelt. Ich hatte immer das Problem, wenn ich ein Element in Legend aktiviert habe,
das es dunkler, bzw grau wurde.

Zum anpassen habe ich Ziele 618 geändert:

Code Auswählen Erweitern

${$eCharts_options_ref}{legend} = { data => \@legend, left => AttrVal($name, "position_legend", "10"), (AttrVal($name, "legendColor", "") ? (textStyle => { color => AttrVal($name, "legendColor", "transparent") }) : ()) };
Und für das attr Zeile 1123:

Code Auswählen Erweitern

          legendColor
Wird die Farbe mit Klarnamen (white,blue,...) gesetzt, wird diese korrekt geändert.
Wird anstelle von Klarnamen eine beliebige Zahl, von mindestens 2 Stellen (00) angegeben, dann nehmen die Legendnamen
die Farbe von den zugewiesenen Plotstyle an.

Gruß schwatter

[schwatter]

Und hier noch für Labelcolor:

Code Auswählen Erweitern

    ######################
    # Options -> x-Achse
    ######################
    my @xAxis = ();
    push(@xAxis, {});
    $xAxis[0]->{type} = 'time';
    my $t = ($conf{xlabel} ? $conf{xlabel} : "");
    $t =~ s/"//g;
    $xAxis[0]->{name} = $t if ($t);
    $xAxis[0]->{axisTick} = {alignWithLabel => JSON::true, show => JSON::true, inside => JSON::true, length => 10} if ($conf{xtics});
    $xAxis[0]->{axisLabel} = {textStyle => {color => AttrVal($name, "axisLabelColor", "#ffffff")}}; # Schriftfarbe hinzufügen
    if ($doSplit) { # zweite x-Achse, wenn split-Attribut gesetzt
        push(@xAxis, {});
        $xAxis[1]->{type} = 'time';
        $t = ($conf{x2label} ? $conf{x2label} : "");
        $t =~ s/"//g;
        $xAxis[1]->{name} = $t if ($t); # TODO Color of x-Axis
        $xAxis[1]->{axisTick} = {alignWithLabel => JSON::true, show => JSON::true, inside => JSON::true, length => 10} if ($conf{xtics});
        $xAxis[1]->{axisLine} = {onZero => JSON::false, alignWithLabel => JSON::true, show => JSON::true, inside => JSON::true, length => 10} if ($conf{xtics});
        $xAxis[1]->{axisLabel} = {textStyle => {color => AttrVal($name, "axisLabelColor", "#ffffff")}}; # Schriftfarbe hinzufügen
    }
    ${$eCharts_options_ref}{xAxis} = \@xAxis;
 
    ######################
    # Options -> y-Achse
    ######################
    #  my ($nr_left_axis,$nr_right_axis,$use_left_axis,$use_right_axis) = split(",", &SVG_Attr($parent_name, $name,"nrAxis","1,1")); # notwendig?
    my @yAxis = (); # array of y-axis
    # y-Achse ######################
    eCharts_CollectyAxisOptions(\@yAxis, $conf{ylabel}, $conf{ytics}, $conf{yrange}, AttrVal($name, "yrange", ""));
    # Schriftfarbe hinzufügen
    foreach my $yAxisOption (@yAxis) {
        $yAxisOption->{axisLabel}{textStyle}{color} = AttrVal($name, "axisLabelColor", "#ffffff");
    }
    # y2-Achse ######################
    eCharts_CollectyAxisOptions(\@yAxis, $conf{y2label}, $conf{y2tics}, $conf{y2range}, AttrVal($name, "y2range", "")) if ($conf{y2label});
    # Schriftfarbe hinzufügen
    foreach my $yAxisOption (@yAxis) {
        $yAxisOption->{axisLabel}{textStyle}{color} = AttrVal($name, "axisLabelColor", "#ffffff");
    }
    ## TODO gibt es weitere y3 und y4 Achsen?
    ${$eCharts_options_ref}{yAxis} = \@yAxis;
   

Und attr-list erweitern:

Code Auswählen Erweitern

    my @attrList = qw(
          axisLabelColor
        backgroundColor
          legendColor
      encoding:1,0


Gruß schwatter

[schwatter]

Nabend,

ich habe mich an einer Mobilen-Ansicht probiert.
Dazu musste sub eCharts_render($$$$$$$$) geändert werden.

Erst hatte ich versucht ab einer bestimmten Größe vom Display umzuschalten.
Das führte aber bei Tablet und Handy zu Problemen. Quasi identisch. Als einzigen Unterschied
konnte ich zwischen Handy (Chrome) und Tablet (Fully Kiosk Browser) den Useragent ausmachen.
Bei Handy ist zumindest "Mobile" mit drin. Darauf baut es jetzt auf. Ist Mobile vorhanden oder nicht.
Die Prüfung findet 2mal statt. Einmal im Javascript-Bereich für die Fenstergröße und einmal
im Perl-Bereich um bei kleinem Display die Buttons auszublenden, damit nichts überlappt.
Schöner wäre eine 2te Reihe für die Buttons. Ich habe aber noch keine Idee.
Außerdem ist bei einer Zahl mit Minus davor rechts etwas vom Y-Achsen-Bezeichner weg.
Auch noch keine Idee...
Zum setzten der Werte gibt es jetzt die attr plotsize_desktop und plotsize_mobile.

Code Auswählen Erweitern

  ######################
  # Konvertiert die Konfiguration in eine "lesbare" Form -> Array in Hash
  ######################
  my $filter = join("|", @filter);
  $filter =~ s/"/./g; #Wasserzaehler_IEC_01.Verbrauch\x3a|Viessmann2.Temperature3\x3a|shellyplug_Tauchpumpe.AnAus\x3a
  $filter = AttrVal($parent_name, "longpollSVG", 0) ? "flog=\"$filter\"" : "";

  # Standardwerte für mobile und Desktop-Größen
  my $default_mobile_size = "90%,45vh";
  my $default_desktop_size = "100%,75vh";

  # Mobil- und Desktop-Größen setzen
  my $mobile_size = AttrVal($name, "plotsize_mobile", $default_mobile_size);
  my $desktop_size = AttrVal($name, "plotsize_desktop", $default_desktop_size);

  # Werte splitten
  my ($mobile_w, $mobile_h) = split(",", $mobile_size);
  my ($desktop_w, $desktop_h) = split(",", $desktop_size);

  # Konvertiere Einheiten
  $mobile_w =~ /^\d+$/ ? $mobile_w .= 'px' : $mobile_w =~ s/\%$/vw/;
  $mobile_h =~ /^\d+$/ ? $mobile_h .= 'px' : $mobile_h =~ s/\%$/vh/;
  $desktop_w =~ /^\d+$/ ? $desktop_w .= 'px' : $desktop_w =~ s/\%$/vw/;
  $desktop_h =~ /^\d+$/ ? $desktop_h .= 'px' : $desktop_h =~ s/\%$/vh/;

  Log3 $name, 5, "eCharts rendering: defining header ";
  ######################
  # Header
  ######################
  eCharts_pO '<div id="eCharts_'.$name.'" style="width:100%;height:100%;margin-left:-30px;"></div>';
  eCharts_pO '<script type="text/javascript">';
  eCharts_pO 'function detectDevice() {';
  eCharts_pO '  var ua = navigator.userAgent;';
  eCharts_pO '  if (/Mobile/i.test(ua)) {';  # Prüfung auf "Mobile"
  eCharts_pO '    document.getElementById("eCharts_'.$name.'").style.width = "'.$mobile_w.'";';
  eCharts_pO '    document.getElementById("eCharts_'.$name.'").style.height = "'.$mobile_h.'";';
  eCharts_pO '  } else {';  # Fallback für Desktops
  eCharts_pO '    document.getElementById("eCharts_'.$name.'").style.width = "'.$desktop_w.'";';
  eCharts_pO '    document.getElementById("eCharts_'.$name.'").style.height = "'.$desktop_h.'";';
  eCharts_pO '  }';
  eCharts_pO '}';  # Schließende Klammer für detectDevice()
  eCharts_pO 'detectDevice();';
  eCharts_pO 'window.addEventListener("resize", detectDevice);';  # Anpassen bei Größenänderungen des Fensters
  eCharts_pO 'var myChart_'.$name.' = echarts.init(document.getElementById("eCharts_'.$name.'"), null, {renderer:"canvas"});';

Code Auswählen Erweitern

no warnings 'qw';
    my @attrList = qw(
      axisLabelColor
    backgroundColor
  encoding:1,0
      endPlotNow:1,0
      endPlotNowByHour:1,0
      endPlotToday:1,0
      fixedoffset
      fixedrange
      label
      legendColor
  marker
  markerline
      nrAxis
  opacity
  pathToNode
      plotAsPngFix:1,0
      plotAsPngPort
      plotWeekStartDay:0,1,2,3,4,5,6
  plotfunction
      plotsize
      plotsize_desktop
      plotsize_mobile
  position_title
  position_legend
  position_legend_top
  smooth
  split
  stacked:y1,y2
      startDate
  visualMap
  yrange
  zoom
    );
Gruß schwatter

[andies]

Das ist ja super - danke!. Kannst Du vielleicht Deine Datei hier posten, dann kann ich das mal hochladen und testen? (Es gibt einige, denen ist das editieren in der Datei zu unsicher; die laden lieber herunter.)

[schwatter]

Moin,
die hängt schon dran. Direkt über deiner Antwort.

Gruß schwatter

[schwatter]

Nabend,

- fixedrange habe ich auf fixedrange_desktop und fixedrange_mobile aufgeteilt.Ich denke, auf dem Handy kann es auch mal weniger sein.
- Für y1-Achse und y2-Achse habe ich

Code Auswählen Erweitern

$yAxisOption->{nameTextStyle}{color} = AttrVal($name, "axisLabelColor", "#ffffff");hinzugefügt.
- Versioninfos oben im Modul hinzugefügt

Gruß schwatter