Ich habe eini­ge Kurzbefehle, die mir den Status mei­ner Geräte im Netz anzei­gen, wie zum Beispiel die aktu­el­len Daten mei­ner PV-Anlage. Leider sind die gra­fi­schen Möglichkeiten dafür in den Kurzbefehlen sehr begrenzt. Die Idee, die Ergebnisse als Widget anzu­zei­gen, ließ sich damit nicht umset­zen – sodass am Ende nur so etwas mög­lich war:

Simon B. Støvring, der Entwickler von Scriptable und Runestone, hat nun eine Beta-Version sei­ner neu­en App Canvases ver­öf­fent­licht. Sie bie­tet genau die Lösung für die­ses Problem und ermög­licht es, die Daten nun als Widget anzu­zei­gen. Das Ergebnis ist dann optisch sehr viel anspre­chen­der und über­sicht­li­cher.

Wie es funktioniert

Alles, was ich hier beschrei­be, bezieht sich auf den Beta-Build 2018. Da Simon B. Støvring in der TestFlight-App fast täg­lich neue Updates ver­öf­fent­licht, kann sich die Build-Nummer schnell ändern. Änderungen in spä­te­ren Betas oder im fina­len Release sind daher nicht aus­ge­schlos­sen.

Die Canvas-Definition

In der App Canvases wird das Widget defi­niert. Das umfasst das visu­el­le Design mit sei­nen Layout-Elementen sowie Platzhalter, die spä­ter über einen ver­knüpf­ten Kurzbefehl mit des­sen Ergebnissen gefüllt wer­den. Für mein Beispiel sieht das so aus:

Im lin­ken Side-Panel wird die aktu­el­le Struktur des Widgets ange­zeigt, in der Mitte ein Preview und im rech­ten Panel die unter­schied­li­chen Elemente, die man in einem Widget nut­zen kann. Ein Klick auf ein Element plat­ziert es am Ende des Baumes im lin­ken Panel. Danach lässt es sich an die gewünsch­te Position ver­schie­ben.

Jedes Element hat eige­ne Eigenschaften wie Vorder- und Hintergrundfarbe oder Abstände. So kann der Ablauf im Kurzbefehl bestim­men, wie zum Beispiel ein Text ger­en­dert wird, etwa indem die Schriftfarbe von schwarz auf rot wech­selt, sobald ein bestimm­ter Wert unter­schrit­ten wird.

Der Kurzbefehl

Um die aktu­el­len Daten mei­ner PV-Anlage zu erhal­ten, rufe ich einen inter­nen Service auf. Das Ergebnis des Aufrufs wird in einem Wörterbuch gespei­chert, aus dem ich die jewei­li­gen Rohdaten abru­fen und wei­ter­ver­ar­bei­ten kann. So gehe ich Eintrag für Eintrag durch, wie hier bei­spiel­haft am Rohdatum mit dem Schlüssel pv_feed_in_w zu sehen ist. Der Wert liegt in Watt vor und wird, bevor er in die Variable togrid geschrie­ben wird, noch in Kilowatt umge­rech­net, indem er durch 1000 geteilt und auf drei Nachkommastellen begrenzt wird.

Damit der Inhalt der Variablen auch im Widget ange­zeigt wer­den kann, muss der Wert an den Canvas über­ge­ben wer­den. Dafür wird im Kurzbefehl die Canvas-Aktion Update View ver­wen­det.

Mit die­ser Aktion wird die Eigenschaft „Text“ des Platzhalters „grid“ in der Canvas-Definition mit dem Namen „PV“ auf den Inhalt der Kurzbefehl-Variablen „togrid“ gesetzt.

So wer­den nach­ein­an­der alle Einträge des Wörterbuchs in Variablen geschrie­ben, die dann als Text im Widget ange­zeigt wer­den. Eine Ausnahme ist der Füllstand der Batterie in Prozent, der im Widget durch das Element Progress dar­ge­stellt wird. Hier wird die Farbe des Rings unter 11 % auf Rot und über 11 % auf Grün gesetzt.

