[Gelöst] - [FHEM-Tablet-UI] highcharts meteogram will nicht

[F2k]

Hallo zusammen,

ich versuche nun schon seit gestern verkrampft das highcharts meteogram ans laufen zu bekommen.

Allerdings komme ich, nach unzähligen versuchen, nicht weiter als: "Loading data from external source"

In Chrome wird mir ein Fehler gemeldet "Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/."

Das ist nun auch der Punkt wo ich aussteige.

Mein letzter Versuch war in der "jquery.min.js" async auf true zu stellen... hat aber auch nichts gebracht.

Eventuell kann mir einer von Euch weiter helfen. 

Update
Die Meldung aus der Console scheint eine falsche Fährte zu sein... ich hab die auch auf Seiten des Tablet-UI, die nichts mit dem Spezial-Widget Meteogram zu tun haben.

Bei der weiteren Fehlereinkreisung bin ich direkt auf die Seite highcharts.com gegangen... da geht alles.
Mich wundert auch, dass die Buttons aus den Beispielseiten nicht richtig angezeigt werden.
Ich werd mal noch weiter ich Richtung Pfadangaben zu libs usw. suchen.

Lieben Dank schonmal für Eure Hilfe

[F2k]

Hallo nochmal,

ich bin leider noch kein stück weiter gekommen... die Pfadangaben stimmen meines erachtens nach und ich hab auch versucht die Beispieldateien mal in einem Ordner, mal im tablet-ui root Verzeichnis zu legen.

Diverse Updates habe ich auch gemacht aber es will einfach nicht.

Mit den Standortdaten habe ich auch rumgespielt... keine Veränderung.

Hat denn irgendeiner das meteogram eingebunden und es läuft?

Liebe Grüße,

F2k

[Luigi]

Hatte das selbe Problem.
Nach Anlagen eines dummy (define dummy dummy) funktioniert es bei mir.
In meteo.html steht  data-device = dummy"

Gruß
Luigi

[F2k]

Hi Luigi,

das war es tatsächlich.

Hab vielen Dank... ich dachte so sehr in die falsche Richtung, dass ich das offensichtliche nicht gesehen habe.

cya und fröhliche Festtage.

F2k

[hillbicks]

Captain Obvious to the rescue.......

Das habe ich ebenfalls total uebersehen das es daran lag, wobei eigentlich klar das es sowas offensichtliches sein musste.

Danke fuers posten der Loesung

[hillbicks]

So, jetzt laeuft es zwar, allerdings kann ich die Groesse des meteograms nicht veraendern. Eine Aenderung der width und height Werte in style haben jedenfalls keine Aenderung gezeigt.

Habt ihr das hinbekommen? Mit weniger als data-sizex="7" wird jedenfalls die rechte Seite abgeschnitten, das ist natuerlich nicht so schoen. Die style.css scheint sich auch nur auf load und ram zu beziehen.

[Torben]

So, jetzt laeuft es zwar, allerdings kann ich die Groesse des meteograms nicht veraendern. Eine Aenderung der width und height Werte in style haben jedenfalls keine Aenderung gezeigt.

In der /tablet/jshighcharts-meteogram.js kann man in den folgenden Zeilen die Größe anpassen:

Code Auswählen Erweitern

