Wie Widgets ausgeführt werden
Ein Widget sieht aus wie eine gewöhnliche React-Komponente, läuft aber nie auf dem Rahmen. Blotch führt es auf seinen eigenen Servern aus, macht ein Bild davon und schickt das Bild an den Rahmen. Wer weiß, wie das funktioniert, versteht die meisten Regeln für das Schreiben von Widgets.
Vom Code zum E-Ink-Bild
Kurz bevor eine Seite auf einem Rahmen an der Reihe ist, bereitet Blotch sie vor:
- Jedes Widget der Seite wird in einem eigenen Browserfenster geöffnet, das genau so groß ist wie sein Feld auf der Seite.
- Das Widget ruft seine Daten ab und zeichnet sich.
- Sobald alles geladen ist, macht Blotch einen Screenshot davon.
- Der Screenshot wird in Schwarz-Weiß umgewandelt, wobei Punktmuster für Grautöne stehen, und an den Rahmen geschickt.
Der Rahmen zeigt das Bild dann bis zur nächsten Aktualisierung. Im Standardmodus schläft er in der Zwischenzeit.
Was das für Ihren Code bedeutet
Ein Widget ist ein Standbild. Niemand kann darauf tippen, darin scrollen oder einer Animation zusehen. Timer, Übergänge und Klick-Handler bewirken nichts Sinnvolles. Zeichnen Sie alles, was zu sehen sein soll, schon beim ersten Rendern.
Es gibt keinen Ladezustand. Blotch wartet, bis Ihr Widget seine Daten hat, bevor es das Bild macht. Deshalb gibt Ihnen der Hook useFetch einfach die Daten. Einen Lade-Spinner zeichnen Sie nie.
Fehler werden für Sie angezeigt. Wenn Ihr Widget einen Fehler wirft, zum Beispiel weil eine API nicht erreichbar ist, zeigt der Rahmen den Fehler an der Stelle Ihres Widgets an. Sie brauchen keine eigene Error Boundary. Um bei einem erwarteten Fehler eine freundlichere Meldung zu zeigen, prüfen Sie auf diesen Fehler und zeichnen Sie etwas anderes.
Anfragen laufen über Blotch. useFetch schickt jede Anfrage über die Server von Blotch. Deshalb funktionieren auch APIs, die Anfragen aus Browsern blockieren, und deshalb können Antworten zwischengespeichert und zwischen Rahmen geteilt werden. Es bedeutet auch, dass ein Widget keinen Server im Heimnetz einer Person erreichen kann.
Daten werden etwas früher abgerufen. Seiten werden einige Minuten vor ihrer Anzeige vorbereitet, die Daten sind also entsprechend älter, wenn jemand sie sieht. Das spielt selten eine Rolle, um Mitternacht aber schon. Siehe Das richtige Datum und die richtige Uhrzeit anzeigen.
Die Uhr wird vorgestellt. Damit ein Widget die richtige Uhrzeit zeigt, liefert new Date() den Moment, in dem die Seite angezeigt wird, nicht den Moment, in dem sie vorbereitet wurde. In der Vorschau des Widget-Studios ist es einfach die aktuelle Uhrzeit.
Zeitzonen müssen Sie ausdrücklich angeben. Der Browser, der Ihr Widget zeichnet, befindet sich nicht in der Zeitzone des Rahmens. Holen Sie die Zeitzone des Rahmens mit useTimeZone und übergeben Sie sie jedes Mal, wenn Sie eine Uhrzeit formatieren. Sonst kann Ihr Widget in der Vorschau, die die Zeitzone Ihres Computers verwendet, richtig aussehen und auf dem Rahmen trotzdem falsch sein.
Datums- und Zahlenformate folgen der Sprache des Rahmens. Formatierungsfunktionen wie toLocaleDateString verwenden die Sprache, die der Besitzer des Rahmens gewählt hat, sofern Sie keine angeben. Siehe Text in der Sprache des Rahmens anzeigen.
Alles kommt aus Hooks
Ihre Komponente Widget erhält keine Props. Alles, was sie darüber weiß, wo sie läuft, kommt aus den Hooks der Blotch-Bibliothek:
| Hook | Liefert Ihnen |
|---|---|
useInputs | Die Einstellungen, die die Person beim Installieren gewählt hat |
useAssets | Die Bilder, die Sie hochgeladen haben |
useLayoutShape | Größe und Form seines Felds |
useTimeZone | Die Zeitzone des Rahmens |
usePreferredLanguage | Die Sprache des Rahmens |
useTheme | Ob der Rahmen sein helles oder dunkles Design verwendet |
useBatteryLevel | Den Akkustand des Rahmens |
Schwarz und Weiß
Der Bildschirm zeigt zwei Farben: Schwarz und Weiß. Widgets werden mit Tailwind CSS gestaltet, das nur mit zwei Farben eingerichtet ist, foreground und background. Die beiden tauschen die Plätze, wenn der Rahmen sein dunkles Design verwendet. Andere Farbklassen bewirken nichts.
Schattierungen entstehen aus Punktmustern. Die eignen sich gut für große Flächen wie einen gefüllten Balken, lassen aber dünne Linien und kleinen Text gesprenkelt aussehen. Halten Sie Text und Linien in vollem text-foreground und verwenden Sie Abstufungen nur für Hintergründe.
Die Komponenten der Blotch-Bibliothek folgen diesen Regeln bereits. Wenn Sie Ihr Widget aus ihnen aufbauen, sieht es also am einfachsten richtig aus.
Größen
Der ganze Bildschirm misst 960 × 680 Pixel, und ein Widget kann jeden Teil davon bekommen, von einem kleinen Quadrat bis zum ganzen Bildschirm, im Quer- oder im Hochformat. Der Besitzer des Rahmens fügt außerdem einen Rand und einen Innenabstand darum hinzu. Ein Widget muss in jeder Größe gut aussehen. Siehe Für jede Größe gestalten.
Verdeckte Widgets werden nicht gezeichnet
Wenn ein Widget vollständig von anderen Widgets auf der Seite verdeckt ist, zeichnet Blotch es gar nicht.