Nicht alle Inhalte des Widgets stam­men aus Variablen. Icons und Einheiten sind zum Beispiel fest im Canvas hin­ter­legt und wer­den nicht über den Kurzbefehl gesetzt. Wenn nun alle varia­blen Werte an den Canvas über­ge­ben wur­den, muss das Widget nur noch auf dem Homescreen oder dem Desktop instal­liert wer­den. Danach wird das Widget bei jedem Start des Kurzbefehls mit den neu­en Daten aus der PV-Anlage ver­se­hen.

Da ich die App auf allen mei­nen Apple-Geräten instal­liert habe, war ich zunächst erstaunt, dass das Starten des Kurzbefehls auf einem Gerät auch die Widgets auf den ande­ren Geräten aktua­li­siert. Das liegt dar­an, dass die Daten in die Canvas-Definition gespei­chert wer­den und die­se Datei dann über iCloud syn­chro­ni­siert wird. Dadurch wer­den auch die Widgets auf den ande­ren Geräten mit den fri­schen Daten ver­sorgt, aller­dings nicht sofort, son­dern erst dann, wenn iCloud die Datei im Hintergrund syn­chro­ni­siert hat.

Layout-Elemente

Das Layout eines Widgets besteht haupt­säch­lich aus dem Layout-Element Stack. Im Stack kön­nen die Inhalte hori­zon­tal, ver­ti­kal oder über­ein­an­der (Depth) ange­ord­net wer­den. In die­sem Beispiel ist das Layout dann so auf­ge­baut:

Damit der Prozentwert inner­halb des Progress-Rings ange­zeigt wird, wird dafür ein Stack mit der Eigenschaft Depth genutzt.

Alle Elemente bie­ten außer­dem wei­te­re Eigenschaften wie Schriftart (bei Text-Elementen), Farbe und Abstand, die sich an prak­tisch allen Elementen ein­stel­len las­sen, meist auch über den Kurzbefehl. Die Möglichkeiten der Feinabstimmung kön­nen dabei recht kom­plex wer­den, aber meist reicht der Standard.

Das Grid für wiederholende Views

Ein spe­zi­el­les Layout-Element ist das Grid. Wie der Name sagt, posi­tio­niert es die dar­in ent­hal­te­nen Elemente in einer defi­nier­ten Anzahl von Spalten. Der Layout-Tree sieht in den fol­gen­den Beispielen so aus:

Der ein­zi­ge Unterschied in der Darstellung ist die Anzahl der Columns (im ers­ten Beispiel auch rot her­vor­ge­ho­ben).

Die Besonderheit eines Grids ist, dass es sich mit gleich auf­ge­bau­ten Inhalten fül­len lässt, zum Beispiel über eine Schleife im Kurzbefehl. Ein ein­fa­ches Beispiel soll zei­gen, wie das funk­tio­niert, indem aus einer Datenquelle, hier einem Kurzbefehl-Wörterbuch, Schlüssel/Wertpaare aus­ge­le­sen wer­den. Im Beispiel sind es eini­ge Molkerei-Produkte als Schlüssel, mit einem Wahrheitswert, der zeigt, ob sie ein­ge­kauft wer­den müs­sen:

Die Ausgabe in dem Widget soll dann am Ende so aus­se­hen:

Für die Canvas-Definition benö­tigt das Grid einen Stack, der als Vorlage mit den Platzhaltern für die Checkbox und den Text für das Produkt dient.

Theoretisch könn­te man nun für jede Zeile im Kurzbefehl das Wörterbuch abfra­gen und jeweils einen Stack defi­nie­ren. Das ist aber nicht unbe­dingt fle­xi­bel, falls ein neu­es Produkt dazu­kommt oder eines weg­fällt. Außerdem ist es ein­fa­cher, die nöti­gen Wörterbuchabfragen nur ein­mal zu machen. 

Damit in dem Kurzbefehl die Zuordnungen gemacht wer­den kön­nen, bekommt jedes Element einen Namen. Zusätzlich muss in den Eigenschaften des Grids der Schalter „Template Children“ ein­ge­schal­tet wer­den (1):

Mit dem Schalter „Editor Shows“ (2) wird ein­ge­stellt, ob im Preview nur die Platzhalter der Vorlage ange­zeigt wer­den oder die Daten der letz­ten Ausführung des Kurzbefehls über die Option „Created Children“. Falls der Kurzbefehl noch nicht aus­ge­führt wur­de, steht die­se Option nicht zur Verfügung, und auch die Zeile „Clear Created Children“ (4) wird dann nicht ange­zeigt.

