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>
https://www.jakpsatweb.cz/obrazky.html
Netuším o čo Ti ide asi o toto?
https://www.geeksforgeeks.org/how-to-add-image-in-html-table/
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.
Buňce tabulky <td> přiřaď třídu (class) a v v CSS pak napíšeš text-align:center.
Taky je vhodné u tagu img doplnit alt a rozměry (height, width).
A proboha nepoužívej u názvů obrázků diakritiku.