Widgets positionieren

[schalkan56]

Hallo,

ich habe Schwierigkeiten die Widgets gemäß meinen Vorstellungen zu positionieren.

Code Auswählen Erweitern

<li data-row="1" data-col="2" data-sizex="2" data-sizey="2">
        <header>Kuche</header>
        <div class="cell left">
        <div data-type="thermostat" data-device="k_heiz_clima" data-get="desired-temp" data-temp="measured-temp"></div>
        <div data-type="label">Heizung</div>
       
       
      <div data-type="circlemenu" class="cell circlemenu">
    <ul class="menu">
      <li><div data-type="push" data-icon="fa-bars"></div></li>
     
      <li><div data-type="push" data-device="k_js"
               data-set-on="pct 100"
               data-icon="">100</div></li>
     
      <li><div data-type="push" data-device="k_js"
               data-set-on="pct 0"
               data-icon="">0</div></li>         
     
      <li><div data-type="push" data-device="k_js"
               data-set-on="pct 50"
               data-icon="">50</div></li>

       <li><div data-type="push" data-device="k_js"
               data-set-on="pct 75"
               data-icon="">75</div></li>
     
    </ul>
</div>
<div data-type="label" class="cell">Rollo</div>
       
</div>

       
        <div class="cell right">
                <div data-type="symbol" data-device="k_sensor_links" class="narrow"></div>
                <div data-type="label" class="narrow darker small">Fenster</div>
               
        </div>
       
         <div class="col-4-4">
              <div data-type="switch" class="cell"
            data-device="k_deckenlampe"
            data-get-on="on"
            data-get-off="off"
            class="rigth"></div>
            </div>
</li>

Der letzte Switch soll auf der rechten Seite auf der Höhe der Rollo-Circlemenüs sein.
Wie bekomme ich den Switch einige Zeilen nach unten?

[setstate]

so kann man das optimieren:
- Gridster sizex und sizey auf 3 (für basis 77 und 71) erhöht, damit Platz ist
- ohne "left", "right" und "cell"
- nur mit "row" und "col-1-2" + nötige "top-space", "left-space" Korrekturen
- falsche Circlemenu Class weggenommen
- doppelte Class beim Switch weggenommen
- Unnötige data-type="label" weggenommen, wo kein Datenaustausch mit FHEM benötigt wird

Code Auswählen Erweitern

<li data-row="1" data-col="1" data-sizex="3" data-sizey="3">
    <header>Kuche</header>
    <div class="row">
        <div class="col-1-2">
            <div class="left-space" data-type="thermostat" data-device="k_heiz_clima" data-get="desired-temp" data-temp="measured-temp"></div>
            <div class="top-narrow">Heizung</div>
        </div>
        <div class="col-1-2">
            <div data-type="symbol" data-device="k_sensor_links" class="narrow"></div>
            <div>Fenster</div>
        </div>
    </div>
    <div class="row">
        <div class="col-1-2">
            <div class="top-space" data-type="circlemenu">
                <ul>
                    <li><div data-type="push" data-icon="fa-bars"></div></li>
                    <li><div data-type="push" data-device="k_js"
                             data-set-on="pct 100"
                             data-icon="">100</div></li>
                    <li><div data-type="push" data-device="k_js"
                             data-set-on="pct 0"
                             data-icon="">0</div></li>
                    <li><div data-type="push" data-device="k_js"
                             data-set-on="pct 50"
                             data-icon="">50</div></li>
                     <li><div data-type="push" data-device="k_js"
                             data-set-on="pct 75"
                             data-icon="">75</div></li>
                 </ul>
            </div>
            <div>Rollo</div>
        </div>
        <div class="col-1-2">
            <div class="top-space" data-type="switch"  data-device="k_deckenlampe"  data-get-on="on" data-get-off="off"></div>
            <div>Fenster</div>
        </div>
     </div>
</li>


[bjoernbo]

Hallo, ich habe eine Frage zum Label: Kann ich die Zeichenlänge bei der Ausgabe beschränken?

<div data-type="label"
                            data-device="Verbrauchsmesser"
                            data-get="power"
                            data-limits="[5,10,15,30,60,100]"
                            data-colors='["#98FB98","#9ACD32","#FFA500","#FF4500","#FF3030","#8B1A1A"]'
                            data-unit=" Watt"
                            class="inline cell big">
</div>

Ausgabewert ist derzeit

142.034814

Es würde reichen wenn es gerundet wird.

[setstate]

data-fix="1" schneidet alles nach einer Kommastelle ab

[bjoernbo]

das wars, genau! Danke setstate

[schalkan56]

Danke