Durch das Anschalten der Option „Template Children“ wer­den die Elemente im Grid zur Vorlage. Diese lässt sich dann in einer Schleife mit den Daten aus dem Wörterbuch fül­len.

Da das Wörterbuch in einer Schleife abge­ar­bei­tet wer­den soll, wer­den zunächst alle Schlüssel in eine Liste ein­ge­le­sen (1), über die dann in einer Schleife ite­riert wird (2). In jedem Schleifendurchlauf wird dann aus der im Canvas defi­nier­ten Vorlage ein neu­er View erstellt (3), des­sen Platzhalter mit den Daten gefüllt wer­den.

In (4) wird der Schlüssel des Wörterbuchs aus der aktu­el­len Wiederholung mit Objekt wiederholen abge­ru­fen. Dieser wird dann als Text in den Platzhalter item der zuvor erzeug­ten Kopie von row im Grid list geschrie­ben.

Nun muss noch der Wert des Schlüssel/Wert-Paares eben­falls in den ent­spre­chen­den Platzhalter check geschrie­ben wer­den. In der Vorlage ist dafür das Element check defi­niert, das je nach Wert ent­we­der eine lee­re Checkbox oder eine Checkbox mit einem Haken anzeigt. Dazu wird zunächst der Wert des aktu­el­len Schlüssels abge­ru­fen (5) und als Wahrheitswert in die Wenn-Aktion (6) über­ge­ben.

Analog zur Übergabe des aktu­el­len Schlüssels wird auch hier ein Platzhalter gefüllt, aller­dings ist die Eigenschaft hier nicht Text, son­dern Symbol. Im „True-Fall“ (7) wird das Symbol checkmark.square ver­wen­det, im „False-Fall“ (8) nur das Symbol square.

Wenn die Schleife mit jedem Eintrag des Wörterbuchs durch­lau­fen wur­de und somit für jeden Eintrag ein View gemäß der Vorlage erstellt wur­de, ist die Bedingung been­det. Das Ergebnis die­ser Schleife ist dann eine Liste von gefüll­ten „rows“, die als „Children“ der Vorlage row bezeich­net wer­den.

Zum Schluss wird das Grid list im Canvas „GridTest“ mit dem Ergebnis der Wiederholung aktua­li­siert. Anders als inner­halb der Schleife wird hier aber nicht die Aktion Update View created from Template, son­dern die nor­ma­le Update View-Aktion ver­wen­det, um die Eigenschaft children von list mit der Liste der Views aus der Wiederholung zu fül­len.

Damit las­sen sich auch kom­ple­xe­re, mit meh­re­ren Grids gefüll­te Widgets erstel­len, wie zum Beispiel Simons Widget „Month Calendar“, das er auf sei­ner Webseite als Beispiel anbie­tet.

Zu beach­ten ist, dass ein Widget eine fes­te Größe hat und so nicht belie­big vie­le Zeilen anzei­gen kann. Falls poten­zi­ell mehr Daten vor­han­den sind, muss der Kurzbefehl dar­auf reagie­ren und die Anzahl der Schleifendurchläufe begren­zen. Insgesamt bie­tet das Zusammenspiel aus Grids, Vorlagen und Schleifen noch viel Raum, um wei­te­re Lösungsansätze zu ent­de­cken.

Einsatzmöglichkeiten

Die Canvases-App bie­tet eine neue Möglichkeit, Ergebnisse aus Kurzbefehlen gra­fisch auf­be­rei­tet als Widget zu prä­sen­tie­ren. Dabei kön­nen alle Datenquellen genutzt wer­den, die ein Kurzbefehl ver­ar­bei­ten kann. Das reicht von Schnittstellen zu Geräten im Netz, wie mei­ner PV-Anlage, über Services aus dem Internet für Wetter- oder Umfragedaten, bis hin zu Daten, die direkt auf dem Gerät erfasst wer­den, etwa die Schritte der letz­ten Tage aus der Health-App als Balkendiagramm. Mein Überblick über die PV-Anlage ist dabei nur ein Beispiel: Anstatt mehr­mals am Tag die App oder die Webseite zu öff­nen, kann ich die aktu­el­len Werte direkt auf dem Desktop sehen.