/**
* Build and return the Highcharts options structure
*/
Meteogram.prototype.getChartOptions = function () {
    var meteogram = this;

    return {
        chart: {
            renderTo: this.container,
            backgroundColor:'transparent',
            marginBottom: 50,
            marginRight: 190,
            marginLeft: 30,
            marginTop: 70,
            plotBorderWidth: 1,
            width: 1200,  //<--- hier
            height: 530 //<--- und hier; ggf. auch die "margins" anpassen
        },

Dann muss man in der Datei aber auch die Windpfeile weiter nach unten schieben:

Code Auswählen Erweitern

/**
* Draw the wind arrows. Each arrow path is generated by the windArrow function above.
*/
Meteogram.prototype.drawWindArrows = function (chart) {
    var meteogram = this;

    $.each(chart.series[0].data, function (i, point) {
        var sprite, arrow, x, y;

        if (meteogram.resolution > 36e5 || i % 2 === 0) {

            // Draw the wind arrows
            x = point.plotX + chart.plotLeft + 7;
            y = 496; //<--- hier weiter nach unten geschoben

Die Schriftgrößen habe ich dort auch noch angepasst
Zusätzlich kann man dann noch in der /tablet/lib/highcharts/themes/dark-unica.js die Schriftart und Farben ändern bzw. man kann auch eine komplett andere Datei nutzen.
In der tablet/lib/highcharts/highcharts.js habe ich dann noch die Wochentage und Monate in deutsch übersetzt.

Nun sieht es so aus: (http://forum.fhem.de/index.php?action=dlattach;topic=45629.0;attach=44376)

[devil77]

Hallo,

muss mich hier mal mit ranhängen, weil gleiches Problem.
Was muss ich genau machen um dieses highchart Widget mit dem Wetter in gang zu bekommen?
Ich habe das Widget  in der html definiert und bekomme dort nur ein "Loading data from external source" angezeigt.
In fhem selber ein "define dummy dummy" bringt auch nichts weiter.
Also wer kann mir helfen um das ins laufen zu bekommen?

[traveltheworld]

Ich hatte genau dasselbe Problem, d.h. es wird nur "loading from external resource" angezeigt und nichts passiert.

Nach etwas probieren habe ich festgestellt, dass dieses Problem nur dann auftritt, wenn man ftui von extern über eine Port-Weiterleitung aufruft.
Intern, wenn das Tablet oder der PC direkt an den fhem-Server verbunden ist, lädt das Meteogram.

[devil77]

Mittlerweile läuft es bei mir auch. Ich rufe fhem über https auf und das Wetter wurde aber über http aktualisiert.
Ich habe das jetzt auch über https laufen ud und alles funktioniert.

[jnewton957]

Hallo,

ich verzweifle seit einigen Tagen am meteogram.

Nach einem Fehler im FHEM musste ich die Rücksicherung einspielen.
Seitdem klappt das meteochart zwar noch - aber ich bekomme die Größe nicht mehr auf die volle Seite angepasst.

Code Auswählen Erweitern

<li class="halbTransparent" data-row="2" data-col="2" data-sizex="7" data-sizey="4">
<header>Meteogram</header>

          <div id="container"
                data-type="meteogram"
                 data-title="Wettervorhersage"
                 data-location="Tyskland/Nordrhein-Westfalen/xxx"
                 data-device="meteo"
                 style="width: 980px; height: 496px; margin: auto auto">
                <div style="margin-top: 100px; text-align: center" id="loading">
                   <i class="fa fa-spinner fa-spin"></i> Loading data from external source
                </div>
          </div>
</li>


highcharts-meteogram.js wurde angepasst

Code Auswählen Erweitern

return {
        chart: {
            renderTo: this.container,
            backgroundColor:'transparent',
            marginBottom: 50,
            marginRight: 190,
            marginTop: 70,
            plotBorderWidth: 1,
            width: 980,
            height: 496
        },

Egal, was ich ändere - auch gerne mal width auf 1400 - die Größe ändert sich nicht.
!! Vor dem crash hat die Größe gepasst !

Wo ist mein Gedankenfehlen ?

Danke für die Hilfe
Jörg

[alf_85]

Hi zusammen,

ich kriege das Meteogram einfach nicht zum Laufen hat irgendjemand eine hilfreiche Anleitung, wie man das installieren muss/worauf man aufpassen muss?

Grüße

alex

[tw]

Bei mir ging es bis vor kurzem - jetzt nicht mehr.

[medlor]

Hi zusammen,

ich kriege das Meteogram einfach nicht zum Laufen hat irgendjemand eine hilfreiche Anleitung, wie man das installieren muss/worauf man aufpassen muss?

Grüße

alex

Hallo,

anscheinend hat highcharts ihre jsonp Provider "sample" URL deaktiviert! Das geht zB nicht mehr http://www.highcharts.com/samples/data/jsonp.php?url=http://www.yr.no/place/Tyskland/Bayern/Muenchen/forecast_hour_by_hour.xml&callback=?.

Die Lösung war für mich, dass ich deren JSONP Provider unter https://raw.githubusercontent.com/highcharts/highcharts/master/samples/data/jsonp.php
auf meinen eigenen Webserver kopiert habe und dann im "js/widget_meteogram.js"  (Zeile 48) die URL dementsprechend angepasst habe.

$.getJSON(
            'http://www.highcharts.com/samples/data/jsonp.php?url=' + locationURL + '&callback=?',
            function (xml) {
                var meteogram = new Meteogram(xml, elem[0]);
            }
        );

Bei jedem Update ist dieser Change aber wieder weg und muss nachgezogen werden.

Viele Grüße
Tobias

[jnewton957]

Die Lösung war für mich, dass ich deren JSONP Provider unter ....
auf meinen eigenen Webserver kopiert habe und dann im "js/widget_meteogram.js"  (Zeile 48) die URL dementsprechend angepasst habe.

Gibt es zwischenzeitlich eine andere "einfachere" Lösung ?

Grüße
Jörg