Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[Buchi]

Aktuelle Test Version	0.2.x
Veröffentlichungsdatum	03.03.2022
Github Link	https://github.com/gerbuchner/ioBroker.vis-owl

Widget zur Anzeige der Paketverfolgung

tombox hat einen super Adapter geschrieben, mit dem es möglich ist von verschiedenen Transportunternehmen die Paketverfolgung auszulesen und in Datenpunkte zu schreiben.

Meine Intension ist es hierfür ein Widget zur Verfügung zu stellen, um diese Daten einfach in der VIS anzuzeigen.

Doku gibt's im Wiki auf GitHub.
Tauschbörse mit verschiedenen Designs, die gerne von euch mit erweitert werden darf ;)

0.2.13 (2022-04-15)

• [Sendungsverfolgung] Bugfix wenn Felder ohne Inhalt sind

0.2.12 (2022-04-06)

• [Sendungsverfolgung] CSS für 'Zustellung heute' hinzugefügt

0.2.11 (2022-03-28)

• [Sendungsverfolgung] Maximale Zeichen Name / Sendungsstatus

0.2.10 (2022-03-20)

• [Sendungsverfolgung] Beta entfernt
• [Sendungsverfolgung] Neues Logo
• [Sendungsverfolgung] Höhe Sendungseintrag in Einstellungen ausgelagert (nötig wegen Berechnungen)

0.2.9 (2022-03-14)

• [Sendungsverfolgung] Bild und Text wenn keine Sendung

0.2.8 (2022-03-13)

• [Sendungsverfolgung] Typo in CSS Klasse behoben (inDelivery)
• [Sendungsverfolgung] Korrektur Höhe Trennlinie

0.2.7 (2022-03-12)

• [Sendungsverfolgung] Bug bei der automatischen Aktualisierung behoben
• [Sendungsverfolgung] Klick auf Logo öffnet Webseite mit der Sendungsverfolgung

0.2.6 (2022-03-10)

• [Sendungsverfolgung] Titelzeile und Anordnung optimiert

0.2.5 (2022-03-10)

• [Sendungsverfolgung] Sortierung der Sendungen nach Status
• [Sendungsverfolgung] Ein- / ausblenden von gelieferten Sendungen verbessert
• [Sendungsverfolgung] Titelzeile eingebaut
• [Sendungsverfolgung] Bilder als PNG bereitgestellt wegen Problemen mit SVG

0.2.0 (2022-03-03)

• [Sendungsverfolgung] Initial upload

[Gruter]

@buchi
Hi, dann fange ich mal mit einem Vorschlag an.

Schön wäre es wenn man sehen könnte wer heute ein Paket bringen wird, sobald verfügbar natürlich auch jeweils mit Zeitfenster bzw wieviele Stops es noch vorher sind.
und auch ob für Morgen evtl schon Pakete angekündigt wurden.

Hier mal ein die Datenpunkte einer Hermes Sendung:

[Buchi]

@gruter
Danke für die Datenpunkte.
Die Wünsche lassen sich sicher realisieren ;)

[Buchi]

Eine erste einfache Tabellenversion ist fertig und darf gerne getestet werden :)
Das einzige was zugewiesen werden muss ist der DP zum "allProviderJson"

Und so sieht es dann erst einmal aus:

[Nashra]

Moin, erstmal Danke :+1:
Zwei Fragen hätte ich da noch...
1. der Hintergrund (dunkel) lässt sich nicht ändern oder muß ich das über CSS machen
2. Bild Fortschritt 1 bis 5, was soll da rein bzw. was hast Du dir da vorgestellt

Edit: zu 1 erledigt

.vis-owl-parcel-container {
    Background-color: #183D51;
}

[liv-in-sky]

hat jemand einen bilder satz für mich ?

[Buchi]

@nashra sagte in Test Widget vis-owl v0.2.x GitHub:

Moin, erstmal Danke :+1:
Zwei Fragen hätte ich da noch...
1. der Hintergrund (dunkel) lässt sich nicht ändern oder muß ich das über CSS machen
2. Bild Fortschritt 1 bis 5, was soll da rein bzw. was hast Du dir da vorgestellt

DHL bietet z.B. einen Fortschritt, sowie max. Fortschritt an. Das geht von 1 bis 5. Darüber könnten dann unterschiedliche Bilder je nach Fortschritt der Sendung angezeigt werden. Ein Ladebalken zum Beispiel.

Dazu muss aber tombox erst noch das Json erweitern. Danach kann ich dann alles dafür ins Widget bringen.

[Buchi]

@liv-in-sky sagte in Test Widget vis-owl v0.2.x GitHub:

hat jemand einen bilder satz für mich ?

Welche Bilder brauchst denn?
Die Fortschrittsbilder gehen noch nicht und für die Firmen sind bis auf 17TRACK welche mit dabei.

[liv-in-sky]

@buchi

@buchi ist das ein problem von meinem system ?

habe auch schon deinstalliert und nochmal installliert - über github

bilder - der anbieter amazon habe ich - aber kein thema - such ich mir dann selber

