Ankündigung

Einklappen
Keine Ankündigung bisher.

Zentrierung in Widgets

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

    Zentrierung in Widgets

    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:
    Code:
    /**
    * -----------------------------------------------------------------------------
    * @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:
    Code:
    /**
     * 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
    Zuletzt geändert von klotzek; 22.10.2015, 09:25.

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

    Kommentar


      #3
      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

      Kommentar


        #4
        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

        Kommentar


          #5
          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

          Kommentar


            #6
            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.
            Meine Installation: VM Debian Buster SH NG 1.8.1, SmartVISU 3.0, KNX, DMX, 1-wire, Fortigate 30E IPS, VMware vSphere 6.7

            Kommentar


              #7
              Hi Yachti,

              hier aus meiner visu.css:
              Code:
              .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

              Kommentar


                #8
                Danke
                passt
                Gruß Michael
                Meine Installation: VM Debian Buster SH NG 1.8.1, SmartVISU 3.0, KNX, DMX, 1-wire, Fortigate 30E IPS, VMware vSphere 6.7

                Kommentar

                Lädt...
                X