Zentrierung in Widgets

[klotzek]

Hallo,

ich bastele gerade nach der MDT-Glas-rtr Anleitung hier im Forum eine neue Heizungssteuerung. Optisch sieht das dann folgendermaßen aus: Bildschirmfoto2.png


Ich frage mich, warum Ist- und Soll-Temperatur nicht zentriert sind und warum die 5 Icons nicht in einer Reihe stehen. Kann Jemand helfen?

Ich hab nach einer *.css gesucht, die das vielleicht definiert, aber gefunden hab ich nix. BTW: Nicht-zentrisch sind meine Standard rtr-Widgets in den anderen Zimmern auch!?

So sieht mein HTML-File aus:

/**
* -----------------------------------------------------------------------------
* @package     smartVISU
* @author      Martin Gleiß
* @copyright   2012
* @license     GPL [http://www.gnu.de]
* -----------------------------------------------------------------------------
*         {{basic.switch('S1','Erdgeschoss.Schlafen.Melike.Schalten', icon1~'light_floor_lamp.png', icon0~'light_floor_lamp.png')}} Sofa Beleuchtung
*/


{% extends "base.html" %}

{% block sidebar %}
    {%include 'rooms_menu.html' %}
{% endblock %}

{% block content %}

{% import "widget_uzsu.html" as uzsu %}

<h1>
<img class="icon"' src='{{ icon0 }}scene_sleeping.png'/>
Schlafen</h1>

  <table width=100%>
    <tr>
  <td align=middle>
Scenen  
  <span data-role="controlgroup" data-type="horizontal">  
    {{ basic.button('EG.Schlafen.Szene_Aufstehen_schalten', 'EG.Schlafen.Szene_Aufstehen_schalten', '', 'icons/ws/audio_eject.png', '1', 'mini') }}
    {{ basic.button('EG.Schlafen.Szene_Fernsehen_schalten', 'EG.Schlafen.Szene_Fernsehen_schalten', '', 'icons/ws/it_television.png', '1','mini') }}
    {{ basic.button('EG.Schlafen.Szene_alle_Lichter_aus_schalten', 'EG.Schlafen.Szene_alle_Lichter_aus_schalten', '', 'icons/ws/scene_night.png', '1','mini') }}
    </span>
  </td>
  </tr>
    </table>

<div class="block">
<div class=""set-2" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true">
<div data-role="collapsible" data-collapsed="false">
    <h3>Heizung</h3>
  <table width=100%>
    <tr>
  <td align=left>

            {% import "widget_ext.html" as ext %}
            {{ ext.rtr('EG.Schlafen.Heizung1', 'EG.Schlafen.Heizung.ist', 'EG.Schlafen.Heizung.soll', 'EG.Schlafen.Heizung.sollwertverschiebung', 'EG.Schlafen.Heizung.modus', 'EG.Schlafen.Heizung.stellwert', 'EG.Schlafen.Heizung.uzsu', 0.5) }}

          
<!--          {{ device.rtr('EG.Schlafen.Heizung', '',    'EG.Schlafen.Heizung.ist', 'EG.Schlafen.Heizung.soll', 'EG.Schlafen.Heizung.modus', 'EG.Schlafen.Heizung.modus', 'EG.Schlafen.Heizung.modus', 'EG.Schlafen.Heizung.status') }} </td>
-->            
            
</td>
</tr>
</table>


</div>
</div>
</div>



<div class="block">
<div class=""set-2" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true">
<div data-role="collapsible" data-collapsed="false">
    <h3>Beleuchtung</h3>
  <table width=100%>
    <tr>
  <td align=left>

        {{ device.dimmer('EG.Schlafen.Licht_Melike','Melike', 'EG.Schlafen.Licht_Melike.Schalten', 'EG.Schlafen.Licht_Melike.Dimmen')}}
    </td>
  </tr>
  <tr>
    <td align=left>
        {{ device.dimmer('EG.Schlafen.Licht_Juergen','Jürgen', 'EG.Schlafen.Licht_Juergen.Schalten', 'EG.Schlafen.Licht_Juergen.Dimmen')}}
    </td>
  </tr>

  <tr>
    <td align=left>
        {{ device.dimmer('EG.Schlafen.Licht','Schlafzimmer Beleuchtung', 'EG.Schlafen.Licht.Schalten', 'EG.Schlafen.Licht.Dimmen')}}
    </td>
  </tr>

  <tr>
    <td align=left>
{{ uzsu.uzsu_icon('EG.Schlafen.Licht.uzsu', 'EG.Schlafen.Licht.uzsu', 'Schalfzimmer Beleuchtung') }}    </td>
  </tr>
    </table>
</div>
</div>
</div>




<div class="block">
<div class=""set-2" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true">
<div data-role="collapsible" data-collapsed="false">
    <h3>Klappläden</h3>
  <table width=100%>
    <tr>
  <td align=left>
<span data-role="controlgroup" data-type="horizontal">
{{ basic.button('KL1a', 'EG.Schlafen.Laden1.Bewegen', 'Auf', 'forward', '0', 'mini') }}
{{ basic.button('KL1z', 'EG.Schlafen.Laden1.Bewegen', 'Zu', 'back', '1', 'mini') }}
</span>

{{ uzsu.uzsu_icon('EG.Schlafen.Laden1.uzsu', 'EG.Schlafen.Laden1.uzsu', 'Klappladen Schlafen') }}    

Fenster Schlafzimmer
</td>
</tr>
</table>


