Benzinpreise von Tankerkönig als Widget in smartVISU

[Sisamiwe]

smai
Ich habe heute mal das Plugin von psilo vom Tankerkönig bei mit in shNG integriert. Dabei ist mir aufgefallen, dass psilo bereits die Integration in smartVISU via csv read vorbereitet hat. hier

Könntest Du dies mal prüfen bzw. überlegen, ob man das nicht in einen nächsten Release mit unterbringt?
Ich denke, es wäre so ähnlich wie bei der Abfrage von wunderground oder der Fritzbox.

Danke für Deine Rückmeldung.

[Sisamiwe]

wvhn

Hallo,

ich überarbeite gerade shNG und meine Visu und bin bei der Darstellung der Spritpreise hängengeblieben.
psilo hatte damals schon etwas vorbereitet. Siehe meinen ersten Beitrag oben.

Kann man das mit heutigen Mitteln einfacher in smartVISU integrieren?

Danke dir!

Michael

[wvhn]

Hallo Michael,

nach kurzem Blick in die API-Doku von Tankerkönig werden die Daten als JSON ausgeliefert. Das ist für smartVISU viel einfacher auszuwerten, als CSV. Deshalb braucht man IMHO weder die php-Services noch die Logik in shNG, welche die CSV-Datei erzeugt.

Am sinnvollsten wäre wahrscheinlich eine App. Als Vorlage kann man die TV-Spielfilm App nehmen, die JSON-Daten direkt aus einem Web-API verarbeitet.

Quick & dirty als Schnelltest (hat auch nicht mehr Zeit gebraucht, als ein solcher ):

/**
* -----------------------------------------------------------------------------
* @package     smartVISU
* @author      Martin Gleiß
* @copyright   2012 - 2015
* @license     GPL [http://www.gnu.de]
* @version     1.0
*
* @title       Tankerkönig
* @category    mobility
* @icon        icons/ws/it_television.svg
* @color       #b00
* @description Price list of all gas stations in a defined radius
*
* @info        
* @link        
* -----------------------------------------------------------------------------
*/


{% extends "apps.html" %}

{% block sidebar %}

{% endblock %}


{% block content %}

    <h3>Spritpreise</h3>
    <br />


    <style type="text/css">
        .tvlist ul {
            margin: 0 !important;
        }

        .tvlist li {
            padding: 0 0 0 125px !important;
        }

        .tvlist .ui-li-thumb {
            height: 63px;
            max-width: 113px;
            top: 5px;
            left: 5px;
            border: 1px solid #aaa;
        }

        .tvlist .ui-li-aside {
            background-color: white;
            border: 1px solid #ccc;
            border-radius: 5px;
            height: 25px;
            width: 70px;
            margin: 3px;
            text-align: center;
            vertical-align: middle;
            line-height: 27px;
        }

        .tvlist li p {
            height: 35px;
            white-space: normal;
        }
    </style>

    <div id="tanken" data-widget="app.tankerkoenig" class="tvlist">
        <ul data-role="listview">
        </ul>
    </div>

    <script type="text/javascript">
        $('#{{ page }}').on('pagecreate', function (event, ui) {

            $.getJSON('https://creativecommons.tankerkoenig.de/json/list.php?lat=52.521&lng=13.438&rad=1.5&sort=dist&type=all&apikey=00000000-0000-0000-0000-000000000002', function (data) {
                var line = '';
                var entry = data['stations'];

                for (var i in entry) {
                    var ret = '';

                    ret += '<h3><span>' + entry[i].name + ' ' + entry[i].brand + '</h3>';
                    ret += '<b>Diesel:&nbsp;</b>' + entry[i].diesel + '<br>';
                    ret += '<b>E10:&nbsp;</b>' + entry[i].e10 + '<br>';
                    

                    line += '<li>' + ret + '</li>';
                }

                $('#tanken ul').html(line).trigger('prepare').listview('refresh').trigger('redraw');
            })
                .fail(notify.json);
        });
    </script>


    <hr />

{% endblock %}​

Ergebnis:
Tanken.jpg
Das kann gerne jemand vervollständigen und aufhübschen. Die verfügbaren Datenfelder sind unter dem o.g. Link gut dokumentiert.

In der Abfrage ($.getJSON ...) muss man den eigenen API-Key eintragen, sowie die Location (lat und lng). Mit dem Test-Key kommen nur Muster-Daten. Deshalb unterscheiden sich die Preise im Screenshot nicht.

Gruß
Wolfram

[wvhn]

Sisamiwe

im develop branch ist jetzt eine erste Version der Tankerkönig-App.
Den Standort kann man in der config.ini unter dem Schlüssel "tanker_location" im Format "lat=123.456&lng=234.567" anlegen. Wenn dieser nicht vorhanden ist, versucht die App, die Daten aus der Konfiguration des Wetterservices zu holen. Die klappt allerdings nur, wenn dieser mit Geokoordinaten konfiguriert ist (Achtung: hier "lat=123.456&lon=234.567").

Man benötigt einen API-Key, den man mit dem Schlüssel "tanker_key" in die config.ini einträgt. Fehlt dieser, wird ein Demokey verwendet, mit dem nur Beispielwerte angezeigt werden. Eine entsprechende Meldung wird ausgegeben.

Man wählt Kraftstoffart und Entfernungsradius aus und erhält dann die entsprechenden Daten.

grafik.png

Viel Spaß damit an alle Schnäppchenjäger

Gruß
Wolfram

[kuala]

Hallo Wolfram,

erst mal danke für die Hilfe bzgl apps. Habs begriffen wie die eingebunden sind.

Bei der Tankerkönigapp habe ich alles wie beschrieben gemacht.
Standort angelegt und API key eingegeben.

Leider bekomme ich keine Tankstellen angezeigt. Unter Kraftstoffe ist alles leer.

grafik.png

Wenn ich die URL laut Tankerkönig mit meinen Daten eingebe, dann bekomme ich eine aktuelle Liste angezeigt.


Vielen Dank schon mal
VG Jens

[wvhn]

Moin Jens,

wann hast Du die App aus GitHub gezogen? Ich habe nämlich am Montag noch einen Fix für die Abfrage eingespielt. Der betrifft den Fall, dass die Koordinaten in der config.ini abgelegt sind. Zeile 106 muss lauten:

var tkLocation = '{{ config_tanker_location ? config_tanker_location|raw : config_weather_location|replace("lon", "lng")|raw }}';

In den Developer-Tools kannst Du Dir unter "XHR" auch direkt die Antwort von Tankerkoenig mit Fehlermeldungen ansehen.

Gruß
Wolfram

[kuala]

Hallo Wolfram,

Habs heute hinbekommen. Erst war die Abfrage gesperrt. Zu viele Anfragen.
Heute hab ich die SmartVisu nochmal neu aufgesetzt. Jetzt funktioniert es.

Dankeschön
VG
Jens