Neregistrovaný Přihlásit Registrovat

Přidat otázku mezi oblíbenéZasílat nové odpovědi e-mailem Node-Red dashboard template UI widget

Zdar.
První jen pruzkum.
Umí v tom někdo?

Bych chtěl vytvořit to co mi zobrazuje Zigbee2MQTT.
Je to vlastně o HTML
Ty msg.payload si umim pořešit.
Nevim jak přidet tu ikonu nebo obrazek.
Vim kam ho umistit abych nemusel zadavat cest a stačilo by jen zadat třeba mujobrazek.jpg

<style>
.main
{
height:200px;
width:400px;
background:lightblue;

}
</style>
<div class="main">
<table>
<tr><th>Muj</th><th>test</th><th>template</th></tr>
<tr><td>Pavel</td><td>{{msg.payload[0].battery}}</td><td>{{msg.payload[0].temp}}</td></tr>
<tr><td>Ruda</td><td>{{msg.payload[0].battery}}</td><td>{{msg.payload[0].temp}}</td></tr>
<tr><td>Jenda</td><td>{{msg.payload[1].battery}}</td><td>{{msg.payload[1].temp}}</td></tr>
</table>
</div>

teplota.png 10.99 KiB
Předmět Autor Datum
https://www.jakpsatweb.cz/obrazky.html
host 09.01.2025 21:39
 host
Netuším o čo Ti ide asi o toto? https://www.geeksforgeeks.org/how-to-add-image-in-html-table/
pme 09.01.2025 21:46
 pme
Tak jsem zkusil. Je nějaký programek na principu w3schools? https://www.w3schools.com/Html/tryit.asp…
BigSandy 10.01.2025 12:12
 BigSandy
Buňce tabulky <td> přiřaď třídu (class) a v v CSS pak napíšeš text-align:center. Taky je vhodné u ta… poslední
host 10.01.2025 13:21
 host

Tak jsem zkusil.
Je nějaký programek na principu w3schools?
https://www.w3schools.com/Html/tryit.asp?filename=tryhtml_default
V jednom okně vložim kod a v druhem okně uvidim vysledek?
Muj první pokus.
https://ibb.co/dGg0k7r
Pomuže někdo doupravit?
Text teploměr ložnice a obrazek teploměru vycentrovat a střed.
Mezi červeným teploměrem a textem teplota je moc velka mezera.
To same u vlhkosti.


<style>
    .main {
        height: 150px;
        width: 200px;
        background: lightblue;
    }
</style>
<div class="main">
    <table>
        <tr>
            <th>Teploměr</th> <th>ložnice</th>
        </tr>

        <tr>
            <td><img src="http://192.168.1.5:1880/teploměr_50.png"></td>
        </tr>

        <tr>
            <td><img src="http://192.168.1.5:1880/hot_24.png"></td>
            <td>Teplota</td>
            <td>{{msg.payload[0].temperature}}°C</td>
        </tr>

        <tr>
            <td><img src="http://192.168.1.5:1880/humidity_24.png"></td>
            <td>Vlhkost</td>
            <td>{{msg.payload[1].humidity}}%</td>
        </tr>
    </table>
</div>

Zpět do poradny Odpovědět na původní otázku Nahoru