Ich habe mein erstes iOS Widget mit Scriptable.app gebaut, um das Ocean Race 2023 und das Team Malizia mit der Malizia Seaexplorer einfacher verfolgen zu können. Und was soll ich sagen, bisher funktioniert es super gut!

Das Ocean Race befindet sich gerade im zweiten von insgesamt 7 Legs. Mit dabei das Team Malizia, das vor zwei Jahren, durch Boris Herrmanns Teilnahme an der Vendée Globe 2020/2021, bekannter wurde. Seitdem verfolge ich das Team etwas intensiver und fiebere mit, wenn das Team für ein neues Abenteuer in See sticht.

Nach der letzten Vendée Globe hat sich das Team dazu entschieden ein komplett neues Boot zu bauen, nach, mehr oder weniger, den Wünschen von Boris. Mit einigen Testfahren, unteranderem den Besuch zur Taufe in Hamburg und der Route du Rhum, ist das Ocean Race nun die erste richtige Bewährungsprobe für das neue Boot und der Crew.

Das Ocean Race besteht aus 7 Legs (Teilstücken), am Ende hat man circa 60.000 Km zurückgelegt und einmal die Welt umrundet.

Man kann das Ocean Race natürlich auf deren Webseite oder auf der Webseite des Malizia Teams verfolgen. Mich hat es ein wenig gestört jeden Tag die Webseite aufzumachen. Am Smartphone ist die nur bedingt bedienbar, da es eine Map in einem iFrame ist, es nur winzige Symbole gibt und die manchmal einfach komische Dinge macht.

Draggable Map mit mini Symbolen + Touch Device + iFrame = 💩

Ich erinnerte mich, dass mit Corona die selbstgebastelten Widgets zur Abfrage der Inzidenz und vorhanden Klopapierrollen bei DM aufkamen. Ich dachte mir, dass das doch mal eine gute Gelegenheit wäre selber ein Script zu schreiben, um mir die Position, Geschwindigkeit und wer weiß was noch des Malizia Teams auf dem Homescreen anzeigen zu lassen.

So habe ich mir dir Oceanrace und Malizia Seite genauer angeschaut, denn irgendwie brauch ich ein paar Daten, für das Widget. Nach kurzer Zeit habe ich ein .json File gefunden, dass sich circa stündlich aktualisiert. Es beinhaltet Infos zum gerade stattfindenden Leg, alle Teams kategorisiert nach Bootstyp und sortiert nach dem aktuellen Ranking. Jackpot! 🤓

Ein Scriptable Script schreibt man einfach mit Javascript. Die UI basiert auf "Stacks" und diese Stacks können wiederum Stacks beinhalten. Nach ein wenig probieren hat man eigentlich schon raus, wie man ein paar Textzeilen zusammen-stackt. Mir hat dieses kurze Tutorial ganz gut geholfen zu starten: Create your own iOS widget with JavaScript.

Scriptable bietet auch Zugriff auf einige APIs von iOS, die unter https://docs.scriptable.app dokumentiert sind. So weiß man zum Beispiel, ob iOS im Darkmode läuft oder welche Sprache eingestellt ist.

Als Entwicklungsumgebung habe ich zum "Scriptable Development Environment" gegriffen, das einfach die Handhabung und testen des Scripts in Scriptable.app vereinfacht. Man kann sich Scriptable.app herunterladen und durch eine Tastenkombination von VSCode heraus kann man das Script in Scriptable.app lokal starten. Man brauch das Script also nicht jedes Mal zu kopieren. Außerdem bietet das Environment Autocompletion für die Scriptable-APIs.

Nach ein wenig probieren, einer ersten Version die nur das Team Malizia anzeigte, bin ich mit der derzeitigen Version des Widgets ganz zufrieden.

Features

• man kann ein Team des Ocean Race wählen und die Position, Geschwindigkeit, Abstand zum erstplatzierten und die zu segelnde Reststrecke anzeigen lassen
• man kann eine Bootskategorie wählen und bekommt alle Teams der Kategorie im momentanen Ranking angezeigt
• man kann alles über die "Parameter" des Scriptable-Widgets konfigurieren, man muss das Script nicht anpassen
• über die Konfiguration mit Parameter erlaubt es so viele Widgets, in unterschiedlichen Konfigurationen, hinzuzufügen wie man möchte
• das Widget hat ein Light- und Darkmode
• das Widget spricht englisch und deutsch, basierend auf der eingstellten Sprache des iOS Gerätes

Parameter

Wie beschrieben, kann man das Widget über Parameter konfigurieren. Klingt vielleicht ersteinmal abgefahrener, als es ist. Wenn man das Scriptable-Widget bearbeitet, besteht die Möglichkeit im Feld "Parameter" Text einzugeben. Durch die Eingabe bestimmter Angaben lässt sich das Widget konfigurieren.

Als erstes den Modus des Widgets: "TEAM" für ein einzelnes Team oder "ALL_TEAMS" für alle Teams einer Kategorie. Danach folgt ein Komma ",". Anschließend die jeweilige Konfiguration des entsprechenden Modus. Entweder das Teamkürzel, z.B. "MALI" für Malizia, wenn man "TEAM" ausgewählt hat. Oder, wenn man "ALL_TEAMS" ausgewählt hat, muss man die Bootskategorie angeben, "IMOCA" oder "VO65".

Das alles ist aber noch einmal im Github-Repo dokumentiert und sogar mit Beispielen erklärt: Ocean Race Scriptable Widget on Github

Ich habe mit dem Widget ein bisschen was gelernt und sehe nun die aktuelle Platzierung der Malizia auf meinem Homescreen. Vielleicht ist es für Dich ja auch interessant? Dann probiere es aus! Das Script gibt es im Github Repository mit einer kurzen Installationsanleitung.

Ansonsten bleibt mir nur noch das Daumen drücken, für das Team Malizia, rund um Boris Herrmann. 🤞