FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: F2k am 13 Dezember 2015, 16:33:18

Titel: [Gelöst] - [FHEM-Tablet-UI] highcharts meteogram will nicht
Beitrag von: F2k am 13 Dezember 2015, 16:33:18
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
Titel: Antw:[FHEM-Tablet-UI] highcharts meteogram will nicht
Beitrag von: F2k am 18 Dezember 2015, 21:20:15
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
Titel: Antw:[FHEM-Tablet-UI] highcharts meteogram will nicht
Beitrag von: Luigi am 23 Dezember 2015, 15:28:50
Hatte das selbe Problem.
Nach Anlagen eines dummy (define dummy dummy) funktioniert es bei mir.
In meteo.html steht  data-device = dummy"

Gruß
Luigi
Titel: Antw:[FHEM-Tablet-UI] highcharts meteogram will nicht
Beitrag von: F2k am 23 Dezember 2015, 22:43:28
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
Titel: Antw:[Gelöst] - [FHEM-Tablet-UI] highcharts meteogram will nicht
Beitrag von: hillbicks am 25 Dezember 2015, 13:52:56
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 :)
Titel: Antw:[Gelöst] - [FHEM-Tablet-UI] highcharts meteogram will nicht
Beitrag von: hillbicks am 25 Dezember 2015, 14:17:31
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.
Titel: Antw:[Gelöst] - [FHEM-Tablet-UI] highcharts meteogram will nicht
Beitrag von: Torben am 16 Januar 2016, 10:39:11
Zitat von: hillbicks am 25 Dezember 2015, 14:17:31
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:
/**
* 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:
/**
* 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)
Titel: Antw:[Gelöst] - [FHEM-Tablet-UI] highcharts meteogram will nicht
Beitrag von: devil77 am 11 Juni 2016, 21:01:19
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?
Titel: Antw:[Gelöst] - [FHEM-Tablet-UI] highcharts meteogram will nicht
Beitrag von: traveltheworld am 19 Juni 2016, 15:11:03
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.
Titel: Antw:[Gelöst] - [FHEM-Tablet-UI] highcharts meteogram will nicht
Beitrag von: devil77 am 19 Juni 2016, 15:13:10
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.
Titel: Antw:[Gelöst] - [FHEM-Tablet-UI] highcharts meteogram will nicht
Beitrag von: jnewton957 am 17 Dezember 2016, 19:59:00
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.

<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
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
Titel: Antw:[Gelöst] - [FHEM-Tablet-UI] highcharts meteogram will nicht
Beitrag von: alf_85 am 10 Februar 2017, 20:37:40
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
Titel: Antw:[Gelöst] - [FHEM-Tablet-UI] highcharts meteogram will nicht
Beitrag von: tw am 21 Februar 2017, 20:26:12
Bei mir ging es bis vor kurzem - jetzt nicht mehr.
Titel: Antw:[Gelöst] - [FHEM-Tablet-UI] highcharts meteogram will nicht
Beitrag von: medlor am 26 Februar 2017, 17:30:13
Zitat von: alf_85 am 10 Februar 2017, 20:37:40
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
Titel: Antw:[Gelöst] - [FHEM-Tablet-UI] highcharts meteogram will nicht
Beitrag von: jnewton957 am 18 März 2017, 17:45:37
Zitat von: medlor am 26 Februar 2017, 17:30:13


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
Titel: Antw:[Gelöst] - [FHEM-Tablet-UI] highcharts meteogram will nicht
Beitrag von: darkon am 02 November 2017, 10:44:38
Gibt es hierfür immer noch keine Lösung?
Titel: Antw:[Gelöst] - [FHEM-Tablet-UI] highcharts meteogram will nicht
Beitrag von: 1907 am 08 November 2017, 11:40:17
Ich habe das Meteogramm von yr.no einfach als Bild per HTML eingebunden.
Titel: Antw:[Gelöst] - [FHEM-Tablet-UI] highcharts meteogram will nicht
Beitrag von: Paul.baumann am 06 März 2018, 10:37:07
Zitat von: medlor am 26 Februar 2017, 17:30:13
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

Ich habe gerade durch entdeckt, dass das Widget Meteogramm mittlerweile ein Attribut data-jsonp-url hat. Dort kann man den Pfad zur lokalen Kopie der jsonp.php eintragen und spart sich somit das erneute Anpassen der widget_meteogram.js nach einem Update.

K.A. ob das irgendwo dokumentiert ist.


Paul