beilage zu: me­t­abe­ne trmnl

statistisches

dieser artikel wurde vor 3 monaten und 1 woche veröffentlicht und zuletzt vor 3 monaten und 1 woche geändert. er hat 67 reaktionen gesammelt und es wurden bis jetzt 351 aufrufe erfasst.

67 reaktionen

diesen beitrag habe ich auf mastodon weiterveröffentlicht und dort kann er auch kommentiert oder gefavt werden. hier gibts ein kommentar-formular. ich freue mich auch über kommentare per e-mail. die likes, kommentare oder erwähnungen sammle ich u.a. aus diesen weiterveröffentlichten beiträgen wieder ein. kommentare per e-mail veröffentliche ich nicht.

43 likes

41 2

15 reposts

9 kommentare

9

  • @IngoHenning@fnordon.de avatar Ingo Henning @IngoHenning @fnordon.de

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

  • @ix@mstdn.wirres.net avatar ix @ix @mstdn.wirres.net

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

  • @IngoHenning@fnordon.de avatar Ingo Henning @IngoHenning @fnordon.de

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

  • @IngoHenning@fnordon.de avatar Ingo Henning @IngoHenning @fnordon.de

    @ix fertig :)
    Nochmals danke

  • @meta_bene@troet.cafe avatar meta bene @meta_bene @troet.cafe

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

  • @ix@mstdn.wirres.net avatar ix @ix @mstdn.wirres.net

    @meta_bene stimmt.

  • @meta_bene@troet.cafe avatar meta bene @meta_bene @troet.cafe

    @ix ❤️

  • @meta_bene@troet.cafe avatar meta bene @meta_bene @troet.cafe

    @ix 😍 die Mischung macht‘s

  • @meta_bene@troet.cafe avatar meta bene @meta_bene @troet.cafe

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

webmention senden

webmention an diesen artikel (metabene trmnl) senden.

an diesem tag
ähnliche beiträge
beiträge die hierher linken