Werte aus Datei als farbigen Kreis darstellen

  • Hallo zusammen,

    ich habe da mal eine Frage an die Experten hier:

    Habe mir eine kleine Smart Home Homepage gebastelt in der aus einer Datei ein Relaisstatus abgefragt wird. In der Datei steht eine 0 wenn das Relais aus ist und eine 1 wenn es an ist.

    Diese 0 oder 1 wird dann in einer Tabelle auf der Homepage angezeigt.

    Gibt es die Möglichkeit diese 0 oder 1 in einen roten bzw. grünen Punkt umzuwandeln, da die 0 oder 1 hier nicht wirklich hübsch aussieht.:/

    Da ich nur rudimentäre Kenntnisse von der Thematik habe, bitte vielleicht mit Beispielcode. Habe leider keine Ahnung von PHP, oder Java Script.


    Danke schonmal im vorraus.

    P.S. So ist das aktuell gelöst mit der 0 und 1.

    Code
    <th>Relais</th><th>Schalten</th><th>Status</th><th>Was</th>
    </tr>
    <td><form action="/sensoren/relais/r1_1an.sh" method="get"><input type="submit" value="AN" /></form></td>
    <td><form action="/sensoren/relais/r1_1aus.sh" method="get"><input type="submit" value="AUS"/></form></td>
    <td><object type="text/plain" data="test.txt" height="80" width="400">
    <iframe src="/sensoren/relais/werte/R1_1.txt" width="20" height="20" name="R1" frameborder="0" ></iframe></td>

    Einmal editiert, zuletzt von Straggle (30. Juni 2020 um 18:48)

  • Danke für die schnelle Antwort.

    Ich denke mir der Anleitung bekomm ich das hin, jedoch ist mir immer noch nicht klar, wie daraus ein farbiger Kreis/Punkt werden soll?

    In der echo Function wird hier nur auf Texte hingewiesen die angezeigt werden sollen.

  • Auch einen farbigen Kreis mit CSS zu machen, ist relativ simpel:

    HTML
    <div class="circle"></div>
    CSS
        <style>
            .circle {
                width: 50px;
                height: 50px;
                background-color: red;
                border: 2px solid black;
                border-radius: 50%;
            }
        </style>

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!