</div>
</div>
</div>


<div class="block">
<div class=""set-2" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true">
<div data-role="collapsible" data-collapsed="false">
    <h3>Versorgung</h3>
  <table width=100%>
    <tr>
  <td align=left>
        {{basic.switch('L1','EG.Schlafen.Linie_Schlafzimmer.Schalten', icon1~'message_socket_on_off.png', icon0~'message_socket_on_off.png')}} Steckdosen Schlafzimmer
    </td>
  </tr>


</table>
</div>
</div>
</div>


<div class="block">
<div class=""set-2" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true">
<div data-role="collapsible" data-collapsed="false">
    <h3>Heizungs-Plot</h3>
  <table width=100%>
    <tr>
  <td align=left>
  
  {{ plot.rtr('plot_schlafen_1', 'EG.Schlafen.Heizung.ist', 'EG.Schlafen.Heizung.soll', 'EG.Schlafen.Heizung.status') }}        
  
  
<!--  {{ plot.period('plot_schlafen_',['EG.Schlafen.Heizung.ist', 'EG.Schlafen.Heizung.soll'], 'avg', '12h', 'now' , '', '',['#a0a' , '#a00'], ['line', 'line']) }}        
-->    </td>
  </tr>


</table>
</div>
</div>
</div>



{% endblock %}

und das steht im Widget:

/**
 * MDT Glass RTR (Room Temperatur Regulator)
 *
 */
{% macro rtr(id, gad_actual, gad_set_value, gad_set, gad_status, gad_heat_value, gad_uzsu, step) %}
{% import "basic.html" as basic %}
{% import "widget_uzsu.html" as uzsu %}

<div id="{{ uid(page, id) }}" data-widget="device.rtr" data-step="{{ step|default(0.5) }}" class="rtr">

    <div class="actual">
        <div class="temp">{{ basic.float(id~'actual', gad_actual, '&deg;C' ) }}</div>
    </div>

    <div class="set">
        <a data-role="button" data-icon="minus" data-inline="true" data-iconpos="notext" class="ui-mini"></a>
        <div class="temp" style="display:none;">{{ basic.float(id~'set', gad_set, '°' ) }}</div>
        <div class="temp">{{ basic.float(id~'set_value', gad_set_value, '&deg;C' ) }}</div>
        <a data-role="button" data-icon="plus" data-inline="true" data-iconpos="notext" class="ui-mini"></a>
    </div>

    <div class="control">
        {{ basic.switch(id~'mode', gad_status, icon1~'user_available.png', icon0~'user_away.png', '1', '2') }}
        {{ basic.switch(id~'night', gad_status, icon1~'scene_night.png', icon0~'scene_day.png', '3', '2') }}
        {{ basic.switch(id~'frost', gad_status, icon1~'weather_frost.png', icon0~'weather_frost.png', '4', '2') }}
        {{ basic.shifter(id~'shift', '', gad_heat_value, icon1~'sani_heating_series_00.png', icon0~'sani_heating_series_00.png',0,90 ) }}
        <div style="float:left; width: 3px; height: 50px;"></div>
        {{ uzsu.uzsu_icon(id~'uzsu',gad_uzsu,'Anwesend','0','','','list','Da:1,Weg:2,Nacht:3') }}
    </div>
</div>
{% endmacro %}

Beste Grüße,
Jürgen

[Sandman60]

Sollte doch eigentlich by default in der base.css im base-Ordner liegen? Hast Du da evtl. was gelöscht/modifiziert?

[MiWu]

Hallo Jürgen,

das CSS für das Widget ist pages/base/base.css . Dort sind (bei mir ab Zeile 1064) die Klassen für das Widget. rtr.actual enthält m. E. keine Zentrierung. Dass die Icons nicht nebeneinander passen, müsste an der vorgegebenen Breite von 220 px für die control-Klasse liegen. Ich habe das RTR-Wiget für meine Zwecke (Temp. / Feuchte / CO2-Sensor) auch gerade modifiziert und dazu in meiner visu.css entsprechende Klassen definiert.

Besten Gruß
Michael

[klotzek]

Guten Morgen,

die Base.css habe ich nicht angefasst.
@Michael: kannst Du vielleicht Deine visu.css hier posten? Ich hab schon lang nicht mehr gecsst.

Danke für Eure Hilfe,
Jürgen

[klotzek]

Hallo,

habe in der visu.css width auf 270px gesetzt und text-align = center eingefügt.
Hier das Ergebnis:
2015-10-07 11_32_27-Ege13.png

Alles prima, vielen Dank für Eure Hinweise.

Beste Grüße,
Jürgen

[yachti]

Was hast Du genau in der visu.css eingestellt? Die Werte sind bei mir zentriert aber das UZSU Icon ist wie in dem Bild oben in einer zusätzlichen Zeile.

[klotzek]

Hi Yachti,

hier aus meiner visu.css:

.rtr .control {
    padding: 5px 0 5px 0;
    width: 270px;
    height: 50px;
    margin: auto;
}

.rtr .set .temp {
    width: 80px;
    height: 48px;
    padding-top: 10px;
    text-align: center;}

.rtr .actual .temp {
    margin: 5px 0 5px 0;
    font-size: 1.4em;
    font-weight: bold;
    text-align: center;
  }

Wichtig ist, in control die Breite mit width: 270px; zu vergrößern. Im Standard sind es nur 220px; daher der Umbruch.

LG, Jürgen

[yachti]

Danke
passt
Gruß Michael