me­t­abe­ne trmnl

felix schwenzel

ich fürch­te ro­bin / @meta_bene wird das für ein sa­kri­leg hal­ten, aber ich bin ehr­lich ge­sagt be­geis­tert da­von, wie gut sich tu­sche auf dem e-pa­per macht. je­den tag ein zu­fäl­li­ges neu­es bild. bei der aus­wahl der 67 bil­der, aus de­nen eine zu­falls­funk­ti­on um mit­ter­nacht ein neu­es bild aus­sucht, war ich wie­der baff, wie gut und in­tel­li­gent die zeich­nun­gen von me­t­abe­ne sind. ich fand die im­mer schon toll und habe auch mal ein ori­gi­nal ge­kauft, aber heu­te war ich wie­der neu be­geis­tert und jetzt vor­aus­sicht­lich auch täg­lich neu.

eine zeichnung von metabene auf meinem neuen trmnl e-paper-display. diese sagt: „immer streiten wir über dasselbe.“ „das gleiche.“
grossaufnahme eines der tusche-vögel.

die me­t­abe­ne bil­der baue ich mir auf ei­ner html-sei­te selbst zu­sam­men, da­mit sie im ver­hält­nis 800 × 480 px ei­nen weis­sen hin­ter­grund ha­ben. die sei­te ent­hält ei­nen lan­gen image-ar­ray, aus dem bei je­dem rel­oad ein bild aus­ge­wählt wird:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zu­falls­bild 800x480</title>
    <style>
        /* Seite komplett weiß und zentriert */
        body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            back­ground-color: #ffffff;
            overflow: hidden;
        }

        /* Der feste Viewport */
        .viewport {
            width: 800px;
            height: 480px;
            back­ground-color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Bild-Styling */
        #display-image {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            /* Ver­hin­dert kurzes Auf­blit­zen eines leeren Rahmens */
            vi­si­bi­li­ty: hidden; 
        }
    </style>
</head>
<body>

    <div class="viewport">
        <img id="display-image" src="" alt="Zu­fäl­li­ges Bild">
    </div>

    <script>
         const images = [
             "https://cdn.prod.website-files.com/6504334c6af52742d08b4cb4/69a6a2e68b68f2cb1535473f_26-11-voegel-streiten.jpg",
             "https://cdn.prod.website-files.com/6504334c6af52742d08b4cb4/696784c68841edf99d5eef07_26-006-pinguin-an­mei­ner­stel­le.jpg"
         ];
        const im­g­Ele­ment = document.ge­t­Ele­ment­By­Id('display-image');

        // 1. Zu­fäl­li­gen Index auswählen
        const ran­do­m­In­dex = Math.floor(Math.random() * images.length);

        // 2. Bild­quel­le setzen
        im­g­Ele­ment.src = images[ran­do­m­In­dex];

        // 3. Erst anzeigen, wenn das Bild geladen ist (vermeidet weißes Flackern)
        im­g­Ele­ment.onload = function() {
            im­g­Ele­ment.style.vi­si­bi­li­ty = 'visible';
        };
    </script>
</body>
</html>

die­se sei­te lese ich mit dem gran­dio­sen trmnl home as­si­sant screen­shot tool, das ja auch ein­fa­che web­sei­ten screen­s­ho­ten kann. die screen­shots wer­den um mit­ter­nacht ge­macht und per web­hook an den web­hook-plug­in ge­sen­det. der spielt das bild zwar theo­re­tich stünd­lich auf’s trmnl ein, aber viel­leicht ist trmnl auch klug ge­nug das nur ein­mal täg­lich zu ma­chen. 

beiträge die hierher linken
9 kommentare
Ingo Henning
Ingo Henning

@ix gibt es dazu demnächst was aus dem Maschinenraum, oder muss ich das (etwa) selber bauen?
Mein TRMNL ist heute angekommen.

ix
ix

@IngoHenning die metabene bilder baue ich mir auf einer html-seite selbst zusammen, damit sie im verhältnis 800 × 480 px einen weissen hintergrund haben. die seite enthält einen langen image-array, aus dem bei jedem reload ein bild ausgewählt wird:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zufallsbild 800x480</title>
    <style>
        /* Seite komplett weiß und zentriert */
        body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #ffffff;
            overflow: hidden;
        }

        /* Der feste Viewport */
        .viewport {
            width: 800px;
            height: 480px;
            background-color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Bild-Styling */
        #display-image {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            /* Verhindert kurzes Aufblitzen eines leeren Rahmens */
            visibility: hidden; 
        }
    </style>
</head>
<body>

    <div class="viewport">
        <img id="display-image" src="" alt="Zufälliges Bild">
    </div>

    <script>
         const images = [
             "https://cdn.prod.website-files.com/6504334c6af52742d08b4cb4/69a6a2e68b68f2cb1535473f_26-11-voegel-streiten.jpg",
             "https://cdn.prod.website-files.com/6504334c6af52742d08b4cb4/696784c68841edf99d5eef07_26-006-pinguin-anmeinerstelle.jpg"
         ];
        const imgElement = document.getElementById('display-image');

        // 1. Zufälligen Index auswählen
        const randomIndex = Math.floor(Math.random() * images.length);
        
        // 2. Bildquelle setzen
        imgElement.src = images[randomIndex];

        // 3. Erst anzeigen, wenn das Bild geladen ist (vermeidet weißes Flackern)
        imgElement.onload = function() {
            imgElement.style.visibility = 'visible';
        };
    </script>
</body>
</html>

diese seite lese ich mit dem grandiosen trmnl home assisant screenshot tool, das ja auch einfache webseiten screenshoten kann. die screenshots werden um mitternacht gemacht und per webhook an den webhook-plugin gesendet. der spielt das bild zwar theoretich stündlich auf’s trmnl ein, aber vielleicht ist trmnl auch klug genug das nur einmal täglich zu machen.

Ingo Henning
Ingo Henning

@ix danke, dass baue ich direkt nach.
Ich hatte gestern große Probleme weil das Gerät immer falsch als TRMNL X im Backend angezeigt wurde und nix funktioniert hat. Der Support hat das zum Glück repariert. Jetzt kann ich den Sonntag nutzen und Pinguine, Kraniche und Krähen anzeigen lassen.

Ingo Henning
Ingo Henning

@ix fertig :)
Nochmals danke

meta bene
meta bene

@ix nicht schlecht und natürlich clever gemacht. Aber Papier ist natürlich trotzdem schöner.

meta bene
meta bene

@ix 😍 die Mischung macht‘s

meta bene
meta bene

@ix für ein harmonisches Miteinander von Print und Digital