[Buchi]

@liv-in-sky
Den Fehler kannst ignorieren. Kommt da das Widget keinen Admin Teil hat.

Bilder sind wie gesagt dabei. Lass die Eigenschaften einfach leer ;)

[liv-in-sky]

@buchi

ok - sieht so aus

zur info:
eigene bilder werden verzogen dargestellt

dann hab ich noch das gesehen

[Buchi]

@nashra sagte in Test Widget vis-owl v0.2.x GitHub:

Edit: zu 1 erledigt

.vis-owl-parcel-container {
    Background-color: #183D51;
}

Damit nicht jeder suchen oder rätseln muss. Aktuell sind folgende CSS Klassen (durch die Namen hoffentlich eindeutig) verfügbar. Auch die Positionen sind über CSS flexibel anpassbar, so dass es dadurch an (hoffentlich) viele Designs anpassbar ist ;)

.vis-owl-parcel-container{
    background-color: #222222; 
    z-index: 10;
    overflow: auto;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    display: flex;
}

.vis-owl-parcel{
    background-color: #adadad; 
    z-index: 13;
    width: 95%;
    align-self: center;
    height: 55px;
}

.vis-owl-parcel-source{
    z-index: 14;
    width: 80px;
    height: 40px;
    top: 5px;
    left: 5px;
}

.vis-owl-parcel-id{
    color:#292929;
    z-index: 14;
    width: 200px;
    height: 20px;
    top: 5px;
    left: 110px;
}

.vis-owl-parcel-name{
    color:#292929;
    z-index: 14;
    width: 460px;
    height: 20px;
    top: 5px;
    left: 315px;
}

.vis-owl-parcel-status{
    color:#292929;
    z-index: 14;
    width: 660px;
    height: 20px;
    top: 30px;
    left: 110px;
}

[liv-in-sky]

@buchi wirst du das noch in das widget als setting einbauen ?

[Buchi]

@liv-in-sky sagte in Test Widget vis-owl v0.2.x GitHub:

@buchi

ok - sieht so aus

Schöner Farbverlauf :+1:

zur info:
eigene bilder werden verzogen dargestellt

Ok, danke. Schau ich mir an.

dann hab ich noch das gesehen

Das kommt durch die Möglichkeit eine eigene Klasse im VIS Editor angeben zu können. Da dort nichts eingetragen ist, kommt das "undefined" in das HTML. Das stört erst mal nicht und ich bau mir darüber unterschiedliche Designs mit ein und dem selben Widget. Als Beispiel:

[Buchi]

@liv-in-sky sagte in Test Widget vis-owl v0.2.x GitHub:

@buchi wirst du das noch in das widget als setting einbauen ?

Da dürfte der Aufwand zu groß werden. Ich finde das über die CSS Variante eigentlich sehr einfach und flexibel nutzbar.
Wenn das in die Eigenschaften rein soll müsste ich ja die ganzen CSS Möglichkeiten für jedes Element im Widget einbauen.

[kafibo]

@buchi
Hallo, ich habe dasselbe Problem wie Live-in-sky. Allerdings erscheint bei mir kein Widget im VIS-Editor !!!
Was mache ich denn falsch bzw. was kann ich machen damit es erscheint ?

[liv-in-sky]

@kafibo

probier mal die vis instanz neu zu laden im instanz tab

[Buchi]

Hier mal ein Beispiel wie über CSS die Position der Elemente verändert werden kann:

[liv-in-sky]

@buchi sagte in Test Widget vis-owl v0.2.x GitHub:

Da dürfte der Aufwand zu groß werden. Ich finde das über die CSS Variante eigentlich sehr einfach und flexibel nutzbar.
Wenn das in die Eigenschaften rein soll müsste ich ja die ganzen CSS Möglichkeiten für jedes Element im Widget einbauen.

alles klar - dann is ja gut, wenn ich es jetzt mache

habe es jetzt so geändert

ein frage zur reihenfolge

momentan habe ich nur die gelieferten amazons drin

wenn jetzt ein dhl kommen würde, wird das dann ganz oben angezeigt ? oder kommen immer alle 10 amazon's als erstes ? liegt wohl am json , nehme ich mal an - muss mir das mit dem json nochmal ansehen, wie das aufgebaut wird, wenn ich noch anderes als nur amazon drin habe

[Buchi]

@liv-in-sky sagte in Test Widget vis-owl v0.2.x GitHub:

ein frage zur reihenfolge

momentan habe ich nur die gelieferten amazons drin

wenn jetzt ein dhl kommen würde, wird das dann ganz oben angezeigt ? oder kommen immer alle 10 amazon's als erstes ? liegt wohl am json , nehme ich mal an - muss mir das mit dem json nochmal ansehen, wie das aufgebaut wird, wenn ich noch

Ja, das liegt aktuell noch am Json. Je nach Reihenfolge wie es da drin steht. Ich hoffe dass tombox das noch erweitert, so dass ich im Widget dann die Sortierung und Anzeige (geliefert / nicht geliefert usw.) einbauen und auswerten kann.