Autor Thema: Wie bekomme ich die aktiven Geräte nach oben...  (Gelesen 395 mal)

Offline moonsorrox

  • Hero Member
  • *****
  • Beiträge: 2888
  • Online
Wie bekomme ich die aktiven Geräte nach oben...
« am: 18 März 2018, 01:24:32 »
ich habe eine Aufstellung die mir jeweils den Status von Geräten anzeigt.
Wobei es so ist das die Geräte die gerade nicht An/Ein/open sind nicht angezeigt werden, dass klappt eigentlich wunderbar...
Nur um so weniger Geräte es gegen Abend werden um so mehr rutschen die Geräte die noch aktuell sind in die Mitte der Box.

Wie bekomme ich das jetzt hin das alle aktuellen Geräte immer ganz oben sind..?

Aktuell der Code von allenGeräten:
<!-- Gerätestatus Beleuchtung usw. -->
<li data-row="9" data-col="6" data-sizex="5" data-sizey="9" style="background-color:#3d445c">
<div class="vbox" style="width:98%; background-color:#292e3d">
<div class="hbox">
<div class="card">
<div class="vbox">
<div class="top-narrow" style="width:100%" data-type="classchanger" data-device="WZ_TK_Terrasse" data-get="state" data-get-on="open" data-off-class="hide">
<div class="hbox">
<div class="card grow-4"><div><div style="text-align:left; font-size:140%">Terrassentür - OFFEN</div></div></div>
<div class="card"><div></div>
<div class="large right-align" data-type="symbol" data-device="WZ_TK_Terrasse" data-get="state" data-on-color="crimson" data-get-on="open" data-icon="fs-fts_door_tilt"></div></div>
</div>
</div>
<!-- ==== Schlafzimmer - Fensterkontakt ==== -->
<div class="top-narrow" style="width:100%" data-type="classchanger" data-device="SZ_Fenstersensor" data-get="state" data-get-on="tilted" data-off-class="hide">
<div class="hbox">
<div class="card grow-4"><div><div style="text-align:left; font-size:140%">Schlafzimmer Fenster - Gekippt</div></div></div>
<div class="card"><div></div> <div class="large right-align" data-type="symbol" data-device="SZ_Fenstersensor" data-get="state" data-on-color="yellow" data-get-on="tilted" data-icon="oa-fts_window_1w_tilt"></div></div>
</div>
</div>
<!-- ========== Garagentor ========== -->
<div class="top-narrow" style="width:100%" data-type="classchanger" data-device="Garagentorsensor" data-get="state" data-get-on="open" data-off-class="hide">
<div class="hbox">
<div class="card grow-4"><div><div style="text-align:left; font-size:140%">Garagen Tor - OFFEN</div></div></div>
<div class="card"><div></div>
<div class="large right-align" data-type="symbol" data-device="Garagentorsensor" data-get="state" data-on-color="crimson" data-get-on="open" data-icon="oa-fts_garage_door_50"></div></div>
</div>
</div>
<!-- ====== Türklingel ====== -->
<div class="top-narrow" style="width:100%" data-type="classchanger" data-device="Klingel" data-get="state" data-get-on="on" data-off-class="hide">
<div class="hbox">
<div class="card grow-4"><div><div style="text-align:left; font-size:140%">Türklingel - EIN</div></div></div>
<div class="card"><div></div>
<div class="large right-align" data-type="symbol" data-device="Klingel" data-get="state" data-on-color="crimson" data-get-on="on" data-icon="fs-ring"></div></div>
</div>
</div>
<!-- ==== LED TV - Lampe ==== -->
<div class="top-narrow" style="width:100%" data-type="classchanger" data-device="WZ_Lampe_TV" data-get="state" data-get-on="on" data-off-class="hide">
<div class="hbox">
<div class="card grow-4"><div><div style="text-align:left; font-size:140%">LED-TV Lampe - EIN</div></div></div>
<div class="card"><div></div>
<div class="large right-align" data-type="symbol" data-device="WZ_Lampe_TV" data-get="state" data-on-color="crimson" data-get-on="on" data-icon="oa-light_led_stripe"></div></div>
</div>
</div>
<!-- ==== LED Schrank und Vitrine ==== -->
<div class="top-narrow" style="width:100%" data-type="classchanger" data-device="WZ_Schrank" data-get="state" data-get-on="ON" data-off-class="hide">
<div class="hbox">
<div class="card grow-4"><div><div style="text-align:left; font-size:140%">LED Schrank & Vitrine</div></div></div>
<div class="card"><div></div>
<div class="large right-align" data-type="symbol" data-device="WZ_Schrank" data-get="state" data-on-color="crimson" data-get-on="ON" data-icon="oa-light_led_stripe"></div></div>
</div>
</div>
<!-- ==== Beleuchtung Weg vorn & Schuppen ==== -->
<div class="top-narrow" style="width:100%" data-type="classchanger" data-device="WegLampe_Sw_01" data-get="state" data-get-on="on" data-off-class="hide">
<div class="hbox">
<div class="card grow-5"><div><div style="text-align:left; font-size:140%">Beleuchtung Weg vorn & Schuppen</div></div></div>
<div class="card"><div></div>
<div class="large right-align" data-type="symbol" data-device="WegLampe_Sw_01" data-get="state" data-on-color="crimson" data-get-on="on" data-icon="oa-light_wall_1"></div></div>
</div>
</div>
<!-- ==== Beleuchtung Weg hinten ==== -->
<div class="top-narrow" style="width:100%" data-type="classchanger" data-device="WegLampe_Sw_02" data-get="state" data-get-on="on" data-off-class="hide">
<div class="hbox">
<div class="card grow-4"><div><div style="text-align:left; font-size:140%">Beleuchtung Weg hinten</div></div></div>
<div class="card"><div></div>
<div class="large right-align" data-type="symbol" data-device="WegLampe_Sw_02" data-get="state" data-on-color="crimson" data-get-on="on" data-icon="oa-light_uplight"></div></div>
</div>
</div>
<!-- ==== Beleuchtung Garten ==== -->
<div class="top-narrow" style="width:100%" data-type="classchanger" data-device="AU_Garten" data-get="state" data-get-on="ON" data-off-class="hide">
<div class="hbox">
<div class="card grow-4"><div><div style="text-align:left; font-size:140%">Beleuchtung Garten</div></div></div>
<div class="card"><div></div>
<div class="large right-align" data-type="symbol" data-device="AU_Garten" data-get="state" data-on-color="crimson" data-get-on="ON" data-icon="oa-light_uplight"></div></div>
</div>
</div>
<!-- ==== Beleuchtung Terrasse ==== -->
<div class="top-narrow" style="width:100%" data-type="classchanger" data-device="LichtTerrasse" data-get="state" data-get-on="on" data-off-class="hide">
<div class="hbox">
<div class="card grow-4"><div><div style="text-align:left; font-size:140%">Beleuchtung Terrasse</div></div></div>
<div class="card"><div></div>
<div class="large right-align" data-type="symbol" data-device="LichtTerrasse" data-get="state" data-on-color="crimson" data-get-on="on" data-icon="oa-light_outdoor"></div></div>
</div>
</div>
<!-- ==== Beleuchtung 3x LED Eingang ==== -->
<div class="top-narrow" style="width:100%" data-type="classchanger" data-device="AussenLampe" data-get="state" data-get-on="on" data-off-class="hide">
<div class="hbox">
<div class="card grow-4"><div><div style="text-align:left; font-size:140%">3x LED Eingang</div></div></div>
<div class="card"><div></div>
<div class="large right-align" data-type="symbol" data-device="AussenLampe" data-get="state" data-on-color="crimson" data-get-on="on" data-icon="oa-light_downlight"></div></div>
</div>
</div>
<!-- ==== Licht - OG ==== -->
<div class="top-narrow" style="width:100%" data-type="classchanger" data-device="OG_Licht_Buero" data-get="state" data-get-on="on" data-off-class="hide">
<div class="hbox">
<div class="card grow-4"><div><div style="text-align:left; font-size:140%">Beleuchtung OG Büro</div></div></div>
<div class="card"><div></div>
<div class="large right-align" data-type="symbol" data-device="OG_Licht_Buero" data-get="state" data-on-color="crimson" data-get-on="on" data-icon="oa-light_pendant_light"></div></div>
</div>
</div>
<!-- ==== Tablet Flur Ladestation ==== -->
<div class="top-narrow" style="width:100%" data-type="classchanger" data-device="di_Ladestation_FlurOben" data-get="state" data-get-on="on" data-off-class="hide">
<div class="hbox">
<div class="card grow-5"><div><div style="text-align:left; font-size:140%">Tablet Flur wird geladen</div></div></div>
<div class="card"><div></div>
<div class="large right-align" data-type="symbol" data-device="di_Ladestation_FlurOben" data-get="state" data-on-color="crimson" data-get-on="on" data-icon="oa-it_smartphone"></div></div>
</div>
</div>
<!-- ==== Tablet Küche Ladestation ==== -->
<div class="top-narrow" style="width:100%" data-type="classchanger" data-device="di_Ladestation_Kueche" data-get="state" data-get-on="on" data-off-class="hide">
<div class="hbox">
<div class="card grow-4"><div><div style="text-align:left; font-size:140%">Tablet Küche wird geladen</div></div></div>
<div class="card"><div></div>
<div class="large right-align" data-type="symbol" data-device="di_Ladestation_Kueche" data-get="state" data-on-color="crimson" data-get-on="on" data-icon="oa-it_smartphone"></div></div>
</div>
</div>
<!-- ==== Schlafzimmer Uhr ==== -->
<div class="top-narrow" style="width:100%" data-type="classchanger" data-device="Uhrzeit" data-get="state" data-get-on="on" data-off-class="hide">
<div class="hbox">
<div class="card grow-4"><div><div style="text-align:left; font-size:140%">Schlafzimmer Uhr - EIN</div></div></div>
<div class="card"><div></div>
<div class="large right-align" data-type="symbol" data-device="Uhrzeit" data-get="state" data-on-color="crimson" data-get-on="on" data-icon="oa-time_clock"></div></div>
</div>
</div>
<!-- ==== Gardena Pumpe ==== -->
<div class="top-narrow" style="width:100%" data-type="classchanger" data-device="GardenaPumpe" data-get="state" data-get-on="on" data-off-class="hide">
<div class="hbox">
<div class="card grow-4"><div><div style="text-align:left; font-size:140%">Gardena Pumpe - EIN</div></div></div>
<div class="card"><div></div>
<div class="large right-align" data-type="symbol" data-device="GardenaPumpe" data-get="state" data-on-color="crimson" data-get-on="on" data-icon="oa-sani_garden_pump"></div></div>
</div>
</div>
<!-- ==== Beleuchtung Garage ==== -->
<div class="top-narrow" style="width:100%" data-type="classchanger" data-device="LichtGarage" data-get="state" data-get-on="on" data-off-class="hide">
<div class="hbox">
<div class="card grow-4"><div><div style="text-align:left; font-size:140%">Beleuchtung Garage</div></div></div>
<div class="card"><div></div>
<div class="large right-align" data-type="symbol" data-device="LichtGarage" data-get="state" data-on-color="crimson" data-get-on="on" data-icon="oa-fts_garage"></div></div>
</div>
</div>
<!-- ==== Beleuchtung Schlafzimmer ==== -->
<div class="top-narrow" style="width:100%" data-type="classchanger" data-device="LichtSZ" data-get="state" data-get-on="on" data-off-class="hide">
<div class="hbox">
<div class="card grow-4"><div><div style="text-align:left; font-size:140%">Beleuchtung Schlafzimmer</div></div></div>
<div class="card"><div></div>
<div class="right-align" data-type="symbol" data-device="LichtSZ" data-get="state" data-on-color="crimson" data-get-on="on" data-icon="oa-light_led_stripe"></div></div>
</div>
</div>
<!-- ==== Netzwerkdrucker Büro ==== -->
<div class="top-narrow" style="width:100%" data-type="classchanger" data-device="BU_Sonoff_1" data-get="state" data-get-on="on" data-off-class="hide">
<div class="hbox">
<div class="card grow-4"><div><div style="text-align:left; font-size:140%">Netzwerkdrucker Büro</div></div></div>
<div class="card"><div></div>
<div class="large right-align" data-type="symbol" data-device="BU_Sonoff_1" data-get="state" data-on-color="crimson" data-get-on="on" data-icon="fs-it_printer"></div></div>
</div>
</div>
<!-- ==== Proxmox - Server ==== -->
<div class="top-narrow" style="width:100%" data-type="classchanger" data-device="BU_Sonoff_2" data-get="state" data-get-on="on" data-off-class="hide">
<div class="hbox">
<div class="card grow-4"><div><div style="text-align:left; font-size:140%">Proxmox - Server</div></div></div>
<div class="card"><div></div>
<div class="large right-align" data-type="symbol" data-device="BU_Sonoff_2" data-get="state" data-on-color="crimson" data-get-on="on" data-icon="oa-it_server"></div></div>
</div>
</div>
<!-- ==== Licht Weihnachten Busch ==== -->
<div class="top-narrow" style="width:100%" data-type="classchanger" data-device="LichtEG" data-get="state" data-get-on="on" data-off-class="hide">
<div class="hbox">
<div class="card grow-4"><div><div style="text-align:left; font-size:140%">Licht Weihnachten Busch</div></div></div>
<div class="card"><div></div>
<div class="large right-align" data-type="symbol" data-device="LichtEG" data-get="state" data-on-color="crimson" data-get-on="on" data-icon="oa-light_led_stripe"></div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>