Allerdings gibt es einen limi­tie­ren­den Faktor beim Einsatz von Widgets: Die Datenaktualisierungsrate ist begrenzt, man spricht von 40 bis 50 Aktualisierungen am Tag. Meine ers­te Idee, dafür mit launchd auf dem Mac eine Lösung zu bau­en, die den Kurzbefehl alle 5 Minuten aus­führt, muss­te ich ver­wer­fen, auch weil die­se Möglichkeit auf dem iPhone oder iPad ohne­hin nicht besteht. Die Automatisierungsfunktion in den Kurzbefehlen ermög­licht immer­hin die Ausführung eines Kurzbefehls zu einem bestimm­ten Zeitpunkt, zum Beispiel um Aktivitätsdaten täg­lich um 23:00 Uhr zu aktua­li­sie­ren, um vor dem Schlafengehen noch ein­mal zu sehen, wie aktiv der Tag war.

Statt das Widget auto­ma­tisch zu aktua­li­sie­ren, kann auch ein Button auf dem Widget plat­ziert wer­den, der bei einem Klick den Kurzbefehl star­tet, der dann die neu­es­ten Daten ein­spielt. Die App bie­tet dazu die Möglichkeit, dem Button-Element in der Canvas-Definition eine URL hin­zu­zu­fü­gen, die unter iOS, iPadOS und macOS vor Version 27 den Kurzbefehl über fol­gen­de URL auf­ruft:

shortcuts://run-shortcut?name=Kurzbefehl%20Name

Ab den Systemen mit Version 27 gibt es zudem die Aktion Run Shortcut, die ich noch nicht tes­ten konn­te.

Bei einem Aufruf des Kurzbefehls über den Button wird aber auch die Kurzbefehle-App gestar­tet und bleibt im Vordergrund. Als Workaround kann man als ers­te Aktion im Kurzbefehl die Kurzbefehle-App ver­ste­cken:

Mein PV-Anlagenbeispiel habe ich um einen Button und einen Zeitstempel erwei­tert:

Als Alternative zur Canvases-App bie­tet Simon auch die App Scriptable an, mit der sich eben­falls Widgets erstel­len las­sen, die dann aber in JavaScript geschrie­ben wer­den. Für die­se App exis­tiert auch eine Community, die fer­ti­ge Skripts anbie­tet, wie zum Beispiel hier: A cura­ted list of awe­so­me Scriptable scripts and wid­gets. · GitHub. Mit der Canvases-App hat Simon aber einen für vie­le zugäng­li­che­ren Weg über die Kurzbefehle-App geschaf­fen.

Anmerkung

Während iOS und iPadOS schon sehr rund lau­fen, benö­tigt die Mac-Version noch etwas Zeit. So konn­te ich zumin­dest bis zur Version 2021 die Elemente im Tree nicht umord­nen, wes­halb ich das Beispiel-Canvas auf mei­nem iPad gebaut habe. Es wird auto­ma­tisch syn­chro­ni­siert, was manch­mal etwas dau­ert, läuft dann aber mit dem ent­spre­chen­den Kurzbefehl auch auf dem Mac.

Ich habe auch bis­her nur recht ein­fa­che Beispiele gebaut, ohne kom­ple­xes Layout. In die Thematik muss ich auch noch tie­fer ein­stei­gen, da es eini­ge Parameter gibt, an denen man schrau­ben kann.

Was ich noch nicht aus­pro­biert habe, ist die KI-Funktion zum Erstellen eines Canvas. Laut der Dokumentation soll eine ein­fa­che Beschreibung des­sen, was ange­zeigt wer­den soll, aus­rei­chen, um auto­ma­tisch ein pas­sen­des Canvas zu erstel­len.

Die Canvases-App bie­tet außer­dem die Möglichkeit, einen Canvas zusam­men mit dem dazu­ge­hö­ri­gen Kurzbefehl zu tei­len. Dabei wird ein Link gene­riert, der bei einem Klick sowohl den Canvas als auch den Kurzbefehl über einen iCloud-Link instal­liert.

Alles in allem fin­de ich, dass die Canvases-App ganz neue Einsatzmöglichkeiten für die Kurzbefehle bie­tet, um eige­ne Daten und Auswertungen visu­ell anspre­chend als Widget zu prä­sen­tie­ren.