Ideen gesucht für die Darstellung des HM- Action Detectors in der FTUI

[Tommy82]

Hi,
ich würde gerne auf einer Status Seite auch gerne den HM-ActionDetector darstellen, allerdings fehlt mir im moment die krative Vorstellungskraft wie so was aussehen könnte.

Hat das jemand umgesetzt oder einer eine idee wie ich das sinnvoll machen könnte?

Danke

[Tommy82]

Hab jetzt mal angefangen etwas zu bauen, allerdings sind mir die Abstände zwischen den Devices horizontal sowie vertical zu groß, wie kann ich das ändern? und wieso wird nicht oben links in der Ecke direkt angefangen?

Code Auswählen Erweitern

li data-row="5" data-col="1" data-sizex="7" data-sizey="1">
    <header class="headerTransparent">Action Detector</header><br>
<div class="inline">
    <div class="left">   
    <table>
        <tr>
        <td>
<div data-type="label" class="narrow darker">Bewegungsmelder</div>
</td>
<td>
<div data-type="symbol"
data-device="Bewegungsmelder"
data-get="Activity"
data-states='["alive","dead","unknown"]'
data-icons='["mi-done","mi-error","mi-error"]'
data-colors='["green","red","red"]'>
</div>
</td>
        <td>
<div data-type="label" class="narrow darker">Keller Rauchmelder</div>
</td>
<td>
<div data-type="symbol"
data-device="Keller"
data-get="Activity"
data-states='["alive","dead","unknown"]'
data-icons='["mi-done","mi-error","mi-error"]'
data-colors='["green","red","red"]'>
</div>
</td>
<td>
<div data-type="label" class="narrow darker">Mila Rauchmelder</div>
</td>
<td>
<div data-type="symbol"
data-device="Kinderzimmer_Mila"
data-get="Activity"
data-states='["alive","dead","unknown"]'
data-icons='["mi-done","mi-error","mi-error"]'
data-colors='["green","red","red"]'>
</div>
</td>
        <td>
<div data-type="label" class="narrow darker">Mila Heizung</div>
</td>
<td>
<div data-type="symbol"
data-device="Heizung_Kinderzimmer"
data-get="Activity"
data-states='["alive","dead","unknown"]'
data-icons='["mi-done","mi-error","mi-error"]'
data-colors='["green","red","red"]'>
</div>
</td>
</tr>

        <td>
<div data-type="label" class="narrow darker">Mila Fenster</div>
</td>
<td>
<div data-type="symbol"
data-device="Mila_Fenster"
data-get="Activity"
data-states='["alive","dead","unknown"]'
data-icons='["mi-done","mi-error","mi-error"]'
data-colors='["green","red","red"]'>
</div>
</td>
        <td>
<div data-type="label" class="narrow darker">Laya Rauchmelder</div>
</td>
<td>
<div data-type="symbol"
data-device="Rauchmelder_Kinderzimmer_Laya"
data-get="Activity"
data-states='["alive","dead","unknown"]'
data-icons='["mi-done","mi-error","mi-error"]'
data-colors='["green","red","red"]'>
</div>
</td>
<td>
<div data-type="label" class="narrow darker">Laya Heizung</div>
</td>
<td>
<div data-type="symbol"
data-device="Kinderzimmer_Laya"
data-get="Activity"
data-states='["alive","dead","unknown"]'
data-icons='["mi-done","mi-error","mi-error"]'
data-colors='["green","red","red"]'>
</div>
</td>
        <td>
<div data-type="label" class="narrow darker">Laya Fenster</div>
</td>
<td>
<div data-type="symbol"
data-device="Fenster_Laya"
data-get="Activity"
data-states='["alive","dead","unknown"]'
data-icons='["mi-done","mi-error","mi-error"]'
data-colors='["green","red","red"]'>
</div>
</td>
</tr>

</table>
</li>

Danke

[Tommy82]

Hab es mal weiter gebaut, allerdings bin ich nicht richtig zufrieden, welche ideen hättet ihr um es besser darzustellen?
Danke