Screenshot von nur einem aktiven Gerät, die Rollläden sind immer da, also müßte das gerade angezeigte Gerät direkt darunter stehen, ist aber zentriert in der mitte der Box.
« Letzte Änderung: 18 März 2018, 12:39:24 von moonsorrox »
Intel-NUC i3: FHEM-Server 5.8 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 3674
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:Wie bekomme ich die aktiven Geräte nach oben...
« Antwort #1 am: 19 März 2018, 09:05:30 »
in einer hbox hilft items-top

<li data-row="1" data-col="6" data-sizex="5" data-sizey="9" style="background-color:#3d445c" class="gs-w has_vbox">
<div class="vbox" style="width:98%; background-color:#292e3d">
<div class="hbox items-top">
<div class="card">
                                     ...

Offline moonsorrox

  • Hero Member
  • *****
  • Beiträge: 2888
  • Online
Antw:Wie bekomme ich die aktiven Geräte nach oben...
« Antwort #2 am: 19 März 2018, 12:21:31 »
Super, vielen Dank...!
Da die Zeilen Code denke ich von mir sind - sehe ich an den Farben - was hast du dort oben noch für eine class drin..?

class="gs-w has_vbox"finde ich bisher nirgends im Wiki
Intel-NUC i3: FHEM-Server 5.8 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 3674
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:Wie bekomme ich die aktiven Geräte nach oben...
« Antwort #3 am: 19 März 2018, 12:24:01 »
Nur das items-top. Alles andere wird automatisch angehangen

Offline moonsorrox

  • Hero Member
  • *****
  • Beiträge: 2888
  • Online
Antw:Wie bekomme ich die aktiven Geräte nach oben...
« Antwort #4 am: 19 März 2018, 12:26:37 »
ja das hat auch prima geklappt...! ;)

ich wollte nur rein aus Interesse wissen was das dort oben im <li> für eine class ist  :D
Intel-NUC i3: FHEM-Server 5.8 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

 

decade-submarginal