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>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>

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